diff --git a/frontend/generic.png b/frontend/generic.png
new file mode 100644
index 00000000..6a0aa5a2
Binary files /dev/null and b/frontend/generic.png differ
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 4f5dd3ed..11ecc57c 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -77,6 +77,7 @@
       "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.29.0.tgz",
       "integrity": "sha512-CGOfOJqWjg2qW/Mb6zNsDm+u5vFQ8DxXfbM09z69p5Z6+mE1ikP2jUXw+j42Pf1XTYED2Rni5f95npYeuwMDQA==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@babel/code-frame": "^7.29.0",
         "@babel/generator": "^7.29.0",
@@ -364,7 +365,6 @@
       "resolved": "https://registry.npmjs.org/@eslint/config-array/-/config-array-0.21.2.tgz",
       "integrity": "sha512-nJl2KGTlrf9GjLimgIru+V/mzgSK0ABCDQRvxw5BjURL7WfH5uoWmizbH7QB6MmnMBd8cIC9uceWnezL1VZWWw==",
       "license": "Apache-2.0",
-      "peer": true,
       "dependencies": {
         "@eslint/object-schema": "^2.1.7",
         "debug": "^4.3.1",
@@ -379,7 +379,6 @@
       "resolved": "https://registry.npmjs.org/@eslint/config-helpers/-/config-helpers-0.4.2.tgz",
       "integrity": "sha512-gBrxN88gOIf3R7ja5K9slwNayVcZgK6SOUORm2uBzTeIEfeVaIhOpCtTox3P6R7o2jLFwLFTLnC7kU/RGcYEgw==",
       "license": "Apache-2.0",
-      "peer": true,
       "dependencies": {
         "@eslint/core": "^0.17.0"
       },
@@ -392,7 +391,6 @@
       "resolved": "https://registry.npmjs.org/@eslint/core/-/core-0.17.0.tgz",
       "integrity": "sha512-yL/sLrpmtDaFEiUj1osRP4TI2MDz1AddJL+jZ7KSqvBuliN4xqYY54IfdN8qD8Toa6g1iloph1fxQNkjOxrrpQ==",
       "license": "Apache-2.0",
-      "peer": true,
       "dependencies": {
         "@types/json-schema": "^7.0.15"
       },
@@ -405,7 +403,6 @@
       "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-3.3.5.tgz",
       "integrity": "sha512-4IlJx0X0qftVsN5E+/vGujTRIFtwuLbNsVUe7TO6zYPDR1O6nFwvwhIKEKSrl6dZchmYBITazxKoUYOjdtjlRg==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "ajv": "^6.14.0",
         "debug": "^4.3.2",
@@ -429,7 +426,6 @@
       "resolved": "https://registry.npmjs.org/globals/-/globals-14.0.0.tgz",
       "integrity": "sha512-oahGvuMGQlPw/ivIYBjVSrWAfWLBeku5tpPE2fOPLi+WHffIWbuh2tCjhyQhTBPMf5E9jDEH4FOmTYgYwbKwtQ==",
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=18"
       },
@@ -442,7 +438,6 @@
       "resolved": "https://registry.npmjs.org/@eslint/js/-/js-9.39.4.tgz",
       "integrity": "sha512-nE7DEIchvtiFTwBw4Lfbu59PG+kCofhjsKaCWzxTpt4lfRjRMqG6uMBzKXuEcyXhOHoUp9riAm7/aWYGhXZ9cw==",
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
       },
@@ -455,7 +450,6 @@
       "resolved": "https://registry.npmjs.org/@eslint/object-schema/-/object-schema-2.1.7.tgz",
       "integrity": "sha512-VtAOaymWVfZcmZbp6E2mympDIHvyjXs/12LqWYjVw6qjrfF+VK+fyG33kChz3nnK+SU5/NeHOqrTEHS8sXO3OA==",
       "license": "Apache-2.0",
-      "peer": true,
       "engines": {
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
       }
@@ -465,7 +459,6 @@
       "resolved": "https://registry.npmjs.org/@eslint/plugin-kit/-/plugin-kit-0.4.1.tgz",
       "integrity": "sha512-43/qtrDUokr7LJqoF2c3+RInu/t4zfrpYdoSDfYyhg52rwLV6TnOvdG4fXm7IkSB3wErkcmJS9iEhjVtOSEjjA==",
       "license": "Apache-2.0",
