diff --git a/resources/views/auth/passwords/confirm.blade.php b/resources/views/auth/passwords/confirm.blade.php
index 6e5f020..5ef7bc8 100644
--- a/resources/views/auth/passwords/confirm.blade.php
+++ b/resources/views/auth/passwords/confirm.blade.php
@@ -4,26 +4,26 @@
 <div class="min-h-screen flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
     <div class="max-w-md w-full space-y-8">
         <div>
-            <h2 class="mt-6 text-center text-3xl font-extrabold text-gray-900">
+            <h2 class="mt-6 text-center text-3xl font-extrabold text-gray-900 dark:text-white">
                 {{ __('Confirm Password') }}
             </h2>
-            <p class="mt-2 text-center text-sm text-gray-600">
+            <p class="mt-2 text-center text-sm text-gray-600 dark:text-gray-400">
                 {{ __('Please confirm your password before continuing.') }}
             </p>
         </div>
-        <div class="bg-white py-8 px-4 shadow sm:rounded-lg sm:px-10">
+        <div class="bg-white dark:bg-gray-800 py-8 px-4 shadow sm:rounded-lg sm:px-10">
             <form method="POST" action="{{ route('password.confirm') }}" class="space-y-6">
                 @csrf
 
                 <div>
-                    <label for="password" class="block text-sm font-medium text-gray-700">
+                    <label for="password" class="block text-sm font-medium text-gray-700 dark:text-gray-300">
                         {{ __('Password') }}
                     </label>
                     <div class="mt-1">
                         <input id="password" type="password" name="password" required autocomplete="current-password"
-                            class="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-primary-500 focus:border-primary-500 sm:text-sm @error('password') border-red-300 text-red-900 placeholder-red-300 focus:ring-red-500 focus:border-red-500 @enderror">
+                            class="appearance-none block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-primary-500 focus:border-primary-500 sm:text-sm @error('password') border-red-300 text-red-900 dark:text-red-200 placeholder-red-300 focus:ring-red-500 focus:border-red-500 @enderror dark:bg-gray-700">
                         @error('password')
-                            <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
+                            <p class="mt-2 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
                         @enderror
                     </div>
                 </div>
@@ -37,7 +37,7 @@
 
                 @if (Route::has('password.request'))
                     <div class="text-sm text-center">
-                        <a href="{{ route('password.request') }}" class="font-medium text-primary-600 hover:text-primary-500">
+                        <a href="{{ route('password.request') }}" class="font-medium text-primary-600 dark:text-primary-400 hover:text-primary-500">
                             {{ __('Forgot Your Password?') }}
                         </a>
                     </div>
diff --git a/resources/views/auth/passwords/email.blade.php b/resources/views/auth/passwords/email.blade.php
index 61b1990..69ac84c 100644
--- a/resources/views/auth/passwords/email.blade.php
+++ b/resources/views/auth/passwords/email.blade.php
@@ -4,16 +4,16 @@
 <div class="min-h-screen flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
     <div class="max-w-md w-full space-y-8">
         <div>
-            <h2 class="mt-6 text-center text-3xl font-extrabold text-gray-900">
+            <h2 class="mt-6 text-center text-3xl font-extrabold text-gray-900 dark:text-white">
                 {{ __('Reset Password') }}
             </h2>
-            <p class="mt-2 text-center text-sm text-gray-600">
+            <p class="mt-2 text-center text-sm text-gray-600 dark:text-gray-400">
                 {{ __('Enter your email address and we will send you a password reset link.') }}
             </p>
         </div>
-        <div class="bg-white py-8 px-4 shadow sm:rounded-lg sm:px-10">
+        <div class="bg-white dark:bg-gray-800 py-8 px-4 shadow sm:rounded-lg sm:px-10">
             @if (session('status'))
-                <div class="mb-4 rounded-md bg-green-50 p-4">
+                <div class="mb-4 rounded-md bg-green-50 dark:bg-green-900/20 p-4">
                     <div class="flex">
                         <div class="flex-shrink-0">
                             <svg class="h-5 w-5 text-green-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
@@ -21,7 +21,7 @@
                             </svg>
                         </div>
                         <div class="ml-3">
-                            <p class="text-sm font-medium text-green-800">
+                            <p class="text-sm font-medium text-green-800 dark:text-green-200">
                                 {{ session('status') }}
                             </p>
                         </div>
@@ -33,14 +33,14 @@
                 @csrf
 
                 <div>
-                    <label for="email" class="block text-sm font-medium text-gray-700">
+                    <label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300">
                         {{ __('Email Address') }}
                     </label>
                     <div class="mt-1">
                         <input id="email" type="email" name="email" value="{{ old('email') }}" required autocomplete="email" autofocus
-                            class="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-primary-500 focus:border-primary-500 sm:text-sm @error('email') border-red-300 text-red-900 placeholder-red-300 focus:ring-red-500 focus:border-red-500 @enderror">
+                            class="appearance-none block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-primary-500 focus:border-primary-500 sm:text-sm @error('email') border-red-300 text-red-900 dark:text-red-200 placeholder-red-300 focus:ring-red-500 focus:border-red-500 @enderror dark:bg-gray-700">
                         @error('email')
-                            <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
+                            <p class="mt-2 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
                         @enderror
                     </div>
                 </div>
@@ -54,7 +54,7 @@
 
                 @if (Route::has('login'))
                     <div class="text-sm text-center">
-                        <a href="{{ route('login') }}" class="font-medium text-primary-600 hover:text-primary-500">
+                        <a href="{{ route('login') }}" class="font-medium text-primary-600 dark:text-primary-400 hover:text-primary-500">
                             {{ __('Back to Login') }}
                         </a>
                     </div>
diff --git a/resources/views/auth/verify.blade.php b/resources/views/auth/verify.blade.php
index e669f74..cf7f8af 100644
--- a/resources/views/auth/verify.blade.php
+++ b/resources/views/auth/verify.blade.php
@@ -4,13 +4,13 @@
 <div class="min-h-screen flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
     <div class="max-w-md w-full space-y-8">
         <div>
-            <h2 class="mt-6 text-center text-3xl font-extrabold text-gray-900">
+            <h2 class="mt-6 text-center text-3xl font-extrabold text-gray-900 dark:text-white">
                 {{ __('Verify Your Email Address') }}
             </h2>
         </div>
-        <div class="bg-white py-8 px-4 shadow sm:rounded-lg sm:px-10">
+        <div class="bg-white dark:bg-gray-800 py-8 px-4 shadow sm:rounded-lg sm:px-10">
             @if (session('resent'))
-                <div class="mb-4 rounded-md bg-green-50 p-4">
+                <div class="mb-4 rounded-md bg-green-50 dark:bg-green-900/20 p-4">
                     <div class="flex">
                         <div class="flex-shrink-0">
                             <svg class="h-5 w-5 text-green-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
@@ -18,7 +18,7 @@
                             </svg>
                         </div>
                         <div class="ml-3">
-                            <p class="text-sm font-medium text-green-800">
+                            <p class="text-sm font-medium text-green-800 dark:text-green-200">
                                 {{ __('A fresh verification link has been sent to your email address.') }}
                             </p>
                         </div>
@@ -26,7 +26,7 @@
                 </div>
             @endif
 
-            <div class="text-sm text-gray-600 mb-6">
+            <div class="text-sm text-gray-600 dark:text-gray-400 mb-6">
                 <p>{{ __('Before proceeding, please check your email for a verification link.') }}</p>
                 <p class="mt-2">{{ __('If you did not receive the email') }}</p>
             </div>
diff --git a/resources/views/bookmarks/index.blade.php b/resources/views/bookmarks/index.blade.php
index a77d36f..c64b5c6 100644
--- a/resources/views/bookmarks/index.blade.php
+++ b/resources/views/bookmarks/index.blade.php
@@ -1,13 +1,13 @@
 @extends('layouts.app')
 
 @section('content')
-<div class="bg-gradient-to-br from-primary-50 via-white to-accent-50 border-b border-gray-200">
+<div class="bg-gradient-to-br from-primary-50 via-white to-accent-50 border-b border-gray-200 dark:border-gray-700">
     <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12 sm:py-16">
         <div class="max-w-3xl">
-            <h1 class="text-4xl sm:text-5xl font-bold text-gray-900 mb-4">
+            <h1 class="text-4xl sm:text-5xl font-bold text-gray-900 dark:text-white mb-4">
                 My Bookmarks
             </h1>
-            <p class="text-lg text-gray-600">
+            <p class="text-lg text-gray-600 dark:text-gray-400">
                 Products you've saved for later
             </p>
         </div>
@@ -18,8 +18,8 @@
     <!-- Results Summary -->
     @if($bookmarks->total() > 0)
         <div class="mb-6">
-            <p class="text-sm text-gray-600">
-                You have <span class="font-semibold text-gray-900">{{ $bookmarks->total() }}</span> bookmarked {{ Str::plural('product', $bookmarks->total()) }}
+            <p class="text-sm text-gray-600 dark:text-gray-400">
+                You have <span class="font-semibold text-gray-900 dark:text-white">{{ $bookmarks->total() }}</span> bookmarked {{ Str::plural('product', $bookmarks->total()) }}
             </p>
         </div>
     @endif
@@ -32,11 +32,11 @@
             <!-- Empty State -->
             <div class="col-span-full">
                 <div class="text-center py-16">
-                    <svg class="mx-auto h-16 w-16 text-gray-400 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <svg class="mx-auto h-16 w-16 text-gray-400 dark:text-gray-500 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 5a2 2 0 012-2h10a2 2 0 012 2v16l-7-3.5L5 21V5z"></path>
                     </svg>
-                    <h3 class="text-lg font-medium text-gray-900 mb-2">No bookmarks yet</h3>
-                    <p class="text-gray-600 mb-6">
+                    <h3 class="text-lg font-medium text-gray-900 dark:text-white mb-2">No bookmarks yet</h3>
+                    <p class="text-gray-600 dark:text-gray-400 mb-6">
                         Start bookmarking products to save them for later!
                     </p>
                     <a href="{{ route('products.index') }}" class="inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-primary-600 hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500">
diff --git a/resources/views/components/product-card.blade.php b/resources/views/components/product-card.blade.php
index 6b54e66..690d303 100644
--- a/resources/views/components/product-card.blade.php
+++ b/resources/views/components/product-card.blade.php
@@ -1,7 +1,7 @@
-<div class="bg-white rounded-lg border border-gray-200 hover:shadow-lg transition-shadow overflow-hidden group">
+<div class="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 hover:shadow-lg transition-shadow overflow-hidden group">
     <a href="{{ route('products.show', $product) }}" class="block">
         <!-- Thumbnail -->
-        <div class="relative aspect-video bg-gray-100 overflow-hidden">
+        <div class="relative aspect-video bg-gray-100 dark:bg-gray-700 overflow-hidden">
             @if($product->thumbnail_url)
                 <img src="{{ $product->thumbnail_url }}"
                      alt="{{ $product->title }}"
@@ -16,7 +16,7 @@
 
             <!-- Category Badge -->
             <div class="absolute top-2 left-2">
-                <span class="inline-flex items-center px-2.5 py-0.5 rounded-md text-xs font-medium bg-white/90 backdrop-blur-sm text-gray-800">
+                <span class="inline-flex items-center px-2.5 py-0.5 rounded-md text-xs font-medium bg-white/90 backdrop-blur-sm text-gray-800 dark:text-gray-200">
                     {{ $product->category->name }}
                 </span>
             </div>
@@ -24,10 +24,10 @@
 
         <!-- Content -->
         <div class="p-4">
-            <h3 class="text-lg font-semibold text-gray-900 line-clamp-1 group-hover:text-primary-600">
+            <h3 class="text-lg font-semibold text-gray-900 dark:text-white line-clamp-1 group-hover:text-primary-600">
                 {{ $product->title }}
             </h3>
-            <p class="mt-2 text-sm text-gray-600 line-clamp-2">
+            <p class="mt-2 text-sm text-gray-600 dark:text-gray-400 line-clamp-2">
                 {{ $product->description }}
             </p>
 
