From fab7c3b9c1dc30d0b2baa046f7ff1117a4c4682c Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Mon, 9 Feb 2026 18:12:26 +0000
Subject: [PATCH] fix: replace hardcoded color classes with theme-aware tokens
 for dark mode

All dashboard-layout pages (dashboard, feedback, reports, help) used
hardcoded Tailwind classes like bg-white, text-gray-900, border-gray-200
that don't respond to dark mode. Replaced with CSS variable-based classes
(bg-card, text-foreground, text-muted-foreground, border-border, etc.)
and added dark: variants for accent colors.

https://claude.ai/code/session_017szLhEzeeAg5rdZy23vZDb
---
 pages/dashboard/index.vue | 122 +++++++++++------------
 pages/feedback/index.vue  | 148 ++++++++++++++--------------
 pages/help/index.vue      | 194 ++++++++++++++++++------------------
 pages/reports/index.vue   | 200 +++++++++++++++++++-------------------
 4 files changed, 332 insertions(+), 332 deletions(-)

diff --git a/pages/dashboard/index.vue b/pages/dashboard/index.vue
index 3b94887..5ccad22 100644
--- a/pages/dashboard/index.vue
+++ b/pages/dashboard/index.vue
@@ -2,94 +2,94 @@
   <NuxtLayout name="dashboard">
     <div class="p-6">
       <div class="mb-6">
-        <h1 class="text-3xl font-bold text-gray-900">Dashboard</h1>
-        <p class="text-gray-600">Welcome to your Veerify feedback management dashboard</p>
+        <h1 class="text-3xl font-bold text-foreground">Dashboard</h1>
+        <p class="text-muted-foreground">Welcome to your Veerify feedback management dashboard</p>
       </div>
 
       <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
         <!-- Stats Cards -->
-        <div class="bg-white p-6 rounded-lg border border-gray-200">
+        <div class="bg-card p-6 rounded-lg border border-border">
           <div class="flex items-center">
-            <Icon name="lucide:message-square" class="w-8 h-8 text-blue-600" />
+            <Icon name="lucide:message-square" class="w-8 h-8 text-blue-600 dark:text-blue-400" />
             <div class="ml-4">
-              <p class="text-sm font-medium text-gray-600">Total Feedback</p>
-              <p class="text-2xl font-bold text-gray-900">247</p>
+              <p class="text-sm font-medium text-muted-foreground">Total Feedback</p>
+              <p class="text-2xl font-bold text-card-foreground">247</p>
             </div>
           </div>
         </div>
 
-        <div class="bg-white p-6 rounded-lg border border-gray-200">
+        <div class="bg-card p-6 rounded-lg border border-border">
           <div class="flex items-center">
-            <Icon name="lucide:users" class="w-8 h-8 text-green-600" />
+            <Icon name="lucide:users" class="w-8 h-8 text-green-600 dark:text-green-400" />
             <div class="ml-4">
-              <p class="text-sm font-medium text-gray-600">Active Users</p>
-              <p class="text-2xl font-bold text-gray-900">1,284</p>
+              <p class="text-sm font-medium text-muted-foreground">Active Users</p>
+              <p class="text-2xl font-bold text-card-foreground">1,284</p>
             </div>
           </div>
         </div>
 
-        <div class="bg-white p-6 rounded-lg border border-gray-200">
+        <div class="bg-card p-6 rounded-lg border border-border">
           <div class="flex items-center">
-            <Icon name="lucide:trending-up" class="w-8 h-8 text-purple-600" />
+            <Icon name="lucide:trending-up" class="w-8 h-8 text-purple-600 dark:text-purple-400" />
             <div class="ml-4">
-              <p class="text-sm font-medium text-gray-600">Features Shipped</p>
-              <p class="text-2xl font-bold text-gray-900">18</p>
+              <p class="text-sm font-medium text-muted-foreground">Features Shipped</p>
+              <p class="text-2xl font-bold text-card-foreground">18</p>
             </div>
           </div>
         </div>
 
-        <div class="bg-white p-6 rounded-lg border border-gray-200">
+        <div class="bg-card p-6 rounded-lg border border-border">
           <div class="flex items-center">
-            <Icon name="lucide:heart" class="w-8 h-8 text-red-600" />
+            <Icon name="lucide:heart" class="w-8 h-8 text-red-600 dark:text-red-400" />
             <div class="ml-4">
-              <p class="text-sm font-medium text-gray-600">User Satisfaction</p>
-              <p class="text-2xl font-bold text-gray-900">94%</p>
+              <p class="text-sm font-medium text-muted-foreground">User Satisfaction</p>
+              <p class="text-2xl font-bold text-card-foreground">94%</p>
             </div>
           </div>
         </div>
       </div>
 
       <!-- Recent Activity -->
-      <div class="mt-8 bg-white rounded-lg border border-gray-200">
-        <div class="p-6 border-b border-gray-200">
-          <h2 class="text-lg font-semibold text-gray-900">Recent Activity</h2>
+      <div class="mt-8 bg-card rounded-lg border border-border">
+        <div class="p-6 border-b border-border">
+          <h2 class="text-lg font-semibold text-card-foreground">Recent Activity</h2>
         </div>
         <div class="p-6">
           <div class="space-y-4">
             <div class="flex items-center space-x-3">
-              <div class="w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center">
-                <Icon name="lucide:message-square" class="w-4 h-4 text-blue-600" />
+              <div class="w-8 h-8 bg-blue-100 dark:bg-blue-900/30 rounded-full flex items-center justify-center">
+                <Icon name="lucide:message-square" class="w-4 h-4 text-blue-600 dark:text-blue-400" />
               </div>
               <div>
-                <p class="text-sm font-medium text-gray-900">New feature request submitted</p>
-                <p class="text-xs text-gray-500">2 hours ago</p>
+                <p class="text-sm font-medium text-card-foreground">New feature request submitted</p>
+                <p class="text-xs text-muted-foreground">2 hours ago</p>
               </div>
             </div>
             <div class="flex items-center space-x-3">
-              <div class="w-8 h-8 bg-green-100 rounded-full flex items-center justify-center">
-                <Icon name="lucide:check" class="w-4 h-4 text-green-600" />
+              <div class="w-8 h-8 bg-green-100 dark:bg-green-900/30 rounded-full flex items-center justify-center">
+                <Icon name="lucide:check" class="w-4 h-4 text-green-600 dark:text-green-400" />
               </div>
               <div>
-                <p class="text-sm font-medium text-gray-900">Feature marked as completed</p>
-                <p class="text-xs text-gray-500">4 hours ago</p>
+                <p class="text-sm font-medium text-card-foreground">Feature marked as completed</p>
+                <p class="text-xs text-muted-foreground">4 hours ago</p>
               </div>
             </div>
             <div class="flex items-center space-x-3">
-              <div class="w-8 h-8 bg-purple-100 rounded-full flex items-center justify-center">
-                <Icon name="lucide:user-plus" class="w-4 h-4 text-purple-600" />
+              <div class="w-8 h-8 bg-purple-100 dark:bg-purple-900/30 rounded-full flex items-center justify-center">
+                <Icon name="lucide:user-plus" class="w-4 h-4 text-purple-600 dark:text-purple-400" />
               </div>
               <div>
-                <p class="text-sm font-medium text-gray-900">New user registered</p>
-                <p class="text-xs text-gray-500">1 day ago</p>
+                <p class="text-sm font-medium text-card-foreground">New user registered</p>
+                <p class="text-xs text-muted-foreground">1 day ago</p>
               </div>
             </div>
             <div class="flex items-center space-x-3">
-              <div class="w-8 h-8 bg-orange-100 rounded-full flex items-center justify-center">
-                <Icon name="lucide:star" class="w-4 h-4 text-orange-600" />
+              <div class="w-8 h-8 bg-orange-100 dark:bg-orange-900/30 rounded-full flex items-center justify-center">
+                <Icon name="lucide:star" class="w-4 h-4 text-orange-600 dark:text-orange-400" />
               </div>
               <div>
-                <p class="text-sm font-medium text-gray-900">Feature received 10+ upvotes</p>
-                <p class="text-xs text-gray-500">2 days ago</p>
+                <p class="text-sm font-medium text-card-foreground">Feature received 10+ upvotes</p>
+                <p class="text-xs text-muted-foreground">2 days ago</p>
               </div>
             </div>
           </div>
@@ -97,69 +97,69 @@
       </div>
 
       <!-- Top Feature Requests -->
-      <div class="mt-8 bg-white rounded-lg border border-gray-200">
-        <div class="p-6 border-b border-gray-200">
-          <h2 class="text-lg font-semibold text-gray-900">Top Feature Requests</h2>
+      <div class="mt-8 bg-card rounded-lg border border-border">
+        <div class="p-6 border-b border-border">
+          <h2 class="text-lg font-semibold text-card-foreground">Top Feature Requests</h2>
         </div>
         <div class="p-6">
           <div class="space-y-4">
