diff --git a/app/admin/dashboard/page.tsx b/app/admin/dashboard/page.tsx
index 6153943..4f1d26e 100644
--- a/app/admin/dashboard/page.tsx
+++ b/app/admin/dashboard/page.tsx
@@ -2,94 +2,102 @@
 
 import { useAuth } from '@/contexts/AuthContext';
 import Link from 'next/link';
-import { UsersIcon, CubeIcon, TagIcon , BellIcon, GiftIcon } from '@heroicons/react/24/outline';
+import { UsersIcon, CubeIcon, TagIcon , BellIcon, GiftIcon, PowerIcon } from '@heroicons/react/24/outline';
 import { MegaphoneIcon } from 'lucide-react';
+import ThemeToggle from '@/components/ThemeToggle';
 // import { BellIcon } from 'lucide-react';
 
 export default function Dashboard() {
     const { user, logout } = useAuth();
 
+    const cards = [
+        {
+            href: '/admin/users',
+            title: 'مدیریت کاربران',
+            desc: 'مشاهده و مدیریت کاربران، اشتراک‌ها و تراکنش‌ها',
+            Icon: UsersIcon,
+            iconWrap: 'bg-indigo-100 text-indigo-600 dark:bg-indigo-500/15 dark:text-indigo-400',
+        },
+        {
+            href: '/admin/packages',
+            title: 'مدیریت پکیج‌ها',
+            desc: 'ایجاد و مدیریت پکیج‌های نرم‌افزار',
+            Icon: CubeIcon,
+            iconWrap: 'bg-green-100 text-green-600 dark:bg-green-500/15 dark:text-green-400',
+        },
+        {
+            href: '/admin/products',
+            title: 'مدیریت محصولات',
+            desc: 'ایجاد و مدیریت محصولات و اشتراک‌ها',
+            Icon: TagIcon,
+            iconWrap: 'bg-purple-100 text-purple-600 dark:bg-purple-500/15 dark:text-purple-400',
+        },
+        {
+            href: '/admin/reminders',
+            title: 'مدیریت یادآوری‌ها',
+            desc: 'ایجاد و مدیریت یادآوری‌ها و پیام‌های انگیزشی',
+            Icon: BellIcon,
+            iconWrap: 'bg-yellow-100 text-yellow-600 dark:bg-yellow-500/15 dark:text-yellow-400',
+        },
+        {
+            href: '/admin/promotions',
+            title: 'مدیریت تبلیغات',
+            desc: 'ایجاد و مدیریت تبلیغات، بنرها و اسلایدرها',
+            Icon: MegaphoneIcon,
+            iconWrap: 'bg-pink-100 text-pink-600 dark:bg-pink-500/15 dark:text-pink-400',
+        },
+        {
+            href: '/admin/referral-rewards',
+            title: 'پاداش‌های معرفی',
+            desc: 'اعطای اشتراک رایگان به کاربران واجد شرایط دعوت',
+            Icon: GiftIcon,
+            iconWrap: 'bg-emerald-100 text-emerald-600 dark:bg-emerald-500/15 dark:text-emerald-400',
+        },
+    ];
+
     return (
-        <div className="p-8">
+        <div className="p-4 sm:p-8">
             <div className="max-w-7xl mx-auto">
-                <div className="bg-white rounded-lg shadow-lg p-6">
+                <div className="bg-white dark:bg-gray-900 rounded-2xl shadow-sm ring-1 ring-gray-200 dark:ring-gray-800 p-6">
                     <div className="flex justify-between items-center mb-6">
-                        <h1 className="text-2xl font-bold text-gray-900">
+                        <h1 className="text-2xl font-bold text-gray-900 dark:text-gray-100">
                             داشبورد
                         </h1>
-                        <button
-                            onClick={logout}
-                            className="px-4 py-2 bg-red-600 text-white rounded-md hover:bg-red-700 transition-colors"
-                        >
-                            خروج
-                        </button>
+                        <div className="flex items-center gap-2">
+                            <ThemeToggle withLabel />
+                            <button
+                                onClick={logout}
+                                className="inline-flex items-center gap-2 px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 dark:focus:ring-offset-gray-900 transition-colors"
+                            >
+                                <PowerIcon className="h-5 w-5" />
+                                خروج
+                            </button>
+                        </div>
                     </div>
 
-                    <div className="border-t pt-6">
-                        <h2 className="text-lg font-semibold mb-4 text-slate-900">خوش آمدید، {user?.email}</h2>
+                    <div className="border-t border-gray-200 dark:border-gray-800 pt-6">
+                        <h2 className="text-lg font-semibold mb-1 text-gray-900 dark:text-gray-100">خوش آمدید، {user?.email}</h2>
+                        <p className="text-sm text-gray-500 dark:text-gray-400 mb-6">یکی از بخش‌های زیر را برای مدیریت انتخاب کنید.</p>
 
                         {/* Dashboard Cards */}
-                        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mt-6">
-                            <Link href="/admin/users" className="block">
-                                <div className="bg-indigo-50 hover:bg-indigo-100 rounded-lg p-6 transition-colors">
-                                    <UsersIcon className="h-8 w-8 text-indigo-600 mb-3" />
-                                    <h3 className="text-lg font-medium text-gray-900">مدیریت کاربران</h3>
-                                    <p className="text-sm text-gray-600 mt-1">
-                                        مشاهده و مدیریت کاربران، اشتراک‌ها و تراکنش‌ها
-                                    </p>
-                                </div>
-                            </Link>
-
-                            <Link href="/admin/packages" className="block">
-                                <div className="bg-green-50 hover:bg-green-100 rounded-lg p-6 transition-colors">
-                                    <CubeIcon className="h-8 w-8 text-green-600 mb-3" />
-                                    <h3 className="text-lg font-medium text-gray-900">مدیریت پکیج‌ها</h3>
-                                    <p className="text-sm text-gray-600 mt-1">
-                                        ایجاد و مدیریت پکیج‌های نرم‌افزار
-                                    </p>
-                                </div>
-                            </Link>
-
-                            <Link href="/admin/products" className="block">
-                                <div className="bg-purple-50 hover:bg-purple-100 rounded-lg p-6 transition-colors">
-                                    <TagIcon className="h-8 w-8 text-purple-600 mb-3" />
-                                    <h3 className="text-lg font-medium text-gray-900">مدیریت محصولات</h3>
-                                    <p className="text-sm text-gray-600 mt-1">
-                                        ایجاد و مدیریت محصولات و اشتراک‌ها
-                                    </p>
-                                </div>
-                            </Link>
-                            <Link href="/admin/reminders" className="block">
-                                <div className="bg-yellow-50 hover:bg-yellow-100 rounded-lg p-6 transition-colors">
-                                    <BellIcon className="h-8 w-8 text-yellow-600 mb-3" />
-                                    <h3 className="text-lg font-medium text-gray-900">مدیریت یادآوری‌ها</h3>
-                                    <p className="text-sm text-gray-600 mt-1">
-                                        ایجاد و مدیریت یادآوری‌ها و پیام‌های انگیزشی
-                                    </p>
-                                </div>
-                            </Link>
-                               <Link href="/admin/promotions" className="block">
-                                <div className="bg-pink-50 hover:bg-pink-100 rounded-lg p-6 transition-colors">
-                                    <MegaphoneIcon className="h-8 w-8 text-pink-600 mb-3" />
-                                    <h3 className="text-lg font-medium text-gray-900">مدیریت تبلیغات</h3>
-                                    <p className="text-sm text-gray-600 mt-1">
-                                        ایجاد و مدیریت تبلیغات، بنرها و اسلایدرها
-                                    </p>
-                                </div>
-                            </Link>
-                               <Link href="/admin/referral-rewards" className="block">
-                                <div className="bg-emerald-50 hover:bg-emerald-100 rounded-lg p-6 transition-colors">
-                                    <GiftIcon className="h-8 w-8 text-emerald-600 mb-3" />
-                                    <h3 className="text-lg font-medium text-gray-900">پاداش‌های معرفی</h3>
-                                    <p className="text-sm text-gray-600 mt-1">
-                                        اعطای اشتراک رایگان به کاربران واجد شرایط دعوت
-                                    </p>
-                                </div>
-                            </Link>
+                        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5">
+                            {cards.map(({ href, title, desc, Icon, iconWrap }) => (
+                                <Link key={href} href={href} className="block group">
+                                    <div className="h-full bg-white dark:bg-gray-900 rounded-xl p-6 ring-1 ring-gray-200 dark:ring-gray-800 shadow-sm hover:shadow-md hover:ring-indigo-300 dark:hover:ring-indigo-700 hover:-translate-y-0.5 transition-all duration-200">
+                                        <div className={`inline-flex h-12 w-12 items-center justify-center rounded-xl mb-4 ${iconWrap}`}>
+                                            <Icon className="h-6 w-6" />
+                                        </div>
+                                        <h3 className="text-lg font-medium text-gray-900 dark:text-gray-100">{title}</h3>
+                                        <p className="text-sm text-gray-600 dark:text-gray-400 mt-1">
+                                            {desc}
+                                        </p>
+                                    </div>
+                                </Link>
+                            ))}
                         </div>
                     </div>
                 </div>
             </div>
         </div>
     );
-}
\ No newline at end of file
+}
diff --git a/app/admin/layout.tsx b/app/admin/layout.tsx
index 3d40f47..e3b96e1 100644
--- a/app/admin/layout.tsx
+++ b/app/admin/layout.tsx
@@ -1,6 +1,7 @@
 'use client';
 
 import { AuthProvider } from '@/contexts/AuthContext';
