diff --git a/public/CNAME b/public/CNAME
new file mode 100644
index 0000000..e5d461a
--- /dev/null
+++ b/public/CNAME
@@ -0,0 +1 @@
+recursivezero.com
\ No newline at end of file
diff --git a/src/assets/styles/footer.css b/src/assets/styles/footer.css
index 444168e..21fa09e 100644
--- a/src/assets/styles/footer.css
+++ b/src/assets/styles/footer.css
@@ -8,5 +8,5 @@
 }
 
 .footer__nav--item {
-  @apply underline underline-offset-2 hover:text-blue-600 dark:hover:text-blue-600;
-}
+  @apply underline underline-offset-2 hover:text-blue-600 dark:text-sky-500 dark:hover:text-blue-600;
+}
\ No newline at end of file
diff --git a/src/components/AboutSection.astro b/src/components/AboutSection.astro
index 9ed2781..35107d7 100644
--- a/src/components/AboutSection.astro
+++ b/src/components/AboutSection.astro
@@ -3,20 +3,22 @@ import image from "@/assets/images/hero.webp";
 import { Image } from "astro:assets";
 ---
 
-<section class="bg-background text-foreground overflow-hidden">
+<section class="overflow-hidden">
   <div class="mx-auto max-w-7xl px-6 py-20 lg:px-10 lg:py-28">
     <div class="grid items-center gap-14 lg:grid-cols-2">
       <!-- Left Content -->
       <div>
-        <p class="mb-5 text-sm font-semibold uppercase tracking-[0.25em] text-blue-600">Recursive Zero</p>
+        <p class="mb-5 text-sm font-semibold uppercase tracking-[0.25em] text-blue-600 dark:text-sky-500">
+          Recursive Zero
+        </p>
 
         <h1 class="text-5xl font-bold leading-tight tracking-tight md:text-6xl lg:text-7xl">
           We Build Digital <br />
           Products That <br />
-          Drive <span class="text-blue-600">Results.</span>
+          Drive <span class="text-blue-600 dark:text-sky-500">Results.</span>
         </h1>
 
-        <p class="text-foreground/70 mt-7 max-w-xl text-lg leading-8">
+        <p class="mt-7 max-w-xl text-lg leading-8">
           Recursive Zero crafts high-performance web apps, internal tools, and scalable digital solutions that simplify
           operations and accelerate business growth.
         </p>
@@ -24,24 +26,18 @@ import { Image } from "astro:assets";
         <!-- Buttons -->
         <div class="mt-10 flex flex-wrap gap-4">
           <!-- Contact -->
-          <a
-            href="#contactForm"
-            class="dark:border-foreground/20 text-foreground hover:bg-foreground hover:text-background rounded-xl border-2 border-gray-500 px-7 py-4 font-semibold transition"
-          >
+          <a href="#contactForm" class="rounded-xl border-2 border-gray-500 px-7 py-4 font-semibold transition">
             Contact Us →
           </a>
 
           <!-- Work (same tab) -->
-          <a
-            href="/work"
-            class="dark:border-foreground/20 text-foreground hover:bg-foreground hover:text-background rounded-xl border-2 border-gray-500 px-7 py-4 font-semibold transition"
-          >
+          <a href="/work" class="rounded-xl border-2 border-gray-500 px-7 py-4 font-semibold transition">
             View Our Work
           </a>
         </div>
 
         <!-- Points -->
-        <div class="text-foreground/70 mt-10 flex flex-wrap gap-6 text-sm">
+        <div class="mt-10 flex flex-wrap gap-6 text-sm">
           <span>✓ Fast Delivery</span>
           <span>✓ Scalable</span>
           <span>✓ Client-Focused</span>
@@ -60,7 +56,7 @@ import { Image } from "astro:assets";
           alt="Dashboard Preview"
           loading="eager"
           fetchpriority="high"
-          class="border-foreground/10 relative z-10 w-full rounded-3xl border object-cover shadow-2xl"
+          class="relative z-10 w-full rounded-3xl border object-cover shadow-2xl"
         />
       </div>
     </div>
diff --git a/src/components/AppsSimplifySection.astro b/src/components/AppsSimplifySection.astro
index f0d35ea..9e25ce1 100644
--- a/src/components/AppsSimplifySection.astro
+++ b/src/components/AppsSimplifySection.astro
@@ -3,47 +3,46 @@ import workplaceImage from "@/assets/images/workplace.webp";
 import { Image } from "astro:assets";
 ---
 
-<section class="bg-background text-foreground">
+<section class="">
   <div class="mx-auto max-w-7xl px-6 py-20 lg:px-10">
     <div class="grid items-center gap-14 lg:grid-cols-2">
       <!-- Left Content -->
       <div>
-        <p class="mb-4 text-sm font-semibold uppercase tracking-[0.25em] text-blue-600">What We Build</p>
+        <p class="mb-4 text-sm font-semibold uppercase tracking-[0.25em] text-blue-600 dark:text-sky-500">
+          What We Build
+        </p>
 
         <h2 class="text-4xl font-bold leading-tight tracking-tight md:text-5xl">
           Simplifying daily tasks <br />
           with handy mini apps
         </h2>
 
-        <p class="text-foreground/70 mt-6 max-w-xl text-lg leading-8">
+        <p class="mt-6 max-w-xl text-lg leading-8">
           Based in Bengaluru, Recursive Zero creates compact yet powerful apps designed to streamline your workflow,
           improve storage efficiency, and enhance everyday productivity.
         </p>
 
-        <p class="text-foreground/70 mt-4 max-w-xl text-lg leading-8">
+        <p class="mt-4 max-w-xl text-lg leading-8">
           Our solutions combine simplicity with smart technology, helping users and businesses achieve more with less
           effort.
         </p>
 
         <!-- Features -->
         <div class="mt-8 grid gap-4 sm:grid-cols-2">
-          <div class="border-foreground/10 bg-background/50 rounded-2xl border p-5">
-            <h3 class="text-foreground font-semibold">Fast & Lightweight</h3>
-            <p class="text-foreground/60 mt-2 text-sm">Built for speed and smooth performance.</p>
+          <div class="rounded-2xl border p-5">
+            <h3 class="font-semibold">Fast & Lightweight</h3>
+            <p class="mt-2 text-sm">Built for speed and smooth performance.</p>
           </div>
 
-          <div class="border-foreground/10 bg-background/50 rounded-2xl border p-5">
-            <h3 class="text-foreground font-semibold">Easy to Use</h3>
-            <p class="text-foreground/60 mt-2 text-sm">Clean UI focused on user productivity.</p>
+          <div class="rounded-2xl border p-5">
+            <h3 class="font-semibold">Easy to Use</h3>
+            <p class="mt-2 text-sm">Clean UI focused on user productivity.</p>
           </div>
         </div>
 
         <!-- Button -->
         <div class="mt-10">
-          <a
-            href="/work"
-            class="dark:border-foreground/20 text-foreground hover:bg-foreground hover:text-background rounded-xl border-2 border-gray-500 px-7 py-4 font-semibold transition"
-          >
+          <a href="/work" class="rounded-xl border-2 border-gray-500 px-7 py-4 font-semibold transition">
             Explore Apps →
           </a>
         </div>
diff --git a/src/components/BlogCard.astro b/src/components/BlogCard.astro
index 098a98c..1339c1d 100644
--- a/src/components/BlogCard.astro
+++ b/src/components/BlogCard.astro
@@ -36,7 +36,7 @@ const formattedDate = formatDate(date);
 <article class="group h-full">
   <a href={url} target="_blank" rel="noopener noreferrer" class="block h-full">
     <div
-      class="border-foreground/10 bg-background/80 flex h-full flex-col overflow-hidden rounded-3xl border shadow-lg backdrop-blur-md transition-all duration-300 hover:-translate-y-3 hover:border-cyan-400/30 hover:shadow-2xl"
+      class="flex h-full flex-col overflow-hidden rounded-3xl border shadow-lg backdrop-blur-md transition-all duration-300 hover:-translate-y-3 hover:border-cyan-400/30 hover:shadow-2xl"
     >
       <!-- Image -->
       <figure class="h-64 overflow-hidden rounded-t-3xl">
@@ -68,19 +68,17 @@ const formattedDate = formatDate(date);
         </div>
 
         <!-- Title -->
-        <h3
-          class="text-foreground line-clamp-2 text-2xl font-bold leading-snug transition-colors duration-300 group-hover:text-blue-600"
+        <h2
+          class="line-clamp-2 text-2xl font-bold leading-snug transition-colors duration-300 group-hover:text-blue-600 dark:text-sky-500"
         >
           {title}
-        </h3>
+        </h2>
 
         <!-- Description -->
-        {description && <p class="text-foreground/75 mt-4 line-clamp-3 flex-1 text-base leading-8">{description}</p>}
+        {description && <p class="mt-4 line-clamp-3 flex-1 text-base leading-8">{description}</p>}
 
         <!-- Bottom Meta -->
