diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 4df0c4b..0d88c25 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -1,6 +1,14 @@
 {
-  "name": "frontend",
-  "lockfileVersion": 2,
   "requires": true,
-  "packages": {}
+  "lockfileVersion": 1,
+  "dependencies": {
+    "@popperjs/core": {
+      "version": "2.11.6",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.6.tgz",
+      "integrity": "sha512-50/17A98tWUfQ176raKiOGXuYpLyyVMkxxG6oylzL3BPOlA6ADGdK7EYunSa4I064xerltq9TGXs8HmOk5E+vw=="
+    },
+    "svelte_pages": {
+      "version": "file:svelte"
+    }
+  }
 }
diff --git a/frontend/svelte/package-lock.json b/frontend/svelte/package-lock.json
index 3586104..fac15d2 100644
--- a/frontend/svelte/package-lock.json
+++ b/frontend/svelte/package-lock.json
@@ -1,16 +1,16 @@
 {
-	"name": "svelte",
+	"name": "svelte_pages",
 	"version": "0.0.1",
 	"lockfileVersion": 2,
 	"requires": true,
 	"packages": {
 		"": {
-			"name": "svelte",
+			"name": "svelte_pages",
 			"version": "0.0.1",
 			"devDependencies": {
 				"@sveltejs/adapter-auto": "next",
 				"@sveltejs/kit": "next",
-				"svelte": "^3.44.0",
+				"@types/bootstrap": "^5.2.4",
 				"svelte-check": "^2.7.1",
 				"svelte-preprocess": "^4.10.6",
 				"tslib": "^2.3.1",
@@ -171,6 +171,16 @@
 			"integrity": "sha512-a5Sab1C4/icpTZVzZc5Ghpz88yQtGOyNqYXcZgOssB2uuAr+wF/MvN6bgtW32q7HHrvBki+BsZ0OuNv6EV3K9g==",
 			"dev": true
 		},
+		"node_modules/@popperjs/core": {
+			"version": "2.11.6",
+			"resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.6.tgz",
+			"integrity": "sha512-50/17A98tWUfQ176raKiOGXuYpLyyVMkxxG6oylzL3BPOlA6ADGdK7EYunSa4I064xerltq9TGXs8HmOk5E+vw==",
+			"dev": true,
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/popperjs"
+			}
+		},
 		"node_modules/@rollup/pluginutils": {
 			"version": "4.2.1",
 			"resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-4.2.1.tgz",
@@ -286,6 +296,15 @@
 				}
 			}
 		},
+		"node_modules/@types/bootstrap": {
+			"version": "5.2.4",
+			"resolved": "https://registry.npmjs.org/@types/bootstrap/-/bootstrap-5.2.4.tgz",
+			"integrity": "sha512-jGNB81zuDHu1DPvBV7Ox3Z3eyzdWPNguYwrt0j7X90VExA8H7c6qxJh0cz5j3xp0XvSy1TYaP2pkyXCHeo8CaA==",
+			"dev": true,
+			"dependencies": {
+				"@popperjs/core": "^2.9.2"
+			}
+		},
 		"node_modules/@types/cookie": {
 			"version": "0.5.1",
 			"resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.5.1.tgz",
@@ -2037,6 +2056,7 @@
 			"resolved": "https://registry.npmjs.org/svelte/-/svelte-3.50.1.tgz",
 			"integrity": "sha512-bS4odcsdj5D5jEg6riZuMg5NKelzPtmsCbD9RG+8umU03TeNkdWnP6pqbCm0s8UQNBkqk29w/Bdubn3C+HWSwA==",
 			"dev": true,
+			"peer": true,
 			"engines": {
 				"node": ">= 8"
 			}
@@ -2463,6 +2483,12 @@
 			"integrity": "sha512-a5Sab1C4/icpTZVzZc5Ghpz88yQtGOyNqYXcZgOssB2uuAr+wF/MvN6bgtW32q7HHrvBki+BsZ0OuNv6EV3K9g==",
 			"dev": true
 		},
+		"@popperjs/core": {
+			"version": "2.11.6",
+			"resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.6.tgz",
+			"integrity": "sha512-50/17A98tWUfQ176raKiOGXuYpLyyVMkxxG6oylzL3BPOlA6ADGdK7EYunSa4I064xerltq9TGXs8HmOk5E+vw==",
+			"dev": true
+		},
 		"@rollup/pluginutils": {
 			"version": "4.2.1",
 			"resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-4.2.1.tgz",
@@ -2551,6 +2577,15 @@
 				"svelte-hmr": "^0.15.0"
 			}
 		},
