diff --git a/frontend/src/pages/index.vue b/frontend/src/pages/index.vue
index f296f86..c22447d 100644
--- a/frontend/src/pages/index.vue
+++ b/frontend/src/pages/index.vue
@@ -1,207 +1,173 @@
 <script setup lang="ts">
-	import TextField from '@/components/Form/TextField.vue';
-	import { useNotifier } from '@/composables/use-notifier';
-	import { usePublicApi } from '@/composables/use-api';
-	import { useAuthStore } from '@/store/auth';
-	useHead({
-		title: 'Homebox | Organize and Tag Your Stuff',
-	});
+  import TextField from '@/components/Form/TextField.vue';
+  import { useNotifier } from '@/composables/use-notifier';
+  import { usePublicApi } from '@/composables/use-api';
+  import { useAuthStore } from '@/store/auth';
+  useHead({
+    title: 'Homebox | Organize and Tag Your Stuff',
+  });
 
-	const registerFields = [
-		{
-			label: "What's your name?",
-			value: '',
-		},
-		{
-			label: "What's your email?",
-			value: '',
-		},
-		{
-			label: 'Name your group',
-			value: '',
-		},
-		{
-			label: 'Set your password',
-			value: '',
-			type: 'password',
-		},
-		{
-			label: 'Confirm your password',
-			value: '',
-			type: 'password',
-		},
-	];
+  const registerFields = [
+    {
+      label: "What's your name?",
+      value: '',
+    },
+    {
+      label: "What's your email?",
+      value: '',
+    },
+    {
+      label: 'Name your group',
+      value: '',
+    },
+    {
+      label: 'Set your password',
+      value: '',
+      type: 'password',
+    },
+    {
+      label: 'Confirm your password',
+      value: '',
+      type: 'password',
+    },
+  ];
 
-	const api = usePublicApi();
+  const api = usePublicApi();
 
-	async function registerUser() {
-		loading.value = true;
-		// Print Values of registerFields
+  async function registerUser() {
+    loading.value = true;
+    // Print Values of registerFields
 
-		const { data, error } = await api.register({
-			user: {
-				name: registerFields[0].value,
-				email: registerFields[1].value,
-				password: registerFields[3].value,
-			},
-			groupName: registerFields[2].value,
-		});
+    const { data, error } = await api.register({
+      user: {
+        name: registerFields[0].value,
+        email: registerFields[1].value,
+        password: registerFields[3].value,
+      },
+      groupName: registerFields[2].value,
+    });
 
-		if (error) {
-			toast.error('Problem registering user');
-		} else {
-			toast.success('User registered');
-		}
+    if (error) {
+      toast.error('Problem registering user');
+    } else {
+      toast.success('User registered');
+    }
 
-		console.log(data);
-		loading.value = false;
-	}
+    console.log(data);
+    loading.value = false;
+  }
 
-	const loginFields = [
-		{
-			label: 'Email',
-			value: '',
-		},
-		{
-			label: 'Password',
-			value: '',
-			type: 'password',
-		},
-	];
+  const loginFields = [
+    {
+      label: 'Email',
+      value: '',
+    },
+    {
+      label: 'Password',
+      value: '',
+      type: 'password',
+    },
+  ];
 
-	const authStore = useAuthStore();
+  const authStore = useAuthStore();
 
-	const toast = useNotifier();
-	const loading = ref(false);
+  const toast = useNotifier();
+  const loading = ref(false);
 
-	const router = useRouter();
+  const router = useRouter();
 
-	async function login() {
-		loading.value = true;
-		const { data, error } = await api.login(
-			loginFields[0].value,
-			loginFields[1].value
-		);
+  async function login() {
+    loading.value = true;
+    const { data, error } = await api.login(loginFields[0].value, loginFields[1].value);
 
-		if (error) {
-			toast.error('Invalid email or password');
-		} else {
-			toast.success('Logged in successfully');
+    if (error) {
+      toast.error('Invalid email or password');
+    } else {
+      toast.success('Logged in successfully');
 
-			console.log(data);
+      console.log(data);
 
-			authStore.$patch({
-				token: data.token,
-				expires: data.expiresAt,
-			});
+      authStore.$patch({
+        token: data.token,
+        expires: data.expiresAt,
+      });
 
-			router.push({ name: 'home' });
-		}
-		loading.value = false;
-	}
+      router.push({ name: 'home' });
+    }
+    loading.value = false;
+  }
 