-            <div class="flex items-center justify-between p-4 border border-gray-200 rounded-lg">
+            <div class="flex items-center justify-between p-4 border border-border rounded-lg">
               <div class="flex items-center space-x-4">
-                <div class="w-10 h-10 bg-blue-100 rounded-lg flex items-center justify-center">
-                  <Icon name="lucide:zap" class="w-5 h-5 text-blue-600" />
+                <div class="w-10 h-10 bg-blue-100 dark:bg-blue-900/30 rounded-lg flex items-center justify-center">
+                  <Icon name="lucide:zap" class="w-5 h-5 text-blue-600 dark:text-blue-400" />
                 </div>
                 <div>
-                  <h3 class="font-medium text-gray-900">Dark mode support</h3>
-                  <p class="text-sm text-gray-500">Requested by 45 users</p>
+                  <h3 class="font-medium text-card-foreground">Dark mode support</h3>
+                  <p class="text-sm text-muted-foreground">Requested by 45 users</p>
                 </div>
               </div>
               <div class="flex items-center space-x-2">
                 <span
-                  class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800"
+                  class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300"
                 >
                   In Progress
                 </span>
-                <span class="text-sm font-medium text-gray-900">45 votes</span>
+                <span class="text-sm font-medium text-card-foreground">45 votes</span>
               </div>
             </div>
 
-            <div class="flex items-center justify-between p-4 border border-gray-200 rounded-lg">
+            <div class="flex items-center justify-between p-4 border border-border rounded-lg">
               <div class="flex items-center space-x-4">
-                <div class="w-10 h-10 bg-green-100 rounded-lg flex items-center justify-center">
-                  <Icon name="lucide:smartphone" class="w-5 h-5 text-green-600" />
+                <div class="w-10 h-10 bg-green-100 dark:bg-green-900/30 rounded-lg flex items-center justify-center">
+                  <Icon name="lucide:smartphone" class="w-5 h-5 text-green-600 dark:text-green-400" />
                 </div>
                 <div>
-                  <h3 class="font-medium text-gray-900">Mobile app</h3>
-                  <p class="text-sm text-gray-500">Requested by 32 users</p>
+                  <h3 class="font-medium text-card-foreground">Mobile app</h3>
+                  <p class="text-sm text-muted-foreground">Requested by 32 users</p>
                 </div>
               </div>
               <div class="flex items-center space-x-2">
                 <span
-                  class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800"
+                  class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-300"
                 >
                   Planned
                 </span>
-                <span class="text-sm font-medium text-gray-900">32 votes</span>
+                <span class="text-sm font-medium text-card-foreground">32 votes</span>
               </div>
             </div>
 
-            <div class="flex items-center justify-between p-4 border border-gray-200 rounded-lg">
+            <div class="flex items-center justify-between p-4 border border-border rounded-lg">
               <div class="flex items-center space-x-4">
-                <div class="w-10 h-10 bg-purple-100 rounded-lg flex items-center justify-center">
-                  <Icon name="lucide:bell" class="w-5 h-5 text-purple-600" />
+                <div class="w-10 h-10 bg-purple-100 dark:bg-purple-900/30 rounded-lg flex items-center justify-center">
+                  <Icon name="lucide:bell" class="w-5 h-5 text-purple-600 dark:text-purple-400" />
                 </div>
                 <div>
-                  <h3 class="font-medium text-gray-900">Email notifications</h3>
-                  <p class="text-sm text-gray-500">Requested by 28 users</p>
+                  <h3 class="font-medium text-card-foreground">Email notifications</h3>
+                  <p class="text-sm text-muted-foreground">Requested by 28 users</p>
                 </div>
               </div>
               <div class="flex items-center space-x-2">
                 <span
-                  class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800"
+                  class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-secondary text-secondary-foreground"
                 >
                   Under Review
                 </span>
-                <span class="text-sm font-medium text-gray-900">28 votes</span>
+                <span class="text-sm font-medium text-card-foreground">28 votes</span>
               </div>
             </div>
           </div>
diff --git a/pages/feedback/index.vue b/pages/feedback/index.vue
index e68d5a4..69d2d58 100644
--- a/pages/feedback/index.vue
+++ b/pages/feedback/index.vue
@@ -4,8 +4,8 @@
       <div class="mb-6">
         <div class="flex items-center justify-between">
           <div>
-            <h1 class="text-3xl font-bold text-gray-900">Feedback</h1>
-            <p class="text-gray-600">Manage and respond to user feedback and feature requests</p>
+            <h1 class="text-3xl font-bold text-foreground">Feedback</h1>
+            <p class="text-muted-foreground">Manage and respond to user feedback and feature requests</p>
           </div>
           <button
             class="inline-flex items-center px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors"
@@ -17,11 +17,11 @@
       </div>
 
       <!-- Filters -->
-      <div class="bg-white rounded-lg border border-gray-200 p-6 mb-6">
+      <div class="bg-card rounded-lg border border-border p-6 mb-6">
         <div class="flex flex-wrap items-center gap-4">
           <div>
-            <label class="block text-sm text-gray-600 mb-1">Status</label>
-            <select class="px-3 py-2 border border-gray-300 rounded-md text-sm">
+            <label class="block text-sm text-muted-foreground mb-1">Status</label>
+            <select class="px-3 py-2 border border-border rounded-md text-sm bg-background text-foreground">
               <option>All Status</option>
               <option>Open</option>
               <option>In Progress</option>
@@ -31,8 +31,8 @@
             </select>
           </div>
           <div>
-            <label class="block text-sm text-gray-600 mb-1">Category</label>
-            <select class="px-3 py-2 border border-gray-300 rounded-md text-sm">
+            <label class="block text-sm text-muted-foreground mb-1">Category</label>
+            <select class="px-3 py-2 border border-border rounded-md text-sm bg-background text-foreground">
               <option>All Categories</option>
               <option>Feature Request</option>
               <option>Bug Report</option>
@@ -41,8 +41,8 @@
             </select>
           </div>
           <div>
-            <label class="block text-sm text-gray-600 mb-1">Sort By</label>
-            <select class="px-3 py-2 border border-gray-300 rounded-md text-sm">
+            <label class="block text-sm text-muted-foreground mb-1">Sort By</label>
+            <select class="px-3 py-2 border border-border rounded-md text-sm bg-background text-foreground">
               <option>Most Recent</option>
               <option>Most Popular</option>
               <option>Oldest First</option>
@@ -50,16 +50,16 @@
             </select>
           </div>
           <div class="flex-1">
-            <label class="block text-sm text-gray-600 mb-1">Search</label>
+            <label class="block text-sm text-muted-foreground mb-1">Search</label>
             <div class="relative">
               <Icon
                 name="lucide:search"
-                class="absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-gray-400"
+                class="absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-muted-foreground"
               />
               <input
                 type="text"
                 placeholder="Search feedback..."
-                class="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-md text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+                class="w-full pl-10 pr-4 py-2 border border-border rounded-md text-sm bg-background text-foreground focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
               />
             </div>
           </div>
@@ -68,71 +68,71 @@
 
       <!-- Feedback Stats -->
       <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
-        <div class="bg-white p-6 rounded-lg border border-gray-200">
+        <div class="bg-card p-6 rounded-lg border border-border">
           <div class="flex items-center">
-            <Icon name="lucide:message-square" class="w-8 h-8 text-blue-600" />
+            <Icon name="lucide:message-square" class="w-8 h-8 text-blue-600 dark:text-blue-400" />
             <div class="ml-4">
-              <p class="text-sm font-medium text-gray-600">Total Feedback</p>
-              <p class="text-2xl font-bold text-gray-900">247</p>
+              <p class="text-sm font-medium text-muted-foreground">Total Feedback</p>
+              <p class="text-2xl font-bold text-card-foreground">247</p>
             </div>
           </div>
         </div>
 
-        <div class="bg-white p-6 rounded-lg border border-gray-200">
+        <div class="bg-card p-6 rounded-lg border border-border">
           <div class="flex items-center">
-            <Icon name="lucide:clock" class="w-8 h-8 text-orange-600" />
+            <Icon name="lucide:clock" class="w-8 h-8 text-orange-600 dark:text-orange-400" />
             <div class="ml-4">
-              <p class="text-sm font-medium text-gray-600">Open</p>
-              <p class="text-2xl font-bold text-gray-900">89</p>
+              <p class="text-sm font-medium text-muted-foreground">Open</p>
+              <p class="text-2xl font-bold text-card-foreground">89</p>
             </div>
           </div>
         </div>
 
-        <div class="bg-white p-6 rounded-lg border border-gray-200">
+        <div class="bg-card p-6 rounded-lg border border-border">
           <div class="flex items-center">
-            <Icon name="lucide:play" class="w-8 h-8 text-blue-600" />
+            <Icon name="lucide:play" class="w-8 h-8 text-blue-600 dark:text-blue-400" />
             <div class="ml-4">