@@ -39,7 +39,7 @@
                         @csrf
                         <button type="submit"
                                 @guest disabled @endguest
-                                class="group/upvote flex items-center space-x-1 px-3 py-1.5 rounded-md border {{ $product->isUpvotedBy(auth()->user()) ? 'border-primary-500 bg-primary-50 text-primary-700' : 'border-gray-300 bg-white text-gray-700 hover:border-primary-500 hover:bg-primary-50' }} transition-colors">
+                                class="group/upvote flex items-center space-x-1 px-3 py-1.5 rounded-md border {{ $product->isUpvotedBy(auth()->user()) ? 'border-primary-500 bg-primary-50 dark:bg-primary-900 text-primary-700' : 'border-gray-300 bg-white text-gray-700 dark:text-gray-300 hover:border-primary-500 hover:bg-primary-50' }} transition-colors">
                             <svg class="h-4 w-4" fill="{{ $product->isUpvotedBy(auth()->user()) ? 'currentColor' : 'none' }}" stroke="currentColor" viewBox="0 0 24 24">
                                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 15l7-7 7 7"></path>
                             </svg>
@@ -48,7 +48,7 @@
                     </form>
 
                     <!-- Comments Count -->
-                    <div class="flex items-center space-x-1 text-gray-500">
+                    <div class="flex items-center space-x-1 text-gray-500 dark:text-gray-400">
                         <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path>
                         </svg>
@@ -62,7 +62,7 @@
                         <div class="h-6 w-6 rounded-full bg-gradient-to-br from-primary-500 to-accent-500 flex items-center justify-center text-white text-xs font-semibold">
                             {{ strtoupper(substr($product->user->name, 0, 1)) }}
                         </div>
-                        <span class="text-xs text-gray-600">{{ $product->user->name }}</span>
+                        <span class="text-xs text-gray-600 dark:text-gray-400">{{ $product->user->name }}</span>
                     </a>
                 </div>
             </div>
diff --git a/resources/views/components/product/bookmark-button.blade.php b/resources/views/components/product/bookmark-button.blade.php
index 4f6a6f6..45eb99b 100644
--- a/resources/views/components/product/bookmark-button.blade.php
+++ b/resources/views/components/product/bookmark-button.blade.php
@@ -34,7 +34,7 @@
     <button @click="toggleBookmark()"
             :disabled="loading"
             :title="bookmarked ? 'Remove bookmark' : 'Bookmark this product'"
-            class="text-gray-400 hover:text-primary-600 transition-colors disabled:opacity-50">
+            class="text-gray-400 dark:text-gray-500 hover:text-primary-600 transition-colors disabled:opacity-50">
         <svg class="h-5 w-5"
              :class="{ 'animate-pulse': loading }"
              :fill="bookmarked ? 'currentColor' : 'none'"
diff --git a/resources/views/components/product/plans-form.blade.php b/resources/views/components/product/plans-form.blade.php
index e6eacaa..79e9b8e 100644
--- a/resources/views/components/product/plans-form.blade.php
+++ b/resources/views/components/product/plans-form.blade.php
@@ -7,16 +7,16 @@
         'period' => $p['period'] ?? 'monthly',
         'description' => $p['description'] ?? '',
     ])->values()->all();
-    $input = 'block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-primary-500 focus:border-primary-500 sm:text-sm';
+    $input = 'block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white rounded-md shadow-sm focus:outline-none focus:ring-primary-500 focus:border-primary-500 sm:text-sm';
 @endphp
 
 <!-- Pricing plans -->
 <div x-data="{ plans: @js($initial) }">
     <input type="hidden" name="plans_present" value="1">
-    <label class="block text-sm font-medium text-gray-700">Pricing plans</label>
+    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Pricing plans</label>
     <div class="mt-2 space-y-3">
         <template x-for="(plan, i) in plans" :key="i">
-            <div class="grid grid-cols-1 sm:grid-cols-12 gap-2 p-3 border border-gray-200 rounded-md">
+            <div class="grid grid-cols-1 sm:grid-cols-12 gap-2 p-3 border border-gray-200 dark:border-gray-700 rounded-md">
                 <input type="text" :name="`plans[${i}][name]`" x-model="plan.name" placeholder="Name" maxlength="100" class="{{ $input }} sm:col-span-3">
                 <input type="number" :name="`plans[${i}][price]`" x-model="plan.price" placeholder="Price (EUR)" min="0" max="99999" step="0.01" class="{{ $input }} sm:col-span-2">
                 <select :name="`plans[${i}][period]`" x-model="plan.period" class="{{ $input }} sm:col-span-2">
@@ -25,17 +25,17 @@
                     @endforeach
                 </select>
                 <input type="text" :name="`plans[${i}][description]`" x-model="plan.description" placeholder="Description (optional)" maxlength="255" class="{{ $input }} sm:col-span-4">
-                <button type="button" @click="plans.splice(i, 1)" class="sm:col-span-1 text-sm text-red-600 hover:text-red-800">Remove</button>
+                <button type="button" @click="plans.splice(i, 1)" class="sm:col-span-1 text-sm text-red-600 dark:text-red-400 hover:text-red-800">Remove</button>
             </div>
         </template>
     </div>
     @foreach($errors->get('plans.*') as $messages)
-        <p class="mt-2 text-sm text-red-600">{{ $messages[0] }}</p>
+        <p class="mt-2 text-sm text-red-600 dark:text-red-400">{{ $messages[0] }}</p>
     @endforeach
     @error('plans')
-        <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
+        <p class="mt-2 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
     @enderror
     <button type="button" @click="plans.push({ name: '', price: '', period: 'monthly', description: '' })"
-            class="mt-3 inline-flex items-center px-3 py-1.5 border border-gray-300 rounded-md text-sm text-gray-700 hover:bg-gray-50">Add plan</button>
+            class="mt-3 inline-flex items-center px-3 py-1.5 border border-gray-300 dark:border-gray-600 rounded-md text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700">Add plan</button>
 </div>
 
diff --git a/resources/views/components/product/team-form.blade.php b/resources/views/components/product/team-form.blade.php
index 9094813..d38f664 100644
--- a/resources/views/components/product/team-form.blade.php
+++ b/resources/views/components/product/team-form.blade.php
@@ -10,19 +10,19 @@
         'name' => $m['name'] ?? ('User #' . ($m['user_id'] ?? '')),
         'role' => $m['role'] ?? '',
     ])->values()->all();
-    $input = 'block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-primary-500 focus:border-primary-500 sm:text-sm';
+    $input = 'block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white rounded-md shadow-sm focus:outline-none focus:ring-primary-500 focus:border-primary-500 sm:text-sm';
 @endphp
 
 <!-- Team members -->
 @if($readonly)
 <div>
-    <label class="block text-sm font-medium text-gray-700">Team members</label>
-    <p class="mt-1 text-sm text-gray-500">Only the submitter or an admin can change the team.</p>
+    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Team members</label>
+    <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">Only the submitter or an admin can change the team.</p>
     <ul class="mt-2 space-y-1">
         @forelse($initial as $m)
-            <li class="text-sm text-gray-900">{{ $m['name'] }} <span class="text-gray-500">- {{ $m['role'] }}</span></li>
+            <li class="text-sm text-gray-900 dark:text-white">{{ $m['name'] }} <span class="text-gray-500 dark:text-gray-400">- {{ $m['role'] }}</span></li>
         @empty
-            <li class="text-sm text-gray-500">No team members.</li>
+            <li class="text-sm text-gray-500 dark:text-gray-400">No team members.</li>
         @endforelse
     </ul>
 </div>
@@ -46,31 +46,31 @@
         }
     }">
     <input type="hidden" name="members_present" value="1">
-    <label class="block text-sm font-medium text-gray-700">Team members</label>
+    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Team members</label>
     <div class="relative mt-2">
         <input type="text" x-model="q" @input="search()" placeholder="Search users by name" autocomplete="off" class="{{ $input }}">
-        <ul x-show="results.length" x-cloak class="absolute z-10 mt-1 w-full bg-white border border-gray-200 rounded-md shadow-lg">
+        <ul x-show="results.length" x-cloak class="absolute z-10 mt-1 w-full bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-md shadow-lg">
             <template x-for="u in results" :key="u.id">
-                <li><button type="button" @click="add(u)" class="w-full text-left px-3 py-2 text-sm hover:bg-gray-50" x-text="u.name"></button></li>
+                <li><button type="button" @click="add(u)" class="w-full text-left px-3 py-2 text-sm hover:bg-gray-50 dark:hover:bg-gray-700" x-text="u.name"></button></li>
             </template>
         </ul>
     </div>
     <div class="mt-3 space-y-3">
         <template x-for="(member, i) in members" :key="member.user_id">
-            <div class="grid grid-cols-1 sm:grid-cols-12 gap-2 p-3 border border-gray-200 rounded-md items-center">
+            <div class="grid grid-cols-1 sm:grid-cols-12 gap-2 p-3 border border-gray-200 dark:border-gray-700 rounded-md items-center">
                 <input type="hidden" :name="`members[${i}][user_id]`" :value="member.user_id">
                 <input type="hidden" :name="`members[${i}][name]`" :value="member.name">
-                <span class="sm:col-span-4 text-sm text-gray-900" x-text="member.name"></span>
+                <span class="sm:col-span-4 text-sm text-gray-900 dark:text-white" x-text="member.name"></span>
                 <input type="text" :name="`members[${i}][role]`" x-model="member.role" placeholder="Role (e.g. Designer)" maxlength="100" class="{{ $input }} sm:col-span-7">
-                <button type="button" @click="members.splice(i, 1)" class="sm:col-span-1 text-sm text-red-600 hover:text-red-800">Remove</button>
+                <button type="button" @click="members.splice(i, 1)" class="sm:col-span-1 text-sm text-red-600 dark:text-red-400 hover:text-red-800">Remove</button>
             </div>
         </template>
     </div>
     @foreach($errors->get('members.*') as $messages)
-        <p class="mt-2 text-sm text-red-600">{{ $messages[0] }}</p>
+        <p class="mt-2 text-sm text-red-600 dark:text-red-400">{{ $messages[0] }}</p>
     @endforeach
     @error('members')
-        <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
+        <p class="mt-2 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
     @enderror
 </div>
 @endif
diff --git a/resources/views/components/product/upvote-button.blade.php b/resources/views/components/product/upvote-button.blade.php
index ce8a4d8..1e41fd7 100644
--- a/resources/views/components/product/upvote-button.blade.php
+++ b/resources/views/components/product/upvote-button.blade.php
@@ -48,8 +48,8 @@
     <button @click="toggleUpvote()"
             :disabled="loading"
             :class="{
-                'bg-primary-100 border-primary-500 text-primary-700': upvoted,
-                'bg-white border-gray-300 text-gray-700 hover:border-gray-400': !upvoted
+                'bg-primary-100 dark:bg-primary-900 border-primary-500 text-primary-700 dark:text-primary-200': upvoted,
+                'bg-white dark:bg-gray-800 border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 hover:border-gray-400': !upvoted
             }"
             class="{{ $sizeClasses }} flex flex-col items-center justify-center border-2 rounded-lg transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed">
         <svg :class="{ 'animate-bounce': loading }"
diff --git a/resources/views/components/ui/modal.blade.php b/resources/views/components/ui/modal.blade.php
index dc57193..f94779c 100644
--- a/resources/views/components/ui/modal.blade.php
+++ b/resources/views/components/ui/modal.blade.php
@@ -55,7 +55,7 @@ style="display: {{ $show ? 'block' : 'none' }};">
         <div class="absolute inset-0 bg-gray-500 opacity-75"></div>
     </div>
 
-    <div x-show="show" class="mb-6 bg-white rounded-lg overflow-hidden shadow-xl transform transition-all sm:w-full sm:mx-auto {{ $maxWidthClass }}"
+    <div x-show="show" class="mb-6 bg-white dark:bg-gray-800 rounded-lg overflow-hidden shadow-xl transform transition-all sm:w-full sm:mx-auto {{ $maxWidthClass }}"
          x-transition:enter="ease-out duration-300"
          x-transition:enter-start="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
          x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100"
