diff --git a/index.html b/index.html
index c46c3dd..0cd3e18 100644
--- a/index.html
+++ b/index.html
@@ -5,8 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Router Dashboard</title>
   </head>
-  <body>
-    <div id="app"></div>
+  <body id="app">
     <script type="module" src="/src/main.ts"></script>
   </body>
 </html>
diff --git a/src/components/Navbar.vue b/src/components/Navbar.vue
index 5008f28..d75aa0a 100644
--- a/src/components/Navbar.vue
+++ b/src/components/Navbar.vue
@@ -13,12 +13,16 @@
     <h1>Router</h1>
     <div>
       <ul>
-        <li>
-          Basic
-        </li>
-        <li>
-          Advanced
-        </li>
+        <RouterLink to="/basic">
+          <li>
+            Basic
+          </li>
+        </RouterLink>
+        <RouterLink to="/advance">
+          <li>
+            Advanced
+          </li>
+        </RouterLink>
       </ul>
       <div class="popup">
         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" @mouseover="apperanceModePopup = true" @mouseleave="apperanceModePopup = false">
diff --git a/src/pages/AdvancedDashboard.vue b/src/pages/AdvancedDashboard.vue
index 66694ca..7bd5401 100644
--- a/src/pages/AdvancedDashboard.vue
+++ b/src/pages/AdvancedDashboard.vue
@@ -1,3 +1,14 @@
+<script lang="ts">
+  import Navbar from '../components/Navbar.vue';
+
+  export default {
+    components: {
+      Navbar,
+    }
+  }
+</script>
+
 <template>
+  <Navbar/>
   <h1>Advance Dashboard</h1>
 </template>
\ No newline at end of file
diff --git a/src/pages/LoginPage.vue b/src/pages/LoginPage.vue
index efac37b..d283eee 100644
--- a/src/pages/LoginPage.vue
+++ b/src/pages/LoginPage.vue
@@ -1,3 +1,16 @@
 <template>
-  <h1>Login Dashboard</h1>
-</template>
\ No newline at end of file
+  <div class="center">
+    <div id="login">
+      <h2>Welcome Back!</h2>
+      <form>
+        <h3>Username</h3>
+        <input type="text"/>
+        <h3>Password</h3>
+        <input type="password"/>
+      </form>
+      <button>Sign in</button>
+    </div>
+  </div>
+</template>
+
+<style src="../styles/login.css" scoped></style>
\ No newline at end of file
diff --git a/src/styles/login.css b/src/styles/login.css
new file mode 100644
index 0000000..55daa1b
--- /dev/null
+++ b/src/styles/login.css
@@ -0,0 +1,42 @@
+#login {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 20px;
+  background-color: #0f0f0f;
+  height: 500px;
+  width: 400px;
+  border-radius: var(--border-radius);
+
+  h2 {
+    font-size: 2.5rem;
+    text-align: center;
+  }
+  form {
+    width: 80%;
+
+    input {
+      background-color: #000;
+      border: none;
+      color: inherit;
+      height: 40px;
+      width: 100%;
+      border-radius: 5px;
+      padding: 5px;
+    }
+  }
+  button {
+    color: inherit;
+    background-color: #000;
+    border: none;
+    height: 40px;
+    width: 70px;
+    border-radius: 5px;
+    transition: 0.3s background-color;
+    cursor: pointer;
+  }
+  button:hover {
+    background-color: rgb(0, 132, 255);
+  }
+}
\ No newline at end of file
diff --git a/src/styles/main.css b/src/styles/main.css
index f4c174a..5dd6c46 100644
--- a/src/styles/main.css
+++ b/src/styles/main.css
@@ -11,13 +11,20 @@
 * {
   margin: 0;
   padding: 0;
+  box-sizing: border-box;
 }
 
 body {
-  background-color: rgb(22, 22, 22);
-  color: white;
-  margin: 20px;
+  background-color: #161616;
+  color: #fff;
   font-family: Noto-Sans, sans-serif;
+  min-height: 100vh;
+  padding: 20px;
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
 }
 
 #navbar {
@@ -28,6 +35,7 @@ body {
   height: 40px;
   padding: 10px;
   border-radius: 20px;
+  box-sizing: content-box;
 
   div {
     display: inherit;
@@ -49,7 +57,7 @@ body {
     }
   }
   svg {
-    width: 25px;
+    width: 20px;
     color: white;
     cursor: pointer;
     transition: 0.3s color;
@@ -77,4 +85,11 @@ body {
     transform: translate(-50%, 0);
     margin-top: 5px;
   }
+}
+
+.center {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: calc(100vh - var(--padding) * 2);
 }
\ No newline at end of file