-              <p class="text-sm font-medium text-gray-600">In Progress</p>
-              <p class="text-2xl font-bold text-gray-900">34</p>
+              <p class="text-sm font-medium text-muted-foreground">In Progress</p>
+              <p class="text-2xl font-bold text-card-foreground">34</p>
             </div>
           </div>
         </div>
 
-        <div class="bg-white p-6 rounded-lg border border-gray-200">
+        <div class="bg-card p-6 rounded-lg border border-border">
           <div class="flex items-center">
-            <Icon name="lucide:check-circle" class="w-8 h-8 text-green-600" />
+            <Icon name="lucide:check-circle" class="w-8 h-8 text-green-600 dark:text-green-400" />
             <div class="ml-4">
-              <p class="text-sm font-medium text-gray-600">Completed</p>
-              <p class="text-2xl font-bold text-gray-900">124</p>
+              <p class="text-sm font-medium text-muted-foreground">Completed</p>
+              <p class="text-2xl font-bold text-card-foreground">124</p>
             </div>
           </div>
         </div>
       </div>
 
       <!-- Feedback List -->
-      <div class="bg-white rounded-lg border border-gray-200">
-        <div class="p-6 border-b border-gray-200">
-          <h2 class="text-lg font-semibold text-gray-900">Recent Feedback</h2>
+      <div class="bg-card rounded-lg border border-border">
+        <div class="p-6 border-b border-border">
+          <h2 class="text-lg font-semibold text-card-foreground">Recent Feedback</h2>
         </div>
-        <div class="divide-y divide-gray-200">
+        <div class="divide-y divide-border">
           <!-- Feedback Item 1 -->
-          <div class="p-6 hover:bg-gray-50 transition-colors">
+          <div class="p-6 hover:bg-muted transition-colors">
             <div class="flex items-start space-x-4">
               <div class="flex flex-col items-center space-y-2">
-                <button class="flex flex-col items-center p-2 rounded-lg hover:bg-blue-50 transition-colors">
-                  <Icon name="lucide:chevron-up" class="w-4 h-4 text-gray-400" />
-                  <span class="text-sm font-medium text-gray-900">45</span>
+                <button class="flex flex-col items-center p-2 rounded-lg hover:bg-accent transition-colors">
+                  <Icon name="lucide:chevron-up" class="w-4 h-4 text-muted-foreground" />
+                  <span class="text-sm font-medium text-card-foreground">45</span>
                 </button>
               </div>
               <div class="flex-1">
                 <div class="flex items-start justify-between">
                   <div>
-                    <h3 class="text-lg font-medium text-gray-900 mb-2">Dark mode support</h3>
-                    <p class="text-gray-600 mb-3">
+                    <h3 class="text-lg font-medium text-card-foreground mb-2">Dark mode support</h3>
+                    <p class="text-muted-foreground mb-3">
                       It would be great to have a dark mode option for better usability during night hours. Many users
                       have requested this feature.
                     </p>
-                    <div class="flex items-center space-x-4 text-sm text-gray-500">
+                    <div class="flex items-center space-x-4 text-sm text-muted-foreground">
                       <div class="flex items-center space-x-1">
                         <Icon name="lucide:user" class="w-4 h-4" />
                         <span>John Doe</span>
@@ -149,12 +149,12 @@
                   </div>
                   <div class="flex items-center space-x-2">
                     <span
-                      class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800"
+                      class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300"
                     >
                       In Progress
                     </span>
                     <span
-                      class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800"
+                      class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300"
                     >
                       Feature Request
                     </span>
@@ -165,22 +165,22 @@
           </div>
 
           <!-- Feedback Item 2 -->
-          <div class="p-6 hover:bg-gray-50 transition-colors">
+          <div class="p-6 hover:bg-muted transition-colors">
             <div class="flex items-start space-x-4">
               <div class="flex flex-col items-center space-y-2">
-                <button class="flex flex-col items-center p-2 rounded-lg hover:bg-blue-50 transition-colors">
-                  <Icon name="lucide:chevron-up" class="w-4 h-4 text-gray-400" />
-                  <span class="text-sm font-medium text-gray-900">32</span>
+                <button class="flex flex-col items-center p-2 rounded-lg hover:bg-accent transition-colors">
+                  <Icon name="lucide:chevron-up" class="w-4 h-4 text-muted-foreground" />
+                  <span class="text-sm font-medium text-card-foreground">32</span>
                 </button>
               </div>
               <div class="flex-1">
                 <div class="flex items-start justify-between">
                   <div>
-                    <h3 class="text-lg font-medium text-gray-900 mb-2">Mobile app for iOS and Android</h3>
-                    <p class="text-gray-600 mb-3">
+                    <h3 class="text-lg font-medium text-card-foreground mb-2">Mobile app for iOS and Android</h3>
+                    <p class="text-muted-foreground mb-3">
                       A native mobile application would make it much easier to submit and track feedback on the go.
                     </p>
-                    <div class="flex items-center space-x-4 text-sm text-gray-500">
+                    <div class="flex items-center space-x-4 text-sm text-muted-foreground">
                       <div class="flex items-center space-x-1">
                         <Icon name="lucide:user" class="w-4 h-4" />
                         <span>Alice Smith</span>
@@ -197,12 +197,12 @@
                   </div>
                   <div class="flex items-center space-x-2">
                     <span
-                      class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800"
+                      class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-300"
                     >
                       Planned
                     </span>
                     <span
-                      class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800"
+                      class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300"
                     >
                       Feature Request
                     </span>
@@ -213,22 +213,22 @@
           </div>
 
           <!-- Feedback Item 3 -->
-          <div class="p-6 hover:bg-gray-50 transition-colors">
+          <div class="p-6 hover:bg-muted transition-colors">
             <div class="flex items-start space-x-4">
               <div class="flex flex-col items-center space-y-2">
-                <button class="flex flex-col items-center p-2 rounded-lg hover:bg-blue-50 transition-colors">
-                  <Icon name="lucide:chevron-up" class="w-4 h-4 text-gray-400" />
-                  <span class="text-sm font-medium text-gray-900">28</span>
+                <button class="flex flex-col items-center p-2 rounded-lg hover:bg-accent transition-colors">
+                  <Icon name="lucide:chevron-up" class="w-4 h-4 text-muted-foreground" />
+                  <span class="text-sm font-medium text-card-foreground">28</span>
                 </button>
               </div>
               <div class="flex-1">
                 <div class="flex items-start justify-between">
                   <div>
-                    <h3 class="text-lg font-medium text-gray-900 mb-2">Email notifications for status updates</h3>
-                    <p class="text-gray-600 mb-3">
+                    <h3 class="text-lg font-medium text-card-foreground mb-2">Email notifications for status updates</h3>
+                    <p class="text-muted-foreground mb-3">
                       Users should receive email notifications when the status of their submitted feedback changes.
                     </p>
-                    <div class="flex items-center space-x-4 text-sm text-gray-500">
+                    <div class="flex items-center space-x-4 text-sm text-muted-foreground">
                       <div class="flex items-center space-x-1">
                         <Icon name="lucide:user" class="w-4 h-4" />
                         <span>Bob Johnson</span>
@@ -245,12 +245,12 @@
                   </div>
                   <div class="flex items-center space-x-2">
                     <span
-                      class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800"
+                      class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-secondary text-secondary-foreground"
                     >
                       Under Review
                     </span>
                     <span
-                      class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-purple-100 text-purple-800"
+                      class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-purple-100 text-purple-800 dark:bg-purple-900/30 dark:text-purple-300"
                     >
                       Improvement
                     </span>
@@ -261,23 +261,23 @@
           </div>
 
           <!-- Feedback Item 4 -->
-          <div class="p-6 hover:bg-gray-50 transition-colors">
+          <div class="p-6 hover:bg-muted transition-colors">
             <div class="flex items-start space-x-4">
               <div class="flex flex-col items-center space-y-2">
-                <button class="flex flex-col items-center p-2 rounded-lg hover:bg-blue-50 transition-colors">
-                  <Icon name="lucide:chevron-up" class="w-4 h-4 text-gray-400" />
-                  <span class="text-sm font-medium text-gray-900">19</span>
+                <button class="flex flex-col items-center p-2 rounded-lg hover:bg-accent transition-colors">
+                  <Icon name="lucide:chevron-up" class="w-4 h-4 text-muted-foreground" />
+                  <span class="text-sm font-medium text-card-foreground">19</span>
                 </button>
               </div>
               <div class="flex-1">
                 <div class="flex items-start justify-between">
                   <div>
-                    <h3 class="text-lg font-medium text-gray-900 mb-2">Search functionality is slow</h3>
-                    <p class="text-gray-600 mb-3">
+                    <h3 class="text-lg font-medium text-card-foreground mb-2">Search functionality is slow</h3>
+                    <p class="text-muted-foreground mb-3">
                       The search feature takes too long to return results, especially when searching through large
                       amounts of feedback.
                     </p>