diff --git a/resources/views/components/ui/notification.blade.php b/resources/views/components/ui/notification.blade.php
index ceaa69d..04d7b5b 100644
--- a/resources/views/components/ui/notification.blade.php
+++ b/resources/views/components/ui/notification.blade.php
@@ -35,7 +35,7 @@ aria-live="assertive">
              x-transition:leave="transition ease-in duration-200"
              x-transition:leave-start="transform translate-x-0 opacity-100"
              x-transition:leave-end="transform translate-x-full opacity-0"
-             class="w-full max-w-sm bg-white shadow-lg rounded-lg pointer-events-auto ring-1 ring-black ring-opacity-5 overflow-hidden">
+             class="w-full max-w-sm bg-white dark:bg-gray-800 shadow-lg rounded-lg pointer-events-auto ring-1 ring-black ring-opacity-5 overflow-hidden">
             <div class="p-4">
                 <div class="flex items-start gap-3">
                     <div class="flex-shrink-0">
@@ -65,12 +65,12 @@ aria-live="assertive">
                         </template>
                     </div>
                     <div class="flex-1 min-w-0">
-                        <p class="text-sm font-medium text-gray-900" x-text="notice.title"></p>
-                        <p class="mt-1 text-sm text-gray-500 break-words" x-text="notice.message"></p>
+                        <p class="text-sm font-medium text-gray-900 dark:text-white" x-text="notice.title"></p>
+                        <p class="mt-1 text-sm text-gray-500 dark:text-gray-400 break-words" x-text="notice.message"></p>
                     </div>
                     <div class="flex-shrink-0">
                         <button @click="remove(notice.id)"
-                                class="bg-white rounded-md inline-flex text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500">
+                                class="bg-white dark:bg-gray-800 rounded-md inline-flex text-gray-400 dark:text-gray-500 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500">
                             <span class="sr-only">Close</span>
                             <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
                                 <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path>
diff --git a/resources/views/products/create.blade.php b/resources/views/products/create.blade.php
index a563381..4a66e89 100644
--- a/resources/views/products/create.blade.php
+++ b/resources/views/products/create.blade.php
@@ -3,19 +3,19 @@
 @section('content')
 <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
     <div class="mb-8">
-        <h1 class="text-3xl font-bold text-gray-900">Submit a Product</h1>
-        <p class="mt-2 text-sm text-gray-600">Share your EU-based tech product with the community</p>
+        <h1 class="text-3xl font-bold text-gray-900 dark:text-white">Submit a Product</h1>
+        <p class="mt-2 text-sm text-gray-600 dark:text-gray-400">Share your EU-based tech product with the community</p>
     </div>
 
-    <div class="bg-white shadow-sm rounded-lg">
+    <div class="bg-white dark:bg-gray-800 shadow-sm rounded-lg">
         <div class="px-4 py-5 sm:p-6">
             <form method="POST" action="{{ route('products.store') }}" enctype="multipart/form-data" class="space-y-6">
                 @csrf
 
                 <!-- Title -->
                 <div>
-                    <label for="title" class="block text-sm font-medium text-gray-700">
-                        Product Title <span class="text-red-600">*</span>
+                    <label for="title" class="block text-sm font-medium text-gray-700 dark:text-gray-300">
+                        Product Title <span class="text-red-600 dark:text-red-400">*</span>
                     </label>
                     <div class="mt-1">
                         <input type="text"
@@ -25,18 +25,18 @@
                                required
                                maxlength="255"
                                placeholder="e.g., My Awesome Product"
-                               class="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-primary-500 focus:border-primary-500 sm:text-sm @error('title') border-red-300 text-red-900 placeholder-red-300 focus:ring-red-500 focus:border-red-500 @enderror">
+                               class="appearance-none block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-primary-500 focus:border-primary-500 sm:text-sm @error('title') border-red-300 text-red-900 dark:text-red-200 placeholder-red-300 focus:ring-red-500 focus:border-red-500 @enderror dark:bg-gray-700">
                         @error('title')
-                            <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
+                            <p class="mt-2 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
                         @enderror
-                        <p class="mt-2 text-sm text-gray-500">A catchy, descriptive title for your product.</p>
+                        <p class="mt-2 text-sm text-gray-500 dark:text-gray-400">A catchy, descriptive title for your product.</p>
                     </div>
                 </div>
 
                 <!-- Description -->
                 <div>
-                    <label for="description" class="block text-sm font-medium text-gray-700">
-                        Description <span class="text-red-600">*</span>
+                    <label for="description" class="block text-sm font-medium text-gray-700 dark:text-gray-300">
+                        Description <span class="text-red-600 dark:text-red-400">*</span>
                     </label>
                     <div class="mt-1">
                         <textarea id="description"
@@ -44,18 +44,18 @@
                                   rows="5"
                                   required
                                   placeholder="Tell us about your product..."
-                                  class="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-primary-500 focus:border-primary-500 sm:text-sm @error('description') border-red-300 text-red-900 placeholder-red-300 focus:ring-red-500 focus:border-red-500 @enderror">{{ old('description') }}</textarea>
+                                  class="appearance-none block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-primary-500 focus:border-primary-500 sm:text-sm @error('description') border-red-300 text-red-900 dark:text-red-200 placeholder-red-300 focus:ring-red-500 focus:border-red-500 @enderror dark:bg-gray-700">{{ old('description') }}</textarea>
                         @error('description')
-                            <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
+                            <p class="mt-2 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
                         @enderror
-                        <p class="mt-2 text-sm text-gray-500">Provide a detailed description of your product (what it does, key features, etc.).</p>
+                        <p class="mt-2 text-sm text-gray-500 dark:text-gray-400">Provide a detailed description of your product (what it does, key features, etc.).</p>
                     </div>
                 </div>
 
                 <!-- Website URL -->
                 <div>
-                    <label for="website_url" class="block text-sm font-medium text-gray-700">
-                        Website URL <span class="text-red-600">*</span>
+                    <label for="website_url" class="block text-sm font-medium text-gray-700 dark:text-gray-300">
+                        Website URL <span class="text-red-600 dark:text-red-400">*</span>
                     </label>
                     <div class="mt-1">
                         <input type="url"
@@ -64,24 +64,24 @@
                                value="{{ old('website_url') }}"
                                required
                                placeholder="https://example.com"
-                               class="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-primary-500 focus:border-primary-500 sm:text-sm @error('website_url') border-red-300 text-red-900 placeholder-red-300 focus:ring-red-500 focus:border-red-500 @enderror">
+                               class="appearance-none block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-primary-500 focus:border-primary-500 sm:text-sm @error('website_url') border-red-300 text-red-900 dark:text-red-200 placeholder-red-300 focus:ring-red-500 focus:border-red-500 @enderror dark:bg-gray-700">
                         @error('website_url')
-                            <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
+                            <p class="mt-2 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
                         @enderror
-                        <p class="mt-2 text-sm text-gray-500">The full URL to your product's website or landing page.</p>
+                        <p class="mt-2 text-sm text-gray-500 dark:text-gray-400">The full URL to your product's website or landing page.</p>
                     </div>
                 </div>
 
                 <!-- Category -->
                 <div>
-                    <label for="category_id" class="block text-sm font-medium text-gray-700">
-                        Category <span class="text-red-600">*</span>
+                    <label for="category_id" class="block text-sm font-medium text-gray-700 dark:text-gray-300">
+                        Category <span class="text-red-600 dark:text-red-400">*</span>
                     </label>
                     <div class="mt-1">
                         <select id="category_id"
                                 name="category_id"
                                 required
-                                class="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-primary-500 focus:border-primary-500 sm:text-sm @error('category_id') border-red-300 text-red-900 focus:ring-red-500 focus:border-red-500 @enderror">
+                                class="appearance-none block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-primary-500 focus:border-primary-500 sm:text-sm @error('category_id') border-red-300 text-red-900 dark:text-red-200 focus:ring-red-500 focus:border-red-500 @enderror dark:bg-gray-700">
                             <option value="">Select a category...</option>
                             @foreach($categories as $category)
                                 <option value="{{ $category->id }}" {{ old('category_id') == $category->id ? 'selected' : '' }}>
@@ -90,64 +90,64 @@
                             @endforeach
                         </select>
                         @error('category_id')
-                            <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
+                            <p class="mt-2 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
                         @enderror
-                        <p class="mt-2 text-sm text-gray-500">Choose the category that best fits your product.</p>
+                        <p class="mt-2 text-sm text-gray-500 dark:text-gray-400">Choose the category that best fits your product.</p>
                     </div>
                 </div>
 
                 <!-- Tags -->
                 @if($tags->count() > 0)
                 <div>
-                    <label class="block text-sm font-medium text-gray-700 mb-2">
+                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                         Tags
                     </label>
                     <div class="mt-1 space-y-2">
                         <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
                             @foreach($tags as $tag)
-                                <label class="relative flex items-start p-3 border border-gray-300 rounded-md cursor-pointer hover:bg-gray-50 transition-colors">
+                                <label class="relative flex items-start p-3 border border-gray-300 dark:border-gray-600 rounded-md cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors">
                                     <div class="flex items-center h-5">
                                         <input type="checkbox"
                                                name="tags[]"
                                                value="{{ $tag->id }}"
                                                {{ is_array(old('tags')) && in_array($tag->id, old('tags')) ? 'checked' : '' }}
-                                               class="focus:ring-primary-500 h-4 w-4 text-primary-600 border-gray-300 rounded">
+                                               class="focus:ring-primary-500 h-4 w-4 text-primary-600 dark:text-primary-400 border-gray-300 dark:border-gray-600 rounded">
                                     </div>
                                     <div class="ml-3 flex-1">
                                         <div class="flex items-center gap-2">
                                             <span class="inline-block w-3 h-3 rounded-full" style="background-color: {{ $tag->color }}"></span>
-                                            <span class="text-sm font-medium text-gray-900">{{ $tag->name }}</span>
+                                            <span class="text-sm font-medium text-gray-900 dark:text-white">{{ $tag->name }}</span>
                                         </div>
                                         @if($tag->description)
-                                            <p class="text-xs text-gray-500 mt-1">{{ $tag->description }}</p>
+                                            <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">{{ $tag->description }}</p>
                                         @endif
                                     </div>
                                 </label>
                             @endforeach
                         </div>
                         @error('tags')
-                            <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
+                            <p class="mt-2 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
                         @enderror
-                        <p class="mt-2 text-sm text-gray-500">Select all tags that apply to your product.</p>
+                        <p class="mt-2 text-sm text-gray-500 dark:text-gray-400">Select all tags that apply to your product.</p>
                     </div>
                 </div>
                 @endif
 
                 <!-- Badges -->
                 <div>
-                    <label class="block text-sm font-medium text-gray-700 mb-2">
+                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                         Badges
                     </label>
                     <div class="mt-1 grid grid-cols-2 sm:grid-cols-4 gap-3">
                         @foreach(\App\Models\Product::BADGES as $key => $label)
-                            <label class="flex items-center p-3 border border-gray-300 rounded-md">
+                            <label class="flex items-center p-3 border border-gray-300 dark:border-gray-600 rounded-md">
                                 <input type="hidden" name="{{ $key }}" value="0">
                                 <input type="checkbox"
                                        name="{{ $key }}"
                                        value="1"
                                        {{ old($key, false) ? 'checked' : '' }}
-                                       class="focus:ring-primary-500 h-4 w-4 text-primary-600 border-gray-300 rounded">
-                                <span class="ml-2 text-sm text-gray-900">{{ $label }}</span>
+                                       class="focus:ring-primary-500 h-4 w-4 text-primary-600 dark:text-primary-400 border-gray-300 dark:border-gray-600 rounded">
+                                <span class="ml-2 text-sm text-gray-900 dark:text-white">{{ $label }}</span>
                             </label>
                         @endforeach
                     </div>
@@ -155,7 +155,7 @@
 
                 <!-- Thumbnail -->
                 <div>