+		"@types/bootstrap": {
+			"version": "5.2.4",
+			"resolved": "https://registry.npmjs.org/@types/bootstrap/-/bootstrap-5.2.4.tgz",
+			"integrity": "sha512-jGNB81zuDHu1DPvBV7Ox3Z3eyzdWPNguYwrt0j7X90VExA8H7c6qxJh0cz5j3xp0XvSy1TYaP2pkyXCHeo8CaA==",
+			"dev": true,
+			"requires": {
+				"@popperjs/core": "^2.9.2"
+			}
+		},
 		"@types/cookie": {
 			"version": "0.5.1",
 			"resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.5.1.tgz",
@@ -3735,7 +3770,8 @@
 			"version": "3.50.1",
 			"resolved": "https://registry.npmjs.org/svelte/-/svelte-3.50.1.tgz",
 			"integrity": "sha512-bS4odcsdj5D5jEg6riZuMg5NKelzPtmsCbD9RG+8umU03TeNkdWnP6pqbCm0s8UQNBkqk29w/Bdubn3C+HWSwA==",
-			"dev": true
+			"dev": true,
+			"peer": true
 		},
 		"svelte-check": {
 			"version": "2.9.0",
diff --git a/frontend/svelte/package.json b/frontend/svelte/package.json
index 3086444..83c87fc 100644
--- a/frontend/svelte/package.json
+++ b/frontend/svelte/package.json
@@ -1,5 +1,5 @@
 {
-	"name": "svelte",
+	"name": "svelte_pages",
 	"version": "0.0.1",
 	"private": true,
 	"scripts": {
@@ -12,7 +12,7 @@
 	"devDependencies": {
 		"@sveltejs/adapter-auto": "next",
 		"@sveltejs/kit": "next",
-		"svelte": "^3.44.0",
+		"@types/bootstrap": "^5.2.4",
 		"svelte-check": "^2.7.1",
 		"svelte-preprocess": "^4.10.6",
 		"tslib": "^2.3.1",
diff --git a/frontend/svelte/src/routes/login/+page.svelte b/frontend/svelte/src/routes/login/+page.svelte
index 67ae89f..387a8e5 100644
--- a/frontend/svelte/src/routes/login/+page.svelte
+++ b/frontend/svelte/src/routes/login/+page.svelte
@@ -2,3 +2,70 @@
 
 </script>
 
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>PomeloNote | Login</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
+</head>
+
+<main class="form-signin w-100 m-auto">
+    <form>
+        <img class="mb-4" src="/docs/5.2/assets/brand/bootstrap-logo.svg" alt="Logo" width="72" height="57">
+        <h1 class="h3 mb-3 fw-normal">Please sign in</h1>
+
+        <div class="form-floating">
+            <input type="email" class="form-control" id="floatingInput" placeholder="name@example.com">
+            <label for="floatingInput">Email address</label>
+        </div>
+        <div class="form-floating">
+            <input type="password" class="form-control" id="floatingPassword" placeholder="Password">
+            <label for="floatingPassword">Password</label>
+        </div>
+
+        <div class="checkbox mb-3">
+            <label>
+                <input type="checkbox" value="remember-me"> Remember me
+            </label>
+        </div>
+        <button class="w-100 btn btn-lg btn-primary" type="submit">Sign in</button>
+        <p class="mt-5 mb-3 text-muted">&copy; 2017–2022</p>
+    </form>
+</main>
+
+
+<style>
+    html,
+    body {
+        height: 100%;
+    }
+
+    body {
+        display: flex;
+        align-items: center;
+        padding-top: 40px;
+        padding-bottom: 40px;
+        background-color: #f5f5f5;
+    }
+
+    .form-signin {
+        max-width: 330px;
+        padding: 15px;
+    }
+
+    .form-signin .form-floating:focus-within {
+        z-index: 2;
+    }
+
+    .form-signin input[type="email"] {
+        margin-bottom: -1px;
+        border-bottom-right-radius: 0;
+        border-bottom-left-radius: 0;
+    }
+
+    .form-signin input[type="password"] {
+        margin-bottom: 10px;
+        border-top-left-radius: 0;
+        border-top-right-radius: 0;
+    }
+</style>
\ No newline at end of file
diff --git a/frontend/svelte/tsconfig.json b/frontend/svelte/tsconfig.json
index 6ae0c8c..74e5718 100644
--- a/frontend/svelte/tsconfig.json
+++ b/frontend/svelte/tsconfig.json
@@ -4,6 +4,7 @@
 		"allowJs": true,
 		"checkJs": true,
 		"esModuleInterop": true,
+		"moduleResolution": "node",
 		"forceConsistentCasingInFileNames": true,
 		"resolveJsonModule": true,
 		"skipLibCheck": true,