-                    <div class="flex items-center space-x-4 text-sm text-gray-500">
+                    <div class="flex items-center space-x-4 text-sm text-muted-foreground">
                       <div class="flex items-center space-x-1">
                         <Icon name="lucide:user" class="w-4 h-4" />
                         <span>Sarah Wilson</span>
@@ -294,12 +294,12 @@
                   </div>
                   <div class="flex items-center space-x-2">
                     <span
-                      class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800"
+                      class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-300"
                     >
                       Bug Report
                     </span>
                     <span
-                      class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-orange-100 text-orange-800"
+                      class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-orange-100 text-orange-800 dark:bg-orange-900/30 dark:text-orange-300"
                     >
                       High Priority
                     </span>
@@ -311,17 +311,17 @@
         </div>
 
         <!-- Pagination -->
-        <div class="p-6 border-t border-gray-200">
+        <div class="p-6 border-t border-border">
           <div class="flex items-center justify-between">
-            <div class="text-sm text-gray-500">Showing 1 to 10 of 247 results</div>
+            <div class="text-sm text-muted-foreground">Showing 1 to 10 of 247 results</div>
             <div class="flex items-center space-x-2">
-              <button class="px-3 py-2 text-sm text-gray-500 hover:text-gray-700 disabled:opacity-50" disabled>
+              <button class="px-3 py-2 text-sm text-muted-foreground hover:text-foreground disabled:opacity-50" disabled>
                 Previous
               </button>
               <button class="px-3 py-2 text-sm bg-blue-600 text-white rounded-md">1</button>
-              <button class="px-3 py-2 text-sm text-gray-500 hover:text-gray-700">2</button>
-              <button class="px-3 py-2 text-sm text-gray-500 hover:text-gray-700">3</button>
-              <button class="px-3 py-2 text-sm text-gray-500 hover:text-gray-700">Next</button>
+              <button class="px-3 py-2 text-sm text-muted-foreground hover:text-foreground">2</button>
+              <button class="px-3 py-2 text-sm text-muted-foreground hover:text-foreground">3</button>
+              <button class="px-3 py-2 text-sm text-muted-foreground hover:text-foreground">Next</button>
             </div>
           </div>
         </div>
diff --git a/pages/help/index.vue b/pages/help/index.vue
index cfcaa26..097099e 100644
--- a/pages/help/index.vue
+++ b/pages/help/index.vue
@@ -2,101 +2,101 @@
   <NuxtLayout name="dashboard">
     <div class="p-6">
       <div class="mb-6">
-        <h1 class="text-3xl font-bold text-gray-900">Help Center</h1>
-        <p class="text-gray-600">Find answers to your questions and get support for Veerify</p>
+        <h1 class="text-3xl font-bold text-foreground">Help Center</h1>
+        <p class="text-muted-foreground">Find answers to your questions and get support for Veerify</p>
       </div>
 
       <!-- Search Bar -->
       <div class="mb-8">
         <div class="relative max-w-md">
-          <Icon name="lucide:search" class="absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-gray-400" />
+          <Icon name="lucide:search" class="absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-muted-foreground" />
           <input
             type="text"
             placeholder="Search help articles..."
-            class="w-full pl-10 pr-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+            class="w-full pl-10 pr-4 py-3 border border-border rounded-lg bg-background text-foreground focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
           />
         </div>
       </div>
 
       <!-- Quick Actions -->
       <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
-        <div class="bg-white p-6 rounded-lg border border-gray-200 hover:shadow-md transition-shadow cursor-pointer">
-          <div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mb-4">
-            <Icon name="lucide:book-open" class="w-6 h-6 text-blue-600" />
+        <div class="bg-card p-6 rounded-lg border border-border hover:shadow-md transition-shadow cursor-pointer">
+          <div class="w-12 h-12 bg-blue-100 dark:bg-blue-900/30 rounded-lg flex items-center justify-center mb-4">
+            <Icon name="lucide:book-open" class="w-6 h-6 text-blue-600 dark:text-blue-400" />
           </div>
-          <h3 class="font-semibold text-gray-900 mb-2">User Guide</h3>
-          <p class="text-sm text-gray-600">Complete guide to using Veerify for feedback management</p>
+          <h3 class="font-semibold text-card-foreground mb-2">User Guide</h3>
+          <p class="text-sm text-muted-foreground">Complete guide to using Veerify for feedback management</p>
         </div>
 
-        <div class="bg-white p-6 rounded-lg border border-gray-200 hover:shadow-md transition-shadow cursor-pointer">
-          <div class="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center mb-4">
-            <Icon name="lucide:video" class="w-6 h-6 text-green-600" />
+        <div class="bg-card p-6 rounded-lg border border-border hover:shadow-md transition-shadow cursor-pointer">
+          <div class="w-12 h-12 bg-green-100 dark:bg-green-900/30 rounded-lg flex items-center justify-center mb-4">
+            <Icon name="lucide:video" class="w-6 h-6 text-green-600 dark:text-green-400" />
           </div>
-          <h3 class="font-semibold text-gray-900 mb-2">Video Tutorials</h3>
-          <p class="text-sm text-gray-600">Step-by-step tutorials for managing feedback</p>
+          <h3 class="font-semibold text-card-foreground mb-2">Video Tutorials</h3>
+          <p class="text-sm text-muted-foreground">Step-by-step tutorials for managing feedback</p>
         </div>
 
-        <div class="bg-white p-6 rounded-lg border border-gray-200 hover:shadow-md transition-shadow cursor-pointer">
-          <div class="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center mb-4">
-            <Icon name="lucide:message-circle" class="w-6 h-6 text-purple-600" />
+        <div class="bg-card p-6 rounded-lg border border-border hover:shadow-md transition-shadow cursor-pointer">
+          <div class="w-12 h-12 bg-purple-100 dark:bg-purple-900/30 rounded-lg flex items-center justify-center mb-4">
+            <Icon name="lucide:message-circle" class="w-6 h-6 text-purple-600 dark:text-purple-400" />
           </div>
-          <h3 class="font-semibold text-gray-900 mb-2">Contact Support</h3>
-          <p class="text-sm text-gray-600">Get help from our support team</p>
+          <h3 class="font-semibold text-card-foreground mb-2">Contact Support</h3>
+          <p class="text-sm text-muted-foreground">Get help from our support team</p>
         </div>
 
-        <div class="bg-white p-6 rounded-lg border border-gray-200 hover:shadow-md transition-shadow cursor-pointer">
-          <div class="w-12 h-12 bg-orange-100 rounded-lg flex items-center justify-center mb-4">
-            <Icon name="lucide:zap" class="w-6 h-6 text-orange-600" />
+        <div class="bg-card p-6 rounded-lg border border-border hover:shadow-md transition-shadow cursor-pointer">
+          <div class="w-12 h-12 bg-orange-100 dark:bg-orange-900/30 rounded-lg flex items-center justify-center mb-4">
+            <Icon name="lucide:zap" class="w-6 h-6 text-orange-600 dark:text-orange-400" />
           </div>
-          <h3 class="font-semibold text-gray-900 mb-2">API Documentation</h3>
-          <p class="text-sm text-gray-600">Integration guides and API references</p>
+          <h3 class="font-semibold text-card-foreground mb-2">API Documentation</h3>
+          <p class="text-sm text-muted-foreground">Integration guides and API references</p>
         </div>
       </div>
 
       <!-- Popular Articles -->
       <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
         <!-- FAQ Section -->
-        <div class="bg-white rounded-lg border border-gray-200">
-          <div class="p-6 border-b border-gray-200">
-            <h2 class="text-lg font-semibold text-gray-900">Frequently Asked Questions</h2>
+        <div class="bg-card rounded-lg border border-border">
+          <div class="p-6 border-b border-border">
+            <h2 class="text-lg font-semibold text-card-foreground">Frequently Asked Questions</h2>
           </div>
           <div class="p-6">
             <div class="space-y-4">
-              <div class="border-b border-gray-100 pb-4">
+              <div class="border-b border-border pb-4">
                 <button class="flex items-center justify-between w-full text-left">
-                  <h3 class="font-medium text-gray-900">How do I create a feedback board?</h3>
-                  <Icon name="lucide:chevron-down" class="w-4 h-4 text-gray-400" />
+                  <h3 class="font-medium text-card-foreground">How do I create a feedback board?</h3>
+                  <Icon name="lucide:chevron-down" class="w-4 h-4 text-muted-foreground" />
                 </button>
-                <div class="mt-3 text-sm text-gray-600 hidden">
+                <div class="mt-3 text-sm text-muted-foreground hidden">
                   To create a new feedback board, navigate to your dashboard and click "Create Board"...
                 </div>
               </div>
 
-              <div class="border-b border-gray-100 pb-4">
+              <div class="border-b border-border pb-4">
                 <button class="flex items-center justify-between w-full text-left">
