From fcddd59a685768596011ad41b7b1dd10e493e382 Mon Sep 17 00:00:00 2001
From: vishalsoni <vishalsoni6350@gmail.com>
Date: Sun, 21 Jun 2026 15:02:53 +0530
Subject: [PATCH] add reputation system

---
 README.md                                     |   7 +-
 package-lock.json                             | 196 +---
 package.json                                  |   1 -
 src/App.jsx                                   |  34 +
 src/components/answers/AnswerCard.jsx         | 150 ++-
 src/components/answers/AnswerList.jsx         |  14 +-
 src/components/layout/Layout.jsx              |   3 -
 src/components/layout/Navbar.jsx              |  46 +-
 src/components/questions/DuplicateWarning.jsx |  52 +-
 src/components/questions/QuestionCard.jsx     | 156 ++--
 src/components/ui/BadgeUnlockModal.jsx        | 183 ++++
 src/contexts/AuthContext.jsx                  |  81 ++
 src/hooks/useAdmin.js                         | 237 +++++
 src/hooks/useAnswers.js                       |  18 +-
 src/hooks/useUpvote.js                        |  62 +-
 src/lib/duplicateDetector.js                  |  71 +-
 src/pages/AdminDashboard.jsx                  | 880 ++++++++++++++++--
 src/pages/AskQuestionPage.jsx                 | 106 +--
 src/pages/FaqPage.jsx                         | 201 ++--
 src/pages/LeaderboardPage.jsx                 | 329 +++++++
 src/pages/ProfilePage.jsx                     | 613 ++++++++----
 src/pages/QuestionDetailPage.jsx              | 197 ++--
 supabase/migration.sql                        | 847 +++++++++++++++++
 vercel.json                                   |   8 +
 24 files changed, 3519 insertions(+), 973 deletions(-)
 create mode 100644 src/components/ui/BadgeUnlockModal.jsx
 create mode 100644 src/pages/LeaderboardPage.jsx
 create mode 100644 supabase/migration.sql
 create mode 100644 vercel.json

diff --git a/README.md b/README.md
index 19ebe9c..f5215b9 100644
--- a/README.md
+++ b/README.md
@@ -513,8 +513,9 @@ npm install
 
 1. Create a new project on the [Supabase Dashboard](https://supabase.com/dashboard)
 2. Navigate to **SQL Editor** → **New Query** → **Blank Query**
-3. Copy the entire contents of [`supabase/schema.sql`](supabase/schema.sql) and paste into the editor
-4. Click **Run** — this creates all tables, triggers, RLS policies, indexes, and seed data
+3. Copy the entire contents of [`supabase/schema.sql`](supabase/schema.sql) and paste into the editor, then click **Run** to set up the core Q&A platform schema, triggers, RLS policies, indexes, and seed data.
+4. Open another new query tab, copy the entire contents of [`supabase/migration.sql`](supabase/migration.sql) and click **Run** to set up the Reputation, Badge, and Leaderboard triggers, RPC functions, and achievement definitions.
+5. In your Supabase Dashboard, go to **Database** → **Replication** → **Source** (select tables), and enable **Realtime** for `reputation_logs` and `user_badges` so points notifications and badge unlock popups trigger instantly in real-time.
 
 **3. Storage Configuration**
 
@@ -571,7 +572,7 @@ To activate the admin moderation dashboard:
 | 🚩 **Flag Review Queue** | Review and resolve community-flagged content |
 | 📝 **Admin Notes** | Attach feedback notes to reviewed answers |
 | 🔔 **Auto-Notifications** | Authors are notified of verification decisions in real-time |
-| 🏆 **Reputation Management** | View and manage user reputation and badge assignments |
+| 🏆 **Reputation & Badges** | Perform manual point adjustments (+/-), manually award or revoke badges for any member via an interactive management modal, and view live Leaderboard Analytics and recent reputation log feeds. |
 
 ---
 
diff --git a/package-lock.json b/package-lock.json
index bb03d26..94749b4 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,7 +9,6 @@
       "version": "0.0.0",
       "dependencies": {
         "@supabase/supabase-js": "^2.106.2",
-        "@vitalets/google-translate-api": "^9.2.1",
         "framer-motion": "^12.40.0",
         "fuse.js": "^7.3.0",
         "lucide-react": "^1.17.0",
@@ -63,6 +62,7 @@
       "integrity": "sha512-RgHBCvtjbOK2gXSNBNIkNoEc9qoVEtau3hj8gEqKQuL3HZAibKarWFEI3Lfm6EYKkLalOh8eSrj9b+ch9H/VBA==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@babel/code-frame": "^7.29.7",
         "@babel/generator": "^7.29.7",
@@ -272,33 +272,10 @@
         "node": ">=6.9.0"
       }
     },
-    "node_modules/@emnapi/core": {
-      "version": "1.11.0",
-      "resolved": "https://registry.npmjs.org/@emnapi/core/-/core-1.11.0.tgz",
-      "integrity": "sha512-l9Oo58x0HOP5znGzVhYW9U3e5wVuA4LAZU2AGezTmkhO1CgQRFDhDg4nneHsu/t3WniXg9QrG2nIXL/ZS8ln8Q==",
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "dependencies": {
-        "@emnapi/wasi-threads": "1.2.2",
-        "tslib": "^2.4.0"
-      }
-    },
-    "node_modules/@emnapi/runtime": {
-      "version": "1.11.0",
-      "resolved": "https://registry.npmjs.org/@emnapi/runtime/-/runtime-1.11.0.tgz",
-      "integrity": "sha512-55coeOFKHv1ywEcUXJtWU5f+Jr/W5tZDvZig8DLKSwUN1JpROQ4rk/SNOQiFWmaR/VKF4zuFyW1B8JduOSv6Pg==",
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "dependencies": {
-        "tslib": "^2.4.0"
-      }
-    },
     "node_modules/@emnapi/wasi-threads": {
-      "version": "1.2.2",
-      "resolved": "https://registry.npmjs.org/@emnapi/wasi-threads/-/wasi-threads-1.2.2.tgz",
-      "integrity": "sha512-c95qOXkHdydNKhscBTebqEC1CVAZpyqOfVfBzQ1qgzyl3gfeldUjIggDbIZgDKsHLgnsM+igH7TJ/eAasaVuMA==",
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@emnapi/wasi-threads/-/wasi-threads-1.2.1.tgz",
+      "integrity": "sha512-uTII7OYF+/Mes/MrcIOYp5yOtSMLBWSIoLPpcgwipoiKbli6k322tcoFsxoIIxPDqW01SQGAgko4EzZi2BNv2w==",
       "dev": true,
       "license": "MIT",
       "optional": true,
@@ -802,40 +779,6 @@
         "node": "^20.19.0 || >=22.12.0"
       }
     },
-    "node_modules/@rolldown/binding-wasm32-wasi/node_modules/@emnapi/core": {
-      "version": "1.10.0",
-      "resolved": "https://registry.npmjs.org/@emnapi/core/-/core-1.10.0.tgz",
-      "integrity": "sha512-yq6OkJ4p82CAfPl0u9mQebQHKPJkY7WrIuk205cTYnYe+k2Z8YBh11FrbRG/H6ihirqcacOgl2BIO8oyMQLeXw==",
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "dependencies": {
-        "@emnapi/wasi-threads": "1.2.1",
-        "tslib": "^2.4.0"
-      }
-    },
-    "node_modules/@rolldown/binding-wasm32-wasi/node_modules/@emnapi/runtime": {
-      "version": "1.10.0",
-      "resolved": "https://registry.npmjs.org/@emnapi/runtime/-/runtime-1.10.0.tgz",
-      "integrity": "sha512-ewvYlk86xUoGI0zQRNq/mC+16R1QeDlKQy21Ki3oSYXNgLb45GV1P6A0M+/s6nyCuNDqe5VpaY84BzXGwVbwFA==",
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "dependencies": {
-        "tslib": "^2.4.0"
-      }
-    },
-    "node_modules/@rolldown/binding-wasm32-wasi/node_modules/@emnapi/wasi-threads": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/@emnapi/wasi-threads/-/wasi-threads-1.2.1.tgz",
-      "integrity": "sha512-uTII7OYF+/Mes/MrcIOYp5yOtSMLBWSIoLPpcgwipoiKbli6k322tcoFsxoIIxPDqW01SQGAgko4EzZi2BNv2w==",
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "dependencies": {
-        "tslib": "^2.4.0"
-      }
-    },
     "node_modules/@rolldown/binding-win32-arm64-msvc": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/@rolldown/binding-win32-arm64-msvc/-/binding-win32-arm64-msvc-1.0.2.tgz",
@@ -1258,12 +1201,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/@types/http-errors": {
-      "version": "1.8.2",
-      "resolved": "https://registry.npmjs.org/@types/http-errors/-/http-errors-1.8.2.tgz",
-      "integrity": "sha512-EqX+YQxINb+MeXaIqYDASb6U6FCHbWjkj4a1CKDBks3d/QiB2+PqBLyO72vLDgAO1wUI4O+9gweRcQK11bTL/w==",
-      "license": "MIT"
-    },
     "node_modules/@types/json-schema": {
       "version": "7.0.15",
       "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz",
@@ -1277,6 +1214,7 @@
       "integrity": "sha512-eRwcGNHve+E8qtEQSSRl6urh+rFop4v8gm6O8rGv25CodbvFdLjA1vVQ1KkiFE0w0UPOnb8tDiFKL5lp0rtY5Q==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "csstype": "^3.2.2"
       }
@@ -1291,20 +1229,6 @@
         "@types/react": "^19.2.0"
       }
     },
-    "node_modules/@vitalets/google-translate-api": {
-      "version": "9.2.1",
-      "resolved": "https://registry.npmjs.org/@vitalets/google-translate-api/-/google-translate-api-9.2.1.tgz",
-      "integrity": "sha512-zlwQWSjXUZhbZQ6qwtIQ7GdYXFQmJ4wYqzcrYJUxtvzQQwUP+uKUb/SRJaBOQuBntjBjzcdcJoLFrpCKUbIkOg==",
-      "license": "MIT",
-      "dependencies": {
-        "@types/http-errors": "^1.8.2",
-        "http-errors": "^2.0.0",
-        "node-fetch": "^2.6.7"
-      },
-      "engines": {
-        "node": ">=14"
-      }
-    },
     "node_modules/@vitejs/plugin-react": {
       "version": "6.0.2",
       "resolved": "https://registry.npmjs.org/@vitejs/plugin-react/-/plugin-react-6.0.2.tgz",
@@ -1337,6 +1261,7 @@
       "integrity": "sha512-UVJyE9MttOsBQIDKw1skb9nAwQuR5wuGD3+82K6JgJlm/Y+KI92oNsMNGZCYdDsVtRHSak0pcV5Dno5+4jh9sw==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -1427,6 +1352,7 @@
         }
       ],
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "baseline-browser-mapping": "^2.10.12",
         "caniuse-lite": "^1.0.30001782",
@@ -1529,15 +1455,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/depd": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz",
-      "integrity": "sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw==",
-      "license": "MIT",
-      "engines": {
-        "node": ">= 0.8"
-      }
-    },
     "node_modules/detect-libc": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.1.2.tgz",
@@ -1598,6 +1515,7 @@
       "integrity": "sha512-AyIKhnOBuOAdueD7RB3xB+YeAWScb9jHsJBgH2Hcde8InP5JYhqrRR6iTMHyTEwgENK54Cp44e4v8BwNhsuHuw==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.8.0",
         "@eslint-community/regexpp": "^4.12.2",
@@ -1979,26 +1897,6 @@
         "hermes-estree": "0.25.1"
       }
     },
-    "node_modules/http-errors": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-2.0.1.tgz",
-      "integrity": "sha512-4FbRdAX+bSdmo4AUFuS0WNiPz8NgFt+r8ThgNWmlrjQjt1Q7ZR9+zTlce2859x4KSXrwIsaeTqDoKQmtP8pLmQ==",
-      "license": "MIT",
-      "dependencies": {
-        "depd": "~2.0.0",
-        "inherits": "~2.0.4",
-        "setprototypeof": "~1.2.0",
-        "statuses": "~2.0.2",
-        "toidentifier": "~1.0.1"
-      },
-      "engines": {
-        "node": ">= 0.8"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/express"
-      }
-    },
     "node_modules/iceberg-js": {
       "version": "0.8.1",
       "resolved": "https://registry.npmjs.org/iceberg-js/-/iceberg-js-0.8.1.tgz",
@@ -2028,12 +1926,6 @@
         "node": ">=0.8.19"
       }
     },
-    "node_modules/inherits": {
-      "version": "2.0.4",
-      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
-      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
-      "license": "ISC"
-    },
     "node_modules/is-extglob": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
@@ -2070,6 +1962,7 @@
       "integrity": "sha512-AC/7JofJvZGrrneWNaEnJeOLUx+JlGt7tNa0wZiRPT4MY1wmfKjt2+6O2p2uz2+skll8OZZmJMNqeke7kKbNgQ==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "bin": {
         "jiti": "lib/jiti-cli.mjs"
       }
@@ -2522,26 +2415,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/node-fetch": {
-      "version": "2.7.0",
-      "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.7.0.tgz",
-      "integrity": "sha512-c4FRfUm/dbcWZ7U+1Wq0AwCyFL+3nt2bEw05wfxSz+DWpWsitgmSgYmy2dQdWyKC1694ELPqMs/YzUSNozLt8A==",
-      "license": "MIT",
-      "dependencies": {
-        "whatwg-url": "^5.0.0"
-      },
-      "engines": {
-        "node": "4.x || >=6.0.0"
-      },
-      "peerDependencies": {
-        "encoding": "^0.1.0"
-      },
-      "peerDependenciesMeta": {
-        "encoding": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/node-releases": {
       "version": "2.0.46",
       "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.46.tgz",
@@ -2635,6 +2508,7 @@
       "integrity": "sha512-QP88BAKvMam/3NxH6vj2o21R6MjxZUAd6nlwAS/pnGvN9IVLocLHxGYIzFhg6fUQ+5th6P4dv4eW9jX3DSIj7A==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -2696,6 +2570,7 @@
       "resolved": "https://registry.npmjs.org/react/-/react-19.2.6.tgz",
       "integrity": "sha512-sfWGGfavi0xr8Pg0sVsyHMAOziVYKgPLNrS7ig+ivMNb3wbCBw3KxtflsGBAwD3gYQlE/AEZsTLgToRrSCjb0Q==",
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -2705,6 +2580,7 @@
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.6.tgz",
       "integrity": "sha512-0prMI+hvBbPjsWnxDLxlCGyM8PN6UuWjEUCYmZhO67xIV9Xasa/r/vDnq+Xyq4Lo27g8QSbO5YzARu0D1Sps3g==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "scheduler": "^0.27.0"
       },
@@ -2822,12 +2698,6 @@
       "integrity": "sha512-oeM1lpU/UvhTxw+g3cIfxXHyJRc/uidd3yK1P242gzHds0udQBYzs3y8j4gCCW+ZJ7ad0yctld8RYO+bdurlvw==",
       "license": "MIT"
     },
-    "node_modules/setprototypeof": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz",
-      "integrity": "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==",
-      "license": "ISC"
-    },
     "node_modules/shebang-command": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
@@ -2861,15 +2731,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/statuses": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/statuses/-/statuses-2.0.2.tgz",
-      "integrity": "sha512-DvEy55V3DB7uknRo+4iOGT5fP1slR8wQohVdknigZPMpMstaKJQWhwiYBACJE3Ul2pTnATihhBYnRhZQHGBiRw==",
-      "license": "MIT",
-      "engines": {
-        "node": ">= 0.8"
-      }
-    },
     "node_modules/tailwindcss": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.3.0.tgz",
@@ -2908,21 +2769,6 @@
         "url": "https://github.com/sponsors/SuperchupuDev"
       }
     },
-    "node_modules/toidentifier": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.1.tgz",
-      "integrity": "sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=0.6"
-      }
-    },
-    "node_modules/tr46": {
-      "version": "0.0.3",
-      "resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz",
-      "integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==",
-      "license": "MIT"
-    },
     "node_modules/tslib": {
       "version": "2.8.1",
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
@@ -2989,6 +2835,7 @@
       "integrity": "sha512-s4BJJ+5y1pYL6Otw51FHhVJQhPnuRinKig64g/1+EUNaJsd3gCKdD31IPFvswUgW9/60QT9oFHbZHbQK5imcxw==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "lightningcss": "^1.32.0",
         "picomatch": "^4.0.4",
@@ -3061,22 +2908,6 @@
         }
       }
     },
-    "node_modules/webidl-conversions": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz",
-      "integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==",
-      "license": "BSD-2-Clause"
-    },
-    "node_modules/whatwg-url": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-5.0.0.tgz",
-      "integrity": "sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==",
-      "license": "MIT",
-      "dependencies": {
-        "tr46": "~0.0.3",
-        "webidl-conversions": "^3.0.0"
-      }
-    },
     "node_modules/which": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
@@ -3129,6 +2960,7 @@
       "integrity": "sha512-ytENFjIJFl2UwYglde2jchW2Hwm4GJFLDiSXWdTrJQBIN9Fcyp7n4DhxJEiWNAJMV1/BqWfW/kkg71UDcHJyTQ==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "funding": {
         "url": "https://github.com/sponsors/colinhacks"
       }
