diff --git a/src/lib/components/container/navbar/navbar.svelte b/src/lib/components/container/navbar/navbar.svelte
index 4ffa5a3..4f64f71 100644
--- a/src/lib/components/container/navbar/navbar.svelte
+++ b/src/lib/components/container/navbar/navbar.svelte
@@ -10,6 +10,7 @@
 		SheetTrigger
 	} from '$lib/components/ui/sheet';
 	import { Separator } from '$lib/components/ui/separator';
+	import ThemeSwitch from '$lib/components/utils/theme-switch.svelte';
 
 	export let data;
 
@@ -47,6 +48,8 @@
 		</nav>
 
 		<div class="hidden items-center space-x-4 md:flex">
+			<ThemeSwitch />
+
 			{#if data.user}
 				<span class="text-sm text-muted-foreground">{data.user.email}</span>
 				<Button variant="destructive" on:click={handleLogout}>
diff --git a/src/lib/components/ui/badge/badge.svelte b/src/lib/components/ui/badge/badge.svelte
new file mode 100644
index 0000000..e8817f4
--- /dev/null
+++ b/src/lib/components/ui/badge/badge.svelte
@@ -0,0 +1,18 @@
+<script lang="ts">
+	import { type Variant, badgeVariants } from "./index.js";
+	import { cn } from "$lib/utils.js";
+
+	let className: string | undefined | null = undefined;
+	export let href: string | undefined = undefined;
+	export let variant: Variant = "default";
+	export { className as class };
+</script>
+
+<svelte:element
+	this={href ? "a" : "span"}
+	{href}
+	class={cn(badgeVariants({ variant, className }))}
+	{...$$restProps}
+>
+	<slot />
+</svelte:element>
diff --git a/src/lib/components/ui/badge/index.ts b/src/lib/components/ui/badge/index.ts
new file mode 100644
index 0000000..ef10835
--- /dev/null
+++ b/src/lib/components/ui/badge/index.ts
@@ -0,0 +1,22 @@
+import { type VariantProps, tv } from "tailwind-variants";
+
+export { default as Badge } from "./badge.svelte";
+export const badgeVariants = tv({
+	base: "focus:ring-ring inline-flex select-none items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2",
+	variants: {
+		variant: {
+			default:
+				"bg-primary text-primary-foreground hover:bg-primary/80 border-transparent shadow",
+			secondary:
+				"bg-secondary text-secondary-foreground hover:bg-secondary/80 border-transparent",
+			destructive:
+				"bg-destructive text-destructive-foreground hover:bg-destructive/80 border-transparent shadow",
+			outline: "text-foreground",
+		},
+	},
+	defaultVariants: {
+		variant: "default",
+	},
+});
+
+export type Variant = VariantProps<typeof badgeVariants>["variant"];
diff --git a/src/lib/components/utils/theme-switch.svelte b/src/lib/components/utils/theme-switch.svelte
new file mode 100644
index 0000000..b57925c
--- /dev/null
+++ b/src/lib/components/utils/theme-switch.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+	import Sun from 'lucide-svelte/icons/sun';
+	import Moon from 'lucide-svelte/icons/moon';
+
+	import { toggleMode } from 'mode-watcher';
+	import { Button } from '$lib/components/ui/button/index.js';
+</script>
+
+<Button on:click={toggleMode} variant="outline" size="icon">
+	<Sun
+		class="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0"
+	/>
+	<Moon
+		class="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100"
+	/>
+	<span class="sr-only">Toggle theme</span>
+</Button>
diff --git a/src/routes/(home)/+page.svelte b/src/routes/(home)/+page.svelte
index 797b749..c818294 100644
--- a/src/routes/(home)/+page.svelte
+++ b/src/routes/(home)/+page.svelte
@@ -6,6 +6,8 @@
 	import { Separator } from '$lib/components/ui/separator';
 
 	let videoUrl = '';
+
+	const handleNewChat = async () => {};
 </script>
 
 <div class="min-h-screen">
diff --git a/src/routes/(home)/pricing/+page.svelte b/src/routes/(home)/pricing/+page.svelte
index 787929c..b884b74 100644
--- a/src/routes/(home)/pricing/+page.svelte
+++ b/src/routes/(home)/pricing/+page.svelte
@@ -1,5 +1,8 @@
 <script lang="ts">
 	import { Check } from 'lucide-svelte';
+	import { Button } from '$lib/components/ui/button';
+	import { Card, CardContent, CardFooter, CardHeader, CardTitle } from '$lib/components/ui/card';
+	import { Badge } from '$lib/components/ui/badge';
 
 	const plans = [
 		{
@@ -34,65 +37,53 @@
 	];
 </script>
 
-<div class="min-h-screen bg-gray-900 text-gray-100">
+<div class="min-h-screen">
 	<main class="container mx-auto px-4 py-16">
-		<h1 class="mb-4 text-center text-4xl font-bold">Choose Your Plan</h1>
-		<p class="mb-12 text-center text-xl text-gray-400">
-			Unlock the power of video analysis with our flexible pricing options
-		</p>
+		<div class="mb-12 space-y-4 text-center">
+			<h1 class="text-4xl font-bold tracking-tight">Choose Your Plan</h1>
+			<p class="text-xl text-muted-foreground">
+				Unlock the power of video analysis with our flexible pricing options
+			</p>
+		</div>
 
 		<div class="grid gap-8 md:grid-cols-3">
 			{#each plans as plan}
-				<div
-					class="overflow-hidden rounded-lg bg-gray-800 shadow-lg transition-transform duration-300 hover:scale-105"
-				>
-					<div class="p-6">
-						<h2 class="mb-2 text-2xl font-bold">{plan.name}</h2>
-						<p class="mb-6 text-4xl font-bold">
-							${plan.price}<span class="text-lg font-normal text-gray-400">/month</span>
-						</p>
-						<ul class="mb-6">
+				<Card class="relative">
+					<CardHeader>
+						<CardTitle>{plan.name}</CardTitle>
+						<div class="mt-4 text-4xl font-bold">
+							${plan.price}
+							<span class="text-lg font-normal text-muted-foreground">/month</span>
+						</div>
+					</CardHeader>
+					<CardContent>
+						<ul class="mb-6 space-y-3">
 							{#each plan.features as feature}
-								<li class="mb-3 flex items-center">
-									<Check class="mr-2 h-5 w-5 text-green-500" />
+								<li class="flex items-center">
+									<Check class="mr-2 h-5 w-5" />
 									<span>{feature}</span>
 								</li>
 							{/each}
 						</ul>
-					</div>
-					<div class="bg-gray-700 p-6">
-						<button
-							class="w-full rounded-full bg-red-500 px-4 py-2 font-bold transition-colors duration-200 hover:bg-red-600"
-						>
+					</CardContent>
+					<CardFooter>
+						<Button variant="default" class="w-full">
 							{plan.recommended ? 'Start Free Trial' : 'Choose Plan'}
-						</button>
-					</div>
+						</Button>
+					</CardFooter>
 					{#if plan.recommended}
-						<div
-							class="absolute right-0 top-0 rounded-bl-lg bg-red-500 px-4 py-1 font-bold text-white"
-						>
-							Recommended
-						</div>
+						<Badge class="absolute right-4 top-4">Recommended</Badge>
 					{/if}
-				</div>
+				</Card>
 			{/each}
 		</div>
 
-		<div class="mt-16 text-center">
-			<h2 class="mb-4 text-2xl font-bold">Need a custom solution?</h2>
-			<p class="mb-6 text-gray-400">
+		<div class="mt-16 space-y-4 text-center">
+			<h2 class="text-2xl font-bold tracking-tight">Need a custom solution?</h2>
+			<p class="text-muted-foreground">
 				We offer tailored plans for large organizations and special use cases.
 			</p>
-			<a
-				href="/contact"
-				class="inline-block rounded-full bg-red-500 px-6 py-2 font-bold transition-colors duration-200 hover:bg-red-600"
-			>
-				Contact Sales
-			</a>
+			<Button variant="secondary" href="/contact">Contact Sales</Button>
 		</div>
 	</main>
 </div>
-
-<style>
-	/* Add any additional component-specific styles here */
-</style>