-                  <h3 class="font-medium text-gray-900">How can I invite users to submit feedback?</h3>
-                  <Icon name="lucide:chevron-down" class="w-4 h-4 text-gray-400" />
+                  <h3 class="font-medium text-card-foreground">How can I invite users to submit feedback?</h3>
+                  <Icon name="lucide:chevron-down" class="w-4 h-4 text-muted-foreground" />
                 </button>
               </div>
 
-              <div class="border-b border-gray-100 pb-4">
+              <div class="border-b border-border pb-4">
                 <button class="flex items-center justify-between w-full text-left">
-                  <h3 class="font-medium text-gray-900">Can I customize the feedback forms?</h3>
-                  <Icon name="lucide:chevron-down" class="w-4 h-4 text-gray-400" />
+                  <h3 class="font-medium text-card-foreground">Can I customize the feedback forms?</h3>
+                  <Icon name="lucide:chevron-down" class="w-4 h-4 text-muted-foreground" />
                 </button>
               </div>
 
-              <div class="border-b border-gray-100 pb-4">
+              <div class="border-b border-border pb-4">
                 <button class="flex items-center justify-between w-full text-left">
-                  <h3 class="font-medium text-gray-900">How do I manage feature requests?</h3>
-                  <Icon name="lucide:chevron-down" class="w-4 h-4 text-gray-400" />
+                  <h3 class="font-medium text-card-foreground">How do I manage feature requests?</h3>
+                  <Icon name="lucide:chevron-down" class="w-4 h-4 text-muted-foreground" />
                 </button>
               </div>
 
               <div class="pb-4">
                 <button class="flex items-center justify-between w-full text-left">
-                  <h3 class="font-medium text-gray-900">Can I integrate Veerify with other tools?</h3>
-                  <Icon name="lucide:chevron-down" class="w-4 h-4 text-gray-400" />
+                  <h3 class="font-medium text-card-foreground">Can I integrate Veerify with other tools?</h3>
+                  <Icon name="lucide:chevron-down" class="w-4 h-4 text-muted-foreground" />
                 </button>
               </div>
             </div>
@@ -104,59 +104,59 @@
         </div>
 
         <!-- Getting Started -->
-        <div class="bg-white rounded-lg border border-gray-200">
-          <div class="p-6 border-b border-gray-200">
-            <h2 class="text-lg font-semibold text-gray-900">Getting Started</h2>
+        <div class="bg-card rounded-lg border border-border">
+          <div class="p-6 border-b border-border">
+            <h2 class="text-lg font-semibold text-card-foreground">Getting Started</h2>
           </div>
           <div class="p-6">
             <div class="space-y-4">
               <div class="flex items-start space-x-3">
-                <div class="w-6 h-6 bg-blue-100 rounded-full flex items-center justify-center mt-0.5">
-                  <span class="text-xs font-medium text-blue-600">1</span>
+                <div class="w-6 h-6 bg-blue-100 dark:bg-blue-900/30 rounded-full flex items-center justify-center mt-0.5">
+                  <span class="text-xs font-medium text-blue-600 dark:text-blue-400">1</span>
                 </div>
                 <div>
-                  <h3 class="font-medium text-gray-900 mb-1">Set up your workspace</h3>
-                  <p class="text-sm text-gray-600">Create your first feedback board and customize settings</p>
+                  <h3 class="font-medium text-card-foreground mb-1">Set up your workspace</h3>
+                  <p class="text-sm text-muted-foreground">Create your first feedback board and customize settings</p>
                 </div>
               </div>
 
               <div class="flex items-start space-x-3">
-                <div class="w-6 h-6 bg-blue-100 rounded-full flex items-center justify-center mt-0.5">
-                  <span class="text-xs font-medium text-blue-600">2</span>
+                <div class="w-6 h-6 bg-blue-100 dark:bg-blue-900/30 rounded-full flex items-center justify-center mt-0.5">
+                  <span class="text-xs font-medium text-blue-600 dark:text-blue-400">2</span>
                 </div>
                 <div>
-                  <h3 class="font-medium text-gray-900 mb-1">Invite your users</h3>
-                  <p class="text-sm text-gray-600">Share your feedback board with customers and users</p>
+                  <h3 class="font-medium text-card-foreground mb-1">Invite your users</h3>
+                  <p class="text-sm text-muted-foreground">Share your feedback board with customers and users</p>
                 </div>
               </div>
 
               <div class="flex items-start space-x-3">
-                <div class="w-6 h-6 bg-blue-100 rounded-full flex items-center justify-center mt-0.5">
-                  <span class="text-xs font-medium text-blue-600">3</span>
+                <div class="w-6 h-6 bg-blue-100 dark:bg-blue-900/30 rounded-full flex items-center justify-center mt-0.5">
+                  <span class="text-xs font-medium text-blue-600 dark:text-blue-400">3</span>
                 </div>
                 <div>
-                  <h3 class="font-medium text-gray-900 mb-1">Organize feedback</h3>
-                  <p class="text-sm text-gray-600">Use tags, categories, and statuses to organize submissions</p>
+                  <h3 class="font-medium text-card-foreground mb-1">Organize feedback</h3>
+                  <p class="text-sm text-muted-foreground">Use tags, categories, and statuses to organize submissions</p>
                 </div>
               </div>
 
               <div class="flex items-start space-x-3">
-                <div class="w-6 h-6 bg-blue-100 rounded-full flex items-center justify-center mt-0.5">
-                  <span class="text-xs font-medium text-blue-600">4</span>
+                <div class="w-6 h-6 bg-blue-100 dark:bg-blue-900/30 rounded-full flex items-center justify-center mt-0.5">
+                  <span class="text-xs font-medium text-blue-600 dark:text-blue-400">4</span>
                 </div>
                 <div>
-                  <h3 class="font-medium text-gray-900 mb-1">Create your roadmap</h3>
-                  <p class="text-sm text-gray-600">Plan and share your product development roadmap</p>
+                  <h3 class="font-medium text-card-foreground mb-1">Create your roadmap</h3>
+                  <p class="text-sm text-muted-foreground">Plan and share your product development roadmap</p>
                 </div>
               </div>
 
               <div class="flex items-start space-x-3">
-                <div class="w-6 h-6 bg-blue-100 rounded-full flex items-center justify-center mt-0.5">
-                  <span class="text-xs font-medium text-blue-600">5</span>
+                <div class="w-6 h-6 bg-blue-100 dark:bg-blue-900/30 rounded-full flex items-center justify-center mt-0.5">
+                  <span class="text-xs font-medium text-blue-600 dark:text-blue-400">5</span>
                 </div>
                 <div>
-                  <h3 class="font-medium text-gray-900 mb-1">Engage with users</h3>
-                  <p class="text-sm text-gray-600">Respond to feedback and keep users updated</p>
+                  <h3 class="font-medium text-card-foreground mb-1">Engage with users</h3>
+                  <p class="text-sm text-muted-foreground">Respond to feedback and keep users updated</p>
                 </div>
               </div>
             </div>
@@ -165,69 +165,69 @@
       </div>
 
       <!-- Popular Resources -->
-      <div class="mt-8 bg-white rounded-lg border border-gray-200">
-        <div class="p-6 border-b border-gray-200">
-          <h2 class="text-lg font-semibold text-gray-900">Popular Resources</h2>
+      <div class="mt-8 bg-card rounded-lg border border-border">
+        <div class="p-6 border-b border-border">
+          <h2 class="text-lg font-semibold text-card-foreground">Popular Resources</h2>
         </div>
         <div class="p-6">
           <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
             <div class="flex items-start space-x-3">
-              <div class="w-8 h-8 bg-blue-100 rounded-lg flex items-center justify-center mt-1">
-                <Icon name="lucide:file-text" class="w-4 h-4 text-blue-600" />
+              <div class="w-8 h-8 bg-blue-100 dark:bg-blue-900/30 rounded-lg flex items-center justify-center mt-1">
+                <Icon name="lucide:file-text" class="w-4 h-4 text-blue-600 dark:text-blue-400" />
               </div>
               <div>
-                <h3 class="font-medium text-gray-900 mb-1">Setting up SSO</h3>
-                <p class="text-sm text-gray-600">Configure single sign-on for your team</p>
+                <h3 class="font-medium text-card-foreground mb-1">Setting up SSO</h3>
+                <p class="text-sm text-muted-foreground">Configure single sign-on for your team</p>
               </div>
             </div>
 
             <div class="flex items-start space-x-3">
-              <div class="w-8 h-8 bg-green-100 rounded-lg flex items-center justify-center mt-1">
-                <Icon name="lucide:code" class="w-4 h-4 text-green-600" />
+              <div class="w-8 h-8 bg-green-100 dark:bg-green-900/30 rounded-lg flex items-center justify-center mt-1">
+                <Icon name="lucide:code" class="w-4 h-4 text-green-600 dark:text-green-400" />
               </div>
               <div>