+import ThemeToggle from '@/components/ThemeToggle';
 
 export default function AdminLayout({
     children,
@@ -9,8 +10,9 @@ export default function AdminLayout({
 }) {
     return (
         <AuthProvider>
-            <div className="min-h-screen bg-gray-100">
+            <div className="min-h-screen bg-gray-100 dark:bg-gray-950">
                 {children}
+                <ThemeToggle floating />
             </div>
         </AuthProvider>
     );
diff --git a/app/admin/login/page.tsx b/app/admin/login/page.tsx
index 55d370a..e047b4a 100644
--- a/app/admin/login/page.tsx
+++ b/app/admin/login/page.tsx
@@ -4,6 +4,7 @@ import { useState } from 'react';
 import { useAuth } from '@/contexts/AuthContext';
 import { useRouter } from 'next/navigation';
 import { useEffect } from 'react';
+import { LockClosedIcon } from '@heroicons/react/24/outline';
 
 export default function LoginPage() {
     const [auth, setAuth] = useState('');
@@ -36,72 +37,78 @@ export default function LoginPage() {
     };
 
     return (
-        <div className="min-h-screen flex items-center justify-center bg-gray-50 py-12 px-4 sm:px-6 lg:px-8">
-            <div className="max-w-md w-full space-y-8">
-                <div>
-                    <h2 className="mt-6 text-center text-3xl font-extrabold text-gray-900">
-                        پنل ادمین اپروایجنسی
-                    </h2>
-                </div>
-
-                <form className="mt-8 space-y-6" onSubmit={handleSubmit}>
+        <div className="min-h-screen flex items-center justify-center bg-gray-100 dark:bg-gray-950 py-12 px-4 sm:px-6 lg:px-8">
+            <div className="max-w-md w-full">
+                <div className="bg-white dark:bg-gray-900 rounded-2xl shadow-xl ring-1 ring-gray-200 dark:ring-gray-800 p-8 space-y-8">
                     <div>
-                        <div className='py-2'>
-                            <label htmlFor="auth" className="sr-only">
-                                Email
-                            </label>
-                            <input
-                                id="auth"
-                                name="auth"
-                                type="text"
-                                required
-                                className="appearance-none  relative block w-full px-3 py-3 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm"
-                                placeholder="ایمیل"
-                                value={auth}
-                                onChange={(e) => setAuth(e.target.value)}
-                                disabled={isLoading}
-                            />
-                        </div>
-                        <div>
-                            <label htmlFor="password" className="sr-only">
-                                Password
-                            </label>
-                            <input
-                                id="password"
-                                name="password"
-                                type="password"
-                                required
-                                className="appearance-none rounded-md relative block w-full px-3 py-3 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-b-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm"
-                                placeholder="رمز عبور"
-                                value={password}
-                                onChange={(e) => setPassword(e.target.value)}
-                                disabled={isLoading}
-                            />
+                        <div className="mx-auto h-14 w-14 rounded-2xl bg-indigo-600 flex items-center justify-center mb-4">
+                            <LockClosedIcon className="h-7 w-7 text-white" />
                         </div>
+                        <h2 className="text-center text-2xl font-bold text-gray-900 dark:text-gray-100">
+                            پنل ادمین اپروایجنسی
+                        </h2>
+                        <p className="mt-2 text-center text-sm text-gray-500 dark:text-gray-400">
+                            برای ادامه وارد حساب کاربری خود شوید
+                        </p>
                     </div>
 
-                    {(error || localError) && (
-                        <div className="rounded-md bg-red-50 p-4">
-                            <div className="flex">
-                                <div className="ml-3">
-                                    <h3 className="text-sm font-medium text-red-800">
-                                        {localError || error}
-                                    </h3>
-                                </div>
+                    <form className="space-y-5" onSubmit={handleSubmit}>
+                        <div className="space-y-4">
+                            <div>
+                                <label htmlFor="auth" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+                                    ایمیل
+                                </label>
+                                <input
+                                    id="auth"
+                                    name="auth"
+                                    type="text"
+                                    required
+                                    className="appearance-none relative block w-full px-3 py-3 border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 placeholder-gray-400 dark:placeholder-gray-500 text-gray-900 dark:text-gray-100 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm transition-colors"
+                                    placeholder="example@email.com"
+                                    value={auth}
+                                    onChange={(e) => setAuth(e.target.value)}
+                                    disabled={isLoading}
+                                    dir="ltr"
+                                />
+                            </div>
+                            <div>
+                                <label htmlFor="password" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+                                    رمز عبور
+                                </label>
+                                <input
+                                    id="password"
+                                    name="password"
+                                    type="password"
+                                    required
+                                    className="appearance-none relative block w-full px-3 py-3 border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 placeholder-gray-400 dark:placeholder-gray-500 text-gray-900 dark:text-gray-100 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm transition-colors"
+                                    placeholder="••••••••"
+                                    value={password}
+                                    onChange={(e) => setPassword(e.target.value)}
+                                    disabled={isLoading}
+                                    dir="ltr"
+                                />
                             </div>
                         </div>
-                    )}
 
-                    <div>
-                        <button
-                            type="submit"
-                            disabled={isLoading}
-                            className="group relative w-full flex justify-center py-3 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 disabled:opacity-50 disabled:cursor-not-allowed"
-                        >
-                            {isLoading ? 'کمی صبر کنید' : 'ورود'}
-                        </button>
-                    </div>
-                </form>
+                        {(error || localError) && (
+                            <div className="rounded-lg bg-red-50 dark:bg-red-900/20 p-4">
+                                <h3 className="text-sm font-medium text-red-800 dark:text-red-300 text-center">
+                                    {localError || error}
+                                </h3>
+                            </div>
+                        )}
+
+                        <div>
+                            <button
+                                type="submit"
+                                disabled={isLoading}
+                                className="group relative w-full flex justify-center py-3 px-4 border border-transparent text-sm font-medium rounded-lg text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-offset-gray-900 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+                            >
+                                {isLoading ? 'کمی صبر کنید...' : 'ورود'}
+                            </button>
+                        </div>
+                    </form>
+                </div>
             </div>
         </div>
     );
diff --git a/app/admin/packages/page.tsx b/app/admin/packages/page.tsx
index fc941af..118c5ea 100644
--- a/app/admin/packages/page.tsx
+++ b/app/admin/packages/page.tsx
@@ -104,13 +104,13 @@ export default function PackagesPage() {
         <div className="p-6">
             <div className="max-w-7xl mx-auto">
                 <div className="flex justify-between items-center mb-6">
-                    <h1 className="text-2xl font-bold text-gray-900">
+                    <h1 className="text-2xl font-bold text-gray-900 dark:text-gray-100">
                         مدیریت پکیج‌ها
                     </h1>
                     {!isFormVisible && (
                         <button
                             onClick={handleCreate}
-                            className="inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
+                            className="inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-offset-gray-900 transition-colors"
                         >
                             <PlusIcon className="h-5 w-5 ml-2" />
                             پکیج جدید
@@ -120,14 +120,14 @@ export default function PackagesPage() {
 
                 {/* Messages */}
                 {error && (
-                    <div className="mb-4 rounded-md bg-red-50 p-4">
-                        <p className="text-sm text-red-800">{error}</p>
+                    <div className="mb-4 rounded-md bg-red-50 dark:bg-red-900/20 p-4">
+                        <p className="text-sm text-red-800 dark:text-red-300">{error}</p>
                     </div>
                 )}
 
                 {success && (
-                    <div className="mb-4 rounded-md bg-green-50 p-4">
-                        <p className="text-sm text-green-800">{success}</p>
+                    <div className="mb-4 rounded-md bg-green-50 dark:bg-green-900/20 p-4">
+                        <p className="text-sm text-green-800 dark:text-green-300">{success}</p>
                     </div>
                 )}
 
diff --git a/app/admin/products/page.tsx b/app/admin/products/page.tsx
index 9e81d6e..edfd078 100644
--- a/app/admin/products/page.tsx
+++ b/app/admin/products/page.tsx
@@ -170,14 +170,14 @@ export default function ProductsPage() {
         <div className="p-6">
             <div className="max-w-7xl mx-auto">
                 <div className="flex justify-between items-center mb-6">
-                    <h1 className="text-2xl font-bold text-gray-900">
+                    <h1 className="text-2xl font-bold text-gray-900 dark:text-gray-100">
                         مدیریت محصولات
                     </h1>
                 </div>
 
                 {/* Package Selector */}
-                <div className="bg-white p-4 rounded-lg shadow mb-6">
-                    <label htmlFor="package" className="block text-sm font-medium text-gray-700 mb-2">
+                <div className="bg-white dark:bg-gray-900 p-4 rounded-lg shadow mb-6">
+                    <label htmlFor="package" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                         انتخاب پکیج
                     </label>
                     <select
@@ -185,7 +185,7 @@ export default function ProductsPage() {
                         value={selectedPackage?.name || ''}
                         onChange={handlePackageChange}
                         disabled={isLoadingPackages}
-                        className="block w-full px-3 py-2 text-slate-900 border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm disabled:opacity-50"
+                        className="block w-full px-3 py-2 text-slate-900 dark:text-gray-100 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm disabled:opacity-50 dark:bg-gray-800 dark:placeholder-gray-500 transition-colors"
                     >
                         {isLoadingPackages ? (
                             <option>در حال بارگذاری پکیج‌ها...</option>
@@ -201,14 +201,14 @@ export default function ProductsPage() {
 
                 {/* Messages */}
                 {error && (
-                    <div className="mb-4 rounded-md bg-red-50 p-4">
-                        <p className="text-sm text-red-800">{error}</p>
+                    <div className="mb-4 rounded-md bg-red-50 dark:bg-red-900/20 p-4">
+                        <p className="text-sm text-red-800 dark:text-red-300">{error}</p>
                     </div>
                 )}
 
                 {success && (
-                    <div className="mb-4 rounded-md bg-green-50 p-4">
-                        <p className="text-sm text-green-800">{success}</p>
+                    <div className="mb-4 rounded-md bg-green-50 dark:bg-green-900/20 p-4">
+                        <p className="text-sm text-green-800 dark:text-green-300">{success}</p>
                     </div>
                 )}
 
@@ -220,7 +220,7 @@ export default function ProductsPage() {
                                 <button
                                     onClick={handleCreate}
                                     disabled={isLoading}
-                                    className="inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 disabled:opacity-50"
+                                    className="inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 dark:focus:ring-offset-gray-900 focus:ring-indigo-500 disabled:opacity-50 transition-colors"
                                 >
                                     <PlusIcon className="h-5 w-5 ml-2" />
                                     محصول جدید
diff --git a/app/admin/promotions/page.tsx b/app/admin/promotions/page.tsx
index 13a1c71..07a4c12 100644
--- a/app/admin/promotions/page.tsx
+++ b/app/admin/promotions/page.tsx
@@ -123,14 +123,14 @@ export default function PromotionsPage() {
         <div className="p-6">
             <div className="max-w-7xl mx-auto">
                 <div className="flex justify-between items-center mb-6">
-                    <h1 className="text-2xl font-bold text-gray-900">
+                    <h1 className="text-2xl font-bold text-gray-900 dark:text-gray-100">
                         مدیریت تبلیغات
                     </h1>
                     {!isFormVisible && (
                         <button
                             onClick={handleCreate}
                             disabled={isLoading}
-                            className="inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 disabled:opacity-50"
+                            className="inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 dark:focus:ring-offset-gray-900 focus:ring-indigo-500 disabled:opacity-50 transition-colors"
                         >
                             <PlusIcon className="h-5 w-5 ml-2" />
                             تبلیغ جدید
@@ -140,14 +140,14 @@ export default function PromotionsPage() {
 
                 {/* Messages */}
                 {error && (
-                    <div className="mb-4 rounded-md bg-red-50 p-4">
-                        <p className="text-sm text-red-800">{error}</p>
+                    <div className="mb-4 rounded-md bg-red-50 dark:bg-red-900/20 p-4">
+                        <p className="text-sm text-red-800 dark:text-red-300">{error}</p>
                     </div>
                 )}
 
                 {success && (
-                    <div className="mb-4 rounded-md bg-green-50 p-4">
-                        <p className="text-sm text-green-800">{success}</p>
+                    <div className="mb-4 rounded-md bg-green-50 dark:bg-green-900/20 p-4">
+                        <p className="text-sm text-green-800 dark:text-green-300">{success}</p>
                     </div>
                 )}
 
diff --git a/app/admin/referral-rewards/page.tsx b/app/admin/referral-rewards/page.tsx
index f29a5af..5b00236 100644
--- a/app/admin/referral-rewards/page.tsx
+++ b/app/admin/referral-rewards/page.tsx
@@ -67,17 +67,17 @@ export default function ReferralRewardsPage() {
             <div className="max-w-7xl mx-auto">
                 <div className="flex justify-between items-center mb-6">
                     <div>
-                        <h1 className="text-2xl font-bold text-gray-900">
+                        <h1 className="text-2xl font-bold text-gray-900 dark:text-gray-100">
                             پاداش‌های معرفی
                         </h1>
-                        <p className="text-sm text-gray-500 mt-1">
+                        <p className="text-sm text-gray-500 dark:text-gray-400 mt-1">
                             کاربرانی که به حد نصاب دعوت موفق رسیده‌اند و هنوز اشتراک رایگان دریافت نکرده‌اند.
                         </p>
                     </div>
                     <button
                         onClick={loadRewards}
                         disabled={isLoading}
-                        className="inline-flex items-center px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 disabled:opacity-50"
+                        className="inline-flex items-center px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm text-sm font-medium text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-offset-gray-900 disabled:opacity-50 transition-colors"
                     >
                         <ArrowPathIcon className={`h-5 w-5 ml-2 ${isLoading ? 'animate-spin' : ''}`} />
                         بروزرسانی
@@ -86,20 +86,20 @@ export default function ReferralRewardsPage() {
 
                 {/* Messages */}
                 {error && (
-                    <div className="mb-4 rounded-md bg-red-50 p-4">
-                        <p className="text-sm text-red-800">{error}</p>
+                    <div className="mb-4 rounded-md bg-red-50 dark:bg-red-900/20 p-4">
+                        <p className="text-sm text-red-800 dark:text-red-300">{error}</p>
                     </div>
                 )}
 
                 {success && (
-                    <div className="mb-4 rounded-md bg-green-50 p-4">
-                        <p className="text-sm text-green-800">{success}</p>
+                    <div className="mb-4 rounded-md bg-green-50 dark:bg-green-900/20 p-4">
+                        <p className="text-sm text-green-800 dark:text-green-300">{success}</p>
                     </div>
                 )}
 
                 {isLoading && users.length === 0 ? (
-                    <div className="text-center py-12 bg-white rounded-lg shadow">
-                        <p className="text-gray-500">در حال بارگذاری...</p>
+                    <div className="text-center py-12 bg-white dark:bg-gray-900 rounded-xl shadow-sm ring-1 ring-gray-200 dark:ring-gray-800">
+                        <p className="text-gray-500 dark:text-gray-400">در حال بارگذاری...</p>
                     </div>
                 ) : (
                     <ReferralList
diff --git a/app/admin/reminders/page.tsx b/app/admin/reminders/page.tsx
index a5b7016..1012f07 100644
--- a/app/admin/reminders/page.tsx
+++ b/app/admin/reminders/page.tsx
@@ -164,14 +164,14 @@ export default function RemindersPage() {
         <div className="p-6">
             <div className="max-w-7xl mx-auto">
                 <div className="flex justify-between items-center mb-6">
-                    <h1 className="text-2xl font-bold text-gray-900">
+                    <h1 className="text-2xl font-bold text-gray-900 dark:text-gray-100">
                         مدیریت یادآوری‌ها
                     </h1>
                 </div>
 
                 {/* Package Selector */}
-                <div className="bg-white p-4 rounded-lg shadow mb-6">
-                    <label htmlFor="package" className="block text-sm font-medium text-gray-700 mb-2">
+                <div className="bg-white dark:bg-gray-900 p-4 rounded-lg shadow mb-6 transition-colors">
+                    <label htmlFor="package" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                         انتخاب پکیج
                     </label>
                     <select
@@ -179,7 +179,7 @@ export default function RemindersPage() {
                         value={selectedPackage?.name || ''}
                         onChange={handlePackageChange}
                         disabled={isLoadingPackages}
-                        className="block w-full px-3 py-2 text-slate-900 border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm disabled:opacity-50"
+                        className="block w-full px-3 py-2 text-slate-900 dark:text-gray-100 border border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:placeholder-gray-500 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm disabled:opacity-50 transition-colors"
                     >
                         {isLoadingPackages ? (
                             <option>در حال بارگذاری پکیج‌ها...</option>
@@ -195,14 +195,14 @@ export default function RemindersPage() {
 
                 {/* Messages */}
                 {error && (
-                    <div className="mb-4 rounded-md bg-red-50 p-4">
-                        <p className="text-sm text-red-800">{error}</p>
+                    <div className="mb-4 rounded-md bg-red-50 dark:bg-red-900/20 p-4">
+                        <p className="text-sm text-red-800 dark:text-red-300">{error}</p>
                     </div>
                 )}
 
                 {success && (
-                    <div className="mb-4 rounded-md bg-green-50 p-4">
-                        <p className="text-sm text-green-800">{success}</p>
+                    <div className="mb-4 rounded-md bg-green-50 dark:bg-green-900/20 p-4">
+                        <p className="text-sm text-green-800 dark:text-green-300">{success}</p>
                     </div>
                 )}
 
@@ -214,7 +214,7 @@ export default function RemindersPage() {
                                 <button
                                     onClick={handleCreate}
                                     disabled={isLoading}
-                                    className="inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 disabled:opacity-50"
+                                    className="inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 dark:focus:ring-offset-gray-900 focus:ring-indigo-500 disabled:opacity-50 transition-colors"
                                 >
                                     <PlusIcon className="h-5 w-5 ml-2" />
                                     یادآوری جدید
diff --git a/app/admin/users/page.tsx b/app/admin/users/page.tsx
index 3e8f04d..5be74d2 100644
--- a/app/admin/users/page.tsx
+++ b/app/admin/users/page.tsx
@@ -230,7 +230,7 @@ export default function UsersPage() {
     return (
         <div className="p-6">
             <div className="max-w-7xl mx-auto">
-                <h1 className="text-2xl font-bold text-gray-900 mb-6">
+                <h1 className="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-6">
                     مدیریت کاربران
                 </h1>
 
@@ -251,30 +251,30 @@ export default function UsersPage() {
 
                 {/* Messages */}
                 {error && (
-                    <div className="mb-4 rounded-md bg-red-50 p-4">
+                    <div className="mb-4 rounded-md bg-red-50 dark:bg-red-900/20 p-4">
                         <div className="flex">
                             <div className="flex-shrink-0">
-                                <svg className="h-5 w-5 text-red-400" viewBox="0 0 20 20" fill="currentColor">
+                                <svg className="h-5 w-5 text-red-400 dark:text-red-400" viewBox="0 0 20 20" fill="currentColor">
                                     <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clipRule="evenodd" />
                                 </svg>
                             </div>
                             <div className="mr-3">
-                                <p className="text-sm text-red-800">{error}</p>
+                                <p className="text-sm text-red-800 dark:text-red-300">{error}</p>
                             </div>
                         </div>
                     </div>
                 )}
 
                 {success && (
-                    <div className="mb-4 rounded-md bg-green-50 p-4">
+                    <div className="mb-4 rounded-md bg-green-50 dark:bg-green-900/20 p-4">
                         <div className="flex">
                             <div className="flex-shrink-0">
-                                <svg className="h-5 w-5 text-green-400" viewBox="0 0 20 20" fill="currentColor">
+                                <svg className="h-5 w-5 text-green-400 dark:text-green-400" viewBox="0 0 20 20" fill="currentColor">
                                     <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
                                 </svg>
                             </div>
                             <div className="mr-3">
-                                <p className="text-sm text-green-800">{success}</p>
+                                <p className="text-sm text-green-800 dark:text-green-300">{success}</p>
                             </div>
                         </div>
                     </div>
@@ -282,40 +282,40 @@ export default function UsersPage() {
 
                 {/* No Package Selected Message */}
                 {!selectedPackage && packages.length === 0 && (
-                    <div className="text-center py-12 bg-white rounded-lg shadow">
-                        <p className="text-gray-500">هیچ پکیجی یافت نشد. ابتدا یک پکیج ایجاد کنید.</p>
+                    <div className="text-center py-12 bg-white dark:bg-gray-900 rounded-xl shadow-sm ring-1 ring-gray-200 dark:ring-gray-800">
+                        <p className="text-gray-500 dark:text-gray-400">هیچ پکیجی یافت نشد. ابتدا یک پکیج ایجاد کنید.</p>
                     </div>
                 )}
 
                 {/* Show products list even without user */}
                 {selectedPackage && products.length > 0 && !user && (
                     <div className="mb-6">
-                        <div className="bg-white shadow overflow-hidden sm:rounded-lg">
+                        <div className="bg-white dark:bg-gray-900 shadow-sm ring-1 ring-gray-200 dark:ring-gray-800 overflow-hidden sm:rounded-xl">
                             <div className="px-4 py-5 sm:px-6">
-                                <h3 className="text-lg leading-6 font-medium text-gray-900">
+                                <h3 className="text-lg leading-6 font-medium text-gray-900 dark:text-gray-100">
                                     محصولات موجود در پکیج {selectedPackage}
                                 </h3>
                             </div>
-                            <div className="border-t border-gray-200 px-4 py-5 sm:px-6">
+                            <div className="border-t border-gray-200 dark:border-gray-800 px-4 py-5 sm:px-6">
                                 <div className="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3">
                                     {products.map((product) => (
                                         <div
                                             key={product.id}
-                                            className="relative block w-full border border-gray-200 rounded-lg p-4 text-right bg-gray-50"
+                                            className="relative block w-full border border-gray-200 dark:border-gray-800 rounded-lg p-4 text-right bg-gray-50 dark:bg-gray-800/60"
                                         >
-                                            <p className="text-sm font-medium text-gray-900">
+                                            <p className="text-sm font-medium text-gray-900 dark:text-gray-100">
                                                 {product.title || 'محصول'}
                                             </p>
-                                            <p className="mt-1 text-xs text-gray-500">
+                                            <p className="mt-1 text-xs text-gray-500 dark:text-gray-400">
                                                 قیمت: {formatPrice(product.price)} تومان
                                             </p>
-                                            <p className="text-xs text-gray-500">
+                                            <p className="text-xs text-gray-500 dark:text-gray-400">
                                                 نوع: {getProductTypeLabel(product.type)}
                                             </p>
                                         </div>
                                     ))}
                                 </div>
-                                <p className="mt-4 text-sm text-gray-500 text-center">
+                                <p className="mt-4 text-sm text-gray-500 dark:text-gray-400 text-center">
                                     برای افزودن اشتراک به کاربر، ابتدا یک کاربر جستجو کنید
                                 </p>
                             </div>
@@ -331,7 +331,7 @@ export default function UsersPage() {
                             <button
                                 onClick={() => setIsEditing(true)}
                                 disabled={isLoading}
-                                className="inline-flex items-center px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 disabled:opacity-50"
+                                className="inline-flex items-center px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm text-sm font-medium text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-offset-gray-900 disabled:opacity-50 transition-colors"
                             >
                                 <PencilSquareIcon className="h-5 w-5 ml-2" />
                                 ویرایش اطلاعات
@@ -339,7 +339,7 @@ export default function UsersPage() {
                             <button
                                 onClick={handleDeleteUser}
                                 disabled={isLoading}
-                                className="inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-red-600 hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 disabled:opacity-50"
+                                className="inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-red-600 hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 dark:focus:ring-offset-gray-900 disabled:opacity-50 transition-colors"
                             >
                                 <TrashIcon className="h-5 w-5 ml-2" />
                                 حذف کاربر
diff --git a/app/globals.css b/app/globals.css
index db72b47..5444c4d 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -1,8 +1,7 @@
 @import "tailwindcss";
-@tailwind utilities;
-/* @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); */
-
 
+/* Class-based dark mode (Tailwind v4): toggled by a `.dark` class on <html> */
+@custom-variant dark (&:where(.dark, .dark *));
 
 @theme {
   --color-primary-50: #f0f1ff;
@@ -14,7 +13,7 @@
   --color-primary-600: #5d68e0;
   --color-primary-700: #4853c4;
   --color-primary-800: #343ea8;
-  --color-primary-900: #1f298;
+  --color-primary-900: #2a318c;
 }
 
 /* Dana Font Faces */
@@ -43,10 +42,16 @@
 }
 
 :root {
-  --background: #ffffff;
+  --background: #f3f4f6;
   --foreground: #171717;
 }
 
+/* Dark palette is driven by the `.dark` class so the toggle controls it */
+.dark {
+  --background: #030712;
+  --foreground: #ededed;
+}
+
 @theme inline {
   --color-background: var(--background);
   --color-foreground: var(--foreground);
@@ -54,16 +59,49 @@
   --font-mono: var(--font-geist-mono);
 }
 
-@media (prefers-color-scheme: dark) {
-  :root {
-    --background: #0a0a0a;
-    --foreground: #ededed;
-  }
-}
-
 body {
   background: var(--background);
   color: var(--foreground);
   font-family: 'Dana', 'Inter', Arial, Helvetica, sans-serif;
   font-weight: 400;
-}
\ No newline at end of file
+}
+
+/* Smooth theme transition for surfaces, borders and text */
+*,
+*::before,
+*::after {
+  transition-property: background-color, border-color, color, fill, stroke;
+  transition-duration: 200ms;
+  transition-timing-function: ease;
+}
+
+/* Custom scrollbar that adapts to the theme */
+* {
+  scrollbar-width: thin;
+  scrollbar-color: #cbd5e1 transparent;
+}
+.dark * {
+  scrollbar-color: #374151 transparent;
+}
+*::-webkit-scrollbar {
+  width: 10px;
+  height: 10px;
+}
+*::-webkit-scrollbar-thumb {
+  background-color: #cbd5e1;
+  border-radius: 9999px;
+  border: 2px solid transparent;
+  background-clip: content-box;
+}
+.dark *::-webkit-scrollbar-thumb {
+  background-color: #374151;
+}
+
+::selection {
+  background-color: #c3c7ff;
+  color: #1f2937;
+}
+.dark ::selection {
+  background-color: #4853c4;
+  color: #f9fafb;
+}
diff --git a/app/layout.tsx b/app/layout.tsx
index 46f98e4..a837b83 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -21,8 +21,14 @@ export default function RootLayout({
     children: React.ReactNode;
 }) {
     return (
-        <html lang="fa" dir="rtl">
+        <html lang="fa" dir="rtl" suppressHydrationWarning>
             <head>
+                {/* Apply the saved/system theme before paint to avoid a flash of the wrong theme */}
+                <script
+                    dangerouslySetInnerHTML={{
+                        __html: `(function(){try{var t=localStorage.getItem('theme');var d=t?t==='dark':window.matchMedia('(prefers-color-scheme: dark)').matches;if(d)document.documentElement.classList.add('dark');}catch(e){}})();`,
+                    }}
+                />
                 <meta
                     name="google-site-verification"
                     content="HIKgdf_siYdPxbJ2P1792opMprpxci_QjE-quk9kyi8"
diff --git a/components/ThemeToggle.tsx b/components/ThemeToggle.tsx
new file mode 100644
index 0000000..49b86b6
--- /dev/null
+++ b/components/ThemeToggle.tsx
@@ -0,0 +1,82 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { SunIcon, MoonIcon } from '@heroicons/react/24/outline';
+
+type Theme = 'light' | 'dark';
+
+interface ThemeToggleProps {
+    /** When true, renders as a fixed floating pill (used on the app shell). */
+    floating?: boolean;
+    /** When true, shows a Persian text label next to the icon. */
+    withLabel?: boolean;
+    className?: string;
+}
+
+export default function ThemeToggle({ floating = false, withLabel, className = '' }: ThemeToggleProps) {
+    const [theme, setTheme] = useState<Theme>('light');
+    const [mounted, setMounted] = useState(false);
+
+    // Floating variant shows a label by default; inline variant is icon-only unless asked.
+    const showLabel = withLabel ?? floating;
+
+    useEffect(() => {
+        setMounted(true);
+        setTheme(document.documentElement.classList.contains('dark') ? 'dark' : 'light');
+    }, []);
+
+    const toggle = () => {
+        const next: Theme = theme === 'dark' ? 'light' : 'dark';
+        const root = document.documentElement;
+        if (next === 'dark') {
+            root.classList.add('dark');
+        } else {
+            root.classList.remove('dark');
+        }
+        try {
+            localStorage.setItem('theme', next);
+        } catch {
+            // ignore storage errors
+        }
+        setTheme(next);
+    };
+
+    const base =
+        'inline-flex items-center gap-2 border border-gray-200 bg-white text-gray-700 shadow-sm hover:bg-gray-50 hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-200 dark:hover:bg-gray-700 dark:hover:text-white dark:focus:ring-offset-gray-900 transition-colors';
+
+    const shape = showLabel
+        ? 'rounded-full px-4 py-2 text-sm font-medium'
+        : 'rounded-full justify-center h-10 w-10';
+
+    const floatingCls = floating ? 'fixed bottom-5 left-5 z-50' : '';
+
+    const isDark = theme === 'dark';
+    const label = isDark ? 'حالت روشن' : 'حالت تیره';
+
+    // Avoid hydration mismatch: render a neutral placeholder until mounted
+    if (!mounted) {
+        return (
+            <button
+                type="button"
+                aria-label="تغییر تم"
+                className={`${base} ${shape} ${floatingCls} ${className}`}
+            >
+                <SunIcon className="h-5 w-5" />
+                {showLabel && <span>تم</span>}
+            </button>
+        );
+    }
+
+    return (
+        <button
+            type="button"
+            onClick={toggle}
+            aria-label={label}
+            title={label}
+            className={`${base} ${shape} ${floatingCls} ${className}`}
+        >
+            {isDark ? <SunIcon className="h-5 w-5" /> : <MoonIcon className="h-5 w-5" />}
+            {showLabel && <span>{label}</span>}
+        </button>
+    );
+}
diff --git a/components/admin/packages/PackageForm.tsx b/components/admin/packages/PackageForm.tsx
index afa9a45..883ab4e 100644
--- a/components/admin/packages/PackageForm.tsx
+++ b/components/admin/packages/PackageForm.tsx
@@ -95,11 +95,11 @@ export default function PackageForm({ package: pkg, onSubmit, onCancel, isLoadin
     };
 
     return (
-        <form onSubmit={handleSubmit} className="space-y-6 bg-white p-6 rounded-lg shadow">
+        <form onSubmit={handleSubmit} className="space-y-6 bg-white dark:bg-gray-900 p-6 rounded-lg shadow">
             <div className="grid grid-cols-1 gap-6 md:grid-cols-2">
                 {/* Name */}
                 <div>
-                    <label htmlFor="name" className="block text-sm font-medium text-gray-700 mb-1">
+                    <label htmlFor="name" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                         نام پکیج <span className="text-red-500">*</span>
                     </label>
                     <input
@@ -109,7 +109,7 @@ export default function PackageForm({ package: pkg, onSubmit, onCancel, isLoadin
                         required
                         value={formData.name || ''}
                         onChange={handleInputChange}
-                        className="block w-full px-3 py-2 text-slate-900 border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
+                        className="block w-full px-3 py-2 text-slate-900 dark:text-gray-100 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm dark:bg-gray-800 dark:placeholder-gray-500"
                         placeholder="مثال: com.approagency.meditation"
                         dir="ltr"
                     />
@@ -117,7 +117,7 @@ export default function PackageForm({ package: pkg, onSubmit, onCancel, isLoadin
 
                 {/* Title */}
                 <div>
-                    <label htmlFor="title" className="block text-sm font-medium text-gray-700 mb-1">
+                    <label htmlFor="title" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                         عنوان <span className="text-red-500">*</span>
                     </label>
                     <input
@@ -127,19 +127,19 @@ export default function PackageForm({ package: pkg, onSubmit, onCancel, isLoadin
                         required
                         value={formData.title || ''}
                         onChange={handleInputChange}
-                        className="block w-full px-3 py-2 text-slate-900 border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
+                        className="block w-full px-3 py-2 text-slate-900 dark:text-gray-100 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm dark:bg-gray-800 dark:placeholder-gray-500"
                         placeholder="مثال: آرام لند"
                     />
                 </div>
 
                 {/* Avatar */}
                 <div>
-                    <label className="block text-sm font-medium text-gray-700 mb-1">
+                    <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                         تصویر
                     </label>
                     <div className="flex items-center space-x-3 space-x-reverse">
-                        <label className="cursor-pointer flex items-center px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50">
-                            <PhotoIcon className="h-5 w-5 ml-2 text-gray-400" />
+                        <label className="cursor-pointer flex items-center px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm text-sm font-medium text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors">
+                            <PhotoIcon className="h-5 w-5 ml-2 text-gray-400 dark:text-gray-500" />
                             انتخاب تصویر
                             <input
                                 type="file"
@@ -152,7 +152,7 @@ export default function PackageForm({ package: pkg, onSubmit, onCancel, isLoadin
                             <button
                                 type="button"
                                 onClick={removeAvatar}
-                                className="text-red-600 hover:text-red-900"
+                                className="text-red-600 dark:text-red-400 hover:text-red-900 transition-colors"
                             >
                                 <XMarkIcon className="h-5 w-5" />
                             </button>
@@ -163,7 +163,7 @@ export default function PackageForm({ package: pkg, onSubmit, onCancel, isLoadin
                             <img
                                 src={avatarPreview}
                                 alt="Preview"
-                                className="h-20 w-20 object-cover rounded-lg border border-gray-200"
+                                className="h-20 w-20 object-cover rounded-lg border border-gray-200 dark:border-gray-800"
                             />
                         </div>
                     )}
@@ -171,7 +171,7 @@ export default function PackageForm({ package: pkg, onSubmit, onCancel, isLoadin
 
                 {/* V1 Identifier */}
                 <div>
-                    <label htmlFor="v1_identifier" className="block text-sm font-medium text-gray-700 mb-1">
+                    <label htmlFor="v1_identifier" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                         شناسه V1
                     </label>
                     <input
@@ -180,13 +180,13 @@ export default function PackageForm({ package: pkg, onSubmit, onCancel, isLoadin
                         name="v1_identifier"
                         value={formData.v1_identifier || ''}
                         onChange={handleInputChange}
-                        className="block w-full px-3 py-2 text-slate-900 border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
+                        className="block w-full px-3 py-2 text-slate-900 dark:text-gray-100 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm dark:bg-gray-800 dark:placeholder-gray-500"
                     />
                 </div>
 
                 {/* Myket Access Token */}
                 <div>
-                    <label htmlFor="myket_access_token" className="block text-sm font-medium text-gray-700 mb-1">
+                    <label htmlFor="myket_access_token" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                         توکن دسترسی Myket
                     </label>
                     <input
@@ -195,13 +195,13 @@ export default function PackageForm({ package: pkg, onSubmit, onCancel, isLoadin
                         name="myket_access_token"
                         value={formData.myket_access_token || ''}
                         onChange={handleInputChange}
-                        className="block w-full px-3 py-2 text-slate-900 border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
+                        className="block w-full px-3 py-2 text-slate-900 dark:text-gray-100 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm dark:bg-gray-800 dark:placeholder-gray-500"
                     />
                 </div>
 
                 {/* Cafe Config ID */}
                 <div>
-                    <label htmlFor="cafe_config_id" className="block text-sm font-medium text-gray-700 mb-1">
+                    <label htmlFor="cafe_config_id" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                         شناسه کافه بازار
                     </label>
                     <input
@@ -210,13 +210,13 @@ export default function PackageForm({ package: pkg, onSubmit, onCancel, isLoadin
                         name="cafe_config_id"
                         value={formData.cafe_config_id || ''}
                         onChange={handleNumberChange}
-                        className="block w-full px-3 py-2 text-slate-900 border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
+                        className="block w-full px-3 py-2 text-slate-900 dark:text-gray-100 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm dark:bg-gray-800 dark:placeholder-gray-500"
                     />
                 </div>
 
                 {/* Web App URL */}
                 <div>
-                    <label htmlFor="web_app_url" className="block text-sm font-medium text-gray-700 mb-1">
+                    <label htmlFor="web_app_url" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                         آدرس وب اپلیکیشن
                     </label>
                     <input
@@ -225,14 +225,14 @@ export default function PackageForm({ package: pkg, onSubmit, onCancel, isLoadin
                         name="web_app_url"
                         value={formData.web_app_url || ''}
                         onChange={handleInputChange}
-                        className="block w-full px-3 py-2 text-slate-900 border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
+                        className="block w-full px-3 py-2 text-slate-900 dark:text-gray-100 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm dark:bg-gray-800 dark:placeholder-gray-500"
                         placeholder="https://example.com"
                     />
                 </div>
 
                 {/* Tries */}
                 <div>
-                    <label htmlFor="tries" className="block text-sm font-medium text-gray-700 mb-1">
+                    <label htmlFor="tries" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                         تعداد تلاش‌ها
                     </label>
                     <input
@@ -241,17 +241,17 @@ export default function PackageForm({ package: pkg, onSubmit, onCancel, isLoadin
                         name="tries"
                         value={formData.tries || 0}
                         onChange={handleNumberChange}
-                        className="block w-full px-3 py-2 text-slate-900 border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
+                        className="block w-full px-3 py-2 text-slate-900 dark:text-gray-100 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm dark:bg-gray-800 dark:placeholder-gray-500"
                     />
                 </div>
 
                 {/* Firebase JSON */}
                 <div className="md:col-span-2">
-                    <label className="block text-sm font-medium text-gray-700 mb-1">
+                    <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                         فایل Firebase JSON
                     </label>
-                    <label className="cursor-pointer inline-flex items-center px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50">
-                        <DocumentTextIcon className="h-5 w-5 ml-2 text-gray-400" />
+                    <label className="cursor-pointer inline-flex items-center px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm text-sm font-medium text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors">
+                        <DocumentTextIcon className="h-5 w-5 ml-2 text-gray-400 dark:text-gray-500" />
                         انتخاب فایل
                         <input
                             type="file"
@@ -261,7 +261,7 @@ export default function PackageForm({ package: pkg, onSubmit, onCancel, isLoadin
                         />
                     </label>
                     {firebaseFile && (
-                        <p className="mt-2 text-sm text-gray-600">
+                        <p className="mt-2 text-sm text-gray-600 dark:text-gray-400">
                             فایل انتخاب شده: {firebaseFile.name}
                         </p>
                     )}
@@ -269,18 +269,18 @@ export default function PackageForm({ package: pkg, onSubmit, onCancel, isLoadin
             </div>
 
             {/* Form Actions */}
-            <div className="flex justify-end space-x-3 space-x-reverse pt-4 border-t">
+            <div className="flex justify-end space-x-3 space-x-reverse pt-4 border-t dark:border-gray-800">
                 <button
                     type="button"
                     onClick={onCancel}
-                    className="px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
+                    className="px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm text-sm font-medium text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-offset-gray-900 transition-colors"
                 >
                     انصراف
                 </button>
                 <button
                     type="submit"
                     disabled={isLoading}
-                    className="px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 disabled:opacity-50"
+                    className="px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-offset-gray-900 disabled:opacity-50 transition-colors"
                 >
                     {isLoading ? 'در حال ذخیره...' : pkg ? 'به‌روزرسانی' : 'ایجاد'}
                 </button>
diff --git a/components/admin/packages/PackageList.tsx b/components/admin/packages/PackageList.tsx
index 29accc1..cb76242 100644
--- a/components/admin/packages/PackageList.tsx
+++ b/components/admin/packages/PackageList.tsx
@@ -22,17 +22,17 @@ export default function PackageList({ packages, onEdit, onDelete, isLoading }: P
 
     if (!packages || packages.length === 0) {
         return (
-            <div className="text-center py-12 bg-white rounded-lg shadow">
-                <p className="text-gray-500">هیچ پکیجی یافت نشد</p>
+            <div className="text-center py-12 bg-white dark:bg-gray-900 rounded-lg shadow">
+                <p className="text-gray-500 dark:text-gray-400">هیچ پکیجی یافت نشد</p>
             </div>
         );
     }
 
     return (
-        <div className="bg-white shadow overflow-hidden sm:rounded-lg">
-            <ul className="divide-y divide-gray-200">
+        <div className="bg-white dark:bg-gray-900 shadow overflow-hidden sm:rounded-lg">
+            <ul className="divide-y divide-gray-200 dark:divide-gray-800">
                 {packages.map((pkg) => (
-                    <li key={pkg.id} className="px-2 py-4 hover:bg-gray-50">
+                    <li key={pkg.id} className="px-2 py-4 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors">
                         <div className="flex items-center justify-between">
                             <div className="flex-1 min-w-0">
                                 <div className="flex items-center space-x-3 space-x-reverse">
@@ -44,10 +44,10 @@ export default function PackageList({ packages, onEdit, onDelete, isLoading }: P
                                         />
                                     )}
                                     <div>
-                                        <p className="text-sm font-medium text-indigo-600 truncate px-2">
+                                        <p className="text-sm font-medium text-indigo-600 dark:text-indigo-400 truncate px-2">
                                             {pkg.title || 'بدون عنوان'}
                                         </p>
-                                        <p className="text-sm text-gray-500 px-2">
+                                        <p className="text-sm text-gray-500 dark:text-gray-400 px-2">
                                             {pkg.name || 'بدون نام'}
                                         </p>
                                     </div>
@@ -57,7 +57,7 @@ export default function PackageList({ packages, onEdit, onDelete, isLoading }: P
 
 
                                     </div>
-                                    <p className="text-xs text-gray-500 mt-1 sm:mt-0">
+                                    <p className="text-xs text-gray-500 dark:text-gray-400 mt-1 sm:mt-0">
                                         آخرین به‌روزرسانی: {formatDate(pkg.updated_at)}
                                     </p>
                                 </div>
@@ -65,13 +65,13 @@ export default function PackageList({ packages, onEdit, onDelete, isLoading }: P
                             <div className="mr-4 flex-shrink-0 flex space-x-2 space-x-reverse">
                                 <button
                                     onClick={() => onEdit(pkg)}
-                                    className="text-indigo-600 hover:text-indigo-900 p-2 rounded-full hover:bg-indigo-50"
+                                    className="text-indigo-600 dark:text-indigo-400 hover:text-indigo-900 p-2 rounded-full hover:bg-indigo-50 dark:hover:bg-indigo-900/40 transition-colors"
                                 >
                                     <PencilIcon className="h-5 w-5" />
                                 </button>
                                 <button
                                     onClick={() => onDelete(pkg)}
-                                    className="text-red-600 hover:text-red-900 p-2 rounded-full hover:bg-red-50"
+                                    className="text-red-600 dark:text-red-400 hover:text-red-900 p-2 rounded-full hover:bg-red-50 dark:hover:bg-red-900/20 transition-colors"
                                 >
                                     <TrashIcon className="h-5 w-5" />
                                 </button>
diff --git a/components/admin/products/ProductForm.tsx b/components/admin/products/ProductForm.tsx
index a220ef3..6893cef 100644
--- a/components/admin/products/ProductForm.tsx
+++ b/components/admin/products/ProductForm.tsx
@@ -64,9 +64,9 @@ export default function ProductForm({ product, packageName, onSubmit, onCancel,
     };
 
     return (
-        <form onSubmit={handleSubmit} className="space-y-6 bg-white p-6 rounded-lg shadow">
+        <form onSubmit={handleSubmit} className="space-y-6 bg-white dark:bg-gray-900 p-6 rounded-lg shadow">
             <div>
-                <h3 className="text-lg font-medium text-gray-900 mb-4">
+                <h3 className="text-lg font-medium text-gray-900 dark:text-gray-100 mb-4">
                     {product ? 'ویرایش محصول' : 'ایجاد محصول جدید'} برای پکیج {packageName}
                 </h3>
             </div>
@@ -74,7 +74,7 @@ export default function ProductForm({ product, packageName, onSubmit, onCancel,
             <div className="grid grid-cols-1 gap-6 md:grid-cols-2">
                 {/* Title */}
                 <div>
-                    <label htmlFor="title" className="block text-sm font-medium text-gray-700 mb-1">
+                    <label htmlFor="title" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                         عنوان <span className="text-red-500">*</span>
                     </label>
                     <input
@@ -84,14 +84,14 @@ export default function ProductForm({ product, packageName, onSubmit, onCancel,
                         required
                         value={formData.title || ''}
                         onChange={handleInputChange}
-                        className="block w-full px-3 py-2 text-slate-900 border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
+                        className="block w-full px-3 py-2 text-slate-900 dark:text-gray-100 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm dark:bg-gray-800 dark:placeholder-gray-500 transition-colors"
                         placeholder="مثال: اشتراک ماهانه"
                     />
                 </div>
 
                 {/* Price */}
                 <div>
-                    <label htmlFor="price" className="block text-sm font-medium text-gray-700 mb-1">
+                    <label htmlFor="price" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                         قیمت (تومان) <span className="text-red-500">*</span>
                     </label>
                     <input
@@ -102,14 +102,14 @@ export default function ProductForm({ product, packageName, onSubmit, onCancel,
                         min="0"
                         value={formData.price || ''}
                         onChange={handleInputChange}
-                        className="block w-full px-3 py-2 text-slate-900 border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
+                        className="block w-full px-3 py-2 text-slate-900 dark:text-gray-100 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm dark:bg-gray-800 dark:placeholder-gray-500 transition-colors"
                         placeholder="مثال: 60000"
                     />
                 </div>
 
                 {/* Type */}
                 <div>
-                    <label htmlFor="type" className="block text-sm font-medium text-gray-700 mb-1">
+                    <label htmlFor="type" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                         نوع اشتراک <span className="text-red-500">*</span>
                     </label>
                     <select
@@ -118,7 +118,7 @@ export default function ProductForm({ product, packageName, onSubmit, onCancel,
                         required
                         value={formData.type || 4}
                         onChange={handleInputChange}
-                        className="block w-full px-3 py-2 text-slate-900 border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
+                        className="block w-full px-3 py-2 text-slate-900 dark:text-gray-100 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm dark:bg-gray-800 dark:placeholder-gray-500 transition-colors"
                     >
                         {Object.entries(PRODUCT_TYPES).map(([value, label]) => (
                             <option key={value} value={value}>
@@ -131,7 +131,7 @@ export default function ProductForm({ product, packageName, onSubmit, onCancel,
 
             {/* Descriptions */}
             <div>
-                <label className="block text-sm font-medium text-gray-700 mb-1">
+                <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                     ویژگی‌ها
                 </label>
                 <div className="flex space-x-2 space-x-reverse">
@@ -139,7 +139,7 @@ export default function ProductForm({ product, packageName, onSubmit, onCancel,
                         type="text"
                         value={newDescription}
                         onChange={(e) => setNewDescription(e.target.value)}
-                        className="flex-1 px-3 py-2 text-slate-900 border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
+                        className="flex-1 px-3 py-2 text-slate-900 dark:text-gray-100 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm dark:bg-gray-800 dark:placeholder-gray-500 transition-colors"
                         placeholder="ویژگی جدید را وارد کنید"
                         onKeyPress={(e) => {
                             if (e.key === 'Enter') {
@@ -151,7 +151,7 @@ export default function ProductForm({ product, packageName, onSubmit, onCancel,
                     <button
                         type="button"
                         onClick={handleAddDescription}
-                        className="inline-flex items-center px-3 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
+                        className="inline-flex items-center px-3 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 dark:focus:ring-offset-gray-900 focus:ring-indigo-500 transition-colors"
                     >
                         <PlusIcon className="h-5 w-5" />
                     </button>
@@ -161,12 +161,12 @@ export default function ProductForm({ product, packageName, onSubmit, onCancel,
                 {descriptions.length > 0 && (
                     <ul className="mt-3 space-y-2">
                         {descriptions.map((desc, index) => (
-                            <li key={index} className="flex items-center justify-between bg-gray-50 px-3 py-2 rounded-md">
-                                <span className="text-sm text-gray-700">{desc}</span>
+                            <li key={index} className="flex items-center justify-between bg-gray-50 dark:bg-gray-800/60 px-3 py-2 rounded-md">
+                                <span className="text-sm text-gray-700 dark:text-gray-300">{desc}</span>
                                 <button
                                     type="button"
                                     onClick={() => handleRemoveDescription(index)}
-                                    className="text-red-600 hover:text-red-900"
+                                    className="text-red-600 dark:text-red-400 hover:text-red-900 transition-colors"
                                 >
                                     <XMarkIcon className="h-5 w-5" />
                                 </button>
@@ -177,18 +177,18 @@ export default function ProductForm({ product, packageName, onSubmit, onCancel,
             </div>
 
             {/* Form Actions */}
-            <div className="flex justify-end space-x-3 space-x-reverse pt-4 border-t">
+            <div className="flex justify-end space-x-3 space-x-reverse pt-4 border-t dark:border-gray-800">
                 <button
                     type="button"
                     onClick={onCancel}
-                    className="px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
+                    className="px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm text-sm font-medium text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 dark:focus:ring-offset-gray-900 focus:ring-indigo-500 transition-colors"
                 >
                     انصراف
                 </button>
                 <button
                     type="submit"
                     disabled={isLoading}
-                    className="px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 disabled:opacity-50"
+                    className="px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 dark:focus:ring-offset-gray-900 focus:ring-indigo-500 disabled:opacity-50 transition-colors"
                 >
                     {isLoading ? 'در حال ذخیره...' : product ? 'به‌روزرسانی' : 'ایجاد'}
                 </button>
diff --git a/components/admin/products/ProductList.tsx b/components/admin/products/ProductList.tsx
index 9798de5..252b448 100644
--- a/components/admin/products/ProductList.tsx
+++ b/components/admin/products/ProductList.tsx
@@ -24,40 +24,40 @@ export default function ProductList({ products, packageName, onEdit, onDelete, i
 
     if (!products || products.length === 0) {
         return (
-            <div className="text-center py-12 bg-white rounded-lg shadow">
-                <p className="text-gray-500">هیچ محصولی برای این پکیج یافت نشد</p>
+            <div className="text-center py-12 bg-white dark:bg-gray-900 rounded-lg shadow">
+                <p className="text-gray-500 dark:text-gray-400">هیچ محصولی برای این پکیج یافت نشد</p>
             </div>
         );
     }
 
     return (
-        <div className="bg-white shadow overflow-hidden sm:rounded-lg">
+        <div className="bg-white dark:bg-gray-900 shadow overflow-hidden sm:rounded-lg">
             <div className="px-4 py-5 sm:px-6">
-                <h3 className="text-lg leading-6 font-medium text-gray-900">
+                <h3 className="text-lg leading-6 font-medium text-gray-900 dark:text-gray-100">
                     محصولات پکیج {packageName}
                 </h3>
             </div>
-            <ul className="divide-y divide-gray-200">
+            <ul className="divide-y divide-gray-200 dark:divide-gray-800">
                 {products.map((product) => (
-                    <li key={product.id} className="px-6 py-4 hover:bg-gray-50">
+                    <li key={product.id} className="px-6 py-4 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors">
                         <div className="flex items-center justify-between">
                             <div className="flex-1 min-w-0">
                                 <div className="flex items-center justify-between">
-                                    <p className="text-sm font-medium text-indigo-600 truncate">
+                                    <p className="text-sm font-medium text-indigo-600 dark:text-indigo-400 truncate">
                                         {product.title || 'بدون عنوان'}
                                     </p>
-                                    <span className="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">
+                                    <span className="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300">
                                         {getProductTypeLabel(product.type)}
                                     </span>
                                 </div>
                                 <div className="mt-2">
-                                    <p className="text-sm text-gray-900">
+                                    <p className="text-sm text-gray-900 dark:text-gray-100">
                                         قیمت: {formatPrice(product.price)} تومان
                                     </p>
                                     {product.descriptions && product.descriptions.length > 0 && (
                                         <div className="mt-2">
-                                            <p className="text-xs text-gray-500 mb-1">ویژگی‌ها:</p>
-                                            <ul className="list-disc list-inside text-xs text-gray-600 pr-4">
+                                            <p className="text-xs text-gray-500 dark:text-gray-400 mb-1">ویژگی‌ها:</p>
+                                            <ul className="list-disc list-inside text-xs text-gray-600 dark:text-gray-400 pr-4">
                                                 {product.descriptions.map((desc, index) => (
                                                     <li key={index}>{desc}</li>
                                                 ))}
@@ -65,20 +65,20 @@ export default function ProductList({ products, packageName, onEdit, onDelete, i
                                         </div>
                                     )}
                                 </div>
-                                <div className="mt-2 text-xs text-gray-500">
+                                <div className="mt-2 text-xs text-gray-500 dark:text-gray-400">
                                     آخرین به‌روزرسانی: {formatDate(product.updated_at)}
                                 </div>
                             </div>
                             <div className="mr-4 flex-shrink-0 flex space-x-2 space-x-reverse">
                                 <button
                                     onClick={() => onEdit(product)}
-                                    className="text-indigo-600 hover:text-indigo-900 p-2 rounded-full hover:bg-indigo-50"
+                                    className="text-indigo-600 dark:text-indigo-400 hover:text-indigo-900 p-2 rounded-full hover:bg-indigo-50 dark:hover:bg-indigo-900/40 transition-colors"
                                 >
                                     <PencilIcon className="h-5 w-5" />
                                 </button>
                                 <button
                                     onClick={() => onDelete(product)}
-                                    className="text-red-600 hover:text-red-900 p-2 rounded-full hover:bg-red-50"
+                                    className="text-red-600 dark:text-red-400 hover:text-red-900 p-2 rounded-full hover:bg-red-50 dark:hover:bg-red-900/40 transition-colors"
                                 >
                                     <TrashIcon className="h-5 w-5" />
                                 </button>
diff --git a/components/admin/promotions/PromotionForm.tsx b/components/admin/promotions/PromotionForm.tsx
index 7a31171..a5238c2 100644
--- a/components/admin/promotions/PromotionForm.tsx
+++ b/components/admin/promotions/PromotionForm.tsx
@@ -122,9 +122,9 @@ export default function PromotionForm({ promotion, onSubmit, onCancel, isLoading
     };
 
     return (
-        <form onSubmit={handleSubmit} className="space-y-6 bg-white p-6 rounded-lg shadow">
+        <form onSubmit={handleSubmit} className="space-y-6 bg-white dark:bg-gray-900 p-6 rounded-lg shadow">
             <div>
-                <h3 className="text-lg font-medium text-gray-900 mb-4">
+                <h3 className="text-lg font-medium text-gray-900 dark:text-gray-100 mb-4">
                     {promotion ? 'ویرایش تبلیغ' : 'ایجاد تبلیغ جدید'}
                 </h3>
             </div>
@@ -132,7 +132,7 @@ export default function PromotionForm({ promotion, onSubmit, onCancel, isLoading
             <div className="grid grid-cols-1 gap-6 md:grid-cols-2">
                 {/* Type */}
                 <div>
-                    <label htmlFor="type" className="block text-sm font-medium text-gray-700 mb-1">
+                    <label htmlFor="type" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                         نوع <span className="text-red-500">*</span>
                     </label>
                     <select
@@ -141,7 +141,7 @@ export default function PromotionForm({ promotion, onSubmit, onCancel, isLoading
                         required
                         value={formData.type || 'slider'}
                         onChange={handleInputChange}
-                        className="block w-full px-3 py-2 text-slate-900 border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
+                        className="block w-full px-3 py-2 text-slate-900 dark:text-gray-100 border border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:placeholder-gray-500 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm transition-colors"
                     >
                         {Object.entries(PROMOTION_TYPES).map(([value, label]) => (
                             <option key={value} value={value}>
@@ -153,7 +153,7 @@ export default function PromotionForm({ promotion, onSubmit, onCancel, isLoading
 
                 {/* Title */}
                 <div>
-                    <label htmlFor="title" className="block text-sm font-medium text-gray-700 mb-1">
+                    <label htmlFor="title" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                         عنوان
                     </label>
                     <input
@@ -162,14 +162,14 @@ export default function PromotionForm({ promotion, onSubmit, onCancel, isLoading
                         name="title"
                         value={formData.title || ''}
                         onChange={handleInputChange}
-                        className="block w-full px-3 py-2 text-slate-900 border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
+                        className="block w-full px-3 py-2 text-slate-900 dark:text-gray-100 border border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:placeholder-gray-500 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm transition-colors"
                         placeholder="عنوان تبلیغ"
                     />
                 </div>
 
                 {/* Subtitle */}
                 <div className="md:col-span-2">
-                    <label htmlFor="subtitle" className="block text-sm font-medium text-gray-700 mb-1">
+                    <label htmlFor="subtitle" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                         زیرعنوان
                     </label>
                     <input
@@ -178,14 +178,14 @@ export default function PromotionForm({ promotion, onSubmit, onCancel, isLoading
                         name="subtitle"
                         value={formData.subtitle || ''}
                         onChange={handleInputChange}
-                        className="block w-full px-3 py-2 text-slate-900 border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
+                        className="block w-full px-3 py-2 text-slate-900 dark:text-gray-100 border border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:placeholder-gray-500 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm transition-colors"
                         placeholder="زیرعنوان تبلیغ"
                     />
                 </div>
 
                 {/* Action Text */}
                 <div>
-                    <label htmlFor="action_text" className="block text-sm font-medium text-gray-700 mb-1">
+                    <label htmlFor="action_text" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                         متن دکمه
                     </label>
                     <input
@@ -194,14 +194,14 @@ export default function PromotionForm({ promotion, onSubmit, onCancel, isLoading
                         name="action_text"
                         value={formData.action_text || ''}
                         onChange={handleInputChange}
-                        className="block w-full px-3 py-2 text-slate-900 border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
+                        className="block w-full px-3 py-2 text-slate-900 dark:text-gray-100 border border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:placeholder-gray-500 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm transition-colors"
                         placeholder="مثال: همین حالا نصب کن"
                     />
                 </div>
 
                 {/* Priority */}
                 <div>
-                    <label htmlFor="priority" className="block text-sm font-medium text-gray-700 mb-1">
+                    <label htmlFor="priority" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                         اولویت
                     </label>
                     <input
@@ -211,14 +211,14 @@ export default function PromotionForm({ promotion, onSubmit, onCancel, isLoading
                         min="0"
                         value={formData.priority || 0}
                         onChange={handleNumberChange}
-                        className="block w-full px-3 py-2 text-slate-900 border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
+                        className="block w-full px-3 py-2 text-slate-900 dark:text-gray-100 border border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:placeholder-gray-500 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm transition-colors"
                         placeholder="عدد بالاتر = اولویت بیشتر"
                     />
                 </div>
 
                 {/* Start Date */}
                 <div>
-                    <label htmlFor="start_at" className="block text-sm font-medium text-gray-700 mb-1">
+                    <label htmlFor="start_at" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                         تاریخ شروع
                     </label>
                     <input
@@ -227,13 +227,13 @@ export default function PromotionForm({ promotion, onSubmit, onCancel, isLoading
                         name="start_at"
                         value={formData.start_at || ''}
                         onChange={handleInputChange}
-                        className="block w-full px-3 py-2 text-slate-900 border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
+                        className="block w-full px-3 py-2 text-slate-900 dark:text-gray-100 border border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:placeholder-gray-500 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm transition-colors"
                     />
                 </div>
 
                 {/* End Date */}
                 <div>
-                    <label htmlFor="end_at" className="block text-sm font-medium text-gray-700 mb-1">
+                    <label htmlFor="end_at" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                         تاریخ پایان
                     </label>
                     <input
@@ -242,18 +242,18 @@ export default function PromotionForm({ promotion, onSubmit, onCancel, isLoading
                         name="end_at"
                         value={formData.end_at || ''}
                         onChange={handleInputChange}
-                        className="block w-full px-3 py-2 text-slate-900 border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
+                        className="block w-full px-3 py-2 text-slate-900 dark:text-gray-100 border border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:placeholder-gray-500 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm transition-colors"
                     />
                 </div>
             </div>
 
             {/* URLs Section */}
-            <div className="border-t border-gray-200 pt-4">
-                <h4 className="text-md font-medium text-gray-900 mb-3">لینک‌ها</h4>
+            <div className="border-t border-gray-200 dark:border-gray-800 pt-4">
+                <h4 className="text-md font-medium text-gray-900 dark:text-gray-100 mb-3">لینک‌ها</h4>
                 <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
                     {/* Myket URL */}
                     <div>
-                        <label htmlFor="url_myket" className="block text-sm font-medium text-gray-700 mb-1">
+                        <label htmlFor="url_myket" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                             لینک مایکت
                         </label>
                         <input
@@ -262,14 +262,14 @@ export default function PromotionForm({ promotion, onSubmit, onCancel, isLoading
                             name="url_myket"
                             value={formData.url_myket || ''}
                             onChange={handleInputChange}
-                            className="block w-full px-3 py-2 text-slate-900 border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
+                            className="block w-full px-3 py-2 text-slate-900 dark:text-gray-100 border border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:placeholder-gray-500 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm transition-colors"
                             placeholder="https://myket.ir/app/..."
                         />
                     </div>
 
                     {/* Bazaar URL */}
                     <div>
-                        <label htmlFor="url_bazzar" className="block text-sm font-medium text-gray-700 mb-1">
+                        <label htmlFor="url_bazzar" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                             لینک بازار
                         </label>
                         <input
@@ -278,14 +278,14 @@ export default function PromotionForm({ promotion, onSubmit, onCancel, isLoading
                             name="url_bazzar"
                             value={formData.url_bazzar || ''}
                             onChange={handleInputChange}
-                            className="block w-full px-3 py-2 text-slate-900 border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
+                            className="block w-full px-3 py-2 text-slate-900 dark:text-gray-100 border border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:placeholder-gray-500 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm transition-colors"
                             placeholder="https://cafebazaar.ir/app/..."
                         />
                     </div>
 
                     {/* Google Play URL */}
                     <div>
-                        <label htmlFor="url_google_play" className="block text-sm font-medium text-gray-700 mb-1">
+                        <label htmlFor="url_google_play" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                             لینک گوگل‌پلی
                         </label>
                         <input
@@ -294,14 +294,14 @@ export default function PromotionForm({ promotion, onSubmit, onCancel, isLoading
                             name="url_google_play"
                             value={formData.url_google_play || ''}
                             onChange={handleInputChange}
-                            className="block w-full px-3 py-2 text-slate-900 border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
+                            className="block w-full px-3 py-2 text-slate-900 dark:text-gray-100 border border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:placeholder-gray-500 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm transition-colors"
                             placeholder="https://play.google.com/store/apps/..."
                         />
                     </div>
 
                     {/* Site URL */}
                     <div>
-                        <label htmlFor="url_site" className="block text-sm font-medium text-gray-700 mb-1">
+                        <label htmlFor="url_site" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                             لینک وبسایت
                         </label>
                         <input
@@ -310,7 +310,7 @@ export default function PromotionForm({ promotion, onSubmit, onCancel, isLoading
                             name="url_site"
                             value={formData.url_site || ''}
                             onChange={handleInputChange}
-                            className="block w-full px-3 py-2 text-slate-900 border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
+                            className="block w-full px-3 py-2 text-slate-900 dark:text-gray-100 border border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:placeholder-gray-500 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm transition-colors"
                             placeholder="https://example.com"
                         />
                     </div>
@@ -319,12 +319,12 @@ export default function PromotionForm({ promotion, onSubmit, onCancel, isLoading
 
             {/* Image Upload */}
             <div>
-                <label className="block text-sm font-medium text-gray-700 mb-1">
+                <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                     تصویر
                 </label>
                 <div className="flex items-center space-x-3 space-x-reverse">
-                    <label className="cursor-pointer flex items-center px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50">
-                        <PhotoIcon className="h-5 w-5 ml-2 text-gray-400" />
+                    <label className="cursor-pointer flex items-center px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm text-sm font-medium text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors">
+                        <PhotoIcon className="h-5 w-5 ml-2 text-gray-400 dark:text-gray-500" />
                         انتخاب تصویر
                         <input
                             type="file"
@@ -337,14 +337,14 @@ export default function PromotionForm({ promotion, onSubmit, onCancel, isLoading
                         <button
                             type="button"
                             onClick={removeImage}
-                            className="text-red-600 hover:text-red-900"
+                            className="text-red-600 dark:text-red-400 hover:text-red-900 dark:hover:text-red-300 transition-colors"
                         >
                             <XMarkIcon className="h-5 w-5" />
                         </button>
                     )}
                 </div>
                 {imagePreview && (
-                    <div className="mt-2 relative h-32 w-32 rounded-lg overflow-hidden border border-gray-200">
+                    <div className="mt-2 relative h-32 w-32 rounded-lg overflow-hidden border border-gray-200 dark:border-gray-800">
                         <img
                             src={imagePreview}
                             alt="Preview"
@@ -352,7 +352,7 @@ export default function PromotionForm({ promotion, onSubmit, onCancel, isLoading
                         />
                     </div>
                 )}
-                <p className="mt-1 text-xs text-gray-500">
+                <p className="mt-1 text-xs text-gray-500 dark:text-gray-400">
                     حداکثر حجم: ۲ مگابایت
                 </p>
             </div>
@@ -365,27 +365,27 @@ export default function PromotionForm({ promotion, onSubmit, onCancel, isLoading
                         id="is_active"
                         checked={isActive}
                         onChange={(e) => setIsActive(e.target.checked)}
-                        className="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded"
+                        className="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 dark:border-gray-600 dark:bg-gray-800 rounded"
                     />
-                    <label htmlFor="is_active" className="mr-2 block text-sm text-gray-900">
+                    <label htmlFor="is_active" className="mr-2 block text-sm text-gray-900 dark:text-gray-100">
                         فعال
                     </label>
                 </div>
             )}
 
             {/* Form Actions */}
-            <div className="flex justify-end space-x-3 space-x-reverse pt-4 border-t">
+            <div className="flex justify-end space-x-3 space-x-reverse pt-4 border-t dark:border-gray-800">
                 <button
                     type="button"
                     onClick={onCancel}
-                    className="px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
+                    className="px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm text-sm font-medium text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 dark:focus:ring-offset-gray-900 focus:ring-indigo-500 transition-colors"
                 >
                     انصراف
                 </button>
                 <button
                     type="submit"
                     disabled={isLoading}
-                    className="px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 disabled:opacity-50"
+                    className="px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 dark:focus:ring-offset-gray-900 focus:ring-indigo-500 disabled:opacity-50 transition-colors"
                 >
                     {isLoading ? 'در حال ذخیره...' : promotion ? 'به‌روزرسانی' : 'ایجاد'}
                 </button>
diff --git a/components/admin/promotions/PromotionList.tsx b/components/admin/promotions/PromotionList.tsx
index cd36982..eb0a47f 100644
--- a/components/admin/promotions/PromotionList.tsx
+++ b/components/admin/promotions/PromotionList.tsx
@@ -28,8 +28,8 @@ export default function PromotionList({ promotions, onEdit, onDelete, onToggleAc
 
     if (!promotions || promotions.length === 0) {
         return (
-            <div className="text-center py-12 bg-white rounded-lg shadow">
-                <p className="text-gray-500">هیچ تبلیغاتی یافت نشد</p>
+            <div className="text-center py-12 bg-white dark:bg-gray-900 rounded-lg shadow">
+                <p className="text-gray-500 dark:text-gray-400">هیچ تبلیغاتی یافت نشد</p>
             </div>
         );
     }
@@ -49,22 +49,22 @@ export default function PromotionList({ promotions, onEdit, onDelete, onToggleAc
     };
 
     return (
-        <div className="bg-white shadow overflow-hidden sm:rounded-lg">
+        <div className="bg-white dark:bg-gray-900 shadow overflow-hidden sm:rounded-lg">
             <div className="px-4 py-5 sm:px-6">
-                <h3 className="text-lg leading-6 font-medium text-gray-900">
+                <h3 className="text-lg leading-6 font-medium text-gray-900 dark:text-gray-100">
                     لیست تبلیغات
                 </h3>
             </div>
-            <ul className="divide-y divide-gray-200">
+            <ul className="divide-y divide-gray-200 dark:divide-gray-800">
                 {sortedPromotions.map((promotion) => (
-                    <li key={promotion.id} className="px-6 py-4 hover:bg-gray-50">
+                    <li key={promotion.id} className="px-6 py-4 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors">
                         <div className="flex items-start justify-between">
                             <div className="flex-1 min-w-0">
                                 <div className="flex items-start space-x-4 space-x-reverse">
                                     {/* Promotion Image - Using unoptimized Image component */}
                                     {promotion.image_url && !imageErrors[promotion.id] && (
                                         <div className="flex-shrink-0">
-                                            <div className="relative h-20 w-20 rounded-lg overflow-hidden border border-gray-200">
+                                            <div className="relative h-20 w-20 rounded-lg overflow-hidden border border-gray-200 dark:border-gray-800">
                                                 <Image
                                                     src={promotion.image_url}
                                                     alt={promotion.title || 'Promotion'}
@@ -81,18 +81,18 @@ export default function PromotionList({ promotions, onEdit, onDelete, onToggleAc
                                     <div className="flex-1">
                                         <div className="flex items-center justify-between">
                                             <div className="flex items-center space-x-2 space-x-reverse">
-                                                <p className="text-sm font-medium text-indigo-600">
+                                                <p className="text-sm font-medium text-indigo-600 dark:text-indigo-400">
                                                     {promotion.title || 'بدون عنوان'}
                                                 </p>
-                                                <span className="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">
+                                                <span className="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300">
                                                     {getPromotionTypeLabel(promotion.type)}
                                                 </span>
                                                 {promotion.is_active ? (
-                                                    <span className="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
+                                                    <span className="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300">
                                                         فعال
                                                     </span>
                                                 ) : (
-                                                    <span className="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800">
+                                                    <span className="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300">
                                                         غیرفعال
                                                     </span>
                                                 )}
@@ -100,32 +100,32 @@ export default function PromotionList({ promotions, onEdit, onDelete, onToggleAc
                                         </div>
 
                                         {promotion.subtitle && (
-                                            <p className="mt-1 text-sm text-gray-600">
+                                            <p className="mt-1 text-sm text-gray-600 dark:text-gray-400">
                                                 {promotion.subtitle}
                                             </p>
                                         )}
 
                                         {promotion.action_text && (
-                                            <p className="mt-1 text-xs text-gray-500">
+                                            <p className="mt-1 text-xs text-gray-500 dark:text-gray-400">
                                                 متن دکمه: {promotion.action_text}
                                             </p>
                                         )}
 
                                         <div className="mt-2 grid grid-cols-1 gap-2 sm:grid-cols-2 lg:grid-cols-4">
                                             {promotion.priority && (
-                                                <div className="text-xs text-gray-500">
+                                                <div className="text-xs text-gray-500 dark:text-gray-400">
                                                     <span className="font-medium">اولویت:</span> {promotion.priority}
                                                 </div>
                                             )}
                                             
                                             {promotion.start_at && (
-                                                <div className="text-xs text-gray-500">
+                                                <div className="text-xs text-gray-500 dark:text-gray-400">
                                                     <span className="font-medium">شروع:</span> {formatDate(promotion.start_at)}
                                                 </div>
                                             )}
                                             
                                             {promotion.end_at && (
-                                                <div className="text-xs text-gray-500">
+                                                <div className="text-xs text-gray-500 dark:text-gray-400">
                                                     <span className="font-medium">پایان:</span> {formatDate(promotion.end_at)}
                                                 </div>
                                             )}
@@ -134,28 +134,28 @@ export default function PromotionList({ promotions, onEdit, onDelete, onToggleAc
                                         {/* URLs */}
                                         <div className="mt-2 space-y-1">
                                             {promotion.url_site && (
-                                                <div className="text-xs text-gray-500 truncate">
+                                                <div className="text-xs text-gray-500 dark:text-gray-400 truncate">
                                                     <span className="font-medium">وبسایت:</span> {promotion.url_site}
                                                 </div>
                                             )}
                                             {promotion.url_myket && (
-                                                <div className="text-xs text-gray-500 truncate">
+                                                <div className="text-xs text-gray-500 dark:text-gray-400 truncate">
                                                     <span className="font-medium">مایکت:</span> {promotion.url_myket}
                                                 </div>
                                             )}
                                             {promotion.url_bazzar && (
-                                                <div className="text-xs text-gray-500 truncate">
+                                                <div className="text-xs text-gray-500 dark:text-gray-400 truncate">
                                                     <span className="font-medium">بازار:</span> {promotion.url_bazzar}
                                                 </div>
                                             )}
                                             {promotion.url_google_play && (
-                                                <div className="text-xs text-gray-500 truncate">
+                                                <div className="text-xs text-gray-500 dark:text-gray-400 truncate">
                                                     <span className="font-medium">گوگل‌پلی:</span> {promotion.url_google_play}
                                                 </div>
                                             )}
                                         </div>
 
-                                        <div className="mt-2 text-xs text-gray-400">
+                                        <div className="mt-2 text-xs text-gray-400 dark:text-gray-500">
                                             آخرین به‌روزرسانی: {formatDate(promotion.updated_at)}
                                         </div>
                                     </div>
@@ -166,8 +166,8 @@ export default function PromotionList({ promotions, onEdit, onDelete, onToggleAc
                             <div className="mr-4 flex-shrink-0 flex flex-col space-y-2">
                                 <button
                                     onClick={() => onToggleActive(promotion)}
-                                    className={`p-2 rounded-full hover:bg-gray-100 ${
-                                        promotion.is_active ? 'text-green-600' : 'text-gray-400'
+                                    className={`p-2 rounded-full hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors ${
+                                        promotion.is_active ? 'text-green-600 dark:text-green-400' : 'text-gray-400 dark:text-gray-500'
                                     }`}
                                     title={promotion.is_active ? 'غیرفعال کردن' : 'فعال کردن'}
                                 >
@@ -179,13 +179,13 @@ export default function PromotionList({ promotions, onEdit, onDelete, onToggleAc
                                 </button>
                                 <button
                                     onClick={() => onEdit(promotion)}
-                                    className="text-indigo-600 hover:text-indigo-900 p-2 rounded-full hover:bg-indigo-50"
+                                    className="text-indigo-600 dark:text-indigo-400 hover:text-indigo-900 dark:hover:text-indigo-300 p-2 rounded-full hover:bg-indigo-50 dark:hover:bg-indigo-900/40 transition-colors"
                                 >
                                     <PencilIcon className="h-5 w-5" />
                                 </button>
                                 <button
                                     onClick={() => onDelete(promotion)}
-                                    className="text-red-600 hover:text-red-900 p-2 rounded-full hover:bg-red-50"
+                                    className="text-red-600 dark:text-red-400 hover:text-red-900 dark:hover:text-red-300 p-2 rounded-full hover:bg-red-50 dark:hover:bg-red-900/40 transition-colors"
                                 >
                                     <TrashIcon className="h-5 w-5" />
                                 </button>
diff --git a/components/admin/referral/ReferralList.tsx b/components/admin/referral/ReferralList.tsx
index 8e13b15..fd03b33 100644
--- a/components/admin/referral/ReferralList.tsx
+++ b/components/admin/referral/ReferralList.tsx
@@ -20,12 +20,12 @@ export default function ReferralList({
 }: ReferralListProps) {
     if (users.length === 0) {
         return (
-            <div className="text-center py-12 bg-white rounded-lg shadow">
-                <GiftIcon className="h-10 w-10 text-gray-300 mx-auto mb-3" />
-                <p className="text-gray-500">
+            <div className="text-center py-12 bg-white dark:bg-gray-900 rounded-xl shadow-sm ring-1 ring-gray-200 dark:ring-gray-800">
+                <GiftIcon className="h-10 w-10 text-gray-300 dark:text-gray-600 mx-auto mb-3" />
+                <p className="text-gray-500 dark:text-gray-400">
                     در حال حاضر هیچ کاربری واجد شرایط دریافت پاداش معرفی نیست.
                 </p>
-                <p className="text-sm text-gray-400 mt-1">
+                <p className="text-sm text-gray-400 dark:text-gray-500 mt-1">
                     کاربران پس از {subscriptionTarget} دعوت موفق در این لیست نمایش داده می‌شوند.
                 </p>
             </div>
@@ -33,41 +33,41 @@ export default function ReferralList({
     }
 
     return (
-        <div className="bg-white shadow overflow-hidden sm:rounded-lg">
+        <div className="bg-white dark:bg-gray-900 shadow-sm ring-1 ring-gray-200 dark:ring-gray-800 overflow-hidden sm:rounded-xl">
             <div className="px-4 py-5 sm:px-6 flex items-center justify-between">
-                <h3 className="text-lg leading-6 font-medium text-gray-900">
+                <h3 className="text-lg leading-6 font-medium text-gray-900 dark:text-gray-100">
                     کاربران واجد شرایط پاداش
                 </h3>
-                <span className="px-3 py-1 text-xs font-medium rounded-full bg-indigo-100 text-indigo-800">
+                <span className="px-3 py-1 text-xs font-medium rounded-full bg-indigo-100 text-indigo-800 dark:bg-indigo-900/30 dark:text-indigo-300">
                     هدف: {subscriptionTarget} دعوت موفق
                 </span>
             </div>
-            <ul className="divide-y divide-gray-200 border-t border-gray-200">
+            <ul className="divide-y divide-gray-200 dark:divide-gray-800 border-t border-gray-200 dark:border-gray-800">
                 {users.map((user) => (
-                    <li key={user.id} className="px-4 py-4 sm:px-6">
+                    <li key={user.id} className="px-4 py-4 sm:px-6 hover:bg-gray-50 dark:hover:bg-gray-800/60 transition-colors">
                         <div className="flex items-center justify-between flex-wrap gap-3">
                             <div className="flex-1 min-w-0">
                                 <div className="flex items-center gap-2">
-                                    <UserIcon className="h-4 w-4 text-gray-400" />
-                                    <p className="text-sm font-medium text-gray-900 truncate">
+                                    <UserIcon className="h-4 w-4 text-gray-400 dark:text-gray-500" />
+                                    <p className="text-sm font-medium text-gray-900 dark:text-gray-100 truncate">
                                         {user.name || 'بدون نام'}
                                     </p>
-                                    <span className="px-2 py-0.5 text-xs font-semibold rounded-full bg-green-100 text-green-800">
+                                    <span className="px-2 py-0.5 text-xs font-semibold rounded-full bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300">
                                         {user.successful_invites} دعوت موفق
                                     </span>
                                 </div>
-                                <div className="mt-2 flex flex-wrap gap-x-6 gap-y-1 text-sm text-gray-500">
+                                <div className="mt-2 flex flex-wrap gap-x-6 gap-y-1 text-sm text-gray-500 dark:text-gray-400">
                                     <span className="flex items-center">
-                                        <EnvelopeIcon className="h-4 w-4 ml-1 text-gray-400" />
+                                        <EnvelopeIcon className="h-4 w-4 ml-1 text-gray-400 dark:text-gray-500" />
                                         {user.email || 'ایمیل ثبت نشده'}
                                     </span>
                                     <span className="flex items-center">
-                                        <PhoneIcon className="h-4 w-4 ml-1 text-gray-400" />
+                                        <PhoneIcon className="h-4 w-4 ml-1 text-gray-400 dark:text-gray-500" />
                                         {user.mobile || 'شماره ثبت نشده'}
                                     </span>
                                     {user.referral_code && (
                                         <span className="flex items-center">
-                                            <TicketIcon className="h-4 w-4 ml-1 text-gray-400" />
+                                            <TicketIcon className="h-4 w-4 ml-1 text-gray-400 dark:text-gray-500" />
                                             کد معرف: {user.referral_code}
                                         </span>
                                     )}
@@ -76,7 +76,7 @@ export default function ReferralList({
                             <button
                                 onClick={() => onFulfill(user)}
                                 disabled={isLoading}
-                                className="inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-green-600 hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 disabled:opacity-50 disabled:cursor-not-allowed"
+                                className="inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-green-600 hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 dark:focus:ring-offset-gray-900 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
                             >
                                 <GiftIcon className="h-5 w-5 ml-2" />
                                 {fulfillingId === user.id ? 'در حال اعطا...' : 'اعطای اشتراک رایگان'}
diff --git a/components/admin/reminders/ReminderForm.tsx b/components/admin/reminders/ReminderForm.tsx
index 4e909ae..f1b2514 100644
--- a/components/admin/reminders/ReminderForm.tsx
+++ b/components/admin/reminders/ReminderForm.tsx
@@ -106,9 +106,9 @@ export default function ReminderForm({ reminder, packageName, onSubmit, onCancel
     };
 
     return (
-        <form onSubmit={handleSubmit} className="space-y-6 bg-white p-6 rounded-lg shadow">
+        <form onSubmit={handleSubmit} className="space-y-6 bg-white dark:bg-gray-900 p-6 rounded-lg shadow transition-colors">
             <div>
-                <h3 className="text-lg font-medium text-gray-900 mb-4">
+                <h3 className="text-lg font-medium text-gray-900 dark:text-gray-100 mb-4">
                     {reminder ? 'ویرایش یادآوری' : 'ایجاد یادآوری جدید'} برای پکیج {packageName}
                 </h3>
             </div>
@@ -116,7 +116,7 @@ export default function ReminderForm({ reminder, packageName, onSubmit, onCancel
             <div className="grid grid-cols-1 gap-6 md:grid-cols-2">
                 {/* Title */}
                 <div className="md:col-span-2">
-                    <label htmlFor="title" className="block text-sm font-medium text-gray-700 mb-1">
+                    <label htmlFor="title" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                         عنوان <span className="text-red-500">*</span>
                     </label>
                     <input
@@ -126,14 +126,14 @@ export default function ReminderForm({ reminder, packageName, onSubmit, onCancel
                         required
                         value={formData.title || ''}
                         onChange={handleInputChange}
-                        className="block w-full px-3 py-2 text-slate-900 border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
+                        className="block w-full px-3 py-2 text-slate-900 dark:text-gray-100 border border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:placeholder-gray-500 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm transition-colors"
                         placeholder="مثال: یادآوری روزانه"
                     />
                 </div>
 
                 {/* Type */}
                 <div>
-                    <label htmlFor="type" className="block text-sm font-medium text-gray-700 mb-1">
+                    <label htmlFor="type" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                         نوع <span className="text-red-500">*</span>
                     </label>
                     <select
@@ -142,7 +142,7 @@ export default function ReminderForm({ reminder, packageName, onSubmit, onCancel
                         required
                         value={formData.type || 'reminder'}
                         onChange={handleInputChange}
-                        className="block w-full px-3 py-2 text-slate-900 border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
+                        className="block w-full px-3 py-2 text-slate-900 dark:text-gray-100 border border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:placeholder-gray-500 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm transition-colors"
                     >
                         {Object.entries(REMINDER_TYPES).map(([value, label]) => (
                             <option key={value} value={value}>
@@ -154,7 +154,7 @@ export default function ReminderForm({ reminder, packageName, onSubmit, onCancel
 
                 {/* Time */}
                 <div>
-                    <label htmlFor="time" className="block text-sm font-medium text-gray-700 mb-1">
+                    <label htmlFor="time" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                         زمان <span className="text-red-500">*</span>
                     </label>
                     <input
@@ -164,7 +164,7 @@ export default function ReminderForm({ reminder, packageName, onSubmit, onCancel
                         required
                         value={formData.time || ''}
                         onChange={handleInputChange}
-                        className="block w-full px-3 py-2 text-slate-900 border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
+                        className="block w-full px-3 py-2 text-slate-900 dark:text-gray-100 border border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:placeholder-gray-500 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm transition-colors"
                     />
                 </div>
 
@@ -177,9 +177,9 @@ export default function ReminderForm({ reminder, packageName, onSubmit, onCancel
                             name="repeatable"
                             checked={formData.repeatable || false}
                             onChange={handleInputChange}
-                            className="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded"
+                            className="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 dark:border-gray-600 dark:bg-gray-800 rounded"
                         />
-                        <label htmlFor="repeatable" className="mr-2 block text-sm text-gray-900">
+                        <label htmlFor="repeatable" className="mr-2 block text-sm text-gray-900 dark:text-gray-100">
                             قابل تکرار
                         </label>
                     </div>
@@ -188,7 +188,7 @@ export default function ReminderForm({ reminder, packageName, onSubmit, onCancel
                 {/* Repeat Days */}
                 {formData.repeatable && (
                     <div>
-                        <label htmlFor="repeat_days" className="block text-sm font-medium text-gray-700 mb-1">
+                        <label htmlFor="repeat_days" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                             فاصله تکرار (روز)
                         </label>
                         <input
@@ -198,7 +198,7 @@ export default function ReminderForm({ reminder, packageName, onSubmit, onCancel
                             min="1"
                             value={formData.repeat_days || ''}
                             onChange={handleNumberChange}
-                            className="block w-full px-3 py-2 text-slate-900 border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
+                            className="block w-full px-3 py-2 text-slate-900 dark:text-gray-100 border border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:placeholder-gray-500 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm transition-colors"
                             placeholder="مثال: 7"
                         />
                     </div>
@@ -207,7 +207,7 @@ export default function ReminderForm({ reminder, packageName, onSubmit, onCancel
 
             {/* Description */}
             <div>
-                <label htmlFor="description" className="block text-sm font-medium text-gray-700 mb-1">
+                <label htmlFor="description" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                     توضیحات
                 </label>
                 <textarea
@@ -216,24 +216,24 @@ export default function ReminderForm({ reminder, packageName, onSubmit, onCancel
                     rows={3}
                     value={formData.description || ''}
                     onChange={handleInputChange}
-                    className="block w-full px-3 py-2 text-slate-900 border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
+                    className="block w-full px-3 py-2 text-slate-900 dark:text-gray-100 border border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:placeholder-gray-500 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm transition-colors"
                     placeholder="توضیحات یادآوری را وارد کنید..."
                 />
             </div>
 
             {/* Form Actions */}
-            <div className="flex justify-end space-x-3 space-x-reverse pt-4 border-t">
+            <div className="flex justify-end space-x-3 space-x-reverse pt-4 border-t dark:border-gray-800">
                 <button
                     type="button"
                     onClick={onCancel}
-                    className="px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
+                    className="px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm text-sm font-medium text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 dark:focus:ring-offset-gray-900 focus:ring-indigo-500 transition-colors"
                 >
                     انصراف
                 </button>
                 <button
                     type="submit"
                     disabled={isLoading}
-                    className="px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 disabled:opacity-50"
+                    className="px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 dark:focus:ring-offset-gray-900 focus:ring-indigo-500 disabled:opacity-50 transition-colors"
                 >
                     {isLoading ? 'در حال ذخیره...' : reminder ? 'به‌روزرسانی' : 'ایجاد'}
                 </button>
diff --git a/components/admin/reminders/ReminderList.tsx b/components/admin/reminders/ReminderList.tsx
index 1a93c2c..0bd2815 100644
--- a/components/admin/reminders/ReminderList.tsx
+++ b/components/admin/reminders/ReminderList.tsx
@@ -24,8 +24,8 @@ export default function ReminderList({ reminders, packageName, onEdit, onDelete,
 
     if (!reminders || reminders.length === 0) {
         return (
-            <div className="text-center py-12 bg-white rounded-lg shadow">
-                <p className="text-gray-500">هیچ یادآوری برای این پکیج یافت نشد</p>
+            <div className="text-center py-12 bg-white dark:bg-gray-900 rounded-lg shadow transition-colors">
+                <p className="text-gray-500 dark:text-gray-400">هیچ یادآوری برای این پکیج یافت نشد</p>
             </div>
         );
     }
@@ -36,15 +36,15 @@ export default function ReminderList({ reminders, packageName, onEdit, onDelete,
     );
 
     return (
-        <div className="bg-white shadow overflow-hidden sm:rounded-lg">
+        <div className="bg-white dark:bg-gray-900 shadow overflow-hidden sm:rounded-lg transition-colors">
             <div className="px-4 py-5 sm:px-6">
-                <h3 className="text-lg leading-6 font-medium text-gray-900">
+                <h3 className="text-lg leading-6 font-medium text-gray-900 dark:text-gray-100">
                     یادآوری‌های پکیج {packageName}
                 </h3>
             </div>
-            <ul className="divide-y divide-gray-200">
+            <ul className="divide-y divide-gray-200 dark:divide-gray-800">
                 {sortedReminders.map((reminder) => (
-                    <li key={reminder.id} className="px-6 py-4 hover:bg-gray-50">
+                    <li key={reminder.id} className="px-6 py-4 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors">
                         <div className="flex items-center justify-between">
                             <div className="flex-1 min-w-0">
                                 <div className="flex items-center justify-between">
@@ -54,38 +54,38 @@ export default function ReminderList({ reminders, packageName, onEdit, onDelete,
                                         ) : (
                                             <BellIcon className="h-5 w-5 text-indigo-500" />
                                         )}
-                                        <p className="text-sm font-medium text-gray-900">
+                                        <p className="text-sm font-medium text-gray-900 dark:text-gray-100">
                                             {reminder.title}
                                         </p>
                                     </div>
-                                    <span className="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">
+                                    <span className="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300">
                                         {getReminderTypeLabel(reminder.type)}
                                     </span>
                                 </div>
                                 
                                 {reminder.description && (
-                                    <p className="mt-1 text-sm text-gray-600">
+                                    <p className="mt-1 text-sm text-gray-600 dark:text-gray-400">
                                         {reminder.description}
                                     </p>
                                 )}
                                 
                                 <div className="mt-2 grid grid-cols-1 gap-2 sm:grid-cols-3">
-                                    <div className="text-xs text-gray-500">
+                                    <div className="text-xs text-gray-500 dark:text-gray-400">
                                         <span className="font-medium">زمان:</span> {formatDate(reminder.time)} {formatTime(reminder.time)}
                                     </div>
                                     
-                                    <div className="text-xs text-gray-500">
+                                    <div className="text-xs text-gray-500 dark:text-gray-400">
                                         <span className="font-medium">تکرار:</span> {reminder.repeatable ? 'فعال' : 'غیرفعال'}
                                     </div>
                                     
                                     {reminder.repeatable && reminder.repeat_days && (
-                                        <div className="text-xs text-gray-500">
+                                        <div className="text-xs text-gray-500 dark:text-gray-400">
                                             <span className="font-medium">فاصله تکرار:</span> هر {reminder.repeat_days} روز
                                         </div>
                                     )}
                                 </div>
                                 
-                                <div className="mt-2 text-xs text-gray-400">
+                                <div className="mt-2 text-xs text-gray-400 dark:text-gray-500">
                                     آخرین به‌روزرسانی: {formatDate(reminder.updated_at)}
                                 </div>
                             </div>
@@ -93,13 +93,13 @@ export default function ReminderList({ reminders, packageName, onEdit, onDelete,
                             <div className="mr-4 flex-shrink-0 flex space-x-2 space-x-reverse">
                                 <button
                                     onClick={() => onEdit(reminder)}
-                                    className="text-indigo-600 hover:text-indigo-900 p-2 rounded-full hover:bg-indigo-50"
+                                    className="text-indigo-600 dark:text-indigo-400 hover:text-indigo-900 dark:hover:text-indigo-300 p-2 rounded-full hover:bg-indigo-50 dark:hover:bg-indigo-950/40 transition-colors"
                                 >
                                     <PencilIcon className="h-5 w-5" />
                                 </button>
                                 <button
                                     onClick={() => onDelete(reminder)}
-                                    className="text-red-600 hover:text-red-900 p-2 rounded-full hover:bg-red-50"
+                                    className="text-red-600 dark:text-red-400 hover:text-red-900 dark:hover:text-red-300 p-2 rounded-full hover:bg-red-50 dark:hover:bg-red-900/20 transition-colors"
                                 >
                                     <TrashIcon className="h-5 w-5" />
                                 </button>
diff --git a/components/admin/users/PackageSelector.tsx b/components/admin/users/PackageSelector.tsx
index 3c298c1..d1f8436 100644
--- a/components/admin/users/PackageSelector.tsx
+++ b/components/admin/users/PackageSelector.tsx
@@ -41,8 +41,8 @@ export default function PackageSelector({ token, selectedPackage, onPackageChang
     };
 
     return (
-        <div className="bg-white p-4 rounded-lg shadow mb-6">
-            <label htmlFor="package-select" className="block text-sm font-medium text-gray-700 mb-2">
+        <div className="bg-white dark:bg-gray-900 p-4 rounded-xl shadow-sm ring-1 ring-gray-200 dark:ring-gray-800 mb-6">
+            <label htmlFor="package-select" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                 انتخاب پکیج
             </label>
             <select
@@ -50,7 +50,7 @@ export default function PackageSelector({ token, selectedPackage, onPackageChang
                 value={selectedPackage || ''}
                 onChange={handleChange}
                 disabled={loading || isLoading}
-                className="block w-full px-3 py-2 text-slate-900 border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm disabled:opacity-50"
+                className="block w-full px-3 py-2 text-slate-900 dark:text-gray-100 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm disabled:opacity-50 transition-colors"
             >
                 {loading ? (
                     <option>در حال بارگذاری...</option>
diff --git a/components/admin/users/UserEditForm.tsx b/components/admin/users/UserEditForm.tsx
index 542fc85..b9ac5df 100644
--- a/components/admin/users/UserEditForm.tsx
+++ b/components/admin/users/UserEditForm.tsx
@@ -35,16 +35,16 @@ export default function UserEditForm({ user, onSubmit, onCancel, isLoading }: Us
     };
 
     const inputClass =
-        'block w-full px-3 py-2 border text-slate-900 border-gray-300 rounded-md leading-5 bg-white focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm';
+        'block w-full px-3 py-2 border text-slate-900 dark:text-gray-100 border-gray-300 dark:border-gray-600 rounded-md leading-5 bg-white dark:bg-gray-800 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm transition-colors';
 
     return (
-        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 p-4">
-            <div className="bg-white rounded-lg shadow-xl w-full max-w-lg" dir="rtl">
-                <div className="flex items-center justify-between px-6 py-4 border-b border-gray-200">
-                    <h3 className="text-lg font-medium text-gray-900">ویرایش اطلاعات کاربر</h3>
+        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 dark:bg-black/60 p-4">
+            <div className="bg-white dark:bg-gray-900 rounded-xl shadow-xl ring-1 ring-gray-200 dark:ring-gray-800 w-full max-w-lg" dir="rtl">
+                <div className="flex items-center justify-between px-6 py-4 border-b border-gray-200 dark:border-gray-800">
+                    <h3 className="text-lg font-medium text-gray-900 dark:text-gray-100">ویرایش اطلاعات کاربر</h3>
                     <button
                         onClick={onCancel}
-                        className="text-gray-400 hover:text-gray-600"
+                        className="text-gray-400 hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-300 transition-colors"
                         type="button"
                     >
                         <XMarkIcon className="h-5 w-5" />
@@ -54,7 +54,7 @@ export default function UserEditForm({ user, onSubmit, onCancel, isLoading }: Us
                 <form onSubmit={handleSubmit} className="px-6 py-4 space-y-4">
                     <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                         <div>
-                            <label className="block text-sm font-medium text-gray-700 mb-1">نام</label>
+                            <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">نام</label>
                             <input
                                 type="text"
                                 className={inputClass}
@@ -63,7 +63,7 @@ export default function UserEditForm({ user, onSubmit, onCancel, isLoading }: Us
                             />
                         </div>
                         <div>
-                            <label className="block text-sm font-medium text-gray-700 mb-1">نام خانوادگی</label>
+                            <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">نام خانوادگی</label>
                             <input
                                 type="text"
                                 className={inputClass}
@@ -101,7 +101,7 @@ export default function UserEditForm({ user, onSubmit, onCancel, isLoading }: Us
                         <input
                             type="file"
                             accept="image/*"
-                            className="block w-full text-sm text-gray-700 file:ml-4 file:py-2 file:px-4 file:rounded-md file:border-0 file:text-sm file:font-medium file:bg-indigo-50 file:text-indigo-700 hover:file:bg-indigo-100"
+                            className="block w-full text-sm text-gray-700 dark:text-gray-300 file:ml-4 file:py-2 file:px-4 file:rounded-md file:border-0 file:text-sm file:font-medium file:bg-indigo-50 file:text-indigo-700 hover:file:bg-indigo-100 dark:file:bg-indigo-950/40 dark:file:text-indigo-300 dark:hover:file:bg-indigo-900/40"
                             onChange={(e) =>
                                 setFormData({ ...formData, avatar: e.target.files?.[0] || null })
                             }
@@ -113,14 +113,14 @@ export default function UserEditForm({ user, onSubmit, onCancel, isLoading }: Us
                             type="button"
                             onClick={onCancel}
                             disabled={isLoading}
-                            className="px-4 py-2 border border-gray-300 rounded-md text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 disabled:opacity-50"
+                            className="px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md text-sm font-medium text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700 disabled:opacity-50 transition-colors"
                         >
                             انصراف
                         </button>
                         <button
                             type="submit"
                             disabled={isLoading}
-                            className="px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 disabled:opacity-50"
+                            className="px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-offset-gray-900 disabled:opacity-50 transition-colors"
                         >
                             {isLoading ? 'در حال ذخیره...' : 'ذخیره تغییرات'}
                         </button>
diff --git a/components/admin/users/UserInfo.tsx b/components/admin/users/UserInfo.tsx
index 7ddcf46..fda0bc8 100644
--- a/components/admin/users/UserInfo.tsx
+++ b/components/admin/users/UserInfo.tsx
@@ -10,61 +10,61 @@ interface UserInfoProps {
 
 export default function UserInfo({ user }: UserInfoProps) {
     return (
-        <div className="bg-white shadow overflow-hidden sm:rounded-lg mb-6">
+        <div className="bg-white dark:bg-gray-900 shadow-sm ring-1 ring-gray-200 dark:ring-gray-800 overflow-hidden sm:rounded-xl mb-6">
             <div className="px-4 py-5 sm:px-6">
-                <h3 className="text-lg leading-6 font-medium text-gray-900">
+                <h3 className="text-lg leading-6 font-medium text-gray-900 dark:text-gray-100">
                     اطلاعات کاربر
                 </h3>
             </div>
-            <div className="border-t border-gray-200">
+            <div className="border-t border-gray-200 dark:border-gray-800">
                 <dl>
-                    <div className="bg-gray-50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
-                        <dt className="text-sm font-medium text-gray-500">نام کامل</dt>
-                        <dd className="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2 flex items-center">
-                            <UserIcon className="h-4 w-4 ml-1 text-gray-400" />
+                    <div className="bg-gray-50 dark:bg-gray-800/60 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
+                        <dt className="text-sm font-medium text-gray-500 dark:text-gray-400">نام کامل</dt>
+                        <dd className="mt-1 text-sm text-gray-900 dark:text-gray-100 sm:mt-0 sm:col-span-2 flex items-center">
+                            <UserIcon className="h-4 w-4 ml-1 text-gray-400 dark:text-gray-500" />
                             {getFullName(user)}
                         </dd>
                     </div>
-                    <div className="bg-white px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
-                        <dt className="text-sm font-medium text-gray-500">ایمیل</dt>
-                        <dd className="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2 flex items-center">
-                            <EnvelopeIcon className="h-4 w-4 ml-1 text-gray-400" />
+                    <div className="bg-white dark:bg-gray-900 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
+                        <dt className="text-sm font-medium text-gray-500 dark:text-gray-400">ایمیل</dt>
+                        <dd className="mt-1 text-sm text-gray-900 dark:text-gray-100 sm:mt-0 sm:col-span-2 flex items-center">
+                            <EnvelopeIcon className="h-4 w-4 ml-1 text-gray-400 dark:text-gray-500" />
                             {getEmail(user.email)}
                         </dd>
                     </div>
-                    <div className="bg-gray-50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
-                        <dt className="text-sm font-medium text-gray-500">شماره موبایل</dt>
-                        <dd className="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2 flex items-center">
-                            <PhoneIcon className="h-4 w-4 ml-1 text-gray-400" />
+                    <div className="bg-gray-50 dark:bg-gray-800/60 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
+                        <dt className="text-sm font-medium text-gray-500 dark:text-gray-400">شماره موبایل</dt>
+                        <dd className="mt-1 text-sm text-gray-900 dark:text-gray-100 sm:mt-0 sm:col-span-2 flex items-center">
+                            <PhoneIcon className="h-4 w-4 ml-1 text-gray-400 dark:text-gray-500" />
                             {getMobile(user.mobile)}
                         </dd>
                     </div>
-                    <div className="bg-white px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
-                        <dt className="text-sm font-medium text-gray-500">کیف پول</dt>
-                        <dd className="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2 flex items-center">
-                            <WalletIcon className="h-4 w-4 ml-1 text-gray-400" />
+                    <div className="bg-white dark:bg-gray-900 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
+                        <dt className="text-sm font-medium text-gray-500 dark:text-gray-400">کیف پول</dt>
+                        <dd className="mt-1 text-sm text-gray-900 dark:text-gray-100 sm:mt-0 sm:col-span-2 flex items-center">
+                            <WalletIcon className="h-4 w-4 ml-1 text-gray-400 dark:text-gray-500" />
                             {formatPrice(user.wallet)} تومان
                         </dd>
                     </div>
-                    <div className="bg-gray-50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
-                        <dt className="text-sm font-medium text-gray-500">تاریخ عضویت</dt>
-                        <dd className="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2 flex items-center">
-                            <CalendarIcon className="h-4 w-4 ml-1 text-gray-400" />
+                    <div className="bg-gray-50 dark:bg-gray-800/60 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
+                        <dt className="text-sm font-medium text-gray-500 dark:text-gray-400">تاریخ عضویت</dt>
+                        <dd className="mt-1 text-sm text-gray-900 dark:text-gray-100 sm:mt-0 sm:col-span-2 flex items-center">
+                            <CalendarIcon className="h-4 w-4 ml-1 text-gray-400 dark:text-gray-500" />
                             {formatDate(user.created_at)}
                         </dd>
                     </div>
                     {user.birthday && (
-                        <div className="bg-white px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
-                            <dt className="text-sm font-medium text-gray-500">تاریخ تولد</dt>
-                            <dd className="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
+                        <div className="bg-white dark:bg-gray-900 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
+                            <dt className="text-sm font-medium text-gray-500 dark:text-gray-400">تاریخ تولد</dt>
+                            <dd className="mt-1 text-sm text-gray-900 dark:text-gray-100 sm:mt-0 sm:col-span-2">
                                 {formatDate(user.birthday)}
                             </dd>
                         </div>
                     )}
                     {user.gender && (
-                        <div className="bg-gray-50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
-                            <dt className="text-sm font-medium text-gray-500">جنسیت</dt>
-                            <dd className="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
+                        <div className="bg-gray-50 dark:bg-gray-800/60 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
+                            <dt className="text-sm font-medium text-gray-500 dark:text-gray-400">جنسیت</dt>
+                            <dd className="mt-1 text-sm text-gray-900 dark:text-gray-100 sm:mt-0 sm:col-span-2">
                                 {user.gender === 'male' ? 'مرد' : user.gender === 'female' ? 'زن' : user.gender}
                             </dd>
                         </div>
diff --git a/components/admin/users/UserProducts.tsx b/components/admin/users/UserProducts.tsx
index 553725d..d627574 100644
--- a/components/admin/users/UserProducts.tsx
+++ b/components/admin/users/UserProducts.tsx
@@ -67,24 +67,24 @@ export default function UserProducts({
     };
 
     return (
-        <div className="bg-white shadow overflow-hidden sm:rounded-lg">
+        <div className="bg-white dark:bg-gray-900 shadow-sm ring-1 ring-gray-200 dark:ring-gray-800 overflow-hidden sm:rounded-xl">
             <div className="px-4 py-5 sm:px-6">
-                <h3 className="text-lg leading-6 font-medium text-gray-900">
+                <h3 className="text-lg leading-6 font-medium text-gray-900 dark:text-gray-100">
                     اشتراک‌های کاربر
                 </h3>
             </div>
 
             {/* Current Subscriptions grouped by package */}
-            <div className="border-t border-gray-200">
+            <div className="border-t border-gray-200 dark:border-gray-800">
                 {Object.keys(productsByPackage).length > 0 ? (
                     Object.entries(productsByPackage).map(([packageName, packageProducts]) => (
-                        <div key={packageName} className="border-b border-gray-200 last:border-b-0">
-                            <div className="bg-gray-50 px-4 py-2">
-                                <h4 className="text-sm font-medium text-gray-700">
+                        <div key={packageName} className="border-b border-gray-200 dark:border-gray-800 last:border-b-0">
+                            <div className="bg-gray-50 dark:bg-gray-800/60 px-4 py-2">
+                                <h4 className="text-sm font-medium text-gray-700 dark:text-gray-300">
                                     پکیج: {packageName}
                                 </h4>
                             </div>
-                            <ul className="divide-y divide-gray-200">
+                            <ul className="divide-y divide-gray-200 dark:divide-gray-800">
                                 {packageProducts.map((product) => {
                                     const status = getSubscriptionStatus(product);
                                     const StatusIcon = status.icon;
@@ -96,17 +96,17 @@ export default function UserProducts({
                                                 <div className="flex-1">
                                                     <div className="flex items-center justify-between">
                                                         <div className="flex items-center space-x-2 space-x-reverse">
-                                                            <p className="text-sm font-medium text-indigo-600 truncate">
+                                                            <p className="text-sm font-medium text-indigo-600 dark:text-indigo-400 truncate">
                                                                 {product.title || 'محصول'}
                                                             </p>
                                                             {subscriptionCount > 1 && (
-                                                                <span className="px-2 py-1 text-xs bg-gray-100 text-gray-600 rounded-full">
+                                                                <span className="px-2 py-1 text-xs bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-300 rounded-full">
                                                                     {subscriptionCount} اشتراک
                                                                 </span>
                                                             )}
                                                         </div>
                                                         <div className="mr-2 flex-shrink-0 flex">
-                                                            <p className={`px-2 inline-flex text-xs leading-5 font-semibold rounded-full ${status.isActive ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'}`}>
+                                                            <p className={`px-2 inline-flex text-xs leading-5 font-semibold rounded-full ${status.isActive ? 'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300' : 'bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-300'}`}>
                                                                 <StatusIcon className={`h-4 w-4 ml-1 ${status.color}`} />
                                                                 {status.text}
                                                             </p>
@@ -114,23 +114,23 @@ export default function UserProducts({
                                                     </div>
                                                     <div className="mt-2 sm:flex sm:justify-between">
                                                         <div className="sm:flex">
-                                                            <p className="flex items-center text-sm text-gray-500">
+                                                            <p className="flex items-center text-sm text-gray-500 dark:text-gray-400">
                                                                 قیمت: {formatPrice(product.price)} تومان
                                                             </p>
-                                                            <p className="mt-2 flex items-center text-sm text-gray-500 sm:mt-0 sm:mr-6">
+                                                            <p className="mt-2 flex items-center text-sm text-gray-500 dark:text-gray-400 sm:mt-0 sm:mr-6">
                                                                 نوع: {getProductTypeLabel(product.type)}
                                                             </p>
                                                             {product.pivot?.expire_at && (
-                                                                <p className="mt-2 flex items-center text-sm text-gray-500 sm:mt-0 sm:mr-6">
+                                                                <p className="mt-2 flex items-center text-sm text-gray-500 dark:text-gray-400 sm:mt-0 sm:mr-6">
                                                                     تاریخ انقضا: {formatDate(product.pivot.expire_at)}
                                                                 </p>
                                                             )}
                                                         </div>
-                                                        <div className="mt-2 flex items-center text-sm text-gray-500 sm:mt-0">
+                                                        <div className="mt-2 flex items-center text-sm text-gray-500 dark:text-gray-400 sm:mt-0">
                                                             <button
                                                                 onClick={() => onUnsubscribe(product.id)}
                                                                 disabled={isLoading}
-                                                                className="text-red-600 hover:text-red-900 disabled:opacity-50"
+                                                                className="text-red-600 hover:text-red-900 dark:text-red-400 dark:hover:text-red-300 disabled:opacity-50 transition-colors"
                                                             >
                                                                 لغو اشتراک
                                                             </button>
@@ -145,7 +145,7 @@ export default function UserProducts({
                         </div>
                     ))
                 ) : (
-                    <div className="px-4 py-5 sm:px-6 text-center text-gray-500">
+                    <div className="px-4 py-5 sm:px-6 text-center text-gray-500 dark:text-gray-400">
                         کاربر هیچ اشتراکی ندارد
                     </div>
                 )}
@@ -153,8 +153,8 @@ export default function UserProducts({
 
             {/* Available Products for Subscription */}
             {availableProducts && availableProducts.length > 0 && selectedPackage && (
-                <div className="border-t border-gray-200 px-4 py-5 sm:px-6">
-                    <h4 className="text-md font-medium text-gray-900 mb-3">
+                <div className="border-t border-gray-200 dark:border-gray-800 px-4 py-5 sm:px-6">
+                    <h4 className="text-md font-medium text-gray-900 dark:text-gray-100 mb-3">
                         افزودن اشتراک جدید برای پکیج {selectedPackage}
                     </h4>
                     <div className="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3">
@@ -166,22 +166,22 @@ export default function UserProducts({
                                     key={product.id}
                                     onClick={() => handleSubscribeClick(product.id)}
                                     disabled={isLoading}
-                                    className="relative block w-full border-2 border-indigo-200 rounded-lg p-4 text-right hover:border-indigo-500 hover:bg-indigo-50 disabled:opacity-50 disabled:cursor-not-allowed transition-all"
+                                    className="relative block w-full border-2 border-indigo-200 dark:border-indigo-900/60 rounded-lg p-4 text-right hover:border-indigo-500 hover:bg-indigo-50 dark:hover:border-indigo-500 dark:hover:bg-indigo-950/40 disabled:opacity-50 disabled:cursor-not-allowed transition-all"
                                 >
                                     <div className="flex items-start justify-between">
                                         <div>
-                                            <p className="text-sm font-medium text-gray-900">
+                                            <p className="text-sm font-medium text-gray-900 dark:text-gray-100">
                                                 {product.title || 'محصول'}
                                             </p>
                                             {subscriptionCount > 0 && (
-                                                <p className="mt-1 text-xs text-amber-600">
+                                                <p className="mt-1 text-xs text-amber-600 dark:text-amber-400">
                                                     {subscriptionCount} اشتراک فعال دارد
                                                 </p>
                                             )}
                                         </div>
-                                        <PlusCircleIcon className="h-5 w-5 text-indigo-600" />
+                                        <PlusCircleIcon className="h-5 w-5 text-indigo-600 dark:text-indigo-400" />
                                     </div>
-                                    <p className="mt-2 text-xs text-gray-500">
+                                    <p className="mt-2 text-xs text-gray-500 dark:text-gray-400">
                                         برای افزودن اشتراک جدید کلیک کنید
                                     </p>
                                 </button>
diff --git a/components/admin/users/UserSearch.tsx b/components/admin/users/UserSearch.tsx
index c8fce3c..7dedda3 100644
--- a/components/admin/users/UserSearch.tsx
+++ b/components/admin/users/UserSearch.tsx
@@ -27,12 +27,12 @@ export default function UserSearch({ onSearch, isLoading }: UserSearchProps) {
                     </label>
                     <div className="relative">
                         <div className="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">
-                            <MagnifyingGlassIcon className="h-5 w-5 text-gray-400" />
+                            <MagnifyingGlassIcon className="h-5 w-5 text-gray-400 dark:text-gray-500" />
                         </div>
                         <input
                             type="text"
                             id="search"
-                            className="block w-full pr-10 pl-3 py-2 border text-slate-900 border-gray-300 rounded-md leading-5 bg-white placeholder-gray-500 focus:outline-none focus:placeholder-gray-400 focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
+                            className="block w-full pr-10 pl-3 py-2 border text-slate-900 dark:text-gray-100 border-gray-300 dark:border-gray-600 rounded-md leading-5 bg-white dark:bg-gray-800 placeholder-gray-500 dark:placeholder-gray-500 focus:outline-none focus:placeholder-gray-400 focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm transition-colors"
                             placeholder="جستجو با ایمیل یا شماره موبایل..."
                             value={searchTerm}
                             onChange={(e) => setSearchTerm(e.target.value)}
@@ -43,7 +43,7 @@ export default function UserSearch({ onSearch, isLoading }: UserSearchProps) {
                 <button
                     type="submit"
                     disabled={isLoading || !searchTerm.trim()}
-                    className="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 disabled:opacity-50 disabled:cursor-not-allowed"
+                    className="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-offset-gray-900 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
                 >
                     {isLoading ? 'در حال جستجو...' : 'جستجو'}
                 </button>
diff --git a/next-env.d.ts b/next-env.d.ts
index c4b7818..9edff1c 100644
--- a/next-env.d.ts
+++ b/next-env.d.ts
@@ -1,6 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
-import "./.next/dev/types/routes.d.ts";
+import "./.next/types/routes.d.ts";
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/app/api-reference/config/typescript for more information.