-      "peer": true,
       "dependencies": {
         "@eslint/core": "^0.17.0",
         "levn": "^0.4.1"
@@ -552,7 +545,6 @@
       "resolved": "https://registry.npmjs.org/@humanfs/core/-/core-0.19.1.tgz",
       "integrity": "sha512-5DyQ4+1JEUzejeK1JGICcideyfUbGixgS9jNgex5nqkW+cY7WZhxBigmieN5Qnw9ZosSNVC9KQKyb+GUaGyKUA==",
       "license": "Apache-2.0",
-      "peer": true,
       "engines": {
         "node": ">=18.18.0"
       }
@@ -562,7 +554,6 @@
       "resolved": "https://registry.npmjs.org/@humanfs/node/-/node-0.16.7.tgz",
       "integrity": "sha512-/zUx+yOsIrG4Y43Eh2peDeKCxlRt/gET6aHfaKpuq267qXdYDFViVHfMaLyygZOnl0kGWxFIgsBy8QFuTLUXEQ==",
       "license": "Apache-2.0",
-      "peer": true,
       "dependencies": {
         "@humanfs/core": "^0.19.1",
         "@humanwhocodes/retry": "^0.4.0"
@@ -576,7 +567,6 @@
       "resolved": "https://registry.npmjs.org/@humanwhocodes/module-importer/-/module-importer-1.0.1.tgz",
       "integrity": "sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA==",
       "license": "Apache-2.0",
-      "peer": true,
       "engines": {
         "node": ">=12.22"
       },
@@ -590,7 +580,6 @@
       "resolved": "https://registry.npmjs.org/@humanwhocodes/retry/-/retry-0.4.3.tgz",
       "integrity": "sha512-bV0Tgo9K4hfPCek+aMAn81RppFKv2ySDQeMoSZuvTASywNTnVJCArCZE2FWqpvIatKu7VMRLWlR1EazvVhDyhQ==",
       "license": "Apache-2.0",
-      "peer": true,
       "engines": {
         "node": ">=18.18"
       },
@@ -2268,15 +2257,13 @@
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.8.tgz",
       "integrity": "sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==",
-      "license": "MIT",
-      "peer": true
+      "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",
       "integrity": "sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==",
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/@types/json5": {
       "version": "0.0.29",
@@ -2299,6 +2286,7 @@
       "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.14.tgz",
       "integrity": "sha512-ilcTH/UniCkMdtexkoCN0bI7pMcJDvmQFPvuPvmEaYA/NSfFTAgdUSLAoVjaRJm7+6PvcM+q1zYOwS4wTYMF9w==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "csstype": "^3.2.2"
       }
@@ -2309,6 +2297,7 @@
       "integrity": "sha512-jp2L/eY6fn+KgVVQAOqYItbF0VY/YApe5Mz2F0aykSO8gx31bYCZyvSeYxCHKvzHG5eZjc+zyaS5BrBWya2+kQ==",
       "devOptional": true,
       "license": "MIT",
+      "peer": true,
       "peerDependencies": {
         "@types/react": "^19.2.0"
       }
@@ -2393,6 +2382,7 @@
       "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-8.57.2.tgz",
       "integrity": "sha512-30ScMRHIAD33JJQkgfGW1t8CURZtjc2JpTrq5n2HFhOefbAhb7ucc7xJwdWcrEtqUIYJ73Nybpsggii6GtAHjA==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@typescript-eslint/scope-manager": "8.57.2",
         "@typescript-eslint/types": "8.57.2",
@@ -2905,7 +2895,6 @@
       "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz",
       "integrity": "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==",
       "license": "MIT",
-      "peer": true,
       "peerDependencies": {
         "acorn": "^6.0.0 || ^7.0.0 || ^8.0.0"
       }
@@ -2915,7 +2904,6 @@
       "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.14.0.tgz",
       "integrity": "sha512-IWrosm/yrn43eiKqkfkHis7QioDleaXQHdDVPKg0FSwwd/DuvyX79TZnFOnYpB7dcsFAMmtFztZuXPDvSePkFw==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "fast-deep-equal": "^3.1.1",
         "fast-json-stable-stringify": "^2.0.0",
@@ -2932,7 +2920,6 @@
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
       "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "color-convert": "^2.0.1"
       },
