diff --git a/frontend/index.css b/frontend/index.css
index 2736ee1..d34c94b 100644
--- a/frontend/index.css
+++ b/frontend/index.css
@@ -1,8 +1,34 @@
+.flex {
+    margin-left: 0;
+}
+
+
 .loginSpacer {
     height: 33%;
 }
 
-#menu {
+#login {
+    width: 100%;
+    height: 100%;
+}
+
+#content {
+    height: 85%;
     width: 100%;
     padding: 5%;
+}
+
+#menu {
+    height: 5%;
+    width: 100%;
+    padding: 5%;
+}
+#mainPage {
+    width: 100%;
+    height: 100%;
+}
+
+.screen {
+    width: 95%;
+    height: 100%;
 }
\ No newline at end of file
diff --git a/frontend/index.html b/frontend/index.html
index a672499..de7f03f 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -9,7 +9,7 @@
   </head>
   <body>
     <script src="/frontend/index.js"></script>
-    <div id="login" class="flex three" style="height: 100%">
+    <div id="login" class="flex three">
       <div class="fourth two-fifth-1000"></div>
       <div class="flex one half fifth-1000" style="height: 100%">
         <div class="loginSpacer"></div>
@@ -26,14 +26,14 @@
     </div>
     <div id="mainPage" style="display: none;">
       <div id="content">
-        <div id="tasks"></div>
-        <div id="history"></div>
-        <div id="addTask"></div>
+        <div id="tasks" class="screen" style="">a</div>
+        <div id="history" class="screen" style="display: none;">b</div>
+        <div id="addTask" class="screen" style="display: none;">c</div>
       </div>
       <div id="menu" class="flex three">
-        <button class="third">Tasks</button>
-        <button class="third">History</button>
-        <button class="third">Add Task</button>
+        <button class="third" onclick="switchScreen('task')" id="taskButton">Tasks</button>
+        <button class="third" onclick="switchScreen('history')" id="historyButton">History</button>
+        <button class="third" onclick="switchScreen('add')" id="addButton">Add Task</button>
       </div>
     </div>
   </body>
diff --git a/frontend/index.js b/frontend/index.js
index 4db2d55..7c13b3c 100644
--- a/frontend/index.js
+++ b/frontend/index.js
@@ -23,4 +23,18 @@ async function login() {
         document.getElementById("login").setAttribute("style", "display: none;");
         document.getElementById("mainPage").setAttribute("style", "");
     }
+}
+
+function switchScreen(button) {
+    document.getElementById("tasks").setAttribute("style", "display: none;");
+    document.getElementById("history").setAttribute("style", "display: none;");
+    document.getElementById("addTask").setAttribute("style", "display: none;");
+
+    if (button === "task") {
+        document.getElementById("tasks").setAttribute("style", "");
+    } else if (button === "history") {
+        document.getElementById("history").setAttribute("style", "");
+    } else if (button === "add") {
+        document.getElementById("addTask").setAttribute("style", "");
+    }
 }
\ No newline at end of file