-                <h3 class="font-medium text-gray-900 mb-1">Widget Integration</h3>
-                <p class="text-sm text-gray-600">Embed feedback widgets in your app</p>
+                <h3 class="font-medium text-card-foreground mb-1">Widget Integration</h3>
+                <p class="text-sm text-muted-foreground">Embed feedback widgets in your app</p>
               </div>
             </div>
 
             <div class="flex items-start space-x-3">
-              <div class="w-8 h-8 bg-purple-100 rounded-lg flex items-center justify-center mt-1">
-                <Icon name="lucide:bell" class="w-4 h-4 text-purple-600" />
+              <div class="w-8 h-8 bg-purple-100 dark:bg-purple-900/30 rounded-lg flex items-center justify-center mt-1">
+                <Icon name="lucide:bell" class="w-4 h-4 text-purple-600 dark:text-purple-400" />
               </div>
               <div>
-                <h3 class="font-medium text-gray-900 mb-1">Notification Setup</h3>
-                <p class="text-sm text-gray-600">Configure alerts for new feedback</p>
+                <h3 class="font-medium text-card-foreground mb-1">Notification Setup</h3>
+                <p class="text-sm text-muted-foreground">Configure alerts for new feedback</p>
               </div>
             </div>
 
             <div class="flex items-start space-x-3">
-              <div class="w-8 h-8 bg-orange-100 rounded-lg flex items-center justify-center mt-1">
-                <Icon name="lucide:users" class="w-4 h-4 text-orange-600" />
+              <div class="w-8 h-8 bg-orange-100 dark:bg-orange-900/30 rounded-lg flex items-center justify-center mt-1">
+                <Icon name="lucide:users" class="w-4 h-4 text-orange-600 dark:text-orange-400" />
               </div>
               <div>
-                <h3 class="font-medium text-gray-900 mb-1">Team Management</h3>
-                <p class="text-sm text-gray-600">Add team members and manage permissions</p>
+                <h3 class="font-medium text-card-foreground mb-1">Team Management</h3>
+                <p class="text-sm text-muted-foreground">Add team members and manage permissions</p>
               </div>
             </div>
 
             <div class="flex items-start space-x-3">
-              <div class="w-8 h-8 bg-red-100 rounded-lg flex items-center justify-center mt-1">
-                <Icon name="lucide:bar-chart" class="w-4 h-4 text-red-600" />
+              <div class="w-8 h-8 bg-red-100 dark:bg-red-900/30 rounded-lg flex items-center justify-center mt-1">
+                <Icon name="lucide:bar-chart" class="w-4 h-4 text-red-600 dark:text-red-400" />
               </div>
               <div>
-                <h3 class="font-medium text-gray-900 mb-1">Analytics Guide</h3>
-                <p class="text-sm text-gray-600">Understanding your feedback analytics</p>
+                <h3 class="font-medium text-card-foreground mb-1">Analytics Guide</h3>
+                <p class="text-sm text-muted-foreground">Understanding your feedback analytics</p>
               </div>
             </div>
 
             <div class="flex items-start space-x-3">
-              <div class="w-8 h-8 bg-yellow-100 rounded-lg flex items-center justify-center mt-1">
-                <Icon name="lucide:settings" class="w-4 h-4 text-yellow-600" />
+              <div class="w-8 h-8 bg-yellow-100 dark:bg-yellow-900/30 rounded-lg flex items-center justify-center mt-1">
+                <Icon name="lucide:settings" class="w-4 h-4 text-yellow-600 dark:text-yellow-400" />
               </div>
               <div>
-                <h3 class="font-medium text-gray-900 mb-1">Custom Branding</h3>
-                <p class="text-sm text-gray-600">Customize your feedback portal appearance</p>
+                <h3 class="font-medium text-card-foreground mb-1">Custom Branding</h3>
+                <p class="text-sm text-muted-foreground">Customize your feedback portal appearance</p>
               </div>
             </div>
           </div>
@@ -235,11 +235,11 @@
       </div>
 
       <!-- Contact Support -->
-      <div class="mt-8 bg-blue-50 rounded-lg p-6">
+      <div class="mt-8 bg-blue-50 dark:bg-blue-950/30 rounded-lg p-6">
         <div class="text-center">
-          <Icon name="lucide:headphones" class="w-12 h-12 text-blue-600 mx-auto mb-4" />
-          <h3 class="text-lg font-semibold text-gray-900 mb-2">Still need help?</h3>
-          <p class="text-gray-600 mb-6">Our support team is here to help you get the most out of Veerify</p>
+          <Icon name="lucide:headphones" class="w-12 h-12 text-blue-600 dark:text-blue-400 mx-auto mb-4" />
+          <h3 class="text-lg font-semibold text-foreground mb-2">Still need help?</h3>
+          <p class="text-muted-foreground mb-6">Our support team is here to help you get the most out of Veerify</p>
           <div class="flex justify-center space-x-4">
             <button
               class="inline-flex items-center px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors"
@@ -248,7 +248,7 @@
               Start Live Chat
             </button>
             <button
-              class="inline-flex items-center px-4 py-2 bg-white text-gray-700 border border-gray-300 rounded-md hover:bg-gray-50 transition-colors"
+              class="inline-flex items-center px-4 py-2 bg-card text-foreground border border-border rounded-md hover:bg-muted transition-colors"
             >
               <Icon name="lucide:mail" class="w-4 h-4 mr-2" />
               Send Email
diff --git a/pages/reports/index.vue b/pages/reports/index.vue
index ccc3471..ff0f01e 100644
--- a/pages/reports/index.vue
+++ b/pages/reports/index.vue
@@ -2,16 +2,16 @@
   <NuxtLayout name="dashboard">
     <div class="p-6">
       <div class="mb-6">
-        <h1 class="text-3xl font-bold text-gray-900">Analytics</h1>
-        <p class="text-gray-600">Insights and analytics for your feedback management</p>
+        <h1 class="text-3xl font-bold text-foreground">Analytics</h1>
+        <p class="text-muted-foreground">Insights and analytics for your feedback management</p>
       </div>
 
       <!-- Report Filters -->
-      <div class="bg-white rounded-lg border border-gray-200 p-6 mb-6">
+      <div class="bg-card rounded-lg border border-border p-6 mb-6">
         <div class="flex flex-wrap items-center gap-4">
           <div>
-            <label class="block text-sm text-gray-600 mb-1">Date Range</label>
-            <select class="px-3 py-2 border border-gray-300 rounded-md text-sm">
+            <label class="block text-sm text-muted-foreground mb-1">Date Range</label>
+            <select class="px-3 py-2 border border-border rounded-md text-sm bg-background text-foreground">
               <option>Last 7 days</option>
               <option>Last 30 days</option>
               <option>Last 3 months</option>
@@ -20,8 +20,8 @@
             </select>
           </div>
           <div>
-            <label class="block text-sm text-gray-600 mb-1">Board</label>
-            <select class="px-3 py-2 border border-gray-300 rounded-md text-sm">
+            <label class="block text-sm text-muted-foreground mb-1">Board</label>
+            <select class="px-3 py-2 border border-border rounded-md text-sm bg-background text-foreground">
               <option>All Boards</option>
               <option>Feature Requests</option>
               <option>Bug Reports</option>
@@ -29,8 +29,8 @@
             </select>
           </div>
           <div>
-            <label class="block text-sm text-gray-600 mb-1">Status</label>
-            <select class="px-3 py-2 border border-gray-300 rounded-md text-sm">
+            <label class="block text-sm text-muted-foreground mb-1">Status</label>
+            <select class="px-3 py-2 border border-border rounded-md text-sm bg-background text-foreground">
               <option>All Statuses</option>
               <option>Open</option>
               <option>In Progress</option>
@@ -49,75 +49,75 @@
 
       <!-- Key Metrics -->
       <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
-        <div class="bg-white p-6 rounded-lg border border-gray-200">
+        <div class="bg-card p-6 rounded-lg border border-border">
           <div class="flex items-center justify-between mb-2">
-            <h3 class="text-sm font-medium text-gray-600">Total Feedback</h3>
-            <Icon name="lucide:message-square" class="w-5 h-5 text-blue-600" />
+            <h3 class="text-sm font-medium text-muted-foreground">Total Feedback</h3>
+            <Icon name="lucide:message-square" class="w-5 h-5 text-blue-600 dark:text-blue-400" />
           </div>
-          <p class="text-2xl font-bold text-gray-900">1,247</p>
-          <p class="text-sm text-blue-600 mt-1">+15.2% from last month</p>
+          <p class="text-2xl font-bold text-card-foreground">1,247</p>
+          <p class="text-sm text-blue-600 dark:text-blue-400 mt-1">+15.2% from last month</p>
         </div>
 
-        <div class="bg-white p-6 rounded-lg border border-gray-200">
+        <div class="bg-card p-6 rounded-lg border border-border">
           <div class="flex items-center justify-between mb-2">
