diff --git a/app/resources/component/resource-card.tsx b/app/resources/component/resource-card.tsx
index 45653f7..5978796 100644
--- a/app/resources/component/resource-card.tsx
+++ b/app/resources/component/resource-card.tsx
@@ -7,12 +7,12 @@ interface ResourceCardProps {
 
 export function ResourceCard({ title, description, isComingSoon, buttonColor = "bg-blue-500" }: ResourceCardProps) {
     return (
-        <div className="p-6 rounded-xl bg-white/5 border border-white/10 backdrop-blur-sm">
-            <h3 className="text-2xl font-semibold text-white mb-3">{title}</h3>
-            <p className="text-white/70 mb-6">{description}</p>
+        <div className="p-6 rounded-xl bg-background border border-secondary backdrop-blur-sm">
+            <h3 className="text-2xl font-semibold mb-3">{title}</h3>
+            <p className="text-accent-foreground mb-6">{description}</p>
             <button
-                className={`px-6 py-2 rounded-full ${isComingSoon ? "bg-gray-500 cursor-not-allowed" : buttonColor
-                    } text-white font-medium transition-transform hover:scale-105 active:scale-95`}
+                className={`px-6 py-2 rounded-full ${isComingSoon ? "dark:bg-neutral-500 bg-neutral-800 cursor-not-allowed" : buttonColor
+                    } text-primary-foreground font-medium transition-transform hover:scale-105 active:scale-95`}
                 disabled={isComingSoon}
             >
                 {isComingSoon ? "Coming Soon" : "Explore resources"}
diff --git a/app/resources/component/support-section.tsx b/app/resources/component/support-section.tsx
index b88c3f9..f171303 100644
--- a/app/resources/component/support-section.tsx
+++ b/app/resources/component/support-section.tsx
@@ -1,30 +1,31 @@
-import { Card } from "@/components/ui/card"
-import { Button } from "@/components/ui/button"
+import { Card } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
 
 export default function SupportSection() {
-    return (
-        <Card className="relative overflow-hidden bg-black text-white p-8 md:p-12">
-            {/* Rainbow gradient background effect */}
-            <div className="absolute inset-0 bg-gradient-to-r from-rose-500/10 via-emerald-500/10 to-violet-500/10 opacity-20" />
+  return (
+    <Card className="relative overflow-hidden bg-secondary p-8 md:p-12">
+      {/* Rainbow gradient background effect */}
+      <div className="absolute inset-0 bg-gradient-to-r from-rose-500/10 via-emerald-500/10 to-violet-500/10 opacity-20" />
 
-            <div className="relative z-10 flex flex-col items-center justify-center gap-6 text-center max-w-3xl mx-auto">
-                <h2 className="text-4xl md:text-5xl font-bold tracking-tight">Support Our Learning Community</h2>
+      <div className="relative z-10 flex flex-col items-center justify-center gap-6 text-center max-w-3xl mx-auto">
+        <h2 className="text-4xl md:text-5xl font-bold tracking-tight">
+          Support Our Learning Community
+        </h2>
 
-                <p className="text-lg md:text-xl text-gray-200">
-                    Help us grow by sharing this website with your friends and colleagues!
-                </p>
+        <p className="text-lg md:text-xl dark:text-neutral-200 text-neutral-700">
+          Help us grow by sharing this website with your friends and colleagues!
+        </p>
 
-                <Button
-                    className="w-full sm:w-auto px-8 py-6 text-lg font-medium relative overflow-hidden group bg-white/10 hover:bg-white/20 transition-colors"
-                    variant="ghost"
-                >
-                    {/* Rainbow gradient border effect */}
-                    <div className="absolute inset-0 bg-gradient-to-r from-rose-500 via-emerald-500 to-violet-500 opacity-20 group-hover:opacity-30 transition-opacity" />
+        <Button
+          className="w-full sm:w-auto px-8 py-6 text-lg font-medium relative overflow-hidden group bg-white/10 hover:bg-white/20 transition-colors"
+          variant="ghost"
+        >
+          {/* Rainbow gradient border effect */}
+          <div className="absolute inset-0 bg-gradient-to-r from-rose-500 via-emerald-500 to-violet-500 opacity-20 group-hover:opacity-30 transition-opacity" />
 
-                    <span className="relative z-10">Support Us</span>
-                </Button>
-            </div>
-        </Card>
-    )
+          <span className="relative z-10">Support Us</span>
+        </Button>
+      </div>
+    </Card>
+  );
 }
-
diff --git a/app/resources/page.tsx b/app/resources/page.tsx
index e2aeca3..a5f1452 100644
--- a/app/resources/page.tsx
+++ b/app/resources/page.tsx
@@ -1,32 +1,32 @@
-import { ResourceCard } from "./component/resource-card"
-import { Globe, Laptop } from "lucide-react"
-import Navbar1 from "@/components/navbar"
-import { Ripple } from "./component/ripple"
-import SupportSection from "./component/support-section"
-import Footer from "@/components/footer"
+import { ResourceCard } from "./component/resource-card";
+import { Globe, Laptop } from "lucide-react";
+import Navbar1 from "@/components/navbar";
+import { Ripple } from "./component/ripple";
+import SupportSection from "./component/support-section";
+import Footer from "@/components/footer";
 
 export default function ResourcesPage() {
   return (
     <div className="">
       <Navbar1 />
-      <div className="min-h-screen bg-black text-white relative">
+      <div className="min-h-screen bg-background relative">
         {/* Hero Section */}
         <div className="relative pt-32 pb-16 px-4 text-center">
           <Ripple className="absolute inset-0 z-0" />
 
-          <h1 className="text-5xl md:text-6xl font-extrabold mb-6 bg-gradient-to-r from-white to-white/80 bg-clip-text text-transparent shadow-text">
+          <h1 className="text-5xl md:text-6xl font-extrabold mb-6 dark:bg-gradient-to-r from-white to-white/80 dark:bg-clip-text dark:text-transparent text-black shadow-text">
             Discover Resources
           </h1>
-          <p className="text-xl md:text-2xl text-white/80 max-w-3xl mx-auto mb-12">
-            Explore our curated collection of learning materials to enhance your skills in programming, web development,
-            and DevOps.
+          <p className="text-xl md:text-2xl dark:text-white/80 text-black max-w-3xl mx-auto mb-12">
+            Explore our curated collection of learning materials to enhance your
+            skills in programming, web development, and DevOps.
           </p>
         </div>
 
         {/* Programming Languages Section */}
         <div className="relative px-4 pb-24 max-w-7xl mx-auto">
           <div className="flex items-center gap-3 mb-8">
-            <Laptop className="text-white/80" size={32} />
+            <Laptop className="dark:text-white/80 text-black" size={32} />
             <h2 className="text-3xl font-semibold">Programming Languages</h2>
           </div>
 
@@ -54,7 +54,7 @@ export default function ResourcesPage() {
 
         <div className="relative px-4 pb-24 max-w-7xl mx-auto">
           <div className="flex items-center gap-3 mb-8">
-            <Globe className="text-white/80" size={32} />
+            <Globe className="dark:text-white/80 text-black" size={32} />
             <h2 className="text-3xl font-semibold">Foundations</h2>
           </div>
 
@@ -83,6 +83,5 @@ export default function ResourcesPage() {
       <SupportSection />
       <Footer />
     </div>
-  )
+  );
 }
-
diff --git a/components/ui/navbar-menu.tsx b/components/ui/navbar-menu.tsx
index 53c4ee9..bc4cd46 100644
--- a/components/ui/navbar-menu.tsx
+++ b/components/ui/navbar-menu.tsx
@@ -25,7 +25,7 @@ export const MenuItem = ({
     children?: React.ReactNode;
 }) => {
     return (
-        <div onMouseEnter={() => setActive(item)} className="relative px-8 py-3 rounded-xl hover:bg-black hover:dark:bg-white hover:text-black transition-all duration-300 text-foreground shadow-sm border border-transparent   hover:border-white hover:shadow-[0px_0px_20px_5px_rgba(255,255,255,0.4)]">
+        <div onMouseEnter={() => setActive(item)} className="relative px-8 py-3 rounded-xl hover:bg-white hover:dark:bg-white hover:text-black transition-all duration-300 text-foreground shadow-sm border border-transparent   hover:border-white hover:shadow-[0px_0px_20px_5px_rgba(255,255,255,0.4)]">
             <motion.p
                 transition={{ duration: 0.3 }}
                 className="cursor-pointer  hover:opacity-[0.9] "