@@ -2947,8 +2934,7 @@
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
       "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
-      "license": "Python-2.0",
-      "peer": true
+      "license": "Python-2.0"
     },
     "node_modules/aria-query": {
       "version": "5.3.2",
@@ -3238,6 +3224,7 @@
         }
       ],
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "baseline-browser-mapping": "^2.9.0",
         "caniuse-lite": "^1.0.30001759",
@@ -3328,7 +3315,6 @@
       "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
       "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==",
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=6"
       }
@@ -3358,7 +3344,6 @@
       "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
       "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "ansi-styles": "^4.1.0",
         "supports-color": "^7.1.0"
@@ -3402,7 +3387,6 @@
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
       "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "color-name": "~1.1.4"
       },
@@ -3414,8 +3398,7 @@
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
       "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/concat-map": {
       "version": "0.0.1",
@@ -3434,7 +3417,6 @@
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
       "integrity": "sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "path-key": "^3.1.0",
         "shebang-command": "^2.0.0",
@@ -3528,8 +3510,7 @@
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz",
       "integrity": "sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==",
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/define-data-property": {
       "version": "1.1.4",
@@ -3811,7 +3792,6 @@
       "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
       "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=10"
       },
@@ -3990,6 +3970,7 @@
       "resolved": "https://registry.npmjs.org/eslint-plugin-import/-/eslint-plugin-import-2.32.0.tgz",
       "integrity": "sha512-whOE1HFo/qJDyX4SnXzP4N6zOWn79WhnCUY/iDR0mPfQZO8wcYE4JClzI2oZrhBnnMUCBCHZhO6VQyoBU95mZA==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@rtsao/scc": "^1.1.0",
         "array-includes": "^3.1.9",
@@ -4135,7 +4116,6 @@
       "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-8.4.0.tgz",
       "integrity": "sha512-sNXOfKCn74rt8RICKMvJS7XKV/Xk9kA7DyJr8mJik3S7Cwgy3qlkkmyS2uQB3jiJg6VNdZd/pDBJu0nvG2NlTg==",
       "license": "BSD-2-Clause",
