diff --git a/apps/cli/package.json b/apps/cli/package.json
index a54da91..b8cad71 100644
--- a/apps/cli/package.json
+++ b/apps/cli/package.json
@@ -22,10 +22,7 @@
 		"test": "vitest run",
 		"prepublishOnly": "npm run build"
 	},
-	"files": [
-		"dist",
-		"template"
-	],
+	"files": ["dist", "template"],
 	"dependencies": {
 		"@clack/prompts": "^0.10.0",
 		"commander": "^13.1.0",
diff --git a/apps/web/src/app/(home)/_components/CenterLines.tsx b/apps/web/src/app/(home)/_components/CenterLines.tsx
index 46ff9e1..66cec8c 100644
--- a/apps/web/src/app/(home)/_components/CenterLines.tsx
+++ b/apps/web/src/app/(home)/_components/CenterLines.tsx
@@ -5,15 +5,15 @@ const CenterLines = () => {
 		<>
 			<div
 				className="absolute top-3/4 -translate-y-1/2 left-0 w-80 h-14
-      rounded-bl-3xl transform rotate-180
-      border-b-2 border-l-2 border-slate-700
-      shadow-lg backdrop-blur-sm"
+						rounded-bl-3xl transform rotate-180
+						border-b-2 border-l-2 border-slate-700 dark:border-slate-300
+						shadow-lg backdrop-blur-sm"
 			/>
 			<div
 				className="absolute top-3/4 -translate-y-1/2 right-0 w-80 h-14
-      rounded-br-3xl transform rotate-180
-      border-b-2 border-r-2 border-slate-700
-      shadow-lg backdrop-blur-sm"
+						rounded-br-3xl transform rotate-180
+						border-b-2 border-r-2 border-slate-700 dark:border-slate-300
+						shadow-lg backdrop-blur-sm"
 			/>
 		</>
 	);
diff --git a/apps/web/src/app/(home)/_components/CodeContainer.tsx b/apps/web/src/app/(home)/_components/CodeContainer.tsx
index c57b897..50fcc4a 100644
--- a/apps/web/src/app/(home)/_components/CodeContainer.tsx
+++ b/apps/web/src/app/(home)/_components/CodeContainer.tsx
@@ -52,15 +52,17 @@ const CodeContainer = () => {
 
 	return (
 		<div className="w-full max-w-3xl mx-auto mt-8">
-			<div className="rounded-md bg-gray-950/50 backdrop-blur-3xl border border-blue-500/30 overflow-hidden">
-				<div className="flex items-center justify-between bg-blue-900/10 px-4 py-2 border-b border-blue-800/30">
+			<div className="rounded-md bg-gray-50/90 dark:bg-gray-950/50 backdrop-blur-3xl border border-gray-300 dark:border-blue-500/30 overflow-hidden">
+				<div className="flex items-center justify-between bg-gray-200/80 dark:bg-blue-900/10 px-4 py-2 border-b border-gray-300 dark:border-blue-800/30">
 					<div className="flex items-center">
 						<div className="flex space-x-2">
 							<div className="w-3 h-3 rounded-full bg-red-500/60" />
 							<div className="w-3 h-3 rounded-full bg-yellow-500/60" />
 							<div className="w-3 h-3 rounded-full bg-green-500/60" />
 						</div>
-						<div className="ml-4 text-sm text-blue-300 font-mono">terminal</div>
+						<div className="ml-4 text-sm text-gray-700 dark:text-blue-300 font-mono">
+							terminal
+						</div>
 					</div>
 
 					{/* Package Manager Selector */}
@@ -68,11 +70,13 @@ const CodeContainer = () => {
 						<button
 							type="button"
 							onClick={() => setIsOpen(!isOpen)}
-							className="flex items-center px-2 py-1 text-sm bg-black/50 rounded border border-blue-500/30 hover:bg-blue-900/20"
+							className="flex items-center px-2 py-1 text-sm bg-white/50 dark:bg-black/50 rounded border border-gray-300 dark:border-blue-500/30 hover:bg-gray-200/80 dark:hover:bg-blue-900/20"
 						>
-							<span className="text-blue-400 mr-2">{selectedPM}</span>
+							<span className="text-gray-700 dark:text-blue-400 mr-2">
+								{selectedPM}
+							</span>
 							<svg
-								className="w-4 h-4 text-blue-400"
+								className="w-4 h-4 text-gray-700 dark:text-blue-400"
 								fill="none"
 								stroke="currentColor"
 								viewBox="0 0 24 24"
@@ -88,7 +92,7 @@ const CodeContainer = () => {
 						</button>
 
 						{isOpen && (
-							<div className="absolute right-0 mt-2 w-36 bg-black border border-blue-500/30 rounded-md shadow-lg z-50">
+							<div className="absolute right-0 mt-2 w-36 bg-white dark:bg-black border border-gray-300 dark:border-blue-500/30 rounded-md shadow-lg z-50">
 								<ul>
 									{(Object.keys(commands) as Array<"npm" | "pnpm" | "bun">).map(
 										(pm) => (
@@ -97,8 +101,8 @@ const CodeContainer = () => {
 													type="button"
 													className={`block w-full text-left px-4 py-2 text-sm ${
 														selectedPM === pm
-															? "bg-blue-900/30 text-blue-400"
-															: "text-gray-300 hover:bg-blue-900/20"
+															? "bg-gray-200 dark:bg-blue-900/30 text-gray-800 dark:text-blue-400"
+															: "text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-blue-900/20"
 													}`}
 													onClick={() => copyToClipboard(pm)}
 												>
@@ -113,14 +117,18 @@ const CodeContainer = () => {
 					</div>
 				</div>
 
-				<div className="p-4 font-mono text-sm">
+				<div className="p-4 font-mono text-sm bg-white dark:bg-transparent">
 					<div className="flex items-center">
 						<div className="flex-grow">
-							<span className="text-blue-500 mr-2">$</span>
-							<span className="text-white">{commands[selectedPM]}</span>
+							<span className="text-blue-600 dark:text-blue-500 mr-2">$</span>
+							<span className="text-gray-800 dark:text-white">
+								{commands[selectedPM]}
+							</span>
 							<span
 								className={
-									typingComplete ? "hidden" : "text-blue-500 animate-pulse ml-1"
+									typingComplete
+										? "hidden"
+										: "text-blue-600 dark:text-blue-500 animate-pulse ml-1"
 								}
 							>
 								▌
@@ -129,7 +137,7 @@ const CodeContainer = () => {
 						<button
 							type="button"
 							onClick={() => copyToClipboard(selectedPM)}
-							className="text-blue-400 hover:text-blue-300"
+							className="text-gray-600 dark:text-blue-400 hover:text-gray-800 dark:hover:text-blue-300"
 							title="Copy to clipboard"
 						>
 							{copied ? (
@@ -142,7 +150,7 @@ const CodeContainer = () => {
 
 					{typingComplete && (
 						<>
-							<div className="mt-2 pl-4 text-yellow-400">
+							<div className="mt-2 pl-4 text-amber-600 dark:text-yellow-400">
 								{currentStep >= 1 && (
 									<p
 										className={`transition-opacity duration-300 ${
@@ -154,24 +162,33 @@ const CodeContainer = () => {
 								)}
 								{currentStep >= 2 && (
 									<div className="mt-2">
-										<p className="text-white">
+										<p className="text-gray-800 dark:text-white">
 											Project name:{" "}
-											<span className="text-yellow-400">my-t-stack</span>
+											<span className="text-amber-600 dark:text-yellow-400">
+												my-t-stack
+											</span>
 										</p>
-										<p className="text-white">
+										<p className="text-gray-800 dark:text-white">
 											Database:{" "}
-											<span className="text-yellow-400">postgres</span>
+											<span className="text-amber-600 dark:text-yellow-400">
+												postgres
+											</span>
 										</p>
-										<p className="text-white">
-											ORM: <span className="text-yellow-400">drizzle</span>
+										<p className="text-gray-800 dark:text-white">
+											ORM:{" "}
+											<span className="text-amber-600 dark:text-yellow-400">
+												drizzle
+											</span>
 										</p>
-										<p className="text-white">
+										<p className="text-gray-800 dark:text-white">
 											Authentication:{" "}
-											<span className="text-yellow-400">yes</span>
+											<span className="text-amber-600 dark:text-yellow-400">
+												yes
+											</span>
 										</p>
-										<p className="text-white">
+										<p className="text-gray-800 dark:text-white">
 											Addons:{" "}
-											<span className="text-yellow-400">
+											<span className="text-amber-600 dark:text-yellow-400">
 												docker, github-actions, SEO
 											</span>
 										</p>
@@ -181,17 +198,23 @@ const CodeContainer = () => {
 
 							{currentStep >= 3 && (
 								<div className="mt-3 pl-4">
-									<p className="text-blue-400">✓ Creating project structure</p>
+									<p className="text-blue-600 dark:text-blue-400">
+										✓ Creating project structure
+									</p>
 									{currentStep >= 4 && (
-										<p className="text-blue-400">✓ Installing dependencies</p>
+										<p className="text-blue-600 dark:text-blue-400">
+											✓ Installing dependencies
+										</p>
 									)}
 									{currentStep >= 5 && (
 										<>
-											<p className="text-blue-400">✓ Setting up database</p>
-											<p className="text-blue-400">
+											<p className="text-blue-600 dark:text-blue-400">
+												✓ Setting up database
+											</p>
+											<p className="text-blue-600 dark:text-blue-400">
 												✓ Configuring authentication
 											</p>
-											<p className="text-white mt-2">
+											<p className="text-gray-800 dark:text-white mt-2">
 												Project ready! Happy coding!
 											</p>
 										</>
@@ -202,8 +225,10 @@ const CodeContainer = () => {
 					)}
 
 					<div className={`flex mt-4 ${typingComplete ? "" : "hidden"}`}>
-						<span className="text-blue-500 mr-2">$</span>
-						<span className="text-blue-500 animate-pulse">▌</span>
+						<span className="text-blue-600 dark:text-blue-500 mr-2">$</span>
+						<span className="text-blue-600 dark:text-blue-500 animate-pulse">
+							▌
+						</span>
 					</div>
 				</div>
 			</div>
diff --git a/apps/web/src/app/(home)/_components/CodeExample.tsx b/apps/web/src/app/(home)/_components/CodeExample.tsx
index c69b650..0e6075c 100644
--- a/apps/web/src/app/(home)/_components/CodeExample.tsx
+++ b/apps/web/src/app/(home)/_components/CodeExample.tsx
@@ -3,52 +3,67 @@ import React from "react";
 
 const CodeExample = () => {
 	return (
-		<div className="max-w-2xl mx-auto mt-8 rounded-lg overflow-hidden bg-slate-900 border border-slate-700">
-			<div className="flex items-center px-4 py-2 bg-slate-800">
+		<div className="max-w-2xl mx-auto mt-8 rounded-lg overflow-hidden bg-slate-100 dark:bg-slate-900 border border-slate-300 dark:border-slate-700">
+			<div className="flex items-center px-4 py-2 bg-slate-200 dark:bg-slate-800">
 				<div className="flex space-x-2">
 					<div className="w-3 h-3 rounded-full bg-red-500" />
 					<div className="w-3 h-3 rounded-full bg-yellow-500" />
 					<div className="w-3 h-3 rounded-full bg-green-500" />
 				</div>
-				<span className="ml-4 text-sm text-slate-400">example.ts</span>
+				<span className="ml-4 text-sm text-slate-600 dark:text-slate-400">
+					example.ts
+				</span>
 			</div>
 
 			<div className="p-4 font-mono text-sm relative">
 				<div className="space-y-2">
-					<div className="text-slate-400">{"// ❌ Without Type Safety"}</div>
-					<div className="text-white">
-						function processUser(user){" "}
-						{<span className="text-red-400">console.log(user.namee)</span>}
+					<div className="text-slate-600 dark:text-slate-400">
+						{"// ❌ Without Type Safety"}
 					</div>
-					<div className="text-red-400 text-xs bg-red-900/30 p-2 rounded">
+					<div className="text-slate-900 dark:text-white">
+						function processUser(user){" "}
+						{
+							<span className="text-red-600 dark:text-red-400">
+								console.log(user.namee)
+							</span>
+						}
+					</div>
+					<div className="text-red-600 dark:text-red-400 text-xs bg-red-100 dark:bg-red-900/30 p-2 rounded">
 						Property &apos;namee&apos; does not exist on type &apos;User&apos;.
 						Did you mean &apos;name&apos;?
 					</div>
 
-					<div className="mt-6 text-slate-400">{"// ✅ With Type Safety"}</div>
-					<div>
-						<span className="text-blue-400">interface</span>
-						<span className="text-green-400"> User</span>
-						<span className="text-white"> {"{"}</span>
+					<div className="mt-6 text-slate-600 dark:text-slate-400">
+						{"// ✅ With Type Safety"}
 					</div>
-					<div className="pl-4 text-slate-200">
+					<div>
+						<span className="text-blue-600 dark:text-blue-400">interface</span>
+						<span className="text-green-600 dark:text-green-400"> User</span>
+						<span className="text-slate-900 dark:text-white"> {"{"}</span>
+					</div>
+					<div className="pl-4 text-slate-700 dark:text-slate-200">
 						name: string;
 						<br />
 						age: number;
 					</div>
-					<div className="text-white">{"}"}</div>
+					<div className="text-slate-900 dark:text-white">{"}"}</div>
 					<div>
-						<span className="text-blue-400">function</span>
-						<span className="text-yellow-400"> processUser</span>
-						<span className="text-white">(user: </span>
-						<span className="text-green-400">User</span>
-						<span className="text-white">) {"{"}</span>
+						<span className="text-blue-600 dark:text-blue-400">function</span>
+						<span className="text-yellow-600 dark:text-yellow-400">
+							{" "}
+							processUser
+						</span>
+						<span className="text-slate-900 dark:text-white">(user: </span>
+						<span className="text-green-600 dark:text-green-400">User</span>
+						<span className="text-slate-900 dark:text-white">) {"{"}</span>
 					</div>
-					<div className="pl-4 text-slate-200">
+					<div className="pl-4 text-slate-700 dark:text-slate-200">
 						console.log(user.name){" "}
-						<span className="text-slate-400">{"// ✨ Type checked!"}</span>
+						<span className="text-slate-600 dark:text-slate-400">
+							{"// ✨ Type checked!"}
+						</span>
 					</div>
-					<div className="text-white">{"}"}</div>
+					<div className="text-slate-900 dark:text-white">{"}"}</div>
 				</div>
 			</div>
 		</div>
diff --git a/apps/web/src/app/(home)/_components/CommandDisplay.tsx b/apps/web/src/app/(home)/_components/CommandDisplay.tsx
index e7eed65..67a1806 100644
--- a/apps/web/src/app/(home)/_components/CommandDisplay.tsx
+++ b/apps/web/src/app/(home)/_components/CommandDisplay.tsx
@@ -18,16 +18,16 @@ export function CommandDisplay({ command }: CommandDisplayProps) {
 
 	return (
 		<div className="relative group">
-			<div className="bg-gray-950/20 w-fit backdrop-blur-xl border border-gray-800 rounded-lg p-4 font-mono text-sm text-gray-300 overflow-x-auto">
+			<div className="dark:bg-gray-950/20 bg-gray-100/80 w-fit backdrop-blur-xl border border-gray-200 dark:border-gray-800 rounded-lg p-4 font-mono text-sm text-gray-800 dark:text-gray-300 overflow-x-auto">
 				<button
 					type="button"
 					onClick={copyToClipboard}
-					className="absolute right-4 top-1/2 -translate-y-1/2 p-2 rounded-md hover:bg-gray-800 transition-colors"
+					className="absolute right-4 top-1/2 -translate-y-1/2 p-2 rounded-md hover:bg-gray-200 dark:hover:bg-gray-800 transition-colors"
 				>
 					{copied ? (
 						<Check className="w-4 h-4 text-green-500" />
 					) : (
-						<Copy className="w-4 h-4 text-gray-400" />
+						<Copy className="w-4 h-4 text-gray-500 dark:text-gray-400" />
 					)}
 				</button>
 				<pre className="pr-12 max-sm:text-xs">{command}</pre>
diff --git a/apps/web/src/app/(home)/_components/CustomizableSection.tsx b/apps/web/src/app/(home)/_components/CustomizableSection.tsx
index 400c3bd..4d6bc40 100644
--- a/apps/web/src/app/(home)/_components/CustomizableSection.tsx
+++ b/apps/web/src/app/(home)/_components/CustomizableSection.tsx
@@ -4,7 +4,7 @@ import CustomizableStack from "./CustomizableStack";
 export default function CustomizableSection() {
 	return (
 		<section className="w-full max-w-6xl mx-auto space-y-12 mt-24 relative z-50">
-			<div className="text-center space-y-6 relative z-10 border border-gray-700/30 p-6 rounded-md bg-gray-950/30 backdrop-blur-sm">
+			<div className="text-center space-y-6 relative z-10 border  dark:border-gray-700/30 border-gray-300/30 p-6 rounded-md bg-white/80 dark:bg-gray-950/30 backdrop-blur-sm">
 				<div className="relative">
 					<motion.h2
 						initial={{ opacity: 0, y: 20 }}
@@ -12,14 +12,14 @@ export default function CustomizableSection() {
 						transition={{ duration: 0.5 }}
 						className="relative sm:text-4xl text-3xl md:text-5xl font-bold pb-3 group"
 					>
-						<span className="text-blue-400 font-mono mr-1 animate-pulse">
+						<span className="text-blue-500 dark:text-blue-400 font-mono mr-1 animate-pulse">
 							{">"}
 						</span>
-						<span className="bg-clip-text text-transparent bg-gradient-to-r from-blue-400 via-purple-400 to-pink-400 hover:from-purple-400 hover:to-blue-500 transition-all duration-300">
+						<span className="bg-clip-text text-transparent bg-gradient-to-r from-blue-500 via-purple-500 to-pink-500 dark:from-blue-400 dark:via-purple-400 dark:to-pink-400 hover:from-purple-500 hover:to-blue-600 dark:hover:from-purple-400 dark:hover:to-blue-500 transition-all duration-300">
 							Your Stack, Your Choice
 						</span>
 					</motion.h2>
-					<div className="absolute -inset-1 bg-gradient-to-r from-gray-800/0 via-gray-700/10 to-gray-800/0 blur-xl -z-10" />
+					<div className="absolute -inset-1 bg-gradient-to-r from-gray-300/0 via-gray-300/10 to-gray-300/0 dark:from-gray-800/0 dark:via-gray-700/10 dark:to-gray-800/0 blur-xl -z-10" />
 				</div>
 
 				<motion.div
@@ -28,27 +28,27 @@ export default function CustomizableSection() {
 					transition={{ duration: 0.5, delay: 0.2 }}
 					className="space-y-4 max-w-3xl mx-auto"
 				>
-					<p className="sm:text-xl text-gray-300 leading-relaxed font-mono">
-						<span className="text-yellow-400">$</span> Better-T Stack with
-						defaults,
-						<span className="text-blue-400 font-semibold">
+					<p className="sm:text-xl text-gray-700 dark:text-gray-300 leading-relaxed font-mono">
+						<span className="text-yellow-600 dark:text-yellow-400">$</span>{" "}
+						Better-T Stack with defaults,
+						<span className="text-blue-600 dark:text-blue-400 font-semibold">
 							{" "}
 							customizable options
 						</span>{" "}
 						for your perfect development environment
 					</p>
 
-					<div className="flex flex-wrap justify-center sm:gap-4 gap-2 sm:text-sm text-xs text-gray-400">
-						<span className="px-3 py-1 bg-black border border-gray-700 rounded-sm hover:bg-gray-900/50 transition-colors">
+					<div className="flex flex-wrap justify-center sm:gap-4 gap-2 sm:text-sm text-xs text-gray-600 dark:text-gray-400">
+						<span className="px-3 py-1 bg-gray-100 dark:bg-black border border-gray-300 dark:border-gray-700 rounded-sm hover:bg-gray-200 dark:hover:bg-gray-900/50 transition-colors">
 							--multiple-database-options
 						</span>
-						<span className="px-3 py-1 bg-black border border-gray-700 rounded-sm hover:bg-gray-900/50 transition-colors">
+						<span className="px-3 py-1 bg-gray-100 dark:bg-black border border-gray-300 dark:border-gray-700 rounded-sm hover:bg-gray-200 dark:hover:bg-gray-900/50 transition-colors">
 							--flexible-authentication
 						</span>
-						<span className="px-3 py-1 bg-black border border-gray-700 rounded-sm hover:bg-gray-900/50 transition-colors">
+						<span className="px-3 py-1 bg-gray-100 dark:bg-black border border-gray-300 dark:border-gray-700 rounded-sm hover:bg-gray-200 dark:hover:bg-gray-900/50 transition-colors">
 							--alternative-orms
 						</span>
-						<span className="px-3 py-1 bg-black border border-gray-700 rounded-sm hover:bg-gray-900/50 transition-colors">
+						<span className="px-3 py-1 bg-gray-100 dark:bg-black border border-gray-300 dark:border-gray-700 rounded-sm hover:bg-gray-200 dark:hover:bg-gray-900/50 transition-colors">
 							--framework-choices
 						</span>
 					</div>
diff --git a/apps/web/src/app/(home)/_components/CustomizableStack.tsx b/apps/web/src/app/(home)/_components/CustomizableStack.tsx
index 195e968..91f2410 100644
--- a/apps/web/src/app/(home)/_components/CustomizableStack.tsx
+++ b/apps/web/src/app/(home)/_components/CustomizableStack.tsx
@@ -411,21 +411,21 @@ const CustomizableStack = () => {
 				<CommandDisplay command={command} />
 			</div>
 
-			<div className="relative rounded-xl border border-gray-800 overflow-hidden">
-				<div className="absolute inset-0 backdrop-blur-3xl bg-gradient-to-r from-blue-500/10 via-purple-500/10 to-pink-500/10" />
+			<div className="relative rounded-xl border border-gray-800 dark:border-gray-800 border-gray-300 overflow-hidden">
+				<div className="absolute inset-0 backdrop-blur-3xl bg-gradient-to-r from-blue-500/10 via-purple-500/10 to-pink-500/10 dark:from-blue-500/10 dark:via-purple-500/10 dark:to-pink-500/10 from-blue-500/5 via-purple-500/5 to-pink-500/5" />
 
-				<div className="absolute left-0 top-0 bottom-0 lg:w-52 md:w-44 w-36 z-50 bg-gray-950/30 border-r border-gray-800/50">
+				<div className="absolute left-0 top-0 bottom-0 lg:w-52 md:w-44 w-36 z-50 bg-white/70 dark:bg-gray-950/30 border-r border-gray-300/50 dark:border-gray-800/50">
 					<TechSelector onSelect={handleTechSelect} activeNodes={activeNodes} />
 				</div>
 
-				<div className="max-sm:hidden bg-gray-950/30 lg:p-4 p-1 absolute lg:top-4 top-2 lg:right-4 right-2 z-50 w-80 rounded-xl border border-gray-800 backdrop-blur-3xl">
-					<div className="lg:text-sm text-xs text-gray-300 text-center">
+				<div className="max-sm:hidden bg-white/70 dark:bg-gray-950/30 lg:p-4 p-1 absolute lg:top-4 top-2 lg:right-4 right-2 z-50 w-80 rounded-xl border border-gray-300 dark:border-gray-800 backdrop-blur-3xl">
+					<div className="lg:text-sm text-xs text-gray-700 dark:text-gray-300 text-center">
 						Select technologies from the left panel to customize your stack. The
 						graph will automatically update connections.
 					</div>
 				</div>
 
-				<div className="h-[600px] lg:pl-52 md:pl-44 pl-36 relative backdrop-blur-sm bg-gray-950/50">
+				<div className="h-[600px] lg:pl-52 md:pl-44 pl-36 relative backdrop-blur-sm bg-white/50 dark:bg-gray-950/50">
 					<ReactFlow
 						nodes={nodes}
 						edges={edges}
@@ -448,8 +448,8 @@ const CustomizableStack = () => {
 						}}
 					>
 						<Background
-							className="bg-gray-950/5"
-							color="#1e293b"
+							className="bg-gray-100/30 dark:bg-gray-950/5"
+							color="currentColor"
 							gap={12}
 							size={1}
 						/>
diff --git a/apps/web/src/app/(home)/_components/FeaturedSection.tsx b/apps/web/src/app/(home)/_components/FeaturedSection.tsx
index 3455315..1b6b74e 100644
--- a/apps/web/src/app/(home)/_components/FeaturedSection.tsx
+++ b/apps/web/src/app/(home)/_components/FeaturedSection.tsx
@@ -28,26 +28,28 @@ const Featured = () => {
 					].map((feature) => (
 						<div
 							key={feature.title}
-							className="relative group p-6 bg-gray-900/50 rounded-xl border border-gray-800 hover:border-gray-700 transition-all"
+							className="relative group p-6 bg-white dark:bg-gray-900/50 rounded-xl border border-gray-200 dark:border-gray-800 hover:border-gray-300 dark:hover:border-gray-700 transition-all"
 						>
 							<div className="absolute inset-0 bg-gradient-to-r from-blue-500/10 to-purple-500/10 opacity-0 group-hover:opacity-100 transition-opacity rounded-xl" />
-							<feature.icon className="w-10 h-10 text-blue-400 mb-4" />
-							<h3 className="text-xl font-semibold text-white mb-2">
+							<feature.icon className="w-10 h-10 text-blue-500 dark:text-blue-400 mb-4" />
+							<h3 className="text-xl font-semibold text-gray-900 dark:text-white mb-2">
 								{feature.title}
 							</h3>
-							<p className="text-gray-400">{feature.description}</p>
+							<p className="text-gray-600 dark:text-gray-400">
+								{feature.description}
+							</p>
 						</div>
 					))}
 				</div>
 			</div>
 
-			<div className="w-full bg-gray-900/50 border-y border-gray-800 relative z-50">
+			<div className="w-full bg-gray-50 dark:bg-gray-900/50 border-y border-gray-200 dark:border-gray-800 relative z-50">
 				<div className="max-w-6xl mx-auto py-24">
 					<div className="text-center mb-12">
-						<h2 className="text-3xl md:text-4xl font-bold text-white mb-4">
+						<h2 className="text-3xl md:text-4xl font-bold text-gray-900 dark:text-white mb-4">
 							Write Better Code, Faster
 						</h2>
-						<p className="text-gray-400 max-w-2xl mx-auto">
+						<p className="text-gray-600 dark:text-gray-400 max-w-2xl mx-auto">
 							Leverage the power of TypeScript with our carefully selected tools
 							and frameworks.
 						</p>
@@ -74,14 +76,16 @@ const Featured = () => {
 							].map((item) => (
 								<div
 									key={item.title}
-									className="flex items-start space-x-4 p-4 rounded-lg hover:bg-gray-800/50 transition-colors"
+									className="flex items-start space-x-4 p-4 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800/50 transition-colors"
 								>
-									<ArrowRight className="w-6 h-6 text-blue-400 mt-1" />
+									<ArrowRight className="w-6 h-6 text-blue-500 dark:text-blue-400 mt-1" />
 									<div>
-										<h3 className="text-lg font-semibold text-white">
+										<h3 className="text-lg font-semibold text-gray-900 dark:text-white">
 											{item.title}
 										</h3>
-										<p className="text-gray-400">{item.description}</p>
+										<p className="text-gray-600 dark:text-gray-400">
+											{item.description}
+										</p>
 									</div>
 								</div>
 							))}
@@ -89,20 +93,20 @@ const Featured = () => {
 
 						<div className="relative">
 							<div className="absolute inset-0 bg-gradient-to-r from-blue-500/10 to-purple-500/10 blur-xl" />
-							<div className="relative bg-gray-900 rounded-lg p-6 border border-gray-800">
-								<pre className="text-sm text-gray-300 overflow-x-auto">
+							<div className="relative bg-white dark:bg-gray-900 rounded-lg p-6 border border-gray-200 dark:border-gray-800">
+								<pre className="text-sm text-gray-700 dark:text-gray-300 overflow-x-auto">
 									<code>{`// Type-safe API endpoint
 export const userRouter = router({
-  get: publicProcedure
-    .input(z.string())
-    .query(async ({ input }) => {
-      const user = await db
-        .select()
-        .from(users)
-        .where(eq(users.id, input));
+		get: publicProcedure
+				.input(z.string())
+				.query(async ({ input }) => {
+						const user = await db
+								.select()
+								.from(users)
+								.where(eq(users.id, input));
 
-      return user;
-    })
+						return user;
+				})
 });`}</code>
 								</pre>
 							</div>
@@ -112,10 +116,10 @@ export const userRouter = router({
 			</div>
 
 			<div className="w-full max-w-6xl mx-auto py-24 text-center relative z-50">
-				<h2 className="text-3xl md:text-4xl font-bold text-white mb-6">
+				<h2 className="text-3xl md:text-4xl font-bold text-gray-900 dark:text-white mb-6">
 					Ready to Build Something Amazing?
 				</h2>
-				<p className="text-gray-400 max-w-xl mx-auto mb-8">
+				<p className="text-gray-600 dark:text-gray-400 max-w-xl mx-auto mb-8">
 					Start your next project with Better-T Stack and experience the future
 					of web development.
 				</p>
diff --git a/apps/web/src/app/(home)/_components/Footer.tsx b/apps/web/src/app/(home)/_components/Footer.tsx
index 5ddbbf8..311155b 100644
--- a/apps/web/src/app/(home)/_components/Footer.tsx
+++ b/apps/web/src/app/(home)/_components/Footer.tsx
@@ -2,28 +2,28 @@ import Link from "next/link";
 
 const Footer = () => {
 	return (
-		<footer className="relative w-full font-mono">
+		<footer className="relative w-full font-mono dark:bg-gray-900 bg-gray-100">
 			<div className="max-w-6xl mx-auto px-4 py-12 relative">
 				<div className="grid md:grid-cols-3 gap-8 mb-12">
 					<div>
-						<h3 className="text-white font-bold mb-3 text-lg">
+						<h3 className="text-gray-900 dark:text-white font-bold mb-3 text-lg">
 							<span className="text-blue-500">$</span> better-t.stack
 						</h3>
-						<p className="text-gray-400">
+						<p className="text-gray-600 dark:text-gray-400">
 							The ultimate TypeScript scaffolding tool for modern web
 							development
 						</p>
 					</div>
 					<div>
-						<h3 className="text-white font-bold mb-3 text-lg">
-							<span className="text-gray-400">$</span> links
+						<h3 className="text-gray-900 dark:text-white font-bold mb-3 text-lg">
+							<span className="text-gray-500 dark:text-gray-400">$</span> links
 						</h3>
-						<ul className="text-gray-400 space-y-2">
+						<ul className="text-gray-600 dark:text-gray-400 space-y-2">
 							<li>
 								<Link
 									target="_blank"
 									href="https://github.com/better-t-stack/create-better-t-stack"
-									className="hover:text-white transition-colors"
+									className="hover:text-gray-900 dark:hover:text-white transition-colors"
 								>
 									<span className="text-gray-500">-</span> GitHub
 								</Link>
@@ -32,32 +32,33 @@ const Footer = () => {
 								<Link
 									target="_blank"
 									href="https://www.npmjs.com/package/create-better-t-stack"
-									className="hover:text-white transition-colors"
+									className="hover:text-gray-900 dark:hover:text-white transition-colors"
 								>
 									<span className="text-gray-500">-</span> NPM
 								</Link>
 							</li>
-							<li>
+							{/* <li>
 								<Link
 									href="/docs"
-									className="hover:text-white transition-colors"
+									className="hover:text-gray-900 dark:hover:text-white transition-colors"
 								>
 									<span className="text-gray-500">-</span> Documentation
 								</Link>
-							</li>
+							</li> */}
 						</ul>
 					</div>
 					<div>
-						<h3 className="text-white font-bold mb-3 text-lg">
-							<span className="text-gray-400">$</span> contact
+						<h3 className="text-gray-900 dark:text-white font-bold mb-3 text-lg">
+							<span className="text-gray-500 dark:text-gray-400">$</span>{" "}
+							contact
 						</h3>
-						<p className="text-gray-400">
+						<p className="text-gray-600 dark:text-gray-400">
 							<span className="text-gray-500">echo</span>{" "}
-							&quot;hello@better-t-stack.dev&quot;
+							&quot;amanvarshney.work@gmail.com&quot;
 						</p>
 					</div>
 				</div>
-				<div className="mt-12 pt-8 border-t border-gray-800/30">
+				<div className="mt-12 pt-8 border-t border-gray-300 dark:border-gray-800/30">
 					<p className="text-center text-gray-500">
 						© {new Date().getFullYear()} Better-T Stack. All rights reserved.
 					</p>
diff --git a/apps/web/src/app/(home)/_components/Navbar.tsx b/apps/web/src/app/(home)/_components/Navbar.tsx
index 497e2ed..71d15e4 100644
--- a/apps/web/src/app/(home)/_components/Navbar.tsx
+++ b/apps/web/src/app/(home)/_components/Navbar.tsx
@@ -1,4 +1,5 @@
 "use client";
+import { Github } from "lucide-react";
 import Link from "next/link";
 import { useEffect, useRef, useState } from "react";
 import PackageIcon from "./Icons";
@@ -43,7 +44,7 @@ const Navbar = () => {
 			className={`fixed top-0 right-0 z-[100] w-screen px-8 py-5 grid grid-cols-1 md:grid-cols-3 items-center transition-all duration-300 ${
 				scrolled
 					? "bg-transparent border-transparent"
-					: "sm:bg-black/40 sm:backdrop-blur-xl sm:border-b border-blue-500/20"
+					: " dark:sm:bg-black/40 sm:backdrop-blur-xl sm:border-b sm:bg-white/40 border-blue-400/20"
 			}`}
 		>
 			<div
@@ -52,21 +53,21 @@ const Navbar = () => {
 				}`}
 			>
 				<div className="w-4 h-4 rounded-sm flex items-center justify-center">
-					<span className="text-blue-500 text-md">$_</span>
+					<span className=" dark:text-blue-500 text-blue-600 text-md">$_</span>
 				</div>
-				<span className="text-blue-400 font-semibold text-md">
+				<span className=" dark:text-blue-400 text-blue-500 font-semibold text-md">
 					Better-T Stack
 				</span>
 			</div>
 
 			<div className="flex justify-center">
 				<div
-					className={`flex items-center backdrop-blur-md bg-black/40 rounded-md border border-blue-500/30 py-1 px-1.5 text-sm relative transition-all duration-500 ease-out ${
+					className={`flex items-center backdrop-blur-md dark:bg-black/40 bg-white/40 rounded-md border dark:border-blue-500/30 border-blue-400/30 py-1 px-1.5 text-sm relative transition-all duration-500 ease-out ${
 						scrolled ? "w-[342px]" : "sm:w-[240px] w-[280px]"
 					}`}
 				>
 					<div
-						className="absolute transition-all duration-300 ease-in-out bg-blue-900/20 border border-blue-500/20 rounded-md py-2"
+						className="absolute transition-all duration-300 ease-in-out  dark:bg-blue-900/20 bg-blue-200/40 border  dark:border-blue-500/20 border-blue-400/20 rounded-md py-2"
 						style={bgStyles}
 					/>
 					<Link
@@ -75,9 +76,10 @@ const Navbar = () => {
 							linkRefs.current.home = ref;
 						}}
 						onMouseOver={() => setActiveLink("home")}
-						className="text-gray-300 hover:text-blue-300 transition-colors py-2 px-4 rounded-md relative font-mono"
+						className=" dark:text-gray-300 text-gray-700  dark:hover:text-blue-300 hover:text-blue-600 transition-colors py-2 px-4 rounded-md relative font-mono"
 					>
-						<span className="text-blue-500">~/</span>home
+						<span className=" dark:text-blue-500 text-blue-600">~/</span>
+						home
 					</Link>
 					{/* <Link
 						href="https://www.github.com/better-t-stack/create-better-t-stack"
@@ -100,7 +102,7 @@ const Navbar = () => {
 						}}
 						onMouseOver={() => setActiveLink("demo")}
 						onMouseLeave={() => setActiveLink("home")}
-						className="text-gray-300 hidden hover:text-blue-300 transition-colors py-2 px-4 rounded-md relative sm:flex gap-2 items-center font-mono"
+						className=" dark:text-gray-300 text-gray-700 hidden  dark:hover:text-blue-300 hover:text-blue-600 transition-colors py-2 px-4 rounded-md relative sm:flex gap-2 items-center font-mono"
 					>
 						<span>demo</span>
 					</Link>
@@ -112,7 +114,7 @@ const Navbar = () => {
 						}}
 						onMouseOver={() => setActiveLink("npm")}
 						onMouseLeave={() => setActiveLink("home")}
-						className="text-gray-300 hover:text-blue-300 transition-colors py-2 px-4 rounded-md relative flex gap-2 items-center font-mono"
+						className=" dark:text-gray-300 text-gray-700 dark:hover:text-blue-300 hover:text-blue-600 transition-colors py-2 px-4 rounded-md relative flex gap-2 items-center font-mono"
 					>
 						<PackageIcon pm="npm" className="w-4 h-4 rounded-full" />{" "}
 						<span>npm</span>
@@ -155,14 +157,13 @@ const Navbar = () => {
 						}}
 						onMouseOver={() => setActiveLink("github")}
 						onMouseLeave={() => setActiveLink("home")}
-						className={`text-gray-300 hover:text-blue-300 transition-colors py-2 px-4 rounded-md relative flex gap-2 items-center font-mono ${
+						className={` dark:text-gray-300 text-gray-700  dark:hover:text-blue-300 hover:text-blue-600 transition-colors py-2 px-4 rounded-md relative flex gap-2 items-center font-mono ${
 							scrolled
 								? "sm:opacity-100 sm:translate-y-0"
 								: "sm:opacity-0 sm:pointer-events-none"
 						}`}
 					>
-						<PackageIcon pm="github" className="w-4 h-4" />{" "}
-						<span className="">github</span>
+						<Github className="size-4 mr-2" /> Github
 					</Link>
 				</div>
 			</div>
@@ -175,11 +176,11 @@ const Navbar = () => {
 				<Link
 					href="https://www.github.com/better-t-stack/create-better-t-stack"
 					target="_blank"
-					className="relative max-sm:hidden inline-flex h-12 overflow-hidden rounded-md p-[1px] focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-2 focus:ring-offset-black"
+					className="relative max-sm:hidden inline-flex h-12 overflow-hidden rounded-md p-[1px] focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-2 dark:focus:ring-offset-black focus:ring-offset-white"
 				>
 					<span className="absolute inset-[-1000%] animate-[spin_2s_linear_infinite] bg-[conic-gradient(from_90deg_at_50%_50%,#3b82f6_0%,#6366f1_50%,#3b82f6_100%)]" />
-					<span className="inline-flex h-full w-full cursor-pointer items-center justify-center rounded-md bg-black px-6 py-px text-sm font-medium text-blue-400 backdrop-blur-3xl font-mono">
-						<PackageIcon pm="github" className="w-4 h-4 mr-2" /> github
+					<span className="inline-flex h-full w-full cursor-pointer items-center justify-center rounded-md  dark:bg-black bg-white px-6 py-px text-sm font-medium  dark:text-blue-400 text-blue-600 backdrop-blur-3xl font-mono">
+						<Github className="size-5 mr-2" /> Github
 					</span>
 				</Link>
 			</div>
diff --git a/apps/web/src/app/(home)/_components/NpmPackage.tsx b/apps/web/src/app/(home)/_components/NpmPackage.tsx
index 7cced5e..6563cfb 100644
--- a/apps/web/src/app/(home)/_components/NpmPackage.tsx
+++ b/apps/web/src/app/(home)/_components/NpmPackage.tsx
@@ -21,8 +21,8 @@ const NpmPackage = () => {
 
 	return (
 		<div className="flex items-center justify-center mt-2">
-			<span className="inline-block w-3 h-5 bg-blue-400 animate-pulse mr-2" />
-			<span className="text-gray-300 text-xl font-mono">
+			<span className="inline-block w-3 h-5 bg-blue-400 dark:bg-blue-500 animate-pulse mr-2" />
+			<span className="text-gray-700 dark:text-gray-300 text-xl font-mono">
 				{versionLoading ? "[v1.0.0]" : `[v${version}]`}
 			</span>
 		</div>
diff --git a/apps/web/src/app/(home)/_components/TechMatrix.tsx b/apps/web/src/app/(home)/_components/TechMatrix.tsx
index d0775b0..c72dd9d 100644
--- a/apps/web/src/app/(home)/_components/TechMatrix.tsx
+++ b/apps/web/src/app/(home)/_components/TechMatrix.tsx
@@ -148,7 +148,7 @@ export default function TechMatrix() {
 					<div
 						// biome-ignore lint/suspicious/noArrayIndexKey: <explanation>
 						key={i}
-						className="absolute rounded-full bg-blue-500/10 blur-xl"
+						className="absolute rounded-full bg-blue-500/10 dark:bg-blue-500/10 blur-xl"
 						style={{
 							width: `${Math.random() * 200 + 50}px`,
 							height: `${Math.random() * 200 + 50}px`,
@@ -163,7 +163,7 @@ export default function TechMatrix() {
 
 			{/* Main container */}
 			<motion.div
-				className="relative border border-gray-700/50 rounded-lg overflow-hidden bg-black/60 backdrop-blur-sm shadow-lg"
+				className="relative border border-gray-200/50 dark:border-gray-700/50 rounded-lg overflow-hidden bg-white/60 dark:bg-black/60 backdrop-blur-sm shadow-lg"
 				initial={{ opacity: 0, y: 20 }}
 				animate={{ opacity: 1, y: 0 }}
 				transition={{ duration: 0.6 }}
@@ -178,27 +178,33 @@ export default function TechMatrix() {
 				</div>
 
 				{/* Terminal header */}
-				<div className="flex items-center justify-between p-3 bg-gray-900/80 border-b border-gray-700/50">
+				<div className="flex items-center justify-between p-3 bg-gray-100/80 dark:bg-gray-900/80 border-b border-gray-200/50 dark:border-gray-700/50">
 					<div className="flex space-x-2">
 						<div className="w-3 h-3 rounded-full bg-red-500" />
 						<div className="w-3 h-3 rounded-full bg-yellow-500" />
 						<div className="w-3 h-3 rounded-full bg-green-500" />
 					</div>
-					<div className="font-mono text-sm text-gray-400 flex items-center space-x-1">
-						<span className="text-green-400">user@better-t-stack</span>
+					<div className="font-mono text-sm text-gray-600 dark:text-gray-400 flex items-center space-x-1">
+						<span className="text-green-600 dark:text-green-400">
+							user@better-t-stack
+						</span>
 						<span>:</span>
-						<span className="text-blue-400">~/tech-matrix</span>
+						<span className="text-blue-600 dark:text-blue-400">
+							~/tech-matrix
+						</span>
 						<span>$</span>
 					</div>
-					<div className="text-xs text-gray-500 font-mono">v1.0.0</div>
+					<div className="text-xs text-gray-500 dark:text-gray-500 font-mono">
+						v1.0.0
+					</div>
 				</div>
 
 				<div className="p-6 relative">
 					{/* Command line interface effect */}
-					<div className="font-mono text-sm text-gray-300 mb-6 flex items-center">
-						<span className="text-green-400 mr-2">$</span>
+					<div className="font-mono text-sm text-gray-700 dark:text-gray-300 mb-6 flex items-center">
+						<span className="text-green-600 dark:text-green-400 mr-2">$</span>
 						<span>{typedCommand}</span>
-						<span className="h-4 w-2 bg-gray-400 animate-blink ml-1" />
+						<span className="h-4 w-2 bg-gray-600 dark:bg-gray-400 animate-blink ml-1" />
 					</div>
 
 					{/* Category filters */}
@@ -213,8 +219,8 @@ export default function TechMatrix() {
 							type="button"
 							className={`px-3 py-1 text-xs font-mono rounded-md transition-all duration-300 ${
 								!selectedCategory
-									? "bg-blue-500/20 text-blue-300 border border-blue-500/30 shadow-[0_0_10px_rgba(59,130,246,0.3)]"
-									: "bg-gray-800/60 border border-gray-700/50 text-gray-400 hover:bg-gray-700/30 hover:text-gray-300"
+									? "bg-blue-500/20 text-blue-700 dark:text-blue-300 border border-blue-500/30 shadow-[0_0_10px_rgba(59,130,246,0.3)]"
+									: "bg-gray-200/60 dark:bg-gray-800/60 border border-gray-300/50 dark:border-gray-700/50 text-gray-600 dark:text-gray-400 hover:bg-gray-300/30 dark:hover:bg-gray-700/30 hover:text-gray-700 dark:hover:text-gray-300"
 							}`}
 							onClick={() => setSelectedCategory(null)}
 						>
@@ -227,8 +233,8 @@ export default function TechMatrix() {
 								key={category}
 								className={`px-3 py-1 text-xs font-mono rounded-md transition-all duration-300 ${
 									selectedCategory === category
-										? "bg-blue-500/20 text-blue-300 border border-blue-500/30 shadow-[0_0_10px_rgba(59,130,246,0.3)]"
-										: "bg-gray-800/60 border border-gray-700/50 text-gray-400 hover:bg-gray-700/30 hover:text-gray-300"
+										? "bg-blue-500/20 text-blue-700 dark:text-blue-300 border border-blue-500/30 shadow-[0_0_10px_rgba(59,130,246,0.3)]"
+										: "bg-gray-200/60 dark:bg-gray-800/60 border border-gray-300/50 dark:border-gray-700/50 text-gray-600 dark:text-gray-400 hover:bg-gray-300/30 dark:hover:bg-gray-700/30 hover:text-gray-700 dark:hover:text-gray-300"
 								}`}
 								onClick={() => setSelectedCategory(category)}
 							>
@@ -238,7 +244,7 @@ export default function TechMatrix() {
 					</motion.div>
 
 					{/* Tech stack display */}
-					<div className="font-mono text-sm text-gray-300 relative">
+					<div className="font-mono text-sm text-gray-700 dark:text-gray-300 relative">
 						<div
 							className="absolute inset-0 -z-10 opacity-30"
 							style={{
@@ -246,10 +252,12 @@ export default function TechMatrix() {
 							}}
 						/>
 
-						<div className="text-blue-400 mb-4">
+						<div className="text-blue-600 dark:text-blue-400 mb-4">
 							{"// Better-T Stack Tech Matrix"}
 						</div>
-						<div className="text-purple-400">{"const techStack = {"}</div>
+						<div className="text-purple-600 dark:text-purple-400">
+							{"const techStack = {"}
+						</div>
 
 						<AnimatePresence mode="wait">
 							<motion.div
@@ -277,7 +285,7 @@ export default function TechMatrix() {
 											show: { y: 0, opacity: 1 },
 										}}
 									>
-										<div className="relative z-10 grid grid-cols-1 md:grid-cols-2 gap-2 py-3 px-2 rounded-md transition-colors duration-300 hover:bg-gray-800/30 border border-transparent hover:border-gray-700/40">
+										<div className="relative z-10 grid grid-cols-1 md:grid-cols-2 gap-2 py-3 px-2 rounded-md transition-colors duration-300 hover:bg-gray-100/30 dark:hover:bg-gray-800/30 border border-transparent hover:border-gray-300/40 dark:hover:border-gray-700/40">
 											<div className="flex items-center">
 												<div className="w-5 h-5 mr-2 relative overflow-hidden flex-shrink-0">
 													{tech.logo && (
@@ -300,21 +308,25 @@ export default function TechMatrix() {
 													)}
 												</div>
 												<div>
-													<span className="text-yellow-400 font-semibold">
+													<span className="text-yellow-600 dark:text-yellow-400 font-semibold">
 														{tech.name}
 													</span>
-													<span className="text-white">: </span>
-													<span className="text-green-400 group-hover:text-green-300 transition-colors">
+													<span className="text-gray-900 dark:text-white">
+														:{" "}
+													</span>
+													<span className="text-green-600 group-hover:text-green-700 dark:text-green-400 dark:group-hover:text-green-300 transition-colors">
 														&quot;{tech.description}&quot;
 													</span>
 													{index < filteredTech.length - 1 && (
-														<span className="text-white">,</span>
+														<span className="text-gray-900 dark:text-white">
+															,
+														</span>
 													)}
 												</div>
 											</div>
-											<div className="hidden md:flex items-center justify-between text-gray-500 group-hover:text-gray-400 transition-colors">
+											<div className="hidden md:flex items-center justify-between text-gray-500 dark:text-gray-500 group-hover:text-gray-600 dark:group-hover:text-gray-400 transition-colors">
 												<span>{`// ${tech.category}`}</span>
-												<span className="text-gray-600 text-xs">
+												<span className="text-gray-400 dark:text-gray-600 text-xs">
 													[installed]
 												</span>
 											</div>
@@ -326,15 +338,15 @@ export default function TechMatrix() {
 							</motion.div>
 						</AnimatePresence>
 
-						<div className="text-purple-400">{"};"}</div>
+						<div className="text-purple-600 dark:text-purple-400">{"};"}</div>
 
 						{/* Terminal footer */}
-						<div className="mt-6 text-gray-400 border-t border-gray-800/50 pt-4 flex items-center justify-between">
+						<div className="mt-6 text-gray-600 dark:text-gray-400 border-t border-gray-200/50 dark:border-gray-800/50 pt-4 flex items-center justify-between">
 							<div>
-								<span className="text-green-400">$</span> run better-t-stack
-								--with-typesafety
+								<span className="text-green-600 dark:text-green-400">$</span>{" "}
+								run better-t-stack --with-typesafety
 							</div>
-							<div className="text-xs text-gray-600 animate-pulse">
+							<div className="text-xs text-gray-400 dark:text-gray-600 animate-pulse">
 								Ready for deployment...
 							</div>
 						</div>
@@ -344,32 +356,32 @@ export default function TechMatrix() {
 
 			{/* Add animated style tag for custom animations */}
 			<style jsx>{`
-        @keyframes float {
-          0% { transform: translate(0, 0) rotate(0deg); }
-          50% { transform: translate(20px, 20px) rotate(5deg); }
-          100% { transform: translate(0, 0) rotate(0deg); }
-        }
+								@keyframes float {
+										0% { transform: translate(0, 0) rotate(0deg); }
+										50% { transform: translate(20px, 20px) rotate(5deg); }
+										100% { transform: translate(0, 0) rotate(0deg); }
+								}
 
-        @keyframes animate-gradient-x {
-          0% { background-position: 0% 50%; }
-          50% { background-position: 100% 50%; }
-          100% { background-position: 0% 50%; }
-        }
+								@keyframes animate-gradient-x {
+										0% { background-position: 0% 50%; }
+										50% { background-position: 100% 50%; }
+										100% { background-position: 0% 50%; }
+								}
 
-        .animate-gradient-x {
-          background-size: 200% 200%;
-          animation: animate-gradient-x 15s linear infinite;
-        }
+								.animate-gradient-x {
+										background-size: 200% 200%;
+										animation: animate-gradient-x 15s linear infinite;
+								}
 
-        .animate-blink {
-          animation: blink 1s step-end infinite;
-        }
+								.animate-blink {
+										animation: blink 1s step-end infinite;
+								}
 
-        @keyframes blink {
-          0%, 100% { opacity: 1; }
-          50% { opacity: 0; }
-        }
-      `}</style>
+								@keyframes blink {
+										0%, 100% { opacity: 1; }
+										50% { opacity: 0; }
+								}
+						`}</style>
 		</div>
 	);
 }
diff --git a/apps/web/src/app/(home)/_components/TechNodeComponent.tsx b/apps/web/src/app/(home)/_components/TechNodeComponent.tsx
index 311054c..b26f995 100644
--- a/apps/web/src/app/(home)/_components/TechNodeComponent.tsx
+++ b/apps/web/src/app/(home)/_components/TechNodeComponent.tsx
@@ -20,16 +20,16 @@ interface TechNodeData {
 
 export function TechNodeComponent({ data }: { data: TechNodeData }) {
 	const baseStyles = `
-    relative lg:px-5 lg:py-4 px-3 py-1 rounded-lg
-    transition-all duration-300
-    border border-white/20
-    before:content-[''] before:absolute before:left-0 before:top-0 before:w-1.5 before:h-full
-    before:rounded-l-xl ${categoryIndicators[data.category]}
-  `;
+				relative lg:px-5 lg:py-4 px-3 py-1 rounded-lg
+				transition-all duration-300
+				dark:border-white/20 border-gray-300/30
+				before:content-[''] before:absolute before:left-0 before:top-0 before:w-1.5 before:h-full
+				before:rounded-l-xl ${categoryIndicators[data.category]}
+		`;
 
 	const activeStyles = data.isActive
-		? "opacity-100 bg-gradient-to-br from-indigo-900/10 to-violet-900/10"
-		: "opacity-80 hover:opacity-95 bg-slate-800";
+		? "opacity-100 dark:bg-gradient-to-br dark:from-indigo-900/10 dark:to-violet-900/10 bg-gradient-to-br from-indigo-100/40 to-violet-100/40"
+		: "opacity-80 hover:opacity-95 dark:bg-slate-800 bg-slate-100";
 
 	return (
 		<div className="relative group">
@@ -37,19 +37,19 @@ export function TechNodeComponent({ data }: { data: TechNodeData }) {
 				<Handle
 					type="target"
 					position={Position.Top}
-					className="!w-2 !h-2 !bg-indigo-400/70"
+					className="!w-2 !h-2 !bg-indigo-400/70 dark:!bg-indigo-400/70"
 				/>
 			)}
 
 			<div className={`${baseStyles} ${activeStyles} backdrop-blur-3xl`}>
-				<div className="text-white font-medium lg:text-sm text-xs tracking-wide lg:mb-1.5 mb-1">
+				<div className="dark:text-white text-gray-800 font-medium lg:text-sm text-xs tracking-wide lg:mb-1.5 mb-1">
 					{data.label}
 				</div>
-				<div className="lg:text-[11px] text-[9px] leading-relaxed text-white/80">
+				<div className="lg:text-[11px] text-[9px] leading-relaxed dark:text-white/80 text-gray-700">
 					{data.description}
 				</div>
 				{!data.isDefault && !data.isStatic && (
-					<div className="lg:text-[10px] text-[8px] text-indigo-200/70 mt-2 italic">
+					<div className="lg:text-[10px] text-[8px] dark:text-indigo-200/70 text-indigo-500/70 mt-2 italic">
 						Alternative Option
 					</div>
 				)}
@@ -58,7 +58,7 @@ export function TechNodeComponent({ data }: { data: TechNodeData }) {
 			<Handle
 				type="source"
 				position={Position.Bottom}
-				className="!w-2 !h-2 !bg-indigo-400/70"
+				className="!w-2 !h-2 !bg-indigo-400/70 dark:!bg-indigo-400/70"
 			/>
 		</div>
 	);
diff --git a/apps/web/src/app/(home)/_components/TechSelector.tsx b/apps/web/src/app/(home)/_components/TechSelector.tsx
index d702aad..3865cb0 100644
--- a/apps/web/src/app/(home)/_components/TechSelector.tsx
+++ b/apps/web/src/app/(home)/_components/TechSelector.tsx
@@ -49,11 +49,10 @@ interface TechSelectorProps {
 	onSelect: (category: string, techId: string) => void;
 	activeNodes: ActiveNodes;
 }
-
 export function TechSelector({ onSelect, activeNodes }: TechSelectorProps) {
 	return (
-		<div className="h-full overflow-y-auto p-3 space-y-5">
-			<div className="text-sm font-medium text-gray-200 border-b border-gray-700 pb-2">
+		<div className="h-full overflow-y-auto p-3 space-y-5 dark:bg-gray-900 bg-white">
+			<div className="text-sm font-medium dark:text-gray-200 text-gray-800 border-b dark:border-gray-700 border-gray-200 pb-2">
 				Options
 			</div>
 
@@ -61,16 +60,18 @@ export function TechSelector({ onSelect, activeNodes }: TechSelectorProps) {
 				.filter(([category]) => category !== "addons")
 				.map(([category, options]) => (
 					<div key={category} className="space-y-2">
-						<div className="text-xs text-gray-400 capitalize">{category}</div>
+						<div className="text-xs dark:text-gray-400 text-gray-500 capitalize">
+							{category}
+						</div>
 						<div className="flex flex-wrap gap-1">
 							{options.map((option) => (
 								<Badge
 									key={option.id}
 									variant="secondary"
-									className={`cursor-pointer hover:bg-gray-700 text-gray-300 ${
+									className={`cursor-pointer dark:hover:bg-gray-700 hover:bg-gray-200 dark:text-gray-300 text-gray-700 ${
 										activeNodes[
 											category as keyof Omit<ActiveNodes, "addons">
-										] === option.id && "bg-blue-600 text-white"
+										] === option.id && "bg-blue-600 dark:text-white text-white"
 									}`}
 									onClick={() => onSelect(category, option.id)}
 								>
@@ -82,16 +83,16 @@ export function TechSelector({ onSelect, activeNodes }: TechSelectorProps) {
 				))}
 
 			<div className="space-y-2">
-				<div className="text-xs text-gray-400">Addons</div>
+				<div className="text-xs dark:text-gray-400 text-gray-500">Addons</div>
 				<div className="flex flex-wrap gap-1">
 					{techOptions.addons.map((option) => (
 						<Badge
 							key={option.id}
 							variant="secondary"
-							className={`cursor-pointer hover:bg-gray-700 text-gray-300 ${
+							className={`cursor-pointer dark:hover:bg-gray-700 hover:bg-gray-200 dark:text-gray-300 text-gray-700 ${
 								activeNodes.addons[
 									option.id as keyof typeof activeNodes.addons
-								] === true && "bg-blue-600 text-white"
+								] === true && "bg-blue-600 dark:text-white text-white"
 							}`}
 							onClick={() => onSelect("addons", option.id)}
 						>
@@ -117,9 +118,9 @@ const Badge = ({
 	return (
 		<span
 			className={`
-        px-2 rounded-full py-1 text-xs font-medium
-        ${className}
-      `}
+								px-2 rounded-full py-1 text-xs font-medium
+								${className}
+						`}
 			{...props}
 			onClick={props.onClick}
 		>
diff --git a/apps/web/src/app/(home)/_components/TechShowcase.tsx b/apps/web/src/app/(home)/_components/TechShowcase.tsx
index 9a9a290..eb36d1e 100644
--- a/apps/web/src/app/(home)/_components/TechShowcase.tsx
+++ b/apps/web/src/app/(home)/_components/TechShowcase.tsx
@@ -138,8 +138,8 @@ export default function TechShowcase() {
 					type="button"
 					className={`px-4 py-2 rounded-md font-mono text-sm transition-colors ${
 						activeCategory === null
-							? "bg-blue-500 text-white"
-							: "bg-gray-800 text-gray-300 hover:bg-gray-700"
+							? "bg-blue-500 text-white dark:text-white"
+							: "bg-gray-200 text-gray-800 hover:bg-gray-300 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700"
 					}`}
 					onClick={() => setActiveCategory(null)}
 				>
@@ -152,8 +152,8 @@ export default function TechShowcase() {
 						type="button"
 						className={`px-4 py-2 rounded-md font-mono text-sm transition-colors ${
 							activeCategory === category
-								? "bg-blue-500 text-white"
-								: "bg-gray-800 text-gray-300 hover:bg-gray-700"
+								? "bg-blue-500 text-white dark:text-white"
+								: "bg-gray-200 text-gray-800 hover:bg-gray-300 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700"
 						}`}
 						onClick={() => setActiveCategory(category)}
 					>
@@ -170,13 +170,15 @@ export default function TechShowcase() {
 							initial={{ opacity: 0, y: 20 }}
 							animate={{ opacity: 1, y: 0 }}
 							exit={{ opacity: 0 }}
-							className="bg-gray-900/50 backdrop-blur-sm border border-gray-800 rounded-lg p-4 hover:border-blue-500/30 transition-colors"
+							className="bg-white/50 dark:bg-gray-900/50 backdrop-blur-sm border border-gray-200 dark:border-gray-800 rounded-lg p-4 hover:border-blue-500/30 transition-colors"
 						>
-							<h3 className="text-lg font-semibold text-white mb-2">
+							<h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-2">
 								{tech.name}
 							</h3>
-							<p className="text-gray-400 text-sm">{tech.description}</p>
-							<div className="mt-3 text-xs text-gray-500 font-mono">
+							<p className="text-gray-600 dark:text-gray-400 text-sm">
+								{tech.description}
+							</p>
+							<div className="mt-3 text-xs text-gray-500 dark:text-gray-500 font-mono">
 								{tech.category === "tooling" || tech.category === "database" ? (
 									<span>
 										{tech.name === "Drizzle ORM" ||
@@ -202,39 +204,39 @@ export default function TechShowcase() {
 					{groupedTech.map((group) => (
 						<div key={group.category} className="relative">
 							<div className="flex items-center mb-4">
-								<div className="w-6 h-6 rounded-full bg-blue-500/20 flex items-center justify-center text-blue-300 mr-3">
+								<div className="w-6 h-6 rounded-full bg-blue-100 dark:bg-blue-500/20 flex items-center justify-center text-blue-500 dark:text-blue-300 mr-3">
 									{categoryIcons[group.category as keyof typeof categoryIcons]}
 								</div>
-								<h2 className="text-xl font-semibold text-blue-300 font-mono">
+								<h2 className="text-xl font-semibold text-blue-500 dark:text-blue-300 font-mono">
 									{group.category}/
 								</h2>
 							</div>
 
-							<div className="border-l-2 border-gray-800 pl-6 ml-3 pb-4">
+							<div className="border-l-2 border-gray-200 dark:border-gray-800 pl-6 ml-3 pb-4">
 								<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
 									{group.items.map((tech) => (
 										<motion.div
 											key={tech.name}
 											initial={{ opacity: 0 }}
 											animate={{ opacity: 1 }}
-											className="bg-gray-900/30 backdrop-blur-sm border border-gray-800 rounded-md p-4 hover:bg-gray-800/30 transition-colors"
+											className="bg-white/30 dark:bg-gray-900/30 backdrop-blur-sm border border-gray-200 dark:border-gray-800 rounded-md p-4 hover:bg-gray-100/50 dark:hover:bg-gray-800/30 transition-colors"
 										>
 											<div className="flex justify-between items-start">
-												<h3 className="text-lg font-semibold text-white">
+												<h3 className="text-lg font-semibold text-gray-900 dark:text-white">
 													{tech.name}
 												</h3>
-												<div className="bg-gray-800 px-2 py-1 rounded text-xs font-mono text-gray-400">
+												<div className="bg-gray-100 dark:bg-gray-800 px-2 py-1 rounded text-xs font-mono text-gray-600 dark:text-gray-400">
 													{group.category === "tooling" ||
 													tech.category === "database"
 														? "optional"
 														: "core"}
 												</div>
 											</div>
-											<p className="text-gray-400 text-sm mt-2">
+											<p className="text-gray-600 dark:text-gray-400 text-sm mt-2">
 												{tech.description}
 											</p>
-											<div className="mt-3 pt-2 border-t border-gray-800 flex items-center justify-between">
-												<span className="text-xs text-gray-500 font-mono">
+											<div className="mt-3 pt-2 border-t border-gray-200 dark:border-gray-800 flex items-center justify-between">
+												<span className="text-xs text-gray-500 dark:text-gray-500 font-mono">
 													{group.category === "tooling" ||
 													tech.category === "database"
 														? tech.name === "Drizzle ORM" ||
@@ -259,9 +261,13 @@ export default function TechShowcase() {
 			)}
 
 			<div className="mt-10 text-center">
-				<div className="inline-block bg-gray-900/50 backdrop-blur-sm border border-gray-800 rounded-md px-5 py-3 font-mono text-sm text-gray-400">
-					<span className="text-green-400">$</span> npx create-better-t-stack
-					<span className="text-blue-400"> —your-options</span>
+				<div className="inline-block bg-white/50 dark:bg-gray-900/50 backdrop-blur-sm border border-gray-200 dark:border-gray-800 rounded-md px-5 py-3 font-mono text-sm text-gray-600 dark:text-gray-400">
+					<span className="text-green-500 dark:text-green-400">$</span> npx
+					create-better-t-stack
+					<span className="text-blue-500 dark:text-blue-400">
+						{" "}
+						—your-options
+					</span>
 				</div>
 			</div>
 		</section>
diff --git a/apps/web/src/app/(home)/_components/Testimonials.tsx b/apps/web/src/app/(home)/_components/Testimonials.tsx
index c79cdf2..9435c16 100644
--- a/apps/web/src/app/(home)/_components/Testimonials.tsx
+++ b/apps/web/src/app/(home)/_components/Testimonials.tsx
@@ -27,15 +27,16 @@ const testimonials = [
 
 const Testimonials = () => {
 	return (
-		<section className="py-20 relative">
+		<section className="py-20 relative dark:bg-black">
 			<div className="absolute inset-0 opacity-90 z-0" />
 
 			<div className="max-w-6xl mx-auto relative z-10">
 				<div className="text-center mb-16">
-					<h2 className="text-4xl font-bold text-white">
-						<span className="text-gray-400">$</span> cat testimonials.log
+					<h2 className="text-4xl font-bold text-gray-900 dark:text-white">
+						<span className="text-gray-600 dark:text-gray-400">$</span> cat
+						testimonials.log
 					</h2>
-					<p className="text-gray-400 mt-4 text-lg font-mono">
+					<p className="text-gray-600 dark:text-gray-400 mt-4 text-lg font-mono">
 						<span className="text-gray-500">Output:</span> Users reporting
 						success with Better-T Stack
 					</p>
@@ -45,24 +46,30 @@ const Testimonials = () => {
 					{testimonials.map((testimonial) => (
 						<div
 							key={testimonial.name}
-							className="group rounded-md border border-gray-800 bg-black/30 p-6 hover:border-blue-500/30 transition-colors duration-200"
+							className="group rounded-md border border-gray-200 dark:border-gray-800 bg-gray-50/50 dark:bg-black/30 p-6 hover:border-blue-500/30 transition-colors duration-200"
 						>
 							<div className="flex items-center space-x-4 mb-4">
 								<div className="shrink-0">
-									<div className="w-10 h-10 rounded-sm bg-gradient-to-r from-gray-900 to-gray-800 flex items-center justify-center text-gray-300 font-mono">
+									<div className="w-10 h-10 rounded-sm bg-gradient-to-r from-gray-100 to-gray-200 dark:from-gray-900 dark:to-gray-800 flex items-center justify-center text-gray-700 dark:text-gray-300 font-mono">
 										{testimonial.avatar}
 									</div>
 								</div>
 								<div>
-									<h3 className="text-white font-mono">{testimonial.name}</h3>
+									<h3 className="text-gray-900 dark:text-white font-mono">
+										{testimonial.name}
+									</h3>
 									<p className="text-sm font-mono">
-										<span className="text-gray-400">{testimonial.role}</span>
+										<span className="text-gray-600 dark:text-gray-400">
+											{testimonial.role}
+										</span>
 										<span className="text-gray-500 mx-1">@</span>
-										<span className="text-gray-400">{testimonial.company}</span>
+										<span className="text-gray-600 dark:text-gray-400">
+											{testimonial.company}
+										</span>
 									</p>
 								</div>
 							</div>
-							<p className="text-gray-300 leading-relaxed font-mono border-l-2 border-blue-700 pl-4">
+							<p className="text-gray-700 dark:text-gray-300 leading-relaxed font-mono border-l-2 border-blue-700 pl-4">
 								{testimonial.content}
 							</p>
 						</div>
@@ -70,9 +77,9 @@ const Testimonials = () => {
 				</div>
 
 				<div className="text-center mt-12">
-					<div className="inline-block py-2 px-4 bg-black border border-gray-800 rounded-md">
+					<div className="inline-block py-2 px-4 bg-gray-50 dark:bg-black border border-gray-200 dark:border-gray-800 rounded-md">
 						<span className="text-blue-500 font-bold mr-2">$</span>
-						<span className="text-white font-mono">
+						<span className="text-gray-900 dark:text-white font-mono">
 							Join the growing community of developers
 						</span>
 					</div>
diff --git a/apps/web/src/app/(home)/layout.tsx b/apps/web/src/app/(home)/layout.tsx
index ba450b9..a71729b 100644
--- a/apps/web/src/app/(home)/layout.tsx
+++ b/apps/web/src/app/(home)/layout.tsx
@@ -74,7 +74,7 @@ export const metadata: Metadata = {
 
 export default function Layout({ children }: { children: ReactNode }) {
 	return (
-		<main className="relative z-10 min-h-svh bg-zinc-50 dark:bg-slate-950 transition-colors duration-300 overflow-hidden dark">
+		<main className="relative z-10 min-h-svh bg-zinc-50 dark:bg-slate-950 transition-colors duration-300 overflow-hidden">
 			<Navbar />
 			{children}
 			<Footer />
diff --git a/apps/web/src/app/(home)/page.tsx b/apps/web/src/app/(home)/page.tsx
index d0610db..43067c9 100644
--- a/apps/web/src/app/(home)/page.tsx
+++ b/apps/web/src/app/(home)/page.tsx
@@ -1,5 +1,6 @@
 "use client";
 import ShinyText from "@/app/(home)/_components/ShinyText";
+import { useTheme } from "next-themes";
 import React from "react";
 import CodeContainer from "./_components/CodeContainer";
 import CustomizableSection from "./_components/CustomizableSection";
@@ -9,12 +10,14 @@ import TechShowcase from "./_components/TechShowcase";
 import Testimonials from "./_components/Testimonials";
 
 export default function HomePage() {
+	const { theme } = useTheme();
+
 	return (
-		<main className="flex flex-col items-center justify-start sm:p-8 p-4 !pt-40">
+		<main className="flex flex-col items-center justify-start sm:p-8 p-4 !pt-40 dark:bg-gray-950 bg-gray-50 transition-colors duration-300">
 			<div className="max-w-6xl mx-auto text-center mb-16 relative z-50 ">
 				<div className="relative z-10">
 					<div className="flex flex-col items-center justify-center space-y-4 text-center">
-						<h1 className="text-6xl font-extrabold text-white">
+						<h1 className="text-6xl font-extrabold dark:text-white text-gray-900">
 							<span className="block sm:text-7xl text-6xl bg-clip-text text-transparent bg-gradient-to-r from-blue-400 to-indigo-500">
 								Better-T Stack
 							</span>
@@ -24,7 +27,7 @@ export default function HomePage() {
 						</h1>
 						<NpmPackage />
 
-						<p className="sm:text-2xl text-xl font-medium text-gray-300 max-w-2xl">
+						<p className="sm:text-2xl text-xl font-medium dark:text-gray-300 text-gray-700 max-w-2xl">
 							<span className="inline-block transform hover:scale-105 transition-transform duration-200">
 								Scaffold
 							</span>{" "}
@@ -44,26 +47,26 @@ export default function HomePage() {
 					</div>
 				</div>
 				<div className="absolute inset-0 -z-10">
-					<div className="absolute inset-0 bg-gradient-to-r from-purple-500/20 to-indigo-500/20 blur-3xl transform -skew-y-12" />
+					<div className="absolute inset-0 bg-gradient-to-r from-purple-500/20 to-indigo-500/20 dark:blur-3xl blur-2xl transform -skew-y-12" />
 				</div>
 			</div>
 			{/* <TerminalDisplay /> */}
 
 			<div className="w-full max-w-6xl mx-auto space-y-12 mt-12 relative z-50">
-				<div className="text-center space-y-6 relative z-10 border border-gray-700/30 p-6 rounded-md bg-gray-950/30 backdrop-blur-3xl">
+				<div className="text-center space-y-6 relative z-10 border dark:border-gray-700/30 border-gray-300/50 p-6 rounded-md dark:bg-gray-950/30 bg-white/70 backdrop-blur-3xl">
 					<div className="relative">
 						<h2 className="relative sm:text-4xl text-3xl md:text-5xl font-bold pb-3 group">
 							<span className="text-blue-400 font-mono mr-1 animate-pulse">
 								{">"}
 							</span>
-							<span className="bg-clip-text text-transparent bg-gradient-to-r from-blue-400 via-white to-indigo-500 hover:from-indigo-400 hover:to-blue-500 transition-all duration-300">
+							<span className="bg-clip-text text-transparent bg-gradient-to-r from-blue-400 to-indigo-500 hover:from-indigo-400 hover:to-blue-500 transition-all duration-300 dark:via-white via-gray-800">
 								A Symphony of Modern Tech
 							</span>
 						</h2>
-						<div className="absolute -inset-1 bg-gradient-to-r from-gray-800/0 via-gray-700/10 to-gray-800/0 blur-xl -z-10" />
+						<div className="absolute -inset-1 bg-gradient-to-r dark:from-gray-800/0 dark:via-gray-700/10 dark:to-gray-800/0 from-gray-200/0 via-gray-300/20 to-gray-200/0 blur-xl -z-10" />
 					</div>
 					<div className="space-y-4 max-w-3xl mx-auto">
-						<p className="sm:text-xl text-gray-300 leading-relaxed font-mono">
+						<p className="sm:text-xl dark:text-gray-300 text-gray-700 leading-relaxed font-mono">
 							<span className="text-yellow-400">$</span> carefully orchestrated
 							stack of{" "}
 							<span className="text-blue-500 font-semibold">
@@ -71,14 +74,14 @@ export default function HomePage() {
 							</span>
 							, working in perfect harmony
 						</p>{" "}
-						<div className="flex flex-wrap justify-center sm:gap-4 gap-2 sm:text-sm text-xs text-gray-400">
-							<span className="px-3 py-1 bg-black border border-gray-700 rounded-sm hover:bg-gray-900/50 transition-colors">
+						<div className="flex flex-wrap justify-center sm:gap-4 gap-2 sm:text-sm text-xs dark:text-gray-400 text-gray-600">
+							<span className="px-3 py-1 dark:bg-black bg-gray-100 dark:border-gray-700 border-gray-300 rounded-sm dark:hover:bg-gray-900/50 hover:bg-gray-200/80 transition-colors">
 								--end-to-end-type-safety
 							</span>
-							<span className="px-3 py-1 bg-black border border-gray-700 rounded-sm hover:bg-gray-900/50 transition-colors">
+							<span className="px-3 py-1 dark:bg-black bg-gray-100 dark:border-gray-700 border-gray-300 rounded-sm dark:hover:bg-gray-900/50 hover:bg-gray-200/80 transition-colors">
 								--lightning-fast
 							</span>
-							<span className="px-3 py-1 bg-black border border-gray-700 rounded-sm hover:bg-gray-900/50 transition-colors">
+							<span className="px-3 py-1 dark:bg-black bg-gray-100 dark:border-gray-700 border-gray-300 rounded-sm dark:hover:bg-gray-900/50 hover:bg-gray-200/80 transition-colors">
 								--modern-tools
 							</span>
 						</div>
@@ -93,7 +96,7 @@ export default function HomePage() {
 					<div className="flex items-center justify-center">
 						<div className="hidden sm:flex items-center w-1/3">
 							<div className="h-px flex-grow bg-gradient-to-r from-transparent to-blue-500/70" />
-							<div className="h-8 w-8 rounded-full bg-gray-900 border border-gray-700 flex items-center justify-center relative">
+							<div className="h-8 w-8 rounded-full dark:bg-gray-900 bg-gray-100 dark:border-gray-700 border-gray-300 flex items-center justify-center relative">
 								<div
 									className="h-2 w-2 bg-blue-400 rounded-full animate-ping absolute"
 									style={{ animationDuration: "2.5s" }}
@@ -106,7 +109,7 @@ export default function HomePage() {
 						</div>
 
 						<div className="hidden sm:flex items-center w-1/3">
-							<div className="h-8 w-8 rounded-full bg-gray-900 border border-gray-700 flex items-center justify-center relative">
+							<div className="h-8 w-8 rounded-full dark:bg-gray-900 bg-gray-100 dark:border-gray-700 border-gray-300 flex items-center justify-center relative">
 								<div
 									className="h-2 w-2 bg-indigo-400 rounded-full animate-ping absolute"
 									style={{ animationDuration: "2.5s" }}
@@ -118,10 +121,10 @@ export default function HomePage() {
 
 					<div className="sm:hidden h-px w-full mt-4 bg-gradient-to-r from-blue-500/30 via-indigo-500 to-blue-500/30" />
 
-					<div className="absolute -top-10 left-1/4 text-6xl text-gray-800/10 font-mono transform rotate-12">
+					<div className="absolute -top-10 left-1/4 text-6xl dark:text-gray-800/10 text-gray-300/20 font-mono transform rotate-12">
 						{"{"}
 					</div>
-					<div className="absolute -bottom-10 right-1/4 text-6xl text-gray-800/10 font-mono transform -rotate-12">
+					<div className="absolute -bottom-10 right-1/4 text-6xl dark:text-gray-800/10 text-gray-300/20 font-mono transform -rotate-12">
 						{"}"}
 					</div>
 				</div>
diff --git a/apps/web/src/app/layout.tsx b/apps/web/src/app/layout.tsx
index 57c89a1..6983c2f 100644
--- a/apps/web/src/app/layout.tsx
+++ b/apps/web/src/app/layout.tsx
@@ -18,6 +18,9 @@ export default function Layout({ children }: { children: ReactNode }) {
 							type: "static",
 						},
 					}}
+					theme={{
+						enableSystem: true,
+					}}
 				>
 					{children}
 				</RootProvider>