-            <h3 class="text-sm font-medium text-gray-600">Active Users</h3>
-            <Icon name="lucide:users" class="w-5 h-5 text-green-600" />
+            <h3 class="text-sm font-medium text-muted-foreground">Active Users</h3>
+            <Icon name="lucide:users" class="w-5 h-5 text-green-600 dark:text-green-400" />
           </div>
-          <p class="text-2xl font-bold text-gray-900">3,284</p>
-          <p class="text-sm text-green-600 mt-1">+8.1% from last month</p>
+          <p class="text-2xl font-bold text-card-foreground">3,284</p>
+          <p class="text-sm text-green-600 dark:text-green-400 mt-1">+8.1% from last month</p>
         </div>
 
-        <div class="bg-white p-6 rounded-lg border border-gray-200">
+        <div class="bg-card p-6 rounded-lg border border-border">
           <div class="flex items-center justify-between mb-2">
-            <h3 class="text-sm font-medium text-gray-600">Completion Rate</h3>
-            <Icon name="lucide:check-circle" class="w-5 h-5 text-purple-600" />
+            <h3 class="text-sm font-medium text-muted-foreground">Completion Rate</h3>
+            <Icon name="lucide:check-circle" class="w-5 h-5 text-purple-600 dark:text-purple-400" />
           </div>
-          <p class="text-2xl font-bold text-gray-900">78.5%</p>
-          <p class="text-sm text-purple-600 mt-1">+12.3% from last month</p>
+          <p class="text-2xl font-bold text-card-foreground">78.5%</p>
+          <p class="text-sm text-purple-600 dark:text-purple-400 mt-1">+12.3% from last month</p>
         </div>
 
-        <div class="bg-white p-6 rounded-lg border border-gray-200">
+        <div class="bg-card p-6 rounded-lg border border-border">
           <div class="flex items-center justify-between mb-2">
-            <h3 class="text-sm font-medium text-gray-600">Avg Response Time</h3>
-            <Icon name="lucide:clock" class="w-5 h-5 text-orange-600" />
+            <h3 class="text-sm font-medium text-muted-foreground">Avg Response Time</h3>
+            <Icon name="lucide:clock" class="w-5 h-5 text-orange-600 dark:text-orange-400" />
           </div>
-          <p class="text-2xl font-bold text-gray-900">2.4d</p>
-          <p class="text-sm text-orange-600 mt-1">-0.8d from last month</p>
+          <p class="text-2xl font-bold text-card-foreground">2.4d</p>
+          <p class="text-sm text-orange-600 dark:text-orange-400 mt-1">-0.8d from last month</p>
         </div>
       </div>
 
       <!-- Charts Section -->
       <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
         <!-- Feedback Trend -->
-        <div class="bg-white rounded-lg border border-gray-200 p-6">
+        <div class="bg-card rounded-lg border border-border p-6">
           <div class="flex items-center justify-between mb-4">
-            <h3 class="text-lg font-semibold text-gray-900">Feedback Trend</h3>
-            <button class="text-sm text-gray-500 hover:text-gray-700">
+            <h3 class="text-lg font-semibold text-card-foreground">Feedback Trend</h3>
+            <button class="text-sm text-muted-foreground hover:text-foreground">
               <Icon name="lucide:more-horizontal" class="w-4 h-4" />
             </button>
           </div>
-          <div class="h-64 bg-gray-50 rounded-lg flex items-center justify-center">
+          <div class="h-64 bg-muted rounded-lg flex items-center justify-center">
             <div class="text-center">
-              <Icon name="lucide:trending-up" class="w-12 h-12 text-gray-400 mx-auto mb-2" />
-              <p class="text-gray-500">Feedback Trend Chart</p>
-              <p class="text-sm text-gray-400">Line chart visualization would go here</p>
+              <Icon name="lucide:trending-up" class="w-12 h-12 text-muted-foreground mx-auto mb-2" />
+              <p class="text-muted-foreground">Feedback Trend Chart</p>
+              <p class="text-sm text-muted-foreground">Line chart visualization would go here</p>
             </div>
           </div>
         </div>
 
         <!-- Feature Status Distribution -->
-        <div class="bg-white rounded-lg border border-gray-200 p-6">
+        <div class="bg-card rounded-lg border border-border p-6">
           <div class="flex items-center justify-between mb-4">
-            <h3 class="text-lg font-semibold text-gray-900">Feature Status</h3>
-            <button class="text-sm text-gray-500 hover:text-gray-700">
+            <h3 class="text-lg font-semibold text-card-foreground">Feature Status</h3>
+            <button class="text-sm text-muted-foreground hover:text-foreground">
               <Icon name="lucide:more-horizontal" class="w-4 h-4" />
             </button>
           </div>
-          <div class="h-64 bg-gray-50 rounded-lg flex items-center justify-center">
+          <div class="h-64 bg-muted rounded-lg flex items-center justify-center">
             <div class="text-center">
-              <Icon name="lucide:pie-chart" class="w-12 h-12 text-gray-400 mx-auto mb-2" />
-              <p class="text-gray-500">Status Distribution</p>
-              <p class="text-sm text-gray-400">Donut chart visualization would go here</p>
+              <Icon name="lucide:pie-chart" class="w-12 h-12 text-muted-foreground mx-auto mb-2" />
+              <p class="text-muted-foreground">Status Distribution</p>
+              <p class="text-sm text-muted-foreground">Donut chart visualization would go here</p>
             </div>
           </div>
         </div>
@@ -126,10 +126,10 @@
       <!-- User Engagement -->
       <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
         <!-- Top Contributors -->
-        <div class="bg-white rounded-lg border border-gray-200 p-6">
+        <div class="bg-card rounded-lg border border-border p-6">
           <div class="flex items-center justify-between mb-4">
-            <h3 class="text-lg font-semibold text-gray-900">Top Contributors</h3>
-            <button class="text-sm text-gray-500 hover:text-gray-700">
+            <h3 class="text-lg font-semibold text-card-foreground">Top Contributors</h3>
+            <button class="text-sm text-muted-foreground hover:text-foreground">
               <Icon name="lucide:more-horizontal" class="w-4 h-4" />
             </button>
           </div>
@@ -140,13 +140,13 @@
                   <span class="text-white text-sm font-medium">JD</span>
                 </div>
                 <div>
-                  <p class="text-sm font-medium text-gray-900">John Doe</p>
-                  <p class="text-xs text-gray-500">john@example.com</p>
+                  <p class="text-sm font-medium text-card-foreground">John Doe</p>
+                  <p class="text-xs text-muted-foreground">john@example.com</p>
                 </div>
               </div>
               <div class="text-right">
-                <p class="text-sm font-medium text-gray-900">23 submissions</p>
-                <p class="text-xs text-gray-500">156 votes</p>
+                <p class="text-sm font-medium text-card-foreground">23 submissions</p>
+                <p class="text-xs text-muted-foreground">156 votes</p>
               </div>
             </div>
             <div class="flex items-center justify-between">
@@ -155,13 +155,13 @@
                   <span class="text-white text-sm font-medium">AS</span>
                 </div>
                 <div>
-                  <p class="text-sm font-medium text-gray-900">Alice Smith</p>
-                  <p class="text-xs text-gray-500">alice@example.com</p>
+                  <p class="text-sm font-medium text-card-foreground">Alice Smith</p>
+                  <p class="text-xs text-muted-foreground">alice@example.com</p>
                 </div>
               </div>
               <div class="text-right">
-                <p class="text-sm font-medium text-gray-900">18 submissions</p>
-                <p class="text-xs text-gray-500">142 votes</p>
+                <p class="text-sm font-medium text-card-foreground">18 submissions</p>
+                <p class="text-xs text-muted-foreground">142 votes</p>
               </div>
             </div>
             <div class="flex items-center justify-between">
@@ -170,67 +170,67 @@
                   <span class="text-white text-sm font-medium">BJ</span>
                 </div>
                 <div>
-                  <p class="text-sm font-medium text-gray-900">Bob Johnson</p>
-                  <p class="text-xs text-gray-500">bob@example.com</p>
+                  <p class="text-sm font-medium text-card-foreground">Bob Johnson</p>
+                  <p class="text-xs text-muted-foreground">bob@example.com</p>
                 </div>
               </div>
               <div class="text-right">
-                <p class="text-sm font-medium text-gray-900">15 submissions</p>
-                <p class="text-xs text-gray-500">98 votes</p>
+                <p class="text-sm font-medium text-card-foreground">15 submissions</p>
+                <p class="text-xs text-muted-foreground">98 votes</p>
               </div>
             </div>
           </div>
         </div>
 
         <!-- Feature Categories -->
-        <div class="bg-white rounded-lg border border-gray-200 p-6">
+        <div class="bg-card rounded-lg border border-border p-6">
           <div class="flex items-center justify-between mb-4">