-      "peer": true,
       "dependencies": {
         "esrecurse": "^4.3.0",
         "estraverse": "^5.2.0"
@@ -4152,7 +4132,6 @@
       "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-4.2.1.tgz",
       "integrity": "sha512-Uhdk5sfqcee/9H/rCOJikYz67o0a2Tw2hGRPOG2Y1R2dg7brRe1uG0yaNQDHu+TO/uQPF/5eCapvYSmHUjt7JQ==",
       "license": "Apache-2.0",
-      "peer": true,
       "engines": {
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
       },
@@ -4165,7 +4144,6 @@
       "resolved": "https://registry.npmjs.org/espree/-/espree-10.4.0.tgz",
       "integrity": "sha512-j6PAQ2uUr79PZhBjP5C5fhl8e39FmRnOjsD5lGnWrFU8i2G776tBK7+nP8KuQUTTyAZUwfQqXAgrVH5MbH9CYQ==",
       "license": "BSD-2-Clause",
-      "peer": true,
       "dependencies": {
         "acorn": "^8.15.0",
         "acorn-jsx": "^5.3.2",
@@ -4183,7 +4161,6 @@
       "resolved": "https://registry.npmjs.org/esquery/-/esquery-1.7.0.tgz",
       "integrity": "sha512-Ap6G0WQwcU/LHsvLwON1fAQX9Zp0A2Y6Y/cJBl9r/JbW90Zyg4/zbG6zzKa2OTALELarYHmKu0GhpM5EO+7T0g==",
       "license": "BSD-3-Clause",
-      "peer": true,
       "dependencies": {
         "estraverse": "^5.1.0"
       },
@@ -4196,7 +4173,6 @@
       "resolved": "https://registry.npmjs.org/esrecurse/-/esrecurse-4.3.0.tgz",
       "integrity": "sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==",
       "license": "BSD-2-Clause",
-      "peer": true,
       "dependencies": {
         "estraverse": "^5.2.0"
       },
@@ -4226,8 +4202,7 @@
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
       "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/fast-glob": {
       "version": "3.3.1",
@@ -4261,15 +4236,13 @@
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz",
       "integrity": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==",
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/fast-levenshtein": {
       "version": "2.0.6",
       "resolved": "https://registry.npmjs.org/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz",
       "integrity": "sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==",
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/fastq": {
       "version": "1.20.1",
@@ -4292,7 +4265,6 @@
       "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-8.0.0.tgz",
       "integrity": "sha512-XXTUwCvisa5oacNGRP9SfNtYBNAMi+RPwBFmblZEF7N7swHYQS6/Zfk7SRwx4D5j3CH211YNRco1DEMNVfZCnQ==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "flat-cache": "^4.0.0"
       },
@@ -4317,7 +4289,6 @@
       "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz",
       "integrity": "sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "locate-path": "^6.0.0",
         "path-exists": "^4.0.0"
@@ -4334,7 +4305,6 @@
       "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-4.0.1.tgz",
       "integrity": "sha512-f7ccFPK3SXFHpx15UIGyRJ/FJQctuKZ0zVuN3frBo4HnK3cay9VEW0R6yPYFHC0AgqhukPzKjq22t5DmAyqGyw==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "flatted": "^3.2.9",
         "keyv": "^4.5.4"
@@ -4347,8 +4317,7 @@
       "version": "3.4.2",
       "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.4.2.tgz",
       "integrity": "sha512-PjDse7RzhcPkIJwy5t7KPWQSZ9cAbzQXcafsetQoD7sOJRQlGikNbx7yZp2OotDnJyrDcbyRq3Ttb18iYOqkxA==",
-      "license": "ISC",
-      "peer": true
+      "license": "ISC"
     },
     "node_modules/for-each": {
       "version": "0.3.5",
@@ -4519,7 +4488,6 @@
       "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
       "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==",
       "license": "ISC",
-      "peer": true,
       "dependencies": {
         "is-glob": "^4.0.3"
       },
@@ -4591,7 +4559,6 @@
       "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
       "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=8"
       }
@@ -4702,7 +4669,6 @@
       "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz",
       "integrity": "sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==",
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">= 4"
       }
@@ -4712,7 +4678,6 @@
       "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.1.tgz",
       "integrity": "sha512-TR3KfrTZTYLPB6jUjfx6MF9WcWrHL9su5TObK4ZkYgBdWKPOFoSoQIdEuTuR82pmtxH2spWG9h6etwfr1pLBqQ==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "parent-module": "^1.0.0",
         "resolve-from": "^4.0.0"
@@ -4729,7 +4694,6 @@
       "resolved": "https://registry.npmjs.org/imurmurhash/-/imurmurhash-0.1.4.tgz",
       "integrity": "sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==",
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=0.8.19"
       }
@@ -5146,8 +5110,7 @@
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
       "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==",
-      "license": "ISC",
-      "peer": true
+      "license": "ISC"
     },
     "node_modules/iterator.prototype": {
       "version": "1.1.5",
@@ -5184,6 +5147,7 @@
       "integrity": "sha512-ekilCSN1jwRvIbgeg/57YFh8qQDNbwDb9xT/qu2DAHbFFZUicIl4ygVaAvzveMhMVr3LnpSKTNnwt8PoOfmKhQ==",
       "devOptional": true,
       "license": "MIT",
+      "peer": true,
       "bin": {
         "jiti": "lib/jiti-cli.mjs"
       }
@@ -5199,7 +5163,6 @@
       "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.1.tgz",
       "integrity": "sha512-qQKT4zQxXl8lLwBtHMWwaTcGfFOZviOJet3Oy/xmGk2gZH677CJM9EvtfdSkgWcATZhj/55JZ0rmy3myCT5lsA==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "argparse": "^2.0.1"
       },
