diff --git a/app/blockchains/page.tsx b/app/blockchains/page.tsx
index 914fbf8..afa0119 100644
--- a/app/blockchains/page.tsx
+++ b/app/blockchains/page.tsx
@@ -64,7 +64,6 @@ export default function BlockchainsPage() {
           {blockchains1.map((item, index) => (
             <Card
               key={index}
-              index={index}
               image={item.image}
               title={item.title}
               description={item.description}
@@ -76,7 +75,6 @@ export default function BlockchainsPage() {
           {blockchains2.map((item, index) => (
             <Card
               key={index}
-              index={index}
               image={item.image}
               title={item.title}
               description={item.description}
diff --git a/app/globals.css b/app/globals.css
index b5c61c9..5ea9b41 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -1,3 +1,9 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+@layer base {
+  body {
+    @apply bg-white text-black dark:bg-gray-900 dark:text-gray-50 transition-colors duration-300;
+  }
+}
diff --git a/app/layout.tsx b/app/layout.tsx
index 1cc1e17..e3bad39 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -36,7 +36,26 @@ export default function RootLayout({
   children: React.ReactNode
 }) {
   return (
-    <html lang="en">
+    <html lang="en" suppressHydrationWarning>
+      <head>
+        <script
+          dangerouslySetInnerHTML={{
+            __html: `
+              (function() {
+                try {
+                  var localValue = localStorage.getItem('theme');
+                  var supportDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches === true;
+                  if (localValue === 'dark' || (!localValue && supportDarkMode)) {
+                    document.documentElement.classList.add('dark');
+                  } else {
+                    document.documentElement.classList.remove('dark');
+                  }
+                } catch (e) {}
+              })();
+            `,
+          }}
+        />
+      </head>
       <body className={generalSans.className}>
         <Header />
         {children}
diff --git a/app/research/page.tsx b/app/research/page.tsx
index b688cc4..16dd9ba 100644
--- a/app/research/page.tsx
+++ b/app/research/page.tsx
@@ -149,7 +149,7 @@ export default function ResearchPage() {
           </p>
         </div>
         */}
-        <h2 className="mb-5 text-2xl font-bold text-black underline decoration-dashed underline-offset-4">
+        <h2 className="mb-5 text-2xl font-bold text-black underline decoration-dashed underline-offset-4 dark:text-white">
           Featured Papers
         </h2>
         <div className="mb-20 grid gap-8 md:grid-cols-2 lg:grid-cols-3">
@@ -157,7 +157,7 @@ export default function ResearchPage() {
             <Link
               href={paper.link}
               key={index}
-              className="group relative flex h-full flex-col justify-between rounded-lg border border-zinc-200 p-4 shadow-xl sm:p-6"
+              className="group relative flex h-full flex-col justify-between rounded-lg border border-zinc-200 p-4 shadow-xl dark:border-zinc-700 dark:bg-gray-800/50 dark:shadow-none sm:p-6"
             >
               <div
                 className="relative w-full overflow-hidden rounded-md"
@@ -172,7 +172,7 @@ export default function ResearchPage() {
                 />
               </div>
               <div className="relative mt-2 grow sm:mt-4">
-                <h3 className="text-2xl font-semibold leading-6 tracking-tight text-gray-800">
+                <h3 className="text-2xl font-semibold leading-6 tracking-tight text-gray-800 dark:text-gray-100">
                   {paper.title}
                 </h3>
                 {/* <div className="my-3 flex w-fit items-center gap-2 rounded-md bg-zinc-100 p-2">
@@ -224,7 +224,7 @@ export default function ResearchPage() {
                     {paper.date}
                   </span>
                 </div> */}
-                <p className="mt-2 text-black">
+                <p className="mt-2 text-black dark:text-gray-300">
                   {paper.description.split("\n").map((item, key) => {
                     return (
                       <span key={key}>
@@ -238,7 +238,7 @@ export default function ResearchPage() {
             </Link>
           ))}
         </div>
-        <h2 className="mb-5 mt-10 text-2xl font-bold text-black underline decoration-dashed underline-offset-4">
+        <h2 className="mb-5 mt-10 text-2xl font-bold text-black underline decoration-dashed underline-offset-4 dark:text-white">
           Featured Videos
         </h2>
         <div className="mb-20 grid gap-8 md:grid-cols-2 lg:grid-cols-3">
@@ -246,7 +246,7 @@ export default function ResearchPage() {
             <Link
               href={video.link}
               key={index}
-              className="group relative flex h-full flex-col justify-between rounded-lg border border-zinc-200 p-6 shadow-xl"
+              className="group relative flex h-full flex-col justify-between rounded-lg border border-zinc-200 p-6 shadow-xl dark:border-zinc-700 dark:bg-gray-800/50 dark:shadow-none"
             >
               <div className="relative aspect-video w-full overflow-hidden rounded-md">
                 <Image
@@ -258,7 +258,7 @@ export default function ResearchPage() {
                 />
               </div>
               <div className="relative mt-2 grow">
-                <h3 className="text-2xl  font-semibold leading-6 tracking-tight text-gray-800">
+                <h3 className="text-2xl  font-semibold leading-6 tracking-tight text-gray-800 dark:text-gray-100">
                   {video.title}
                 </h3>
                 {/* <div className="my-3 flex w-fit items-center gap-2 rounded-md bg-zinc-100 p-2">
@@ -312,7 +312,7 @@ export default function ResearchPage() {
                     {video.date}
                   </span>
                 </div> */}
-                <p className="mt-2 text-black">{video.description}</p>
+                <p className="mt-2 text-black dark:text-gray-300">{video.description}</p>
               </div>
             </Link>
           ))}
diff --git a/components/card.tsx b/components/card.tsx
index 0ddba39..9bf9923 100644
--- a/components/card.tsx
+++ b/components/card.tsx
@@ -12,7 +12,7 @@ const Card: React.FC<Props> = ({ image, title, description, link }) => {
 
   return (
     <Link href={link}>
-      <div className="group relative flex h-auto flex-col justify-evenly overflow-visible rounded-lg border border-zinc-200 p-6 shadow-xl">
+      <div className="group relative flex h-auto flex-col justify-evenly overflow-visible rounded-lg border border-zinc-200 p-6 shadow-xl dark:border-zinc-700 dark:bg-gray-800/50 dark:shadow-none">
         <div className="relative h-fit overflow-visible rounded-md">
           <Image
             src={image}
@@ -24,10 +24,10 @@ const Card: React.FC<Props> = ({ image, title, description, link }) => {
           />
         </div>
         <div className="relative mt-4 h-fit">
-          <h3 className="text-center  text-2xl font-semibold leading-6 tracking-tight text-gray-800">
+          <h3 className="text-center text-2xl font-semibold leading-6 tracking-tight text-gray-800 dark:text-gray-100">
             {title}
           </h3>
-          <p className="mb-6 mt-2 text-center text-black">
+          <p className="mb-6 mt-2 text-center text-black dark:text-gray-300">
             {description.split("\n").map((item, idx) => {
               return (
                 <span key={idx}>
diff --git a/components/footer.tsx b/components/footer.tsx
index b83fd3a..bdd7d31 100644
--- a/components/footer.tsx
+++ b/components/footer.tsx
@@ -14,7 +14,7 @@ const navigation = [
     name: "LinkedIn",
     href: "https://linkedin.com/company/stability-nexus",
     icon: (props: any) => (
-      <svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" fill="currentColor" {...props}>
         <g id="SVGRepo_iconCarrier">
           <g>
             <path d="M2.5 18h3V6.9h-3V18zM4 2c-1 0-1.8.8-1.8 1.8S3 5.6 4 5.6s1.8-.8 1.8-1.8S5 2 4 2zm6.6 6.6V6.9h-3V18h3v-5.7c0-3.2 4.1-3.4 4.1 0V18h3v-6.8c0-5.4-5.7-5.2-7.1-2.6z" />
@@ -58,7 +58,7 @@ const navigation = [
             fillRule="evenodd"
             clipRule="evenodd"
             d="M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12ZM12.3583 9.38244C11.3857 9.787 9.44177 10.6243 6.52657 11.8944C6.05318 12.0827 5.8052 12.2669 5.78263 12.4469C5.74448 12.7513 6.12559 12.8711 6.64455 13.0343C6.71515 13.0565 6.78829 13.0795 6.86327 13.1038C7.37385 13.2698 8.06068 13.464 8.41773 13.4717C8.74161 13.4787 9.1031 13.3452 9.50219 13.0711C12.226 11.2325 13.632 10.3032 13.7202 10.2831C13.7825 10.269 13.8688 10.2512 13.9273 10.3032C13.9858 10.3552 13.98 10.4536 13.9738 10.48C13.9361 10.641 12.4401 12.0318 11.6659 12.7515C11.4246 12.9759 11.2534 13.135 11.2184 13.1714C11.14 13.2528 11.0601 13.3298 10.9833 13.4038C10.509 13.8611 10.1532 14.204 11.003 14.764C11.4114 15.0331 11.7381 15.2556 12.0641 15.4776C12.4201 15.7201 12.7752 15.9619 13.2347 16.2631C13.3517 16.3398 13.4635 16.4195 13.5724 16.4971C13.9867 16.7925 14.3589 17.0579 14.8188 17.0155C15.086 16.991 15.362 16.7397 15.5022 15.9903C15.8335 14.2193 16.4847 10.382 16.6352 8.80081C16.6484 8.66228 16.6318 8.48498 16.6185 8.40715C16.6051 8.32932 16.5773 8.21842 16.4761 8.13633C16.3563 8.03911 16.1714 8.01861 16.0886 8.02C15.7125 8.0267 15.1354 8.22735 12.3583 9.38244Z"
-            fill="#000"
+            fill="currentColor"
           ></path>{" "}
         </g>
       </svg>
@@ -84,7 +84,7 @@ const navigation = [
           {" "}
           <path
             d="M18.59 5.88997C17.36 5.31997 16.05 4.89997 14.67 4.65997C14.5 4.95997 14.3 5.36997 14.17 5.69997C12.71 5.47997 11.26 5.47997 9.83001 5.69997C9.69001 5.36997 9.49001 4.95997 9.32001 4.65997C7.94001 4.89997 6.63001 5.31997 5.40001 5.88997C2.92001 9.62997 2.25001 13.28 2.58001 16.87C4.23001 18.1 5.82001 18.84 7.39001 19.33C7.78001 18.8 8.12001 18.23 8.42001 17.64C7.85001 17.43 7.31001 17.16 6.80001 16.85C6.94001 16.75 7.07001 16.64 7.20001 16.54C10.33 18 13.72 18 16.81 16.54C16.94 16.65 17.07 16.75 17.21 16.85C16.7 17.16 16.15 17.42 15.59 17.64C15.89 18.23 16.23 18.8 16.62 19.33C18.19 18.84 19.79 18.1 21.43 16.87C21.82 12.7 20.76 9.08997 18.61 5.88997H18.59ZM8.84001 14.67C7.90001 14.67 7.13001 13.8 7.13001 12.73C7.13001 11.66 7.88001 10.79 8.84001 10.79C9.80001 10.79 10.56 11.66 10.55 12.73C10.55 13.79 9.80001 14.67 8.84001 14.67ZM15.15 14.67C14.21 14.67 13.44 13.8 13.44 12.73C13.44 11.66 14.19 10.79 15.15 10.79C16.11 10.79 16.87 11.66 16.86 12.73C16.86 13.79 16.11 14.67 15.15 14.67Z"
-            fill="#000"
+            fill="currentColor"
           ></path>{" "}
         </g>
       </svg>
@@ -96,7 +96,7 @@ const navigation = [
     icon: (props: any) => (
       <svg viewBox="0 0 256 180" {...props}>
         <path
-          fill="#000"
+          fill="currentColor"
           d="M250.346 28.075A32.18 32.18 0 0 0 227.69 5.418C207.824 0 127.87 0 127.87 0S47.912.164 28.046 5.582A32.18 32.18 0 0 0 5.39 28.24c-6.009 35.298-8.34 89.084.165 122.97a32.18 32.18 0 0 0 22.656 22.657c19.866 5.418 99.822 5.418 99.822 5.418s79.955 0 99.82-5.418a32.18 32.18 0 0 0 22.657-22.657c6.338-35.348 8.291-89.1-.164-123.134"
         />
         <path fill="#fff" d="m102.421 128.06l66.328-38.418l-66.328-38.418z" />
diff --git a/components/header.tsx b/components/header.tsx
index e9152ef..788a9fd 100644
--- a/components/header.tsx
+++ b/components/header.tsx
@@ -5,6 +5,7 @@ import Link from "next/link"
 import { usePathname } from "next/navigation"
 import { useEffect, useState } from "react"
 import Container from "./container"
+import { ModeToggle } from "./mode-toggle"
 
 const links = [
   {
@@ -86,11 +87,12 @@ export default function Header() {
             </Link>
 
             {/* Small Screen Menu Button */}
-            <div className="relative flex max-h-10 items-center lg:hidden">
+            <div className="relative flex max-h-10 items-center lg:hidden ">
+              <ModeToggle />
               <button
                 aria-label="menu"
                 id="menu"
-                className="relative -mr-6 p-6"
+                className="relative -mr-6 p-6 text-gray-700 dark:text-gray-200"
                 onClick={toggleMenu}
               >
                 {isOpen ? (
@@ -105,22 +107,23 @@ export default function Header() {
           {/* Large Screen Menu */}
           <div
             id="navlinks"
-            className="invisible absolute left-0 top-full z-20 w-full origin-top-right translate-y-1 scale-90 flex-col flex-wrap justify-end gap-6 rounded-3xl border border-gray-100 bg-white p-8 opacity-0 shadow-2xl shadow-gray-600/10 transition-all duration-300 dark:border-gray-700 dark:bg-gray-800 dark:shadow-none lg:visible lg:relative lg:flex lg:w-7/12 lg:translate-y-0 lg:scale-100 lg:flex-row lg:items-center lg:gap-0 lg:border-none lg:bg-transparent lg:p-0 lg:opacity-100 lg:shadow-none"
+            className="invisible absolute left-0 top-full z-20 w-full origin-top-right translate-y-1 scale-90 flex-col justify-end gap-6 rounded-3xl border border-gray-100 bg-white p-8 opacity-0 shadow-2xl shadow-gray-600/10 transition-all duration-300 dark:border-gray-700 dark:shadow-none lg:visible lg:relative lg:flex lg:w-auto lg:translate-y-0 lg:scale-100 lg:flex-row lg:items-center lg:gap-0 lg:border-none lg:bg-transparent lg:p-0 lg:opacity-100 lg:shadow-none"
           >
-            <div className="w-full text-black dark:text-gray-200 lg:w-auto lg:pr-4 lg:pt-0">
-              <ul className="flex flex-col gap-6 tracking-wide lg:flex-row lg:gap-0 ">
-                {links.map((link, index) => (
-                  <li key={index}>
-                    <Link
-                      href={link.to}
-                      className={`block font-medium transition hover:text-primary dark:hover:text-white md:px-4 ${path === link.to && "font-semibold underline underline-offset-4"}`}
-                    >
-                      <span>{link.label}</span>
-                    </Link>
-                  </li>
-                ))}
-              </ul>
-            </div>
+            <ul className="flex flex-col gap-6 tracking-wide text-black dark:text-gray-200 lg:flex-row lg:items-center lg:gap-0">
+              {links.map((link, index) => (
+                <li key={index}>
+                  <Link
+                    href={link.to}
+                    className={`block font-medium transition hover:text-primary dark:hover:text-white md:px-4 ${path === link.to && "font-semibold underline underline-offset-4"}`}
+                  >
+                    <span>{link.label}</span>
+                  </Link>
+                </li>
+              ))}
+              <li className="hidden lg:block">
+                <ModeToggle />
+              </li>
+            </ul>
           </div>
         </div>
       </Container>
diff --git a/components/mode-toggle.tsx b/components/mode-toggle.tsx
new file mode 100644
index 0000000..882a09b
--- /dev/null
+++ b/components/mode-toggle.tsx
@@ -0,0 +1,47 @@
+"use client"
+
+import { Moon, Sun } from "lucide-react"
+import { useEffect, useState } from "react"
+
+export function ModeToggle() {
+  const [mounted, setMounted] = useState(false)
+  const [theme, setTheme] = useState<"light" | "dark">("light")
+
+  useEffect(() => {
+    setMounted(true)
+    const isDark = document.documentElement.classList.contains("dark")
+    setTheme(isDark ? "dark" : "light")
+  }, [])
+
+  const toggleTheme = () => {
+    const root = document.documentElement
+    const newTheme = theme === "light" ? "dark" : "light"
+    setTheme(newTheme)
+    
+    if (newTheme === "dark") {
+      root.classList.add("dark")
+      localStorage.setItem("theme", "dark")
+    } else {
+      root.classList.remove("dark")
+      localStorage.setItem("theme", "light")
+    }
+  }
+
+  if (!mounted) {
+    return <div className="size-9" /> // Placeholder
+  }
+
+  return (
+    <button
+      onClick={toggleTheme}
+      className="ml-4 flex items-center justify-center rounded-full p-2 text-gray-700 transition-colors hover:bg-gray-200 dark:text-gray-200 dark:hover:bg-gray-700"
+      aria-label="Toggle theme"
+    >
+      {theme === "dark" ? (
+        <Sun className="size-5" />
+      ) : (
+        <Moon className="size-5" />
+      )}
+    </button>
+  )
+}