-                    <label for="thumbnail" class="block text-sm font-medium text-gray-700">
+                    <label for="thumbnail" class="block text-sm font-medium text-gray-700 dark:text-gray-300">
                         Product Thumbnail
                     </label>
                     <div class="mt-1">
@@ -163,25 +163,25 @@
                                id="thumbnail"
                                name="thumbnail"
                                accept="image/*"
-                               class="block w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded-md file:border-0 file:text-sm file:font-semibold file:bg-primary-50 file:text-primary-700 hover:file:bg-primary-100 @error('thumbnail') border-red-300 @enderror">
+                               class="block w-full text-sm text-gray-500 dark:text-gray-400 file:mr-4 file:py-2 file:px-4 file:rounded-md file:border-0 file:text-sm file:font-semibold file:bg-primary-50 file:text-primary-700 hover:file:bg-primary-100 @error('thumbnail') border-red-300 dark:border-red-700 @enderror">
                         @error('thumbnail')
-                            <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
+                            <p class="mt-2 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
                         @enderror
-                        <p class="mt-2 text-sm text-gray-500">Upload a product screenshot or logo (JPEG, PNG, or GIF, max 2MB).</p>
+                        <p class="mt-2 text-sm text-gray-500 dark:text-gray-400">Upload a product screenshot or logo (JPEG, PNG, or GIF, max 2MB).</p>
                     </div>
                 </div>
 
                 <!-- Image Preview -->
                 <div id="imagePreview" class="hidden">
-                    <label class="block text-sm font-medium text-gray-700 mb-2">Preview:</label>
+                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Preview:</label>
                     <div class="mt-1">
-                        <img id="preview" src="#" alt="Thumbnail preview" class="max-w-xs rounded-lg border border-gray-300 shadow-sm">
+                        <img id="preview" src="#" alt="Thumbnail preview" class="max-w-xs rounded-lg border border-gray-300 dark:border-gray-600 shadow-sm">
                     </div>
                 </div>
 
                 <!-- Screenshots -->
                 <div x-data="{ previews: [] }">
-                    <label for="screenshots" class="block text-sm font-medium text-gray-700">
+                    <label for="screenshots" class="block text-sm font-medium text-gray-700 dark:text-gray-300">
                         Screenshots
                     </label>
                     <div class="mt-1">
@@ -191,17 +191,17 @@
                                accept="image/*"
                                multiple
                                @change="previews = Array.from($event.target.files).map(f => URL.createObjectURL(f))"
-                               class="block w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded-md file:border-0 file:text-sm file:font-semibold file:bg-primary-50 file:text-primary-700 hover:file:bg-primary-100">
+                               class="block w-full text-sm text-gray-500 dark:text-gray-400 file:mr-4 file:py-2 file:px-4 file:rounded-md file:border-0 file:text-sm file:font-semibold file:bg-primary-50 file:text-primary-700 hover:file:bg-primary-100">
                         @error('screenshots')
-                            <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
+                            <p class="mt-2 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
                         @enderror
                         @foreach($errors->get('screenshots.*') as $messages)
-                            <p class="mt-2 text-sm text-red-600">{{ $messages[0] }}</p>
+                            <p class="mt-2 text-sm text-red-600 dark:text-red-400">{{ $messages[0] }}</p>
                         @endforeach
-                        <p class="mt-2 text-sm text-gray-500">Add several images (JPEG, PNG, or GIF, max 2MB each).</p>
+                        <p class="mt-2 text-sm text-gray-500 dark:text-gray-400">Add several images (JPEG, PNG, or GIF, max 2MB each).</p>
                         <div class="mt-3 flex flex-wrap gap-2" x-show="previews.length" style="display: none">
                             <template x-for="src in previews" :key="src">
-                                <img :src="src" alt="" class="h-20 w-28 object-cover rounded border border-gray-300">
+                                <img :src="src" alt="" class="h-20 w-28 object-cover rounded border border-gray-300 dark:border-gray-600">
                             </template>
                         </div>
                     </div>
@@ -212,7 +212,7 @@
                 <x-product.team-form />
 
                 <!-- Info Alert -->
-                <div class="rounded-md bg-blue-50 p-4">
+                <div class="rounded-md bg-blue-50 dark:bg-blue-900/20 p-4">
                     <div class="flex">
                         <div class="flex-shrink-0">
                             <svg class="h-5 w-5 text-blue-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
@@ -220,7 +220,7 @@
                             </svg>
                         </div>
                         <div class="ml-3 flex-1">
-                            <p class="text-sm text-blue-700">
+                            <p class="text-sm text-blue-700 dark:text-blue-300">
                                 <strong>Note:</strong> Your product will be reviewed by our moderators before it appears on the site.
                             </p>
                         </div>
@@ -228,9 +228,9 @@
                 </div>
 
                 <!-- Submit Buttons -->
-                <div class="flex items-center justify-between pt-5 border-t border-gray-200">
+                <div class="flex items-center justify-between pt-5 border-t border-gray-200 dark:border-gray-700">
                     <a href="{{ route('products.index') }}"
-                       class="inline-flex items-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500">
+                       class="inline-flex items-center px-4 py-2 border border-gray-300 dark:border-gray-600 shadow-sm text-sm font-medium rounded-md text-gray-700 dark:text-gray-300 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-primary-500">
                         Cancel
                     </a>
                     <button type="submit"
diff --git a/resources/views/products/edit.blade.php b/resources/views/products/edit.blade.php
index e34a7a7..9d5c20a 100644
--- a/resources/views/products/edit.blade.php
+++ b/resources/views/products/edit.blade.php
@@ -3,11 +3,11 @@
 @section('content')
 <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
     <div class="mb-8">
-        <h1 class="text-3xl font-bold text-gray-900">Edit Product</h1>
-        <p class="mt-2 text-sm text-gray-600">Update your product information and details</p>
+        <h1 class="text-3xl font-bold text-gray-900 dark:text-white">Edit Product</h1>
+        <p class="mt-2 text-sm text-gray-600 dark:text-gray-400">Update your product information and details</p>
     </div>
 
-    <div class="bg-white shadow-sm rounded-lg">
+    <div class="bg-white dark:bg-gray-800 shadow-sm rounded-lg">
         <div class="px-4 py-5 sm:p-6">
             <form method="POST" action="{{ route('products.update', $product) }}" enctype="multipart/form-data" class="space-y-6">
                 @csrf
@@ -15,8 +15,8 @@
 
                 <!-- Title -->
                 <div>
-                    <label for="title" class="block text-sm font-medium text-gray-700">
-                        Product Title <span class="text-red-600">*</span>
+                    <label for="title" class="block text-sm font-medium text-gray-700 dark:text-gray-300">
+                        Product Title <span class="text-red-600 dark:text-red-400">*</span>
                     </label>
                     <div class="mt-1">
                         <input type="text"
@@ -26,18 +26,18 @@
                                required
                                maxlength="255"
                                placeholder="e.g., My Awesome Product"
-                               class="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-primary-500 focus:border-primary-500 sm:text-sm @error('title') border-red-300 text-red-900 placeholder-red-300 focus:ring-red-500 focus:border-red-500 @enderror">
+                               class="appearance-none block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-primary-500 focus:border-primary-500 sm:text-sm @error('title') border-red-300 text-red-900 dark:text-red-200 placeholder-red-300 focus:ring-red-500 focus:border-red-500 @enderror dark:bg-gray-700">
                         @error('title')
-                            <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
+                            <p class="mt-2 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
                         @enderror
-                        <p class="mt-2 text-sm text-gray-500">A catchy, descriptive title for your product.</p>
+                        <p class="mt-2 text-sm text-gray-500 dark:text-gray-400">A catchy, descriptive title for your product.</p>
                     </div>
                 </div>
 
                 <!-- Description -->
                 <div>
-                    <label for="description" class="block text-sm font-medium text-gray-700">
-                        Description <span class="text-red-600">*</span>
+                    <label for="description" class="block text-sm font-medium text-gray-700 dark:text-gray-300">
+                        Description <span class="text-red-600 dark:text-red-400">*</span>
                     </label>
                     <div class="mt-1">
                         <textarea id="description"
@@ -45,18 +45,18 @@
                                   rows="5"
                                   required
                                   placeholder="Tell us about your product..."
-                                  class="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-primary-500 focus:border-primary-500 sm:text-sm @error('description') border-red-300 text-red-900 placeholder-red-300 focus:ring-red-500 focus:border-red-500 @enderror">{{ old('description', $product->description) }}</textarea>
+                                  class="appearance-none block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-primary-500 focus:border-primary-500 sm:text-sm @error('description') border-red-300 text-red-900 dark:text-red-200 placeholder-red-300 focus:ring-red-500 focus:border-red-500 @enderror dark:bg-gray-700">{{ old('description', $product->description) }}</textarea>
                         @error('description')
-                            <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
+                            <p class="mt-2 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
                         @enderror
-                        <p class="mt-2 text-sm text-gray-500">Provide a detailed description of your product (what it does, key features, etc.).</p>
+                        <p class="mt-2 text-sm text-gray-500 dark:text-gray-400">Provide a detailed description of your product (what it does, key features, etc.).</p>
                     </div>
                 </div>
 
                 <!-- Website URL -->
                 <div>
-                    <label for="website_url" class="block text-sm font-medium text-gray-700">
-                        Website URL <span class="text-red-600">*</span>
+                    <label for="website_url" class="block text-sm font-medium text-gray-700 dark:text-gray-300">
+                        Website URL <span class="text-red-600 dark:text-red-400">*</span>
                     </label>
                     <div class="mt-1">
                         <input type="url"
@@ -65,24 +65,24 @@
                                value="{{ old('website_url', $product->website_url) }}"
                                required
                                placeholder="https://example.com"
-                               class="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-primary-500 focus:border-primary-500 sm:text-sm @error('website_url') border-red-300 text-red-900 placeholder-red-300 focus:ring-red-500 focus:border-red-500 @enderror">
+                               class="appearance-none block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-primary-500 focus:border-primary-500 sm:text-sm @error('website_url') border-red-300 text-red-900 dark:text-red-200 placeholder-red-300 focus:ring-red-500 focus:border-red-500 @enderror dark:bg-gray-700">
                         @error('website_url')
-                            <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
+                            <p class="mt-2 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
                         @enderror
-                        <p class="mt-2 text-sm text-gray-500">The full URL to your product's website or landing page.</p>
+                        <p class="mt-2 text-sm text-gray-500 dark:text-gray-400">The full URL to your product's website or landing page.</p>
                     </div>
                 </div>
 
                 <!-- Category -->
                 <div>
-                    <label for="category_id" class="block text-sm font-medium text-gray-700">
-                        Category <span class="text-red-600">*</span>
+                    <label for="category_id" class="block text-sm font-medium text-gray-700 dark:text-gray-300">
+                        Category <span class="text-red-600 dark:text-red-400">*</span>
                     </label>
                     <div class="mt-1">
                         <select id="category_id"
                                 name="category_id"
                                 required
-                                class="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-primary-500 focus:border-primary-500 sm:text-sm @error('category_id') border-red-300 text-red-900 focus:ring-red-500 focus:border-red-500 @enderror">
+                                class="appearance-none block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-primary-500 focus:border-primary-500 sm:text-sm @error('category_id') border-red-300 text-red-900 dark:text-red-200 focus:ring-red-500 focus:border-red-500 @enderror dark:bg-gray-700">
                             <option value="">Select a category...</option>
                             @foreach($categories as $category)
                                 <option value="{{ $category->id }}" {{ old('category_id', $product->category_id) == $category->id ? 'selected' : '' }}>
@@ -91,16 +91,16 @@
                             @endforeach
                         </select>
                         @error('category_id')
-                            <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
+                            <p class="mt-2 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
                         @enderror
-                        <p class="mt-2 text-sm text-gray-500">Choose the category that best fits your product.</p>
+                        <p class="mt-2 text-sm text-gray-500 dark:text-gray-400">Choose the category that best fits your product.</p>
                     </div>
                 </div>
 
                 <!-- Tags -->
                 @if($tags->count() > 0)
                 <div>
