diff --git a/frontend/svelte/src/customBootstrap.css b/frontend/svelte/src/customBootstrap.css
new file mode 100644
index 0000000..311d8a4
--- /dev/null
+++ b/frontend/svelte/src/customBootstrap.css
@@ -0,0 +1,29 @@
+
+html,
+:root {
+    --main-txt-color: black;
+    --cross-txt-color: red;
+
+    --color-primary: #fff494;
+    --color-primary-600: #fff17a;
+    --color-primary-700: #ffec47;
+    --color-primary-800: #ffe714;
+    --color-primary-900: #e0c900;
+}
+
+.btn-primary {
+    background-color: var(--color-primary-800) !important;
+    border: var(--color-primary-800) !important;
+    color: var(--main-txt-color) !important;
+}
+
+.btn-primary:hover {
+    background-color: var(--color-primary-900) !important;
+    border: var(--color-primary-900) !important;
+    color: var(--main-txt-color) !important;
+}
+
+.btn-primary:disabled {
+    background-color: var(--color-primary-700) !important;
+    border: var(--color-primary-700) !important;
+}
\ No newline at end of file
diff --git a/frontend/svelte/src/routes/login/+page.svelte b/frontend/svelte/src/routes/login/+page.svelte
index fee4156..af9b27e 100644
--- a/frontend/svelte/src/routes/login/+page.svelte
+++ b/frontend/svelte/src/routes/login/+page.svelte
@@ -69,7 +69,7 @@
     <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" bind:value={user}>
+        <input type="text" class="form-control" id="floatingInput" placeholder="name@example.com" bind:value={user}>
         <label for="floatingInput">Email address or username</label>
     </div>
     <div class="form-floating">
@@ -91,42 +91,13 @@
 </body>
 </html>
 
-
 <style>
-    html,
-    body {
-        height: 100%;
-    }
-
-    body {
-        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;
-    }
+    @import "../../userInput.css";
+    @import "../../customBootstrap.css";
 
     .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;
-    }
-
-    .img-fluid{
-        margin-bottom: 15px;
+        margin-bottom: -1px !important;
+        border-bottom-right-radius: 0 !important;
+        border-bottom-left-radius: 0 !important;
     }
 </style>
\ No newline at end of file
diff --git a/frontend/svelte/src/routes/register/+page.svelte b/frontend/svelte/src/routes/register/+page.svelte
index 88e7cea..006c1a9 100644
--- a/frontend/svelte/src/routes/register/+page.svelte
+++ b/frontend/svelte/src/routes/register/+page.svelte
@@ -88,46 +88,6 @@
 </html>
 
 <style>
-    html,
-    body {
-        height: 100%;
-    }
-
-    body {
-        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="text"] {
-        margin-bottom: -1px;
-        border-bottom-right-radius: 0;
-        border-bottom-left-radius: 0;
-    }
-
-    .form-signin input[type="email"] {
-        margin-bottom: -1px;
-        border-radius: 0;
-    }
-
-
-    .form-signin input[type="password"] {
-        margin-bottom: 10px;
-        border-top-left-radius: 0;
-        border-top-right-radius: 0;
-    }
-
-    .img-fluid {
-        margin-bottom: 15px;
-    }
+    @import "../../userInput.css";
+    @import "../../customBootstrap.css";
 </style>
\ No newline at end of file
diff --git a/frontend/svelte/src/userInput.css b/frontend/svelte/src/userInput.css
new file mode 100644
index 0000000..877e674
--- /dev/null
+++ b/frontend/svelte/src/userInput.css
@@ -0,0 +1,41 @@
+html,
+body {
+    height: 100%;
+}
+
+body {
+    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="text"] {
+    margin-bottom: -1px;
+    border-bottom-right-radius: 0;
+    border-bottom-left-radius: 0;
+}
+
+.form-signin input[type="email"] {
+    margin-bottom: -1px;
+    border-radius: 0;
+}
+
+.form-signin input[type="password"] {
+    margin-bottom: 10px;
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+}
+
+.img-fluid {
+    margin-bottom: 15px;
+}
\ No newline at end of file