-            <h3 class="text-lg font-semibold text-gray-900">Popular Categories</h3>
-            <button class="text-sm text-gray-500 hover:text-gray-700">
+            <h3 class="text-lg font-semibold text-card-foreground">Popular Categories</h3>
+            <button class="text-sm text-muted-foreground hover:text-foreground">
               <Icon name="lucide:more-horizontal" class="w-4 h-4" />
             </button>
           </div>
           <div class="space-y-4">
             <div class="flex items-center justify-between">
               <div class="flex items-center space-x-3">
-                <div class="w-8 h-8 bg-blue-100 rounded-lg flex items-center justify-center">
-                  <Icon name="lucide:zap" class="w-4 h-4 text-blue-600" />
+                <div class="w-8 h-8 bg-blue-100 dark:bg-blue-900/30 rounded-lg flex items-center justify-center">
+                  <Icon name="lucide:zap" class="w-4 h-4 text-blue-600 dark:text-blue-400" />
                 </div>
-                <span class="text-sm font-medium text-gray-900">New Features</span>
+                <span class="text-sm font-medium text-card-foreground">New Features</span>
               </div>
               <div class="flex items-center space-x-2">
-                <div class="w-24 bg-gray-200 rounded-full h-2">
+                <div class="w-24 bg-muted rounded-full h-2">
                   <div class="bg-blue-600 h-2 rounded-full" style="width: 65%" />
                 </div>
-                <span class="text-sm text-gray-600">65%</span>
+                <span class="text-sm text-muted-foreground">65%</span>
               </div>
             </div>
             <div class="flex items-center justify-between">
               <div class="flex items-center space-x-3">
-                <div class="w-8 h-8 bg-red-100 rounded-lg flex items-center justify-center">
-                  <Icon name="lucide:bug" class="w-4 h-4 text-red-600" />
+                <div class="w-8 h-8 bg-red-100 dark:bg-red-900/30 rounded-lg flex items-center justify-center">
+                  <Icon name="lucide:bug" class="w-4 h-4 text-red-600 dark:text-red-400" />
                 </div>
-                <span class="text-sm font-medium text-gray-900">Bug Reports</span>
+                <span class="text-sm font-medium text-card-foreground">Bug Reports</span>
               </div>
               <div class="flex items-center space-x-2">
-                <div class="w-24 bg-gray-200 rounded-full h-2">
+                <div class="w-24 bg-muted rounded-full h-2">
                   <div class="bg-red-600 h-2 rounded-full" style="width: 25%" />
                 </div>
-                <span class="text-sm text-gray-600">25%</span>
+                <span class="text-sm text-muted-foreground">25%</span>
               </div>
             </div>
             <div class="flex items-center justify-between">
               <div class="flex items-center space-x-3">
-                <div class="w-8 h-8 bg-green-100 rounded-lg flex items-center justify-center">
-                  <Icon name="lucide:settings" class="w-4 h-4 text-green-600" />
+                <div class="w-8 h-8 bg-green-100 dark:bg-green-900/30 rounded-lg flex items-center justify-center">
+                  <Icon name="lucide:settings" class="w-4 h-4 text-green-600 dark:text-green-400" />
                 </div>
-                <span class="text-sm font-medium text-gray-900">Improvements</span>
+                <span class="text-sm font-medium text-card-foreground">Improvements</span>
               </div>
               <div class="flex items-center space-x-2">
-                <div class="w-24 bg-gray-200 rounded-full h-2">
+                <div class="w-24 bg-muted rounded-full h-2">
                   <div class="bg-green-600 h-2 rounded-full" style="width: 10%" />
                 </div>
-                <span class="text-sm text-gray-600">10%</span>
+                <span class="text-sm text-muted-foreground">10%</span>
               </div>
             </div>
           </div>
@@ -238,10 +238,10 @@
       </div>
 
       <!-- Export Reports -->
-      <div class="bg-white rounded-lg border border-gray-200">
-        <div class="p-6 border-b border-gray-200">
+      <div class="bg-card rounded-lg border border-border">
+        <div class="p-6 border-b border-border">
           <div class="flex items-center justify-between">
-            <h2 class="text-lg font-semibold text-gray-900">Export Reports</h2>
+            <h2 class="text-lg font-semibold text-card-foreground">Export Reports</h2>
             <button
               class="inline-flex items-center px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors"
             >
@@ -252,61 +252,61 @@
         </div>
         <div class="p-6">
           <div class="space-y-4">
-            <div class="flex items-center justify-between p-4 border border-gray-200 rounded-lg">
+            <div class="flex items-center justify-between p-4 border border-border rounded-lg">
               <div class="flex items-center space-x-4">
-                <div class="w-10 h-10 bg-blue-100 rounded-lg flex items-center justify-center">
-                  <Icon name="lucide:file-text" class="w-5 h-5 text-blue-600" />
+                <div class="w-10 h-10 bg-blue-100 dark:bg-blue-900/30 rounded-lg flex items-center justify-center">
+                  <Icon name="lucide:file-text" class="w-5 h-5 text-blue-600 dark:text-blue-400" />
                 </div>
                 <div>
-                  <h3 class="font-medium text-gray-900">Monthly Feedback Summary</h3>
-                  <p class="text-sm text-gray-500">Generated 1 hour ago • Product Team</p>
+                  <h3 class="font-medium text-card-foreground">Monthly Feedback Summary</h3>
+                  <p class="text-sm text-muted-foreground">Generated 1 hour ago • Product Team</p>
                 </div>
               </div>
               <div class="flex items-center space-x-2">
-                <button class="p-2 text-gray-400 hover:text-gray-600">
+                <button class="p-2 text-muted-foreground hover:text-foreground">
                   <Icon name="lucide:download" class="w-4 h-4" />
                 </button>
-                <button class="p-2 text-gray-400 hover:text-gray-600">
+                <button class="p-2 text-muted-foreground hover:text-foreground">
                   <Icon name="lucide:share" class="w-4 h-4" />
                 </button>
               </div>
             </div>
 
-            <div class="flex items-center justify-between p-4 border border-gray-200 rounded-lg">
+            <div class="flex items-center justify-between p-4 border border-border rounded-lg">
               <div class="flex items-center space-x-4">
-                <div class="w-10 h-10 bg-green-100 rounded-lg flex items-center justify-center">
-                  <Icon name="lucide:file-text" class="w-5 h-5 text-green-600" />
+                <div class="w-10 h-10 bg-green-100 dark:bg-green-900/30 rounded-lg flex items-center justify-center">
+                  <Icon name="lucide:file-text" class="w-5 h-5 text-green-600 dark:text-green-400" />
                 </div>
                 <div>
-                  <h3 class="font-medium text-gray-900">User Engagement Analytics</h3>
-                  <p class="text-sm text-gray-500">Generated 2 days ago • Marketing Team</p>
+                  <h3 class="font-medium text-card-foreground">User Engagement Analytics</h3>
+                  <p class="text-sm text-muted-foreground">Generated 2 days ago • Marketing Team</p>
                 </div>
               </div>
               <div class="flex items-center space-x-2">
-                <button class="p-2 text-gray-400 hover:text-gray-600">
+                <button class="p-2 text-muted-foreground hover:text-foreground">
                   <Icon name="lucide:download" class="w-4 h-4" />
                 </button>
-                <button class="p-2 text-gray-400 hover:text-gray-600">
+                <button class="p-2 text-muted-foreground hover:text-foreground">
                   <Icon name="lucide:share" class="w-4 h-4" />
                 </button>
               </div>
             </div>
 
-            <div class="flex items-center justify-between p-4 border border-gray-200 rounded-lg">
+            <div class="flex items-center justify-between p-4 border border-border rounded-lg">
               <div class="flex items-center space-x-4">
-                <div class="w-10 h-10 bg-purple-100 rounded-lg flex items-center justify-center">
-                  <Icon name="lucide:file-text" class="w-5 h-5 text-purple-600" />
+                <div class="w-10 h-10 bg-purple-100 dark:bg-purple-900/30 rounded-lg flex items-center justify-center">
+                  <Icon name="lucide:file-text" class="w-5 h-5 text-purple-600 dark:text-purple-400" />
                 </div>
                 <div>
-                  <h3 class="font-medium text-gray-900">Feature Completion Report</h3>
-                  <p class="text-sm text-gray-500">Generated 1 week ago • Development Team</p>
+                  <h3 class="font-medium text-card-foreground">Feature Completion Report</h3>
+                  <p class="text-sm text-muted-foreground">Generated 1 week ago • Development Team</p>
                 </div>
               </div>
               <div class="flex items-center space-x-2">
-                <button class="p-2 text-gray-400 hover:text-gray-600">
+                <button class="p-2 text-muted-foreground hover:text-foreground">
                   <Icon name="lucide:download" class="w-4 h-4" />
                 </button>
-                <button class="p-2 text-gray-400 hover:text-gray-600">
+                <button class="p-2 text-muted-foreground hover:text-foreground">
                   <Icon name="lucide:share" class="w-4 h-4" />
                 </button>
               </div>