diff --git a/src/app.css b/src/app.css
index 8524b77..68258d6 100644
--- a/src/app.css
+++ b/src/app.css
@@ -1,78 +1,86 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
- 
+
 @layer base {
-  :root {
-    --background: 0 0% 100%;
-    --foreground: 0 0% 3.9%;
- 
-    --muted: 0 0% 96.1%;
-    --muted-foreground: 0 0% 45.1%;
- 
-    --popover: 0 0% 100%;
-    --popover-foreground: 0 0% 3.9%;
- 
-    --card: 0 0% 100%;
-    --card-foreground: 0 0% 3.9%;
- 
-    --border: 0 0% 89.8%;
-    --input: 0 0% 89.8%;
- 
-    --primary: 0 0% 9%;
-    --primary-foreground: 0 0% 98%;
- 
-    --secondary: 0 0% 96.1%;
-    --secondary-foreground: 0 0% 9%;
- 
-    --accent: 0 0% 96.1%;
-    --accent-foreground: 0 0% 9%;
- 
-    --destructive: 0 72.2% 50.6%;
-    --destructive-foreground: 0 0% 98%;
- 
-    --ring: 0 0% 3.9%;
- 
-    --radius: 0.5rem;
-  }
- 
-  .dark {
-    --background: 0 0% 3.9%;
-    --foreground: 0 0% 98%;
- 
-    --muted: 0 0% 14.9%;
-    --muted-foreground: 0 0% 63.9%;
- 
-    --popover: 0 0% 3.9%;
-    --popover-foreground: 0 0% 98%;
- 
-    --card: 0 0% 3.9%;
-    --card-foreground: 0 0% 98%;
- 
-    --border: 0 0% 14.9%;
-    --input: 0 0% 14.9%;
- 
-    --primary: 0 0% 98%;
-    --primary-foreground: 0 0% 9%;
- 
-    --secondary: 0 0% 14.9%;
-    --secondary-foreground: 0 0% 98%;
- 
-    --accent: 0 0% 14.9%;
-    --accent-foreground: 0 0% 98%;
- 
-    --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 0 0% 98%;
- 
-    --ring: 0 0% 83.1%;
-  }
+	:root {
+		--background: 0 0% 100%;
+		--foreground: 0 0% 3.9%;
+
+		--muted: 0 0% 96.1%;
+		--muted-foreground: 0 0% 45.1%;
+
+		--popover: 0 0% 100%;
+		--popover-foreground: 0 0% 3.9%;
+
+		--card: 0 0% 100%;
+		--card-foreground: 0 0% 3.9%;
+
+		--border: 0 0% 89.8%;
+		--input: 0 0% 89.8%;
+
+		--primary: 0 0% 9%;
+		--primary-foreground: 0 0% 98%;
+
+		--secondary: 0 0% 96.1%;
+		--secondary-foreground: 0 0% 9%;
+
+		--accent: 0 0% 96.1%;
+		--accent-foreground: 0 0% 9%;
+
+		--destructive: 0 72.2% 50.6%;
+		--destructive-foreground: 0 0% 98%;
+
+		--ring: 0 0% 3.9%;
+
+		--radius: 0.5rem;
+	}
+
+	.dark {
+		--background: 0 0% 0%;
+		--foreground: 0 0% 98%;
+
+		--muted: 0 0% 14.9%;
+		--muted-foreground: 0 0% 63.9%;
+
+		--popover: 0 0% 3.9%;
+		--popover-foreground: 0 0% 98%;
+
+		--card: 0 0% 3.9%;
+		--card-foreground: 0 0% 98%;
+
+		--border: 0 0% 14.9%;
+		--input: 0 0% 14.9%;
+
+		--primary: 0 0% 98%;
+		--primary-foreground: 0 0% 9%;
+
+		--secondary: 0 0% 14.9%;
+		--secondary-foreground: 0 0% 98%;
+
+		--accent: 0 0% 14.9%;
+		--accent-foreground: 0 0% 98%;
+
+		--destructive: 0 62.8% 30.6%;
+		--destructive-foreground: 0 0% 98%;
+
+		--ring: 0 0% 83.1%;
+	}
 }
- 
+
 @layer base {
-  * {
-    @apply border-border;
-  }
-  body {
-    @apply bg-background text-foreground;
-  }
-}
\ No newline at end of file
+	* {
+		@apply border-border;
+	}
+	body {
+		@apply bg-background text-foreground;
+	}
+
+	.content {
+		@apply col-span-2 p-6 border-l border-neutral-900;
+	}
+
+	.background {
+		@apply col-span-3;
+	}
+}
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 1931ce5..33e6fa5 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -6,6 +6,34 @@
 
 <ModeWatcher />
 
