diff --git a/FrontendFolder/switch-room/src/components/AppHeader.vue b/FrontendFolder/switch-room/src/components/AppHeader.vue
index 1727560fbed815825e7f31e58a160f1504a52bc0..d740af314cf396f9b7d877a323c958a6b5a1b6b7 100644
--- a/FrontendFolder/switch-room/src/components/AppHeader.vue
+++ b/FrontendFolder/switch-room/src/components/AppHeader.vue
@@ -9,7 +9,9 @@
         with other people who want to travel to your place.
       </p>
       <br />
-      <button>READ MORE</button>
+      <router-link to="/login">
+        <button>READ MORE</button>
+      </router-link>
     </div>
   </header>
 </template>
diff --git a/FrontendFolder/switch-room/src/components/LoginCard.vue b/FrontendFolder/switch-room/src/components/LoginCard.vue
new file mode 100644
index 0000000000000000000000000000000000000000..44f5b1eb78b9b1b65ea304fa89c10925b985912c
--- /dev/null
+++ b/FrontendFolder/switch-room/src/components/LoginCard.vue
@@ -0,0 +1,124 @@
+<template>
+  <div id="card">
+    <div id="card-content">
+      <div id="card-title">
+        <h2>LOGIN</h2>
+        <div class="underline-title"></div>
+      </div>
+      <form method="post" class="form">
+        <label for="user-email" style="padding-top: 13px">
+          &nbsp;Username
+        </label>
+        <input
+          id="user-email"
+          class="form-content"
+          type="email"
+          name="email"
+          autocomplete="on"
+          required
+        />
+        <div class="form-border"></div>
+        <label for="user-password" style="padding-top: 22px"
+          >&nbsp;Password
+        </label>
+        <input
+          id="user-password"
+          class="form-content"
+          type="password"
+          name="password"
+          required
+        />
+        <div class="form-border"></div>
+        <a href="#">
+          <legend id="forgot-pass">Forgot password?</legend>
+        </a>
+        <input id="submit-btn" type="submit" name="submit" value="LOGIN" />
+        <a href="#" id="signup">Don't have account yet?</a>
+      </form>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts"></script>
+
+<style scoped>
+a {
+  text-decoration: none;
+}
+label {
+  font-family: "Raleway", sans-serif;
+  font-size: 11pt;
+}
+#forgot-pass {
+  color: #2dbd6e;
+  font-family: "Raleway", sans-serif;
+  font-size: 10pt;
+  margin-top: 3px;
+  text-align: right;
+}
+#card {
+  background: #fbfbfb;
+  border-radius: 8px;
+  box-shadow: 1px 2px 8px rgba(0, 0, 0, 0.65);
+  height: 410px;
+  width: 329px;
+  margin-top: 20px;
+  margin-left: 50%;
+}
+#card-content {
+  padding: 12px 44px;
+}
+#card-title {
+  font-family: "Raleway Thin", sans-serif;
+  letter-spacing: 4px;
+  padding-bottom: 23px;
+  padding-top: 13px;
+  text-align: center;
+}
+#signup {
+  color: #2dbd6e;
+  font-family: "Raleway", sans-serif;
+  font-size: 10pt;
+  margin-top: 16px;
+  text-align: center;
+}
+#submit-btn {
+  background: -webkit-linear-gradient(right, #a6f77b, #2dbd6e);
+  border: none;
+  border-radius: 21px;
+  box-shadow: 0px 1px 8px #24c64f;
+  cursor: pointer;
+  color: white;
+  font-family: "Raleway SemiBold", sans-serif;
+  height: 42.3px;
+  margin: 0 auto;
+  margin-top: 50px;
+  transition: 0.25s;
+  width: 153px;
+}
+#submit-btn:hover {
+  box-shadow: 0px 1px 18px #24c64f;
+}
+.form {
+  align-items: left;
+  display: flex;
+  flex-direction: column;
+}
+.form-border {
+  background: -webkit-linear-gradient(right, #a6f77b, #2ec06f);
+  height: 1px;
+  width: 100%;
+}
+.form-content {
+  background: #fbfbfb;
+  border: none;
+  outline: none;
+  padding-top: 14px;
+}
+.underline-title {
+  background: -webkit-linear-gradient(right, #a6f77b, #2ec06f);
+  height: 2px;
+  margin: -1.1rem auto 0 auto;
+  width: 89px;
+}
+</style>
diff --git a/FrontendFolder/switch-room/src/router/index.ts b/FrontendFolder/switch-room/src/router/index.ts
index ae1633874755b16e76db8131a901617df42f9146..ddbba4ec0e4d0461e7b3a339fcb219573fa5dd7b 100644
--- a/FrontendFolder/switch-room/src/router/index.ts
+++ b/FrontendFolder/switch-room/src/router/index.ts
@@ -1,5 +1,6 @@
 import { createRouter, createWebHistory, RouteRecordRaw } from "vue-router";
 import HomeView from "../views/HomeView.vue";
+import LoginView from "../views/LoginView.vue";
 
 const routes: Array<RouteRecordRaw> = [
   {
@@ -8,13 +9,10 @@ const routes: Array<RouteRecordRaw> = [
     component: HomeView,
   },
   {
-    path: "/about",
-    name: "about",
-    // route level code-splitting
-    // this generates a separate chunk (about.[hash].js) for this route
-    // which is lazy-loaded when the route is visited.
-    component: () =>
-      import(/* webpackChunkName: "about" */ "../views/AboutView.vue"),
+    path: "/login",
+    name: "login",
+    component: LoginView,
+
   },
 ];
 
diff --git a/FrontendFolder/switch-room/src/views/LoginView.vue b/FrontendFolder/switch-room/src/views/LoginView.vue
new file mode 100644
index 0000000000000000000000000000000000000000..c6641ffcf5e396b36e7c290fe10e0360b340a118
--- /dev/null
+++ b/FrontendFolder/switch-room/src/views/LoginView.vue
@@ -0,0 +1,11 @@
+<template>
+<login-card></login-card>
+</template>
+
+<script setup lang="ts">
+import LoginCard from "@/components/LoginCard.vue";
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file