-                    <label class="block text-sm font-medium text-gray-700 mb-2">
+                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                         Tags
                     </label>
                     <div class="mt-1 space-y-2">
@@ -111,30 +111,30 @@
                                         ? in_array($tag->id, old('tags'))
                                         : $product->tags->contains($tag->id);
                                 @endphp
-                                <label class="relative flex items-start p-3 border border-gray-300 rounded-md cursor-pointer hover:bg-gray-50 transition-colors">
+                                <label class="relative flex items-start p-3 border border-gray-300 dark:border-gray-600 rounded-md cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors">
                                     <div class="flex items-center h-5">
                                         <input type="checkbox"
                                                name="tags[]"
                                                value="{{ $tag->id }}"
                                                {{ $isChecked ? 'checked' : '' }}
-                                               class="focus:ring-primary-500 h-4 w-4 text-primary-600 border-gray-300 rounded">
+                                               class="focus:ring-primary-500 h-4 w-4 text-primary-600 dark:text-primary-400 border-gray-300 dark:border-gray-600 rounded">
                                     </div>
                                     <div class="ml-3 flex-1">
                                         <div class="flex items-center gap-2">
                                             <span class="inline-block w-3 h-3 rounded-full" style="background-color: {{ $tag->color }}"></span>
-                                            <span class="text-sm font-medium text-gray-900">{{ $tag->name }}</span>
+                                            <span class="text-sm font-medium text-gray-900 dark:text-white">{{ $tag->name }}</span>
                                         </div>
                                         @if($tag->description)
-                                            <p class="text-xs text-gray-500 mt-1">{{ $tag->description }}</p>
+                                            <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">{{ $tag->description }}</p>
                                         @endif
                                     </div>
                                 </label>
                             @endforeach
                         </div>
                         @error('tags')
-                            <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
+                            <p class="mt-2 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
                         @enderror
-                        <p class="mt-2 text-sm text-gray-500">Select all tags that apply to your product.</p>
+                        <p class="mt-2 text-sm text-gray-500 dark:text-gray-400">Select all tags that apply to your product.</p>
                     </div>
                 </div>
                 @endif
@@ -145,43 +145,43 @@
 
                 <!-- Badges -->
                 <div>
-                    <label class="block text-sm font-medium text-gray-700 mb-2">
+                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                         Badges
                     </label>
                     <div class="mt-1 grid grid-cols-2 sm:grid-cols-4 gap-3">
                         @foreach(\App\Models\Product::BADGES as $key => $label)
-                            <label class="flex items-center p-3 border border-gray-300 rounded-md">
+                            <label class="flex items-center p-3 border border-gray-300 dark:border-gray-600 rounded-md">
                                 <input type="hidden" name="{{ $key }}" value="0">
                                 <input type="checkbox"
                                        name="{{ $key }}"
                                        value="1"
                                        {{ old($key, $product->{$key}) ? 'checked' : '' }}
                                        {{ $badgesLocked ? 'disabled' : '' }}
-                                       class="focus:ring-primary-500 h-4 w-4 text-primary-600 border-gray-300 rounded">
-                                <span class="ml-2 text-sm text-gray-900">{{ $label }}</span>
+                                       class="focus:ring-primary-500 h-4 w-4 text-primary-600 dark:text-primary-400 border-gray-300 dark:border-gray-600 rounded">
+                                <span class="ml-2 text-sm text-gray-900 dark:text-white">{{ $label }}</span>
                             </label>
                         @endforeach
                     </div>
                     @if($badgesLocked)
-                        <p class="mt-2 text-sm text-gray-500">Locked after approval</p>
+                        <p class="mt-2 text-sm text-gray-500 dark:text-gray-400">Locked after approval</p>
                     @endif
                 </div>
 
                 <!-- Current Thumbnail -->
                 @if($product->thumbnail_url)
                     <div>
-                        <label class="block text-sm font-medium text-gray-700 mb-2">Current Thumbnail:</label>
+                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Current Thumbnail:</label>
                         <div class="mt-1">
                             <img src="{{ $product->thumbnail_url }}"
                                  alt="{{ $product->title }}"
-                                 class="max-w-xs rounded-lg border border-gray-300 shadow-sm">
+                                 class="max-w-xs rounded-lg border border-gray-300 dark:border-gray-600 shadow-sm">
                         </div>
                     </div>
                 @endif
 
                 <!-- New Thumbnail -->
                 <div>
-                    <label for="thumbnail" class="block text-sm font-medium text-gray-700">
+                    <label for="thumbnail" class="block text-sm font-medium text-gray-700 dark:text-gray-300">
                         {{ $product->thumbnail_url ? 'Replace Thumbnail' : 'Product Thumbnail' }}
                     </label>
                     <div class="mt-1">
@@ -189,32 +189,32 @@
                                id="thumbnail"
                                name="thumbnail"
                                accept="image/*"
-                               class="block w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded-md file:border-0 file:text-sm file:font-semibold file:bg-primary-50 file:text-primary-700 hover:file:bg-primary-100 @error('thumbnail') border-red-300 @enderror">
+                               class="block w-full text-sm text-gray-500 dark:text-gray-400 file:mr-4 file:py-2 file:px-4 file:rounded-md file:border-0 file:text-sm file:font-semibold file:bg-primary-50 file:text-primary-700 hover:file:bg-primary-100 @error('thumbnail') border-red-300 dark:border-red-700 @enderror">
                         @error('thumbnail')
-                            <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
+                            <p class="mt-2 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
                         @enderror
-                        <p class="mt-2 text-sm text-gray-500">Upload a product screenshot or logo (JPEG, PNG, or GIF, max 2MB).</p>
+                        <p class="mt-2 text-sm text-gray-500 dark:text-gray-400">Upload a product screenshot or logo (JPEG, PNG, or GIF, max 2MB).</p>
                     </div>
                 </div>
 
                 <!-- Image Preview -->
                 <div id="imagePreview" class="hidden">
-                    <label class="block text-sm font-medium text-gray-700 mb-2">New Preview:</label>
+                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">New Preview:</label>
                     <div class="mt-1">
-                        <img id="preview" src="#" alt="Thumbnail preview" class="max-w-xs rounded-lg border border-gray-300 shadow-sm">
+                        <img id="preview" src="#" alt="Thumbnail preview" class="max-w-xs rounded-lg border border-gray-300 dark:border-gray-600 shadow-sm">
                     </div>
                 </div>
 
                 @if($product->screenshots->isNotEmpty())
                     <div>
-                        <label class="block text-sm font-medium text-gray-700 mb-2">Current Screenshots:</label>
+                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Current Screenshots:</label>
                         <div class="mt-1 grid grid-cols-2 sm:grid-cols-4 gap-3">
                             @foreach($product->screenshots as $shot)
                                 <label class="block">
-                                    <img src="{{ $shot->url }}" alt="" class="h-24 w-full object-cover rounded border border-gray-300">
-                                    <span class="mt-1 flex items-center text-sm text-gray-700">
+                                    <img src="{{ $shot->url }}" alt="" class="h-24 w-full object-cover rounded border border-gray-300 dark:border-gray-600">
+                                    <span class="mt-1 flex items-center text-sm text-gray-700 dark:text-gray-300">
                                         <input type="checkbox" name="remove_screenshots[]" value="{{ $shot->id }}"
-                                               class="h-4 w-4 text-primary-600 border-gray-300 rounded">
+                                               class="h-4 w-4 text-primary-600 dark:text-primary-400 border-gray-300 dark:border-gray-600 rounded">
                                         <span class="ml-2">Remove</span>
                                     </span>
                                 </label>
@@ -225,7 +225,7 @@
 
                 <!-- Screenshots -->
                 <div x-data="{ previews: [] }">
-                    <label for="screenshots" class="block text-sm font-medium text-gray-700">
+                    <label for="screenshots" class="block text-sm font-medium text-gray-700 dark:text-gray-300">
                         Screenshots
                     </label>
                     <div class="mt-1">
@@ -235,17 +235,17 @@
                                accept="image/*"
                                multiple
                                @change="previews = Array.from($event.target.files).map(f => URL.createObjectURL(f))"
-                               class="block w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded-md file:border-0 file:text-sm file:font-semibold file:bg-primary-50 file:text-primary-700 hover:file:bg-primary-100">
+                               class="block w-full text-sm text-gray-500 dark:text-gray-400 file:mr-4 file:py-2 file:px-4 file:rounded-md file:border-0 file:text-sm file:font-semibold file:bg-primary-50 file:text-primary-700 hover:file:bg-primary-100">
                         @error('screenshots')
-                            <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
+                            <p class="mt-2 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
                         @enderror
                         @foreach($errors->get('screenshots.*') as $messages)
-                            <p class="mt-2 text-sm text-red-600">{{ $messages[0] }}</p>
+                            <p class="mt-2 text-sm text-red-600 dark:text-red-400">{{ $messages[0] }}</p>
                         @endforeach
-                        <p class="mt-2 text-sm text-gray-500">Add several images (JPEG, PNG, or GIF, max 2MB each).</p>
+                        <p class="mt-2 text-sm text-gray-500 dark:text-gray-400">Add several images (JPEG, PNG, or GIF, max 2MB each).</p>
                         <div class="mt-3 flex flex-wrap gap-2" x-show="previews.length" style="display: none">
                             <template x-for="src in previews" :key="src">
-                                <img :src="src" alt="" class="h-20 w-28 object-cover rounded border border-gray-300">
+                                <img :src="src" alt="" class="h-20 w-28 object-cover rounded border border-gray-300 dark:border-gray-600">
                             </template>
                         </div>
                     </div>
@@ -256,7 +256,7 @@
                 <x-product.team-form :members="$product->members" :readonly="! (auth()->id() === $product->user_id || auth()->user()->isAdmin())" />
 
                 <!-- Info Alert -->
-                <div class="rounded-md bg-blue-50 p-4">
+                <div class="rounded-md bg-blue-50 dark:bg-blue-900/20 p-4">
                     <div class="flex">
                         <div class="flex-shrink-0">
                             <svg class="h-5 w-5 text-blue-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
@@ -264,7 +264,7 @@
                             </svg>
                         </div>
                         <div class="ml-3 flex-1">
-                            <p class="text-sm text-blue-700">
+                            <p class="text-sm text-blue-700 dark:text-blue-300">
                                 <strong>Note:</strong> Changes to your product may need to be reviewed by moderators before appearing on the site.
                             </p>
                         </div>
@@ -272,9 +272,9 @@
                 </div>
 
                 <!-- Submit Buttons -->
-                <div class="flex items-center justify-between pt-5 border-t border-gray-200">
+                <div class="flex items-center justify-between pt-5 border-t border-gray-200 dark:border-gray-700">
                     <a href="{{ route('products.show', $product) }}"
-                       class="inline-flex items-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500">
+                       class="inline-flex items-center px-4 py-2 border border-gray-300 dark:border-gray-600 shadow-sm text-sm font-medium rounded-md text-gray-700 dark:text-gray-300 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-primary-500">
                         Cancel
                     </a>
                     <button type="submit"
diff --git a/resources/views/products/index.blade.php b/resources/views/products/index.blade.php
index f8e37ad..aa959ee 100644
--- a/resources/views/products/index.blade.php
+++ b/resources/views/products/index.blade.php
@@ -6,13 +6,13 @@
 
 @section('content')
 <!-- Hero Section -->
-<div class="bg-gradient-to-br from-primary-50 via-white to-accent-50 border-b border-gray-200">
+<div class="bg-gradient-to-br from-primary-50 via-white to-accent-50 border-b border-gray-200 dark:border-gray-700">
     <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12 sm:py-16">
         <div class="text-center max-w-3xl mx-auto">
-            <h1 class="text-4xl sm:text-5xl font-bold text-gray-900 mb-4">
+            <h1 class="text-4xl sm:text-5xl font-bold text-gray-900 dark:text-white mb-4">
                 Discover the best tech from Europe
             </h1>