-	const registerForm = ref(false);
-	function toggleLogin() {
-		registerForm.value = !registerForm.value;
-	}
+  const registerForm = ref(false);
+  function toggleLogin() {
+    registerForm.value = !registerForm.value;
+  }
 </script>
 
 <template>
-	<header class="sm:px-6 py-2 lg:p-14 sm:py-6">
-		<h2
-			class="mt-1 text-4xl font-bold tracking-tight text-gray-200 sm:text-5xl lg:text-6xl"
-		>
-			Homebox
-		</h2>
-		<p class="ml-1 text-lg text-gray-400">
-			Track, Organize, and Manage your Shit.
-		</p>
-	</header>
-	<div class="grid p-6 sm:place-items-center min-h-[50vh]">
-		<Transition name="slide-fade">
-			<form v-if="registerForm" @submit.prevent="registerUser">
-				<div
-					class="card w-max-[500px] md:w-[500px] bg-base-100 shadow-xl"
-				>
-					<div class="card-body">
-						<h2 class="card-title">Register</h2>
-						<TextField
-							v-for="field in registerFields"
-							v-model="field.value"
-							:label="field.label"
-							:key="field.label"
-							:type="field.type"
-						/>
-						<div class="card-actions justify-end">
-							<button
-								type="submit"
-								class="btn btn-primary mt-2"
-								:class="loading ? 'loading' : ''"
-								:disabled="loading"
-							>
-								Register
-							</button>
-						</div>
-					</div>
-				</div>
-			</form>
-			<form v-else @submit.prevent="login">
-				<div
-					class="card w-max-[500px] md:w-[500px] bg-base-100 shadow-xl"
-				>
-					<div class="card-body">
-						<h2 class="card-title">Login</h2>
-						<TextField
-							v-for="field in loginFields"
-							v-model="field.value"
-							:label="field.label"
-							:key="field.label"
-							:type="field.type"
-						/>
-						<div class="card-actions justify-end mt-2">
-							<button
-								type="submit"
-								class="btn btn-primary"
-								:class="loading ? 'loading' : ''"
-								:disabled="loading"
-							>
-								Login
-							</button>
-						</div>
-					</div>
-				</div>
-			</form>
-		</Transition>
-		<div class="text-center mt-2">
-			<button @click="toggleLogin">
-				{{
-					registerForm
-						? 'Already a User? Login'
-						: 'Not a User? Register'
-				}}
-			</button>
-		</div>
-	</div>
-	<div class="min-w-full absolute bottom-0 z-[-1]">
-		<svg
-			xmlns="http://www.w3.org/2000/svg"
-			preserveAspectRatio="none"
-			viewBox="0 0 1440 320"
-		>
-			<path
-				fill="#0099ff9b"
-				fill-opacity="1"
-				d="M0,32L30,42.7C60,53,120,75,180,80C240,85,300,75,360,80C420,85,480,107,540,128C600,149,660,171,720,160C780,149,840,107,900,90.7C960,75,1020,85,1080,122.7C1140,160,1200,224,1260,234.7C1320,245,1380,203,1410,181.3L1440,160L1440,320L1410,320C1380,320,1320,320,1260,320C1200,320,1140,320,1080,320C1020,320,960,320,900,320C840,320,780,320,720,320C660,320,600,320,540,320C480,320,420,320,360,320C300,320,240,320,180,320C120,320,60,320,30,320L0,320Z"
-			/>
-		</svg>
-		<div class="bg-[#0099ff9b] flex-col flex min-h-[32vh]">
-			<div class="mt-auto mx-auto mb-8">
-				<p class="text-center text-gray-200">
-					&copy; 2022 Contents. All Rights Reserved. Haybytes LLC
-				</p>
-			</div>
-		</div>
-	</div>
+  <header class="sm:px-6 py-2 lg:p-14 sm:py-6">
+    <h2 class="mt-1 text-4xl font-bold tracking-tight text-base-content sm:text-5xl lg:text-6xl">Homebox</h2>
+    <p class="ml-1 text-lg text-base-content/50">Track, Organize, and Manage your Shit.</p>
+  </header>
+  <div class="grid p-6 sm:place-items-center min-h-[50vh]">
+    <Transition name="slide-fade">
+      <form v-if="registerForm" @submit.prevent="registerUser">
+        <div class="card w-max-[500px] md:w-[500px] bg-base-100 shadow-xl">
+          <div class="card-body">
+            <h2 class="card-title">Register</h2>
+            <TextField
+              v-for="field in registerFields"
+              v-model="field.value"
+              :label="field.label"
+              :key="field.label"
+              :type="field.type"
+            />
+            <div class="card-actions justify-end">
+              <button type="submit" class="btn btn-primary mt-2" :class="loading ? 'loading' : ''" :disabled="loading">
+                Register
+              </button>
+            </div>
+          </div>
+        </div>
+      </form>
+      <form v-else @submit.prevent="login">
+        <div class="card w-max-[500px] md:w-[500px] bg-base-100 shadow-xl">
+          <div class="card-body">
+            <h2 class="card-title">Login</h2>
+            <TextField
+              v-for="field in loginFields"
+              v-model="field.value"
+              :label="field.label"
+              :key="field.label"
+              :type="field.type"
+            />
+            <div class="card-actions justify-end mt-2">
+              <button type="submit" class="btn btn-primary" :class="loading ? 'loading' : ''" :disabled="loading">
+                Login
+              </button>
+            </div>
+          </div>
+        </div>
+      </form>
+    </Transition>
+    <div class="text-center mt-2">
+      <button @click="toggleLogin">
+        {{ registerForm ? 'Already a User? Login' : 'Not a User? Register' }}
+      </button>
+    </div>
+  </div>
+  <div class="min-w-full absolute bottom-0 z-[-1]">
+    <svg class="fill-primary" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" viewBox="0 0 1440 320">
+      <path
+        fill-opacity="1"
+        d="M0,32L30,42.7C60,53,120,75,180,80C240,85,300,75,360,80C420,85,480,107,540,128C600,149,660,171,720,160C780,149,840,107,900,90.7C960,75,1020,85,1080,122.7C1140,160,1200,224,1260,234.7C1320,245,1380,203,1410,181.3L1440,160L1440,320L1410,320C1380,320,1320,320,1260,320C1200,320,1140,320,1080,320C1020,320,960,320,900,320C840,320,780,320,720,320C660,320,600,320,540,320C480,320,420,320,360,320C300,320,240,320,180,320C120,320,60,320,30,320L0,320Z"
+      />
+    </svg>
+    <div class="bg-primary flex-col flex min-h-[32vh]">
+      <div class="mt-auto mx-auto mb-8">
+        <p class="text-center text-gray-200">&copy; 2022 Contents. All Rights Reserved. Haybytes LLC</p>
+      </div>
+    </div>
+  </div>
 </template>
 
 <route lang="yaml">
@@ -209,14 +175,14 @@ name: login
 </route>
 
 <style lang="css" scoped>
-	.slide-fade-enter-active {
-		transition: all 0.2s ease-out;
-	}
+  .slide-fade-enter-active {
+    transition: all 0.2s ease-out;
+  }
 
-	.slide-fade-enter-from,
-	.slide-fade-leave-to {
-		position: absolute;
-		transform: translateX(20px);
-		opacity: 0;
-	}
+  .slide-fade-enter-from,
+  .slide-fade-leave-to {
+    position: absolute;
+    transform: translateX(20px);
+    opacity: 0;
+  }
 </style>