@@ -5223,22 +5186,19 @@
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/json-buffer/-/json-buffer-3.0.1.tgz",
       "integrity": "sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==",
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/json-schema-traverse": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
       "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/json-stable-stringify-without-jsonify": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz",
       "integrity": "sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==",
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/json5": {
       "version": "2.2.3",
@@ -5272,7 +5232,6 @@
       "resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz",
       "integrity": "sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "json-buffer": "3.0.1"
       }
@@ -5300,7 +5259,6 @@
       "resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz",
       "integrity": "sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "prelude-ls": "^1.2.1",
         "type-check": "~0.4.0"
@@ -5575,7 +5533,6 @@
       "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
       "integrity": "sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "p-locate": "^5.0.0"
       },
@@ -5590,8 +5547,7 @@
       "version": "4.6.2",
       "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
       "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==",
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/loose-envify": {
       "version": "1.4.0",
@@ -5986,7 +5942,6 @@
       "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.4.tgz",
       "integrity": "sha512-6IpQ7mKUxRcZNLIObR0hz7lxsapSSIYNZJwXPGeF0mTVqGKFIXj1DQcMoT22S3ROcLyY/rz0PWaWZ9ayWmad9g==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "deep-is": "^0.1.3",
         "fast-levenshtein": "^2.0.6",
@@ -6021,7 +5976,6 @@
       "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz",
       "integrity": "sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "yocto-queue": "^0.1.0"
       },
@@ -6037,7 +5991,6 @@
       "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-5.0.0.tgz",
       "integrity": "sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "p-limit": "^3.0.2"
       },
@@ -6053,7 +6006,6 @@
       "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
       "integrity": "sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "callsites": "^3.0.0"
       },
@@ -6066,7 +6018,6 @@
       "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
       "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==",
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=8"
       }
@@ -6076,7 +6027,6 @@
       "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
       "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=8"
       }
@@ -6148,7 +6098,6 @@
       "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
       "integrity": "sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==",
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">= 0.8.0"
       }
@@ -6169,7 +6118,6 @@
       "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
       "integrity": "sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==",
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=6"
       }
@@ -6199,6 +6147,7 @@
       "resolved": "https://registry.npmjs.org/react/-/react-19.2.4.tgz",
       "integrity": "sha512-9nfp2hYpCwOjAN+8TZFGhtWEwgvWHXqESH8qT89AT/lWklpLON22Lc8pEtnpsZz7VmawabSU0gCjnj8aC0euHQ==",
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -6208,6 +6157,7 @@
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.4.tgz",
       "integrity": "sha512-AXJdLo8kgMbimY95O2aKQqsz2iWi9jMgKJhRBAxECE4IFxfcazB2LmzloIoibJI3C12IlY20+KFaLv+71bUJeQ==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "scheduler": "^0.27.0"
       },
@@ -6312,7 +6262,6 @@
       "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
       "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==",
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=4"
       }
@@ -6535,7 +6484,6 @@
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
       "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "shebang-regex": "^3.0.0"
       },
@@ -6548,7 +6496,6 @@
       "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
       "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=8"
       }
@@ -6774,7 +6721,6 @@
       "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz",
       "integrity": "sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==",
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=8"
       },
@@ -6810,7 +6756,6 @@
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
       "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "has-flag": "^4.0.0"
       },
@@ -6880,7 +6825,8 @@
       "version": "0.182.0",
       "resolved": "https://registry.npmjs.org/three/-/three-0.182.0.tgz",
       "integrity": "sha512-GbHabT+Irv+ihI1/f5kIIsZ+Ef9Sl5A1Y7imvS5RQjWgtTPfPnZ43JmlYI7NtCRDK9zir20lQpfg8/9Yd02OvQ==",
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/tinyglobby": {
       "version": "0.2.15",
@@ -6920,6 +6866,7 @@
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.4.tgz",
       "integrity": "sha512-QP88BAKvMam/3NxH6vj2o21R6MjxZUAd6nlwAS/pnGvN9IVLocLHxGYIzFhg6fUQ+5th6P4dv4eW9jX3DSIj7A==",
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -6996,7 +6943,6 @@
       "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
       "integrity": "sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "prelude-ls": "^1.2.1"
       },
