diff --git a/frontend/login.html b/frontend/login.html
deleted file mode 100644
index 34b8572..0000000
--- a/frontend/login.html
+++ /dev/null
@@ -1,29 +0,0 @@
-<!DOCTYPE html>
-<html>
-  <body>
-    <div class="logBoxCenterer">
-      <div class='loginBox'>
-        <div class="form">
-          <h1 style="color:rgb(239,60,168); font-family: sans-serif;">SIGN IN</h1>
-          <div class="inputBox">
-            <p>USERNAME</p>
-            <input type="text" required>
-          </div>
-          <div class="inputBox">
-            <p>PASSWORD</p>
-            <input type="password" required>
-          </div>
-          <div class="register">
-            <a>Register</a>
-          </div>
-          <div class="inputBox">
-            <input type="submit" value="Login">
-          </div>
-        </div>
-      </div>
-    </div>
-    <script type="module" src="/src/main.js"></script>
-  </body>
-</html>
-
-
diff --git a/frontend/src/assets/styleLogin.css b/frontend/src/Login.vue
similarity index 62%
rename from frontend/src/assets/styleLogin.css
rename to frontend/src/Login.vue
index ea883d8..52e7e19 100644
--- a/frontend/src/assets/styleLogin.css
+++ b/frontend/src/Login.vue
@@ -1,3 +1,30 @@
+<template>
+  <body>
+    <div class="logBoxCenterer">
+      <div class='loginBox'>
+        <div class="form">
+          <h1 style="color:rgb(239,60,168); font-family: sans-serif;">SIGN IN</h1>
+          <div class="inputBox">
+            <p>USERNAME</p>
+            <input type="text" required>
+          </div>
+          <div class="inputBox">
+            <p>PASSWORD</p>
+            <input type="password" required>
+          </div>
+          <div class="register">
+            <a>Register</a>
+          </div>
+          <div class="inputBox">
+            <input type="submit" value="Login">
+          </div>
+        </div>
+      </div>
+    </div>
+  </body>
+</template>
+
+<style scoped>
 
 .logBoxCenterer {
   position: absolute;
@@ -75,3 +102,4 @@ input[type = "submit"]:active{
 }
 
 
+</style>
diff --git a/frontend/src/login.js b/frontend/src/login.js
new file mode 100644
index 0000000..59eb2ea
--- /dev/null
+++ b/frontend/src/login.js
@@ -0,0 +1,6 @@
+import './assets/main.css'
+
+import { createApp } from 'vue'
+import App from './Login.vue'
+
+createApp(App).mount('#login')
diff --git a/frontend/src/main.js b/frontend/src/main.js
index cd29b9e..59b267a 100644
--- a/frontend/src/main.js
+++ b/frontend/src/main.js
@@ -1,5 +1,4 @@
 import './assets/main.css'
-import './assets/styleLogin.css'
 import 'vue3-toastify/dist/index.css';
 
 import { createApp } from 'vue'