-            <p class="text-lg text-gray-600 mb-8">
+            <p class="text-lg text-gray-600 dark:text-gray-400 mb-8">
                 Find amazing products built by European makers and companies
             </p>
 
@@ -24,7 +24,7 @@
                                name="search"
                                value="{{ request('search') }}"
                                placeholder="Search for products..."
-                               class="w-full px-6 py-4 text-lg border-2 border-gray-300 rounded-full focus:border-primary-500 focus:ring-2 focus:ring-primary-200 transition-all duration-200">
+                               class="w-full px-6 py-4 text-lg border-2 border-gray-300 dark:border-gray-600 rounded-full focus:border-primary-500 focus:ring-2 focus:ring-primary-200 transition-all duration-200 dark:bg-gray-700 dark:text-white">
                         <button type="submit"
                                 class="absolute right-2 top-1/2 -translate-y-1/2 bg-primary-600 text-white px-6 py-2 rounded-full hover:bg-primary-700 transition-colors">
                             <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -50,7 +50,7 @@
                             type="button"
                             class="w-full inline-flex items-center justify-between px-4 py-2 border border-gray-300 dark:border-gray-600 shadow-sm text-sm font-medium rounded-md text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500">
                         <span class="flex items-center">
-                            <svg class="mr-2 h-5 w-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <svg class="mr-2 h-5 w-5 text-gray-400 dark:text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4"></path>
                             </svg>
                             Filters & Sort
