diff --git a/src/app/globals.css b/src/app/globals.css
index fb4bd21..9bcedc3 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -7,11 +7,9 @@
   --background: #ffffff;
 }
 
-@media (prefers-color-scheme: dark) {
-  :root {
-    --foreground: #ededed;
-    --background: #0a0a0a;
-  }
+.dark {
+  --foreground: #ededed;
+  --background: #0a0a0a;
 }
 
 body {
diff --git a/src/app/groups/[id]/page.tsx b/src/app/groups/[id]/page.tsx
index 02ab880..e583af0 100644
--- a/src/app/groups/[id]/page.tsx
+++ b/src/app/groups/[id]/page.tsx
@@ -41,8 +41,8 @@ export default function GroupDetailPage() {
       <Navbar />
       <main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
         <div className="mb-8">
-          <h1 className="text-2xl font-bold text-gray-900">{group.name}</h1>
-          <p className="text-gray-600 mt-1">
+          <h1 className="text-2xl font-bold text-gray-900 dark:text-gray-100">{group.name}</h1>
+          <p className="mt-1 text-gray-600 dark:text-gray-300">
             {formatAmount(group.contributionAmount)} tokens per cycle
           </p>
         </div>
@@ -65,8 +65,8 @@ export default function GroupDetailPage() {
           </div>
 
           <div className="space-y-4">
-            <div className="bg-white rounded-xl shadow-sm border p-6">
-              <h3 className="text-lg font-semibold text-gray-900 mb-4">
+            <div className="rounded-xl border bg-white p-6 shadow-sm dark:border-gray-800 dark:bg-gray-900">
+              <h3 className="mb-4 text-lg font-semibold text-gray-900 dark:text-gray-100">
                 Actions
               </h3>
               <div className="space-y-3">
@@ -86,30 +86,30 @@ export default function GroupDetailPage() {
               </div>
             </div>
 
-            <div className="bg-white rounded-xl shadow-sm border p-6">
-              <h3 className="text-sm font-semibold text-gray-900 mb-3">
+            <div className="rounded-xl border bg-white p-6 shadow-sm dark:border-gray-800 dark:bg-gray-900">
+              <h3 className="mb-3 text-sm font-semibold text-gray-900 dark:text-gray-100">
                 Group Info
               </h3>
               <dl className="space-y-2 text-sm">
                 <div className="flex justify-between">
-                  <dt className="text-gray-500">Status</dt>
-                  <dd className="font-medium text-gray-900">{group.status}</dd>
+                  <dt className="text-gray-500 dark:text-gray-400">Status</dt>
+                  <dd className="font-medium text-gray-900 dark:text-gray-100">{group.status}</dd>
                 </div>
                 <div className="flex justify-between">
-                  <dt className="text-gray-500">Members</dt>
-                  <dd className="font-medium text-gray-900">
+                  <dt className="text-gray-500 dark:text-gray-400">Members</dt>
+                  <dd className="font-medium text-gray-900 dark:text-gray-100">
                     {group.members.length}/{group.maxMembers}
                   </dd>
                 </div>
                 <div className="flex justify-between">
-                  <dt className="text-gray-500">Cycle</dt>
-                  <dd className="font-medium text-gray-900">
+                  <dt className="text-gray-500 dark:text-gray-400">Cycle</dt>
+                  <dd className="font-medium text-gray-900 dark:text-gray-100">
                     {group.cycleLength / 86400} days
                   </dd>
                 </div>
                 <div className="flex justify-between">
-                  <dt className="text-gray-500">Pot Size</dt>
-                  <dd className="font-medium text-gray-900">
+                  <dt className="text-gray-500 dark:text-gray-400">Pot Size</dt>
+                  <dd className="font-medium text-gray-900 dark:text-gray-100">
                     {formatAmount(
                       group.contributionAmount * BigInt(group.members.length)
                     )}{" "}
diff --git a/src/app/groups/new/page.tsx b/src/app/groups/new/page.tsx
index afe0804..05fe426 100644
--- a/src/app/groups/new/page.tsx
+++ b/src/app/groups/new/page.tsx
@@ -6,7 +6,7 @@ export default function NewGroupPage() {
     <>
       <Navbar />
       <main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
-        <h1 className="text-2xl font-bold text-gray-900 mb-8">
+        <h1 className="mb-8 text-2xl font-bold text-gray-900 dark:text-gray-100">
           Create a Savings Group
         </h1>
         <CreateGroupForm />
diff --git a/src/app/groups/page.tsx b/src/app/groups/page.tsx
index 7592365..22b431d 100644
--- a/src/app/groups/page.tsx
+++ b/src/app/groups/page.tsx
@@ -47,11 +47,11 @@ export default function GroupsPage() {
       <Navbar />
       <main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
         <div className="flex justify-between items-center mb-8">
-          <h1 className="text-2xl font-bold text-gray-900">Savings Groups</h1>
+          <h1 className="text-2xl font-bold text-gray-900 dark:text-gray-100">Savings Groups</h1>
         </div>
 
         {groups.length === 0 ? (
-          <div className="text-center py-12 text-gray-500">
+          <div className="py-12 text-center text-gray-500 dark:text-gray-400">
             No groups found. Create the first one!
           </div>
         ) : (
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 17200f3..2766af7 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -14,8 +14,8 @@ export default function RootLayout({
   children: React.ReactNode;
 }) {
   return (
-    <html lang="en">
-      <body className="min-h-screen bg-gray-50">
+    <html lang="en" suppressHydrationWarning>
+      <body className="min-h-screen bg-gray-50 text-gray-900 transition-colors dark:bg-gray-950 dark:text-gray-100">
         <Providers>{children}</Providers>
       </body>
     </html>
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 670d0c6..2d5322e 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -39,7 +39,7 @@ export default function Home() {
         {/* How it works */}
         <section className="py-20">
           <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-            <h2 className="text-3xl font-bold text-gray-900 text-center mb-12">
+            <h2 className="mb-12 text-center text-3xl font-bold text-gray-900 dark:text-gray-100">
               How It Works
             </h2>
             <div className="grid md:grid-cols-4 gap-8">
@@ -73,10 +73,10 @@ export default function Home() {
                   <div className="w-12 h-12 bg-primary-100 text-primary-700 rounded-full flex items-center justify-center text-xl font-bold mx-auto mb-4">
                     {item.step}
                   </div>
-                  <h3 className="text-lg font-semibold text-gray-900 mb-2">
+                  <h3 className="mb-2 text-lg font-semibold text-gray-900 dark:text-gray-100">
                     {item.title}
                   </h3>
-                  <p className="text-gray-600 text-sm">{item.description}</p>
+                  <p className="text-sm text-gray-600 dark:text-gray-300">{item.description}</p>
                 </div>
               ))}
             </div>
@@ -84,9 +84,9 @@ export default function Home() {
         </section>
 
         {/* Features */}
-        <section className="bg-gray-100 py-20">
+        <section className="bg-gray-100 py-20 dark:bg-gray-900/40">
           <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-            <h2 className="text-3xl font-bold text-gray-900 text-center mb-12">
+            <h2 className="mb-12 text-center text-3xl font-bold text-gray-900 dark:text-gray-100">
               Why SoroSave?
             </h2>
             <div className="grid md:grid-cols-3 gap-8">
@@ -109,12 +109,12 @@ export default function Home() {
               ].map((feature) => (
                 <div
                   key={feature.title}
-                  className="bg-white p-6 rounded-xl shadow-sm"
+                  className="rounded-xl bg-white p-6 shadow-sm dark:bg-gray-900 dark:ring-1 dark:ring-gray-800"
                 >
-                  <h3 className="text-lg font-semibold text-gray-900 mb-2">
+                  <h3 className="mb-2 text-lg font-semibold text-gray-900 dark:text-gray-100">
                     {feature.title}
                   </h3>
-                  <p className="text-gray-600">{feature.description}</p>
+                  <p className="text-gray-600 dark:text-gray-300">{feature.description}</p>
                 </div>
               ))}
             </div>
diff --git a/src/app/providers.tsx b/src/app/providers.tsx
index 98f8bf5..c66664f 100644
--- a/src/app/providers.tsx
+++ b/src/app/providers.tsx
@@ -1,6 +1,12 @@
 "use client";
 
-import React, { createContext, useContext, useState, useCallback, useEffect } from "react";
+import React, {
+  createContext,
+  useContext,
+  useState,
+  useCallback,
+  useEffect,
+} from "react";
 import { connectWallet, getPublicKey, isFreighterInstalled } from "@/lib/wallet";
 
 interface WalletContextType {
@@ -11,6 +17,14 @@ interface WalletContextType {
   disconnect: () => void;
 }
 
+type Theme = "light" | "dark";
+
+interface ThemeContextType {
+  theme: Theme;
+  setTheme: (theme: Theme) => void;
+  toggleTheme: () => void;
+}
+
 const WalletContext = createContext<WalletContextType>({
   address: null,
   isConnected: false,
@@ -19,13 +33,43 @@ const WalletContext = createContext<WalletContextType>({
   disconnect: () => {},
 });
 
+const ThemeContext = createContext<ThemeContextType>({
+  theme: "light",
+  setTheme: () => {},
+  toggleTheme: () => {},
+});
+
 export function useWallet() {
   return useContext(WalletContext);
 }
 
+export function useTheme() {
+  return useContext(ThemeContext);
+}
+
 export function Providers({ children }: { children: React.ReactNode }) {
   const [address, setAddress] = useState<string | null>(null);
   const [isFreighterAvailable, setIsFreighterAvailable] = useState(false);
+  const [theme, setTheme] = useState<Theme>("light");
+
+  useEffect(() => {
+    const storedTheme = window.localStorage.getItem("sorosave-theme");
+    if (storedTheme === "light" || storedTheme === "dark") {
+      setTheme(storedTheme);
+      return;
+    }
+
+    const prefersDark = window.matchMedia(
+      "(prefers-color-scheme: dark)"
+    ).matches;
+    setTheme(prefersDark ? "dark" : "light");
+  }, []);
+
+  useEffect(() => {
+    document.documentElement.classList.toggle("dark", theme === "dark");
+    document.documentElement.style.colorScheme = theme;
+    window.localStorage.setItem("sorosave-theme", theme);
+  }, [theme]);
 
   useEffect(() => {
     isFreighterInstalled().then(setIsFreighterAvailable);
@@ -44,17 +88,23 @@ export function Providers({ children }: { children: React.ReactNode }) {
     setAddress(null);
   }, []);
 
+  const toggleTheme = useCallback(() => {
+    setTheme((prev) => (prev === "dark" ? "light" : "dark"));
+  }, []);
+
   return (
-    <WalletContext.Provider
-      value={{
-        address,
-        isConnected: !!address,
-        isFreighterAvailable,
-        connect,
-        disconnect,
-      }}
-    >
-      {children}
-    </WalletContext.Provider>
+    <ThemeContext.Provider value={{ theme, setTheme, toggleTheme }}>
+      <WalletContext.Provider
+        value={{
+          address,
+          isConnected: !!address,
+          isFreighterAvailable,
+          connect,
+          disconnect,
+        }}
+      >
+        {children}
+      </WalletContext.Provider>
+    </ThemeContext.Provider>
   );
 }
diff --git a/src/components/ConnectWallet.tsx b/src/components/ConnectWallet.tsx
index f039a0e..0e2a7ce 100644
--- a/src/components/ConnectWallet.tsx
+++ b/src/components/ConnectWallet.tsx
@@ -13,7 +13,7 @@ export function ConnectWallet() {
         href="https://www.freighter.app/"
         target="_blank"
         rel="noopener noreferrer"
-        className="bg-gray-200 text-gray-700 px-4 py-2 rounded-lg text-sm font-medium hover:bg-gray-300"
+        className="rounded-lg bg-gray-200 px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-300 dark:bg-gray-800 dark:text-gray-200 dark:hover:bg-gray-700"
       >
         Install Freighter
       </a>
@@ -23,12 +23,12 @@ export function ConnectWallet() {
   if (isConnected && address) {
     return (
       <div className="flex items-center space-x-3">
-        <span className="text-sm text-gray-600 bg-gray-100 px-3 py-1 rounded-full">
+        <span className="rounded-full bg-gray-100 px-3 py-1 text-sm text-gray-600 dark:bg-gray-800 dark:text-gray-200">
           {shortenAddress(address)}
         </span>
         <button
           onClick={disconnect}
-          className="text-sm text-red-600 hover:text-red-800"
+          className="text-sm text-red-600 hover:text-red-800 dark:text-red-400 dark:hover:text-red-300"
         >
           Disconnect
         </button>
diff --git a/src/components/ContributeModal.tsx b/src/components/ContributeModal.tsx
index 0d9d539..9629edf 100644
--- a/src/components/ContributeModal.tsx
+++ b/src/components/ContributeModal.tsx
@@ -50,15 +50,17 @@ export function ContributeModal({
 
   return (
     <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
-      <div className="bg-white rounded-xl p-6 max-w-md w-full mx-4">
-        <h3 className="text-lg font-semibold text-gray-900 mb-4">
+      <div className="mx-4 w-full max-w-md rounded-xl bg-white p-6 dark:bg-gray-900">
+        <h3 className="mb-4 text-lg font-semibold text-gray-900 dark:text-gray-100">
           Confirm Contribution
         </h3>
 
-        <div className="bg-gray-50 rounded-lg p-4 mb-6">
+        <div className="mb-6 rounded-lg bg-gray-50 p-4 dark:bg-gray-800">
           <div className="text-center">
-            <p className="text-sm text-gray-600 mb-1">Amount to contribute</p>
-            <p className="text-2xl font-bold text-gray-900">
+            <p className="mb-1 text-sm text-gray-600 dark:text-gray-300">
+              Amount to contribute
+            </p>
+            <p className="text-2xl font-bold text-gray-900 dark:text-gray-100">
               {formatAmount(contributionAmount)} tokens
             </p>
           </div>
@@ -73,7 +75,7 @@ export function ContributeModal({
         <div className="flex space-x-3">
           <button
             onClick={onClose}
-            className="flex-1 px-4 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50"
+            className="flex-1 rounded-lg border border-gray-300 px-4 py-2 text-gray-700 hover:bg-gray-50 dark:border-gray-700 dark:text-gray-200 dark:hover:bg-gray-800"
           >
             Cancel
           </button>
diff --git a/src/components/CreateGroupForm.tsx b/src/components/CreateGroupForm.tsx
index 0a1a767..41fc3ce 100644
--- a/src/components/CreateGroupForm.tsx
+++ b/src/components/CreateGroupForm.tsx
@@ -53,7 +53,7 @@ export function CreateGroupForm() {
 
   if (!isConnected) {
     return (
-      <div className="text-center py-12 text-gray-500">
+      <div className="py-12 text-center text-gray-500 dark:text-gray-400">
         Please connect your wallet to create a group.
       </div>
     );
@@ -62,7 +62,7 @@ export function CreateGroupForm() {
   return (
     <form onSubmit={handleSubmit} className="space-y-6 max-w-lg">
       <div>
-        <label className="block text-sm font-medium text-gray-700 mb-1">
+        <label className="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300">
           Group Name
         </label>
         <input
@@ -70,13 +70,13 @@ export function CreateGroupForm() {
           value={name}
           onChange={(e) => setName(e.target.value)}
           required
-          className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent"
+          className="w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-gray-900 focus:border-transparent focus:ring-2 focus:ring-primary-500 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100"
           placeholder="My Savings Circle"
         />
       </div>
 
       <div>
-        <label className="block text-sm font-medium text-gray-700 mb-1">
+        <label className="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300">
           Token Contract Address
         </label>
         <input
@@ -84,13 +84,13 @@ export function CreateGroupForm() {
           value={tokenAddress}
           onChange={(e) => setTokenAddress(e.target.value)}
           required
-          className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent"
+          className="w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-gray-900 focus:border-transparent focus:ring-2 focus:ring-primary-500 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100"
           placeholder="CDLZ..."
         />
       </div>
 
       <div>
-        <label className="block text-sm font-medium text-gray-700 mb-1">
+        <label className="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300">
           Contribution Amount (per cycle)
         </label>
         <input
@@ -98,20 +98,20 @@ export function CreateGroupForm() {
           value={contributionAmount}
           onChange={(e) => setContributionAmount(e.target.value)}
           required
-          className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent"
+          className="w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-gray-900 focus:border-transparent focus:ring-2 focus:ring-primary-500 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100"
           placeholder="100"
         />
       </div>
 
       <div className="grid grid-cols-2 gap-4">
         <div>
-          <label className="block text-sm font-medium text-gray-700 mb-1">
+          <label className="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300">
             Cycle Length (seconds)
           </label>
           <select
             value={cycleLength}
             onChange={(e) => setCycleLength(e.target.value)}
-            className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent"
+            className="w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-gray-900 focus:border-transparent focus:ring-2 focus:ring-primary-500 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100"
           >
             <option value="3600">1 Hour</option>
             <option value="86400">1 Day</option>
@@ -120,7 +120,7 @@ export function CreateGroupForm() {
           </select>
         </div>
         <div>
-          <label className="block text-sm font-medium text-gray-700 mb-1">
+          <label className="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300">
             Max Members
           </label>
           <input
@@ -129,13 +129,13 @@ export function CreateGroupForm() {
             max="20"
             value={maxMembers}
             onChange={(e) => setMaxMembers(e.target.value)}
-            className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent"
+            className="w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-gray-900 focus:border-transparent focus:ring-2 focus:ring-primary-500 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100"
           />
         </div>
       </div>
 
       {error && (
-        <div className="bg-red-50 text-red-700 p-3 rounded-lg text-sm">
+        <div className="rounded-lg bg-red-50 p-3 text-sm text-red-700 dark:bg-red-950/40 dark:text-red-300">
           {error}
         </div>
       )}
diff --git a/src/components/GroupCard.tsx b/src/components/GroupCard.tsx
index 34e0616..5b08e1f 100644
--- a/src/components/GroupCard.tsx
+++ b/src/components/GroupCard.tsx
@@ -8,44 +8,44 @@ interface GroupCardProps {
 }
 
 const statusColors: Record<string, string> = {
-  Forming: "bg-blue-100 text-blue-800",
-  Active: "bg-green-100 text-green-800",
-  Completed: "bg-gray-100 text-gray-800",
-  Disputed: "bg-red-100 text-red-800",
-  Paused: "bg-yellow-100 text-yellow-800",
+  Forming: "bg-blue-100 text-blue-800 dark:bg-blue-950/40 dark:text-blue-300",
+  Active: "bg-green-100 text-green-800 dark:bg-green-950/40 dark:text-green-300",
+  Completed: "bg-gray-100 text-gray-800 dark:bg-gray-800 dark:text-gray-200",
+  Disputed: "bg-red-100 text-red-800 dark:bg-red-950/40 dark:text-red-300",
+  Paused: "bg-yellow-100 text-yellow-800 dark:bg-yellow-950/40 dark:text-yellow-300",
 };
 
 export function GroupCard({ group }: GroupCardProps) {
   return (
     <Link href={`/groups/${group.id}`}>
-      <div className="bg-white rounded-xl shadow-sm border p-6 hover:shadow-md transition-shadow cursor-pointer">
+      <div className="cursor-pointer rounded-xl border bg-white p-6 shadow-sm transition-shadow hover:shadow-md dark:border-gray-800 dark:bg-gray-900">
         <div className="flex justify-between items-start mb-4">
-          <h3 className="text-lg font-semibold text-gray-900">{group.name}</h3>
+          <h3 className="text-lg font-semibold text-gray-900 dark:text-gray-100">{group.name}</h3>
           <span
             className={`px-2 py-1 rounded-full text-xs font-medium ${
-              statusColors[group.status] || "bg-gray-100 text-gray-800"
+              statusColors[group.status] || "bg-gray-100 text-gray-800 dark:bg-gray-800 dark:text-gray-200"
             }`}
           >
             {getStatusLabel(group.status)}
           </span>
         </div>
 
-        <div className="space-y-2 text-sm text-gray-600">
+        <div className="space-y-2 text-sm text-gray-600 dark:text-gray-300">
           <div className="flex justify-between">
             <span>Contribution</span>
-            <span className="font-medium text-gray-900">
+            <span className="font-medium text-gray-900 dark:text-gray-100">
               {formatAmount(group.contributionAmount)} tokens
             </span>
           </div>
           <div className="flex justify-between">
             <span>Members</span>
-            <span className="font-medium text-gray-900">
+            <span className="font-medium text-gray-900 dark:text-gray-100">
               {group.members.length} / {group.maxMembers}
             </span>
           </div>
           <div className="flex justify-between">
             <span>Round</span>
-            <span className="font-medium text-gray-900">
+            <span className="font-medium text-gray-900 dark:text-gray-100">
               {group.currentRound} / {group.totalRounds || group.maxMembers}
             </span>
           </div>
diff --git a/src/components/MemberList.tsx b/src/components/MemberList.tsx
index bd469e1..8e53fe8 100644
--- a/src/components/MemberList.tsx
+++ b/src/components/MemberList.tsx
@@ -16,8 +16,8 @@ export function MemberList({
   currentRound,
 }: MemberListProps) {
   return (
-    <div className="bg-white rounded-xl shadow-sm border p-6">
-      <h3 className="text-lg font-semibold text-gray-900 mb-4">Members</h3>
+    <div className="rounded-xl border bg-white p-6 shadow-sm dark:border-gray-800 dark:bg-gray-900">
+      <h3 className="mb-4 text-lg font-semibold text-gray-900 dark:text-gray-100">Members</h3>
       <div className="space-y-3">
         {members.map((member, index) => {
           const payoutRound =
@@ -30,14 +30,14 @@ export function MemberList({
           return (
             <div
               key={member}
-              className="flex items-center justify-between py-2 border-b last:border-0"
+              className="flex items-center justify-between border-b border-gray-200 py-2 last:border-0 dark:border-gray-800"
             >
               <div className="flex items-center space-x-3">
                 <div className="w-8 h-8 bg-primary-100 rounded-full flex items-center justify-center text-primary-700 text-sm font-medium">
                   {index + 1}
                 </div>
                 <div>
-                  <span className="text-sm font-medium text-gray-900">
+                  <span className="text-sm font-medium text-gray-900 dark:text-gray-100">
                     {shortenAddress(member, 6)}
                   </span>
                   {member === admin && (
@@ -54,12 +54,12 @@ export function MemberList({
                   </span>
                 )}
                 {hasReceived && (
-                  <span className="text-xs bg-gray-100 text-gray-600 px-2 py-1 rounded-full">
+                  <span className="text-xs bg-gray-100 text-gray-600 px-2 py-1 rounded-full dark:bg-gray-800 dark:text-gray-300">
                     Received
                   </span>
                 )}
                 {payoutRound && !hasReceived && !isCurrentRecipient && (
-                  <span className="text-xs text-gray-500">
+                  <span className="text-xs text-gray-500 dark:text-gray-400">
                     Round {payoutRound}
                   </span>
                 )}
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
index 2d673aa..22990f4 100644
--- a/src/components/Navbar.tsx
+++ b/src/components/Navbar.tsx
@@ -2,32 +2,36 @@
 
 import Link from "next/link";
 import { ConnectWallet } from "./ConnectWallet";
+import { ThemeToggle } from "./ThemeToggle";
 
 export function Navbar() {
   return (
-    <nav className="bg-white shadow-sm border-b">
+    <nav className="border-b bg-white shadow-sm dark:border-gray-800 dark:bg-gray-950">
       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
         <div className="flex justify-between h-16 items-center">
           <div className="flex items-center space-x-8">
-            <Link href="/" className="text-xl font-bold text-primary-700">
+            <Link href="/" className="text-xl font-bold text-primary-700 dark:text-primary-400">
               SoroSave
             </Link>
             <div className="hidden sm:flex space-x-4">
               <Link
                 href="/groups"
-                className="text-gray-600 hover:text-gray-900 px-3 py-2 text-sm font-medium"
+                className="px-3 py-2 text-sm font-medium text-gray-600 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white"
               >
                 Groups
               </Link>
               <Link
                 href="/groups/new"
-                className="text-gray-600 hover:text-gray-900 px-3 py-2 text-sm font-medium"
+                className="px-3 py-2 text-sm font-medium text-gray-600 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white"
               >
                 Create Group
               </Link>
             </div>
           </div>
-          <ConnectWallet />
+          <div className="flex items-center gap-3">
+            <ThemeToggle />
+            <ConnectWallet />
+          </div>
         </div>
       </div>
     </nav>
diff --git a/src/components/RoundProgress.tsx b/src/components/RoundProgress.tsx
index 8105152..9dd9701 100644
--- a/src/components/RoundProgress.tsx
+++ b/src/components/RoundProgress.tsx
@@ -18,18 +18,18 @@ export function RoundProgress({
     totalMembers > 0 ? (contributionsReceived / totalMembers) * 100 : 0;
 
   return (
-    <div className="bg-white rounded-xl shadow-sm border p-6">
-      <h3 className="text-lg font-semibold text-gray-900 mb-4">Progress</h3>
+    <div className="rounded-xl border bg-white p-6 shadow-sm dark:border-gray-800 dark:bg-gray-900">
+      <h3 className="mb-4 text-lg font-semibold text-gray-900 dark:text-gray-100">Progress</h3>
 
       <div className="space-y-4">
         <div>
           <div className="flex justify-between text-sm mb-1">
-            <span className="text-gray-600">Overall Progress</span>
-            <span className="font-medium text-gray-900">
+            <span className="text-gray-600 dark:text-gray-300">Overall Progress</span>
+            <span className="font-medium text-gray-900 dark:text-gray-100">
               Round {currentRound} of {totalRounds}
             </span>
           </div>
-          <div className="w-full bg-gray-200 rounded-full h-2">
+          <div className="h-2 w-full rounded-full bg-gray-200 dark:bg-gray-800">
             <div
               className="bg-primary-500 h-2 rounded-full transition-all"
               style={{ width: `${roundProgress}%` }}
@@ -39,12 +39,12 @@ export function RoundProgress({
 
         <div>
           <div className="flex justify-between text-sm mb-1">
-            <span className="text-gray-600">Current Round Contributions</span>
-            <span className="font-medium text-gray-900">
+            <span className="text-gray-600 dark:text-gray-300">Current Round Contributions</span>
+            <span className="font-medium text-gray-900 dark:text-gray-100">
               {contributionsReceived} / {totalMembers}
             </span>
           </div>
-          <div className="w-full bg-gray-200 rounded-full h-2">
+          <div className="h-2 w-full rounded-full bg-gray-200 dark:bg-gray-800">
             <div
               className="bg-blue-500 h-2 rounded-full transition-all"
               style={{ width: `${contributionProgress}%` }}
diff --git a/src/components/ThemeToggle.tsx b/src/components/ThemeToggle.tsx
new file mode 100644
index 0000000..0ef7871
--- /dev/null
+++ b/src/components/ThemeToggle.tsx
@@ -0,0 +1,18 @@
+"use client";
+
+import { useTheme } from "@/app/providers";
+
+export function ThemeToggle() {
+  const { theme, toggleTheme } = useTheme();
+  const isDark = theme === "dark";
+
+  return (
+    <button
+      onClick={toggleTheme}
+      aria-label={isDark ? "Switch to light mode" : "Switch to dark mode"}
+      className="inline-flex h-9 w-9 items-center justify-center rounded-lg border border-gray-300 bg-white text-gray-700 transition-colors hover:bg-gray-100 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-200 dark:hover:bg-gray-800"
+    >
+      <span className="text-sm">{isDark ? "☀" : "☾"}</span>
+    </button>
+  );
+}
diff --git a/tailwind.config.js b/tailwind.config.js
index b46ff84..0c70d78 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,5 +1,6 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
+  darkMode: "class",
   content: ["./src/**/*.{js,ts,jsx,tsx,mdx}"],
   theme: {
     extend: {