diff --git a/apps/web/src/app/(home)/_components/CustomizableSection.tsx b/apps/web/src/app/(home)/_components/CustomizableSection.tsx
index 4d6bc40..9015d87 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  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="text-center space-y-6 relative z-10 border dark:border-gray-700/30 border-gray-500/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 }}
@@ -15,7 +15,7 @@ export default function CustomizableSection() {
 						<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-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">
+						<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 transition-all duration-300">
 							Your Stack, Your Choice
 						</span>
 					</motion.h2>
diff --git a/apps/web/src/app/(home)/_components/TechNodeComponent.tsx b/apps/web/src/app/(home)/_components/TechNodeComponent.tsx
index b26f995..d73c246 100644
--- a/apps/web/src/app/(home)/_components/TechNodeComponent.tsx
+++ b/apps/web/src/app/(home)/_components/TechNodeComponent.tsx
@@ -28,7 +28,7 @@ export function TechNodeComponent({ data }: { data: TechNodeData }) {
 		`;
 
 	const activeStyles = data.isActive
-		? "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-100 dark:bg-gradient-to-br dark:from-indigo-900/30 dark:to-violet-900/30 bg-gradient-to-br from-indigo-50 to-violet-50"
 		: "opacity-80 hover:opacity-95 dark:bg-slate-800 bg-slate-100";
 
 	return (
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 cf73364..66a7972 100644
--- a/apps/web/src/app/(home)/page.tsx
+++ b/apps/web/src/app/(home)/page.tsx
@@ -39,24 +39,24 @@ export default function HomePage() {
 						<ShinyText
 							text="Be the safest developer with typesafe Typescript"
 							speed={3}
-							className="sm:text-lg text-md"
+							className="sm:text-lg text-md text-gray-600 dark:text-[#b5b5b5a4]"
 						/>
 					</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 dark:blur-3xl blur-2xl transform -skew-y-12" />
+					<div className="absolute inset-0 bg-gradient-to-r dark:from-purple-500/20 dark:to-indigo-500/20 from-blue-300/20 to-indigo-300/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 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="text-center space-y-6 relative z-10 border dark:border-gray-700/30 border-gray-500/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 to-indigo-500 hover:from-indigo-400 hover:to-blue-500 transition-all duration-300 dark:via-white via-gray-800">
+							<span className="bg-clip-text text-transparent bg-gradient-to-r from-blue-500 to-indigo-600 dark:from-blue-400 dark:to-indigo-500 hover:from-indigo-500 hover:to-blue-600 dark:hover:from-indigo-400 dark:hover:to-blue-500 transition-all duration-300">
 								A Symphony of Modern Tech
 							</span>
 						</h2>
diff --git a/apps/web/src/app/global.css b/apps/web/src/app/global.css
index 58522b1..aa185c2 100644
--- a/apps/web/src/app/global.css
+++ b/apps/web/src/app/global.css
@@ -11,7 +11,6 @@
 }
 
 .shiny-text {
-	color: #b5b5b5a4;
 	background: linear-gradient(
 		120deg,
 		rgba(255, 255, 255, 0) 40%,