@@ -66,21 +66,21 @@
                      class="lg:flex lg:items-end lg:gap-4 grid grid-cols-1 sm:grid-cols-2 gap-4 lg:gap-4">
                     <!-- Search (hidden on desktop as it's in hero) -->
                     <div class="lg:hidden sm:col-span-2">
-                        <label for="mobile-search" class="block text-sm font-medium text-gray-700 mb-2">Search</label>
+                        <label for="mobile-search" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Search</label>
                         <input type="text"
                                id="mobile-search"
                                name="search"
                                value="{{ request('search') }}"
                                placeholder="Search products..."
-                               class="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-primary-500 focus:border-primary-500 sm:text-sm">
+                               class="appearance-none block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-primary-500 focus:border-primary-500 sm:text-sm dark:bg-gray-700 dark:text-white">
                     </div>
 
                     <!-- Category Filter -->
                     <div class="lg:flex-1">
-                        <label for="category" class="block text-sm font-medium text-gray-700 mb-2">Category</label>
+                        <label for="category" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Category</label>
                         <select name="category"
                                 id="category"
-                                class="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-primary-500 focus:border-primary-500 sm:text-sm">
+                                class="appearance-none block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-primary-500 focus:border-primary-500 sm:text-sm dark:bg-gray-700 dark:text-white">
                             <option value="">All Categories</option>
                             @foreach($categories as $category)
                                 <option value="{{ $category->id }}" {{ request('category') == $category->id ? 'selected' : '' }}>
@@ -92,10 +92,10 @@
 
                     <!-- Date Range Filter -->
                     <div class="lg:flex-1">
-                        <label for="date_range" class="block text-sm font-medium text-gray-700 mb-2">Time Period</label>
+                        <label for="date_range" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Time Period</label>
                         <select name="date_range"
                                 id="date_range"
-                                class="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-primary-500 focus:border-primary-500 sm:text-sm">
+                                class="appearance-none block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-primary-500 focus:border-primary-500 sm:text-sm dark:bg-gray-700 dark:text-white">
                             <option value="">All Time</option>
                             <option value="today" {{ request('date_range') === 'today' ? 'selected' : '' }}>Today</option>
                             <option value="week" {{ request('date_range') === 'week' ? 'selected' : '' }}>This Week</option>
@@ -106,10 +106,10 @@
 
                     <!-- Sort By -->
                     <div class="lg:flex-1">
-                        <label for="sort" class="block text-sm font-medium text-gray-700 mb-2">Sort By</label>
+                        <label for="sort" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Sort By</label>
                         <select name="sort"
                                 id="sort"
-                                class="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-primary-500 focus:border-primary-500 sm:text-sm">
+                                class="appearance-none block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-primary-500 focus:border-primary-500 sm:text-sm dark:bg-gray-700 dark:text-white">
                             <option value="newest" {{ request('sort') === 'newest' || !request('sort') ? 'selected' : '' }}>Newest</option>
                             <option value="popular" {{ request('sort') === 'popular' ? 'selected' : '' }}>Most Popular</option>
                             <option value="oldest" {{ request('sort') === 'oldest' ? 'selected' : '' }}>Oldest</option>
@@ -137,28 +137,28 @@
 
                 <!-- Active Filters Tags -->
                 @if(request()->hasAny(['search', 'category', 'date_range', 'sort']))
-                    <div class="flex flex-wrap gap-2 pt-4 border-t border-gray-200">
-                        <span class="text-sm font-medium text-gray-700">Active filters:</span>
+                    <div class="flex flex-wrap gap-2 pt-4 border-t border-gray-200 dark:border-gray-700">
+                        <span class="text-sm font-medium text-gray-700 dark:text-gray-300">Active filters:</span>
                         @if(request('search'))
-                            <span class="inline-flex items-center px-3 py-1 rounded-full text-sm bg-primary-100 text-primary-800">
+                            <span class="inline-flex items-center px-3 py-1 rounded-full text-sm bg-primary-100 dark:bg-primary-900 text-primary-800 dark:text-primary-200">
                                 Search: "{{ request('search') }}"
                                 <a href="{{ route('products.index', request()->except('search')) }}" class="ml-2 hover:text-primary-900">×</a>
                             </span>
                         @endif
                         @if(request('category'))
-                            <span class="inline-flex items-center px-3 py-1 rounded-full text-sm bg-primary-100 text-primary-800">
+                            <span class="inline-flex items-center px-3 py-1 rounded-full text-sm bg-primary-100 dark:bg-primary-900 text-primary-800 dark:text-primary-200">
                                 {{ $categories->find(request('category'))->name ?? 'Unknown' }}
                                 <a href="{{ route('products.index', request()->except('category')) }}" class="ml-2 hover:text-primary-900">×</a>
                             </span>
                         @endif
                         @if(request('date_range'))
-                            <span class="inline-flex items-center px-3 py-1 rounded-full text-sm bg-primary-100 text-primary-800">
+                            <span class="inline-flex items-center px-3 py-1 rounded-full text-sm bg-primary-100 dark:bg-primary-900 text-primary-800 dark:text-primary-200">
                                 {{ ucfirst(request('date_range')) }}
                                 <a href="{{ route('products.index', request()->except('date_range')) }}" class="ml-2 hover:text-primary-900">×</a>
                             </span>
                         @endif
                         @if(request('sort') && request('sort') !== 'newest')
-                            <span class="inline-flex items-center px-3 py-1 rounded-full text-sm bg-primary-100 text-primary-800">
+                            <span class="inline-flex items-center px-3 py-1 rounded-full text-sm bg-primary-100 dark:bg-primary-900 text-primary-800 dark:text-primary-200">
                                 {{ ucfirst(request('sort')) }}
                                 <a href="{{ route('products.index', request()->except('sort')) }}" class="ml-2 hover:text-primary-900">×</a>
                             </span>
@@ -172,10 +172,10 @@
     <!-- Results Summary -->
     @if($products->total() > 0)
         <div class="mb-6">
-            <p class="text-sm text-gray-600">
-                Showing <span class="font-semibold text-gray-900">{{ $products->firstItem() }}</span> to
-                <span class="font-semibold text-gray-900">{{ $products->lastItem() }}</span> of
-                <span class="font-semibold text-gray-900">{{ $products->total() }}</span> products
+            <p class="text-sm text-gray-600 dark:text-gray-400">
+                Showing <span class="font-semibold text-gray-900 dark:text-white">{{ $products->firstItem() }}</span> to
+                <span class="font-semibold text-gray-900 dark:text-white">{{ $products->lastItem() }}</span> of
+                <span class="font-semibold text-gray-900 dark:text-white">{{ $products->total() }}</span> products
             </p>
         </div>
     @endif
@@ -188,11 +188,11 @@
             <!-- Empty State -->
             <div class="col-span-full">
                 <div class="text-center py-16">
-                    <svg class="mx-auto h-16 w-16 text-gray-400 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <svg class="mx-auto h-16 w-16 text-gray-400 dark:text-gray-500 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.172 16.172a4 4 0 015.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                     </svg>
-                    <h3 class="text-lg font-medium text-gray-900 mb-2">No products found</h3>
-                    <p class="text-gray-600 mb-6">
+                    <h3 class="text-lg font-medium text-gray-900 dark:text-white mb-2">No products found</h3>
+                    <p class="text-gray-600 dark:text-gray-400 mb-6">
                         @if(request()->hasAny(['search', 'category', 'date_range']))
                             Try adjusting your search or filters to find what you're looking for.
                         @else
diff --git a/resources/views/products/manage.blade.php b/resources/views/products/manage.blade.php
index 039afb3..c3ef778 100644
--- a/resources/views/products/manage.blade.php
+++ b/resources/views/products/manage.blade.php
@@ -4,17 +4,17 @@
 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
     <!-- Header -->
     <div class="mb-8">
-        <h1 class="text-3xl font-bold text-gray-900">Product Management</h1>
-        <p class="mt-2 text-sm text-gray-600">Review and manage submitted products</p>
+        <h1 class="text-3xl font-bold text-gray-900 dark:text-white">Product Management</h1>
+        <p class="mt-2 text-sm text-gray-600 dark:text-gray-400">Review and manage submitted products</p>
     </div>
 
     <!-- Status Filter -->
-    <div class="bg-white rounded-lg shadow-sm border border-gray-200 mb-6">
+    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 mb-6">
         <div class="px-6 py-4">
-            <h2 class="text-lg font-medium text-gray-900 mb-4">Filter by Status</h2>
+            <h2 class="text-lg font-medium text-gray-900 dark:text-white mb-4">Filter by Status</h2>
             <div class="flex flex-wrap gap-3">
                 <a href="{{ route('products.manage') }}"
-                   class="inline-flex items-center px-4 py-2 rounded-md text-sm font-medium {{ !request('status') || request('status') == 'pending' ? 'bg-yellow-100 text-yellow-800 ring-2 ring-yellow-600' : 'bg-white text-gray-700 ring-1 ring-gray-300 hover:bg-gray-50' }}">
+                   class="inline-flex items-center px-4 py-2 rounded-md text-sm font-medium {{ !request('status') || request('status') == 'pending' ? 'bg-yellow-100 dark:bg-yellow-900/30 text-yellow-800 dark:text-yellow-200 ring-2 ring-yellow-600' : 'bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 ring-1 ring-gray-300 dark:ring-gray-600 hover:bg-gray-50 dark:hover:bg-gray-700' }}">
                     <svg class="mr-2 h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                     </svg>
@@ -25,7 +25,7 @@
                 </a>
 
                 <a href="{{ route('products.manage', ['status' => 'approved']) }}"
-                   class="inline-flex items-center px-4 py-2 rounded-md text-sm font-medium {{ request('status') == 'approved' ? 'bg-green-100 text-green-800 ring-2 ring-green-600' : 'bg-white text-gray-700 ring-1 ring-gray-300 hover:bg-gray-50' }}">
+                   class="inline-flex items-center px-4 py-2 rounded-md text-sm font-medium {{ request('status') == 'approved' ? 'bg-green-100 dark:bg-green-900/30 text-green-800 dark:text-green-200 ring-2 ring-green-600' : 'bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 ring-1 ring-gray-300 dark:ring-gray-600 hover:bg-gray-50 dark:hover:bg-gray-700' }}">
                     <svg class="mr-2 h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                     </svg>
@@ -36,7 +36,7 @@
                 </a>
 
                 <a href="{{ route('products.manage', ['status' => 'rejected']) }}"
-                   class="inline-flex items-center px-4 py-2 rounded-md text-sm font-medium {{ request('status') == 'rejected' ? 'bg-red-100 text-red-800 ring-2 ring-red-600' : 'bg-white text-gray-700 ring-1 ring-gray-300 hover:bg-gray-50' }}">
+                   class="inline-flex items-center px-4 py-2 rounded-md text-sm font-medium {{ request('status') == 'rejected' ? 'bg-red-100 dark:bg-red-900/30 text-red-800 dark:text-red-200 ring-2 ring-red-600' : 'bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 ring-1 ring-gray-300 dark:ring-gray-600 hover:bg-gray-50 dark:hover:bg-gray-700' }}">
                     <svg class="mr-2 h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                     </svg>
@@ -53,7 +53,7 @@
     @if($products->count() > 0)
         <div class="space-y-4">
             @foreach($products as $product)
-                <div class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden hover:shadow-md transition-shadow">
+                <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden hover:shadow-md transition-shadow">
                     <div class="p-6">
                         <div class="flex items-start gap-4">
                             <!-- Thumbnail -->
@@ -61,10 +61,10 @@
                                 @if($product->thumbnail_url)
                                     <img src="{{ $product->thumbnail_url }}"
                                          alt="{{ $product->title }}"
-                                         class="w-20 h-20 rounded-lg object-cover border border-gray-200">
+                                         class="w-20 h-20 rounded-lg object-cover border border-gray-200 dark:border-gray-700">
                                 @else
-                                    <div class="w-20 h-20 rounded-lg bg-gradient-to-br from-gray-100 to-gray-200 flex items-center justify-center border border-gray-200">
-                                        <svg class="h-8 w-8 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                    <div class="w-20 h-20 rounded-lg bg-gradient-to-br from-gray-100 to-gray-200 flex items-center justify-center border border-gray-200 dark:border-gray-700">
+                                        <svg class="h-8 w-8 text-gray-400 dark:text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
                                         </svg>
                                     </div>
@@ -75,19 +75,19 @@
                             <div class="flex-1 min-w-0">
                                 <div class="flex items-start justify-between">
                                     <div class="flex-1">
-                                        <h3 class="text-lg font-semibold text-gray-900">
+                                        <h3 class="text-lg font-semibold text-gray-900 dark:text-white">
                                             <a href="{{ route('products.show', $product) }}" class="hover:text-primary-600">
                                                 {{ $product->title }}
                                             </a>
                                         </h3>
-                                        <p class="mt-1 text-sm text-gray-600 line-clamp-2">{{ $product->description }}</p>
+                                        <p class="mt-1 text-sm text-gray-600 dark:text-gray-400 line-clamp-2">{{ $product->description }}</p>
 
                                         <div class="mt-3 flex flex-wrap items-center gap-4 text-sm">
-                                            <span class="inline-flex items-center px-2.5 py-0.5 rounded-md bg-primary-100 text-primary-800 font-medium">
+                                            <span class="inline-flex items-center px-2.5 py-0.5 rounded-md bg-primary-100 dark:bg-primary-900 text-primary-800 dark:text-primary-200 font-medium">
                                                 {{ $product->category->name }}
                                             </span>
 
-                                            <span class="inline-flex items-center text-gray-500">
+                                            <span class="inline-flex items-center text-gray-500 dark:text-gray-400">
                                                 <svg class="mr-1.5 h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path>
                                                 </svg>
@@ -96,30 +96,30 @@
                                                 </a>
                                             </span>
 
-                                            <span class="inline-flex items-center text-gray-500">
+                                            <span class="inline-flex items-center text-gray-500 dark:text-gray-400">
                                                 <svg class="mr-1.5 h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
                                                 </svg>
                                                 {{ $product->created_at->format('M j, Y') }}
                                             </span>
 
-                                            <span class="text-gray-400">•</span>
-                                            <span class="text-gray-500">{{ $product->created_at->diffForHumans() }}</span>
+                                            <span class="text-gray-400 dark:text-gray-500">•</span>
+                                            <span class="text-gray-500 dark:text-gray-400">{{ $product->created_at->diffForHumans() }}</span>
                                         </div>
                                     </div>
 
                                     <!-- Status Badge -->
                                     <div class="ml-4 flex-shrink-0">
                                         @if($product->isPending())
-                                            <span class="inline-flex items-center px-3 py-1 rounded-md text-sm font-medium bg-yellow-100 text-yellow-800">
+                                            <span class="inline-flex items-center px-3 py-1 rounded-md text-sm font-medium bg-yellow-100 text-yellow-800 dark:text-yellow-200">
                                                 Pending
                                             </span>
                                         @elseif($product->isApproved())
-                                            <span class="inline-flex items-center px-3 py-1 rounded-md text-sm font-medium bg-green-100 text-green-800">
+                                            <span class="inline-flex items-center px-3 py-1 rounded-md text-sm font-medium bg-green-100 text-green-800 dark:text-green-200">
                                                 Approved
                                             </span>
                                         @elseif($product->isRejected())
-                                            <span class="inline-flex items-center px-3 py-1 rounded-md text-sm font-medium bg-red-100 text-red-800">
+                                            <span class="inline-flex items-center px-3 py-1 rounded-md text-sm font-medium bg-red-100 text-red-800 dark:text-red-200">
                                                 Rejected
                                             </span>
                                         @endif
@@ -152,7 +152,7 @@
                                         </form>
                                     @endif
 
-                                    <a href="{{ route('products.show', $product) }}" class="inline-flex items-center px-3 py-1.5 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500">
+                                    <a href="{{ route('products.show', $product) }}" class="inline-flex items-center px-3 py-1.5 border border-gray-300 dark:border-gray-600 text-sm font-medium rounded-md text-gray-700 dark:text-gray-300 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-primary-500">
                                         <svg class="mr-1.5 h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
                                             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path>
@@ -161,7 +161,7 @@
                                     </a>
 
                                     @can('edit-product', $product)
-                                        <a href="{{ route('products.edit', $product) }}" class="inline-flex items-center px-3 py-1.5 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500">
+                                        <a href="{{ route('products.edit', $product) }}" class="inline-flex items-center px-3 py-1.5 border border-gray-300 dark:border-gray-600 text-sm font-medium rounded-md text-gray-700 dark:text-gray-300 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-primary-500">
                                             <svg class="mr-1.5 h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path>
                                             </svg>
@@ -173,7 +173,7 @@
                                         <form action="{{ route('products.destroy', $product) }}" method="POST" onsubmit="return confirm('Are you sure you want to delete this product permanently?');">
                                             @csrf
                                             @method('DELETE')
-                                            <button type="submit" class="inline-flex items-center px-3 py-1.5 border border-red-300 text-sm font-medium rounded-md text-red-700 bg-white hover:bg-red-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500">
+                                            <button type="submit" class="inline-flex items-center px-3 py-1.5 border border-red-300 dark:border-red-700 text-sm font-medium rounded-md text-red-700 dark:text-red-300 bg-white dark:bg-gray-800 hover:bg-red-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500">
                                                 <svg class="mr-1.5 h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path>
                                                 </svg>
@@ -196,12 +196,12 @@
             </div>
         @endif
     @else
-        <div class="text-center py-12 bg-gray-50 rounded-lg border border-gray-200">
-            <svg class="mx-auto h-12 w-12 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <div class="text-center py-12 bg-gray-50 dark:bg-gray-900 rounded-lg border border-gray-200 dark:border-gray-700">
+            <svg class="mx-auto h-12 w-12 text-gray-400 dark:text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4"></path>
             </svg>
-            <h3 class="mt-2 text-sm font-medium text-gray-900">No products found</h3>
-            <p class="mt-1 text-sm text-gray-500">
+            <h3 class="mt-2 text-sm font-medium text-gray-900 dark:text-white">No products found</h3>
+            <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
                 No products with status: <strong>{{ request('status', 'pending') }}</strong>
             </p>
         </div>
diff --git a/resources/views/profile/edit.blade.php b/resources/views/profile/edit.blade.php
index 4d3c3c6..14f6bfa 100644
--- a/resources/views/profile/edit.blade.php
+++ b/resources/views/profile/edit.blade.php
@@ -4,11 +4,11 @@
 <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
     <!-- Header -->
     <div class="mb-8">
-        <h1 class="text-3xl font-bold text-gray-900">Edit Profile</h1>
-        <p class="mt-2 text-sm text-gray-600">Update your profile information and social links</p>
+        <h1 class="text-3xl font-bold text-gray-900 dark:text-white">Edit Profile</h1>
+        <p class="mt-2 text-sm text-gray-600 dark:text-gray-400">Update your profile information and social links</p>
     </div>
 
-    <div class="bg-white rounded-lg shadow-sm border border-gray-200">
+    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700">
         <div class="px-6 py-8">
             <form method="POST" action="{{ route('profile.update') }}" enctype="multipart/form-data" class="space-y-8">
                 @csrf
@@ -16,7 +16,7 @@
 
                 <!-- Avatar Section -->
                 <div>
-                    <h3 class="text-lg font-medium text-gray-900 mb-4">Profile Picture</h3>
+                    <h3 class="text-lg font-medium text-gray-900 dark:text-white mb-4">Profile Picture</h3>
                     <div class="flex items-center gap-6">
                         <div class="flex-shrink-0">
                             @if($user->avatar_url)
@@ -34,17 +34,17 @@
                                    id="avatar"
                                    name="avatar"
                                    accept="image/*"
-                                   class="block w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded-md file:border-0 file:text-sm file:font-semibold file:bg-primary-50 file:text-primary-700 hover:file:bg-primary-100 @error('avatar') border-red-300 @enderror">
+                                   class="block w-full text-sm text-gray-500 dark:text-gray-400 file:mr-4 file:py-2 file:px-4 file:rounded-md file:border-0 file:text-sm file:font-semibold file:bg-primary-50 file:text-primary-700 hover:file:bg-primary-100 @error('avatar') border-red-300 dark:border-red-700 @enderror">
                             @error('avatar')
-                                <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
+                                <p class="mt-2 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
                             @enderror
-                            <p class="mt-2 text-sm text-gray-500">JPG, PNG, or GIF. Max size 2MB.</p>
+                            <p class="mt-2 text-sm text-gray-500 dark:text-gray-400">JPG, PNG, or GIF. Max size 2MB.</p>
 
                             @if($user->avatar)
                                 <form method="POST" action="{{ route('profile.avatar.delete') }}" class="mt-3" onsubmit="return confirm('Are you sure you want to delete your avatar?')">
                                     @csrf
                                     @method('DELETE')
-                                    <button type="submit" class="text-sm font-medium text-red-600 hover:text-red-700">
+                                    <button type="submit" class="text-sm font-medium text-red-600 dark:text-red-400 hover:text-red-700">
                                         Delete Avatar
                                     </button>
                                 </form>
@@ -54,13 +54,13 @@
                 </div>
 
                 <!-- Basic Information -->
-                <div class="border-t border-gray-200 pt-8">
-                    <h3 class="text-lg font-medium text-gray-900 mb-4">Basic Information</h3>
+                <div class="border-t border-gray-200 dark:border-gray-700 pt-8">
+                    <h3 class="text-lg font-medium text-gray-900 dark:text-white mb-4">Basic Information</h3>
                     <div class="grid grid-cols-1 gap-6 sm:grid-cols-2">
                         <!-- Name -->
                         <div>
-                            <label for="name" class="block text-sm font-medium text-gray-700">
-                                Name <span class="text-red-600">*</span>
+                            <label for="name" class="block text-sm font-medium text-gray-700 dark:text-gray-300">
+                                Name <span class="text-red-600 dark:text-red-400">*</span>
                             </label>
                             <div class="mt-1">
                                 <input type="text"
@@ -68,17 +68,17 @@
                                        name="name"
                                        value="{{ old('name', $user->name) }}"
                                        required
-                                       class="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-primary-500 focus:border-primary-500 sm:text-sm @error('name') border-red-300 text-red-900 placeholder-red-300 focus:ring-red-500 focus:border-red-500 @enderror">
+                                       class="appearance-none block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-primary-500 focus:border-primary-500 sm:text-sm @error('name') border-red-300 text-red-900 dark:text-red-200 placeholder-red-300 focus:ring-red-500 focus:border-red-500 @enderror dark:bg-gray-700">
                                 @error('name')
-                                    <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
+                                    <p class="mt-2 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
                                 @enderror
                             </div>
                         </div>
 
                         <!-- Email -->
                         <div>
-                            <label for="email" class="block text-sm font-medium text-gray-700">
-                                Email <span class="text-red-600">*</span>
+                            <label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300">
+                                Email <span class="text-red-600 dark:text-red-400">*</span>
                             </label>
                             <div class="mt-1">
                                 <input type="email"
@@ -86,9 +86,9 @@
                                        name="email"
                                        value="{{ old('email', $user->email) }}"
                                        required
-                                       class="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-primary-500 focus:border-primary-500 sm:text-sm @error('email') border-red-300 text-red-900 placeholder-red-300 focus:ring-red-500 focus:border-red-500 @enderror">
+                                       class="appearance-none block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-primary-500 focus:border-primary-500 sm:text-sm @error('email') border-red-300 text-red-900 dark:text-red-200 placeholder-red-300 focus:ring-red-500 focus:border-red-500 @enderror dark:bg-gray-700">
                                 @error('email')
-                                    <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
+                                    <p class="mt-2 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
                                 @enderror
                             </div>
                         </div>
@@ -96,7 +96,7 @@
 
                     <!-- Bio -->
                     <div class="mt-6">
-                        <label for="bio" class="block text-sm font-medium text-gray-700">
+                        <label for="bio" class="block text-sm font-medium text-gray-700 dark:text-gray-300">
                             Bio
                         </label>
                         <div class="mt-1">
@@ -105,22 +105,22 @@
                                       rows="4"
                                       maxlength="1000"
                                       placeholder="Tell us a bit about yourself..."
-                                      class="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-primary-500 focus:border-primary-500 sm:text-sm @error('bio') border-red-300 text-red-900 placeholder-red-300 focus:ring-red-500 focus:border-red-500 @enderror">{{ old('bio', $user->bio) }}</textarea>
+                                      class="appearance-none block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-primary-500 focus:border-primary-500 sm:text-sm @error('bio') border-red-300 text-red-900 dark:text-red-200 placeholder-red-300 focus:ring-red-500 focus:border-red-500 @enderror dark:bg-gray-700">{{ old('bio', $user->bio) }}</textarea>
                             @error('bio')
-                                <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
+                                <p class="mt-2 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
                             @enderror
-                            <p class="mt-2 text-sm text-gray-500">Max 1000 characters</p>
+                            <p class="mt-2 text-sm text-gray-500 dark:text-gray-400">Max 1000 characters</p>
                         </div>
                     </div>
                 </div>
 
                 <!-- Website & Social Links -->
-                <div class="border-t border-gray-200 pt-8">
-                    <h3 class="text-lg font-medium text-gray-900 mb-4">Website & Social Links</h3>
+                <div class="border-t border-gray-200 dark:border-gray-700 pt-8">
+                    <h3 class="text-lg font-medium text-gray-900 dark:text-white mb-4">Website & Social Links</h3>
                     <div class="space-y-6">
                         <!-- Website -->
                         <div>
-                            <label for="website" class="block text-sm font-medium text-gray-700">
+                            <label for="website" class="block text-sm font-medium text-gray-700 dark:text-gray-300">
                                 Website
                             </label>
                             <div class="mt-1">
@@ -129,20 +129,20 @@
                                        name="website"
                                        value="{{ old('website', $user->website) }}"
                                        placeholder="https://example.com"
-                                       class="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-primary-500 focus:border-primary-500 sm:text-sm @error('website') border-red-300 text-red-900 placeholder-red-300 focus:ring-red-500 focus:border-red-500 @enderror">
+                                       class="appearance-none block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-primary-500 focus:border-primary-500 sm:text-sm @error('website') border-red-300 text-red-900 dark:text-red-200 placeholder-red-300 focus:ring-red-500 focus:border-red-500 @enderror dark:bg-gray-700">
                                 @error('website')
-                                    <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
+                                    <p class="mt-2 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
                                 @enderror
                             </div>
                         </div>
 
                         <!-- Twitter -->
                         <div>
-                            <label for="twitter" class="block text-sm font-medium text-gray-700">
+                            <label for="twitter" class="block text-sm font-medium text-gray-700 dark:text-gray-300">
                                 Twitter Username
                             </label>
                             <div class="mt-1 flex rounded-md shadow-sm">
-                                <span class="inline-flex items-center px-3 rounded-l-md border border-r-0 border-gray-300 bg-gray-50 text-gray-500 sm:text-sm">
+                                <span class="inline-flex items-center px-3 rounded-l-md border border-r-0 border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-900 text-gray-500 dark:text-gray-400 sm:text-sm">
                                     @
                                 </span>
                                 <input type="text"
@@ -150,20 +150,20 @@
                                        name="twitter"
                                        value="{{ old('twitter', $user->twitter) }}"
                                        placeholder="username"
-                                       class="flex-1 min-w-0 block w-full px-3 py-2 rounded-none rounded-r-md border-gray-300 focus:ring-primary-500 focus:border-primary-500 sm:text-sm @error('twitter') border-red-300 text-red-900 placeholder-red-300 focus:ring-red-500 focus:border-red-500 @enderror">
+                                       class="flex-1 min-w-0 block w-full px-3 py-2 rounded-none rounded-r-md border-gray-300 dark:border-gray-600 focus:ring-primary-500 focus:border-primary-500 sm:text-sm @error('twitter') border-red-300 text-red-900 dark:text-red-200 placeholder-red-300 focus:ring-red-500 focus:border-red-500 @enderror dark:bg-gray-700">
                             </div>
                             @error('twitter')
-                                <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
+                                <p class="mt-2 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
                             @enderror
                         </div>
 
                         <!-- GitHub -->
                         <div>
-                            <label for="github" class="block text-sm font-medium text-gray-700">
+                            <label for="github" class="block text-sm font-medium text-gray-700 dark:text-gray-300">
                                 GitHub Username
                             </label>
                             <div class="mt-1 flex rounded-md shadow-sm">
-                                <span class="inline-flex items-center px-3 rounded-l-md border border-r-0 border-gray-300 bg-gray-50 text-gray-500 text-sm">
+                                <span class="inline-flex items-center px-3 rounded-l-md border border-r-0 border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-900 text-gray-500 dark:text-gray-400 text-sm">
                                     github.com/
                                 </span>
                                 <input type="text"
@@ -171,20 +171,20 @@
                                        name="github"
                                        value="{{ old('github', $user->github) }}"
                                        placeholder="username"
-                                       class="flex-1 min-w-0 block w-full px-3 py-2 rounded-none rounded-r-md border-gray-300 focus:ring-primary-500 focus:border-primary-500 sm:text-sm @error('github') border-red-300 text-red-900 placeholder-red-300 focus:ring-red-500 focus:border-red-500 @enderror">
+                                       class="flex-1 min-w-0 block w-full px-3 py-2 rounded-none rounded-r-md border-gray-300 dark:border-gray-600 focus:ring-primary-500 focus:border-primary-500 sm:text-sm @error('github') border-red-300 text-red-900 dark:text-red-200 placeholder-red-300 focus:ring-red-500 focus:border-red-500 @enderror dark:bg-gray-700">
                             </div>
                             @error('github')
-                                <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
+                                <p class="mt-2 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
                             @enderror
                         </div>
 
                         <!-- LinkedIn -->
                         <div>
-                            <label for="linkedin" class="block text-sm font-medium text-gray-700">
+                            <label for="linkedin" class="block text-sm font-medium text-gray-700 dark:text-gray-300">
                                 LinkedIn Username
                             </label>
                             <div class="mt-1 flex rounded-md shadow-sm">
-                                <span class="inline-flex items-center px-3 rounded-l-md border border-r-0 border-gray-300 bg-gray-50 text-gray-500 text-sm">
+                                <span class="inline-flex items-center px-3 rounded-l-md border border-r-0 border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-900 text-gray-500 dark:text-gray-400 text-sm">
                                     linkedin.com/in/
                                 </span>
                                 <input type="text"
@@ -192,19 +192,19 @@
                                        name="linkedin"
                                        value="{{ old('linkedin', $user->linkedin) }}"
                                        placeholder="username"
-                                       class="flex-1 min-w-0 block w-full px-3 py-2 rounded-none rounded-r-md border-gray-300 focus:ring-primary-500 focus:border-primary-500 sm:text-sm @error('linkedin') border-red-300 text-red-900 placeholder-red-300 focus:ring-red-500 focus:border-red-500 @enderror">
+                                       class="flex-1 min-w-0 block w-full px-3 py-2 rounded-none rounded-r-md border-gray-300 dark:border-gray-600 focus:ring-primary-500 focus:border-primary-500 sm:text-sm @error('linkedin') border-red-300 text-red-900 dark:text-red-200 placeholder-red-300 focus:ring-red-500 focus:border-red-500 @enderror dark:bg-gray-700">
                             </div>
                             @error('linkedin')
-                                <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
+                                <p class="mt-2 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
                             @enderror
                         </div>
                     </div>
                 </div>
 
                 <!-- Form Actions -->
-                <div class="border-t border-gray-200 pt-6 flex items-center justify-between">
+                <div class="border-t border-gray-200 dark:border-gray-700 pt-6 flex items-center justify-between">
                     <a href="{{ route('profile.show', $user) }}"
-                       class="inline-flex items-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500">
+                       class="inline-flex items-center px-4 py-2 border border-gray-300 dark:border-gray-600 shadow-sm text-sm font-medium rounded-md text-gray-700 dark:text-gray-300 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-primary-500">
                         Cancel
                     </a>
                     <button type="submit"
diff --git a/resources/views/upvotes/index.blade.php b/resources/views/upvotes/index.blade.php
index 58b7341..b9e405c 100644
--- a/resources/views/upvotes/index.blade.php
+++ b/resources/views/upvotes/index.blade.php
@@ -1,13 +1,13 @@
 @extends('layouts.app')
 
 @section('content')
-<div class="bg-gradient-to-br from-primary-50 via-white to-accent-50 border-b border-gray-200">
+<div class="bg-gradient-to-br from-primary-50 via-white to-accent-50 border-b border-gray-200 dark:border-gray-700">
     <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12 sm:py-16">
         <div class="max-w-3xl">
-            <h1 class="text-4xl sm:text-5xl font-bold text-gray-900 mb-4">
+            <h1 class="text-4xl sm:text-5xl font-bold text-gray-900 dark:text-white mb-4">
                 My Upvotes
             </h1>
-            <p class="text-lg text-gray-600">
+            <p class="text-lg text-gray-600 dark:text-gray-400">
                 Products you've upvoted and supported
             </p>
         </div>
@@ -18,8 +18,8 @@
     <!-- Results Summary -->
     @if($upvotes->total() > 0)
         <div class="mb-6">
-            <p class="text-sm text-gray-600">
-                You have upvoted <span class="font-semibold text-gray-900">{{ $upvotes->total() }}</span> {{ Str::plural('product', $upvotes->total()) }}
+            <p class="text-sm text-gray-600 dark:text-gray-400">
+                You have upvoted <span class="font-semibold text-gray-900 dark:text-white">{{ $upvotes->total() }}</span> {{ Str::plural('product', $upvotes->total()) }}
             </p>
         </div>
     @endif
@@ -32,11 +32,11 @@
             <!-- Empty State -->
             <div class="col-span-full">
                 <div class="text-center py-16">
-                    <svg class="mx-auto h-16 w-16 text-gray-400 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <svg class="mx-auto h-16 w-16 text-gray-400 dark:text-gray-500 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 15l7-7 7 7"></path>
                     </svg>
-                    <h3 class="text-lg font-medium text-gray-900 mb-2">No upvotes yet</h3>
-                    <p class="text-gray-600 mb-6">
+                    <h3 class="text-lg font-medium text-gray-900 dark:text-white mb-2">No upvotes yet</h3>
+                    <p class="text-gray-600 dark:text-gray-400 mb-6">
                         Start upvoting products you love to show your support!
                     </p>
                     <a href="{{ route('products.index') }}" class="inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-primary-600 hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500">