-        <div
-          class="border-foreground/10 text-foreground/70 mt-6 flex items-center justify-between border-t pt-4 text-sm"
-        >
+        <div class="mt-6 flex items-center justify-between border-t pt-4 text-sm">
           {
             displayUrl ? (
               <span class="truncate text-blue-900 underline underline-offset-4 transition hover:text-blue-700 dark:text-white dark:hover:text-gray-300">
@@ -91,7 +89,7 @@ const formattedDate = formatDate(date);
                 {new URL(url).origin}
               </span>
             ) : (
-              <span class="text-foreground/80">
+              <span class="">
                 By <span class="font-bold text-slate-900 dark:text-white">{author || "Recursive Zero"}</span>
               </span>
             )
@@ -99,7 +97,7 @@ const formattedDate = formatDate(date);
 
           {
             formattedDate && (
-              <time datetime={date} class="text-foreground/60 italic">
+              <time datetime={date} class="italic">
                 {formattedDate}
               </time>
             )
diff --git a/src/components/BlogsSection.astro b/src/components/BlogsSection.astro
index 12789c0..dc48a0c 100644
--- a/src/components/BlogsSection.astro
+++ b/src/components/BlogsSection.astro
@@ -7,14 +7,14 @@ const posts = await getCollection("blog");
 const slicedPosts = posts.slice(0, 3);
 ---
 
-<section class="bg-background py-20">
+<section class="py-20">
   <div class="mx-auto max-w-7xl px-6 lg:px-10">
     <!-- Top Heading -->
     <div class="mb-14 flex flex-col gap-5 lg:flex-row lg:items-end lg:justify-between">
       <div>
         <p class="mb-3 text-sm font-semibold uppercase tracking-[0.25em] text-blue-600">Recent Blogs</p>
 
-        <h2 class="text-foreground text-4xl font-bold tracking-tight md:text-5xl">
+        <h2 class="text-4xl font-bold tracking-tight md:text-5xl">
           Insights, Updates <br class="hidden md:block" />
           & Stories
         </h2>
@@ -22,7 +22,7 @@ const slicedPosts = posts.slice(0, 3);
 
       <a
         href="/blogs"
-        class="inline-flex items-center gap-2 text-base font-semibold text-blue-600 transition hover:gap-3"
+        class="inline-flex items-center gap-2 text-base font-semibold text-blue-600 transition hover:gap-3 dark:text-sky-500"
       >
         View All Blogs →
       </a>
diff --git a/src/components/ContactSection.astro b/src/components/ContactSection.astro
index ee9902b..d9402f0 100644
--- a/src/components/ContactSection.astro
+++ b/src/components/ContactSection.astro
@@ -4,7 +4,7 @@ import { CONTACT_EMAIL } from "@/utils/constants";
 import { Image } from "astro:assets";
 ---
 
-<section id="contactForm" class="bg-background text-foreground">
+<section id="contactForm" class="">
   <div class="mx-auto max-w-7xl px-6 py-20 lg:px-10">
     <div class="grid items-center gap-14 lg:grid-cols-2">
       <!-- Left Content -->
@@ -13,18 +13,21 @@ import { Image } from "astro:assets";
 
         <h2 class="text-4xl font-bold leading-tight tracking-tight md:text-5xl">Reach Recursive Zero</h2>
 
-        <p class="text-foreground/70 mt-6 max-w-xl text-lg leading-8">
+        <p class="mt-6 max-w-xl text-lg leading-8">
           Tech simplified — Harness the power of modern technology with Recursive Zero. Send us a message and let’s
           build something impactful together.
         </p>
 
         <!-- Contact Info -->
-        <div class="text-foreground/70 mt-8 space-y-4">
+        <div class="mt-8 space-y-4">
           <!-- Email -->
           <div class="text-lg">
-            <span class="text-foreground font-semibold"> Email: </span>
+            <span class="font-semibold"> Email: </span>
 
-            <a href=`mailto:${CONTACT_EMAIL}` class="ml-1 break-all text-blue-600 transition hover:underline">
+            <a
+              href=`mailto:${CONTACT_EMAIL}`
+              class="ml-1 break-all italic text-blue-600 transition hover:underline dark:text-sky-500"
+            >
               {CONTACT_EMAIL}
             </a>
           </div>
@@ -32,13 +35,12 @@ import { Image } from "astro:assets";
           <!-- Phone (Not Clickable) -->
           <!-- Phone -->
           <!--<div class="text-lg">
-            <span class="text-foreground font-semibold"> Phone: </span>
+            <span class=" font-semibold"> Phone: </span>
           </div>-->
           <!-- Location -->
           <div class="text-lg">
-            <span class="text-foreground font-semibold"> Location: </span>
-
-            <span class="text-foreground/70 ml-1"> Bengaluru, India </span>
+            <span class="font-semibold"> Location: </span>
+            <span class="ml-1"> Bengaluru, India </span>
           </div>
         </div>
 
@@ -58,31 +60,31 @@ import { Image } from "astro:assets";
       </div>
 
       <!-- Right Form -->
-      <div class="border-foreground/10 bg-background/60 rounded-3xl border p-8 backdrop-blur-xl lg:p-10">
-        <h3 class="text-foreground text-2xl font-bold">Let's Talk</h3>
+      <div class="rounded-3xl border p-8 backdrop-blur-xl lg:p-10">
+        <h3 class="text-2xl font-bold">Let's Talk</h3>
 
-        <p class="text-foreground/60 mt-2">Fill the form and we’ll get back to you shortly.</p>
+        <p class="mt-2">Fill the form and we’ll get back to you shortly.</p>
 
         <form class="mt-8 space-y-5">
           <!-- NAME -->
           <input
             type="text"
             placeholder="Full Name"
-            class="border-foreground/10 dark:bg-background text-foreground placeholder:text-foreground/40 h-14 w-full rounded-xl border bg-white px-5 outline-none focus:border-cyan-500"
+            class="dark: placeholder: h-14 w-full rounded-xl border bg-white px-5 outline-none focus:border-cyan-500"
           />
 
           <!-- EMAIL -->
           <input
             type="email"
             placeholder="Email Address"
-            class="border-foreground/10 dark:bg-background text-foreground placeholder:text-foreground/40 h-14 w-full rounded-xl border bg-white px-5 outline-none focus:border-cyan-500"
+            class="dark: placeholder: h-14 w-full rounded-xl border bg-white px-5 outline-none focus:border-cyan-500"
           />
 
           <!-- MESSAGE -->
           <textarea
             rows="5"
             placeholder="Your Message"
-            class="border-foreground/10 dark:bg-background text-foreground placeholder:text-foreground/40 w-full rounded-xl border bg-white px-5 py-4 outline-none focus:border-cyan-500"
+            class="dark: placeholder: w-full rounded-xl border bg-white px-5 py-4 outline-none focus:border-cyan-500"
           ></textarea>
 
           <!-- BUTTON -->
diff --git a/src/components/Footer.astro b/src/components/Footer.astro
index b5fb115..cd740da 100644
--- a/src/components/Footer.astro
+++ b/src/components/Footer.astro
@@ -17,16 +17,18 @@ const logoMap: Record<string, any> = {
 };
 ---
 
-<footer class="bg-background text-foreground">
+<footer class="">
   <!-- Top Border -->
-  <div class="bg-foreground/10 h-[1px] w-full"></div>
+  <div class="h-[1px] w-full"></div>
 
   <div class="mx-auto max-w-7xl px-6 py-16 lg:px-10">
     <!-- Main Grid -->
     <div class="grid gap-12 lg:grid-cols-3">
       <!-- Brand -->
       <div>
-        <p class="mb-4 text-sm font-semibold uppercase tracking-[0.25em] text-blue-600">Recursive Zero</p>
+        <p class="mb-4 text-sm font-semibold uppercase tracking-[0.25em] text-blue-600 dark:text-sky-500">
+          Recursive Zero
+        </p>
 
         <h3 class="text-4xl font-bold leading-tight">
           Building Future Ready
@@ -34,23 +36,23 @@ const logoMap: Record<string, any> = {
           Digital Products
         </h3>
 
-        <p class="text-foreground/70 mt-5 max-w-md text-lg leading-8">
+        <p class="mt-5 max-w-md text-lg leading-8">
           We create premium web apps, internal systems and modern software experiences that help businesses grow faster.
         </p>
       </div>
 
       <!-- Quick Links -->
       <div>
-        <h4 class="text-foreground mb-6 text-xl font-bold">Quick Links</h4>
+        <h4 class="mb-6 text-xl font-bold">Quick Links</h4>
 
-        <ul class="text-foreground/70 grid grid-cols-2 gap-x-10 gap-y-4">
+        <ul class="grid grid-cols-2 gap-x-10 gap-y-4">
           {quickLinks.filter(({ isActive }) => isActive).map((link) => <FooterLink link={link} />)}
         </ul>
       </div>
 
       <!-- Contact -->
       <div>
-        <h4 class="text-foreground mb-6 text-xl font-bold">Connect With Us</h4>
+        <h4 class="mb-6 text-xl font-bold">Connect With Us</h4>
 
         <!-- Social Icons -->
         <div class="flex gap-4">
@@ -59,7 +61,7 @@ const logoMap: Record<string, any> = {
             href="https://www.twitter.com/recursivezero"
             target="_blank"
             rel="noopener noreferrer"
-            class="border-foreground/10 bg-background text-foreground flex h-12 w-12 items-center justify-center rounded-2xl border transition hover:bg-brandBlue hover:text-white"
+            class="flex h-12 w-12 items-center justify-center rounded-2xl border transition hover:bg-brandBlue hover:text-white"
           >
             <span class="h-5 w-5 fill-current">
               <TwitterIcon aria-label="Visit our Twitter page" />
@@ -69,7 +71,7 @@ const logoMap: Record<string, any> = {
           <!-- Mail -->
           <a
             href=`mailto:${CONTACT_EMAIL}`
-            class="border-foreground/10 bg-background text-foreground flex h-12 w-12 items-center justify-center rounded-2xl border transition hover:bg-brandBlue hover:text-white"
+            class="flex h-12 w-12 items-center justify-center rounded-2xl border transition hover:bg-brandBlue hover:text-white"
           >
             <MailIcon aria-label="Mail us" />
           </a>
@@ -79,7 +81,7 @@ const logoMap: Record<string, any> = {
             href="https://www.github.com/recursivezero"
             target="_blank"
             rel="noopener noreferrer"
-            class="border-foreground/10 bg-background text-foreground flex h-12 w-12 items-center justify-center rounded-2xl border transition hover:bg-brandBlue hover:text-white"
+            class="flex h-12 w-12 items-center justify-center rounded-2xl border transition hover:bg-brandBlue hover:text-white"
           >
             <span class="h-5 w-5 fill-current">
               <GitHubIcon aria-label="Find our GitHub repo" />
@@ -88,33 +90,36 @@ const logoMap: Record<string, any> = {
         </div>
 
         <!-- Email -->
-        <div class="mt-5 text-lg">
-          <span class="text-foreground font-semibold">Email: </span>
+        <!--<div class="mt-5 text-lg">
+          <span class="font-semibold">Email: </span>
 
-          <a href=`mailto:${CONTACT_EMAIL}` class="ml-1 break-all text-blue-600 transition hover:underline">
+          <a
+            href=`mailto:${CONTACT_EMAIL}`
+            class="ml-1 break-all text-blue-600 transition hover:underline dark:text-sky-500"
+          >
             {CONTACT_EMAIL}
           </a>
-        </div>
+        </div>-->
       </div>
     </div>
 
     <!-- Bottom -->
-    <div class="border-foreground/10 mt-12 border-t pt-6">
+    <div class="mt-12 border-t pt-6">
       <div class="flex flex-col gap-5 lg:flex-row lg:items-center lg:justify-between">
         <!-- Copyright -->
-        <p class="text-foreground/60 text-sm">© 2025 Recursive Zero Private Limited. All rights reserved.</p>
+        <p class="text-sm">© 2025 Recursive Zero Private Limited. All rights reserved.</p>
 
         <!-- Links -->
         <div class="flex gap-6 text-sm">
-          <a href="/terms" class="text-foreground/60 transition hover:text-blue-600"> Terms & Conditions </a>
+          <a href="/terms" class="transition hover:text-blue-600"> Terms & Conditions </a>
 
-          <a href="/privacy" class="text-foreground/60 transition hover:text-blue-600"> Privacy Policy </a>
+          <a href="/privacy" class="transition hover:text-blue-600"> Privacy Policy </a>
         </div>
       </div>
 
       <!-- Program Partners -->
-      <div class="border-foreground/10 mt-6 border-t pt-5 text-center">
-        <p class="text-foreground/50 text-xs font-semibold uppercase tracking-[0.3em]">Program Partners</p>
+      <div class="mt-6 border-t pt-5 text-center">
+        <p class="text-xs font-semibold uppercase tracking-[0.3em]">Program Partners</p>
 
         <div class="mt-4 flex flex-wrap items-center justify-center gap-8">
           {
diff --git a/src/components/FooterLink.astro b/src/components/FooterLink.astro
index f03787c..272dfdd 100644
--- a/src/components/FooterLink.astro
+++ b/src/components/FooterLink.astro
@@ -10,7 +10,7 @@ const { link } = Astro.props;
 ---
 
 <li>
-  <a href={link.href} class="transition hover:text-blue-600">
+  <a href={link.href} class="transition hover:text-blue-600 dark:text-sky-500">
     {link.label}
   </a>
 </li>
diff --git a/src/components/FounderCard.astro b/src/components/FounderCard.astro
index 89f9abc..a4c330e 100644
--- a/src/components/FounderCard.astro
+++ b/src/components/FounderCard.astro
@@ -17,7 +17,7 @@ const { founder } = Astro.props;
 ---
 
 <div
-  class="border-foreground/10 bg-background dark:bg-foreground/[0.03] group relative overflow-hidden rounded-[2rem] border p-8 transition-all duration-300 hover:-translate-y-1 hover:shadow-xl"
+  class="group relative overflow-hidden rounded-[2rem] border p-8 transition-all duration-300 hover:-translate-y-1 hover:shadow-xl"
 >
   <!-- Glow -->
   <div class="absolute -right-10 -top-10 h-64 w-64 rounded-full bg-brandBlue/10 blur-[100px]"></div>
@@ -25,7 +25,7 @@ const { founder } = Astro.props;
   <div class="relative z-10">
     <div class="flex items-center gap-5">
       <div
-        class="flex h-16 w-16 items-center justify-center rounded-[2rem] bg-brandBlue/10 text-4xl font-bold text-brandBlue"
+        class="flex h-16 w-16 items-center justify-center rounded-[2rem] bg-brandBlue/10 text-4xl font-bold text-brandBlue dark:text-sky-500"
       >
         {
           founder.name
@@ -37,17 +37,17 @@ const { founder } = Astro.props;
       </div>
 
       <div>
-        <h2 class="text-foreground text-3xl font-bold">
+        <h2 class="text-3xl font-bold">
           {founder.name}
         </h2>
 
-        <p class="mt-1 font-medium text-brandBlue">
+        <p class="mt-1 font-medium text-brandBlue dark:text-sky-500">
           {founder.designation}
         </p>
       </div>
     </div>
 
-    <p class="text-foreground/70 mt-6 leading-8">
+    <p class="mt-6 leading-8">
       {founder.description}
     </p>
   </div>
diff --git a/src/components/Header.astro b/src/components/Header.astro
index 527fa0e..7e4b545 100644
--- a/src/components/Header.astro
+++ b/src/components/Header.astro
@@ -40,7 +40,7 @@ const isCurrentPage = (path: string) => {
   }
 </style>
 <header class="sticky top-0 z-50 w-full border-b border-black/20 bg-white dark:border-white/20 dark:bg-[#050B1C]">
-  <div class="bg-background">
+  <div class="">
     <div class="mx-auto hidden h-24 items-center justify-between px-4 sm:px-6 lg:flex lg:px-10">
       <!-- Logo -->
       <a href="/" class="flex items-center gap-3">
@@ -70,7 +70,7 @@ const isCurrentPage = (path: string) => {
 
         <a
           href="/career"
-          class="bg-foreground text-background inline-flex rounded-2xl border border-black px-8 py-4 text-xl font-semibold transition hover:border-transparent hover:bg-brandBlue hover:text-white dark:border-white"
+          class="inline-flex rounded-2xl border border-black px-8 py-4 text-xl font-semibold transition hover:border-transparent hover:bg-brandBlue hover:text-white dark:border-white"
         >
           Join Us
         </a>
@@ -89,7 +89,7 @@ const isCurrentPage = (path: string) => {
             class="h-10 w-10 rounded-full object-contain dark:brightness-200 dark:invert"
           />
 
-          <span class="brand text-foreground truncate font-bold"> RECURSIVE ZERO </span>
+          <span class="brand truncate font-bold"> RECURSIVE ZERO </span>
         </a>
 
         <div class="flex items-center gap-3">
@@ -99,7 +99,7 @@ const isCurrentPage = (path: string) => {
           <button
             id="mobileMenuBtn"
             type="button"
-            class="border-foreground/15 text-foreground flex h-12 w-12 items-center justify-center rounded-3xl border text-4xl"
+            class="flex h-12 w-12 items-center justify-center rounded-3xl border text-4xl"
           >
             ☰
           </button>
@@ -118,7 +118,7 @@ const isCurrentPage = (path: string) => {
               class="h-10 w-10 shrink-0 rounded-full object-contain dark:brightness-200 dark:invert"
             />
 
-            <span class="brand text-foreground text-xl font-bold"> RECURSIVE ZERO </span>
+            <span class="brand text-xl font-bold"> RECURSIVE ZERO </span>
           </div>
 
           <div class="flex items-center gap-3">
@@ -128,7 +128,7 @@ const isCurrentPage = (path: string) => {
             <button
               id="closeMenuBtn"
               type="button"
-              class="border-foreground/15 text-foreground flex h-12 w-12 items-center justify-center rounded-3xl border text-4xl"
+              class="flex h-12 w-12 items-center justify-center rounded-3xl border text-4xl"
             >
               ✕
             </button>
@@ -147,7 +147,7 @@ const isCurrentPage = (path: string) => {
             <li class="pt-8">
               <a
                 href="/career"
-                class="bg-foreground text-background inline-flex rounded-xl border border-black px-6 py-3 text-lg font-semibold transition hover:border-transparent hover:bg-brandBlue dark:border-white"
+                class="inline-flex rounded-xl border border-black px-6 py-3 text-lg font-semibold transition hover:border-transparent hover:bg-brandBlue dark:border-white"
               >
                 Join Us
               </a>
diff --git a/src/components/JobTile.astro b/src/components/JobTile.astro
index 9414e7b..fff3c94 100644
--- a/src/components/JobTile.astro
+++ b/src/components/JobTile.astro
@@ -12,14 +12,12 @@ interface Props {
 const { job } = Astro.props;
 ---
 
-<div
-  class="dark:border-foreground/10 bg-background/60 rounded-3xl border-2 border-gray-300 p-8 shadow-sm backdrop-blur-md"
->
-  <h3 class="text-foreground text-2xl font-bold">
+<div class="dark: rounded-3xl border-2 border-gray-300 p-8 shadow-sm backdrop-blur-md">
+  <h3 class="text-2xl font-bold">
     {job.title}
   </h3>
 
-  <p class="text-foreground/70 mt-4 leading-8">
+  <p class="mt-4 leading-8">
     {job.description}
   </p>
 
@@ -28,7 +26,7 @@ const { job } = Astro.props;
       {job.location}
     </span>
 
-    <span class="text-foreground rounded-full bg-brandBlue/10 px-4 py-2 text-sm font-medium">
+    <span class="rounded-full bg-brandBlue/10 px-4 py-2 text-sm font-medium">
       {job.type}
     </span>
   </div>
diff --git a/src/components/NavItem.astro b/src/components/NavItem.astro
index 1b2fcbc..291af9a 100644
--- a/src/components/NavItem.astro
+++ b/src/components/NavItem.astro
@@ -16,7 +16,7 @@ const { item, active, mobile = false } = Astro.props;
     href={item.href}
     class:list={[
       mobile ? "block text-4xl font-bold transition" : "text-lg font-semibold transition hover:text-blue-600",
-      active ? "text-blue-600 underline underline-offset-8" : "text-foreground"
+      active ? "text-blue-600 underline underline-offset-8 dark:text-sky-500" : ""
     ]}
   >
     {item.name}
diff --git a/src/components/NewsLetterSection.astro b/src/components/NewsLetterSection.astro
index d38d383..13de690 100644
--- a/src/components/NewsLetterSection.astro
+++ b/src/components/NewsLetterSection.astro
@@ -1,16 +1,14 @@
-<section class="bg-background text-foreground">
+<section class="">
   <div class="mx-auto max-w-7xl px-6 py-14 lg:px-10 lg:py-16">
-    <div
-      class="border-foreground/10 bg-background/60 mx-auto max-w-3xl rounded-3xl border px-6 py-10 text-center backdrop-blur-xl lg:px-10"
-    >
+    <div class="mx-auto max-w-3xl rounded-3xl border px-6 py-10 text-center backdrop-blur-xl lg:px-10">
       <!-- Label -->
-      <p class="mb-3 text-xs font-semibold uppercase tracking-[0.25em] text-blue-600">Stay Updated</p>
+      <p class="mb-3 text-xs font-semibold uppercase tracking-[0.25em] text-blue-600 dark:text-sky-500">Stay Updated</p>
 
       <!-- Heading -->
-      <h2 class="text-foreground text-3xl font-bold tracking-tight md:text-4xl">Subscribe to our newsletter</h2>
+      <h2 class="text-3xl font-bold tracking-tight md:text-4xl">Subscribe to our newsletter</h2>
 
       <!-- Description -->
-      <p class="text-foreground/70 mx-auto mt-4 max-w-xl text-base leading-7">
+      <p class="mx-auto mt-4 max-w-xl text-base leading-7">
         Receive latest updates, blogs and important announcements directly in your inbox.
       </p>
 
@@ -21,7 +19,7 @@
           <input
             type="email"
             placeholder="Enter your email address"
-            class="border-foreground/10 dark:bg-background text-foreground placeholder:text-foreground/40 h-12 w-full rounded-xl border bg-white px-4 outline-none focus:border-cyan-500"
+            class="dark: placeholder: h-12 w-full rounded-xl border bg-white px-4 outline-none focus:border-cyan-500"
           />
 
           <!-- BUTTON -->
@@ -35,7 +33,7 @@
       </form>
 
       <!-- Bottom Note -->
-      <p class="text-foreground/50 mt-4 text-sm">No spam. Only quality updates.</p>
+      <p class="mt-4 text-sm">No spam. Only quality updates.</p>
     </div>
   </div>
 </section>
diff --git a/src/components/ThemeToggle.astro b/src/components/ThemeToggle.astro
index 3c925db..ee4a147 100644
--- a/src/components/ThemeToggle.astro
+++ b/src/components/ThemeToggle.astro
@@ -5,7 +5,7 @@ import MoonIcon from "@/assets/icons/moon.svg";
 
 <button
   type="button"
-  class="themeToggle border-foreground/10 text-foreground hover:bg-foreground hover:text-background flex h-12 w-12 items-center justify-center rounded-2xl border transition duration-300"
+  class="themeToggle hover: flex h-12 w-12 items-center justify-center rounded-2xl border transition duration-300"
   aria-label="Toggle Theme"
 >
   <!-- Light Mode Icon -->
diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro
index 67596b6..139836c 100644
--- a/src/layouts/BaseLayout.astro
+++ b/src/layouts/BaseLayout.astro
@@ -25,7 +25,7 @@ const articleDate = meta.articleDate;
     <title>{title}</title>
   </head>
 
-  <body id="pageBody" class="bg-background text-foreground w-full overflow-x-hidden">
+  <body id="pageBody" class="w-full overflow-x-hidden">
     <!-- Header -->
     <Header />
 
diff --git a/src/pages/404.astro b/src/pages/404.astro
index 96fdbe6..bd67e5c 100644
--- a/src/pages/404.astro
+++ b/src/pages/404.astro
@@ -13,11 +13,11 @@ const isBlogRoute = path.startsWith("/blogs");
 
 <BaseLayout meta={meta}>
   <section class="mx-auto flex min-h-[70vh] max-w-4xl flex-col items-center justify-center px-6 text-center">
-    <h1 class="text-foreground mb-4 text-5xl font-bold md:text-7xl">404</h1>
+    <h1 class="mb-4 text-5xl font-bold md:text-7xl">404</h1>
 
-    <h2 class="text-foreground mb-4 text-2xl font-semibold md:text-4xl">Oops something went wrong</h2>
+    <h2 class="mb-4 text-2xl font-semibold md:text-4xl">Oops something went wrong</h2>
 
-    <p class="text-foreground/70 mb-8 max-w-xl text-lg">The page you are trying to access does not exist.</p>
+    <p class="mb-8 max-w-xl text-lg">The page you are trying to access does not exist.</p>
 
     <!-- BLOG REDIRECT BUTTON -->
     {
diff --git a/src/pages/about.astro b/src/pages/about.astro
index 21a1734..229c0ea 100644
--- a/src/pages/about.astro
+++ b/src/pages/about.astro
@@ -1,64 +1,58 @@
 ---
 import aboutImage from "@/assets/images/about.webp";
-import BaseLayout from "@/layouts/BaseLayout";
-import founders from "@/data/about.json";
 import FounderCard from "@/components/FounderCard.astro";
+import founders from "@/data/about.json";
+import BaseLayout from "@/layouts/BaseLayout";
 ---
 
 <BaseLayout meta={{ title: "About Us" }}>
-  <main class="bg-background text-foreground">
+  <main class="">
     <section class="mx-auto max-w-7xl px-6 py-20 lg:px-10">
       <div class="grid items-center gap-16 lg:grid-cols-2">
         <div>
-          <p class="mb-4 text-sm font-semibold uppercase tracking-[0.25em] text-blue-600">About Recursive Zero</p>
+          <p class="mb-4 text-sm font-semibold uppercase tracking-[0.25em] text-blue-600 dark:text-sky-500">
+            About Recursive Zero
+          </p>
 
           <h1 class="text-5xl font-bold leading-tight tracking-tight md:text-7xl">
             Building Technology <br />
             That Creates <br />
-            <span class="text-blue-600"> Real Impact. </span>
+            <span class="text-blue-600 dark:text-sky-500"> Real Impact. </span>
           </h1>
 
-          <p class="text-foreground/75 mt-8 max-w-2xl text-lg leading-9">
+          <p class="mt-8 max-w-2xl text-lg leading-9">
             Recursive Zero is a product engineering company focused on crafting scalable web applications, internal
             tools and digital systems that help startups and businesses move faster.
           </p>
 
-          <p class="text-foreground/75 mt-5 max-w-2xl text-lg leading-9">
+          <p class="mt-5 max-w-2xl text-lg leading-9">
             Since 2024, we’ve been helping teams simplify workflows, automate operations and transform ideas into
             meaningful digital products.
           </p>
 
           <div class="mt-10 grid grid-cols-1 gap-4 sm:grid-cols-3">
-            <div
-              class="border-foreground/10 bg-background dark:bg-foreground/[0.04] rounded-3xl border p-6 text-center shadow-sm backdrop-blur-sm"
-            >
-              <h2 class="text-5xl font-bold text-blue-600">10+</h2>
+            <div class="rounded-3xl border p-6 text-center shadow-sm backdrop-blur-sm">
+              <h2 class="text-5xl font-bold text-blue-600 dark:text-sky-500">10+</h2>
 
-              <p class="text-foreground/70 mt-2 text-sm">Projects</p>
+              <p class="mt-2 text-sm">Projects</p>
             </div>
 
-            <div
-              class="border-foreground/10 bg-background dark:bg-foreground/[0.04] rounded-3xl border p-6 text-center shadow-sm backdrop-blur-sm"
-            >
-              <h2 class="text-5xl font-bold text-blue-600">2024</h2>
+            <div class="rounded-3xl border p-6 text-center shadow-sm backdrop-blur-sm">
+              <h2 class="text-5xl font-bold text-blue-600 dark:text-sky-500">2024</h2>
 
-              <p class="text-foreground/70 mt-2 text-sm">Founded</p>
+              <p class="mt-2 text-sm">Founded</p>
             </div>
 
-            <div
-              class="border-foreground/10 bg-background dark:bg-foreground/[0.04] rounded-3xl border p-6 text-center shadow-sm backdrop-blur-sm"
-            >
-              <h2 class="text-5xl font-bold text-blue-600">24/7</h2>
+            <div class="rounded-3xl border p-6 text-center shadow-sm backdrop-blur-sm">
+              <h2 class="text-5xl font-bold text-blue-600 dark:text-sky-500">24/7</h2>
 
-              <p class="text-foreground/70 mt-2 text-sm">Support</p>
+              <p class="mt-2 text-sm">Support</p>
             </div>
           </div>
         </div>
 
         <div class="space-y-6">
-          <div
-            class="border-foreground/10 bg-background/80 dark:bg-foreground/[0.03] overflow-hidden rounded-[3rem] border shadow-xl backdrop-blur-sm"
-          >
+          <div class="overflow-hidden rounded-[3rem] border shadow-xl backdrop-blur-sm">
             <img
               src={aboutImage.src}
               alt="About Recursive Zero"
@@ -72,19 +66,15 @@ import FounderCard from "@/components/FounderCard.astro";
           </div>
 
           <div class="grid gap-4 md:grid-cols-2">
-            <div
-              class="border-foreground/10 rounded-[2rem] border bg-brandBlue p-6 text-white transition-colors dark:bg-brandBlue/10"
-            >
-              <h2 class="text-foreground text-xl font-bold">Product Engineering</h2>
+            <div class="rounded-[2rem] border bg-brandBlue p-6 text-white transition-colors dark:bg-brandBlue/10">
+              <h2 class="text-xl font-bold">Product Engineering</h2>
 
-              <p class="text-foreground/70 mt-3">Building scalable digital products.</p>
+              <p class="mt-3">Building scalable digital products.</p>
             </div>
-            <div
-              class="border-foreground/10 rounded-[2rem] border bg-brandBlue p-6 text-white transition-colors dark:bg-brandBlue/10"
-            >
-              <h2 class="text-foreground text-xl font-bold">Modern Tech</h2>
+            <div class="rounded-[2rem] border bg-brandBlue p-6 text-white transition-colors dark:bg-brandBlue/10">
+              <h2 class="text-xl font-bold">Modern Tech</h2>
 
-              <p class="text-foreground/70 mt-3">Fast, secure and future-ready systems.</p>
+              <p class="mt-3">Fast, secure and future-ready systems.</p>
             </div>
           </div>
         </div>
@@ -92,33 +82,33 @@ import FounderCard from "@/components/FounderCard.astro";
     </section>
 
     <section class="mx-auto max-w-7xl px-6 py-20 lg:px-10">
-      <p class="mb-4 text-sm font-semibold uppercase tracking-[0.25em] text-blue-600">What We Do</p>
+      <p class="mb-4 text-sm font-semibold uppercase tracking-[0.25em] text-blue-600 dark:text-sky-500">What We Do</p>
 
       <h2 class="max-w-4xl text-4xl font-bold tracking-tight md:text-6xl">
         Digital Solutions Built For Modern Businesses
       </h2>
 
       <div class="mt-16 grid gap-8 md:grid-cols-3">
-        <div class="border-foreground/10 rounded-[2.5rem] border p-10 shadow-sm transition hover:-translate-y-1">
+        <div class="rounded-[2.5rem] border p-10 shadow-sm transition hover:-translate-y-1">
           <h2 class="text-2xl font-bold">Web Applications</h2>
 
-          <p class="text-foreground/70 mt-5 text-lg leading-8">
+          <p class="mt-5 text-lg leading-8">
             High-performance, scalable web apps designed with modern technologies and premium user experiences.
           </p>
         </div>
 
-        <div class="border-foreground/10 rounded-[2.5rem] border p-10 shadow-sm transition hover:-translate-y-1">
+        <div class="rounded-[2.5rem] border p-10 shadow-sm transition hover:-translate-y-1">
           <h2 class="text-2xl font-bold">Internal Tools</h2>
 
-          <p class="text-foreground/70 mt-5 text-lg leading-8">
+          <p class="mt-5 text-lg leading-8">
             We simplify operations by building internal tools that improve productivity and automate repetitive work.
           </p>
         </div>
 
-        <div class="border-foreground/10 rounded-[2.5rem] border p-10 shadow-sm transition hover:-translate-y-1">
+        <div class="rounded-[2.5rem] border p-10 shadow-sm transition hover:-translate-y-1">
           <h2 class="text-2xl font-bold">Scalable Systems</h2>
 
-          <p class="text-foreground/70 mt-5 text-lg leading-8">
+          <p class="mt-5 text-lg leading-8">
             From startups to enterprises, we engineer systems built for long-term growth and performance.
           </p>
         </div>
@@ -127,11 +117,13 @@ import FounderCard from "@/components/FounderCard.astro";
 
     <section class="mx-auto max-w-7xl px-6 py-24 lg:px-10">
       <div class="mb-12">
-        <p class="mb-4 text-sm font-semibold uppercase tracking-[0.25em] text-blue-600">Meet The Team</p>
+        <p class="mb-4 text-sm font-semibold uppercase tracking-[0.25em] text-blue-600 dark:text-sky-500">
+          Meet The Team
+        </p>
 
         <h2 class="text-4xl font-bold tracking-tight md:text-6xl">People Behind Recursive Zero</h2>
 
-        <p class="text-foreground/70 mt-5 max-w-3xl text-lg leading-8">
+        <p class="mt-5 max-w-3xl text-lg leading-8">
           Passionate builders focused on crafting scalable products, solving real business problems and shipping
           impactful solutions.
         </p>
@@ -143,69 +135,65 @@ import FounderCard from "@/components/FounderCard.astro";
     </section>
 
     <section class="mx-auto max-w-7xl px-6 py-24 lg:px-10">
-      <div
-        class="border-foreground/10 bg-background relative overflow-hidden rounded-[4rem] border p-10 shadow-sm lg:p-16"
-      >
+      <div class="relative overflow-hidden rounded-[4rem] border p-10 shadow-sm lg:p-16">
         <div class="absolute -left-20 top-0 h-72 w-72 rounded-full blur-[120px]"></div>
 
         <div class="relative z-10 grid items-center gap-14 lg:grid-cols-2">
           <div>
-            <p class="mb-4 text-sm font-semibold uppercase tracking-[0.25em] text-blue-600">Our Mission</p>
+            <p class="mb-4 text-sm font-semibold uppercase tracking-[0.25em] text-blue-600 dark:text-sky-500">
+              Our Mission
+            </p>
 
             <h2 class="text-4xl font-bold tracking-tight md:text-6xl">
               Innovation With <br />
               Purpose.
             </h2>
 
-            <p class="text-foreground/75 mt-8 text-lg leading-9">
+            <p class="mt-8 text-lg leading-9">
               Our mission is to build practical technology that solves real business problems, simplifies operations and
               creates meaningful digital experiences.
             </p>
 
-            <p class="text-foreground/75 mt-5 text-lg leading-9">
+            <p class="mt-5 text-lg leading-9">
               We focus on long-term partnerships, scalable engineering and thoughtful product development that helps
               companies grow faster with confidence.
             </p>
           </div>
 
           <div class="grid gap-5">
-            <div
-              class="border-foreground/10 bg-foreground/[0.03] rounded-[2rem] border p-6 transition hover:-translate-y-1"
-            >
+            <div class="rounded-[2rem] border p-6 transition hover:-translate-y-1">
               <h2 class="text-xl font-semibold">Product Innovation</h2>
 
-              <p class="text-foreground/70 mt-2">Building meaningful digital products with modern engineering.</p>
+              <p class="mt-2">Building meaningful digital products with modern engineering.</p>
             </div>
 
-            <div
-              class="border-foreground/10 bg-foreground/[0.03] rounded-[2rem] border p-6 transition hover:-translate-y-1"
-            >
+            <div class="rounded-[2rem] border p-6 transition hover:-translate-y-1">
               <h2 class="text-xl font-semibold">Faster Execution</h2>
 
-              <p class="text-foreground/70 mt-2">Delivering scalable systems with speed and reliability.</p>
+              <p class="mt-2">Delivering scalable systems with speed and reliability.</p>
             </div>
 
-            <div
-              class="border-foreground/10 bg-foreground/[0.03] rounded-[2rem] border p-6 transition hover:-translate-y-1"
-            >
+            <div class="rounded-[2rem] border p-6 transition hover:-translate-y-1">
               <h2 class="text-xl font-semibold">Long-Term Partnerships</h2>
 
-              <p class="text-foreground/70 mt-2">Helping startups and businesses grow through technology.</p>
+              <p class="mt-2">Helping startups and businesses grow through technology.</p>
             </div>
           </div>
         </div>
       </div>
     </section>
     <section class="mx-auto max-w-7xl px-6 pb-24 lg:px-10">
-      <div class="border-foreground/10 rounded-[4rem] border p-16 text-center shadow-sm">
-        <p class="mb-4 text-sm font-semibold uppercase tracking-[0.25em] text-blue-600">Let’s Work Together</p>
+      <div class="rounded-[4rem] border p-16 text-center shadow-sm">
+        <p class="mb-4 text-sm font-semibold uppercase tracking-[0.25em] text-blue-600 dark:text-sky-500">
+          Let’s Work Together
+        </p>
 
         <h2 class="text-5xl font-bold md:text-7xl">
           Have an Idea? <br />
           Let’s Build It.
         </h2>
 
-        <p class="text-foreground/70 mx-auto mt-8 max-w-3xl text-xl leading-9">
+        <p class="mx-auto mt-8 max-w-3xl text-xl leading-9">
           We’d love to hear about your next project. Reach out and let’s create something impactful.
         </p>
 
diff --git a/src/pages/blogs/[...slug].astro b/src/pages/blogs/[...slug].astro
index 590d4df..48037a6 100644
--- a/src/pages/blogs/[...slug].astro
+++ b/src/pages/blogs/[...slug].astro
@@ -41,13 +41,11 @@ if (!Content) {
     {description && <p class="mb-6 text-xl text-gray-500">{description}</p>}
     <div class="mb-8 flex items-center gap-4 text-gray-400">
       <!-- META -->
-      <div
-        class="text-foreground/60 mt-8 flex flex-col gap-4 text-sm sm:flex-row sm:flex-wrap sm:items-center sm:gap-6"
-      >
+      <div class="mt-8 flex flex-col gap-4 text-sm sm:flex-row sm:flex-wrap sm:items-center sm:gap-6">
         {
           author && (
             <span class="flex items-center gap-2">
-              <span class="text-foreground">
+              <span class="">
                 <ProfileIcon />
               </span>
 
@@ -59,7 +57,7 @@ if (!Content) {
         {
           date && (
             <span class="flex items-center gap-2">
-              <span class="text-foreground">
+              <span class="">
                 <CalendarIcon />
               </span>
 
@@ -76,7 +74,7 @@ if (!Content) {
             {tags.map((tag: string) => (
               <a
                 href={`/blogs/tag/${tag}`}
-                class="rounded-full border border-cyan-500/20 bg-brandBlue/10 px-3 py-2 text-xs font-medium text-blue-600 transition duration-300 hover:bg-brandBlue hover:text-white sm:px-4 sm:text-sm"
+                class="rounded-full border border-cyan-500/20 bg-brandBlue/10 px-3 py-2 text-xs font-medium text-blue-600 transition duration-300 hover:bg-brandBlue hover:text-white dark:text-sky-500 sm:px-4 sm:text-sm"
               >
                 #{tag}
               </a>
@@ -88,10 +86,10 @@ if (!Content) {
 
     <!-- BLOG CONTENT -->
     <section class="mx-auto max-w-4xl px-5 pb-20 sm:px-6 lg:px-10 lg:pb-24">
-      <div class="border-foreground/10 bg-background rounded-3xl border p-5 sm:p-6 md:p-10">
+      <div class="rounded-3xl border p-5 sm:p-6 md:p-10">
         <MarkdownContent>
           <article
-            class="text-foreground [&_h1]:text-foreground [&_h2]:text-foreground [&_h3]:text-foreground [&_p]:text-foreground/80 [&_li]:text-foreground/80 [&_strong]:text-foreground [&_hr]:border-foreground/10 [&_blockquote]:text-foreground/70 max-w-none [&_a]:font-medium [&_a]:text-blue-600 hover:[&_a]:underline [&_blockquote]:border-l-4 [&_blockquote]:border-cyan-500 [&_blockquote]:pl-4 [&_blockquote]:italic [&_h1]:mb-6 [&_h1]:text-4xl [&_h1]:font-bold [&_h2]:mb-5 [&_h2]:mt-12 [&_h2]:text-3xl [&_h2]:font-bold [&_h3]:mb-4 [&_h3]:mt-8 [&_h3]:text-2xl [&_h3]:font-semibold [&_hr]:my-10 [&_img]:rounded-2xl [&_li]:mb-2 [&_li]:leading-8 [&_ol]:my-5 [&_p]:mb-5 [&_p]:text-base [&_p]:leading-8 [&_ul]:my-5"
+            class="[&_h1]: [&_h2]: [&_h3]: [&_p]: [&_li]: [&_strong]: [&_hr]: [&_blockquote]: max-w-none [&_a]:font-medium [&_a]:text-blue-600 hover:[&_a]:underline [&_blockquote]:border-l-4 [&_blockquote]:border-cyan-500 [&_blockquote]:pl-4 [&_blockquote]:italic [&_h1]:mb-6 [&_h1]:text-4xl [&_h1]:font-bold [&_h2]:mb-5 [&_h2]:mt-12 [&_h2]:text-3xl [&_h2]:font-bold [&_h3]:mb-4 [&_h3]:mt-8 [&_h3]:text-2xl [&_h3]:font-semibold [&_hr]:my-10 [&_img]:rounded-2xl [&_li]:mb-2 [&_li]:leading-8 [&_ol]:my-5 [&_p]:mb-5 [&_p]:text-base [&_p]:leading-8 [&_ul]:my-5"
           >
             <Content />
           </article>
diff --git a/src/pages/blogs/index.astro b/src/pages/blogs/index.astro
index b86161a..01335dd 100644
--- a/src/pages/blogs/index.astro
+++ b/src/pages/blogs/index.astro
@@ -11,18 +11,20 @@ const allTags = [...new Set(posts.flatMap((post) => post.data.tags || []))];
 ---
 
 <BaseLayout meta={{ title: "Blog Articles" }}>
-  <main class="bg-background text-foreground">
+  <main class="">
     <!-- HERO -->
     <section class="mx-auto max-w-7xl px-6 py-20 lg:px-10">
       <div class="text-center">
         <!-- LABEL -->
-        <p class="mb-4 text-sm font-semibold uppercase tracking-[0.25em] text-blue-600">Recursive Zero Blogs</p>
+        <p class="mb-4 text-sm font-semibold uppercase tracking-[0.25em] text-blue-600 dark:text-sky-500">
+          Recursive Zero Blogs
+        </p>
 
         <!-- HEADING -->
-        <h1 class="text-foreground text-4xl font-bold tracking-tight sm:text-5xl md:text-6xl">Blog Articles</h1>
+        <h1 class="text-4xl font-bold tracking-tight sm:text-5xl md:text-6xl">Blog Articles</h1>
 
         <!-- DESCRIPTION -->
-        <p class="text-foreground/70 mx-auto mt-6 max-w-2xl text-lg leading-8">
+        <p class="mx-auto mt-6 max-w-2xl text-lg leading-8">
           Discover our latest blogs, development insights, tutorials, product updates and engineering stories.
         </p>
 
@@ -32,7 +34,7 @@ const allTags = [...new Set(posts.flatMap((post) => post.data.tags || []))];
             allTags.slice(0, 3).map((tag) => (
               <a
                 href={`/blogs/tag/${tag}`}
-                class="rounded-full border border-cyan-500/20 bg-brandBlue/20 px-4 py-2 text-sm font-medium text-blue-700 transition duration-300 hover:bg-brandBlue hover:text-white"
+                class="rounded-full border border-cyan-500/20 bg-brandBlue/20 px-4 py-2 text-sm font-medium text-blue-700 transition duration-300 hover:bg-brandBlue hover:text-white dark:text-white"
               >
                 #{tag}
               </a>
@@ -42,7 +44,7 @@ const allTags = [...new Set(posts.flatMap((post) => post.data.tags || []))];
           <!-- MORE TAGS BUTTON -->
           <a
             href="/blogs/tag"
-            class="border-foreground/10 text-foreground rounded-full border px-5 py-2 text-sm font-semibold transition duration-300 hover:border-cyan-500 hover:text-blue-600"
+            class="rounded-full border px-5 py-2 text-sm font-semibold transition duration-300 hover:border-cyan-500 hover:text-blue-600 dark:text-sky-500"
           >
             More Tags →
           </a>
diff --git a/src/pages/blogs/tag/[tag].astro b/src/pages/blogs/tag/[tag].astro
index f924410..93fe6c3 100644
--- a/src/pages/blogs/tag/[tag].astro
+++ b/src/pages/blogs/tag/[tag].astro
@@ -27,19 +27,21 @@ const filteredBlogs = blogs.filter((blog) => blog.data.tags?.includes(tag!));
     title: `${tag} Blogs`
   }}
 >
-  <main class="bg-background text-foreground">
+  <main class="">
     <section class="mx-auto max-w-7xl px-6 py-20 lg:px-10">
       <!-- TITLE -->
       <div class="mb-12 text-center">
-        <p class="mb-3 text-sm font-semibold uppercase tracking-[0.25em] text-blue-600">Filtered Blogs</p>
+        <p class="mb-3 text-sm font-semibold uppercase tracking-[0.25em] text-blue-600 dark:text-sky-500">
+          Filtered Blogs
+        </p>
 
         <h1 class="text-4xl font-bold md:text-5xl">
           #{tag}
         </h1>
 
-        <p class="text-foreground/70 mt-4">
+        <p class="mt-4">
           Showing blogs related to
-          <span class="font-semibold text-blue-600">
+          <span class="font-semibold text-blue-600 dark:text-sky-500">
             #{tag}
           </span>
         </p>
@@ -61,7 +63,7 @@ const filteredBlogs = blogs.filter((blog) => blog.data.tags?.includes(tag!));
               />
             ))
           ) : (
-            <p class="text-foreground/60 text-center text-lg">No blogs found for this tag.</p>
+            <p class="text-center text-lg">No blogs found for this tag.</p>
           )
         }
       </div>
diff --git a/src/pages/blogs/tag/index.astro b/src/pages/blogs/tag/index.astro
index b063474..483e94c 100644
--- a/src/pages/blogs/tag/index.astro
+++ b/src/pages/blogs/tag/index.astro
@@ -12,15 +12,17 @@ const showError = Astro.url.searchParams.get("error") === "notfound";
 ---
 
 <BaseLayout meta={{ title: "Blog Tags" }}>
-  <main class="bg-background text-foreground min-h-screen">
+  <main class="min-h-screen">
     <section class="mx-auto max-w-7xl px-6 py-20 lg:px-10">
       <!-- TITLE -->
       <div class="text-center">
-        <p class="mb-4 text-sm font-semibold uppercase tracking-[0.25em] text-blue-600">Explore Blogs</p>
+        <p class="mb-4 text-sm font-semibold uppercase tracking-[0.25em] text-blue-600 dark:text-sky-500">
+          Explore Blogs
+        </p>
 
         <h1 class="text-4xl font-bold md:text-6xl">Browse by Tags</h1>
 
-        <p class="text-foreground/70 mx-auto mt-6 max-w-2xl text-lg">Select a tag to explore related blogs.</p>
+        <p class="mx-auto mt-6 max-w-2xl text-lg">Select a tag to explore related blogs.</p>
       </div>
 
       <!-- ERROR POPUP -->
@@ -38,7 +40,7 @@ const showError = Astro.url.searchParams.get("error") === "notfound";
           tags.map((tag) => (
             <a
               href={`/blogs/tag/${tag}`}
-              class="rounded-2xl border border-cyan-500/20 bg-brandBlue/10 px-6 py-4 text-lg font-semibold text-blue-600 transition duration-300 hover:bg-brandBlue hover:text-white"
+              class="rounded-2xl border border-cyan-500/20 bg-brandBlue/10 px-6 py-4 text-lg font-semibold text-blue-600 transition duration-300 hover:bg-brandBlue hover:text-white dark:text-sky-500"
             >
               #{tag}
             </a>
diff --git a/src/pages/career.astro b/src/pages/career.astro
index b043071..c1fbe35 100644
--- a/src/pages/career.astro
+++ b/src/pages/career.astro
@@ -7,15 +7,15 @@ import "../assets/styles/career.css";
 ---
 
 <BaseLayout meta={{ title: "Careers at RecursiveZero" }}>
-  <main class="bg-background text-foreground">
+  <main class="">
     <!-- HERO -->
     <section class="mx-auto max-w-7xl px-6 py-20 lg:px-10">
       <div class="text-center">
-        <p class="mb-4 text-sm font-semibold uppercase tracking-[0.25em] text-blue-600">Careers</p>
+        <p class="mb-4 text-sm font-semibold uppercase tracking-[0.25em] text-blue-600 dark:text-sky-500">Careers</p>
 
         <h1 class="text-5xl font-bold tracking-tight md:text-6xl">Join Our Team</h1>
 
-        <p class="text-foreground/70 mx-auto mt-6 max-w-2xl text-lg leading-8">
+        <p class="mx-auto mt-6 max-w-2xl text-lg leading-8">
           Build the future with us and work on modern digital products with a talented remote-first team.
         </p>
       </div>
@@ -24,7 +24,7 @@ import "../assets/styles/career.css";
       <div class="mt-20 grid gap-12">
         <!-- OPENINGS -->
         <section>
-          <h2 class="text-foreground mb-8 text-3xl font-bold">Current Openings</h2>
+          <h2 class="mb-8 text-3xl font-bold">Current Openings</h2>
 
           <div class="grid gap-6">
             {openings.filter((job) => job.isActive).map((job) => <JobTile job={job} />)}
@@ -33,45 +33,40 @@ import "../assets/styles/career.css";
 
         <!-- WHY JOIN -->
         <section>
-          <h2 class="text-foreground mb-8 text-3xl font-bold">Why Join RecursiveZero?</h2>
+          <h2 class="mb-8 text-3xl font-bold">Why Join RecursiveZero?</h2>
 
           <div class="grid gap-6 md:grid-cols-3">
-            <div
-              class="dark:border-foreground/10 bg-background/60 rounded-3xl border-2 border-gray-300 p-8 shadow-sm backdrop-blur-md"
-            >
-              <h3 class="text-foreground text-xl font-bold">Remote First</h3>
+            <div class="dark: rounded-3xl border-2 border-gray-300 p-8 shadow-sm backdrop-blur-md">
+              <h3 class="text-xl font-bold">Remote First</h3>
 
-              <p class="text-foreground/70 mt-4">Work from anywhere in the world.</p>
+              <p class="mt-4">Work from anywhere in the world.</p>
             </div>
 
-            <div
-              class="dark:border-foreground/10 bg-background/60 rounded-3xl border-2 border-gray-300 p-8 shadow-sm backdrop-blur-md"
-            >
-              <h3 class="text-foreground text-xl font-bold">Learning & Growth</h3>
+            <div class="dark: rounded-3xl border-2 border-gray-300 p-8 shadow-sm backdrop-blur-md">
+              <h3 class="text-xl font-bold">Learning & Growth</h3>
 
-              <p class="text-foreground/70 mt-4">Continuous learning opportunities and mentorship.</p>
+              <p class="mt-4">Continuous learning opportunities and mentorship.</p>
             </div>
 
-            <div
-              class="dark:border-foreground/10 bg-background/60 rounded-3xl border-2 border-gray-300 p-8 shadow-sm backdrop-blur-md"
-            >
-              <h3 class="text-foreground text-xl font-bold">Great Benefits</h3>
+            <div class="dark: rounded-3xl border-2 border-gray-300 p-8 shadow-sm backdrop-blur-md">
+              <h3 class="text-xl font-bold">Great Benefits</h3>
 
-              <p class="text-foreground/70 mt-4">Competitive salary and exciting benefits package.</p>
+              <p class="mt-4">Competitive salary and exciting benefits package.</p>
             </div>
           </div>
         </section>
 
         <!-- APPLY -->
-        <section
-          class="dark:border-foreground/10 bg-background/60 rounded-3xl border-2 border-gray-300 p-10 text-center shadow-sm backdrop-blur-md"
-        >
-          <h2 class="text-foreground text-3xl font-bold">How to Apply</h2>
+        <section class="dark: rounded-3xl border-2 border-gray-300 p-10 text-center shadow-sm backdrop-blur-md">
+          <h2 class="text-3xl font-bold">How to Apply</h2>
 
-          <p class="text-foreground/70 mx-auto mt-6 max-w-2xl text-lg leading-8">
+          <p class="mx-auto mt-6 max-w-2xl text-lg leading-8">
             Send your resume and a brief cover letter to
 
-            <a href=`mailto:${HR_EMAIL}` class="font-semibold text-blue-600 underline underline-offset-4">
+            <a
+              href=`mailto:${HR_EMAIL}`
+              class="font-semibold text-blue-600 underline underline-offset-4 dark:text-sky-500"
+            >
               {HR_EMAIL}
             </a>
           </p>
diff --git a/src/pages/contact.astro b/src/pages/contact.astro
index 6bae656..6c78240 100644
--- a/src/pages/contact.astro
+++ b/src/pages/contact.astro
@@ -1,11 +1,11 @@
 ---
-import BaseLayout from "@/layouts/BaseLayout";
 import ContactSection from "@/components/ContactSection.astro";
+import BaseLayout from "@/layouts/BaseLayout";
 ---
 
 <BaseLayout meta={{ title: "Contact" }}>
   <!-- FORM SECTION (your existing component) -->
-  <section class="bg-background text-foreground">
+  <section class="">
     <ContactSection />
   </section>
 </BaseLayout>
diff --git a/src/pages/numpad.astro b/src/pages/numpad.astro
index 8ebe5e4..6818766 100644
--- a/src/pages/numpad.astro
+++ b/src/pages/numpad.astro
@@ -5,7 +5,7 @@ import "@/assets/styles/numpad.css";
 
 <BaseLayout meta={{ title: "NumPad" }}>
   <div class="numpad-container">
-    <h1 class="text-foreground m-2 text-center text-3xl font-bold tracking-tight">NumPad Timeline</h1>
+    <h1 class="m-2 text-center text-3xl font-bold tracking-tight">NumPad Timeline</h1>
 
     <div class="input-box">
       <input id="input" placeholder="Enter value..." maxlength="16" />
diff --git a/src/pages/privacy.astro b/src/pages/privacy.astro
index 3b92207..48fb406 100644
--- a/src/pages/privacy.astro
+++ b/src/pages/privacy.astro
@@ -11,7 +11,7 @@ import BaseLayout from "@/layouts/BaseLayout";
       "Learn how Recursive Zero collects, uses, stores, and protects your personal information across our products and services."
   }}
 >
-  <main class="bg-background text-foreground min-h-screen">
+  <main class="min-h-screen">
     <!-- HERO -->
     <section>
       <div class="mx-auto max-w-5xl px-6 py-20 lg:px-10">
@@ -20,18 +20,18 @@ import BaseLayout from "@/layouts/BaseLayout";
         <p class="mb-4 text-sm font-semibold uppercase tracking-[0.25em] text-cyan-500">Legal</p>
 
         <!-- DESCRIPTION -->
-        <p class="text-foreground/70 mt-6 max-w-3xl text-lg leading-8">
+        <p class="mt-6 max-w-3xl text-lg leading-8">
           Your privacy is important to us. This Privacy Policy explains how Recursive Zero collects, uses, stores, and
           protects your information when you use our products, services, and platforms.
         </p>
 
         <!-- UPDATED -->
-        <p class="text-foreground/50 mt-6 text-sm">Last Updated: July 2025</p>
+        <p class="mt-6 text-sm">Last Updated: July 2025</p>
       </div>
     </section>
 
     <section class="mx-auto max-w-5xl px-6 pb-24 lg:px-10">
-      <div class="border-foreground/10 bg-background rounded-[2rem] border shadow-sm">
+      <div class="rounded-[2rem] border shadow-sm">
         <div class="px-8 pb-10 pt-6 md:px-12 md:pb-12 md:pt-8 lg:px-16 lg:pb-16 lg:pt-10">
           <MarkdownContent>
             <Content />
diff --git a/src/pages/terms.astro b/src/pages/terms.astro
index 340ab20..d79f1ea 100644
--- a/src/pages/terms.astro
+++ b/src/pages/terms.astro
@@ -10,30 +10,30 @@ import BaseLayout from "@/layouts/BaseLayout";
     description: "Read the terms and conditions for using Recursive Zero products and services."
   }}
 >
-  <main class="bg-background text-foreground min-h-screen">
+  <main class="min-h-screen">
     <!-- HERO -->
     <section>
       <div class="mx-auto max-w-5xl px-6 py-20 lg:px-10">
         <!-- LABEL -->
-        <p class="mb-4 text-sm font-semibold uppercase tracking-[0.25em] text-blue-600">Legal</p>
+        <p class="mb-4 text-sm font-semibold uppercase tracking-[0.25em] text-blue-600 dark:text-sky-500">Legal</p>
 
         <!-- TITLE -->
         <h1 class="text-4xl font-bold tracking-tight md:text-6xl">Terms & Conditions</h1>
 
         <!-- DESCRIPTION -->
-        <p class="text-foreground/70 mt-6 max-w-3xl text-lg leading-8">
+        <p class="mt-6 max-w-3xl text-lg leading-8">
           Please read these terms carefully before using Recursive Zero products, services, and platforms. By accessing
           our services, you agree to comply with these terms.
         </p>
 
         <!-- UPDATED -->
-        <p class="text-foreground/50 mt-6 text-sm">Last Updated: July 2025</p>
+        <p class="mt-6 text-sm">Last Updated: July 2025</p>
       </div>
     </section>
 
     <!-- CONTENT -->
     <section class="mx-auto max-w-5xl px-6 pb-24 lg:px-10">
-      <div class="border-foreground/10 bg-background rounded-[2rem] border shadow-sm">
+      <div class="rounded-[2rem] border shadow-sm">
         <!-- SPACING FIX -->
         <div class="px-8 pb-10 pt-6 md:px-12 md:pb-12 md:pt-8 lg:px-16 lg:pb-16 lg:pt-10">
           <MarkdownContent>
diff --git a/src/pages/work.astro b/src/pages/work.astro
index e1ece7a..297b0ce 100644
--- a/src/pages/work.astro
+++ b/src/pages/work.astro
@@ -1,16 +1,16 @@
 ---
-import externalProjects from "@/data/work.json";
 import abcd from "@/assets/images/abcd.webp";
+import brand from "@/assets/images/brand.webp";
 import fabricAI from "@/assets/images/fabric-ai.webp";
+import numpad from "@/assets/images/numpad.webp";
 import rzro from "@/assets/images/rzro.webp";
 import techTaboo from "@/assets/images/TechTaboo.webp";
 import threadzip from "@/assets/images/threadZip.webp";
 import threadzipApp from "@/assets/images/ThreadzipApp.webp";
 import threadzipLab from "@/assets/images/threadzipLab.webp";
 import BlogCard from "@/components/BlogCard.astro";
+import externalProjects from "@/data/work.json";
 import BaseLayout from "@/layouts/BaseLayout";
-import brand from "@/assets/images/brand.webp";
-import numpad from "@/assets/images/numpad.webp";
 
 const imageMap: Record<string, string> = {
   abcd: abcd.src,
@@ -52,15 +52,15 @@ const pageList = Object.entries(pages)
     title: "Our Work"
   }}
 >
-  <main class="bg-background text-foreground">
+  <main class="">
     <!-- HERO -->
     <section class="mx-auto max-w-7xl px-6 py-20 lg:px-10">
       <div class="text-center">
-        <p class="mb-4 text-sm font-semibold uppercase tracking-[0.25em] text-blue-600">Portfolio</p>
+        <p class="mb-4 text-sm font-semibold uppercase tracking-[0.25em] text-blue-600 dark:text-sky-500">Portfolio</p>
 
-        <h1 class="text-foreground text-4xl font-bold tracking-tight sm:text-5xl md:text-6xl">Our Work</h1>
+        <h1 class="text-4xl font-bold tracking-tight sm:text-5xl md:text-6xl">Our Work</h1>
 
-        <p class="text-foreground/70 mx-auto mt-6 max-w-2xl text-lg leading-8">
+        <p class="mx-auto mt-6 max-w-2xl text-lg leading-8">
           Explore our latest projects, products, platforms and engineering solutions crafted by Recursive Zero.
         </p>
       </div>