diff --git a/package.json b/package.json
index 473df98..a1c598a 100644
--- a/package.json
+++ b/package.json
@@ -11,7 +11,6 @@
   },
   "dependencies": {
     "@supabase/supabase-js": "^2.106.2",
-    "@vitalets/google-translate-api": "^9.2.1",
     "framer-motion": "^12.40.0",
     "fuse.js": "^7.3.0",
     "lucide-react": "^1.17.0",
diff --git a/src/App.jsx b/src/App.jsx
index 34506c0..ccff891 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,6 +1,8 @@
 import { Routes, Route, useLocation, Navigate } from 'react-router-dom'
 import { AnimatePresence } from 'framer-motion'
 import { useAuth } from './hooks/useAuth'
+import { useToast } from './components/ui/Toast'
+import { useEffect } from 'react'
 
 import Layout from './components/layout/Layout'
 import ProtectedRoute from './components/auth/ProtectedRoute'
@@ -14,8 +16,10 @@ import LoginPage from './pages/LoginPage'
 import SignupPage from './pages/SignupPage'
 import ForgotPasswordPage from './pages/ForgotPasswordPage'
 import ProfilePage from './pages/ProfilePage'
+import LeaderboardPage from './pages/LeaderboardPage'
 import AdminDashboard from './pages/AdminDashboard'
 import NotFoundPage from './pages/NotFoundPage'
+import BadgeUnlockModal from './components/ui/BadgeUnlockModal'
 
 function GuestRoute({ children }) {
   const { user, loading } = useAuth()
@@ -26,9 +30,38 @@ function GuestRoute({ children }) {
 
 export default function App() {
   const location = useLocation()
+  const { showToast } = useToast()
+
+  useEffect(() => {
+    const handleReputationChange = (e) => {
+      const { points, action } = e.detail
+      const sign = points >= 0 ? '+' : ''
+      
+      const formatAction = (act) => {
+        switch (act) {
+          case 'ask_question': return 'Asked a Question'
+          case 'post_answer': return 'Posted an Answer'
+          case 'question_upvote': return 'Question Upvoted'
+          case 'question_downvote': return 'Question Downvoted'
+          case 'answer_upvote': return 'Answer Upvoted'
+          case 'answer_downvote': return 'Answer Downvoted'
+          case 'answer_accepted': return 'Answer Accepted'
+          case 'daily_login': return 'Daily Login Bonus'
+          case 'admin_adjustment': return 'Admin Adjustment'
+          default: return act.replace('_', ' ')
+        }
+      }
+      
+      showToast(`Reputation: ${sign}${points} points (${formatAction(action)})`, points >= 0 ? 'success' : 'warning')
+    }
+
+    window.addEventListener('reputation-change', handleReputationChange)
+    return () => window.removeEventListener('reputation-change', handleReputationChange)
+  }, [showToast])
 
   return (
     <Layout>
+      <BadgeUnlockModal />
       <AnimatePresence mode="wait">
         <Routes location={location} key={location.pathname}>
           <Route path="/" element={<HomePage />} />
@@ -36,6 +69,7 @@ export default function App() {
           <Route path="/search" element={<SearchPage />} />
           <Route path="/faq" element={<FaqPage />} />
           <Route path="/faq/:id" element={<FaqPage />} />
+          <Route path="/leaderboard" element={<LeaderboardPage />} />
 
           <Route path="/ask" element={
             <ProtectedRoute>
diff --git a/src/components/answers/AnswerCard.jsx b/src/components/answers/AnswerCard.jsx
index 35b9f6f..b7ba025 100644
--- a/src/components/answers/AnswerCard.jsx
+++ b/src/components/answers/AnswerCard.jsx
@@ -1,15 +1,13 @@
 import { useState, useEffect } from 'react'
 import { motion, AnimatePresence } from 'framer-motion'
-import { ChevronUp, Clock, CheckCircle, XCircle, AlertTriangle, Shield, Trash2, Flag, MessageSquare, Sparkles } from 'lucide-react'
+import { ChevronUp, ChevronDown, Clock, CheckCircle, XCircle, AlertTriangle, Shield, Trash2, Flag, MessageSquare, Sparkles, Check } from 'lucide-react'
 import Badge from '@/components/ui/Badge'
 import Avatar from '@/components/ui/Avatar'
 import Button from '@/components/ui/Button'
 import FilePreview from '@/components/ui/FilePreview'
 import { useUpvote } from '@/hooks/useUpvote'
 import { useAuth } from '@/hooks/useAuth'
-import { useTranslation } from '@/hooks/useTranslation'
-import TranslationButton from '@/components/translation/TranslationButton'
-import TranslationBadge from '@/components/translation/TranslationBadge'
+import { useToast } from '@/components/ui/Toast'
 
 function timeAgo(dateString) {
   const now = new Date()
@@ -98,35 +96,76 @@ const statusConfig = {
   spam: { icon: AlertTriangle, variant: 'danger', label: 'Spam' },
 }
 
-export default function AnswerCard({ answer, isOwner, isAdmin, onVerify, onReject, onDelete, onSpam, onFlag }) {
-  const { toggleAnswerUpvote, hasUpvotedAnswer } = useUpvote()
+
+export default function AnswerCard({ answer, isOwner, isAdmin, isQuestionOwner, onVerify, onReject, onDelete, onSpam, onFlag, onAccept }) {
+  const { toggleAnswerVote, hasUpvotedAnswer, hasDownvotedAnswer } = useUpvote()
   const { user } = useAuth()
+  const { showToast } = useToast()
+  
   const [upvoted, setUpvoted] = useState(false)
-  const [localUpvotes, setLocalUpvotes] = useState(answer.upvotes || 0)
+  const [downvoted, setDownvoted] = useState(false)
+  const [localScore, setLocalScore] = useState((answer.upvotes || 0) - (answer.downvotes || 0))
   const [showAiSummary, setShowAiSummary] = useState(false)
 
-  const preferredLanguage = user?.preferred_language || 'en'
-  const answerTranslation = useTranslation({
-    contentId: `answer-${answer.id}`,
-    content: answer.content,
-    autoTargetLanguage: preferredLanguage,
-    autoTranslate: Boolean(user?.preferred_language),
-  })
+  useEffect(() => {
+    setLocalScore((answer.upvotes || 0) - (answer.downvotes || 0))
+  }, [answer.upvotes, answer.downvotes])
 
   useEffect(() => {
     if (user) {
       hasUpvotedAnswer(answer.id).then(setUpvoted)
+      hasDownvotedAnswer(answer.id).then(setDownvoted)
+    } else {
+      setUpvoted(false)
+      setDownvoted(false)
     }
-  }, [answer.id, user, hasUpvotedAnswer])
+  }, [answer.id, user, hasUpvotedAnswer, hasDownvotedAnswer])
 
   const handleUpvote = async () => {
-    if (!user) return
+    if (!user) {
+      showToast('Please sign in to vote', 'info')
+      return
+    }
+    try {
+      await toggleAnswerVote(answer.id, true)
+      if (upvoted) {
+        setUpvoted(false)
+        setLocalScore(prev => prev - 1)
+      } else {
+        setUpvoted(true)
+        if (downvoted) {
+          setDownvoted(false)
+          setLocalScore(prev => prev + 2)
+        } else {
+          setLocalScore(prev => prev + 1)
+        }
+      }
+    } catch (err) {
+      showToast(err.message || 'Failed to upvote', 'error')
+    }
+  }
+
+  const handleDownvote = async () => {
+    if (!user) {
+      showToast('Please sign in to vote', 'info')
+      return
+    }
     try {
-      await toggleAnswerUpvote(answer.id)
-      setUpvoted(!upvoted)
-      setLocalUpvotes(prev => upvoted ? prev - 1 : prev + 1)
+      await toggleAnswerVote(answer.id, false)
+      if (downvoted) {
+        setDownvoted(false)
+        setLocalScore(prev => prev + 1)
+      } else {
+        setDownvoted(true)
+        if (upvoted) {
+          setUpvoted(false)
+          setLocalScore(prev => prev - 2)
+        } else {
+          setLocalScore(prev => prev - 1)
+        }
+      }
     } catch (err) {
-      console.error('Upvote error:', err)
+      showToast(err.message || 'Failed to downvote', 'error')
     }
   }
 
@@ -137,46 +176,65 @@ export default function AnswerCard({ answer, isOwner, isAdmin, onVerify, onRejec
     <motion.div
       initial={{ opacity: 0, y: 10 }}
       animate={{ opacity: 1, y: 0 }}
-      className="flex gap-4 p-5 bg-white/80 dark:bg-slate-800/80 backdrop-blur-sm rounded-2xl border border-slate-200/50 dark:border-slate-700/50 shadow-sm"
+      className={`flex gap-4 p-5 bg-white/80 dark:bg-slate-800/80 backdrop-blur-sm rounded-2xl border transition-all duration-300 shadow-sm ${
+        answer.is_accepted 
+          ? 'border-emerald-500/40 bg-emerald-500/[0.01] dark:bg-emerald-500/[0.005] shadow-emerald-500/5 dark:shadow-[0_0_20px_rgba(16,185,129,0.06)]' 
+          : 'border-slate-200/50 dark:border-slate-700/50'
+      }`}
     >
-      {/* Upvote section */}
-      <div className="flex flex-col items-center gap-1 pt-1">
+      {/* Upvote/Downvote & Acceptance Column */}
+      <div className="flex flex-col items-center gap-0.5 shrink-0 pt-1">
         <button
           onClick={handleUpvote}
           disabled={!user}
-          className={`p-1.5 rounded-lg transition-all duration-200 ${
+          className={`p-1.5 rounded-lg transition-all duration-200 cursor-pointer ${
             upvoted
-              ? 'text-indigo-600 bg-indigo-50 dark:bg-indigo-900/30'
+              ? 'text-indigo-650 dark:text-indigo-405 bg-indigo-500/10'
               : 'text-slate-400 hover:text-indigo-600 hover:bg-slate-100 dark:hover:bg-slate-700'
           } ${!user ? 'cursor-not-allowed opacity-50' : ''}`}
         >
           <ChevronUp className="w-5 h-5" />
         </button>
-        <span className={`text-sm font-semibold ${upvoted ? 'text-indigo-600' : 'text-slate-500 dark:text-slate-400'}`}>
-          {localUpvotes}
+        
+        <span className={`text-xs font-bold transition-colors ${upvoted ? 'text-indigo-600' : downvoted ? 'text-rose-500' : 'text-slate-600 dark:text-slate-400'}`}>
+          {localScore}
         </span>
-      </div>
 
-      {/* Content */}
-      <div className="flex-1 min-w-0">
-        <div className="mb-3 flex items-start justify-between gap-3">
-          <TranslationBadge
-            originalLanguage={answerTranslation.originalLanguage}
-            targetLanguage={answerTranslation.currentLanguage}
-          />
-          <TranslationButton
-            originalLanguage={answerTranslation.originalLanguage}
-            currentLanguage={answerTranslation.currentLanguage}
-            isTranslated={answerTranslation.isTranslated}
-            status={answerTranslation.status}
-            error={answerTranslation.error}
-            onTranslate={answerTranslation.translate}
-            onReset={answerTranslation.resetTranslation}
-          />
-        </div>
+        <button
+          onClick={handleDownvote}
+          disabled={!user}
+          className={`p-1.5 rounded-lg transition-all duration-200 cursor-pointer ${
+            downvoted
+              ? 'text-rose-500 bg-rose-500/10'
+              : 'text-slate-400 hover:text-rose-500 hover:bg-slate-100 dark:hover:bg-slate-700'
+          } ${!user ? 'cursor-not-allowed opacity-50' : ''}`}
+        >
+          <ChevronDown className="w-5 h-5" />
+        </button>
 
+        {/* Accepted solution checkmark */}
+        {(isQuestionOwner || answer.is_accepted) && (
+          <button
+            onClick={() => isQuestionOwner && onAccept?.(answer.id)}
+            disabled={!isQuestionOwner}
+            className={`mt-4 p-1.5 rounded-xl transition-all duration-300 border ${
+              answer.is_accepted
+                ? 'text-emerald-500 bg-emerald-500/10 border-emerald-500/25 shadow-[0_0_15px_rgba(16,185,129,0.15)] cursor-pointer'
+                : 'text-slate-400 dark:text-slate-500 hover:text-emerald-500 dark:hover:text-emerald-400 hover:bg-emerald-500/5 border-transparent cursor-pointer'
+            } ${!isQuestionOwner ? 'cursor-default pointer-events-none opacity-100' : ''}`}
+            title={
+              answer.is_accepted
+                ? (isQuestionOwner ? 'Click to unaccept answer' : 'Accepted Answer')
+                : 'Click to accept this answer'
+            }
+          >
+            <CheckCircle className="w-5 h-5 stroke-[2.5]" />
+          </button>
+        )}
+      </div>
+      <div className="flex-1 min-w-0">
         <div className="prose prose-sm dark:prose-invert max-w-none text-slate-800 dark:text-slate-300 leading-relaxed">
-          <p className="whitespace-pre-wrap">{answerTranslation.displayText}</p>
+          <p className="whitespace-pre-wrap">{answer.content}</p>
         </div>
 
         {answer.content && answer.content.length > 350 && (
diff --git a/src/components/answers/AnswerList.jsx b/src/components/answers/AnswerList.jsx
index 2524db8..b4dc9bc 100644
--- a/src/components/answers/AnswerList.jsx
+++ b/src/components/answers/AnswerList.jsx
@@ -5,7 +5,7 @@ import AnswerCard from './AnswerCard'
 import { AnswerSkeleton } from '@/components/ui/Skeleton'
 import EmptyState from '@/components/ui/EmptyState'
 
-export default function AnswerList({ answers, loading, isAdmin, userId, onVerify, onReject, onDelete, onSpam }) {
+export default function AnswerList({ answers, loading, isAdmin, userId, isQuestionOwner, onVerify, onReject, onDelete, onSpam, onAccept }) {
   const [sortBy, setSortBy] = useState('newest')
 
   if (loading) {
@@ -19,9 +19,17 @@ export default function AnswerList({ answers, loading, isAdmin, userId, onVerify
   }
 
   const sorted = [...(answers || [])].sort((a, b) => {
+    // Accepted answer always floats to the top
+    if (a.is_accepted && !b.is_accepted) return -1
+    if (!a.is_accepted && b.is_accepted) return 1
+
     if (sortBy === 'newest') return new Date(b.created_at) - new Date(a.created_at)
     if (sortBy === 'oldest') return new Date(a.created_at) - new Date(b.created_at)
-    if (sortBy === 'upvoted') return (b.upvotes || 0) - (a.upvotes || 0)
+    if (sortBy === 'upvoted') {
+      const scoreA = (a.upvotes || 0) - (a.downvotes || 0)
+      const scoreB = (b.upvotes || 0) - (b.downvotes || 0)
+      return scoreB - scoreA
+    }
     return 0
   })
 
@@ -82,10 +90,12 @@ export default function AnswerList({ answers, loading, isAdmin, userId, onVerify
                 answer={answer}
                 isOwner={userId === answer.user_id}
                 isAdmin={isAdmin}
+                isQuestionOwner={isQuestionOwner}
                 onVerify={onVerify}
                 onReject={onReject}
                 onDelete={onDelete}
                 onSpam={onSpam}
+                onAccept={onAccept}
               />
             </motion.div>
           ))}
diff --git a/src/components/layout/Layout.jsx b/src/components/layout/Layout.jsx
index b80b9c8..d26dc07 100644
--- a/src/components/layout/Layout.jsx
+++ b/src/components/layout/Layout.jsx
@@ -2,7 +2,6 @@ import { motion } from 'framer-motion';
 import Navbar from '@/components/layout/Navbar';
 import Footer from '@/components/layout/Footer';
 import Sidebar from '@/components/layout/Sidebar';
-import BackToTop from '@/components/ui/BackToTop';
 
 // Premium background particle configuration
 const particles = Array.from({ length: 12 }, (_, i) => ({
@@ -87,8 +86,6 @@ export default function Layout({ children, showSidebar = false }) {
       </main>
 
       <Footer />
-      <BackToTop />
     </div>
   );
 }
-
diff --git a/src/components/layout/Navbar.jsx b/src/components/layout/Navbar.jsx
index 8216e49..1d4b99b 100644
--- a/src/components/layout/Navbar.jsx
+++ b/src/components/layout/Navbar.jsx
@@ -13,6 +13,7 @@ import {
   User,
   LogOut,
   LayoutDashboard,
+  Trophy,
 } from 'lucide-react'
 import { useAuth } from '@/hooks/useAuth'
 import ThemeToggle from '@/components/ui/ThemeToggle'
@@ -49,16 +50,26 @@ export default function Navbar() {
       <nav className="fixed top-0 left-0 right-0 z-50 border-b border-zinc-200/50 dark:border-zinc-800/50 bg-white/70 dark:bg-zinc-950/70 backdrop-blur-xl shadow-sm shadow-zinc-100/20 dark:shadow-black/20">
         <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
           <div className="flex items-center justify-between h-16">
-            {/* Left — Logo */}
-            <Link to="/" className="flex items-center gap-2.5 shrink-0 group">
-              <div className="relative">
-                <MessageCircle className="w-6 h-6 text-zinc-900 dark:text-zinc-50 group-hover:scale-105 transition-transform" />
-                <Sparkles className="w-3 h-3 text-indigo-500 absolute -top-1.5 -right-1.5" />
-              </div>
-              <span className="text-lg font-bold tracking-tight text-zinc-900 dark:text-zinc-50">
-                AnswerHub
-              </span>
-            </Link>
+            {/* Left — Logo & Navigation links */}
+            <div className="flex items-center gap-6 shrink-0">
+              <Link to="/" className="flex items-center gap-2.5 group">
+                <div className="relative">
+                  <MessageCircle className="w-6 h-6 text-zinc-900 dark:text-zinc-50 group-hover:scale-105 transition-transform" />
+                  <Sparkles className="w-3 h-3 text-indigo-500 absolute -top-1.5 -right-1.5" />
+                </div>
+                <span className="text-lg font-bold tracking-tight text-zinc-900 dark:text-zinc-50">
+                  AnswerHub
+                </span>
+              </Link>
+              
+              <Link
+                to="/leaderboard"
+                className="hidden md:flex items-center gap-1.5 px-3 py-1.5 text-xs font-bold text-slate-600 dark:text-zinc-400 hover:text-indigo-600 dark:hover:text-indigo-400 hover:bg-slate-100 dark:hover:bg-slate-800/50 rounded-xl transition-all duration-300"
+              >
+                <Trophy className="w-4 h-4 text-amber-500" />
+                Leaderboard
+              </Link>
+            </div>
 
             {/* Center — Search (hidden on mobile) */}
             <div className="hidden md:flex flex-1 max-w-md mx-6">
@@ -114,6 +125,15 @@ export default function Navbar() {
                           >
                             <User className="w-4 h-4" /> My Profile
                           </Link>
+                          
+                          <Link
+                            to="/leaderboard"
+                            onClick={() => setProfileOpen(false)}
+                            className="flex items-center gap-3 px-4 py-2.5 text-sm text-slate-700 dark:text-slate-300 hover:bg-slate-50 dark:hover:bg-zinc-900/55 transition-colors"
+                          >
+                            <Trophy className="w-4 h-4 text-amber-500" /> Leaderboard
+                          </Link>
+
                           {isAdmin && (
                             <Link
                               to="/admin"
@@ -212,6 +232,9 @@ export default function Navbar() {
                       <Link to="/profile" onClick={() => setMobileOpen(false)} className="flex items-center gap-3 px-4 py-2.5 text-sm text-slate-600 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-zinc-900 rounded-xl">
                         <User className="w-4 h-4" /> My Profile
                       </Link>
+                      <Link to="/leaderboard" onClick={() => setMobileOpen(false)} className="flex items-center gap-3 px-4 py-2.5 text-sm text-slate-600 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-zinc-900 rounded-xl">
+                        <Trophy className="w-4 h-4 text-amber-500" /> Leaderboard
+                      </Link>
                       {isAdmin && (
                         <Link to="/admin" onClick={() => setMobileOpen(false)} className="flex items-center gap-3 px-4 py-2.5 text-sm text-slate-600 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-zinc-900 rounded-xl">
                           <LayoutDashboard className="w-4 h-4" /> Admin Dashboard
@@ -224,6 +247,9 @@ export default function Navbar() {
                   </>
                 ) : (
                   <div className="space-y-2">
+                    <Link to="/leaderboard" onClick={() => setMobileOpen(false)} className="flex items-center justify-center gap-2 w-full px-4 py-2.5 text-sm font-medium text-slate-700 dark:text-slate-300 border border-slate-300 dark:border-slate-600 rounded-xl hover:bg-slate-50 dark:hover:bg-slate-800 transition-colors">
+                      <Trophy className="w-4 h-4 text-amber-500" /> Leaderboard
+                    </Link>
                     <Link to="/login" onClick={() => setMobileOpen(false)} className="flex items-center justify-center gap-2 w-full px-4 py-2.5 text-sm font-medium text-slate-700 dark:text-slate-300 border border-slate-300 dark:border-slate-600 rounded-xl hover:bg-slate-50 dark:hover:bg-slate-800 transition-colors">
                       <LogIn className="w-4 h-4" /> Log In
                     </Link>
diff --git a/src/components/questions/DuplicateWarning.jsx b/src/components/questions/DuplicateWarning.jsx
index 4798d13..b9eef8f 100644
--- a/src/components/questions/DuplicateWarning.jsx
+++ b/src/components/questions/DuplicateWarning.jsx
@@ -4,29 +4,16 @@ import Modal from '@/components/ui/Modal'
 import Button from '@/components/ui/Button'
 import { Link } from 'react-router-dom'
 
-export default function DuplicateWarning({
-  isOpen,
-  onClose,
-  duplicates = [],
-  onContinue,
-}) {
+export default function DuplicateWarning({ isOpen, onClose, duplicates = [], onContinue }) {
   return (
-    <Modal
-      isOpen={isOpen}
-      onClose={onClose}
-      title="Similar Questions Found"
-      size="lg"
-    >
+    <Modal isOpen={isOpen} onClose={onClose} title="Similar Questions Found" size="lg">
       <div className="space-y-4">
-
         <div className="flex items-start gap-3 p-4 bg-amber-50 dark:bg-amber-900/20 rounded-xl border border-amber-200 dark:border-amber-800">
           <AlertTriangle className="w-5 h-5 text-amber-500 mt-0.5 shrink-0" />
-
           <div>
             <p className="text-sm font-medium text-amber-800 dark:text-amber-300">
               We found questions similar to yours
             </p>
-
             <p className="text-sm text-amber-600 dark:text-amber-400 mt-1">
               Check if your question has already been asked before posting a new one.
             </p>
@@ -34,9 +21,7 @@ export default function DuplicateWarning({
         </div>
 
         <div className="space-y-3 max-h-64 overflow-y-auto">
-
           {duplicates.map((dup, index) => (
-
             <motion.div
               key={dup.item?.id || index}
               initial={{ opacity: 0, x: -10 }}
@@ -45,7 +30,6 @@ export default function DuplicateWarning({
               className="flex items-start gap-3 p-3 bg-slate-50 dark:bg-slate-800 rounded-xl border border-slate-200 dark:border-slate-700 hover:border-indigo-300 dark:hover:border-indigo-600 transition-colors"
             >
               <div className="flex-1 min-w-0">
-
                 <Link
                   to={`/question/${dup.item?.id}`}
                   className="text-sm font-medium text-slate-700 dark:text-slate-300 hover:text-indigo-600 dark:hover:text-indigo-400 line-clamp-2"
@@ -53,27 +37,16 @@ export default function DuplicateWarning({
                 >
                   {dup.item?.title}
                 </Link>
-
                 <div className="flex items-center gap-3 mt-1.5">
-
                   <span className="text-xs text-slate-400 flex items-center gap-1">
                     <MessageCircle className="w-3 h-3" />
                     {dup.item?.answer_count || 0} answers
                   </span>
-
-                  <span className="text-xs font-medium text-emerald-500">
-                    {Math.round(
-                      (
-                        dup.finalScore ??
-                        (1 - (dup.score || 0))
-                      ) * 100
-                    )}
-                    % semantic match
+                  <span className="text-xs font-medium text-indigo-500">
+                    {Math.round((1 - (dup.score || 0)) * 100)}% similar
                   </span>
-
                 </div>
               </div>
-
               <Link
                 to={`/question/${dup.item?.id}`}
                 onClick={onClose}
@@ -81,31 +54,18 @@ export default function DuplicateWarning({
               >
                 <ExternalLink className="w-4 h-4 text-slate-400" />
               </Link>
-
             </motion.div>
-
           ))}
-
         </div>
 
         <div className="flex justify-end gap-3 pt-2 border-t border-slate-200 dark:border-slate-700">
-
-          <Button
-            variant="ghost"
-            onClick={onClose}
-          >
+          <Button variant="ghost" onClick={onClose}>
             Cancel
           </Button>
-
-          <Button
-            variant="primary"
-            onClick={onContinue}
-          >
+          <Button variant="primary" onClick={onContinue}>
             Ask Anyway
           </Button>
-
         </div>
-
       </div>
     </Modal>
   )
diff --git a/src/components/questions/QuestionCard.jsx b/src/components/questions/QuestionCard.jsx
index 4074186..3def275 100644
--- a/src/components/questions/QuestionCard.jsx
+++ b/src/components/questions/QuestionCard.jsx
@@ -3,18 +3,17 @@ import { Link } from 'react-router-dom';
 import { motion } from 'framer-motion';
 import {
   ChevronUp,
+  ChevronDown,
   MessageCircle,
   Eye,
   Clock,
   Paperclip,
   CheckCircle2,
 } from 'lucide-react';
+
 import { useAuth } from '@/hooks/useAuth';
 import { useToast } from '@/components/ui/Toast';
 import { useUpvote } from '@/hooks/useUpvote';
-import { useTranslation } from '@/hooks/useTranslation';
-import TranslationButton from '@/components/translation/TranslationButton';
-import TranslationBadge from '@/components/translation/TranslationBadge';
 
 function formatTimeAgo(dateStr) {
   if (!dateStr) return '';
@@ -51,36 +50,25 @@ export default function QuestionCard({ question, index = 0 }) {
 
   const { user } = useAuth();
   const { showToast } = useToast();
-  const { toggleQuestionUpvote, hasUpvotedQuestion } = useUpvote();
-
-  const preferredLanguage = user?.preferred_language || 'en';
-  const titleTranslation = useTranslation({
-    contentId: `question-title-${id}`,
-    content: title,
-    autoTargetLanguage: preferredLanguage,
-    autoTranslate: Boolean(user?.preferred_language),
-  });
-  const descriptionTranslation = useTranslation({
-    contentId: `question-description-${id}`,
-    content: description,
-    autoTargetLanguage: preferredLanguage,
-    autoTranslate: Boolean(user?.preferred_language),
-  });
+  const { toggleQuestionVote, hasUpvotedQuestion, hasDownvotedQuestion } = useUpvote();
 
   const [upvoted, setUpvoted] = useState(false);
-  const [localUpvotes, setLocalUpvotes] = useState(upvotes || 0);
+  const [downvoted, setDownvoted] = useState(false);
+  const [localScore, setLocalScore] = useState((upvotes || 0) - (question.downvotes || 0));
 
   useEffect(() => {
-    setLocalUpvotes(upvotes || 0);
-  }, [upvotes]);
+    setLocalScore((upvotes || 0) - (question.downvotes || 0));
+  }, [upvotes, question.downvotes]);
 
   useEffect(() => {
     if (user) {
       hasUpvotedQuestion(id).then(setUpvoted);
+      hasDownvotedQuestion(id).then(setDownvoted);
     } else {
       setUpvoted(false);
+      setDownvoted(false);
     }
-  }, [id, user, hasUpvotedQuestion]);
+  }, [id, user, hasUpvotedQuestion, hasDownvotedQuestion]);
 
   const handleUpvote = async (e) => {
     e.preventDefault();
@@ -90,11 +78,47 @@ export default function QuestionCard({ question, index = 0 }) {
       return;
     }
     try {
-      await toggleQuestionUpvote(id);
-      setUpvoted(!upvoted);
-      setLocalUpvotes((prev) => (upvoted ? prev - 1 : prev + 1));
+      await toggleQuestionVote(id, true);
+      if (upvoted) {
+        setUpvoted(false);
+        setLocalScore((prev) => prev - 1);
+      } else {
+        setUpvoted(true);
+        if (downvoted) {
+          setDownvoted(false);
+          setLocalScore((prev) => prev + 2);
+        } else {
+          setLocalScore((prev) => prev + 1);
+        }
+      }
+    } catch (err) {
+      showToast(err.message || 'Failed to upvote', 'error');
+    }
+  };
+
+  const handleDownvote = async (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    if (!user) {
+      showToast('Please sign in to downvote', 'info');
+      return;
+    }
+    try {
+      await toggleQuestionVote(id, false);
+      if (downvoted) {
+        setDownvoted(false);
+        setLocalScore((prev) => prev + 1);
+      } else {
+        setDownvoted(true);
+        if (upvoted) {
+          setUpvoted(false);
+          setLocalScore((prev) => prev - 2);
+        } else {
+          setLocalScore((prev) => prev - 1);
+        }
+      }
     } catch (err) {
-      console.error('Upvote error:', err);
+      showToast(err.message || 'Failed to downvote', 'error');
     }
   };
 
@@ -105,84 +129,56 @@ export default function QuestionCard({ question, index = 0 }) {
     <motion.div
       initial={{ opacity: 0, y: 15 }}
       animate={{ opacity: 1, y: 0 }}
-      transition={{ duration: 0.25, delay: index * 0.03 }}
+      exit={{ opacity: 0 }}
       whileHover={{ y: -3.5, scale: 1.005 }}
       transition={{ type: 'spring', stiffness: 400, damping: 25 }}
       className="group block"
     >
       <div className="flex gap-4 p-5 rounded-2xl bg-white/70 dark:bg-zinc-900/40 backdrop-blur-md border border-zinc-200/50 dark:border-zinc-800/60 shadow-sm hover:border-indigo-500/30 dark:hover:border-purple-500/35 hover:shadow-lg dark:hover:shadow-[0_0_30px_-5px_rgba(168,85,247,0.15)] transition-all duration-300">
         {/* Vote column */}
-        <div className="flex flex-col items-center gap-1 shrink-0 pt-1">
+        <div className="flex flex-col items-center gap-0.5 shrink-0 pt-1">
           <button
             onClick={handleUpvote}
             className={`p-1 rounded-lg transition-all duration-200 cursor-pointer ${
               upvoted
-                ? 'text-indigo-600 dark:text-indigo-400 bg-indigo-500/10'
+                ? 'text-indigo-650 dark:text-indigo-405 bg-indigo-500/10'
                 : 'text-zinc-400 hover:text-zinc-800 dark:hover:text-zinc-100 hover:bg-zinc-100 dark:hover:bg-zinc-800/80'
             }`}
           >
             <ChevronUp className={`w-5 h-5 transition-transform ${upvoted ? 'scale-110 stroke-[3px]' : ''}`} />
           </button>
-          <span className={`text-sm font-bold transition-colors ${upvoted ? 'text-indigo-600 dark:text-indigo-400' : 'text-zinc-700 dark:text-zinc-300'}`}>
-            {localUpvotes}
+          
+          <span className={`text-xs font-bold transition-colors ${upvoted ? 'text-indigo-600 dark:text-indigo-400' : downvoted ? 'text-rose-500' : 'text-zinc-700 dark:text-zinc-300'}`}>
+            {localScore}
           </span>
+
+          <button
+            onClick={handleDownvote}
+            className={`p-1 rounded-lg transition-all duration-200 cursor-pointer ${
+              downvoted
+                ? 'text-rose-500 bg-rose-500/10'
+                : 'text-zinc-400 hover:text-zinc-800 dark:hover:text-zinc-100 hover:bg-zinc-100 dark:hover:bg-zinc-800/80'
+            }`}
+          >
+            <ChevronDown className={`w-5 h-5 transition-transform ${downvoted ? 'scale-110 stroke-[3px]' : ''}`} />
+          </button>
         </div>
 
         {/* Main content */}
         <div className="flex-1 min-w-0">
           {/* Title */}
-          <div className="flex items-start justify-between gap-3">
-            <Link
-              to={`/question/${id}`}
-              className="text-base font-bold tracking-tight text-zinc-900 dark:text-zinc-100 hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors block"
-            >
-              {titleTranslation.displayText}
-            </Link>
-            <TranslationButton
-              originalLanguage={titleTranslation.originalLanguage}
-              currentLanguage={titleTranslation.currentLanguage}
-              isTranslated={titleTranslation.isTranslated}
-              status={titleTranslation.status}
-              error={titleTranslation.error}
-              onTranslate={titleTranslation.translate}
-              onReset={titleTranslation.resetTranslation}
-            />
-          </div>
-          {titleTranslation.isTranslated && (
-            <div className="mt-2">
-              <TranslationBadge
-                originalLanguage={titleTranslation.originalLanguage}
-                targetLanguage={titleTranslation.currentLanguage}
-              />
-            </div>
-          )}
+          <Link
+            to={`/question/${id}`}
+            className="text-base font-bold tracking-tight text-zinc-900 dark:text-zinc-100 hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors line-clamp-1 block"
+          >
+            {title}
+          </Link>
 
           {/* Description preview */}
           {description && (
-            <div className="mt-3">
-              <div className="flex items-start justify-between gap-3">
-                <p className="text-sm text-zinc-500 dark:text-zinc-400 leading-relaxed">
-                  {descriptionTranslation.displayText}
-                </p>
-                <TranslationButton
-                  originalLanguage={descriptionTranslation.originalLanguage}
-                  currentLanguage={descriptionTranslation.currentLanguage}
-                  isTranslated={descriptionTranslation.isTranslated}
-                  status={descriptionTranslation.status}
-                  error={descriptionTranslation.error}
-                  onTranslate={descriptionTranslation.translate}
-                  onReset={descriptionTranslation.resetTranslation}
-                />
-              </div>
-              {descriptionTranslation.isTranslated && (
-                <div className="mt-2">
-                  <TranslationBadge
-                    originalLanguage={descriptionTranslation.originalLanguage}
-                    targetLanguage={descriptionTranslation.currentLanguage}
-                  />
-                </div>
-              )}
-            </div>
+            <p className="mt-1.5 text-sm text-zinc-500 dark:text-zinc-400 line-clamp-2 leading-relaxed">
+              {description}
+            </p>
           )}
 
           {/* Bottom row */}
diff --git a/src/components/ui/BadgeUnlockModal.jsx b/src/components/ui/BadgeUnlockModal.jsx
new file mode 100644
index 0000000..ceafe49
--- /dev/null
+++ b/src/components/ui/BadgeUnlockModal.jsx
@@ -0,0 +1,183 @@
+import { useEffect, useState } from 'react'
+import { motion, AnimatePresence } from 'framer-motion'
+import { 
+  Award, HelpCircle, MessageCircle, BookOpen, CheckCircle, 
+  ThumbsUp, Sparkles, Flame, Check, Shield, Trophy, 
+  Star, Crown, TrendingUp, Zap, Lightbulb, X 
+} from 'lucide-react'
+
+// Resolve Lucide icons by name
+export const badgeIcons = {
+  Award, HelpCircle, MessageCircle, BookOpen, CheckCircle, 
+  ThumbsUp, Sparkles, Flame, Check, Shield, Trophy, 
+  Star, Crown, TrendingUp, Zap, Lightbulb
+}
+
+// Styling details for different badge tiers
+const typeConfig = {
+  bronze: {
+    glow: 'from-amber-600/20 via-amber-700/10 to-transparent',
+    border: 'border-amber-700/30',
+    titleColor: 'text-amber-700 dark:text-amber-500',
+    badgeBg: 'bg-amber-50 dark:bg-amber-950/20',
+    badgeText: 'text-amber-800 dark:text-amber-400',
+    lightGlow: 'bg-amber-500/15',
+  },
+  silver: {
+    glow: 'from-slate-400/20 via-slate-500/10 to-transparent',
+    border: 'border-slate-400/30',
+    titleColor: 'text-slate-650 dark:text-slate-400',
+    badgeBg: 'bg-slate-50 dark:bg-slate-900/40',
+    badgeText: 'text-slate-700 dark:text-slate-350',
+    lightGlow: 'bg-slate-400/15',
+  },
+  gold: {
+    glow: 'from-yellow-500/20 via-amber-500/10 to-transparent',
+    border: 'border-yellow-550/30 dark:border-yellow-500/25',
+    titleColor: 'text-amber-600 dark:text-yellow-450',
+    badgeBg: 'bg-yellow-50/50 dark:bg-yellow-950/20',
+    badgeText: 'text-yellow-800 dark:text-yellow-450',
+    lightGlow: 'bg-yellow-500/20',
+  },
+  diamond: {
+    glow: 'from-indigo-550/25 via-violet-600/10 to-transparent',
+    border: 'border-indigo-500/30 dark:border-indigo-500/20',
+    titleColor: 'text-indigo-600 dark:text-indigo-450',
+    badgeBg: 'bg-indigo-50/50 dark:bg-indigo-950/20',
+    badgeText: 'text-indigo-850 dark:text-indigo-400',
+    lightGlow: 'bg-indigo-500/25 shadow-[0_0_30px_rgba(99,102,241,0.25)]',
+  },
+  special: {
+    glow: 'from-purple-500/25 via-pink-600/10 to-transparent',
+    border: 'border-purple-500/30 dark:border-purple-550/20',
+    titleColor: 'text-purple-650 dark:text-purple-400',
+    badgeBg: 'bg-purple-50/50 dark:bg-purple-950/20',
+    badgeText: 'text-purple-800 dark:text-purple-400',
+    lightGlow: 'bg-purple-500/25 shadow-[0_0_35px_rgba(168,85,247,0.3)]',
+  }
+}
+
+export default function BadgeUnlockModal() {
+  const [badge, setBadge] = useState(null)
+  
+  useEffect(() => {
+    function handleBadgeUnlock(e) {
+      setBadge(e.detail)
+    }
+    
+    window.addEventListener('badge-unlock', handleBadgeUnlock)
+    return () => window.removeEventListener('badge-unlock', handleBadgeUnlock)
+  }, [])
+
+  if (!badge) return null
+
+  const tier = badge.badge_type || 'bronze'
+  const config = typeConfig[tier] || typeConfig.bronze
+  const IconComponent = badgeIcons[badge.icon] || Award
+
+  return (
+    <AnimatePresence>
+      {badge && (
+        <div className="fixed inset-0 z-[100] flex items-center justify-center p-4">
+          {/* Backdrop Overlay */}
+          <motion.div
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
+            onClick={() => setBadge(null)}
+            className="absolute inset-0 bg-black/60 backdrop-blur-md"
+          />
+
+          {/* Modal Container */}
+          <motion.div
+            initial={{ opacity: 0, scale: 0.9, y: 20 }}
+            animate={{ opacity: 1, scale: 1, y: 0 }}
+            exit={{ opacity: 0, scale: 0.95, y: 15 }}
+            transition={{ type: 'spring', damping: 20, stiffness: 260 }}
+            className={`relative overflow-hidden w-full max-w-sm rounded-3xl bg-white/95 dark:bg-[#070716]/95 border ${config.border} p-6 text-center shadow-2xl backdrop-blur-2xl`}
+          >
+            {/* Dynamic Radial Ambient Glow behind Icon */}
+            <div className={`absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-72 h-72 rounded-full bg-gradient-to-tr ${config.glow} blur-2xl pointer-events-none -z-10`} />
+
+            {/* Close Button */}
+            <button
+              onClick={() => setBadge(null)}
+              className="absolute top-4 right-4 text-slate-400 hover:text-slate-600 dark:text-zinc-500 dark:hover:text-zinc-350 transition-colors p-1.5 hover:bg-slate-100 dark:hover:bg-white/5 rounded-xl cursor-pointer"
+            >
+              <X className="w-4 h-4 stroke-[2.5]" />
+            </button>
+
+            {/* Sparkle effects for special classes */}
+            <div className="flex flex-col items-center mt-3 mb-6 relative">
+              <motion.div
+                animate={{
+                  scale: [1, 1.1, 1],
+                  rotate: [0, 5, -5, 0],
+                }}
+                transition={{ duration: 5, repeat: Infinity, ease: 'easeInOut' }}
+                className={`relative z-10 flex items-center justify-center w-20 h-20 rounded-full ${config.badgeBg} border ${config.border}`}
+              >
+                {/* Decorative glowing ambient orb behind badge */}
+                <div className={`absolute inset-0.5 rounded-full blur-sm -z-10 ${config.lightGlow}`} />
+                <IconComponent className={`w-10 h-10 ${config.titleColor} drop-shadow-[0_0_8px_rgba(255,255,255,0.25)]`} />
+              </motion.div>
+
+              {/* Pulsing rings around badge */}
+              <div className="absolute inset-0 flex items-center justify-center pointer-events-none">
+                <motion.div
+                  animate={{ scale: [1, 1.4, 1], opacity: [0.1, 0.4, 0.1] }}
+                  transition={{ duration: 2.5, repeat: Infinity, ease: 'easeOut' }}
+                  className={`w-24 h-24 rounded-full border border-purple-500/20 absolute ${config.lightGlow}`}
+                />
+              </div>
+
+              {/* Tiny floating particle elements */}
+              {[...Array(6)].map((_, i) => (
+                <motion.div
+                  key={i}
+                  animate={{
+                    y: [0, Math.random() * -60 - 20],
+                    x: [0, Math.random() * 60 - 30],
+                    opacity: [0, 0.8, 0],
+                    scale: [0.5, 1.2, 0.5]
+                  }}
+                  transition={{
+                    duration: Math.random() * 2 + 1.5,
+                    repeat: Infinity,
+                    delay: i * 0.2
+                  }}
+                  className={`absolute w-1.5 h-1.5 rounded-full ${i % 2 === 0 ? 'bg-indigo-400' : 'bg-purple-400'} pointer-events-none`}
+                  style={{ top: '40%' }}
+                />
+              ))}
+            </div>
+
+            {/* Text details */}
+            <span className={`text-[10px] font-extrabold uppercase tracking-widest px-3 py-1 rounded-full ${config.badgeBg} ${config.badgeText} border ${config.border}`}>
+              {tier} achievement
+            </span>
+
+            <h2 className="text-xl font-extrabold text-slate-800 dark:text-zinc-50 mt-4 tracking-tight leading-snug">
+              Badge Earned!
+            </h2>
+            <h3 className={`text-lg font-bold ${config.titleColor} mt-1`}>
+              {badge.badge_name}
+            </h3>
+
+            <p className="text-slate-500 dark:text-zinc-400 text-xs font-semibold mt-3 px-4 leading-relaxed">
+              {badge.description}
+            </p>
+
+            {/* Share / Done Button */}
+            <button
+              onClick={() => setBadge(null)}
+              className="mt-6 w-full py-2.5 rounded-2xl bg-gradient-to-r from-indigo-650 to-violet-650 hover:from-indigo-600 hover:to-violet-600 text-white font-bold text-xs tracking-wider uppercase shadow-lg shadow-indigo-500/20 hover:shadow-indigo-500/35 transition-all duration-300 cursor-pointer"
+            >
+              Fabulous!
+            </button>
+          </motion.div>
+        </div>
+      )}
+    </AnimatePresence>
+  )
+}
diff --git a/src/contexts/AuthContext.jsx b/src/contexts/AuthContext.jsx
index 9e267a4..6e64bb0 100644
--- a/src/contexts/AuthContext.jsx
+++ b/src/contexts/AuthContext.jsx
@@ -7,6 +7,7 @@ export function AuthProvider({ children }) {
   const [user, setUser] = useState(null)
   const [session, setSession] = useState(null)
   const [loading, setLoading] = useState(true)
+  const [unlockedBadge, setUnlockedBadge] = useState(null)
   const userRef = useRef(null)
 
   const setCurrentUser = useCallback((val) => {
@@ -226,6 +227,84 @@ export function AuthProvider({ children }) {
     }
   }, [fetchUserProfile])
 
+  /**
+   * Daily login and realtime subscription for gamification system.
+   */
+  useEffect(() => {
+    if (!user) return
+
+    // Award daily login points
+    const checkDailyLogin = async () => {
+      try {
+        const { data, error } = await supabase.rpc('award_daily_login')
+        if (error) {
+          console.error('Error awarding daily login:', error.message)
+        } else if (data) {
+          console.log('Daily login points awarded!')
+        }
+      } catch (err) {
+        console.error('Error calling award_daily_login:', err)
+      }
+    }
+    checkDailyLogin()
+
+    // Realtime channel for reputation and badges
+    console.log('Subscribing to gamification updates for user:', user.id)
+    const channel = supabase
+      .channel(`user-gamification-${user.id}`)
+      .on(
+        'postgres_changes',
+        {
+          event: 'INSERT',
+          schema: 'public',
+          table: 'reputation_logs',
+          filter: `user_id=eq.${user.id}`
+        },
+        (payload) => {
+          const points = payload.new.points_awarded
+          const action = payload.new.action_type
+          window.dispatchEvent(new CustomEvent('reputation-change', { 
+            detail: { points, action } 
+          }))
+          
+          // Refresh user profile so stats update in real time!
+          fetchUserProfile(user.id).then(updated => {
+            if (updated) setCurrentUser(updated)
+          })
+        }
+      )
+      .on(
+        'postgres_changes',
+        {
+          event: 'INSERT',
+          schema: 'public',
+          table: 'user_badges',
+          filter: `user_id=eq.${user.id}`
+        },
+        (payload) => {
+          // Fetch badge details
+          supabase
+            .from('badges')
+            .select('*')
+            .eq('id', payload.new.badge_id)
+            .single()
+            .then(({ data: badge }) => {
+              if (badge) {
+                // Set state and dispatch event
+                setUnlockedBadge(badge)
+                window.dispatchEvent(new CustomEvent('badge-unlock', { detail: badge }))
+              }
+            })
+        }
+      )
+      .subscribe()
+
+    return () => {
+      console.log('Unsubscribing from gamification updates for user:', user.id)
+      supabase.removeChannel(channel)
+    }
+  }, [user?.id, fetchUserProfile, setCurrentUser])
+
   /**
    * Sign up with email and password.
    * The database trigger (handle_new_user) will auto-create the user profile.
@@ -340,6 +419,8 @@ export function AuthProvider({ children }) {
     resetPassword,
     updateProfile,
     isAdmin,
+    unlockedBadge,
+    setUnlockedBadge,
   }
 
   return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>
diff --git a/src/hooks/useAdmin.js b/src/hooks/useAdmin.js
index 347a18c..7ebb883 100644
--- a/src/hooks/useAdmin.js
+++ b/src/hooks/useAdmin.js
@@ -11,6 +11,7 @@ export function useAdmin() {
     totalQuestions: 0,
   })
   const [allAnswers, setAllAnswers] = useState([])
+  const [allQuestions, setAllQuestions] = useState([])
   const [loading, setLoading] = useState(false)
   const [error, setError] = useState(null)
   const { isAdmin } = useAuth()
@@ -69,6 +70,37 @@ export function useAdmin() {
     }
   }, [isAdmin])
 
+  const fetchAllQuestions = useCallback(async () => {
+    if (!isAdmin) return
+    setLoading(true)
+    setError(null)
+    try {
+      const { data, error: fetchError } = await supabase
+        .from('questions')
+        .select(`
+          *,
+          users:user_id (id, name, email, avatar),
+          answers:answers (id)
+        `)
+        .order('created_at', { ascending: false })
+
+      if (fetchError) throw fetchError
+
+      const enriched = (data || []).map(q => ({
+        ...q,
+        answer_count: (q.answers || []).length
+      }))
+
+      setAllQuestions(enriched)
+      return enriched
+    } catch (err) {
+      setError(err.message)
+      return []
+    } finally {
+      setLoading(false)
+    }
+  }, [isAdmin])
+
   const bulkVerify = useCallback(async (ids) => {
     if (!isAdmin) throw new Error('Admin only')
     try {
@@ -133,15 +165,220 @@ export function useAdmin() {
     }
   }, [isAdmin])
 
+  const adminDeleteQuestion = useCallback(async (id) => {
+    if (!isAdmin) throw new Error('Admin only')
+    try {
+      const { error: deleteError } = await supabase
+        .from('questions')
+        .delete()
+        .eq('id', id)
+
+      if (deleteError) throw deleteError
+      setAllQuestions(prev => prev.filter(q => q.id !== id))
+    } catch (err) {
+      setError(err.message)
+      throw err
+    }
+  }, [isAdmin])
+
+  const bulkDeleteQuestions = useCallback(async (ids) => {
+    if (!isAdmin) throw new Error('Admin only')
+    try {
+      const { error: deleteError } = await supabase
+        .from('questions')
+        .delete()
+        .in('id', ids)
+
+      if (deleteError) throw deleteError
+      setAllQuestions(prev => prev.filter(q => !ids.includes(q.id)))
+    } catch (err) {
+      setError(err.message)
+      throw err
+    }
+  }, [isAdmin])
+
+  const fetchUsers = useCallback(async () => {
+    if (!isAdmin) return []
+    setLoading(true)
+    try {
+      const { data, error: fetchError } = await supabase
+        .from('users')
+        .select(`
+          *,
+          user_badges (
+            id,
+            badge_id,
+            earned_at,
+            badges (
+              id,
+              badge_name,
+              badge_type,
+              description,
+              icon
+            )
+          )
+        `)
+        .order('name', { ascending: true })
+
+      if (fetchError) throw fetchError
+      return data || []
+    } catch (err) {
+      console.error('Error fetching users:', err)
+      setError(err.message)
+      return []
+    } finally {
+      setLoading(false)
+    }
+  }, [isAdmin])
+
+  const fetchAvailableBadges = useCallback(async () => {
+    if (!isAdmin) return []
+    try {
+      const { data, error: fetchError } = await supabase
+        .from('badges')
+        .select('*')
+        .order('badge_type', { ascending: true })
+
+      if (fetchError) throw fetchError
+      return data || []
+    } catch (err) {
+      console.error('Error fetching available badges:', err)
+      return []
+    }
+  }, [isAdmin])
+
+  const fetchReputationLogs = useCallback(async () => {
+    if (!isAdmin) return []
+    try {
+      const { data, error: fetchError } = await supabase
+        .from('reputation_logs')
+        .select(`
+          *,
+          users:user_id (id, name, email, avatar)
+        `)
+        .order('created_at', { ascending: false })
+        .limit(100)
+
+      if (fetchError) throw fetchError
+      return data || []
+    } catch (err) {
+      console.error('Error fetching reputation logs:', err)
+      return []
+    }
+  }, [isAdmin])
+
+  const adjustUserReputation = useCallback(async (userId, points) => {
+    if (!isAdmin) throw new Error('Admin only')
+    try {
+      const refId = crypto.randomUUID()
+      const { data, error: insertError } = await supabase
+        .from('reputation_logs')
+        .insert({
+          user_id: userId,
+          action_type: 'admin_adjustment',
+          points_awarded: points,
+          reference_id: refId
+        })
+        .select()
+        .single()
+
+      if (insertError) throw insertError
+      return data
+    } catch (err) {
+      console.error('Error adjusting user reputation:', err)
+      throw err
+    }
+  }, [isAdmin])
+
+  const awardUserBadge = useCallback(async (userId, badgeId) => {
+    if (!isAdmin) throw new Error('Admin only')
+    try {
+      const { data, error: insertError } = await supabase
+        .from('user_badges')
+        .insert({
+          user_id: userId,
+          badge_id: badgeId
+        })
+        .select()
+        .single()
+
+      if (insertError) throw insertError
+      return data
+    } catch (err) {
+      console.error('Error awarding badge:', err)
+      throw err
+    }
+  }, [isAdmin])
+
+  const revokeUserBadge = useCallback(async (userId, badgeId) => {
+    if (!isAdmin) throw new Error('Admin only')
+    try {
+      const { error: deleteError } = await supabase
+        .from('user_badges')
+        .delete()
+        .eq('user_id', userId)
+        .eq('badge_id', badgeId)
+
+      if (deleteError) throw deleteError
+      return true
+    } catch (err) {
+      console.error('Error revoking badge:', err)
+      throw err
+    }
+  }, [isAdmin])
+
+  const fetchGamificationAnalytics = useCallback(async () => {
+    if (!isAdmin) return null
+    try {
+      const [totalRepRes, totalBadgesRes, topUserRes] = await Promise.all([
+        supabase.from('users').select('reputation_points'),
+        supabase.from('user_badges').select('id', { count: 'exact', head: true }),
+        supabase.from('users')
+          .select('id, name, email, avatar, reputation_points')
+          .order('reputation_points', { ascending: false })
+          .limit(1)
+          .maybeSingle()
+      ])
+
+      const totalRep = (totalRepRes.data || []).reduce((sum, u) => sum + (u.reputation_points || 0), 0)
+      const totalBadges = totalBadgesRes.count || 0
+      const topContributor = topUserRes.data || null
+
+      return {
+        totalReputationPoints: totalRep,
+        totalEarnedBadges: totalBadges,
+        topContributor
+      }
+    } catch (err) {
+      console.error('Error fetching gamification analytics:', err)
+      return {
+        totalReputationPoints: 0,
+        totalEarnedBadges: 0,
+        topContributor: null
+      }
+    }
+  }, [isAdmin])
+
   return {
     metrics,
     allAnswers,
+    allQuestions,
     loading,
     error,
     fetchMetrics,
     fetchAllAnswers,
+    fetchAllQuestions,
     bulkVerify,
     bulkDelete,
     bulkMarkSpam,
+    adminDeleteQuestion,
+    bulkDeleteQuestions,
+    fetchUsers,
+    fetchAvailableBadges,
+    fetchReputationLogs,
+    adjustUserReputation,
+    awardUserBadge,
+    revokeUserBadge,
+    fetchGamificationAnalytics
   }
 }
diff --git a/src/hooks/useAnswers.js b/src/hooks/useAnswers.js
index a5c4fee..7a45e89 100644
--- a/src/hooks/useAnswers.js
+++ b/src/hooks/useAnswers.js
@@ -176,7 +176,6 @@ export function useAnswers() {
       throw err
     }
   }, [])
-
   const fetchUserAnswers = useCallback(async (userId) => {
     setLoading(true)
     try {
@@ -200,6 +199,22 @@ export function useAnswers() {
     }
   }, [])
 
+  const acceptAnswer = useCallback(async (answerId) => {
+    setLoading(true)
+    try {
+      const { data, error: rpcError } = await supabase.rpc('accept_answer', {
+        a_id: answerId
+      })
+      if (rpcError) throw rpcError
+      return data
+    } catch (err) {
+      setError(err.message)
+      throw err
+    } finally {
+      setLoading(false)
+    }
+  }, [])
+
   return {
     answers,
     loading,
@@ -211,5 +226,6 @@ export function useAnswers() {
     markSpam,
     deleteAnswer,
     fetchUserAnswers,
+    acceptAnswer,
   }
 }
diff --git a/src/hooks/useUpvote.js b/src/hooks/useUpvote.js
index 062e4e4..2826a9a 100644
--- a/src/hooks/useUpvote.js
+++ b/src/hooks/useUpvote.js
@@ -6,42 +6,50 @@ export function useUpvote() {
   const [loading, setLoading] = useState(false)
   const { user } = useAuth()
 
-  const toggleQuestionUpvote = useCallback(async (questionId) => {
+  const toggleQuestionVote = useCallback(async (questionId, isUpvote) => {
     if (!user) throw new Error('Must be logged in')
     setLoading(true)
     try {
-      const { data, error } = await supabase.rpc('toggle_question_upvote', {
+      const { data, error } = await supabase.rpc('toggle_question_vote', {
         q_id: questionId,
-        u_id: user.id,
+        is_upvote: isUpvote,
       })
       if (error) throw error
       return data
     } catch (err) {
-      console.error('Upvote error:', err)
+      console.error('Voting error:', err)
       throw err
     } finally {
       setLoading(false)
     }
   }, [user])
 
-  const toggleAnswerUpvote = useCallback(async (answerId) => {
+  const toggleAnswerVote = useCallback(async (answerId, isUpvote) => {
     if (!user) throw new Error('Must be logged in')
     setLoading(true)
     try {
-      const { data, error } = await supabase.rpc('toggle_answer_upvote', {
+      const { data, error } = await supabase.rpc('toggle_answer_vote', {
         a_id: answerId,
-        u_id: user.id,
+        is_upvote: isUpvote,
       })
       if (error) throw error
       return data
     } catch (err) {
-      console.error('Upvote error:', err)
+      console.error('Voting error:', err)
       throw err
     } finally {
       setLoading(false)
     }
   }, [user])
 
+  const toggleQuestionUpvote = useCallback(async (questionId) => {
+    return toggleQuestionVote(questionId, true)
+  }, [toggleQuestionVote])
+
+  const toggleAnswerUpvote = useCallback(async (answerId) => {
+    return toggleAnswerVote(answerId, true)
+  }, [toggleAnswerVote])
+
   const hasUpvotedQuestion = useCallback(async (questionId) => {
     if (!user) return false
     try {
@@ -59,6 +67,23 @@ export function useUpvote() {
     }
   }, [user])
 
+  const hasDownvotedQuestion = useCallback(async (questionId) => {
+    if (!user) return false
+    try {
+      const { data, error } = await supabase
+        .from('question_downvotes')
+        .select('question_id')
+        .eq('question_id', questionId)
+        .eq('user_id', user.id)
+        .maybeSingle()
+
+      if (error) throw error
+      return !!data
+    } catch {
+      return false
+    }
+  }, [user])
+
   const hasUpvotedAnswer = useCallback(async (answerId) => {
     if (!user) return false
     try {
@@ -76,11 +101,32 @@ export function useUpvote() {
     }
   }, [user])
 
+  const hasDownvotedAnswer = useCallback(async (answerId) => {
+    if (!user) return false
+    try {
+      const { data, error } = await supabase
+        .from('answer_downvotes')
+        .select('answer_id')
+        .eq('answer_id', answerId)
+        .eq('user_id', user.id)
+        .maybeSingle()
+
+      if (error) throw error
+      return !!data
+    } catch {
+      return false
+    }
+  }, [user])
+
   return {
     loading,
+    toggleQuestionVote,
+    toggleAnswerVote,
     toggleQuestionUpvote,
     toggleAnswerUpvote,
     hasUpvotedQuestion,
+    hasDownvotedQuestion,
     hasUpvotedAnswer,
+    hasDownvotedAnswer,
   }
 }
diff --git a/src/lib/duplicateDetector.js b/src/lib/duplicateDetector.js
index eadabc0..cb5af7b 100644
--- a/src/lib/duplicateDetector.js
+++ b/src/lib/duplicateDetector.js
@@ -1,7 +1,3 @@
-import {
-  generateEmbedding,
-  cosineSimilarity,
-} from './embeddingUtils'
 import Fuse from 'fuse.js'
 
 /**
@@ -23,7 +19,7 @@ const duplicateOptions = {
  * @param {string} newTitle - The title of the new question to check
  * @returns {Array} Array of similar questions with score, match info, and duplicate flag
  */
-export async function findDuplicates(existingQuestions, newTitle) {
+export function findDuplicates(existingQuestions, newTitle) {
   if (
     !newTitle ||
     !newTitle.trim() ||
@@ -35,73 +31,12 @@ export async function findDuplicates(existingQuestions, newTitle) {
 
   const fuse = new Fuse(existingQuestions, duplicateOptions)
   const results = fuse.search(newTitle.trim())
-  try {
-
-  const candidates =
-    results.slice(0, 10)
-
-  const queryEmbedding =
-    await generateEmbedding(
-      newTitle
-    )
-
-  const enrichedResults = []
-
-  for (const result of candidates) {
-
-    const candidateEmbedding =
-      await generateEmbedding(
-        result.item.title
-      )
-
-    const semanticScore =
-      cosineSimilarity(
-        queryEmbedding,
-        candidateEmbedding
-      )
-
-    const fuseScore =
-      1 - (
-        result.score || 0
-      )
-
-    const finalScore =
-      (semanticScore * 0.7)
-      +
-      (fuseScore * 0.3)
-
-    enrichedResults.push({
-      item: result.item,
-      score: result.score,
-      semanticScore,
-      finalScore,
-      matches:
-        result.matches || [],
-      isPotentialDuplicate:
-        finalScore > 0.75,
-    })
-  }
-
-  return enrichedResults
-    .filter(
-      r => r.finalScore > 0.6
-    )
-    .sort(
-      (a, b) =>
-        b.finalScore -
-        a.finalScore
-    )
-
-} catch (error) {
-  console.error('Semantic duplicate detection failed:', error)
 
   return results.map((result) => ({
     item: result.item,
     score: result.score,
     matches: result.matches || [],
-    isPotentialDuplicate:
-      result.score < 0.2,
+    // In Fuse.js, lower score = better match. Score < 0.2 means very similar.
+    isPotentialDuplicate: result.score < 0.2,
   }))
 }
-  
-}
diff --git a/src/pages/AdminDashboard.jsx b/src/pages/AdminDashboard.jsx
index c0f572a..36a0fa5 100644
--- a/src/pages/AdminDashboard.jsx
+++ b/src/pages/AdminDashboard.jsx
@@ -1,14 +1,18 @@
 import { useState, useEffect, useCallback } from 'react'
+import { Link } from 'react-router-dom'
 import { motion } from 'framer-motion'
-import { Shield, RefreshCw, Clock, CheckCircle, XCircle, AlertTriangle, Inbox } from 'lucide-react'
+import { Shield, RefreshCw, Clock, CheckCircle, XCircle, AlertTriangle, Inbox, MessageCircle, HelpCircle, Trash2, Search, Eye, Trophy, Award, Coins, TrendingUp, User } from 'lucide-react'
+
 import MetricsCards from '@/components/admin/MetricsCards'
 import ModerationTable from '@/components/admin/ModerationTable'
 import BulkActions from '@/components/admin/BulkActions'
 import Modal from '@/components/ui/Modal'
 import Button from '@/components/ui/Button'
+import Avatar from '@/components/ui/Avatar'
 import { useAdmin } from '@/hooks/useAdmin'
 import { useAnswers } from '@/hooks/useAnswers'
 import { useToast } from '@/components/ui/Toast'
+import { badgeIcons } from '@/components/ui/BadgeUnlockModal'
 
 const filterTabs = [
   { id: 'all', label: 'All', icon: Inbox },
@@ -18,24 +22,131 @@ const filterTabs = [
   { id: 'spam', label: 'Spam', icon: AlertTriangle },
 ]
 
+function timeAgo(dateString) {
+  const now = new Date()
+  const date = new Date(dateString)
+  const seconds = Math.floor((now - date) / 1000)
+  if (seconds < 60) return 'just now'
+  const minutes = Math.floor(seconds / 60)
+  if (minutes < 60) return `${minutes}m ago`
+  const hours = Math.floor(minutes / 60)
+  if (hours < 24) return `${hours}h ago`
+  const days = Math.floor(hours / 24)
+  return `${days}d ago`
+}
+
+const badgeTierColors = {
+  bronze: 'bg-amber-500/10 text-amber-600 dark:text-amber-400 border-amber-500/20',
+  silver: 'bg-slate-400/10 text-slate-600 dark:text-slate-400 border-slate-400/20',
+  gold: 'bg-yellow-500/10 text-yellow-600 dark:text-yellow-450 border-yellow-500/20',
+  diamond: 'bg-indigo-500/10 text-indigo-600 dark:text-indigo-400 border-indigo-500/20',
+  special: 'bg-purple-500/10 text-purple-600 dark:text-purple-400 border-purple-500/20',
+}
+
+function formatActionType(action) {
+  switch (action) {
+    case 'ask_question': return 'Asked a Question'
+    case 'post_answer': return 'Posted an Answer'
+    case 'question_upvote': return 'Received Question Upvote'
+    case 'question_downvote': return 'Received Question Downvote'
+    case 'answer_upvote': return 'Received Answer Upvote'
+    case 'answer_downvote': return 'Received Answer Downvote'
+    case 'answer_accepted': return 'Answer Accepted'
+    case 'daily_login': return 'Daily Login Bonus'
+    case 'admin_adjustment': return 'Admin Adjustment'
+    default: return action.replace('_', ' ')
+  }
+}
+
 export default function AdminDashboard() {
-  const { metrics, allAnswers, loading, fetchMetrics, fetchAllAnswers, bulkVerify, bulkDelete, bulkMarkSpam } = useAdmin()
+  const { 
+    metrics, 
+    allAnswers, 
+    allQuestions, 
+    loading, 
+    fetchMetrics, 
+    fetchAllAnswers, 
+    fetchAllQuestions, 
+    bulkVerify, 
+    bulkDelete, 
+    bulkMarkSpam, 
+    adminDeleteQuestion, 
+    bulkDeleteQuestions,
+    fetchUsers,
+    fetchAvailableBadges,
+    fetchReputationLogs,
+    adjustUserReputation,
+    awardUserBadge,
+    revokeUserBadge,
+    fetchGamificationAnalytics
+  } = useAdmin()
   const { verifyAnswer, rejectAnswer, markSpam, deleteAnswer } = useAnswers()
   const { showToast } = useToast()
+  
+  const [activeSection, setActiveSection] = useState('answers') // 'answers', 'questions', or 'gamification'
   const [activeFilter, setActiveFilter] = useState('all')
   const [selectedIds, setSelectedIds] = useState([])
+  const [selectedQuestionIds, setSelectedQuestionIds] = useState([])
+  const [questionSearch, setQuestionSearch] = useState('')
   const [adminNoteModal, setAdminNoteModal] = useState({ open: false, answerId: null, action: null })
   const [adminNote, setAdminNote] = useState('')
 
+  // Gamification States
+  const [users, setUsers] = useState([])
+  const [availableBadges, setAvailableBadges] = useState([])
+  const [reputationLogs, setReputationLogs] = useState([])
+  const [analytics, setAnalytics] = useState(null)
+  const [userSearch, setUserSearch] = useState('')
+  const [loadingGamification, setLoadingGamification] = useState(false)
+  const [reputationModal, setReputationModal] = useState({ open: false, userId: null, username: '', points: '' })
+  const [badgeModal, setBadgeModal] = useState({ open: false, userId: null, username: '', userBadges: [] })
+
+  const loadGamificationData = useCallback(async () => {
+    setLoadingGamification(true)
+    try {
+      const [usersList, badgesList, logsList, stats] = await Promise.all([
+        fetchUsers(),
+        fetchAvailableBadges(),
+        fetchReputationLogs(),
+        fetchGamificationAnalytics()
+      ])
+      setUsers(usersList)
+      setAvailableBadges(badgesList)
+      setReputationLogs(logsList)
+      setAnalytics(stats)
+    } catch (err) {
+      console.error('Error loading gamification data:', err)
+      showToast('Failed to load gamification data', 'error')
+    } finally {
+      setLoadingGamification(false)
+    }
+  }, [fetchUsers, fetchAvailableBadges, fetchReputationLogs, fetchGamificationAnalytics, showToast])
+
   useEffect(() => {
     fetchMetrics()
-    fetchAllAnswers(activeFilter)
-  }, [fetchMetrics, fetchAllAnswers, activeFilter])
+    if (activeSection === 'answers') {
+      fetchAllAnswers(activeFilter)
+    } else if (activeSection === 'questions') {
+      fetchAllQuestions()
+    } else if (activeSection === 'gamification') {
+      const timer = setTimeout(() => {
+        loadGamificationData()
+      }, 0)
+      return () => clearTimeout(timer)
+    }
+  }, [fetchMetrics, fetchAllAnswers, fetchAllQuestions, loadGamificationData, activeFilter, activeSection])
 
   const handleRefresh = () => {
     fetchMetrics()
-    fetchAllAnswers(activeFilter)
-    setSelectedIds([])
+    if (activeSection === 'answers') {
+      fetchAllAnswers(activeFilter)
+      setSelectedIds([])
+    } else if (activeSection === 'questions') {
+      fetchAllQuestions()
+      setSelectedQuestionIds([])
+    } else if (activeSection === 'gamification') {
+      loadGamificationData()
+    }
   }
 
   const handleVerify = useCallback((answerId) => {
@@ -59,6 +170,7 @@ export default function AdminDashboard() {
       setAdminNote('')
       handleRefresh()
     } catch (err) {
+      console.error(err)
       showToast(`Failed to ${adminNoteModal.action}`, 'error')
     }
   }
@@ -69,6 +181,7 @@ export default function AdminDashboard() {
       showToast('Marked as spam', 'info')
       handleRefresh()
     } catch (err) {
+      console.error(err)
       showToast('Failed to mark spam', 'error')
     }
   }
@@ -79,10 +192,69 @@ export default function AdminDashboard() {
       showToast('Answer deleted', 'info')
       handleRefresh()
     } catch (err) {
+      console.error(err)
       showToast('Failed to delete', 'error')
     }
   }
 
+  const handleDeleteQuestion = async (id) => {
+    if (window.confirm("Are you sure you want to delete this question? This will also delete all associated answers.")) {
+      try {
+        await adminDeleteQuestion(id)
+        showToast('Question deleted', 'info')
+        handleRefresh()
+      } catch (err) {
+        console.error(err)
+        showToast('Failed to delete question', 'error')
+      }
+    }
+  }
+
+  const handleAdjustReputation = async () => {
+    try {
+      const pts = parseInt(reputationModal.points, 10)
+      if (isNaN(pts) || pts === 0) {
+        showToast('Please enter a valid non-zero points adjustment', 'warning')
+        return
+      }
+      await adjustUserReputation(reputationModal.userId, pts)
+      showToast(`Reputation adjusted by ${pts > 0 ? '+' : ''}${pts} points!`, 'success')
+      setReputationModal({ open: false, userId: null, username: '', points: '' })
+      loadGamificationData()
+    } catch (err) {
+      console.error(err)
+      showToast('Failed to adjust reputation points', 'error')
+    }
+  }
+
+  const handleToggleBadge = async (badgeId, isEarned) => {
+    try {
+      if (isEarned) {
+        await revokeUserBadge(badgeModal.userId, badgeId)
+        showToast('Badge revoked successfully', 'info')
+      } else {
+        await awardUserBadge(badgeModal.userId, badgeId)
+        showToast('Badge awarded successfully!', 'success')
+      }
+      // Refresh user's badges in modal list
+      const updatedUsers = await fetchUsers()
+      setUsers(updatedUsers)
+      const currentUser = updatedUsers.find(u => u.id === badgeModal.userId)
+      if (currentUser) {
+        setBadgeModal(prev => ({
+          ...prev,
+          userBadges: currentUser.user_badges || []
+        }))
+      }
+      // Update analytics
+      const stats = await fetchGamificationAnalytics()
+      setAnalytics(stats)
+    } catch (err) {
+      console.error(err)
+      showToast('Failed to modify user badges', 'error')
+    }
+  }
+
   const toggleSelect = (id) => {
     setSelectedIds(prev =>
       prev.includes(id) ? prev.filter(x => x !== id) : [...prev, id]
@@ -104,6 +276,7 @@ export default function AdminDashboard() {
       setSelectedIds([])
       handleRefresh()
     } catch (err) {
+      console.error(err)
       showToast('Bulk verify failed', 'error')
     }
   }
@@ -115,6 +288,7 @@ export default function AdminDashboard() {
       setSelectedIds([])
       handleRefresh()
     } catch (err) {
+      console.error(err)
       showToast('Bulk delete failed', 'error')
     }
   }
@@ -126,10 +300,34 @@ export default function AdminDashboard() {
       setSelectedIds([])
       handleRefresh()
     } catch (err) {
+      console.error(err)
       showToast('Bulk spam failed', 'error')
     }
   }
 
+  const handleBulkDeleteQuestions = async () => {
+    if (window.confirm(`Are you sure you want to delete the ${selectedQuestionIds.length} selected questions? This will also delete all associated answers.`)) {
+      try {
+        await bulkDeleteQuestions(selectedQuestionIds)
+        showToast(`${selectedQuestionIds.length} questions deleted`, 'info')
+        setSelectedQuestionIds([])
+        handleRefresh()
+      } catch (err) {
+        console.error(err)
+        showToast('Bulk delete failed', 'error')
+      }
+    }
+  }
+
+  const filteredQuestions = allQuestions.filter(q => {
+    const searchLower = questionSearch.toLowerCase()
+    const titleMatch = q.title?.toLowerCase().includes(searchLower)
+    const descMatch = q.description?.toLowerCase().includes(searchLower)
+    const authorMatch = q.users?.name?.toLowerCase().includes(searchLower)
+    const categoryMatch = q.category?.toLowerCase().includes(searchLower)
+    return titleMatch || descMatch || authorMatch || categoryMatch
+  })
+
   return (
     <motion.div
       initial={{ opacity: 0, y: 20 }}
@@ -158,58 +356,529 @@ export default function AdminDashboard() {
         <MetricsCards metrics={metrics} />
       </div>
 
-      {/* Filter Tabs */}
-      <div className="flex gap-1 mb-4 bg-slate-100 dark:bg-slate-800 p-1 rounded-xl overflow-x-auto">
-        {filterTabs.map((tab) => {
-          const Icon = tab.icon
-          const count = tab.id === 'all' ? allAnswers.length :
-            tab.id === 'pending' ? metrics.pendingReviews :
-            tab.id === 'verified' ? metrics.verifiedAnswers :
-            tab.id === 'rejected' ? metrics.flaggedContent :
-            metrics.spamRemoved
-
-          return (
-            <button
-              key={tab.id}
-              onClick={() => { setActiveFilter(tab.id); setSelectedIds([]) }}
-              className={`flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium whitespace-nowrap transition-all duration-200 ${
-                activeFilter === tab.id
-                  ? 'bg-white dark:bg-slate-700 text-indigo-600 dark:text-indigo-400 shadow-sm'
-                  : 'text-slate-500 hover:text-slate-700 dark:hover:text-slate-300'
-              }`}
-            >
-              <Icon className="w-4 h-4" />
-              {tab.label}
-              <span className="text-xs bg-slate-200 dark:bg-slate-600 px-1.5 py-0.5 rounded-full">
-                {count}
-              </span>
-            </button>
-          )
-        })}
+      {/* Section Switcher Tab (Answers vs Questions vs Gamification) */}
+      <div className="flex gap-2 mb-6 bg-slate-100 dark:bg-slate-800 p-1 rounded-xl w-fit">
+        <button
+          onClick={() => { setActiveSection('answers'); setSelectedIds([]) }}
+          className={`flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-semibold transition-all duration-200 cursor-pointer ${
+            activeSection === 'answers'
+              ? 'bg-white dark:bg-slate-700 text-indigo-600 dark:text-indigo-400 shadow-sm'
+              : 'text-slate-500 hover:text-slate-750 dark:hover:text-slate-350'
+          }`}
+        >
+          <MessageCircle className="w-4 h-4" />
+          Answers Moderation
+        </button>
+        <button
+          onClick={() => { setActiveSection('questions'); setSelectedQuestionIds([]) }}
+          className={`flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-semibold transition-all duration-200 cursor-pointer ${
+            activeSection === 'questions'
+              ? 'bg-white dark:bg-slate-700 text-indigo-600 dark:text-indigo-400 shadow-sm'
+              : 'text-slate-500 hover:text-slate-750 dark:hover:text-slate-350'
+          }`}
+        >
+          <HelpCircle className="w-4 h-4" />
+          Questions Management
+        </button>
+        <button
+          onClick={() => { setActiveSection('gamification'); setSelectedIds([]); setSelectedQuestionIds([]) }}
+          className={`flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-semibold transition-all duration-200 cursor-pointer ${
+            activeSection === 'gamification'
+              ? 'bg-white dark:bg-slate-700 text-indigo-650 dark:text-indigo-400 shadow-sm'
+              : 'text-slate-500 hover:text-slate-750 dark:hover:text-slate-350'
+          }`}
+        >
+          <Trophy className="w-4 h-4" />
+          Gamification Management
+        </button>
       </div>
 
-      {/* Bulk Actions */}
-      <BulkActions
-        selectedCount={selectedIds.length}
-        onBulkVerify={handleBulkVerify}
-        onBulkDelete={handleBulkDelete}
-        onBulkSpam={handleBulkSpam}
-      />
-
-      {/* Moderation Table */}
-      <div className="bg-white/80 dark:bg-slate-800/80 backdrop-blur-sm rounded-2xl border border-slate-200/50 dark:border-slate-700/50 shadow-sm overflow-hidden">
-        <ModerationTable
-          answers={allAnswers}
-          loading={loading}
-          onVerify={handleVerify}
-          onReject={handleReject}
-          onSpam={handleSpam}
-          onDelete={handleDelete}
-          selectedIds={selectedIds}
-          onToggleSelect={toggleSelect}
-          onSelectAll={selectAll}
-        />
-      </div>
+      {activeSection === 'answers' ? (
+        <>
+          {/* Filter Tabs */}
+          <div className="flex gap-1 mb-4 bg-slate-100 dark:bg-slate-800 p-1 rounded-xl overflow-x-auto">
+            {filterTabs.map((tab) => {
+              const Icon = tab.icon
+              const count = tab.id === 'all' ? allAnswers.length :
+                tab.id === 'pending' ? metrics.pendingReviews :
+                tab.id === 'verified' ? metrics.verifiedAnswers :
+                tab.id === 'rejected' ? metrics.flaggedContent :
+                metrics.spamRemoved
+
+              return (
+                <button
+                  key={tab.id}
+                  onClick={() => { setActiveFilter(tab.id); setSelectedIds([]) }}
+                  className={`flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium whitespace-nowrap transition-all duration-200 ${
+                    activeFilter === tab.id
+                      ? 'bg-white dark:bg-slate-700 text-indigo-600 dark:text-indigo-400 shadow-sm'
+                      : 'text-slate-500 hover:text-slate-750 dark:hover:text-slate-350'
+                  }`}
+                >
+                  <Icon className="w-4 h-4" />
+                  {tab.label}
+                  <span className="text-xs bg-slate-200 dark:bg-slate-600 px-1.5 py-0.5 rounded-full">
+                    {count}
+                  </span>
+                </button>
+              )
+            })}
+          </div>
+
+          {/* Bulk Actions */}
+          <BulkActions
+            selectedCount={selectedIds.length}
+            onBulkVerify={handleBulkVerify}
+            onBulkDelete={handleBulkDelete}
+            onBulkSpam={handleBulkSpam}
+          />
+
+          {/* Moderation Table */}
+          <div className="bg-white/80 dark:bg-slate-800/80 backdrop-blur-sm rounded-2xl border border-slate-200/50 dark:border-slate-700/50 shadow-sm overflow-hidden">
+            <ModerationTable
+              answers={allAnswers}
+              loading={loading}
+              onVerify={handleVerify}
+              onReject={handleReject}
+              onSpam={handleSpam}
+              onDelete={handleDelete}
+              selectedIds={selectedIds}
+              onToggleSelect={toggleSelect}
+              onSelectAll={selectAll}
+            />
+          </div>
+        </>
+      ) : activeSection === 'questions' ? (
+        <>
+          {/* Question Bulk Actions */}
+          {selectedQuestionIds.length > 0 && (
+            <motion.div
+              initial={{ opacity: 0, y: -10 }}
+              animate={{ opacity: 1, y: 0 }}
+              className="flex items-center justify-between p-4 mb-4 bg-red-500/10 dark:bg-red-500/5 border border-red-500/20 rounded-2xl shadow-sm"
+            >
+              <div className="flex items-center gap-2 text-sm text-red-650 dark:text-red-400 font-semibold">
+                <AlertTriangle className="w-4 h-4" />
+                {selectedQuestionIds.length} question{selectedQuestionIds.length !== 1 ? 's' : ''} selected
+              </div>
+              <div className="flex items-center gap-2">
+                <Button
+                  size="sm"
+                  variant="danger"
+                  icon={Trash2}
+                  onClick={handleBulkDeleteQuestions}
+                >
+                  Delete Selected
+                </Button>
+              </div>
+            </motion.div>
+          )}
+
+          {/* Questions Table */}
+          <div className="bg-white/80 dark:bg-slate-800/80 backdrop-blur-sm rounded-2xl border border-slate-200/50 dark:border-slate-700/50 shadow-sm overflow-hidden">
+            <div className="p-4 border-b border-slate-200/50 dark:border-slate-700/50 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
+              <div className="relative flex-1 max-w-md">
+                <Search className="absolute left-3.5 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400" />
+                <input
+                  type="text"
+                  placeholder="Search questions by title, author, or category..."
+                  value={questionSearch}
+                  onChange={(e) => setQuestionSearch(e.target.value)}
+                  className="w-full pl-10 pr-4 py-2 text-sm rounded-xl border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-900 text-slate-900 dark:text-white placeholder-slate-400 focus:ring-2 focus:ring-indigo-500 focus:border-transparent outline-none transition-all duration-300"
+                />
+              </div>
+              <div className="text-xs text-slate-400 font-medium self-end sm:self-center">
+                Showing {filteredQuestions.length} of {allQuestions.length} questions
+              </div>
+            </div>
+
+            <div className="overflow-x-auto">
+              <table className="w-full">
+                <thead>
+                  <tr className="border-b border-slate-200 dark:border-slate-700">
+                    <th className="text-left py-3 px-4 w-12">
+                      <input
+                        type="checkbox"
+                        checked={selectedQuestionIds.length === filteredQuestions.length && filteredQuestions.length > 0}
+                        onChange={() => {
+                          if (selectedQuestionIds.length === filteredQuestions.length) {
+                            setSelectedQuestionIds([])
+                          } else {
+                            setSelectedQuestionIds(filteredQuestions.map(q => q.id))
+                          }
+                        }}
+                        className="w-4 h-4 rounded border-slate-300 dark:border-slate-600 text-indigo-600 focus:ring-indigo-500 cursor-pointer"
+                      />
+                    </th>
+                    <th className="text-left py-3 px-4 text-xs font-semibold text-slate-500 dark:text-slate-400 uppercase tracking-wider">Title</th>
+                    <th className="text-left py-3 px-4 text-xs font-semibold text-slate-500 dark:text-slate-400 uppercase tracking-wider">Category</th>
+                    <th className="text-left py-3 px-4 text-xs font-semibold text-slate-500 dark:text-slate-400 uppercase tracking-wider">Asked By</th>
+                    <th className="text-left py-3 px-4 text-xs font-semibold text-slate-500 dark:text-slate-400 uppercase tracking-wider">Stats</th>
+                    <th className="text-left py-3 px-4 text-xs font-semibold text-slate-500 dark:text-slate-400 uppercase tracking-wider">Date</th>
+                    <th className="text-left py-3 px-4 text-xs font-semibold text-slate-500 dark:text-slate-400 uppercase tracking-wider w-20">Actions</th>
+                  </tr>
+                </thead>
+                <tbody className="divide-y divide-slate-100 dark:divide-slate-800">
+                  {loading && allQuestions.length === 0 ? (
+                    <tr>
+                      <td colSpan="7" className="text-center py-12 text-slate-400">
+                        <RefreshCw className="w-8 h-8 mx-auto mb-2 animate-spin opacity-50" />
+                        <p className="text-sm">Loading questions...</p>
+                      </td>
+                    </tr>
+                  ) : filteredQuestions.length === 0 ? (
+                    <tr>
+                      <td colSpan="7" className="text-center py-12 text-slate-400">
+                        <HelpCircle className="w-12 h-12 mx-auto mb-3 opacity-40 text-slate-450" />
+                        <p className="text-lg font-medium">No questions found</p>
+                        <p className="text-sm mt-1">Try resetting search query.</p>
+                      </td>
+                    </tr>
+                  ) : (
+                    filteredQuestions.map((q, index) => (
+                      <motion.tr
+                        key={q.id}
+                        initial={{ opacity: 0 }}
+                        animate={{ opacity: 1 }}
+                        transition={{ delay: index * 0.02 }}
+                        className="hover:bg-slate-50 dark:hover:bg-slate-800/50 transition-colors"
+                      >
+                        <td className="py-3 px-4">
+                          <input
+                            type="checkbox"
+                            checked={selectedQuestionIds.includes(q.id)}
+                            onChange={() => {
+                              setSelectedQuestionIds(prev =>
+                                prev.includes(q.id) ? prev.filter(x => x !== q.id) : [...prev, q.id]
+                              )
+                            }}
+                            className="w-4 h-4 rounded border-slate-300 dark:border-slate-600 text-indigo-600 focus:ring-indigo-500 cursor-pointer"
+                          />
+                        </td>
+                        <td className="py-3 px-4">
+                          <Link
+                            to={`/question/${q.id}`}
+                            className="text-sm font-semibold text-indigo-650 hover:text-indigo-750 dark:text-indigo-400 dark:hover:text-indigo-300 transition-colors line-clamp-1 max-w-[280px]"
+                          >
+                            {q.title}
+                          </Link>
+                          <p className="text-xs text-slate-400 line-clamp-1 max-w-[280px] mt-0.5">{q.description}</p>
+                        </td>
+                        <td className="py-3 px-4">
+                          <span className="inline-flex items-center px-2.5 py-0.5 rounded-md text-xs font-semibold bg-zinc-100 dark:bg-zinc-800 text-zinc-700 dark:text-zinc-300 border border-zinc-200/50 dark:border-zinc-700/50">
+                            {q.category}
+                          </span>
+                        </td>
+                        <td className="py-3 px-4">
+                          <div className="flex items-center gap-2">
+                            <Avatar src={q.users?.avatar} name={q.users?.name || 'User'} size="sm" />
+                            <span className="text-sm text-slate-600 dark:text-slate-400 truncate max-w-[110px]">
+                              {q.users?.name || 'Anonymous'}
+                            </span>
+                          </div>
+                        </td>
+                        <td className="py-3 px-4">
+                          <div className="flex flex-col gap-0.5 text-xs text-slate-500 dark:text-slate-400 font-medium">
+                            <span className="flex items-center gap-1.5"><MessageCircle className="w-3.5 h-3.5" />{q.answer_count || 0} answers</span>
+                            <span className="flex items-center gap-1.5"><Eye className="w-3.5 h-3.5" />{q.views || 0} views</span>
+                          </div>
+                        </td>
+                        <td className="py-3 px-4 text-sm text-slate-400 whitespace-nowrap">
+                          {timeAgo(q.created_at)}
+                        </td>
+                        <td className="py-3 px-4">
+                          <button
+                            onClick={() => handleDeleteQuestion(q.id)}
+                            className="p-1.5 rounded-lg hover:bg-red-50 dark:hover:bg-red-900/30 text-red-500 transition-colors cursor-pointer"
+                            title="Delete Question"
+                          >
+                            <Trash2 className="w-4 h-4" />
+                          </button>
+                        </td>
+                      </motion.tr>
+                    ))
+                  )}
+                </tbody>
+              </table>
+            </div>
+          </div>
+        </>
+      ) : (
+        <>
+          {/* Gamification Management Tab */}
+          {/* Leaderboard Analytics */}
+          <div className="grid grid-cols-1 sm:grid-cols-3 gap-6 mb-8">
+            <motion.div
+              initial={{ opacity: 0, y: 15 }}
+              animate={{ opacity: 1, y: 0 }}
+              className="bg-white/80 dark:bg-slate-800/80 backdrop-blur-sm rounded-2xl border border-slate-200/50 dark:border-slate-700/50 p-5 shadow-sm"
+            >
+              <div className="flex items-center justify-between mb-3">
+                <div className="p-2.5 rounded-xl bg-indigo-500/10 dark:bg-indigo-900/20">
+                  <Coins className="w-5 h-5 text-indigo-600 dark:text-indigo-400" />
+                </div>
+              </div>
+              <p className="text-2xl font-bold text-slate-800 dark:text-white">
+                {analytics?.totalReputationPoints?.toLocaleString() || 0}
+              </p>
+              <p className="text-sm text-slate-500 dark:text-slate-400 mt-1">Total Reputation Points</p>
+            </motion.div>
+
+            <motion.div
+              initial={{ opacity: 0, y: 15 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ delay: 0.1 }}
+              className="bg-white/80 dark:bg-slate-800/80 backdrop-blur-sm rounded-2xl border border-slate-200/50 dark:border-slate-700/50 p-5 shadow-sm"
+            >
+              <div className="flex items-center justify-between mb-3">
+                <div className="p-2.5 rounded-xl bg-purple-500/10 dark:bg-purple-900/20">
+                  <Award className="w-5 h-5 text-purple-600 dark:text-purple-400" />
+                </div>
+              </div>
+              <p className="text-2xl font-bold text-slate-800 dark:text-white">
+                {analytics?.totalEarnedBadges?.toLocaleString() || 0}
+              </p>
+              <p className="text-sm text-slate-505 dark:text-slate-400 mt-1">Total Earned Badges</p>
+            </motion.div>
+
+            <motion.div
+              initial={{ opacity: 0, y: 15 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ delay: 0.2 }}
+              className="bg-white/80 dark:bg-slate-800/80 backdrop-blur-sm rounded-2xl border border-slate-200/50 dark:border-slate-700/50 p-5 shadow-sm"
+            >
+              <div className="flex items-center justify-between mb-3">
+                <div className="p-2.5 rounded-xl bg-amber-500/10 dark:bg-amber-900/20">
+                  <Trophy className="w-5 h-5 text-amber-600 dark:text-amber-400" />
+                </div>
+              </div>
+              {analytics?.topContributor ? (
+                <div className="flex items-center gap-3">
+                  <Avatar src={analytics.topContributor.avatar} name={analytics.topContributor.name} size="sm" />
+                  <div className="min-w-0">
+                    <p className="text-sm font-bold text-slate-850 dark:text-zinc-150 truncate max-w-[140px]">
+                      {analytics.topContributor.name}
+                    </p>
+                    <p className="text-xs text-slate-400 font-medium truncate">
+                      {analytics.topContributor.reputation_points} reputation
+                    </p>
+                  </div>
+                </div>
+              ) : (
+                <p className="text-sm text-slate-400">No contributors yet</p>
+              )}
+              <p className="text-sm text-slate-505 dark:text-slate-400 mt-1">Top Contributor</p>
+            </motion.div>
+          </div>
+
+          {/* Gamification Split Grid */}
+          <div className="grid grid-cols-1 lg:grid-cols-12 gap-6 items-start">
+            {/* Left Column: Users List */}
+            <div className="lg:col-span-7 bg-white/80 dark:bg-slate-800/80 backdrop-blur-sm rounded-2xl border border-slate-200/50 dark:border-slate-700/50 shadow-sm overflow-hidden">
+              <div className="p-4 border-b border-slate-200/50 dark:border-slate-700/50 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
+                <div className="relative flex-1 max-w-md">
+                  <Search className="absolute left-3.5 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400" />
+                  <input
+                    type="text"
+                    placeholder="Search users by name or email..."
+                    value={userSearch}
+                    onChange={(e) => setUserSearch(e.target.value)}
+                    className="w-full pl-10 pr-4 py-2 text-sm rounded-xl border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-900 text-slate-900 dark:text-white placeholder-slate-400 focus:ring-2 focus:ring-indigo-500 focus:border-transparent outline-none transition-all duration-300"
+                  />
+                </div>
+                <div className="text-xs text-slate-400 font-medium">
+                  Showing {users.filter(u => {
+                    const searchLower = userSearch.toLowerCase()
+                    return u.name?.toLowerCase().includes(searchLower) || u.email?.toLowerCase().includes(searchLower)
+                  }).length} users
+                </div>
+              </div>
+
+              <div className="overflow-x-auto">
+                <table className="w-full">
+                  <thead>
+                    <tr className="border-b border-slate-200 dark:border-slate-700 text-left">
+                      <th className="py-3 px-4 text-xs font-semibold text-slate-500 dark:text-slate-400 uppercase tracking-wider">User</th>
+                      <th className="py-3 px-4 text-xs font-semibold text-slate-500 dark:text-slate-400 uppercase tracking-wider text-right">Reputation</th>
+                      <th className="py-3 px-4 text-xs font-semibold text-slate-500 dark:text-slate-400 uppercase tracking-wider">Badges</th>
+                      <th className="py-3 px-4 text-xs font-semibold text-slate-500 dark:text-slate-400 uppercase tracking-wider w-24">Actions</th>
+                    </tr>
+                  </thead>
+                  <tbody className="divide-y divide-slate-100 dark:divide-slate-800">
+                    {loadingGamification && users.length === 0 ? (
+                      <tr>
+                        <td colSpan="4" className="text-center py-12 text-slate-400">
+                          <RefreshCw className="w-8 h-8 mx-auto mb-2 animate-spin opacity-50" />
+                          <p className="text-sm">Loading users...</p>
+                        </td>
+                      </tr>
+                    ) : users.filter(u => {
+                      const searchLower = userSearch.toLowerCase()
+                      return u.name?.toLowerCase().includes(searchLower) || u.email?.toLowerCase().includes(searchLower)
+                    }).length === 0 ? (
+                      <tr>
+                        <td colSpan="4" className="text-center py-12 text-slate-400">
+                          <User className="w-12 h-12 mx-auto mb-3 opacity-40" />
+                          <p className="text-lg font-medium">No users found</p>
+                        </td>
+                      </tr>
+                    ) : (
+                      users.filter(u => {
+                        const searchLower = userSearch.toLowerCase()
+                        return u.name?.toLowerCase().includes(searchLower) || u.email?.toLowerCase().includes(searchLower)
+                      }).map((u) => {
+                        const rep = u.reputation_points || 0
+                        let repBadgeLabel = 'New Member'
+                        let repBadgeColor = 'text-slate-455'
+                        if (rep >= 2000) {
+                          repBadgeLabel = 'Elite Expert'
+                          repBadgeColor = 'text-purple-500 dark:text-purple-400 font-bold'
+                        } else if (rep >= 1000) {
+                          repBadgeLabel = 'Community Champion'
+                          repBadgeColor = 'text-indigo-500 dark:text-indigo-400 font-bold'
+                        } else if (rep >= 500) {
+                          repBadgeLabel = 'Expert Contributor'
+                          repBadgeColor = 'text-yellow-650 dark:text-yellow-450 font-bold'
+                        } else if (rep >= 100) {
+                          repBadgeLabel = 'Knowledge Sharer'
+                          repBadgeColor = 'text-slate-600 dark:text-slate-350 font-bold'
+                        } else if (rep >= 10) {
+                          repBadgeLabel = 'Beginner Contributor'
+                          repBadgeColor = 'text-amber-600 dark:text-amber-500 font-bold'
+                        }
+
+                        return (
+                          <tr key={u.id} className="hover:bg-slate-50 dark:hover:bg-slate-800/50 transition-colors">
+                            <td className="py-3.5 px-4">
+                              <div className="flex items-center gap-3">
+                                <Avatar src={u.avatar} name={u.name || 'User'} size="sm" />
+                                <div className="min-w-0">
+                                  <p className="text-sm font-semibold text-slate-800 dark:text-white truncate max-w-[150px]">{u.name || 'Anonymous'}</p>
+                                  <p className="text-xs text-slate-400 truncate max-w-[150px]">{u.email}</p>
+                                </div>
+                              </div>
+                            </td>
+                            <td className="py-3.5 px-4 text-right">
+                              <p className="text-sm font-black text-indigo-600 dark:text-indigo-400">{rep}</p>
+                              <p className={`text-[10px] uppercase tracking-wider mt-0.5 ${repBadgeColor}`}>{repBadgeLabel}</p>
+                            </td>
+                            <td className="py-3.5 px-4">
+                              <div className="flex flex-wrap gap-1 max-w-[180px]">
+                                {u.user_badges && u.user_badges.length > 0 ? (
+                                  u.user_badges.slice(0, 4).map((ub) => {
+                                    const b = ub.badges
+                                    if (!b) return null
+                                    const Icon = badgeIcons[b.icon] || Award
+                                    const tierColor = badgeTierColors[b.badge_type] || badgeTierColors.bronze
+                                    return (
+                                      <div
+                                        key={ub.id}
+                                        className={`p-1 rounded-lg border ${tierColor}`}
+                                        title={`${b.badge_name}: ${b.description}`}
+                                      >
+                                        <Icon className="w-3.5 h-3.5" />
+                                      </div>
+                                    )
+                                  })
+                                ) : (
+                                  <span className="text-xs text-slate-405">None</span>
+                                )}
+                                {u.user_badges && u.user_badges.length > 4 && (
+                                  <span className="text-[10px] text-slate-405 font-bold self-center">
+                                    +{u.user_badges.length - 4}
+                                  </span>
+                                )}
+                              </div>
+                            </td>
+                            <td className="py-3.5 px-4">
+                              <div className="flex items-center gap-1.5">
+                                <button
+                                  onClick={() => setReputationModal({ open: true, userId: u.id, username: u.name, points: '' })}
+                                  className="p-1.5 rounded-lg hover:bg-indigo-50 dark:hover:bg-indigo-900/30 text-indigo-600 dark:text-indigo-400 transition-colors cursor-pointer"
+                                  title="Adjust Reputation"
+                                >
+                                  <Coins className="w-4 h-4" />
+                                </button>
+                                <button
+                                  onClick={() => setBadgeModal({ open: true, userId: u.id, username: u.name, userBadges: u.user_badges || [] })}
+                                  className="p-1.5 rounded-lg hover:bg-purple-50 dark:hover:bg-purple-900/30 text-purple-600 dark:text-purple-400 transition-colors cursor-pointer"
+                                  title="Manage Badges"
+                                >
+                                  <Award className="w-4 h-4" />
+                                </button>
+                              </div>
+                            </td>
+                          </tr>
+                        )
+                      })
+                    )}
+                  </tbody>
+                </table>
+              </div>
+            </div>
+
+            {/* Right Column: Reputation History Logs */}
+            <div className="lg:col-span-5 bg-white/80 dark:bg-slate-800/80 backdrop-blur-sm rounded-2xl border border-slate-200/50 dark:border-slate-700/50 shadow-sm overflow-hidden">
+              <div className="p-4 border-b border-slate-200/50 dark:border-slate-700/50">
+                <h3 className="text-sm font-bold text-slate-850 dark:text-zinc-100 flex items-center gap-2">
+                  <TrendingUp className="w-4 h-4 text-indigo-500" />
+                  Reputation Log Feed
+                </h3>
+                <p className="text-xs text-slate-400 mt-0.5">Most recent community transaction logs</p>
+              </div>
+
+              <div className="overflow-y-auto max-h-[500px]">
+                {loadingGamification && reputationLogs.length === 0 ? (
+                  <div className="text-center py-12 text-slate-400">
+                    <RefreshCw className="w-6 h-6 mx-auto mb-2 animate-spin opacity-50" />
+                    <p className="text-xs">Loading logs...</p>
+                  </div>
+                ) : reputationLogs.length === 0 ? (
+                  <div className="text-center py-12 text-slate-400 text-xs font-medium">
+                    No reputation logs recorded yet.
+                  </div>
+                ) : (
+                  <div className="divide-y divide-slate-100 dark:divide-slate-800">
+                    {reputationLogs.map((log) => {
+                      const isPositive = log.points_awarded >= 0
+                      return (
+                        <div key={log.id} className="p-3.5 hover:bg-slate-50/50 dark:hover:bg-slate-900/25 transition-colors flex items-start justify-between gap-3 text-xs">
+                          <div className="flex items-center gap-2.5 min-w-0">
+                            <Avatar src={log.users?.avatar} name={log.users?.name || 'User'} size="xs" />
+                            <div className="min-w-0">
+                              <p className="font-bold text-slate-850 dark:text-zinc-150 truncate max-w-[130px]">
+                                {log.users?.name || 'Anonymous'}
+                              </p>
+                              <p className="text-[10px] text-slate-400 mt-0.5">
+                                {formatActionType(log.action_type)}
+                              </p>
+                              <p className="text-[9px] text-slate-500 font-mono mt-0.5 truncate max-w-[130px]" title={log.reference_id}>
+                                Ref: {log.reference_id}
+                              </p>
+                            </div>
+                          </div>
+                          <div className="flex flex-col items-end gap-1.5 shrink-0">
+                            <span className={`font-black shrink-0 px-2 py-0.5 rounded text-[10px] border ${
+                              isPositive 
+                                ? 'text-emerald-600 bg-emerald-500/10 border-emerald-500/15' 
+                                : 'text-rose-500 bg-rose-500/10 border-rose-500/15'
+                            }`}>
+                              {isPositive ? `+${log.points_awarded}` : log.points_awarded}
+                            </span>
+                            <span className="text-[9px] text-slate-400">
+                              {new Date(log.created_at).toLocaleDateString()}
+                            </span>
+                          </div>
+                        </div>
+                      )
+                    })}
+                  </div>
+                )}
+              </div>
+            </div>
+          </div>
+        </>
+      )}
 
       {/* Admin Note Modal */}
       <Modal
@@ -247,6 +916,105 @@ export default function AdminDashboard() {
           </div>
         </div>
       </Modal>
+
+      {/* Reputation Points Adjustment Modal */}
+      <Modal
+        isOpen={reputationModal.open}
+        onClose={() => setReputationModal({ open: false, userId: null, username: '', points: '' })}
+        title={`Adjust Reputation: ${reputationModal.username}`}
+        size="sm"
+      >
+        <div className="space-y-4">
+          <div>
+            <label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1.5">
+              Adjustment Amount
+            </label>
+            <input
+              type="number"
+              value={reputationModal.points}
+              onChange={(e) => setReputationModal(prev => ({ ...prev, points: e.target.value }))}
+              placeholder="e.g. 10 or -5"
+              className="w-full px-4 py-3 rounded-xl border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-800 text-slate-900 dark:text-white placeholder-slate-450 focus:ring-2 focus:ring-indigo-500 focus:border-transparent outline-none transition-all duration-300"
+            />
+            <p className="text-xs text-slate-400 mt-1.5 leading-normal">
+              Enter a positive number to award reputation points, or a negative number to deduct.
+            </p>
+          </div>
+          <div className="flex justify-end gap-2">
+            <Button
+              variant="ghost"
+              onClick={() => setReputationModal({ open: false, userId: null, username: '', points: '' })}
+            >
+              Cancel
+            </Button>
+            <Button
+              variant="primary"
+              onClick={handleAdjustReputation}
+            >
+              Submit
+            </Button>
+          </div>
+        </div>
+      </Modal>
+
+      {/* Badge Management Modal */}
+      <Modal
+        isOpen={badgeModal.open}
+        onClose={() => setBadgeModal({ open: false, userId: null, username: '', userBadges: [] })}
+        title={`Manage Badges: ${badgeModal.username}`}
+        size="md"
+      >
+        <div className="space-y-4 max-h-[60vh] overflow-y-auto pr-1">
+          {availableBadges.length === 0 ? (
+            <p className="text-center py-6 text-slate-400 text-sm">No badges available.</p>
+          ) : (
+            <div className="divide-y divide-slate-100 dark:divide-slate-800">
+              {availableBadges.map((badge) => {
+                const isEarned = badgeModal.userBadges.some(ub => ub.badge_id === badge.id)
+                const Icon = badgeIcons[badge.icon] || Award
+                const tierColor = badgeTierColors[badge.badge_type] || badgeTierColors.bronze
+                
+                return (
+                  <div key={badge.id} className="flex items-center justify-between py-3 first:pt-0 last:pb-0 gap-4">
+                    <div className="flex items-center gap-3">
+                      <div className={`p-2 rounded-xl border ${tierColor} shrink-0`}>
+                        <Icon className="w-5 h-5" />
+                      </div>
+                      <div>
+                        <div className="flex items-center gap-2">
+                          <p className="text-sm font-bold text-slate-800 dark:text-zinc-100">{badge.badge_name}</p>
+                          <span className={`text-[9px] font-extrabold uppercase tracking-wider px-1.5 py-0.5 rounded border ${tierColor}`}>
+                            {badge.badge_type}
+                          </span>
+                        </div>
+                        <p className="text-xs text-slate-450 mt-0.5 leading-relaxed">{badge.description}</p>
+                      </div>
+                    </div>
+                    <div>
+                      {isEarned ? (
+                        <Button
+                          size="sm"
+                          variant="danger"
+                          onClick={() => handleToggleBadge(badge.id, true)}
+                        >
+                          Revoke
+                        </Button>
+                      ) : (
+                        <button
+                          onClick={() => handleToggleBadge(badge.id, false)}
+                          className="px-3.5 py-1.5 text-xs font-semibold rounded-lg bg-emerald-600 hover:bg-emerald-500 text-white shadow-sm hover:shadow transition-all duration-200 cursor-pointer active:scale-95"
+                        >
+                          Award
+                        </button>
+                      )}
+                    </div>
+                  </div>
+                )
+              })}
+            </div>
+          )}
+        </div>
+      </Modal>
     </motion.div>
   )
 }
diff --git a/src/pages/AskQuestionPage.jsx b/src/pages/AskQuestionPage.jsx
index 61f7721..6b4abf1 100644
--- a/src/pages/AskQuestionPage.jsx
+++ b/src/pages/AskQuestionPage.jsx
@@ -22,14 +22,10 @@ export default function AskQuestionPage() {
   const navigate = useNavigate()
   const { createQuestion, loading } = useQuestions()
   const { showToast } = useToast()
-
   const [showDuplicates, setShowDuplicates] = useState(false)
   const [duplicates, setDuplicates] = useState([])
   const [pendingData, setPendingData] = useState(null)
 
-  const [checkingDuplicates, setCheckingDuplicates] =
-    useState(false)
-
   const checkDuplicates = useCallback(async (data) => {
     try {
       const { data: existingQuestions } = await supabase
@@ -37,33 +33,12 @@ export default function AskQuestionPage() {
         .select('id, title, answers(id, verification_status)')
         .eq('status', 'active')
 
-      if (
-        existingQuestions &&
-        existingQuestions.length > 0
-      ) {
-
+      if (existingQuestions && existingQuestions.length > 0) {
         const enriched = existingQuestions.map(q => ({
           ...q,
           answer_count: (q.answers || []).length,
         }))
-
-        setCheckingDuplicates(true)
-
-        let dupes = []
-
-        try {
-
-          dupes = await findDuplicates(
-            enriched,
-            data.title
-          )
-
-        } finally {
-
-          setCheckingDuplicates(false)
-
-        }
-
+        const dupes = findDuplicates(enriched, data.title)
         if (dupes.length > 0) {
           setDuplicates(dupes)
           setPendingData(data)
@@ -71,18 +46,8 @@ export default function AskQuestionPage() {
           return true
         }
       }
-
       return false
-
-    } catch (error) {
-
-      console.error(
-        'Duplicate check failed:',
-        error
-      )
-
-      setCheckingDuplicates(false)
-
+    } catch {
       return false
     }
   }, [])
@@ -90,35 +55,15 @@ export default function AskQuestionPage() {
   const submitQuestion = useCallback(async (data) => {
     try {
       const question = await createQuestion(data)
-
-      showToast(
-        'Question posted successfully!',
-        'success'
-      )
-
+      showToast('Question posted successfully!', 'success')
       navigate(`/question/${question.id}`)
-
     } catch (err) {
-
-      showToast(
-        err.message ||
-        'Failed to post question',
-        'error'
-      )
-
+      showToast(err.message || 'Failed to post question', 'error')
     }
   }, [createQuestion, navigate, showToast])
 
   const handleSubmit = async (data) => {
-
-    showToast(
-      'Checking for similar questions...',
-      'info'
-    )
-
-    const hasDuplicates =
-      await checkDuplicates(data)
-
+    const hasDuplicates = await checkDuplicates(data)
     if (!hasDuplicates) {
       await submitQuestion(data)
     }
@@ -126,7 +71,6 @@ export default function AskQuestionPage() {
 
   const handleContinueAnyway = async () => {
     setShowDuplicates(false)
-
     if (pendingData) {
       await submitQuestion(pendingData)
     }
@@ -140,53 +84,34 @@ export default function AskQuestionPage() {
       transition={{ duration: 0.3 }}
     >
       <div className="max-w-5xl mx-auto">
-
         <div className="flex items-center gap-3 mb-8">
           <div className="p-2.5 bg-indigo-50 dark:bg-indigo-900/30 rounded-xl">
             <HelpCircle className="w-6 h-6 text-indigo-600 dark:text-indigo-400" />
           </div>
-
           <div>
-            <h1 className="text-2xl font-bold text-slate-800 dark:text-white">
-              Ask a Question
-            </h1>
-
-            <p className="text-sm text-slate-500 dark:text-slate-400">
-              Get help from the community
-            </p>
+            <h1 className="text-2xl font-bold text-slate-800 dark:text-white">Ask a Question</h1>
+            <p className="text-sm text-slate-500 dark:text-slate-400">Get help from the community</p>
           </div>
         </div>
 
         <div className="grid grid-cols-1 lg:grid-cols-12 gap-8">
-
+          {/* Form */}
           <div className="lg:col-span-8">
             <Card className="p-6 md:p-8">
-
-              <QuestionForm
-                onSubmit={handleSubmit}
-                loading={
-                  loading ||
-                  checkingDuplicates
-                }
-              />
-
+              <QuestionForm onSubmit={handleSubmit} loading={loading} />
             </Card>
           </div>
 
+          {/* Tips Sidebar */}
           <div className="lg:col-span-4">
             <Card className="p-5 sticky top-24">
-
               <h3 className="text-sm font-semibold text-slate-800 dark:text-white mb-4 flex items-center gap-2">
                 <Lightbulb className="w-4 h-4 text-amber-500" />
                 Tips for a great question
               </h3>
-
               <div className="space-y-3">
-
                 {tips.map((tip, index) => {
-
                   const Icon = tip.icon
-
                   return (
                     <motion.div
                       key={index}
@@ -196,22 +121,17 @@ export default function AskQuestionPage() {
                       className="flex items-start gap-2.5"
                     >
                       <Icon className="w-4 h-4 text-indigo-500 mt-0.5 shrink-0" />
-
-                      <span className="text-sm text-slate-600 dark:text-slate-400">
-                        {tip.text}
-                      </span>
+                      <span className="text-sm text-slate-600 dark:text-slate-400">{tip.text}</span>
                     </motion.div>
                   )
                 })}
-
               </div>
-
             </Card>
           </div>
-
         </div>
       </div>
 
+      {/* Duplicate Warning Modal */}
       <DuplicateWarning
         isOpen={showDuplicates}
         onClose={() => setShowDuplicates(false)}
diff --git a/src/pages/FaqPage.jsx b/src/pages/FaqPage.jsx
index 3d3ccbb..8f97284 100644
--- a/src/pages/FaqPage.jsx
+++ b/src/pages/FaqPage.jsx
@@ -12,10 +12,8 @@ import {
   HelpCircle,
   ArrowRight,
   Sparkles,
-} from 'lucide-react';import { useAuth } from '@/hooks/useAuth';
-import { useTranslation } from '@/hooks/useTranslation';
-import TranslationButton from '@/components/translation/TranslationButton';
-import TranslationBadge from '@/components/translation/TranslationBadge';
+} from 'lucide-react';
+
 const faqCategories = [
   {
     id: 1,
@@ -137,8 +135,6 @@ export default function FaqPage() {
     }
   }, [id]);
 
-  const { user } = useAuth();
-  const preferredLanguage = user?.preferred_language || 'en';
   const currentCategory = faqCategories.find((cat) => cat.id === activeCategory) || faqCategories[0];
   
   // Filter questions across current category or all categories if searching
@@ -155,120 +151,6 @@ export default function FaqPage() {
       )
     : currentCategory.questions;
 
-  function FaqItem({ item, idx, isExpanded, onToggle, showLink, activeCategory }) {
-    const categoryId = item.categoryId ?? activeCategory
-    const questionTranslation = useTranslation({
-      contentId: `faq-question-${categoryId}-${idx}`,
-      content: item.q,
-      autoTargetLanguage: preferredLanguage,
-      autoTranslate: Boolean(user?.preferred_language),
-    })
-    const answerTranslation = useTranslation({
-      contentId: `faq-answer-${categoryId}-${idx}`,
-      content: item.a,
-      autoTargetLanguage: preferredLanguage,
-      autoTranslate: Boolean(user?.preferred_language),
-    })
-
-    const handleTranslate = (languageCode) => {
-      if (languageCode === questionTranslation.originalLanguage) {
-        questionTranslation.resetTranslation()
-        answerTranslation.resetTranslation()
-        return
-      }
-      if (languageCode !== questionTranslation.currentLanguage) {
-        questionTranslation.translate(languageCode)
-        answerTranslation.translate(languageCode)
-      }
-    }
-
-    const handleReset = () => {
-      questionTranslation.resetTranslation()
-      answerTranslation.resetTranslation()
-    }
-
-    return (
-      <div
-        className={`border rounded-xl transition-all duration-200 ${
-          isExpanded
-            ? 'border-indigo-500/30 bg-indigo-50/20 dark:bg-indigo-950/10 shadow-sm'
-            : 'border-slate-100 dark:border-slate-700/50 bg-white/40 dark:bg-slate-800/40 hover:bg-slate-50/50 dark:hover:bg-slate-700/20 hover:border-slate-200 dark:hover:border-slate-600'
-        }`}
-      >
-        <button
-          onClick={onToggle}
-          className="w-full flex items-center justify-between text-left p-4 md:p-5 cursor-pointer select-none"
-        >
-          <div className="flex-1 pr-4">
-            {isSearching && item.categoryName && (
-              <span className="inline-block text-[10px] font-bold text-indigo-600 dark:text-indigo-400 bg-indigo-50 dark:bg-indigo-950/50 px-2 py-0.5 rounded-full mb-1 border border-indigo-500/10">
-                {item.categoryName}
-              </span>
-            )}
-            <h4 className={`text-sm md:text-base font-bold transition-colors ${
-              isExpanded ? 'text-indigo-600 dark:text-indigo-400' : 'text-slate-800 dark:text-slate-100'
-            }`}>
-              {questionTranslation.displayText}
-            </h4>
-          </div>
-          <ChevronDown
-            className={`w-5 h-5 text-slate-400 shrink-0 transition-transform duration-300 ${
-              isExpanded ? 'rotate-180 text-indigo-500' : ''
-            }`}
-          />
-        </button>
-
-        <AnimatePresence initial={false}>
-          {isExpanded && (
-            <motion.div
-              initial={{ height: 0, opacity: 0 }}
-              animate={{ height: 'auto', opacity: 1 }}
-              exit={{ height: 0, opacity: 0 }}
-              transition={{ duration: 0.25, ease: 'easeInOut' }}
-              className="overflow-hidden"
-            >
-              <div className="px-5 pb-5 pt-1 border-t border-slate-100 dark:border-slate-700/40 text-xs md:text-sm text-slate-600 dark:text-slate-300 leading-relaxed space-y-4">
-                <div className="flex items-start justify-between gap-3">
-                  {questionTranslation.isTranslated && (
-                    <TranslationBadge
-                      originalLanguage={questionTranslation.originalLanguage}
-                      targetLanguage={questionTranslation.currentLanguage}
-                    />
-                  )}
-                  <TranslationButton
-                    originalLanguage={questionTranslation.originalLanguage}
-                    currentLanguage={questionTranslation.currentLanguage}
-                    isTranslated={questionTranslation.isTranslated}
-                    status={questionTranslation.status || answerTranslation.status}
-                    error={questionTranslation.error || answerTranslation.error}
-                    onTranslate={handleTranslate}
-                    onReset={handleReset}
-                  />
-                </div>
-
-                <p className="text-slate-600 dark:text-slate-300 whitespace-pre-wrap">{answerTranslation.displayText}</p>
-
-                {showLink && item.categoryId && (
-                  <Link
-                    to={`/faq/${item.categoryId}`}
-                    onClick={() => {
-                      setActiveCategory(item.categoryId)
-                      setSearchQuery('')
-                      setExpandedIndex(null)
-                    }}
-                    className="inline-flex items-center gap-1 text-[11px] font-bold text-indigo-500 hover:text-indigo-600 hover:underline pt-2"
-                  >
-                    View entire category <ArrowRight className="w-3 h-3" />
-                  </Link>
-                )}
-              </div>
-            </motion.div>
-          )}
-        </AnimatePresence>
-      </div>
-    )
-  }
-
   return (
     <motion.main
       initial={{ opacity: 0, y: 15 }}
@@ -443,17 +325,74 @@ export default function FaqPage() {
               </div>
             ) : (
               <div className="space-y-3">
-                {filteredQuestions.map((item, idx) => (
-                  <FaqItem
-                    key={idx}
-                    item={item}
-                    idx={idx}
-                    isExpanded={expandedIndex === idx}
-                    onToggle={() => setExpandedIndex(expandedIndex === idx ? null : idx)}
-                    showLink={isSearching && item.categoryId}
-                    activeCategory={activeCategory}
-                  />
-                ))}
+                {filteredQuestions.map((item, idx) => {
+                  const isExpanded = expandedIndex === idx;
+                  
+                  return (
+                    <div
+                      key={idx}
+                      className={`border rounded-xl transition-all duration-200 ${
+                        isExpanded
+                          ? 'border-indigo-500/30 bg-indigo-50/20 dark:bg-indigo-950/10 shadow-sm'
+                          : 'border-slate-100 dark:border-slate-700/50 bg-white/40 dark:bg-slate-800/40 hover:bg-slate-50/50 dark:hover:bg-slate-700/20 hover:border-slate-200 dark:hover:border-slate-600'
+                      }`}
+                    >
+                      {/* Accordion Trigger */}
+                      <button
+                        onClick={() => setExpandedIndex(isExpanded ? null : idx)}
+                        className="w-full flex items-center justify-between text-left p-4 md:p-5 cursor-pointer select-none"
+                      >
+                        <div className="flex-1 pr-4">
+                          {isSearching && item.categoryName && (
+                            <span className="inline-block text-[10px] font-bold text-indigo-600 dark:text-indigo-400 bg-indigo-50 dark:bg-indigo-950/50 px-2 py-0.5 rounded-full mb-1 border border-indigo-500/10">
+                              {item.categoryName}
+                            </span>
+                          )}
+                          <h4 className={`text-sm md:text-base font-bold transition-colors ${
+                            isExpanded ? 'text-indigo-600 dark:text-indigo-400' : 'text-slate-800 dark:text-slate-100'
+                          }`}>
+                            {item.q}
+                          </h4>
+                        </div>
+                        <ChevronDown
+                          className={`w-5 h-5 text-slate-400 shrink-0 transition-transform duration-300 ${
+                            isExpanded ? 'rotate-180 text-indigo-500' : ''
+                          }`}
+                        />
+                      </button>
+
+                      {/* Accordion Expandable Content */}
+                      <AnimatePresence initial={false}>
+                        {isExpanded && (
+                          <motion.div
+                            initial={{ height: 0, opacity: 0 }}
+                            animate={{ height: 'auto', opacity: 1 }}
+                            exit={{ height: 0, opacity: 0 }}
+                            transition={{ duration: 0.25, ease: 'easeInOut' }}
+                            className="overflow-hidden"
+                          >
+                            <div className="px-5 pb-5 pt-1 border-t border-slate-100 dark:border-slate-700/40 text-xs md:text-sm text-slate-600 dark:text-slate-300 leading-relaxed space-y-2">
+                              <p>{item.a}</p>
+                              {isSearching && item.categoryId && (
+                                <Link
+                                  to={`/faq/${item.categoryId}`}
+                                  onClick={() => {
+                                    setActiveCategory(item.categoryId);
+                                    setSearchQuery('');
+                                    setExpandedIndex(null);
+                                  }}
+                                  className="inline-flex items-center gap-1 text-[11px] font-bold text-indigo-500 hover:text-indigo-600 hover:underline pt-2"
+                                >
+                                  View entire category <ArrowRight className="w-3 h-3" />
+                                </Link>
+                              )}
+                            </div>
+                          </motion.div>
+                        )}
+                      </AnimatePresence>
+                    </div>
+                  );
+                })}
               </div>
             )}
           </div>
diff --git a/src/pages/LeaderboardPage.jsx b/src/pages/LeaderboardPage.jsx
new file mode 100644
index 0000000..49a2d92
--- /dev/null
+++ b/src/pages/LeaderboardPage.jsx
@@ -0,0 +1,329 @@
+import { useState, useEffect } from 'react'
+import { motion, AnimatePresence } from 'framer-motion'
+import { 
+  Trophy, Award, HelpCircle, MessageCircle, Calendar, Clock, 
+  ArrowUp, ArrowDown, ChevronRight, User, Shield, Sparkles,
+  Crown
+} from 'lucide-react'
+import Card from '@/components/ui/Card'
+import Avatar from '@/components/ui/Avatar'
+import Button from '@/components/ui/Button'
+import { useAuth } from '@/hooks/useAuth'
+import { supabase } from '@/config/supabase'
+
+export default function LeaderboardPage() {
+  const { user } = useAuth()
+  const [timeframe, setTimeframe] = useState('all') // 'all', 'monthly', 'weekly'
+  const [leaderboard, setLeaderboard] = useState([])
+  const [loading, setLoading] = useState(false)
+
+  useEffect(() => {
+    fetchLeaderboard()
+  }, [timeframe])
+
+  const fetchLeaderboard = async () => {
+    setLoading(true)
+    try {
+      const { data, error } = await supabase.rpc('get_leaderboard', {
+        timeframe: timeframe
+      })
+
+      if (error) throw error
+      setLeaderboard(data || [])
+    } catch (err) {
+      console.error('Error fetching leaderboard:', err.message)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  // Slice podium winners (Top 3)
+  const podiumUsers = leaderboard.slice(0, 3)
+  // Rearrange for Podium layout: [Second, First, Third]
+  const podiumLayout = []
+  if (podiumUsers[1]) podiumLayout.push({ ...podiumUsers[1], position: 2 })
+  if (podiumUsers[0]) podiumLayout.push({ ...podiumUsers[0], position: 1 })
+  if (podiumUsers[2]) podiumLayout.push({ ...podiumUsers[2], position: 3 })
+
+  // Remaining users (4th onwards)
+  const listUsers = leaderboard.slice(3)
+
+  // Current user stats in leaderboard
+  const currentUserEntry = leaderboard.find(x => x.user_id === user?.id)
+
+  const timeframeLabels = {
+    all: 'All-Time Ranks',
+    monthly: 'Monthly Contributors',
+    weekly: 'Weekly Rising Stars'
+  }
+
+  return (
+    <motion.div
+      initial={{ opacity: 0, y: 15 }}
+      animate={{ opacity: 1, y: 0 }}
+      exit={{ opacity: 0 }}
+      transition={{ duration: 0.3 }}
+      className="max-w-5xl mx-auto space-y-8"
+    >
+      {/* Header & Filter Row */}
+      <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
+        <div>
+          <h1 className="text-3xl font-black text-slate-800 dark:text-white tracking-tight flex items-center gap-3">
+            <Trophy className="w-8 h-8 text-amber-500 animate-bounce" style={{ animationDuration: '3.5s' }} />
+            Community Leaderboard
+          </h1>
+          <p className="text-sm text-slate-500 dark:text-zinc-400 mt-1">
+            Rankings of members driving institutional knowledge sharing.
+          </p>
+        </div>
+
+        {/* Timeframe Filters */}
+        <div className="bg-slate-100/85 dark:bg-slate-900/60 p-1 border border-slate-200/50 dark:border-slate-800 rounded-2xl flex items-center gap-0.5 shadow-inner self-start sm:self-center">
+          {[
+            { id: 'all', label: 'All-Time' },
+            { id: 'monthly', label: 'Monthly' },
+            { id: 'weekly', label: 'Weekly' }
+          ].map((tab) => (
+            <button
+              key={tab.id}
+              onClick={() => setTimeframe(tab.id)}
+              className={`px-4 py-2 rounded-xl text-xs font-bold transition-all duration-200 cursor-pointer ${
+                timeframe === tab.id
+                  ? 'bg-white dark:bg-slate-800 text-indigo-600 dark:text-indigo-400 shadow-sm border border-slate-200/40 dark:border-slate-750/30'
+                  : 'text-slate-500 hover:text-slate-750 dark:hover:text-slate-350'
+              }`}
+            >
+              {tab.label}
+            </button>
+          ))}
+        </div>
+      </div>
+
+      {/* Loading state */}
+      {loading && leaderboard.length === 0 ? (
+        <div className="text-center py-20">
+          <div className="animate-spin rounded-full h-10 w-10 border-t-2 border-indigo-650 mx-auto" />
+          <p className="text-slate-505 mt-4 text-sm font-semibold">Gathering ranking data...</p>
+        </div>
+      ) : (
+        <>
+          {/* Highlight Panel for Current Logged-in User */}
+          {user && currentUserEntry && (
+            <Card className="p-4 bg-indigo-500/[0.03] dark:bg-indigo-500/[0.01] border-indigo-500/20 dark:border-purple-550/15 shadow-[0_0_15px_rgba(99,102,241,0.02)]">
+              <div className="flex flex-col sm:flex-row items-center justify-between gap-4">
+                <div className="flex items-center gap-3">
+                  <div className="w-10 h-10 rounded-xl bg-indigo-500/10 border border-indigo-500/25 flex items-center justify-center font-black text-indigo-600 dark:text-indigo-400 text-lg">
+                    #{currentUserEntry.rank}
+                  </div>
+                  <div>
+                    <p className="text-sm font-black text-slate-850 dark:text-zinc-150">
+                      Your Global Placement
+                    </p>
+                    <p className="text-xs text-slate-450 mt-0.5">
+                      You are in the top tier of institutional contributors!
+                    </p>
+                  </div>
+                </div>
+
+                <div className="flex items-center gap-6">
+                  <div className="text-center">
+                    <p className="text-sm font-black text-slate-800 dark:text-zinc-150">{currentUserEntry.reputation_points}</p>
+                    <p className="text-[9px] font-bold text-slate-400 uppercase tracking-wider">Reputation</p>
+                  </div>
+                  <div className="w-px h-6 bg-slate-200 dark:bg-slate-800" />
+                  <div className="text-center">
+                    <p className="text-sm font-black text-slate-800 dark:text-zinc-150">{currentUserEntry.total_badges}</p>
+                    <p className="text-[9px] font-bold text-slate-400 uppercase tracking-wider">Badges</p>
+                  </div>
+                  <div className="w-px h-6 bg-slate-200 dark:bg-slate-800" />
+                  <div className="text-center">
+                    <p className="text-sm font-black text-slate-800 dark:text-zinc-150">{currentUserEntry.answers_posted}</p>
+                    <p className="text-[9px] font-bold text-slate-400 uppercase tracking-wider">Verified Answers</p>
+                  </div>
+                </div>
+              </div>
+            </Card>
+          )}
+
+          {/* 3. Top 3 Podium Winners (Desktop layout) */}
+          {podiumUsers.length > 0 && (
+            <div className="grid grid-cols-3 gap-4 max-w-2xl mx-auto pt-6 items-end relative min-h-[300px]">
+              
+              {/* Podium blocks placement */}
+              {podiumLayout.map((p) => {
+                const isFirst = p.position === 1
+                const isSecond = p.position === 2
+                
+                // Styling details
+                const ringColor = isFirst 
+                  ? 'border-2 border-amber-400 shadow-[0_0_20px_rgba(245,158,11,0.35)]' 
+                  : isSecond 
+                  ? 'border-2 border-slate-300 shadow-[0_0_12px_rgba(148,163,184,0.2)]'
+                  : 'border border-amber-700 shadow-[0_0_8px_rgba(180,83,9,0.15)]'
+                
+                const heightClass = isFirst ? 'h-48' : isSecond ? 'h-36' : 'h-28'
+                
+                const blockBg = isFirst 
+                  ? 'bg-gradient-to-t from-amber-500/15 to-amber-500/5 border-amber-500/20' 
+                  : isSecond 
+                  ? 'bg-gradient-to-t from-slate-450/15 to-slate-450/5 border-slate-400/25'
+                  : 'bg-gradient-to-t from-amber-800/15 to-amber-800/5 border-amber-850/20'
+
+                const isCurrentUser = user && p.user_id === user.id
+
+                return (
+                  <motion.div
+                    key={p.user_id}
+                    initial={{ opacity: 0, y: 50 }}
+                    animate={{ opacity: 1, y: 0 }}
+                    transition={{ type: 'spring', damping: 15, stiffness: 200, delay: p.position * 0.1 }}
+                    className="flex flex-col items-center justify-end h-full"
+                  >
+                    {/* User profile details */}
+                    <div className="text-center mb-4 flex flex-col items-center">
+                      <div className="relative mb-2">
+                        {isFirst && (
+                          <Crown className="w-6 h-6 text-amber-400 absolute -top-5.5 left-1/2 -translate-x-1/2 filter drop-shadow-[0_0_6px_rgba(245,158,11,0.4)] animate-pulse" />
+                        )}
+                        <Avatar src={p.avatar} name={p.name} size={isFirst ? 'md' : 'sm'} className={ringColor} />
+                      </div>
+                      <p className={`text-xs font-black truncate max-w-[100px] ${isCurrentUser ? 'text-indigo-600 dark:text-indigo-400' : 'text-slate-800 dark:text-zinc-100'}`}>
+                        {p.name || 'Anonymous'}
+                      </p>
+                      <p className="text-[10px] font-bold text-slate-400 mt-0.5">
+                        {p.reputation_points} rep
+                      </p>
+                    </div>
+
+                    {/* Standing Column block */}
+                    <div className={`w-full ${heightClass} ${blockBg} border border-b-0 rounded-t-3xl flex flex-col items-center justify-center shadow-lg relative overflow-hidden`}>
+                      <span className="text-4xl font-black text-slate-400/20 dark:text-white/10 select-none">
+                        {p.position}
+                      </span>
+                      <div className="absolute bottom-3 flex gap-1 items-center">
+                        <Award className="w-3.5 h-3.5 text-slate-450 dark:text-slate-400" />
+                        <span className="text-[10px] font-bold text-slate-500 dark:text-slate-400">
+                          {p.total_badges} Badges
+                        </span>
+                      </div>
+                    </div>
+                  </motion.div>
+                )
+              })}
+            </div>
+          )}
+
+          {/* 4. Complete Rankings List Table */}
+          <Card className="p-0 overflow-hidden">
+            <div className="p-5 border-b border-slate-200/50 dark:border-slate-800 flex items-center justify-between">
+              <h3 className="text-sm font-extrabold uppercase tracking-wider text-slate-500 dark:text-zinc-400">
+                {timeframeLabels[timeframe]}
+              </h3>
+              <span className="text-xs text-slate-405 font-bold">
+                Showing {leaderboard.length} users
+              </span>
+            </div>
+
+            <div className="overflow-x-auto">
+              <table className="w-full text-left">
+                <thead>
+                  <tr className="border-b border-slate-200/40 dark:border-slate-800 text-[10px] font-extrabold text-slate-450 dark:text-slate-500 uppercase tracking-wider">
+                    <th className="py-3 px-5 text-center w-16">Rank</th>
+                    <th className="py-3 px-5">User</th>
+                    <th className="py-3 px-5 text-right w-28">Reputation</th>
+                    <th className="py-3 px-5 text-center w-24">Badges</th>
+                    <th className="py-3 px-5 text-center w-24">Questions</th>
+                    <th className="py-3 px-5 text-center w-24">Answers</th>
+                  </tr>
+                </thead>
+                <tbody className="divide-y divide-slate-100 dark:divide-slate-850">
+                  {leaderboard.length === 0 ? (
+                    <tr>
+                      <td colSpan="6" className="text-center py-12 text-slate-400 text-sm font-semibold">
+                        No ranking logs recorded.
+                      </td>
+                    </tr>
+                  ) : (
+                    leaderboard.map((u) => {
+                      const isCurrentUser = user && u.user_id === user.id
+                      const rankMovement = u.rank_movement || 0
+
+                      return (
+                        <tr 
+                          key={u.user_id}
+                          className={`hover:bg-slate-50/50 dark:hover:bg-slate-900/35 transition-colors ${
+                            isCurrentUser ? 'bg-indigo-500/[0.02] dark:bg-indigo-500/[0.005]' : ''
+                          }`}
+                        >
+                          {/* Rank column */}
+                          <td className="py-3.5 px-5 text-center">
+                            <div className="flex items-center justify-center gap-1.5">
+                              {/* Rank movement */}
+                              {timeframe === 'all' && rankMovement !== 0 && (
+                                <span className={`flex items-center text-[9px] font-black ${
+                                  rankMovement > 0 ? 'text-emerald-500' : 'text-rose-500'
+                                }`}>
+                                  {rankMovement > 0 ? <ArrowUp className="w-2.5 h-2.5" /> : <ArrowDown className="w-2.5 h-2.5" />}
+                                  {Math.abs(rankMovement)}
+                                </span>
+                              )}
+                              <span className={`text-sm font-bold ${
+                                u.rank === 1 ? 'text-amber-500 font-extrabold' :
+                                u.rank === 2 ? 'text-slate-500 dark:text-slate-400' :
+                                u.rank === 3 ? 'text-amber-700' :
+                                'text-slate-600 dark:text-zinc-400'
+                              }`}>
+                                {u.rank}
+                              </span>
+                            </div>
+                          </td>
+
+                          {/* Username & Avatar */}
+                          <td className="py-3.5 px-5">
+                            <div className="flex items-center gap-3">
+                              <Avatar src={u.avatar} name={u.name} size="sm" />
+                              <div>
+                                <p className={`text-sm font-bold truncate max-w-[150px] ${
+                                  isCurrentUser ? 'text-indigo-600 dark:text-indigo-400' : 'text-slate-850 dark:text-zinc-200'
+                                }`}>
+                                  {u.name || 'Anonymous'}
+                                </p>
+                              </div>
+                            </div>
+                          </td>
+
+                          {/* Reputation */}
+                          <td className="py-3.5 px-5 text-right text-sm font-black text-indigo-600 dark:text-indigo-450">
+                            {u.reputation_points}
+                          </td>
+
+                          {/* Badges */}
+                          <td className="py-3.5 px-5 text-center text-xs font-bold text-slate-700 dark:text-zinc-300">
+                            <span className="inline-flex items-center gap-1 px-2.5 py-0.5 rounded-lg bg-slate-100 dark:bg-slate-800 text-[10px] font-extrabold border border-slate-200/50 dark:border-slate-750/30">
+                              <Award className="w-3 h-3 text-slate-450 dark:text-slate-400" />
+                              {u.total_badges}
+                            </span>
+                          </td>
+
+                          {/* Questions */}
+                          <td className="py-3.5 px-5 text-center text-xs text-slate-500 dark:text-slate-400 font-semibold">
+                            {u.questions_asked}
+                          </td>
+
+                          {/* Answers */}
+                          <td className="py-3.5 px-5 text-center text-xs text-slate-500 dark:text-slate-400 font-semibold">
+                            {u.answers_posted}
+                          </td>
+                        </tr>
+                      )
+                    })
+                  )}
+                </tbody>
+              </table>
+            </div>
+          </Card>
+        </>
+      )}
+    </motion.div>
+  )
+}
diff --git a/src/pages/ProfilePage.jsx b/src/pages/ProfilePage.jsx
index 26a5bef..879bfed 100644
--- a/src/pages/ProfilePage.jsx
+++ b/src/pages/ProfilePage.jsx
@@ -1,6 +1,11 @@
 import { useState, useEffect } from 'react'
 import { motion, AnimatePresence } from 'framer-motion'
-import { User, Mail, Calendar, Shield, HelpCircle, MessageCircle, CheckCircle, ThumbsUp, Edit2 } from 'lucide-react'
+import { 
+  User, Mail, Calendar, Shield, HelpCircle, MessageCircle, 
+  CheckCircle, ThumbsUp, ThumbsDown, Edit2, Trophy, Lock, 
+  Award, BookOpen, Sparkles, Flame, Check, Star, Crown, 
+  TrendingUp, Zap, Lightbulb 
+} from 'lucide-react'
 import Card from '@/components/ui/Card'
 import Badge from '@/components/ui/Badge'
 import Avatar from '@/components/ui/Avatar'
@@ -10,8 +15,9 @@ import { useAuth } from '@/hooks/useAuth'
 import { useQuestions } from '@/hooks/useQuestions'
 import { useAnswers } from '@/hooks/useAnswers'
 import { useToast } from '@/components/ui/Toast'
-import { getSupportedLanguages } from '@/lib/translationService'
+import { supabase } from '@/config/supabase'
 import { Link } from 'react-router-dom'
+import { badgeIcons } from '@/components/ui/BadgeUnlockModal'
 
 const tabs = [
   { id: 'questions', label: 'My Questions', icon: HelpCircle },
@@ -23,25 +29,47 @@ function timeAgo(dateString) {
   return date.toLocaleDateString('en-US', { month: 'long', day: 'numeric', year: 'numeric' })
 }
 
+function formatActionType(action) {
+  switch (action) {
+    case 'ask_question': return 'Asked a Question'
+    case 'post_answer': return 'Posted an Answer'
+    case 'question_upvote': return 'Received Question Upvote'
+    case 'question_downvote': return 'Received Question Downvote'
+    case 'answer_upvote': return 'Received Answer Upvote'
+    case 'answer_downvote': return 'Received Answer Downvote'
+    case 'answer_accepted': return 'Answer Accepted'
+    case 'daily_login': return 'Daily Login Bonus'
+    case 'admin_adjustment': return 'Admin Adjustment'
+    default: return action.replace('_', ' ')
+  }
+}
+
 export default function ProfilePage() {
   const { user, updateProfile } = useAuth()
   const { fetchUserQuestions } = useQuestions()
   const { fetchUserAnswers } = useAnswers()
   const { showToast } = useToast()
+  
   const [activeTab, setActiveTab] = useState('questions')
   const [userQuestions, setUserQuestions] = useState([])
   const [userAnswers, setUserAnswers] = useState([])
   const [loading, setLoading] = useState(false)
   const [editing, setEditing] = useState(false)
   const [name, setName] = useState('')
-  const [preferredLanguage, setPreferredLanguage] = useState('en')
-  const [savingLanguage, setSavingLanguage] = useState(false)
+  
+  // Gamification states
+  const [globalRank, setGlobalRank] = useState(1)
+  const [monthlyRep, setMonthlyRep] = useState(0)
+  const [badges, setBadges] = useState([])
+  const [earnedBadgeIds, setEarnedBadgeIds] = useState(new Set())
+  const [reputationLogs, setReputationLogs] = useState([])
+  const [nextBadge, setNextBadge] = useState(null)
 
   useEffect(() => {
     if (user) {
       setName(user.name || '')
-      setPreferredLanguage(user.preferred_language || 'en')
       loadData()
+      loadGamificationData()
     }
   }, [user])
 
@@ -62,32 +90,157 @@ export default function ProfilePage() {
     }
   }
 
-  const handleUpdateProfile = async () => {
+  const loadGamificationData = async () => {
+    if (!user) return
     try {
-      await updateProfile({ name })
-      setEditing(false)
-      showToast('Profile updated!', 'success')
+      // 1. Calculate Global Rank: count of users with strictly greater reputation + 1
+      const { count } = await supabase
+        .from('users')
+        .select('*', { count: 'exact', head: true })
+        .gt('reputation_points', user.reputation_points || 0)
+      setGlobalRank((count || 0) + 1)
+
+      // 2. Fetch Reputation Earned This Month (last 30 days)
+      const thirtyDaysAgo = new Date()
+      thirtyDaysAgo.setDate(thirtyDaysAgo.getDate() - 30)
+      const { data: monthlyLogs } = await supabase
+        .from('reputation_logs')
+        .select('points_awarded')
+        .eq('user_id', user.id)
+        .gte('created_at', thirtyDaysAgo.toISOString())
+      const totalMonthly = monthlyLogs?.reduce((sum, log) => sum + log.points_awarded, 0) || 0
+      setMonthlyRep(totalMonthly)
+
+      // 3. Fetch Recent Reputation Logs
+      const { data: logs } = await supabase
+        .from('reputation_logs')
+        .select('*')
+        .eq('user_id', user.id)
+        .order('created_at', { ascending: false })
+        .limit(6)
+      setReputationLogs(logs || [])
+
+      // 4. Fetch Badge Details & User Earned Badges
+      const [badgesRes, userBadgesRes] = await Promise.all([
+        supabase.from('badges').select('*').order('created_at', { ascending: true }),
+        supabase.from('user_badges').select('badge_id').eq('user_id', user.id)
+      ])
+
+      const allBadges = badgesRes.data || []
+      const earnedIds = new Set((userBadgesRes.data || []).map(b => b.badge_id))
+      setBadges(allBadges)
+      setEarnedBadgeIds(earnedIds)
+
     } catch (err) {
-      showToast('Failed to update profile', 'error')
+      console.error('Gamification loading error:', err)
     }
   }
 
-  const handleSavePreferredLanguage = async () => {
-    if (!user) return
-    setSavingLanguage(true)
+  // Calculate Next Achievable Badge progress
+  useEffect(() => {
+    if (badges.length === 0 || !user) return
+
+    const userRep = user.reputation_points || 0
+    const qCount = userQuestions.length
+    const aCount = userAnswers.filter(a => a.verification_status === 'verified').length
+    const acceptedCount = userAnswers.filter(a => a.is_accepted).length
+    const upvotesReceived = userQuestions.reduce((sum, q) => sum + (q.upvotes || 0), 0) +
+                            userAnswers.reduce((sum, a) => sum + (a.upvotes || 0), 0)
+
+    // Evaluate progress for locked badges
+    const lockedProgress = badges
+      .filter(b => !earnedBadgeIds.has(b.id))
+      .map(b => {
+        let current = 0
+        let target = 100
+        let unit = ''
+        
+        switch (b.id) {
+          // Beginner Contributor
+          case '00000000-0000-0000-0000-000000000001':
+            current = userRep; target = 10; unit = 'Rep'; break
+          // First Question
+          case '00000000-0000-0000-0000-000000000002':
+            current = qCount; target = 1; unit = 'Question'; break
+          // First Answer
+          case '00000000-0000-0000-0000-000000000003':
+            current = aCount; target = 1; unit = 'Answer'; break
+          // Knowledge Sharer
+          case '00000000-0000-0000-0000-000000000004':
+            current = userRep; target = 100; unit = 'Rep'; break
+          // 10 Accepted Answers
+          case '00000000-0000-0000-0000-000000000005':
+            current = acceptedCount; target = 10; unit = 'Accepted Answers'; break
+          // Helpful Member
+          case '00000000-0000-0000-0000-000000000006':
+            current = upvotesReceived; target = 10; unit = 'Upvotes'; break
+          // Expert Contributor
+          case '00000000-0000-0000-0000-000000000007':
+            current = userRep; target = 500; unit = 'Rep'; break
+          // 50 Upvotes Received
+          case '00000000-0000-0000-0000-000000000008':
+            current = upvotesReceived; target = 50; unit = 'Upvotes'; break
+          // Problem Solver
+          case '00000000-0000-0000-0000-000000000009':
+            current = acceptedCount; target = 5; unit = 'Accepted Answers'; break
+          // Community Champion
+          case '00000000-0000-0000-0000-000000000010':
+            current = userRep; target = 1000; unit = 'Rep'; break
+          // Top Contributor
+          case '00000000-0000-0000-0000-000000000011':
+            current = upvotesReceived; target = 100; unit = 'Upvotes'; break
+          // Elite Expert
+          case '00000000-0000-0000-0000-000000000012':
+            current = userRep; target = 2000; unit = 'Rep'; break
+          default:
+            current = 0; target = 100; unit = 'Progress'
+        }
+
+        const percentage = Math.min(99, Math.floor((current / target) * 100))
+        return {
+          ...b,
+          current,
+          target,
+          unit,
+          percentage
+        }
+      })
+      .sort((a, b) => b.percentage - a.percentage) // Sort by closest completion
+
+    if (lockedProgress.length > 0) {
+      setNextBadge(lockedProgress[0])
+    } else {
+      setNextBadge(null) // Unlocked all badges!
+    }
+  }, [badges, earnedBadgeIds, user, userQuestions, userAnswers])
+
+  const handleUpdateProfile = async () => {
     try {
-      await updateProfile({ preferred_language: preferredLanguage })
-      showToast('Preferred language saved!', 'success')
+      await updateProfile({ name })
+      setEditing(false)
+      showToast('Profile updated!', 'success')
     } catch (err) {
-      showToast('Failed to save preferred language', 'error')
-    } finally {
-      setSavingLanguage(false)
+      showToast('Failed to update profile', 'error')
     }
   }
 
   if (!user) return null
 
   const verifiedAnswerCount = userAnswers.filter(a => a.verification_status === 'verified').length
+  const acceptedAnswerCount = userAnswers.filter(a => a.is_accepted).length
+  const totalUpvotesReceived = userQuestions.reduce((sum, q) => sum + (q.upvotes || 0), 0) +
+                               userAnswers.reduce((sum, a) => sum + (a.upvotes || 0), 0)
+  const totalDownvotesReceived = userQuestions.reduce((sum, q) => sum + (q.downvotes || 0), 0) +
+                                 userAnswers.reduce((sum, a) => sum + (a.downvotes || 0), 0)
+
+  // Badge tier color codes
+  const badgeTierColors = {
+    bronze: 'bg-amber-500/10 text-amber-600 dark:text-amber-400 border-amber-500/20',
+    silver: 'bg-slate-400/10 text-slate-600 dark:text-slate-400 border-slate-400/20',
+    gold: 'bg-yellow-500/10 text-yellow-600 dark:text-yellow-450 border-yellow-500/20',
+    diamond: 'bg-indigo-500/10 text-indigo-600 dark:text-indigo-400 border-indigo-500/20',
+    special: 'bg-purple-500/10 text-purple-600 dark:text-purple-400 border-purple-500/20',
+  }
 
   return (
     <motion.div
@@ -95,181 +248,329 @@ export default function ProfilePage() {
       animate={{ opacity: 1, y: 0 }}
       exit={{ opacity: 0 }}
       transition={{ duration: 0.3 }}
-      className="max-w-4xl mx-auto"
+      className="max-w-6xl mx-auto space-y-8"
     >
-      {/* Profile Card */}
-      <Card className="p-6 md:p-8 mb-8">
-        <div className="flex flex-col md:flex-row items-start gap-6">
-          <Avatar src={user.avatar} name={user.name || 'User'} size="lg" />
-          <div className="flex-1">
-            <div className="flex items-start justify-between">
+      {/* 1. Header Hero Card */}
+      <Card className="p-6 md:p-8 overflow-hidden relative">
+        <div className="absolute -top-24 -right-24 w-72 h-72 bg-indigo-500/5 rounded-full blur-[100px]" />
+        <div className="flex flex-col md:flex-row items-center md:items-start gap-6 relative z-10">
+          <Avatar src={user.avatar} name={user.name || 'User'} size="lg" className="border-4 border-indigo-500/20" />
+          <div className="flex-1 text-center md:text-left">
+            <div className="flex flex-col md:flex-row md:items-center justify-between gap-4">
               <div>
                 {editing ? (
-                  <div className="flex items-center gap-2 mb-2">
+                  <div className="flex items-center gap-2 mb-2 justify-center md:justify-start">
                     <input
                       value={name}
                       onChange={(e) => setName(e.target.value)}
-                      className="text-xl font-bold bg-transparent border-b-2 border-indigo-500 outline-none text-slate-800 dark:text-white"
+                      className="text-2xl font-bold bg-slate-100 dark:bg-slate-800 px-3 py-1 rounded-xl outline-none border border-indigo-500 text-slate-800 dark:text-white"
                     />
                     <Button size="sm" variant="primary" onClick={handleUpdateProfile}>Save</Button>
                     <Button size="sm" variant="ghost" onClick={() => setEditing(false)}>Cancel</Button>
                   </div>
                 ) : (
-                  <h1 className="text-xl font-bold text-slate-800 dark:text-white flex items-center gap-2">
+                  <h1 className="text-2xl font-extrabold text-slate-800 dark:text-white flex items-center justify-center md:justify-start gap-2">
                     {user.name || 'Anonymous'}
-                    <button onClick={() => setEditing(true)} className="p-1 hover:bg-slate-100 dark:hover:bg-slate-800 rounded-lg">
+                    <button onClick={() => setEditing(true)} className="p-1.5 hover:bg-slate-100 dark:hover:bg-slate-800 rounded-xl transition-all cursor-pointer">
                       <Edit2 className="w-4 h-4 text-slate-400" />
                     </button>
                   </h1>
                 )}
-                <div className="flex flex-col sm:flex-row sm:items-center gap-3 mt-2 text-sm text-slate-500 dark:text-slate-400">
-                  <span className="flex items-center gap-1">
-                    <Mail className="w-3.5 h-3.5" />
+                <div className="flex flex-wrap items-center justify-center md:justify-start gap-4 mt-2 text-sm text-slate-500 dark:text-slate-400">
+                  <span className="flex items-center gap-1.5">
+                    <Mail className="w-4 h-4" />
                     {user.email}
                   </span>
-                  <span className="flex items-center gap-1">
-                    <Calendar className="w-3.5 h-3.5" />
+                  <span className="flex items-center gap-1.5">
+                    <Calendar className="w-4 h-4" />
                     Joined {timeAgo(user.created_at)}
                   </span>
                 </div>
-                <div className="mt-4 grid gap-3 sm:grid-cols-[auto_1fr] items-center">
-                  <label htmlFor="preferredLanguage" className="text-sm font-medium text-slate-500 dark:text-slate-400">
-                    Preferred Language
-                  </label>
-                  <div className="flex flex-col sm:flex-row items-start sm:items-center gap-2">
-                    <select
-                      id="preferredLanguage"
-                      value={preferredLanguage}
-                      onChange={(e) => setPreferredLanguage(e.target.value)}
-                      className="w-full max-w-xs rounded-2xl border border-slate-200 bg-white px-4 py-2 text-sm text-slate-700 outline-none transition focus:border-indigo-500 focus:ring-2 focus:ring-indigo-200 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-200 dark:focus:border-indigo-400 dark:focus:ring-indigo-500/20"
-                    >
-                      {getSupportedLanguages().map((language) => (
-                        <option key={language.code} value={language.code}>
-                          {language.label}
-                        </option>
-                      ))}
-                    </select>
-                    <Button
-                      size="sm"
-                      variant="secondary"
-                      onClick={handleSavePreferredLanguage}
-                      loading={savingLanguage}
-                    >
-                      Save
-                    </Button>
-                  </div>
-                </div>
-                <Badge variant={user.role === 'admin' ? 'info' : 'default'} className="mt-2">
-                  <Shield className="w-3 h-3 mr-1" />
+                <Badge variant={user.role === 'admin' ? 'info' : 'default'} className="mt-3.5">
+                  <Shield className="w-3.5 h-3.5 mr-1.5" />
                   {user.role}
                 </Badge>
               </div>
-            </div>
 
-            {/* Stats */}
-            <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mt-6">
-              {[
-                { label: 'Questions', value: userQuestions.length, icon: HelpCircle, color: 'text-indigo-500' },
-                { label: 'Answers', value: userAnswers.length, icon: MessageCircle, color: 'text-violet-500' },
-                { label: 'Verified', value: verifiedAnswerCount, icon: CheckCircle, color: 'text-emerald-500' },
-                { label: 'Upvotes', value: userQuestions.reduce((sum, q) => sum + (q.upvotes || 0), 0), icon: ThumbsUp, color: 'text-amber-500' },
-              ].map((stat) => {
-                const Icon = stat.icon
-                return (
-                  <div key={stat.label} className="text-center p-3 bg-slate-50 dark:bg-slate-800/50 rounded-xl">
-                    <Icon className={`w-5 h-5 mx-auto mb-1 ${stat.color}`} />
-                    <p className="text-xl font-bold text-slate-800 dark:text-white">{stat.value}</p>
-                    <p className="text-xs text-slate-400">{stat.label}</p>
-                  </div>
-                )
-              })}
+              {/* Big Reputation Counter & Global Rank */}
+              <div className="flex items-center gap-6 bg-slate-50 dark:bg-slate-900/50 border border-slate-200/50 dark:border-slate-800 p-4 px-6 rounded-2xl w-fit mx-auto md:mx-0 shadow-inner">
+                <div className="text-center">
+                  <p className="text-2xl font-black text-indigo-600 dark:text-indigo-400">{user.reputation_points || 0}</p>
+                  <p className="text-[10px] font-bold text-slate-400 uppercase tracking-widest mt-0.5">Reputation</p>
+                </div>
+                <div className="h-8 w-px bg-slate-200 dark:bg-slate-850" />
+                <div className="text-center">
+                  <p className="text-2xl font-black text-amber-500 flex items-center justify-center gap-1">
+                    <Trophy className="w-5 h-5 text-amber-500" />
+                    #{globalRank}
+                  </p>
+                  <p className="text-[10px] font-bold text-slate-400 uppercase tracking-widest mt-0.5">Global Rank</p>
+                </div>
+              </div>
             </div>
           </div>
         </div>
       </Card>
 
-      {/* Tabs */}
-      <div className="flex gap-1 mb-6 bg-slate-100 dark:bg-slate-800 p-1 rounded-xl w-fit">
-        {tabs.map((tab) => {
-          const Icon = tab.icon
-          return (
-            <button
-              key={tab.id}
-              onClick={() => setActiveTab(tab.id)}
-              className={`flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium transition-all duration-200 ${
-                activeTab === tab.id
-                  ? 'bg-white dark:bg-slate-700 text-indigo-600 dark:text-indigo-400 shadow-sm'
-                  : 'text-slate-500 hover:text-slate-700 dark:hover:text-slate-300'
-              }`}
-            >
-              <Icon className="w-4 h-4" />
-              {tab.label}
-            </button>
-          )
-        })}
-      </div>
+      {/* 2. Gamification Section Grid */}
+      <div className="grid grid-cols-1 lg:grid-cols-12 gap-6">
+        
+        {/* Left Column: Progress & Badges */}
+        <div className="lg:col-span-8 space-y-6">
+          
+          {/* Progress to Next Badge */}
+          {nextBadge && (
+            <Card className="p-6 relative overflow-hidden border-indigo-500/20 dark:border-purple-550/15">
+              <div className="absolute top-0 right-0 p-3">
+                <Sparkles className="w-5 h-5 text-indigo-500 dark:text-purple-400 animate-pulse" />
+              </div>
+              <h3 className="text-sm font-extrabold uppercase tracking-wider text-indigo-650 dark:text-indigo-400 mb-4">
+                Next Achievable Badge
+              </h3>
+              <div className="flex items-center gap-4.5">
+                <div className={`p-3.5 rounded-2xl bg-slate-100 dark:bg-slate-800 border border-slate-200 dark:border-slate-700`}>
+                  {(() => {
+                    const IconComponent = badgeIcons[nextBadge.icon] || Award
+                    return <IconComponent className="w-7 h-7 text-indigo-600 dark:text-purple-400" />
+                  })()}
+                </div>
+                <div className="flex-1">
+                  <p className="text-base font-bold text-slate-850 dark:text-zinc-50">{nextBadge.badge_name}</p>
+                  <p className="text-xs text-slate-400 mt-0.5">{nextBadge.description}</p>
+                  
+                  {/* Progress Bar */}
+                  <div className="mt-4 flex items-center gap-3">
+                    <div className="flex-1 h-3 rounded-full bg-slate-100 dark:bg-slate-800 border border-slate-200/50 dark:border-slate-700/50 overflow-hidden relative">
+                      <motion.div
+                        initial={{ width: 0 }}
+                        animate={{ width: `${nextBadge.percentage}%` }}
+                        transition={{ duration: 1.2, ease: 'easeOut' }}
+                        className="h-full rounded-full bg-gradient-to-r from-indigo-500 to-violet-500 shadow-[0_0_10px_rgba(168,85,247,0.3)]"
+                      />
+                    </div>
+                    <span className="text-xs font-black text-slate-700 dark:text-zinc-350 shrink-0">
+                      {nextBadge.current} / {nextBadge.target} {nextBadge.unit}
+                    </span>
+                  </div>
+                  <p className="text-[10px] font-bold text-indigo-500 dark:text-indigo-400 mt-2">
+                    ⚡ {nextBadge.percentage}% completed. You are close to this milestone!
+                  </p>
+                </div>
+              </div>
+            </Card>
+          )}
+
+          {/* Badge Showcase Collection */}
+          <Card className="p-6">
+            <h3 className="text-sm font-extrabold uppercase tracking-wider text-slate-500 dark:text-zinc-400 mb-5 flex items-center gap-2">
+              <Award className="w-5 h-5 text-indigo-500" />
+              Badge Collection
+              <span className="text-xs font-normal text-slate-400">
+                ({earnedBadgeIds.size} unlocked, {badges.length - earnedBadgeIds.size} locked)
+              </span>
+            </h3>
+
+            {badges.length === 0 ? (
+              <p className="text-sm text-slate-400">No badges configured.</p>
+            ) : (
+              <div className="grid grid-cols-2 sm:grid-cols-4 gap-4">
+                {badges.map((b) => {
+                  const isEarned = earnedBadgeIds.has(b.id)
+                  const Icon = badgeIcons[b.icon] || Award
+                  const tierColor = badgeTierColors[b.badge_type] || badgeTierColors.bronze
+                  
+                  return (
+                    <div
+                      key={b.id}
+                      className={`relative flex flex-col items-center p-4.5 rounded-2xl border transition-all duration-300 ${
+                        isEarned 
+                          ? `${tierColor} shadow-sm bg-white dark:bg-zinc-950/20 cursor-default hover:scale-102 hover:shadow-md` 
+                          : 'border-slate-100 dark:border-zinc-900 bg-slate-50/50 dark:bg-zinc-950/[0.05] opacity-45 cursor-not-allowed select-none'
+                      }`}
+                    >
+                      <div className="relative">
+                        <Icon className="w-7 h-7 drop-shadow-md" />
+                        {!isEarned && (
+                          <Lock className="w-3.5 h-3.5 text-slate-450 dark:text-slate-650 absolute -top-1.5 -right-1.5" />
+                        )}
+                      </div>
+                      <p className="text-xs font-bold text-center mt-3 truncate max-w-full text-slate-800 dark:text-zinc-200">
+                        {b.badge_name}
+                      </p>
+                      <p className="text-[9px] text-center text-slate-400 mt-1 line-clamp-2 leading-relaxed">
+                        {b.description}
+                      </p>
+                    </div>
+                  )
+                })}
+              </div>
+            )}
+          </Card>
+        </div>
 
-      {/* Tab Content */}
-      <AnimatePresence mode="wait">
-        <motion.div
-          key={activeTab}
-          initial={{ opacity: 0, y: 10 }}
-          animate={{ opacity: 1, y: 0 }}
-          exit={{ opacity: 0, y: -10 }}
-          transition={{ duration: 0.2 }}
-        >
-          {activeTab === 'questions' && (
+        {/* Right Column: Stats & Contribution Logs */}
+        <div className="lg:col-span-4 space-y-6">
+          
+          {/* Detailed Activity Stats */}
+          <Card className="p-6">
+            <h3 className="text-sm font-extrabold uppercase tracking-wider text-slate-500 dark:text-zinc-400 mb-5">
+              Activity Statistics
+            </h3>
             <div className="space-y-4">
-              {userQuestions.length === 0 ? (
-                <Card className="p-8 text-center">
-                  <HelpCircle className="w-10 h-10 text-slate-300 mx-auto mb-3" />
-                  <p className="text-slate-500">You haven&apos;t asked any questions yet.</p>
-                  <Link to="/ask">
-                    <Button variant="primary" size="sm" className="mt-3">Ask a Question</Button>
-                  </Link>
-                </Card>
-              ) : (
-                userQuestions.map(q => <QuestionCard key={q.id} question={q} />)
-              )}
+              {[
+                { label: 'Questions Asked', value: userQuestions.length, icon: HelpCircle, color: 'text-indigo-500' },
+                { label: 'Answers Posted', value: userAnswers.length, icon: MessageCircle, color: 'text-violet-500' },
+                { label: 'Accepted Answers', value: acceptedAnswerCount, icon: CheckCircle, color: 'text-emerald-500' },
+                { label: 'Upvotes Received', value: totalUpvotesReceived, icon: ThumbsUp, color: 'text-amber-500' },
+                { label: 'Downvotes Received', value: totalDownvotesReceived, icon: ThumbsDown, color: 'text-rose-500' },
+              ].map((item) => {
+                const Icon = item.icon
+                return (
+                  <div key={item.label} className="flex items-center justify-between border-b border-slate-100 dark:border-slate-850 pb-3 last:border-b-0 last:pb-0">
+                    <div className="flex items-center gap-2.5">
+                      <Icon className={`w-4.5 h-4.5 ${item.color}`} />
+                      <span className="text-xs font-bold text-slate-600 dark:text-zinc-400">{item.label}</span>
+                    </div>
+                    <span className="text-sm font-black text-slate-800 dark:text-zinc-150">{item.value}</span>
+                  </div>
+                )
+              })}
             </div>
-          )}
+          </Card>
 
-          {activeTab === 'answers' && (
-            <div className="space-y-3">
-              {userAnswers.length === 0 ? (
-                <Card className="p-8 text-center">
-                  <MessageCircle className="w-10 h-10 text-slate-300 mx-auto mb-3" />
-                  <p className="text-slate-500">You haven&apos;t answered any questions yet.</p>
-                </Card>
-              ) : (
-                userAnswers.map(answer => (
-                  <Card key={answer.id} className="p-4">
-                    <div className="flex items-start justify-between gap-3">
-                      <div className="flex-1 min-w-0">
-                        <Link
-                          to={`/question/${answer.question_id}`}
-                          className="text-sm font-medium text-indigo-600 hover:text-indigo-700 dark:text-indigo-400"
-                        >
-                          {answer.questions?.title || 'Question'}
-                        </Link>
-                        <p className="text-sm text-slate-500 dark:text-slate-400 mt-1 line-clamp-2">
-                          {answer.content}
+          {/* Recent Contribution & Rep logs */}
+          <Card className="p-6">
+            <h3 className="text-sm font-extrabold uppercase tracking-wider text-slate-500 dark:text-zinc-400 mb-5 flex items-center justify-between">
+              Reputation History
+              <span className="text-[10px] font-bold text-indigo-500 dark:text-indigo-400">
+                Month: {monthlyRep >= 0 ? `+${monthlyRep}` : monthlyRep}
+              </span>
+            </h3>
+
+            {reputationLogs.length === 0 ? (
+              <p className="text-xs text-slate-400 text-center py-6">No recent transactions.</p>
+            ) : (
+              <div className="space-y-3.5">
+                {reputationLogs.map((log) => {
+                  const isPositive = log.points_awarded >= 0
+                  return (
+                    <div key={log.id} className="flex items-start justify-between gap-3 text-xs">
+                      <div>
+                        <p className="font-bold text-slate-700 dark:text-zinc-300">
+                          {formatActionType(log.action_type)}
+                        </p>
+                        <p className="text-[10px] text-slate-400 mt-0.5">
+                          {new Date(log.created_at).toLocaleDateString()}
                         </p>
                       </div>
-                      <Badge variant={
-                        answer.verification_status === 'verified' ? 'success' :
-                        answer.verification_status === 'pending' ? 'warning' : 'danger'
-                      }>
-                        {answer.verification_status}
-                      </Badge>
+                      <span className={`font-black tracking-tighter shrink-0 px-2 py-0.5 rounded-lg text-[10px] border ${
+                        isPositive 
+                          ? 'text-emerald-600 bg-emerald-500/10 border-emerald-500/15' 
+                          : 'text-rose-500 bg-rose-500/10 border-rose-500/15'
+                      }`}>
+                        {isPositive ? `+${log.points_awarded}` : log.points_awarded}
+                      </span>
                     </div>
-                  </Card>
-                ))
-              )}
-            </div>
-          )}
-        </motion.div>
-      </AnimatePresence>
+                  )
+                })}
+              </div>
+            )}
+          </Card>
+        </div>
+      </div>
+
+      {/* 3. Original My Posts tabs */}
+      <Card className="p-6">
+        {/* Tabs */}
+        <div className="flex gap-1 mb-6 bg-slate-100/80 dark:bg-slate-900/60 p-1 rounded-xl w-fit border border-slate-200/50 dark:border-slate-800">
+          {tabs.map((tab) => {
+            const Icon = tab.icon
+            return (
+              <button
+                key={tab.id}
+                onClick={() => setActiveTab(tab.id)}
+                className={`flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-semibold transition-all duration-200 cursor-pointer ${
+                  activeTab === tab.id
+                    ? 'bg-white dark:bg-slate-800 text-indigo-650 dark:text-indigo-400 shadow-sm border border-slate-200/40 dark:border-slate-750/30'
+                    : 'text-slate-500 hover:text-slate-750 dark:hover:text-slate-350'
+                }`}
+              >
+                <Icon className="w-4 h-4" />
+                {tab.label}
+              </button>
+            )
+          })}
+        </div>
+
+        {/* Tab Content */}
+        <AnimatePresence mode="wait">
+          <motion.div
+            key={activeTab}
+            initial={{ opacity: 0, y: 10 }}
+            animate={{ opacity: 1, y: 0 }}
+            exit={{ opacity: 0, y: -10 }}
+            transition={{ duration: 0.2 }}
+          >
+            {activeTab === 'questions' && (
+              <div className="space-y-4">
+                {userQuestions.length === 0 ? (
+                  <div className="p-8 text-center bg-slate-50/50 dark:bg-zinc-950/5 border border-dashed border-slate-200 dark:border-zinc-800 rounded-2xl">
+                    <HelpCircle className="w-10 h-10 text-slate-300 mx-auto mb-3" />
+                    <p className="text-slate-500 text-sm font-semibold">You haven&apos;t asked any questions yet.</p>
+                    <Link to="/ask">
+                      <Button variant="primary" size="sm" className="mt-3">Ask a Question</Button>
+                    </Link>
+                  </div>
+                ) : (
+                  userQuestions.map((q, idx) => <QuestionCard key={q.id} question={q} index={idx} />)
+                )}
+              </div>
+            )}
+
+            {activeTab === 'answers' && (
+              <div className="space-y-3">
+                {userAnswers.length === 0 ? (
+                  <div className="p-8 text-center bg-slate-50/50 dark:bg-zinc-950/5 border border-dashed border-slate-200 dark:border-zinc-800 rounded-2xl">
+                    <MessageCircle className="w-10 h-10 text-slate-300 mx-auto mb-3" />
+                    <p className="text-slate-500 text-sm font-semibold">You haven&apos;t answered any questions yet.</p>
+                  </div>
+                ) : (
+                  userAnswers.map((answer) => (
+                    <Card key={answer.id} className={`p-4 border transition-all duration-300 ${answer.is_accepted ? 'border-emerald-500/25 bg-emerald-500/[0.005]' : ''}`}>
+                      <div className="flex items-start justify-between gap-3">
+                        <div className="flex-1 min-w-0">
+                          <Link
+                            to={`/question/${answer.question_id}`}
+                            className="text-sm font-bold text-indigo-600 hover:text-indigo-700 dark:text-indigo-400 block truncate"
+                          >
+                            {answer.questions?.title || 'Question'}
+                          </Link>
+                          <p className="text-xs text-slate-500 dark:text-slate-400 mt-1.5 line-clamp-2 leading-relaxed">
+                            {answer.content}
+                          </p>
+                        </div>
+                        <div className="flex flex-col items-end gap-2 shrink-0">
+                          <Badge variant={
+                            answer.verification_status === 'verified' ? 'success' :
+                            answer.verification_status === 'pending' ? 'warning' : 'danger'
+                          }>
+                            {answer.verification_status}
+                          </Badge>
+                          {answer.is_accepted && (
+                            <span className="flex items-center gap-1 text-[10px] font-bold text-emerald-600 dark:text-emerald-400 bg-emerald-500/10 border border-emerald-500/15 px-2 py-0.5 rounded-lg">
+                              <Check className="w-3 h-3 stroke-[3px]" /> Accepted
+                            </span>
+                          )}
+                        </div>
+                      </div>
+                    </Card>
+                  ))
+                )}
+              </div>
+            )}
+          </motion.div>
+        </AnimatePresence>
+      </Card>
     </motion.div>
   )
 }
diff --git a/src/pages/QuestionDetailPage.jsx b/src/pages/QuestionDetailPage.jsx
index 824ff20..cb4ee6c 100644
--- a/src/pages/QuestionDetailPage.jsx
+++ b/src/pages/QuestionDetailPage.jsx
@@ -1,7 +1,8 @@
 import { useState, useEffect, useCallback } from 'react'
-import { useParams, Link } from 'react-router-dom'
+import { useParams, Link, useNavigate } from 'react-router-dom'
 import { motion } from 'framer-motion'
-import { ChevronUp, Eye, Clock, Paperclip, ChevronRight, Home, Tag } from 'lucide-react'
+import { ChevronUp, ChevronDown, Eye, Clock, Paperclip, ChevronRight, Home, Tag, Trash2 } from 'lucide-react'
+
 import Badge from '@/components/ui/Badge'
 import Avatar from '@/components/ui/Avatar'
 import Card from '@/components/ui/Card'
@@ -14,9 +15,6 @@ import { useAnswers } from '@/hooks/useAnswers'
 import { useUpvote } from '@/hooks/useUpvote'
 import { useAuth } from '@/hooks/useAuth'
 import { useToast } from '@/components/ui/Toast'
-import { useTranslation } from '@/hooks/useTranslation'
-import TranslationButton from '@/components/translation/TranslationButton'
-import TranslationBadge from '@/components/translation/TranslationBadge'
 
 function timeAgo(dateString) {
   const now = new Date()
@@ -34,27 +32,28 @@ function timeAgo(dateString) {
 
 export default function QuestionDetailPage() {
   const { id } = useParams()
-  const { question, loading: qLoading, fetchQuestionById } = useQuestions()
-  const { answers, loading: aLoading, fetchAnswers, verifyAnswer, rejectAnswer, markSpam, deleteAnswer } = useAnswers()
-  const { toggleQuestionUpvote, hasUpvotedQuestion } = useUpvote()
+  const { question, loading: qLoading, fetchQuestionById, deleteQuestion } = useQuestions()
+  const { answers, loading: aLoading, fetchAnswers, verifyAnswer, rejectAnswer, markSpam, deleteAnswer, acceptAnswer } = useAnswers()
+  const { toggleQuestionVote, hasUpvotedQuestion, hasDownvotedQuestion } = useUpvote()
   const { user, isAdmin } = useAuth()
   const { showToast } = useToast()
+  const navigate = useNavigate()
+  
   const [upvoted, setUpvoted] = useState(false)
-  const [localUpvotes, setLocalUpvotes] = useState(0)
+  const [downvoted, setDownvoted] = useState(false)
+  const [localScore, setLocalScore] = useState(0)
 
-  const preferredLanguage = user?.preferred_language || 'en'
-  const titleTranslation = useTranslation({
-    contentId: `question-title-${question?.id}`,
-    content: question?.title,
-    autoTargetLanguage: preferredLanguage,
-    autoTranslate: Boolean(user?.preferred_language),
-  })
-  const descriptionTranslation = useTranslation({
-    contentId: `question-description-${question?.id}`,
-    content: question?.description,
-    autoTargetLanguage: preferredLanguage,
-    autoTranslate: Boolean(user?.preferred_language),
-  })
+  const handleQuestionDelete = async () => {
+    if (window.confirm("Are you sure you want to delete this question? This will also delete all associated answers.")) {
+      try {
+        await deleteQuestion(question.id)
+        showToast('Question deleted successfully', 'info')
+        navigate('/')
+      } catch (err) {
+        showToast('Failed to delete question', 'error')
+      }
+    }
+  }
 
   useEffect(() => {
     if (id) {
@@ -65,12 +64,16 @@ export default function QuestionDetailPage() {
 
   useEffect(() => {
     if (question) {
-      setLocalUpvotes(question.upvotes || 0)
+      setLocalScore((question.upvotes || 0) - (question.downvotes || 0))
       if (user) {
         hasUpvotedQuestion(question.id).then(setUpvoted)
+        hasDownvotedQuestion(question.id).then(setDownvoted)
+      } else {
+        setUpvoted(false)
+        setDownvoted(false)
       }
     }
-  }, [question, user, hasUpvotedQuestion])
+  }, [question, user, hasUpvotedQuestion, hasDownvotedQuestion])
 
   const handleUpvote = async () => {
     if (!user) {
@@ -78,11 +81,55 @@ export default function QuestionDetailPage() {
       return
     }
     try {
-      await toggleQuestionUpvote(question.id)
-      setUpvoted(!upvoted)
-      setLocalUpvotes(prev => upvoted ? prev - 1 : prev + 1)
+      await toggleQuestionVote(question.id, true)
+      if (upvoted) {
+        setUpvoted(false)
+        setLocalScore(prev => prev - 1)
+      } else {
+        setUpvoted(true)
+        if (downvoted) {
+          setDownvoted(false)
+          setLocalScore(prev => prev + 2)
+        } else {
+          setLocalScore(prev => prev + 1)
+        }
+      }
+    } catch (err) {
+      showToast(err.message || 'Failed to upvote', 'error')
+    }
+  }
+
+  const handleDownvote = async () => {
+    if (!user) {
+      showToast('Please sign in to downvote', 'info')
+      return
+    }
+    try {
+      await toggleQuestionVote(question.id, false)
+      if (downvoted) {
+        setDownvoted(false)
+        setLocalScore(prev => prev + 1)
+      } else {
+        setDownvoted(true)
+        if (upvoted) {
+          setUpvoted(false)
+          setLocalScore(prev => prev - 2)
+        } else {
+          setLocalScore(prev => prev - 1)
+        }
+      }
+    } catch (err) {
+      showToast(err.message || 'Failed to downvote', 'error')
+    }
+  }
+
+  const handleAcceptAnswer = async (answerId) => {
+    try {
+      await acceptAnswer(answerId)
+      showToast('Answer acceptance updated!', 'success')
+      fetchAnswers(id)
     } catch (err) {
-      showToast('Failed to upvote', 'error')
+      showToast(err.message || 'Failed to accept answer', 'error')
     }
   }
 
@@ -173,10 +220,10 @@ export default function QuestionDetailPage() {
       <Card className="p-6 md:p-8 mb-8">
         <div className="flex gap-5">
           {/* Vote Column */}
-          <div className="flex flex-col items-center gap-1 shrink-0">
+          <div className="flex flex-col items-center gap-1.5 shrink-0">
             <button
               onClick={handleUpvote}
-              className={`p-2 rounded-xl transition-all duration-200 ${
+              className={`p-2 rounded-xl transition-all duration-200 cursor-pointer ${
                 upvoted
                   ? 'text-indigo-600 bg-indigo-50 dark:bg-indigo-900/30'
                   : 'text-slate-400 hover:text-indigo-600 hover:bg-slate-100 dark:hover:bg-slate-700'
@@ -184,65 +231,31 @@ export default function QuestionDetailPage() {
             >
               <ChevronUp className="w-6 h-6" />
             </button>
-            <span className={`text-lg font-bold ${upvoted ? 'text-indigo-600' : 'text-slate-600 dark:text-slate-400'}`}>
-              {localUpvotes}
+            
+            <span className={`text-lg font-bold transition-colors ${upvoted ? 'text-indigo-600' : downvoted ? 'text-rose-500' : 'text-slate-650 dark:text-slate-400'}`}>
+              {localScore}
             </span>
-          </div>
 
-          {/* Content */}
+            <button
+              onClick={handleDownvote}
+              className={`p-2 rounded-xl transition-all duration-200 cursor-pointer ${
+                downvoted
+                  ? 'text-rose-550 bg-rose-50 dark:bg-rose-900/30'
+                  : 'text-slate-400 hover:text-rose-500 hover:bg-slate-100 dark:hover:bg-slate-700'
+              }`}
+            >
+              <ChevronDown className="w-6 h-6" />
+            </button>
+          </div>
           <div className="flex-1 min-w-0">
-            <div className="flex flex-col gap-4 mb-4">
-              <div className="flex items-start justify-between gap-4">
-                <div>
-                  <h1 className="text-xl md:text-2xl font-bold text-slate-800 dark:text-white">
-                    {titleTranslation.displayText}
-                  </h1>
-                  {titleTranslation.isTranslated && (
-                    <div className="mt-2">
-                      <TranslationBadge
-                        originalLanguage={titleTranslation.originalLanguage}
-                        targetLanguage={titleTranslation.currentLanguage}
-                      />
-                    </div>
-                  )}
-                </div>
-                <TranslationButton
-                  originalLanguage={titleTranslation.originalLanguage}
-                  currentLanguage={titleTranslation.currentLanguage}
-                  isTranslated={titleTranslation.isTranslated}
-                  status={titleTranslation.status}
-                  error={titleTranslation.error}
-                  onTranslate={titleTranslation.translate}
-                  onReset={titleTranslation.resetTranslation}
-                />
-              </div>
+            <h1 className="text-xl md:text-2xl font-bold text-slate-800 dark:text-white mb-4">
+              {question.title}
+            </h1>
 
-              <div className="prose prose-slate dark:prose-invert max-w-none">
-                <div className="flex items-start justify-between gap-4">
-                  <div className="flex-1">
-                    <p className="text-slate-600 dark:text-slate-300 whitespace-pre-wrap leading-relaxed">
-                      {descriptionTranslation.displayText}
-                    </p>
-                    {descriptionTranslation.isTranslated && (
-                      <div className="mt-2">
-                        <TranslationBadge
-                          originalLanguage={descriptionTranslation.originalLanguage}
-                          targetLanguage={descriptionTranslation.currentLanguage}
-                        />
-                      </div>
-                    )}
-                  </div>
-                  <TranslationButton
-                    originalLanguage={descriptionTranslation.originalLanguage}
-                    currentLanguage={descriptionTranslation.currentLanguage}
-                    isTranslated={descriptionTranslation.isTranslated}
-                    status={descriptionTranslation.status}
-                    error={descriptionTranslation.error}
-                    onTranslate={descriptionTranslation.translate}
-                    onReset={descriptionTranslation.resetTranslation}
-                  />
-                </div>
-              </div>
+            <div className="prose prose-slate dark:prose-invert max-w-none mb-6">
+              <p className="text-slate-600 dark:text-slate-300 whitespace-pre-wrap leading-relaxed">
+                {question.description}
+              </p>
             </div>
 
             {/* Attachment */}
@@ -284,6 +297,16 @@ export default function QuestionDetailPage() {
                   Attachment
                 </span>
               )}
+              {(isAdmin || (user && (user.id === question.user_id || user.id === question.users?.id))) && (
+                <button
+                  onClick={handleQuestionDelete}
+                  className="flex items-center gap-1 text-sm text-red-500 hover:text-red-600 dark:hover:text-red-450 transition-colors font-semibold cursor-pointer"
+                  title="Delete Question"
+                >
+                  <Trash2 className="w-4 h-4" />
+                  Delete Question
+                </button>
+              )}
               <div className="ml-auto flex items-center gap-2">
                 <Avatar
                   src={question.users?.avatar}
@@ -302,20 +325,20 @@ export default function QuestionDetailPage() {
         </div>
       </Card>
 
-      {/* Answers Section */}
       <div className="mb-8">
         <AnswerList
           answers={answers}
           loading={aLoading}
           isAdmin={isAdmin}
           userId={user?.id}
+          isQuestionOwner={user && (user.id === question.user_id || user.id === question.users?.id)}
           onVerify={handleVerify}
           onReject={handleReject}
           onDelete={handleDelete}
           onSpam={handleSpam}
+          onAccept={handleAcceptAnswer}
         />
       </div>
-
       {/* Answer Form */}
       <div className="mb-8">
         <AnswerForm questionId={id} onSubmitted={handleAnswerSubmitted} />
diff --git a/supabase/migration.sql b/supabase/migration.sql
new file mode 100644
index 0000000..0ee00dc
--- /dev/null
+++ b/supabase/migration.sql
@@ -0,0 +1,847 @@
+-- AnswerHub Reputation, Badges & Leaderboard Migration
+-- Run this in your Supabase SQL Editor
+
+-- ============================================
+-- 1. SCHEMA UPDATES (TABLES & COLUMNS)
+-- ============================================
+
+-- Alter public.users to add reputation cache
+ALTER TABLE public.users 
+ADD COLUMN IF NOT EXISTS reputation_points INTEGER DEFAULT 0;
+
+-- Alter public.questions to add downvotes cache
+ALTER TABLE public.questions 
+ADD COLUMN IF NOT EXISTS downvotes INTEGER DEFAULT 0;
+
+-- Alter public.answers to add accepted status and downvotes cache
+ALTER TABLE public.answers 
+ADD COLUMN IF NOT EXISTS is_accepted BOOLEAN DEFAULT FALSE,
+ADD COLUMN IF NOT EXISTS downvotes INTEGER DEFAULT 0;
+
+-- Create Badges Table
+CREATE TABLE IF NOT EXISTS public.badges (
+  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
+  badge_name TEXT NOT NULL UNIQUE,
+  badge_type TEXT NOT NULL CHECK (badge_type IN ('bronze', 'silver', 'gold', 'diamond', 'special')),
+  description TEXT NOT NULL,
+  icon TEXT NOT NULL,
+  created_at TIMESTAMPTZ DEFAULT NOW()
+);
+
+-- Create User Badges Table (junction table)
+CREATE TABLE IF NOT EXISTS public.user_badges (
+  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
+  user_id UUID NOT NULL REFERENCES public.users(id) ON DELETE CASCADE,
+  badge_id UUID NOT NULL REFERENCES public.badges(id) ON DELETE CASCADE,
+  earned_at TIMESTAMPTZ DEFAULT NOW(),
+  UNIQUE (user_id, badge_id)
+);
+
+-- Create Reputation Logs Table
+CREATE TABLE IF NOT EXISTS public.reputation_logs (
+  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
+  user_id UUID NOT NULL REFERENCES public.users(id) ON DELETE CASCADE,
+  action_type TEXT NOT NULL CHECK (action_type IN (
+    'ask_question', 'post_answer', 
+    'question_upvote', 'question_downvote', 
+    'answer_upvote', 'answer_downvote', 
+    'answer_accepted', 'daily_login',
+    'admin_adjustment'
+  )),
+  points_awarded INTEGER NOT NULL,
+  reference_id UUID NOT NULL,
+  created_at TIMESTAMPTZ DEFAULT NOW(),
+  UNIQUE (action_type, reference_id)
+);
+
+-- Create Question Downvotes Table (prevents double downvoting)
+CREATE TABLE IF NOT EXISTS public.question_downvotes (
+  question_id UUID REFERENCES public.questions(id) ON DELETE CASCADE,
+  user_id UUID REFERENCES public.users(id) ON DELETE CASCADE,
+  PRIMARY KEY (question_id, user_id)
+);
+
+-- Create Answer Downvotes Table (prevents double downvoting)
+CREATE TABLE IF NOT EXISTS public.answer_downvotes (
+  answer_id UUID REFERENCES public.answers(id) ON DELETE CASCADE,
+  user_id UUID REFERENCES public.users(id) ON DELETE CASCADE,
+  PRIMARY KEY (answer_id, user_id)
+);
+
+-- ============================================
+-- 2. INDEXING FOR PERFORMANCE
+-- ============================================
+CREATE INDEX IF NOT EXISTS idx_reputation_logs_user ON public.reputation_logs(user_id);
+CREATE INDEX IF NOT EXISTS idx_reputation_logs_created_at ON public.reputation_logs(created_at DESC);
+CREATE INDEX IF NOT EXISTS idx_user_badges_user ON public.user_badges(user_id);
+CREATE INDEX IF NOT EXISTS idx_answers_is_accepted ON public.answers(is_accepted);
+
+-- ============================================
+-- 3. SEED DATA FOR BADGES
+-- ============================================
+INSERT INTO public.badges (id, badge_name, badge_type, description, icon) VALUES
+  ('00000000-0000-0000-0000-000000000001', 'Beginner Contributor', 'bronze', 'Earn 10 reputation points', 'Award'),
+  ('00000000-0000-0000-0000-000000000002', 'First Question', 'bronze', 'Ask your first question', 'HelpCircle'),
+  ('00000000-0000-0000-0000-000000000003', 'First Answer', 'bronze', 'Post your first answer', 'MessageCircle'),
+  
+  ('00000000-0000-0000-0000-000000000004', 'Knowledge Sharer', 'silver', 'Earn 100 reputation points', 'BookOpen'),
+  ('00000000-0000-0000-0000-000000000005', '10 Accepted Answers', 'silver', 'Have 10 of your answers accepted', 'CheckCircle'),
+  ('00000000-0000-0000-0000-000000000006', 'Helpful Member', 'silver', 'Receive 10 upvotes across your posts', 'ThumbsUp'),
+  
+  ('00000000-0000-0000-0000-000000000007', 'Expert Contributor', 'gold', 'Earn 500 reputation points', 'Sparkles'),
+  ('00000000-0000-0000-0000-000000000008', '50 Upvotes Received', 'gold', 'Receive 50 upvotes across your posts', 'Flame'),
+  ('00000000-0000-0000-0000-000000000009', 'Problem Solver', 'gold', 'Have 5 of your answers accepted', 'Check'),
+  
+  ('00000000-0000-0000-0000-000000000010', 'Community Champion', 'diamond', 'Earn 1000 reputation points', 'Shield'),
+  ('00000000-0000-0000-0000-000000000011', 'Top Contributor', 'diamond', 'Receive 100 upvotes across your posts', 'Trophy'),
+  ('00000000-0000-0000-0000-000000000012', 'Elite Expert', 'diamond', 'Earn 2000 reputation points', 'Star'),
+  
+  ('00000000-0000-0000-0000-000000000013', 'Community Leader', 'special', 'Manually awarded by administrators', 'Crown'),
+  ('00000000-0000-0000-0000-000000000014', 'Top Contributor of the Month', 'special', 'Earn the most reputation points in a single month', 'TrendingUp'),
+  ('00000000-0000-0000-0000-000000000015', 'Fast Responder', 'special', 'Answer within 15 minutes of question creation and get verified', 'Zap'),
+  ('00000000-0000-0000-0000-000000000016', 'Innovation Guru', 'special', 'Have a question with 10+ upvotes or 5+ tags', 'Lightbulb')
+ON CONFLICT (id) DO UPDATE SET
+  badge_name = EXCLUDED.badge_name,
+  badge_type = EXCLUDED.badge_type,
+  description = EXCLUDED.description,
+  icon = EXCLUDED.icon;
+
+-- ============================================
+-- 4. VOTING SYSTEM RPC FUNCTIONS
+-- ============================================
+
+-- Unified function to toggle question votes (up or down)
+CREATE OR REPLACE FUNCTION public.toggle_question_vote(q_id UUID, is_upvote BOOLEAN)
+RETURNS VOID AS $$
+DECLARE
+  voter_id UUID;
+  post_owner_id UUID;
+  has_upvoted BOOLEAN;
+  has_downvoted BOOLEAN;
+BEGIN
+  voter_id := auth.uid();
+  IF voter_id IS NULL THEN
+    RAISE EXCEPTION 'You must be logged in to vote.';
+  END IF;
+
+  -- Get question owner
+  SELECT user_id INTO post_owner_id FROM public.questions WHERE id = q_id;
+  IF post_owner_id = voter_id THEN
+    RAISE EXCEPTION 'You cannot vote on your own question.';
+  END IF;
+
+  -- Check current votes
+  SELECT EXISTS(SELECT 1 FROM public.question_upvotes WHERE question_id = q_id AND user_id = voter_id) INTO has_upvoted;
+  SELECT EXISTS(SELECT 1 FROM public.question_downvotes WHERE question_id = q_id AND user_id = voter_id) INTO has_downvoted;
+
+  IF is_upvote THEN
+    -- If already upvoted, remove it
+    IF has_upvoted THEN
+      DELETE FROM public.question_upvotes WHERE question_id = q_id AND user_id = voter_id;
+    ELSE
+      -- Add upvote, remove downvote if present
+      INSERT INTO public.question_upvotes (question_id, user_id) VALUES (q_id, voter_id);
+      IF has_downvoted THEN
+        DELETE FROM public.question_downvotes WHERE question_id = q_id AND user_id = voter_id;
+      END IF;
+    END IF;
+  ELSE
+    -- If already downvoted, remove it
+    IF has_downvoted THEN
+      DELETE FROM public.question_downvotes WHERE question_id = q_id AND user_id = voter_id;
+    ELSE
+      -- Add downvote, remove upvote if present
+      INSERT INTO public.question_downvotes (question_id, user_id) VALUES (q_id, voter_id);
+      IF has_upvoted THEN
+        DELETE FROM public.question_upvotes WHERE question_id = q_id AND user_id = voter_id;
+      END IF;
+    END IF;
+  END IF;
+END;
+$$ LANGUAGE plpgsql SECURITY DEFINER;
+
+-- Unified function to toggle answer votes (up or down)
+CREATE OR REPLACE FUNCTION public.toggle_answer_vote(a_id UUID, is_upvote BOOLEAN)
+RETURNS VOID AS $$
+DECLARE
+  voter_id UUID;
+  post_owner_id UUID;
+  has_upvoted BOOLEAN;
+  has_downvoted BOOLEAN;
+BEGIN
+  voter_id := auth.uid();
+  IF voter_id IS NULL THEN
+    RAISE EXCEPTION 'You must be logged in to vote.';
+  END IF;
+
+  -- Get answer owner
+  SELECT user_id INTO post_owner_id FROM public.answers WHERE id = a_id;
+  IF post_owner_id = voter_id THEN
+    RAISE EXCEPTION 'You cannot vote on your own answer.';
+  END IF;
+
+  -- Check current votes
+  SELECT EXISTS(SELECT 1 FROM public.answer_upvotes WHERE answer_id = a_id AND user_id = voter_id) INTO has_upvoted;
+  SELECT EXISTS(SELECT 1 FROM public.answer_downvotes WHERE answer_id = a_id AND user_id = voter_id) INTO has_downvoted;
+
+  IF is_upvote THEN
+    -- If already upvoted, remove it
+    IF has_upvoted THEN
+      DELETE FROM public.answer_upvotes WHERE answer_id = a_id AND user_id = voter_id;
+    ELSE
+      -- Add upvote, remove downvote if present
+      INSERT INTO public.answer_upvotes (answer_id, user_id) VALUES (a_id, voter_id);
+      IF has_downvoted THEN
+        DELETE FROM public.answer_downvotes WHERE answer_id = a_id AND user_id = voter_id;
+      END IF;
+    END IF;
+  ELSE
+    -- If already downvoted, remove it
+    IF has_downvoted THEN
+      DELETE FROM public.answer_downvotes WHERE answer_id = a_id AND user_id = voter_id;
+    ELSE
+      -- Add downvote, remove upvote if present
+      INSERT INTO public.answer_downvotes (answer_id, user_id) VALUES (a_id, voter_id);
+      IF has_upvoted THEN
+        DELETE FROM public.answer_upvotes WHERE answer_id = a_id AND user_id = voter_id;
+      END IF;
+    END IF;
+  END IF;
+END;
+$$ LANGUAGE plpgsql SECURITY DEFINER;
+
+
+-- ============================================
+-- 5. COUNTER SYNC TRIGGERS
+-- ============================================
+
+-- Trigger to recalculate question votes cache
+CREATE OR REPLACE FUNCTION public.sync_question_votes()
+RETURNS TRIGGER AS $$
+DECLARE
+  q_id UUID;
+BEGIN
+  IF TG_OP = 'DELETE' THEN
+    q_id := OLD.question_id;
+  ELSE
+    q_id := NEW.question_id;
+  END IF;
+
+  UPDATE public.questions 
+  SET 
+    upvotes = (SELECT COUNT(*) FROM public.question_upvotes WHERE question_id = q_id),
+    downvotes = (SELECT COUNT(*) FROM public.question_downvotes WHERE question_id = q_id)
+  WHERE id = q_id;
+
+  RETURN NULL;
+END;
+$$ LANGUAGE plpgsql SECURITY DEFINER;
+
+DROP TRIGGER IF EXISTS on_question_upvote_change ON public.question_upvotes;
+CREATE TRIGGER on_question_upvote_change
+  AFTER INSERT OR DELETE ON public.question_upvotes
+  FOR EACH ROW EXECUTE FUNCTION public.sync_question_votes();
+
+DROP TRIGGER IF EXISTS on_question_downvote_change ON public.question_downvotes;
+CREATE TRIGGER on_question_downvote_change
+  AFTER INSERT OR DELETE ON public.question_downvotes
+  FOR EACH ROW EXECUTE FUNCTION public.sync_question_votes();
+
+-- Trigger to recalculate answer votes cache
+CREATE OR REPLACE FUNCTION public.sync_answer_votes()
+RETURNS TRIGGER AS $$
+DECLARE
+  a_id UUID;
+BEGIN
+  IF TG_OP = 'DELETE' THEN
+    a_id := OLD.answer_id;
+  ELSE
+    a_id := NEW.answer_id;
+  END IF;
+
+  UPDATE public.answers 
+  SET 
+    upvotes = (SELECT COUNT(*) FROM public.answer_upvotes WHERE answer_id = a_id),
+    downvotes = (SELECT COUNT(*) FROM public.answer_downvotes WHERE answer_id = a_id)
+  WHERE id = a_id;
+
+  RETURN NULL;
+END;
+$$ LANGUAGE plpgsql SECURITY DEFINER;
+
+DROP TRIGGER IF EXISTS on_answer_upvote_change ON public.answer_upvotes;
+CREATE TRIGGER on_answer_upvote_change
+  AFTER INSERT OR DELETE ON public.answer_upvotes
+  FOR EACH ROW EXECUTE FUNCTION public.sync_answer_votes();
+
+DROP TRIGGER IF EXISTS on_answer_downvote_change ON public.answer_downvotes;
+CREATE TRIGGER on_answer_downvote_change
+  AFTER INSERT OR DELETE ON public.answer_downvotes
+  FOR EACH ROW EXECUTE FUNCTION public.sync_answer_votes();
+
+
+-- ============================================
+-- 6. ACCEPT ANSWER RPC FUNCTION
+-- ============================================
+CREATE OR REPLACE FUNCTION public.accept_answer(a_id UUID)
+RETURNS BOOLEAN AS $$
+DECLARE
+  q_id UUID;
+  q_owner_id UUID;
+  current_status BOOLEAN;
+BEGIN
+  -- Retrieve question id and current accept status of this answer
+  SELECT question_id, is_accepted INTO q_id, current_status FROM public.answers WHERE id = a_id;
+  IF q_id IS NULL THEN
+    RAISE EXCEPTION 'Answer not found.';
+  END IF;
+
+  -- Get question owner id
+  SELECT user_id INTO q_owner_id FROM public.questions WHERE id = q_id;
+  
+  -- Security check
+  IF q_owner_id IS NULL OR q_owner_id <> auth.uid() THEN
+    RAISE EXCEPTION 'Only the author of the question can accept an answer.';
+  END IF;
+
+  -- Clear acceptance for all answers of this question
+  UPDATE public.answers SET is_accepted = FALSE WHERE question_id = q_id;
+
+  -- Toggle acceptance state
+  IF NOT current_status OR current_status IS NULL THEN
+    UPDATE public.answers SET is_accepted = TRUE WHERE id = a_id;
+    RETURN TRUE;
+  ELSE
+    RETURN FALSE;
+  END IF;
+END;
+$$ LANGUAGE plpgsql SECURITY DEFINER;
+
+
+-- ============================================
+-- 7. REPUTATION POINTS & LOGGING TRIGGERS
+-- ============================================
+
+-- Trigger to update users.reputation_points based on reputation logs
+CREATE OR REPLACE FUNCTION public.sync_user_reputation()
+RETURNS TRIGGER AS $$
+DECLARE
+  target_user_id UUID;
+BEGIN
+  IF TG_OP = 'DELETE' THEN
+    target_user_id := OLD.user_id;
+  ELSE
+    target_user_id := NEW.user_id;
+  END IF;
+
+  UPDATE public.users 
+  SET reputation_points = COALESCE((
+    SELECT SUM(points_awarded) FROM public.reputation_logs WHERE user_id = target_user_id
+  ), 0)
+  WHERE id = target_user_id;
+
+  RETURN NULL;
+END;
+$$ LANGUAGE plpgsql SECURITY DEFINER;
+
+DROP TRIGGER IF EXISTS on_reputation_log_change ON public.reputation_logs;
+CREATE TRIGGER on_reputation_log_change
+  AFTER INSERT OR UPDATE OR DELETE ON public.reputation_logs
+  FOR EACH ROW EXECUTE FUNCTION public.sync_user_reputation();
+
+
+-- Trigger for Question Creation (+5 points)
+CREATE OR REPLACE FUNCTION public.log_question_reputation()
+RETURNS TRIGGER AS $$
+BEGIN
+  IF TG_OP = 'INSERT' AND NEW.user_id IS NOT NULL THEN
+    INSERT INTO public.reputation_logs (user_id, action_type, points_awarded, reference_id)
+    VALUES (NEW.user_id, 'ask_question', 5, NEW.id)
+    ON CONFLICT (action_type, reference_id) DO NOTHING;
+  ELSIF TG_OP = 'DELETE' THEN
+    DELETE FROM public.reputation_logs WHERE action_type = 'ask_question' AND reference_id = OLD.id;
+  END IF;
+  RETURN NULL;
+END;
+$$ LANGUAGE plpgsql SECURITY DEFINER;
+
+DROP TRIGGER IF EXISTS on_question_reputation ON public.questions;
+CREATE TRIGGER on_question_reputation
+  AFTER INSERT OR DELETE ON public.questions
+  FOR EACH ROW EXECUTE FUNCTION public.log_question_reputation();
+
+
+-- Trigger for Answer Creation (+10 points) & Acceptance (+30 points)
+CREATE OR REPLACE FUNCTION public.log_answer_reputation()
+RETURNS TRIGGER AS $$
+BEGIN
+  IF TG_OP = 'INSERT' AND NEW.user_id IS NOT NULL THEN
+    IF NEW.verification_status <> 'spam' AND NEW.verification_status <> 'rejected' THEN
+      INSERT INTO public.reputation_logs (user_id, action_type, points_awarded, reference_id)
+      VALUES (NEW.user_id, 'post_answer', 10, NEW.id)
+      ON CONFLICT (action_type, reference_id) DO NOTHING;
+    END IF;
+  ELSIF TG_OP = 'UPDATE' THEN
+    -- Post answer reward handling on moderation
+    IF NEW.verification_status <> 'spam' AND NEW.verification_status <> 'rejected' AND NEW.user_id IS NOT NULL THEN
+      INSERT INTO public.reputation_logs (user_id, action_type, points_awarded, reference_id)
+      VALUES (NEW.user_id, 'post_answer', 10, NEW.id)
+      ON CONFLICT (action_type, reference_id) DO NOTHING;
+    ELSIF (NEW.verification_status = 'spam' OR NEW.verification_status = 'rejected') THEN
+      DELETE FROM public.reputation_logs WHERE action_type = 'post_answer' AND reference_id = NEW.id;
+    END IF;
+
+    -- Answer accepted (+30 points)
+    IF NEW.is_accepted = TRUE AND (OLD.is_accepted = FALSE OR OLD.is_accepted IS NULL) AND NEW.user_id IS NOT NULL THEN
+      INSERT INTO public.reputation_logs (user_id, action_type, points_awarded, reference_id)
+      VALUES (NEW.user_id, 'answer_accepted', 30, NEW.id)
+      ON CONFLICT (action_type, reference_id) DO NOTHING;
+    ELSIF NEW.is_accepted = FALSE AND OLD.is_accepted = TRUE THEN
+      DELETE FROM public.reputation_logs WHERE action_type = 'answer_accepted' AND reference_id = NEW.id;
+    END IF;
+  ELSIF TG_OP = 'DELETE' THEN
+    DELETE FROM public.reputation_logs WHERE reference_id = OLD.id AND action_type IN ('post_answer', 'answer_accepted');
+  END IF;
+  RETURN NULL;
+END;
+$$ LANGUAGE plpgsql SECURITY DEFINER;
+
+DROP TRIGGER IF EXISTS on_answer_reputation ON public.answers;
+CREATE TRIGGER on_answer_reputation
+  AFTER INSERT OR UPDATE OR DELETE ON public.answers
+  FOR EACH ROW EXECUTE FUNCTION public.log_answer_reputation();
+
+
+-- Trigger for Question Upvotes (+5 points to Owner)
+CREATE OR REPLACE FUNCTION public.log_question_upvote_reputation()
+RETURNS TRIGGER AS $$
+DECLARE
+  owner_id UUID;
+  ref_uuid UUID;
+BEGIN
+  IF TG_OP = 'INSERT' THEN
+    SELECT user_id INTO owner_id FROM public.questions WHERE id = NEW.question_id;
+    ref_uuid := CAST(md5(NEW.question_id::text || NEW.user_id::text) AS UUID);
+    
+    IF owner_id IS NOT NULL THEN
+      INSERT INTO public.reputation_logs (user_id, action_type, points_awarded, reference_id)
+      VALUES (owner_id, 'question_upvote', 5, ref_uuid)
+      ON CONFLICT (action_type, reference_id) DO NOTHING;
+    END IF;
+  ELSIF TG_OP = 'DELETE' THEN
+    ref_uuid := CAST(md5(OLD.question_id::text || OLD.user_id::text) AS UUID);
+    DELETE FROM public.reputation_logs WHERE action_type = 'question_upvote' AND reference_id = ref_uuid;
+  END IF;
+  RETURN NULL;
+END;
+$$ LANGUAGE plpgsql SECURITY DEFINER;
+
+DROP TRIGGER IF EXISTS on_question_upvote_reputation ON public.question_upvotes;
+CREATE TRIGGER on_question_upvote_reputation
+  AFTER INSERT OR DELETE ON public.question_upvotes
+  FOR EACH ROW EXECUTE FUNCTION public.log_question_upvote_reputation();
+
+
+-- Trigger for Question Downvotes (-2 points to Owner)
+CREATE OR REPLACE FUNCTION public.log_question_downvote_reputation()
+RETURNS TRIGGER AS $$
+DECLARE
+  owner_id UUID;
+  ref_uuid UUID;
+BEGIN
+  IF TG_OP = 'INSERT' THEN
+    SELECT user_id INTO owner_id FROM public.questions WHERE id = NEW.question_id;
+    ref_uuid := CAST(md5(NEW.question_id::text || NEW.user_id::text) AS UUID);
+    
+    IF owner_id IS NOT NULL THEN
+      INSERT INTO public.reputation_logs (user_id, action_type, points_awarded, reference_id)
+      VALUES (owner_id, 'question_downvote', -2, ref_uuid)
+      ON CONFLICT (action_type, reference_id) DO NOTHING;
+    END IF;
+  ELSIF TG_OP = 'DELETE' THEN
+    ref_uuid := CAST(md5(OLD.question_id::text || OLD.user_id::text) AS UUID);
+    DELETE FROM public.reputation_logs WHERE action_type = 'question_downvote' AND reference_id = ref_uuid;
+  END IF;
+  RETURN NULL;
+END;
+$$ LANGUAGE plpgsql SECURITY DEFINER;
+
+DROP TRIGGER IF EXISTS on_question_downvote_reputation ON public.question_downvotes;
+CREATE TRIGGER on_question_downvote_reputation
+  AFTER INSERT OR DELETE ON public.question_downvotes
+  FOR EACH ROW EXECUTE FUNCTION public.log_question_downvote_reputation();
+
+
+-- Trigger for Answer Upvotes (+10 points to Owner)
+CREATE OR REPLACE FUNCTION public.log_answer_upvote_reputation()
+RETURNS TRIGGER AS $$
+DECLARE
+  owner_id UUID;
+  ref_uuid UUID;
+BEGIN
+  IF TG_OP = 'INSERT' THEN
+    SELECT user_id INTO owner_id FROM public.answers WHERE id = NEW.answer_id;
+    ref_uuid := CAST(md5(NEW.answer_id::text || NEW.user_id::text) AS UUID);
+    
+    IF owner_id IS NOT NULL THEN
+      INSERT INTO public.reputation_logs (user_id, action_type, points_awarded, reference_id)
+      VALUES (owner_id, 'answer_upvote', 10, ref_uuid)
+      ON CONFLICT (action_type, reference_id) DO NOTHING;
+    END IF;
+  ELSIF TG_OP = 'DELETE' THEN
+    ref_uuid := CAST(md5(OLD.answer_id::text || OLD.user_id::text) AS UUID);
+    DELETE FROM public.reputation_logs WHERE action_type = 'answer_upvote' AND reference_id = ref_uuid;
+  END IF;
+  RETURN NULL;
+END;
+$$ LANGUAGE plpgsql SECURITY DEFINER;
+
+DROP TRIGGER IF EXISTS on_answer_upvote_reputation ON public.answer_upvotes;
+CREATE TRIGGER on_answer_upvote_reputation
+  AFTER INSERT OR DELETE ON public.answer_upvotes
+  FOR EACH ROW EXECUTE FUNCTION public.log_answer_upvote_reputation();
+
+
+-- Trigger for Answer Downvotes (-2 points to Owner)
+CREATE OR REPLACE FUNCTION public.log_answer_downvote_reputation()
+RETURNS TRIGGER AS $$
+DECLARE
+  owner_id UUID;
+  ref_uuid UUID;
+BEGIN
+  IF TG_OP = 'INSERT' THEN
+    SELECT user_id INTO owner_id FROM public.answers WHERE id = NEW.answer_id;
+    ref_uuid := CAST(md5(NEW.answer_id::text || NEW.user_id::text) AS UUID);
+    
+    IF owner_id IS NOT NULL THEN
+      INSERT INTO public.reputation_logs (user_id, action_type, points_awarded, reference_id)
+      VALUES (owner_id, 'answer_downvote', -2, ref_uuid)
+      ON CONFLICT (action_type, reference_id) DO NOTHING;
+    END IF;
+  ELSIF TG_OP = 'DELETE' THEN
+    ref_uuid := CAST(md5(OLD.answer_id::text || OLD.user_id::text) AS UUID);
+    DELETE FROM public.reputation_logs WHERE action_type = 'answer_downvote' AND reference_id = ref_uuid;
+  END IF;
+  RETURN NULL;
+END;
+$$ LANGUAGE plpgsql SECURITY DEFINER;
+
+DROP TRIGGER IF EXISTS on_answer_downvote_reputation ON public.answer_downvotes;
+CREATE TRIGGER on_answer_downvote_reputation
+  AFTER INSERT OR DELETE ON public.answer_downvotes
+  FOR EACH ROW EXECUTE FUNCTION public.log_answer_downvote_reputation();
+
+
+-- RPC function to award daily login points
+CREATE OR REPLACE FUNCTION public.award_daily_login()
+RETURNS BOOLEAN AS $$
+DECLARE
+  u_id UUID;
+  today_date DATE;
+  ref_uuid UUID;
+  already_logged_today BOOLEAN;
+BEGIN
+  u_id := auth.uid();
+  IF u_id IS NULL THEN
+    RAISE EXCEPTION 'Must be authenticated.';
+  END IF;
+
+  -- Determine today's date in local calendar/voter timezone (or UTC)
+  today_date := CURRENT_DATE;
+  ref_uuid := CAST(md5(u_id::text || today_date::text) AS UUID);
+
+  SELECT EXISTS(
+    SELECT 1 FROM public.reputation_logs 
+    WHERE user_id = u_id AND action_type = 'daily_login' AND reference_id = ref_uuid
+  ) INTO already_logged_today;
+
+  IF NOT already_logged_today THEN
+    INSERT INTO public.reputation_logs (user_id, action_type, points_awarded, reference_id)
+    VALUES (u_id, 'daily_login', 2, ref_uuid)
+    ON CONFLICT DO NOTHING;
+    RETURN TRUE;
+  END IF;
+
+  RETURN FALSE;
+END;
+$$ LANGUAGE plpgsql SECURITY DEFINER;
+
+
+-- ============================================
+-- 8. AUTOMATIC BADGE ASSIGNMENT TRIGGERS
+-- ============================================
+
+CREATE OR REPLACE FUNCTION public.check_and_award_badges(u_id UUID)
+RETURNS VOID AS $$
+DECLARE
+  rep INT;
+  q_count INT;
+  a_count INT;
+  accepted_count INT;
+  upvotes_received INT;
+  has_fast_response BOOLEAN;
+  has_innovation BOOLEAN;
+BEGIN
+  -- Get user reputation
+  SELECT COALESCE(reputation_points, 0) INTO rep FROM public.users WHERE id = u_id;
+
+  -- Get questions count
+  SELECT COUNT(*) INTO q_count FROM public.questions WHERE user_id = u_id;
+
+  -- Get verified answers count
+  SELECT COUNT(*) INTO a_count FROM public.answers WHERE user_id = u_id AND verification_status = 'verified';
+
+  -- Get accepted answers count
+  SELECT COUNT(*) INTO accepted_count FROM public.answers WHERE user_id = u_id AND is_accepted = TRUE;
+
+  -- Get total upvotes received on user questions & answers
+  SELECT COALESCE((SELECT SUM(upvotes) FROM public.questions WHERE user_id = u_id), 0) +
+         COALESCE((SELECT SUM(upvotes) FROM public.answers WHERE user_id = u_id), 0)
+  INTO upvotes_received;
+
+  -- 1. Beginner Contributor (10 reputation)
+  IF rep >= 10 THEN
+    INSERT INTO public.user_badges (user_id, badge_id) VALUES (u_id, '00000000-0000-0000-0000-000000000001') ON CONFLICT DO NOTHING;
+  END IF;
+
+  -- 2. First Question
+  IF q_count >= 1 THEN
+    INSERT INTO public.user_badges (user_id, badge_id) VALUES (u_id, '00000000-0000-0000-0000-000000000002') ON CONFLICT DO NOTHING;
+  END IF;
+
+  -- 3. First Answer
+  IF a_count >= 1 THEN
+    INSERT INTO public.user_badges (user_id, badge_id) VALUES (u_id, '00000000-0000-0000-0000-000000000003') ON CONFLICT DO NOTHING;
+  END IF;
+
+  -- 4. Knowledge Sharer (100 reputation)
+  IF rep >= 100 THEN
+    INSERT INTO public.user_badges (user_id, badge_id) VALUES (u_id, '00000000-0000-0000-0000-000000000004') ON CONFLICT DO NOTHING;
+  END IF;
+
+  -- 5. 10 Accepted Answers
+  IF accepted_count >= 10 THEN
+    INSERT INTO public.user_badges (user_id, badge_id) VALUES (u_id, '00000000-0000-0000-0000-000000000005') ON CONFLICT DO NOTHING;
+  END IF;
+
+  -- 6. Helpful Member (10 upvotes received)
+  IF upvotes_received >= 10 THEN
+    INSERT INTO public.user_badges (user_id, badge_id) VALUES (u_id, '00000000-0000-0000-0000-000000000006') ON CONFLICT DO NOTHING;
+  END IF;
+
+  -- 7. Expert Contributor (500 reputation)
+  IF rep >= 500 THEN
+    INSERT INTO public.user_badges (user_id, badge_id) VALUES (u_id, '00000000-0000-0000-0000-000000000007') ON CONFLICT DO NOTHING;
+  END IF;
+
+  -- 8. 50 Upvotes Received
+  IF upvotes_received >= 50 THEN
+    INSERT INTO public.user_badges (user_id, badge_id) VALUES (u_id, '00000000-0000-0000-0000-000000000008') ON CONFLICT DO NOTHING;
+  END IF;
+
+  -- 9. Problem Solver (5 accepted answers)
+  IF accepted_count >= 5 THEN
+    INSERT INTO public.user_badges (user_id, badge_id) VALUES (u_id, '00000000-0000-0000-0000-000000000009') ON CONFLICT DO NOTHING;
+  END IF;
+
+  -- 10. Community Champion (1000 reputation)
+  IF rep >= 1000 THEN
+    INSERT INTO public.user_badges (user_id, badge_id) VALUES (u_id, '00000000-0000-0000-0000-000000000010') ON CONFLICT DO NOTHING;
+  END IF;
+
+  -- 11. Top Contributor (100 upvotes received)
+  IF upvotes_received >= 100 THEN
+    INSERT INTO public.user_badges (user_id, badge_id) VALUES (u_id, '00000000-0000-0000-0000-000000000011') ON CONFLICT DO NOTHING;
+  END IF;
+
+  -- 12. Elite Expert (2000 reputation)
+  IF rep >= 2000 THEN
+    INSERT INTO public.user_badges (user_id, badge_id) VALUES (u_id, '00000000-0000-0000-0000-000000000012') ON CONFLICT DO NOTHING;
+  END IF;
+
+  -- 15. Fast Responder: post a verified answer within 15 minutes of question creation
+  SELECT EXISTS (
+    SELECT 1 FROM public.answers a
+    JOIN public.questions q ON a.question_id = q.id
+    WHERE a.user_id = u_id AND a.verification_status = 'verified' AND a.created_at - q.created_at <= INTERVAL '15 minutes'
+  ) INTO has_fast_response;
+
+  IF has_fast_response THEN
+    INSERT INTO public.user_badges (user_id, badge_id) VALUES (u_id, '00000000-0000-0000-0000-000000000015') ON CONFLICT DO NOTHING;
+  END IF;
+
+  -- 16. Innovation Guru: has a question with 10+ upvotes or 5+ tags
+  SELECT EXISTS (
+    SELECT 1 FROM public.questions
+    WHERE user_id = u_id AND (upvotes >= 10 OR array_length(tags, 1) >= 5)
+  ) INTO has_innovation;
+
+  IF has_innovation THEN
+    INSERT INTO public.user_badges (user_id, badge_id) VALUES (u_id, '00000000-0000-0000-0000-000000000016') ON CONFLICT DO NOTHING;
+  END IF;
+
+END;
+$$ LANGUAGE plpgsql SECURITY DEFINER;
+
+-- Trigger logic for checking badges whenever reputation points are updated
+CREATE OR REPLACE FUNCTION public.trigger_check_badges()
+RETURNS TRIGGER AS $$
+BEGIN
+  PERFORM public.check_and_award_badges(NEW.id);
+  RETURN NEW;
+END;
+$$ LANGUAGE plpgsql SECURITY DEFINER;
+
+DROP TRIGGER IF EXISTS on_user_reputation_updated ON public.users;
+CREATE TRIGGER on_user_reputation_updated
+  AFTER UPDATE OF reputation_points ON public.users
+  FOR EACH ROW
+  EXECUTE FUNCTION public.trigger_check_badges();
+
+
+-- ============================================
+-- 9. LEADERBOARD RANGE QUERY FUNCTION
+-- ============================================
+
+CREATE OR REPLACE FUNCTION public.get_leaderboard(timeframe TEXT)
+RETURNS TABLE (
+  user_id UUID,
+  name TEXT,
+  avatar TEXT,
+  reputation_points BIGINT,
+  rank BIGINT,
+  rank_movement INTEGER,
+  total_badges BIGINT,
+  questions_asked BIGINT,
+  answers_posted BIGINT
+) AS $$
+BEGIN
+  IF timeframe = 'weekly' THEN
+    RETURN QUERY
+      WITH current_stats AS (
+        SELECT 
+          u.id as uid,
+          COALESCE(SUM(rl.points_awarded), 0)::BIGINT as current_rep,
+          DENSE_RANK() OVER (ORDER BY COALESCE(SUM(rl.points_awarded), 0) DESC, u.created_at ASC)::BIGINT as current_r
+        FROM public.users u
+        LEFT JOIN public.reputation_logs rl ON u.id = rl.user_id AND rl.created_at >= NOW() - INTERVAL '7 days'
+        GROUP BY u.id, u.created_at
+      )
+      SELECT 
+        u.id as user_id,
+        u.name,
+        u.avatar,
+        cs.current_rep as reputation_points,
+        cs.current_r as rank,
+        0::INTEGER as rank_movement,
+        (SELECT COUNT(*) FROM public.user_badges ub WHERE ub.user_id = u.id)::BIGINT as total_badges,
+        (SELECT COUNT(*) FROM public.questions q WHERE q.user_id = u.id)::BIGINT as questions_asked,
+        (SELECT COUNT(*) FROM public.answers a WHERE a.user_id = u.id AND a.verification_status = 'verified')::BIGINT as answers_posted
+      FROM public.users u
+      JOIN current_stats cs ON u.id = cs.uid
+      ORDER BY cs.current_r ASC;
+
+  ELSIF timeframe = 'monthly' THEN
+    RETURN QUERY
+      WITH current_stats AS (
+        SELECT 
+          u.id as uid,
+          COALESCE(SUM(rl.points_awarded), 0)::BIGINT as current_rep,
+          DENSE_RANK() OVER (ORDER BY COALESCE(SUM(rl.points_awarded), 0) DESC, u.created_at ASC)::BIGINT as current_r
+        FROM public.users u
+        LEFT JOIN public.reputation_logs rl ON u.id = rl.user_id AND rl.created_at >= NOW() - INTERVAL '30 days'
+        GROUP BY u.id, u.created_at
+      )
+      SELECT 
+        u.id as user_id,
+        u.name,
+        u.avatar,
+        cs.current_rep as reputation_points,
+        cs.current_r as rank,
+        0::INTEGER as rank_movement,
+        (SELECT COUNT(*) FROM public.user_badges ub WHERE ub.user_id = u.id)::BIGINT as total_badges,
+        (SELECT COUNT(*) FROM public.questions q WHERE q.user_id = u.id)::BIGINT as questions_asked,
+        (SELECT COUNT(*) FROM public.answers a WHERE a.user_id = u.id AND a.verification_status = 'verified')::BIGINT as answers_posted
+      FROM public.users u
+      JOIN current_stats cs ON u.id = cs.uid
+      ORDER BY cs.current_r ASC;
+
+  ELSE -- all time with historical movement
+    RETURN QUERY
+      WITH current_stats AS (
+        SELECT 
+          u.id as uid,
+          COALESCE(u.reputation_points, 0)::BIGINT as current_rep,
+          DENSE_RANK() OVER (ORDER BY COALESCE(u.reputation_points, 0) DESC, u.created_at ASC)::BIGINT as current_r
+        FROM public.users u
+      ),
+      historical_stats AS (
+        SELECT 
+          u.id as uid,
+          COALESCE(SUM(rl.points_awarded), 0) as historical_rep,
+          DENSE_RANK() OVER (ORDER BY COALESCE(SUM(rl.points_awarded), 0) DESC, u.created_at ASC)::BIGINT as historical_r
+        FROM public.users u
+        LEFT JOIN public.reputation_logs rl ON u.id = rl.user_id AND rl.created_at < NOW() - INTERVAL '7 days'
+        GROUP BY u.id, u.created_at
+      )
+      SELECT 
+        u.id as user_id,
+        u.name,
+        u.avatar,
+        cs.current_rep as reputation_points,
+        cs.current_r as rank,
+        (hs.historical_r - cs.current_r)::INTEGER as rank_movement,
+        (SELECT COUNT(*) FROM public.user_badges ub WHERE ub.user_id = u.id)::BIGINT as total_badges,
+        (SELECT COUNT(*) FROM public.questions q WHERE q.user_id = u.id)::BIGINT as questions_asked,
+        (SELECT COUNT(*) FROM public.answers a WHERE a.user_id = u.id AND a.verification_status = 'verified')::BIGINT as answers_posted
+      FROM public.users u
+      JOIN current_stats cs ON u.id = cs.uid
+      JOIN historical_stats hs ON u.id = hs.uid
+      ORDER BY cs.current_r ASC;
+  END IF;
+END;
+$$ LANGUAGE plpgsql SECURITY DEFINER;
+
+
+-- ============================================
+-- 10. ROW LEVEL SECURITY (RLS) POLICIES
+-- ============================================
+
+ALTER TABLE public.badges ENABLE ROW LEVEL SECURITY;
+ALTER TABLE public.user_badges ENABLE ROW LEVEL SECURITY;
+ALTER TABLE public.reputation_logs ENABLE ROW LEVEL SECURITY;
+ALTER TABLE public.question_downvotes ENABLE ROW LEVEL SECURITY;
+ALTER TABLE public.answer_downvotes ENABLE ROW LEVEL SECURITY;
+
+-- Badges
+CREATE POLICY "Badges are viewable by everyone" ON public.badges FOR SELECT USING (true);
+CREATE POLICY "Admins can manage badges" ON public.badges FOR ALL USING (
+  EXISTS (SELECT 1 FROM public.users WHERE id = auth.uid() AND role = 'admin')
+);
+
+-- User Badges
+CREATE POLICY "User badges are viewable by everyone" ON public.user_badges FOR SELECT USING (true);
+CREATE POLICY "System and admins can insert user badges" ON public.user_badges FOR INSERT WITH CHECK (true);
+CREATE POLICY "Admins can manage user badges" ON public.user_badges FOR ALL USING (
+  EXISTS (SELECT 1 FROM public.users WHERE id = auth.uid() AND role = 'admin')
+);
+
+-- Reputation Logs
+CREATE POLICY "Users can view own reputation logs" ON public.reputation_logs FOR SELECT USING (
+  auth.uid() = user_id OR
+  EXISTS (SELECT 1 FROM public.users WHERE id = auth.uid() AND role = 'admin')
+);
+CREATE POLICY "System and admins can insert reputation logs" ON public.reputation_logs FOR INSERT WITH CHECK (true);
+CREATE POLICY "Admins can adjust reputation logs" ON public.reputation_logs FOR ALL USING (
+  EXISTS (SELECT 1 FROM public.users WHERE id = auth.uid() AND role = 'admin')
+);
+
+-- Question Downvotes
+CREATE POLICY "Downvotes are viewable by everyone" ON public.question_downvotes FOR SELECT USING (true);
+CREATE POLICY "Authenticated users can manage downvotes" ON public.question_downvotes FOR INSERT WITH CHECK (auth.uid() = user_id);
+CREATE POLICY "Users can remove own downvotes" ON public.question_downvotes FOR DELETE USING (auth.uid() = user_id);
+
+-- Answer Downvotes
+CREATE POLICY "Answer downvotes are viewable by everyone" ON public.answer_downvotes FOR SELECT USING (true);
+CREATE POLICY "Authenticated users can manage answer downvotes" ON public.answer_downvotes FOR INSERT WITH CHECK (auth.uid() = user_id);
+CREATE POLICY "Users can remove own answer downvotes" ON public.answer_downvotes FOR DELETE USING (auth.uid() = user_id);
diff --git a/vercel.json b/vercel.json
new file mode 100644
index 0000000..1323cda
--- /dev/null
+++ b/vercel.json
@@ -0,0 +1,8 @@
+{
+  "rewrites": [
+    {
+      "source": "/(.*)",
+      "destination": "/index.html"
+    }
+  ]
+}