-<div class="w-screen h-screen flex flex-col items-center justify-center">
-	{@render children()}
+<div class="w-screen h-screen font-mono">
+	<!-- Mobile: Single Column, Larger Screens: 5 Columns -->
+	<div class="flex flex-row w-full h-full">
+		<div
+			class="background hidden sm:flex w-full h-full flex-col items-center justify-center select-none"
+		>
+			<pre>
+		 ______________
+        /             /|
+       /             / |
+      /____________ /  |
+     | ___________ |   |
+     ||           ||   |
+     ||   Hello   ||   |
+     ||    World  ||   |
+     ||___________||   |
+     |   _______   |  /
+    /|  (_______)  | /
+   ( |_____________|/
+    \
+.=======================.
+| ::::::::::::::::  ::: |
+| ::::::::::::::[]  ::: |
+|   -----------     ::: |
+`-----------------------'</pre>
+		</div>
+		<div class="content">
+			{@render children()}
+		</div>
+	</div>
 </div>
diff --git a/src/routes/login/+page.svelte b/src/routes/login/+page.svelte
index 027b0ab..c889c86 100644
--- a/src/routes/login/+page.svelte
+++ b/src/routes/login/+page.svelte
@@ -2,7 +2,6 @@
 	import { goto } from '$app/navigation';
 	import { page } from '$app/state';
 	import { Button } from '$lib/components/ui/button/index.js';
-	import * as Card from '$lib/components/ui/card/index.js';
 	import { Input } from '$lib/components/ui/input/index.js';
 	import { Label } from '$lib/components/ui/label/index.js';
 
@@ -40,33 +39,26 @@
 	};
 </script>
 
-<Card.Root class="w-[350px]">
-	<form on:submit={login}>
-		<Card.Header>
-			<Card.Title>Login to Account</Card.Title>
-			<Card.Description>Please enter your credentials below to login.</Card.Description>
-			<Card.Description>You will be redirected to .</Card.Description>
-		</Card.Header>
-		<Card.Content>
-			<!-- Display success or error message -->
-			{#if successMessage}
-				<p class="text-green-500 mb-4">{successMessage}</p>
-			{:else if errorMessage}
-				<p class="text-red-500 mb-4">{errorMessage}</p>
-			{/if}
-			<Label for="email">Email:</Label>
-			<Input id="email" type="email" bind:value={email} required />
+<form class=" gap-4 flex flex-col h-full" on:submit|preventDefault={login}>
+	<div class="mb-4">
+		<h1 class="text-2xl font-bold">Welcome back</h1>
+		<h3 class="text-sm">Please login to your account to access the application</h3>
+	</div>
+	<!-- Display success or error message -->
+	{#if successMessage}
+		<p class="text-green-500 mb-4">{successMessage}</p>
+	{:else if errorMessage}
+		<p class="text-red-500 mb-4">{errorMessage}</p>
+	{/if}
+	<Label for="email">Email:</Label>
+	<Input id="email" type="email" bind:value={email} required />
 
-			<Label for="password">Password:</Label>
-			<Input id="password" type="password" bind:value={password} required />
+	<Label for="password">Password:</Label>
+	<Input id="password" type="password" bind:value={password} required />
 
-			<!-- Submit button within the form -->
-		</Card.Content>
-		<Card.Footer class="flex justify-between">
-			<Button variant="outline" on:click={() => goto(`/register?redirect=${redirectUrl}`)}
-				>Register</Button
-			>
-			<Button type="submit">Login</Button>
-		</Card.Footer>
-	</form>
-</Card.Root>
+	<!-- Submit button within the form -->
+	<Button class="mt-auto" type="submit">Login</Button>
+	<Button variant="outline" on:click={() => goto(`/register?redirect=${redirectUrl}`)}
+		>Register</Button
+	>
+</form>
diff --git a/src/routes/register/+page.svelte b/src/routes/register/+page.svelte
index 36c73ad..83e0739 100644
--- a/src/routes/register/+page.svelte
+++ b/src/routes/register/+page.svelte
@@ -50,35 +50,30 @@
 	}
 </script>
 
-<Card.Root class="w-[350px]">
-	<form on:submit|preventDefault={submitForm}>
-		<Card.Header>
-			<Card.Title>Register Account</Card.Title>
-			<Card.Description>Please fill in the details below to create an account.</Card.Description>
-		</Card.Header>
-		<Card.Content>
-			{#if successMessage}
-				<p class="text-green-500">{successMessage}</p>
-			{:else if errorMessage}
-				<p class="text-red-500">{errorMessage}</p>
-			{/if}
-			<Label for="email">Email:</Label>
-			<Input id="email" type="email" bind:value={email} required />
+<form class=" gap-4 flex flex-col h-full" on:submit|preventDefault={submitForm}>
+	<div class="mb-4">
+		<h1 class="text-2xl font-bold">New here?</h1>
+		<h3 class="text-sm">Please fill in the details below to create an account.</h3>
+	</div>
+	<!-- Display success or error message -->
+	{#if successMessage}
+		<p class="text-green-500">{successMessage}</p>
+	{:else if errorMessage}
+		<p class="text-red-500">{errorMessage}</p>
+	{/if}
+	<Label for="email">Email:</Label>
+	<Input id="email" type="email" bind:value={email} required />
 
-			<Label for="password">Password:</Label>
-			<Input id="password" type="password" bind:value={password} required />
+	<Label for="password">Password:</Label>
+	<Input id="password" type="password" bind:value={password} required />
 
-			<Label for="firstName">First Name:</Label>
-			<Input id="firstName" type="text" bind:value={firstName} />
+	<Label for="firstName">First Name:</Label>
+	<Input id="firstName" type="text" bind:value={firstName} />
 
-			<Label for="lastName">Last Name:</Label>
-			<Input id="lastName" type="text" bind:value={lastName} />
-		</Card.Content>
-		<Card.Footer class="flex justify-between">
-			<Button variant="outline" on:click={() => goto(`/login?redirect=${redirectUrl}`)}
-				>Login</Button
-			>
-			<Button type="submit">Register</Button>
-		</Card.Footer>
-	</form>
-</Card.Root>
+	<Label for="lastName">Last Name:</Label>
+	<Input id="lastName" type="text" bind:value={lastName} />
+
+	<!-- Submit button within the form -->
+	<Button class="mt-auto" type="submit">Register</Button>
+	<Button variant="outline" on:click={() => goto(`/login?redirect=${redirectUrl}`)}>Login</Button>
+</form>