@@ -7083,6 +7029,7 @@
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.3.tgz",
       "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
       "license": "Apache-2.0",
+      "peer": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
@@ -7208,7 +7155,6 @@
       "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz",
       "integrity": "sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==",
       "license": "BSD-2-Clause",
-      "peer": true,
       "dependencies": {
         "punycode": "^2.1.0"
       }
@@ -7227,7 +7173,6 @@
       "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
       "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
       "license": "ISC",
-      "peer": true,
       "dependencies": {
         "isexe": "^2.0.0"
       },
@@ -7328,7 +7273,6 @@
       "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.5.tgz",
       "integrity": "sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==",
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -7344,7 +7288,6 @@
       "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
       "integrity": "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==",
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=10"
       },
@@ -7357,6 +7300,7 @@
       "resolved": "https://registry.npmjs.org/zod/-/zod-4.3.6.tgz",
       "integrity": "sha512-rftlrkhHZOcjDwkGlnUtZZkvaPHCsDATp4pGpuOOMDaTdDDXF91wuVDJoWoPsKX/3YPQ5fHuF3STjcYyKr+Qhg==",
       "license": "MIT",
+      "peer": true,
       "funding": {
         "url": "https://github.com/sponsors/colinhacks"
       }
diff --git a/frontend/src/app/(authenticated)/dashboard/page.tsx b/frontend/src/app/(authenticated)/dashboard/page.tsx
index 14ae443a..b7386c42 100644
--- a/frontend/src/app/(authenticated)/dashboard/page.tsx
+++ b/frontend/src/app/(authenticated)/dashboard/page.tsx
@@ -3,6 +3,15 @@ import CompetitionsJoined from "@/component/CompetitionsJoined";
 export default function DashboardPage() {
   return (
     <div className="space-y-6">
+      <ReputationSnapshot />
+
+      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
+        <MetricCard title="TOTAL PREDICTIONS" value="128" />
+        <MetricCard title="ACCURACY RATE" value="68.4%" />
+        <MetricCard title="CURRENT RANK" value="#24" trend="up" />
+        <MetricCard title="TOTAL REWARDS EARNED" value="$1,240" />
+      </div>
+
       <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
         {/* Dashboard content cards */}
         <div className="bg-[#0f172a] rounded-2xl p-6 border border-gray-700/30">
diff --git a/frontend/src/component/MetricCard.tsx b/frontend/src/component/MetricCard.tsx
new file mode 100644
index 00000000..123fba72
--- /dev/null
+++ b/frontend/src/component/MetricCard.tsx
@@ -0,0 +1,29 @@
+import React from "react";
+import { TrendingUp, TrendingDown } from "lucide-react";
+
+interface MetricCardProps {
+  title: string;
+  value: React.ReactNode;
+  trend?: "up" | "down";
+}
+
+export default function MetricCard({ title, value, trend }: MetricCardProps) {
+  const trendIcon =
+    trend === "up" ? (
+      <TrendingUp className="w-4 h-4 text-emerald-400" />
+    ) : trend === "down" ? (
+      <TrendingDown className="w-4 h-4 text-red-400" />
+    ) : null;
+
+  return (
+    <div className="bg-[#0f172a] border border-gray-700/30 rounded-2xl p-5 shadow-sm hover:shadow-lg transition">
+      <p className="text-gray-300 text-xs uppercase tracking-wide font-semibold mb-2">
+        {title}
+      </p>
+      <div className="flex items-center gap-2">
+        <p className="text-white text-2xl md:text-3xl font-bold">{value}</p>
+        {trendIcon}
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/src/component/ReputationSnapshot.tsx b/frontend/src/component/ReputationSnapshot.tsx
new file mode 100644
index 00000000..e8c84762
--- /dev/null
+++ b/frontend/src/component/ReputationSnapshot.tsx
@@ -0,0 +1,91 @@
+import React from "react";
+import { Trophy, Zap, TrendingUp } from "lucide-react";
+
+
+export default function ReputationSnapshot() {
+  const score = 840;
+  const progressPercent = 84; 
+
+  return (
+    <div className="bg-[#242b3d] rounded-2xl p-6 md:p-8 w-full border border-white/5 relative shadow-lg mb-6">
+      <h2 className="text-2xl font-semibold text-white mb-6">Reputation Snapshot</h2>
+      
+      <div className="flex flex-col md:flex-row gap-8 lg:gap-12">
+        {/* Left Side: Avatar and Tier Pill */}
+        <div className="flex flex-col items-center shrink-0">
+          <div className="w-28 h-28 md:w-32 md:h-32 rounded-full bg-[#399a96] flex items-center justify-center shadow-lg border-4 border-[#242b3d]">
+            <span className="text-white text-5xl md:text-6xl font-bold tracking-tight">A</span>
+          </div>
+          <div className="mt-4 bg-[#e5b962] text-black text-sm font-bold px-4 py-1.5 rounded-full shadow-md">
+            Gold Predictor
+          </div>
+        </div>
+
+        {/* Right Side: Metrics and Progress */}
+        <div className="flex-1 flex flex-col justify-center">
+          <div className="flex items-start justify-between">
+            <div>
+              <p className="text-[#8b95a5] text-xs font-semibold tracking-wider uppercase mb-1">Reputation Score</p>
+              <div className="text-white text-5xl md:text-6xl font-bold tracking-tight">{score}</div>
+            </div>
+            <div className="text-right">
+              <p className="text-[#8b95a5] text-xs font-semibold tracking-wider uppercase mb-1">Tier</p>
+              <div className="flex items-center gap-2 text-white text-xl md:text-2xl font-bold">
+                <Trophy className="w-5 h-5 text-[#e5b962] fill-[#e5b962]" />
+                Gold
+              </div>
+            </div>
+          </div>
+
+          <div className="mt-6">
+            <p className="text-[#8b95a5] text-sm mb-2 font-medium">100 to next tier</p>
+            {/* Custom Progress Bar */}
+            <div className="w-full h-2 rounded-full bg-[#1b2131] overflow-hidden">
+              <div 
+                className="h-full bg-[#399a96] rounded-full" 
+                style={{ width: `${progressPercent}%` }}
+              ></div>
+            </div>
+          </div>
+
+          <div className="mt-8 grid grid-cols-1 md:grid-cols-2 gap-6 pt-6 border-t border-white/5">
+            {/* Bottom Row Metrics */}
+            <div>
+              <p className="text-[#8b95a5] text-xs font-semibold tracking-wider uppercase mb-2">Current Streak</p>
+              <div className="flex items-baseline gap-2">
+                <div className="flex items-center gap-1.5 text-white text-3xl font-bold">
+                  <Zap className="w-6 h-6 text-[#e5b962] fill-[#e5b962]" /> 
+                  5
+                </div>
+                <span className="text-[#8b95a5] text-sm font-medium">correct in a row</span>
+              </div>
+            </div>
+            <div>
+              <p className="text-[#8b95a5] text-xs font-semibold tracking-wider uppercase mb-2">Correct Predictions</p>
+              <div className="flex items-baseline gap-2">
+                <div className="text-white text-3xl font-bold">87</div>
+                <span className="text-[#8b95a5] text-sm font-medium">of 128 total</span>
+              </div>
+            </div>
+          </div>
+
+          {/* Bottom Tags */}
+          <div className="mt-6 flex flex-wrap gap-3">
+            <div className="flex items-center gap-2 px-3 py-1.5 rounded-lg bg-[#2c3449] border border-white/5 shadow-sm">
+              <Trophy className="w-4 h-4 text-[#399a96]" />
+              <span className="text-xs font-medium text-[#c4cad4]">Top 50 Global</span>
+            </div>
+            <div className="flex items-center gap-2 px-3 py-1.5 rounded-lg bg-[#2c3449] border border-white/5 shadow-sm">
+              <Zap className="w-4 h-4 text-[#e5b962]" />
+              <span className="text-xs font-medium text-[#c4cad4]">Fast Mover</span>
+            </div>
+            <div className="flex items-center gap-2 px-3 py-1.5 rounded-lg bg-[#2c3449] border border-white/5 shadow-sm">
+              <TrendingUp className="w-4 h-4 text-[#399a96]" />
+              <span className="text-xs font-medium text-[#c4cad4]">Data Driven</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}