diff --git a/package-lock.json b/package-lock.json
index 33c87b3..baa8926 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -44,6 +44,7 @@
         "@tiptap/starter-kit": "^2.12.0",
         "@types/jsonwebtoken": "^9.0.9",
         "axios": "^1.9.0",
+        "chart.js": "^4.4.9",
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
         "cmdk": "^1.1.1",
@@ -60,11 +61,13 @@
         "next-auth": "^5.0.0-beta.28",
         "next-themes": "^0.4.6",
         "react": "^19.0.0",
+        "react-chartjs-2": "^5.3.0",
         "react-day-picker": "^9.7.0",
         "react-dom": "^19.0.0",
         "react-hook-form": "^7.57.0",
         "react-katex": "^3.1.0",
         "react-resizable-panels": "^3.0.2",
+        "recharts": "^2.15.3",
         "sonner": "^2.0.3",
         "tailwind-merge": "^3.2.0",
         "uuid": "^11.1.0",
@@ -169,6 +172,15 @@
         "url": "https://github.com/sponsors/panva"
       }
     },
+    "node_modules/@babel/runtime": {
+      "version": "7.27.6",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.27.6.tgz",
+      "integrity": "sha512-vbavdySgbTTrmFE+EsiqUTzlOr5bzlnJtUv9PynGCAKvfQqjIXbvFdumPM/GxMDfyuGMJaJAU6TO4zc1Jf1i8Q==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
     "node_modules/@csstools/color-helpers": {
       "version": "5.0.2",
       "resolved": "https://registry.npmjs.org/@csstools/color-helpers/-/color-helpers-5.0.2.tgz",
@@ -552,8 +564,6 @@
     },
     "node_modules/@hookform/resolvers": {
       "version": "5.1.1",
-      "resolved": "https://registry.npmjs.org/@hookform/resolvers/-/resolvers-5.1.1.tgz",
-      "integrity": "sha512-J/NVING3LMAEvexJkyTLjruSm7aOFx7QX21pzkiJfMoNG0wl5aFEjLTl7ay7IQb9EWY6AkrBy7tHL2Alijpdcg==",
       "license": "MIT",
       "dependencies": {
         "@standard-schema/utils": "^0.3.0"
@@ -1090,6 +1100,12 @@
         "@jridgewell/sourcemap-codec": "^1.4.14"
       }
     },
+    "node_modules/@kurkle/color": {
+      "version": "0.3.4",
+      "resolved": "https://registry.npmjs.org/@kurkle/color/-/color-0.3.4.tgz",
+      "integrity": "sha512-M5UknZPHRu3DEDWoipU6sE8PdkZ6Z/S+v4dD+Ke8IaNlpdSQah50lz1KtcFBa2vsdOnwbbnxJwVM4wty6udA5w==",
+      "license": "MIT"
+    },
     "node_modules/@monaco-editor/loader": {
       "version": "1.5.0",
       "resolved": "https://registry.npmjs.org/@monaco-editor/loader/-/loader-1.5.0.tgz",
@@ -2440,8 +2456,6 @@
     },
     "node_modules/@standard-schema/utils": {
       "version": "0.3.0",
-      "resolved": "https://registry.npmjs.org/@standard-schema/utils/-/utils-0.3.0.tgz",
-      "integrity": "sha512-e7Mew686owMaPJVNNLs55PUvgz371nKgwsc4vxE49zsODpJEnxgxRo2y/OKrqueavXgZNMDVj3DdHFlaSAeU8g==",
       "license": "MIT"
     },
     "node_modules/@swc/counter": {
@@ -2735,6 +2749,33 @@
         "tailwindcss": "4.1.8"
       }
     },
+    "node_modules/@tailwindcss/postcss/node_modules/@tailwindcss/oxide": {
+      "version": "4.1.8",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "dependencies": {
+        "detect-libc": "^2.0.4",
+        "tar": "^7.4.3"
+      },
+      "engines": {
+        "node": ">= 10"
+      },
+      "optionalDependencies": {
+        "@tailwindcss/oxide-android-arm64": "4.1.8",
+        "@tailwindcss/oxide-darwin-arm64": "4.1.8",
+        "@tailwindcss/oxide-darwin-x64": "4.1.8",
+        "@tailwindcss/oxide-freebsd-x64": "4.1.8",
+        "@tailwindcss/oxide-linux-arm-gnueabihf": "4.1.8",
+        "@tailwindcss/oxide-linux-arm64-gnu": "4.1.8",
+        "@tailwindcss/oxide-linux-arm64-musl": "4.1.8",
+        "@tailwindcss/oxide-linux-x64-gnu": "4.1.8",
+        "@tailwindcss/oxide-linux-x64-musl": "4.1.8",
+        "@tailwindcss/oxide-wasm32-wasi": "4.1.8",
+        "@tailwindcss/oxide-win32-arm64-msvc": "4.1.8",
+        "@tailwindcss/oxide-win32-x64-msvc": "4.1.8"
+      }
+    },
     "node_modules/@tanstack/query-core": {
       "version": "5.80.6",
       "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.80.6.tgz",
@@ -2790,8 +2831,6 @@
     },
     "node_modules/@tanstack/react-table": {
       "version": "8.21.3",
-      "resolved": "https://registry.npmjs.org/@tanstack/react-table/-/react-table-8.21.3.tgz",
-      "integrity": "sha512-5nNMTSETP4ykGegmVkhjcS8tTLW6Vl4axfEGQN3v0zdHYbK4UfoqfPChclTrJ4EoK9QynqAu9oUf8VEmrpZ5Ww==",
       "license": "MIT",
       "dependencies": {
         "@tanstack/table-core": "8.21.3"
@@ -2810,8 +2849,6 @@
     },
     "node_modules/@tanstack/react-virtual": {
       "version": "3.13.10",
-      "resolved": "https://registry.npmjs.org/@tanstack/react-virtual/-/react-virtual-3.13.10.tgz",
-      "integrity": "sha512-nvrzk4E9mWB4124YdJ7/yzwou7IfHxlSef6ugCFcBfRmsnsma3heciiiV97sBNxyc3VuwtZvmwXd0aB5BpucVw==",
       "license": "MIT",
       "dependencies": {
         "@tanstack/virtual-core": "3.13.10"
@@ -2827,8 +2864,6 @@
     },
     "node_modules/@tanstack/table-core": {
       "version": "8.21.3",
-      "resolved": "https://registry.npmjs.org/@tanstack/table-core/-/table-core-8.21.3.tgz",
-      "integrity": "sha512-ldZXEhOBb8Is7xLs01fR3YEc3DERiz5silj8tnGkFZytt1abEvl/GhUmCE0PMLaMPTa3Jk4HbKmRlHmu+gCftg==",
       "license": "MIT",
       "engines": {
         "node": ">=12"
@@ -2840,8 +2875,6 @@
     },
     "node_modules/@tanstack/virtual-core": {
       "version": "3.13.10",
-      "resolved": "https://registry.npmjs.org/@tanstack/virtual-core/-/virtual-core-3.13.10.tgz",
-      "integrity": "sha512-sPEDhXREou5HyZYqSWIqdU580rsF6FGeN7vpzijmP3KTiOGjOMZASz4Y6+QKjiFQwhWrR58OP8izYaNGVxvViA==",
       "license": "MIT",
       "funding": {
         "type": "github",
@@ -3411,8 +3444,6 @@
     },
     "node_modules/@types/use-sync-external-store": {
       "version": "0.0.6",
-      "resolved": "https://registry.npmjs.org/@types/use-sync-external-store/-/use-sync-external-store-0.0.6.tgz",
-      "integrity": "sha512-zFDAD+tlpf2r4asuHEj0XH6pY6i0g5NeAHPn+15wk3BV6JA69eERFXC1gyGThDkVa1zCyKr5jox1+2LbV/AMLg==",
       "license": "MIT"
     },
     "node_modules/@types/zen-observable": {
@@ -3975,8 +4006,6 @@
     },
     "node_modules/adler-32": {
       "version": "1.3.1",
-      "resolved": "https://registry.npmjs.org/adler-32/-/adler-32-1.3.1.tgz",
-      "integrity": "sha512-ynZ4w/nUUv5rrsR8UUGoe1VC9hZj6V5hU9Qw1HlMDJGEJw5S7TfTErWTjMys6M7vr0YWcPqs3qAr4ss0nDfP+A==",
       "license": "Apache-2.0",
       "engines": {
         "node": ">=0.8"
@@ -4503,8 +4532,6 @@
     },
     "node_modules/cfb": {
       "version": "1.2.2",
-      "resolved": "https://registry.npmjs.org/cfb/-/cfb-1.2.2.tgz",
-      "integrity": "sha512-KfdUZsSOw19/ObEWasvBP/Ac4reZvAGauZhs6S/gqNhXhI7cKwvlH7ulj+dOEYnca4bm4SGo8C1bTAQvnTjgQA==",
       "license": "Apache-2.0",
       "dependencies": {
         "adler-32": "~1.3.0",
@@ -4531,6 +4558,18 @@
         "url": "https://github.com/chalk/chalk?sponsor=1"
       }
     },
+    "node_modules/chart.js": {
+      "version": "4.4.9",
+      "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-4.4.9.tgz",
+      "integrity": "sha512-EyZ9wWKgpAU0fLJ43YAEIF8sr5F2W3LqbS40ZJyHIner2lY14ufqv2VMp69MAiZ2rpwxEUxEhIH/0U3xyRynxg==",
+      "license": "MIT",
+      "dependencies": {
+        "@kurkle/color": "^0.3.0"
+      },
+      "engines": {
+        "pnpm": ">=8"
+      }
+    },
     "node_modules/chownr": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/chownr/-/chownr-3.0.0.tgz",
@@ -4850,8 +4889,6 @@
     },
     "node_modules/codepage": {
       "version": "1.15.0",
-      "resolved": "https://registry.npmjs.org/codepage/-/codepage-1.15.0.tgz",
-      "integrity": "sha512-3g6NUTPd/YtuuGrhMnOMRjFc+LJw/bnMp3+0r/Wcz3IXUuCosKRJvMphm5+Q+bvTVGcJJuRvVLuYba+WojaFaA==",
       "license": "Apache-2.0",
       "engines": {
         "node": ">=0.8"
@@ -4939,8 +4976,6 @@
     },
     "node_modules/crc-32": {
       "version": "1.2.2",
-      "resolved": "https://registry.npmjs.org/crc-32/-/crc-32-1.2.2.tgz",
-      "integrity": "sha512-ROmzCKrTnOwybPcJApAA6WBWij23HVfGVNKqqrZpuyZOHqK2CwHSvpGuyt/UNNvaIjEd8X5IFGp4Mh+Ie1IHJQ==",
       "license": "Apache-2.0",
       "bin": {
         "crc32": "bin/crc32.njs"
@@ -4985,11 +5020,129 @@
     },
     "node_modules/csstype": {
       "version": "3.1.3",
-      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
-      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
-      "devOptional": true,
       "license": "MIT"
     },
+    "node_modules/d3-array": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-3.2.4.tgz",
+      "integrity": "sha512-tdQAmyA18i4J7wprpYq8ClcxZy3SC31QMeByyCFyRt7BVHdREQZ5lpzoe5mFEYZUWe+oq8HBvk9JjpibyEV4Jg==",
+      "license": "ISC",
+      "dependencies": {
+        "internmap": "1 - 2"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-color": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-3.1.0.tgz",
+      "integrity": "sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-ease": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-ease/-/d3-ease-3.0.1.tgz",
+      "integrity": "sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w==",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-format": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-format/-/d3-format-3.1.0.tgz",
+      "integrity": "sha512-YyUI6AEuY/Wpt8KWLgZHsIU86atmikuoOmCfommt0LYHiQSPjvX2AcFc38PX0CBpr2RCyZhjex+NS/LPOv6YqA==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-interpolate": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-3.0.1.tgz",
+      "integrity": "sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-color": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-path": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-path/-/d3-path-3.1.0.tgz",
+      "integrity": "sha512-p3KP5HCf/bvjBSSKuXid6Zqijx7wIfNW+J/maPs+iwR35at5JCbLUT0LzF1cnjbCHWhqzQTIN2Jpe8pRebIEFQ==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-scale": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-4.0.2.tgz",
+      "integrity": "sha512-GZW464g1SH7ag3Y7hXjf8RoUuAFIqklOAq3MRl4OaWabTFJY9PN/E1YklhXLh+OQ3fM9yS2nOkCoS+WLZ6kvxQ==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-array": "2.10.0 - 3",
+        "d3-format": "1 - 3",
+        "d3-interpolate": "1.2.0 - 3",
+        "d3-time": "2.1.1 - 3",
+        "d3-time-format": "2 - 4"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-shape": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-3.2.0.tgz",
+      "integrity": "sha512-SaLBuwGm3MOViRq2ABk3eLoxwZELpH6zhl3FbAoJ7Vm1gofKx6El1Ib5z23NUEhF9AsGl7y+dzLe5Cw2AArGTA==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-path": "^3.1.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-time": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-time/-/d3-time-3.1.0.tgz",
+      "integrity": "sha512-VqKjzBLejbSMT4IgbmVgDjpkYrNWUYJnbCGo874u7MMKIWsILRX+OpX/gTk8MqjpT1A/c6HY2dCA77ZN0lkQ2Q==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-array": "2 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-time-format": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/d3-time-format/-/d3-time-format-4.1.0.tgz",
+      "integrity": "sha512-dJxPBlzC7NugB2PDLwo9Q8JiTR3M3e4/XANkreKSUxF8vvXKqm1Yfq4Q5dl8budlunRVlUUaDUgFt7eA8D6NLg==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-time": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-timer": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-timer/-/d3-timer-3.0.1.tgz",
+      "integrity": "sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/damerau-levenshtein": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz",
@@ -5082,8 +5235,6 @@
     },
     "node_modules/date-fns-tz": {
       "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/date-fns-tz/-/date-fns-tz-3.2.0.tgz",
-      "integrity": "sha512-sg8HqoTEulcbbbVXeg84u5UnlsQa8GS5QXMqjjYIhS4abEVVKIUwe0/l/UhrZdKaL/W5eWZNlbTeEIiOXTcsBQ==",
       "license": "MIT",
       "peerDependencies": {
         "date-fns": "^3.0.0 || ^4.0.0"
@@ -5200,6 +5351,16 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/dom-helpers": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz",
+      "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.8.7",
+        "csstype": "^3.0.2"
+      }
+    },
     "node_modules/dompurify": {
       "version": "3.2.6",
       "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.2.6.tgz",
@@ -5938,6 +6099,15 @@
       "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
       "license": "MIT"
     },
+    "node_modules/fast-equals": {
+      "version": "5.2.2",
+      "resolved": "https://registry.npmjs.org/fast-equals/-/fast-equals-5.2.2.tgz",
+      "integrity": "sha512-V7/RktU11J3I36Nwq2JnZEM7tNm17eBJz+u25qdxBZeCKiX6BkVSZQjwWIr+IobgnZy+ag73tTZgZi7tr0LrBw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
     "node_modules/fast-glob": {
       "version": "3.3.1",
       "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.1.tgz",
@@ -6110,8 +6280,6 @@
     },
     "node_modules/frac": {
       "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/frac/-/frac-1.1.2.tgz",
-      "integrity": "sha512-w/XBfkibaTl3YDqASwfDUqkna4Z2p9cFSr1aHDt0WoMTECnRfBOv2WArlZILlqgWlmdIlALXGpM2AOhEk5W3IA==",
       "license": "Apache-2.0",
       "engines": {
         "node": ">=0.8"
@@ -6123,7 +6291,7 @@
       "integrity": "sha512-xryrmD4jSBQrS2IkMdcTmiS4aSKckbS7kLDCuhUn9110SQKG1w3zlq1RTqCblewg+ZYe+m3sdtzQA6cRwo5g8Q==",
       "license": "MIT",
       "dependencies": {
-        "motion-dom": "^12.16.0",
+        "motion-dom": "^12.17.0",
         "motion-utils": "^12.12.1",
         "tslib": "^2.4.0"
       },
@@ -6641,6 +6809,15 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/internmap": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/internmap/-/internmap-2.0.3.tgz",
+      "integrity": "sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/is-array-buffer": {
       "version": "3.0.5",
       "resolved": "https://registry.npmjs.org/is-array-buffer/-/is-array-buffer-3.0.5.tgz",
@@ -7142,8 +7319,6 @@
     },
     "node_modules/js-tokens": {
       "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
-      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
       "license": "MIT"
     },
     "node_modules/js-yaml": {
@@ -7697,6 +7872,12 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/lodash": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
+      "license": "MIT"
+    },
     "node_modules/lodash.includes": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/lodash.includes/-/lodash.includes-4.3.0.tgz",
@@ -7814,8 +7995,6 @@
     },
     "node_modules/loose-envify": {
       "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
-      "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
       "license": "MIT",
       "dependencies": {
         "js-tokens": "^3.0.0 || ^4.0.0"
@@ -8004,13 +8183,10 @@
       "dev": true,
       "license": "MIT",
       "bin": {
-        "mkdirp": "dist/cjs/src/bin.js"
+        "mkdirp": "bin/cmd.js"
       },
       "engines": {
         "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
       }
     },
     "node_modules/monaco-editor": {
@@ -8242,8 +8418,6 @@
     },
     "node_modules/object-assign": {
       "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
-      "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
       "license": "MIT",
       "engines": {
         "node": ">=0.10.0"
@@ -8659,8 +8833,6 @@
     },
     "node_modules/prop-types": {
       "version": "15.8.1",
-      "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
-      "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
       "license": "MIT",
       "dependencies": {
         "loose-envify": "^1.4.0",
@@ -8917,6 +9089,16 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-chartjs-2": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/react-chartjs-2/-/react-chartjs-2-5.3.0.tgz",
+      "integrity": "sha512-UfZZFnDsERI3c3CZGxzvNJd02SHjaSJ8kgW1djn65H1KK8rehwTjyrRKOG3VTMG8wtHZ5rgAO5oTHtHi9GCCmw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "chart.js": "^4.1.1",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
     "node_modules/react-day-picker": {
       "version": "9.7.0",
       "resolved": "https://registry.npmjs.org/react-day-picker/-/react-day-picker-9.7.0.tgz",
@@ -8962,8 +9144,6 @@
     },
     "node_modules/react-hook-form": {
       "version": "7.57.0",
-      "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.57.0.tgz",
-      "integrity": "sha512-RbEks3+cbvTP84l/VXGUZ+JMrKOS8ykQCRYdm5aYsxnDquL0vspsyNhGRO7pcH6hsZqWlPOjLye7rJqdtdAmlg==",
       "license": "MIT",
       "engines": {
         "node": ">=18.0.0"
@@ -8978,8 +9158,6 @@
     },
     "node_modules/react-is": {
       "version": "16.13.1",
-      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
-      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
       "license": "MIT"
     },
     "node_modules/react-katex": {
@@ -9052,6 +9230,21 @@
         "react-dom": "^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"
       }
     },
+    "node_modules/react-smooth": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/react-smooth/-/react-smooth-4.0.4.tgz",
+      "integrity": "sha512-gnGKTpYwqL0Iii09gHobNolvX4Kiq4PKx6eWBCYYix+8cdw+cGo3do906l1NBPKkSWx1DghC1dlWG9L2uGd61Q==",
+      "license": "MIT",
+      "dependencies": {
+        "fast-equals": "^5.0.1",
+        "prop-types": "^15.8.1",
+        "react-transition-group": "^4.4.5"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
     "node_modules/react-style-singleton": {
       "version": "2.2.3",
       "resolved": "https://registry.npmjs.org/react-style-singleton/-/react-style-singleton-2.2.3.tgz",
@@ -9643,8 +9836,6 @@
     },
     "node_modules/ssf": {
       "version": "0.11.2",
-      "resolved": "https://registry.npmjs.org/ssf/-/ssf-0.11.2.tgz",
-      "integrity": "sha512-+idbmIXoYET47hH+d7dfm2epdOMUDjqcB4648sTZ+t2JwoyBFL/insLfB/racrDmsKB3diwsDA696pZMieAC5g==",
       "license": "Apache-2.0",
       "dependencies": {
         "frac": "~1.1.2"
@@ -10512,6 +10703,28 @@
         "uuid": "dist/esm/bin/uuid"
       }
     },
+    "node_modules/victory-vendor": {
+      "version": "36.9.2",
+      "resolved": "https://registry.npmjs.org/victory-vendor/-/victory-vendor-36.9.2.tgz",
+      "integrity": "sha512-PnpQQMuxlwYdocC8fIJqVXvkeViHYzotI+NJrCuav0ZYFoq912ZHBk3mCeuj+5/VpodOjPe1z0Fk2ihgzlXqjQ==",
+      "license": "MIT AND ISC",
+      "dependencies": {
+        "@types/d3-array": "^3.0.3",
+        "@types/d3-ease": "^3.0.0",
+        "@types/d3-interpolate": "^3.0.1",
+        "@types/d3-scale": "^4.0.2",
+        "@types/d3-shape": "^3.1.0",
+        "@types/d3-time": "^3.0.0",
+        "@types/d3-timer": "^3.0.0",
+        "d3-array": "^3.1.6",
+        "d3-ease": "^3.0.1",
+        "d3-interpolate": "^3.0.1",
+        "d3-scale": "^4.0.2",
+        "d3-shape": "^3.1.0",
+        "d3-time": "^3.0.0",
+        "d3-timer": "^3.0.1"
+      }
+    },
     "node_modules/w3c-keyname": {
       "version": "2.2.8",
       "resolved": "https://registry.npmjs.org/w3c-keyname/-/w3c-keyname-2.2.8.tgz",
@@ -10680,8 +10893,6 @@
     },
     "node_modules/wmf": {
       "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/wmf/-/wmf-1.0.2.tgz",
-      "integrity": "sha512-/p9K7bEh0Dj6WbXg4JG0xvLQmIadrner1bi45VMJTfnbVHsc7yIajZyoSoK60/dtVBs12Fm6WkUI5/3WAVsNMw==",
       "license": "Apache-2.0",
       "engines": {
         "node": ">=0.8"
@@ -10689,8 +10900,6 @@
     },
     "node_modules/word": {
       "version": "0.3.0",
-      "resolved": "https://registry.npmjs.org/word/-/word-0.3.0.tgz",
-      "integrity": "sha512-OELeY0Q61OXpdUfTp+oweA/vtLVg5VDOXh+3he3PNzLGG/y0oylSOC1xRVj0+l4vQ3tj/bB1HVHv1ocXkQceFA==",
       "license": "Apache-2.0",
       "engines": {
         "node": ">=0.8"
@@ -10767,8 +10976,6 @@
     },
     "node_modules/xlsx": {
       "version": "0.18.5",
-      "resolved": "https://registry.npmjs.org/xlsx/-/xlsx-0.18.5.tgz",
-      "integrity": "sha512-dmg3LCjBPHZnQp5/F/+nnTa+miPJxUXB6vtk42YjBBKayDNagxGEeIdWApkYPOf3Z3pm3k62Knjzp7lMeTEtFQ==",
       "license": "Apache-2.0",
       "dependencies": {
         "adler-32": "~1.3.0",
diff --git a/package.json b/package.json
index 784c4a8..0f42840 100644
--- a/package.json
+++ b/package.json
@@ -47,6 +47,7 @@
     "@tiptap/starter-kit": "^2.12.0",
     "@types/jsonwebtoken": "^9.0.9",
     "axios": "^1.9.0",
+    "chart.js": "^4.4.9",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",
@@ -63,11 +64,13 @@
     "next-auth": "^5.0.0-beta.28",
     "next-themes": "^0.4.6",
     "react": "^19.0.0",
+    "react-chartjs-2": "^5.3.0",
     "react-day-picker": "^9.7.0",
     "react-dom": "^19.0.0",
     "react-hook-form": "^7.57.0",
     "react-katex": "^3.1.0",
     "react-resizable-panels": "^3.0.2",
+    "recharts": "^2.15.3",
     "sonner": "^2.0.3",
     "tailwind-merge": "^3.2.0",
     "uuid": "^11.1.0",
diff --git a/src/app/(evalify)/(academics)/result/page.tsx b/src/app/(evalify)/(academics)/result/page.tsx
deleted file mode 100644
index a14bae3..0000000
--- a/src/app/(evalify)/(academics)/result/page.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import React from "react";
-
-export default function page() {
-  return (
-    <div>
-      <h1>Result Page</h1>
-    </div>
-  );
-}
diff --git a/src/app/(test)/results-data/page.tsx b/src/app/(test)/results-data/page.tsx
new file mode 100644
index 0000000..c661c3d
--- /dev/null
+++ b/src/app/(test)/results-data/page.tsx
@@ -0,0 +1,10 @@
+"use client";
+
+// This file is a redirect. The student results functionality has been moved to:
+// src/app/(test)/student-results/page.tsx
+
+import { redirect } from "next/navigation";
+
+export default function ResultsDataPage() {
+  redirect("/student-results");
+}
diff --git a/src/app/(test)/results/page.tsx b/src/app/(test)/results/page.tsx
new file mode 100644
index 0000000..6e051f7
--- /dev/null
+++ b/src/app/(test)/results/page.tsx
@@ -0,0 +1,10 @@
+"use client";
+
+// This file is a redirect. The student results functionality has been moved to:
+// src/app/(test)/student-results/page.tsx
+
+import { redirect } from "next/navigation";
+
+export default function ResultsPage() {
+  redirect("/student-results");
+}
diff --git a/src/app/(test)/student-results/page.tsx b/src/app/(test)/student-results/page.tsx
new file mode 100644
index 0000000..1eb4d6d
--- /dev/null
+++ b/src/app/(test)/student-results/page.tsx
@@ -0,0 +1,208 @@
+"use client";
+
+import React, { useState, useEffect } from "react";
+import { useRouter, useSearchParams } from "next/navigation";
+import TopBar from "@/components/question_creation/top-bar";
+import {
+  StudentRecentTestsCard,
+  CourseResultsGrid,
+  TestSummaries,
+  StudentOverallResult,
+  CourseResult,
+  TestSummary,
+} from "@/components/results";
+import { MockResultsAPI } from "@/lib/results-api";
+
+export default function StudentResultsPage() {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const [currentView, setCurrentView] = useState<
+    "overview" | "course" | "tests"
+  >("overview");
+  const [selectedCourseId, setSelectedCourseId] = useState<string | null>(null);
+  const [studentData, setStudentData] = useState<StudentOverallResult | null>(
+    null,
+  );
+  const [courseResults, setCourseResults] = useState<CourseResult[]>([]);
+  const [testSummaries, setTestSummaries] = useState<TestSummary[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  // Define functions before useEffect hooks
+  const loadInitialData = React.useCallback(async () => {
+    // Use a mock student ID since we're not requiring login
+    const mockStudentId = "student-1";
+
+    setLoading(true);
+    setError(null);
+
+    try {
+      // Load both student overview and course results in parallel
+      const [overview, courses] = await Promise.all([
+        MockResultsAPI.getStudentOverview(mockStudentId),
+        MockResultsAPI.getCourseResults(mockStudentId),
+      ]);
+
+      setStudentData(overview);
+      setCourseResults(courses);
+    } catch (err) {
+      console.error("Failed to load results data:", err);
+      setError("Failed to load results. Please try again.");
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  const loadTestSummaries = React.useCallback(async (courseId: string) => {
+    // Use a mock student ID since we're not requiring login
+    const mockStudentId = "student-1";
+
+    setLoading(true);
+    try {
+      const tests = await MockResultsAPI.getTestSummaries(
+        mockStudentId,
+        courseId,
+      );
+      setTestSummaries(tests);
+    } catch (err) {
+      console.error("Failed to load test summaries:", err);
+      setError("Failed to load test summaries. Please try again.");
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  // Handle URL parameters for navigation
+  useEffect(() => {
+    const view = searchParams.get("view");
+    const courseId = searchParams.get("courseId");
+
+    if (view === "course" && courseId) {
+      setCurrentView("course");
+      setSelectedCourseId(courseId);
+      loadTestSummaries(courseId);
+    } else if (view === "tests" && courseId) {
+      setCurrentView("tests");
+      setSelectedCourseId(courseId);
+      loadTestSummaries(courseId);
+    } else {
+      setCurrentView("overview");
+      setSelectedCourseId(null);
+    }
+  }, [searchParams, loadTestSummaries]);
+
+  // Load initial data
+  useEffect(() => {
+    // Load data immediately without waiting for session
+    loadInitialData();
+  }, [loadInitialData]);
+  const handleViewCourse = (courseId: string) => {
+    router.push(`/student-results?view=course&courseId=${courseId}`);
+  };
+
+  const handleViewTest = (testId: string) => {
+    router.push(`/student-results/test/${testId}`);
+  };
+  const handleBack = () => {
+    if (currentView === "course") {
+      router.push("/student-results");
+    }
+  };
+
+  const selectedCourse = courseResults.find(
+    (course) => course.courseId === selectedCourseId,
+  );
+
+  if (loading) {
+    return (
+      <div className="container mx-auto px-4 py-8">
+        <div className="flex items-center justify-center min-h-96">
+          <div className="text-center">
+            <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary mx-auto mb-4"></div>
+            <p className="text-muted-foreground">Loading results...</p>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="container mx-auto px-4 py-8">
+        <div className="flex items-center justify-center min-h-96">
+          <div className="text-center">
+            <h2 className="text-xl font-semibold mb-2">
+              Error Loading Results
+            </h2>
+            <p className="text-muted-foreground mb-4">{error}</p>
+            <button
+              onClick={loadInitialData}
+              className="px-4 py-2 bg-primary text-primary-foreground rounded-md hover:bg-primary/90"
+            >
+              Try Again
+            </button>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  if (!studentData) {
+    return (
+      <div className="container mx-auto px-4 py-8">
+        <div className="flex items-center justify-center min-h-96">
+          <div className="text-center">
+            <p className="text-muted-foreground">No results data available</p>
+          </div>
+        </div>
+      </div>
+    );
+  }
+  return (
+    <div className="flex flex-col min-h-screen">
+      <TopBar />
+      <div className="container mx-auto px-4 py-6 space-y-6">
+        {currentView === "overview" && (
+          <>
+            {/* Student Overview */}
+            <div>
+              <h1 className="text-3xl font-bold mb-2">My Results</h1>
+              <p className="text-muted-foreground mb-4">
+                Track your academic performance and progress
+              </p>
+              {/* Overview cards removed as requested */}
+            </div>{" "}
+            {/* Recent Tests */}
+            <div>
+              <h2 className="text-xl font-bold mb-4">Recent Tests</h2>
+              <StudentRecentTestsCard
+                studentId={studentData.studentId || "current-student"}
+                tests={studentData.recentTests}
+                onViewTest={handleViewTest}
+                showHeader={false}
+              />
+            </div>
+            {/* Course Results */}
+            <div>
+              <h2 className="text-xl font-bold mb-4">Course Results</h2>
+              <CourseResultsGrid
+                courses={courseResults}
+                onViewCourse={handleViewCourse}
+                onViewTest={handleViewTest}
+              />
+            </div>
+          </>
+        )}
+        {currentView === "course" && selectedCourse && (
+          <TestSummaries
+            courseName={selectedCourse.courseName}
+            courseCode={selectedCourse.courseCode}
+            tests={testSummaries}
+            onBack={handleBack}
+            onViewTest={handleViewTest}
+          />
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/src/app/(test)/student-results/test/[testId]/page.tsx b/src/app/(test)/student-results/test/[testId]/page.tsx
new file mode 100644
index 0000000..19d1f24
--- /dev/null
+++ b/src/app/(test)/student-results/test/[testId]/page.tsx
@@ -0,0 +1,98 @@
+"use client";
+
+import React, { useState, useEffect } from "react";
+import { useRouter, useParams } from "next/navigation";
+import TopBar from "@/components/question_creation/top-bar";
+import {
+  DetailedTestResultView,
+  DetailedTestResult,
+} from "@/components/results";
+import { MockResultsAPI } from "@/lib/results-api";
+
+export default function TestResultPage() {
+  const router = useRouter();
+  const params = useParams();
+  const [result, setResult] = useState<DetailedTestResult | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    const loadTestResult = async () => {
+      // Use a mock student ID since we're not requiring login
+      const mockStudentId = "student-1";
+
+      try {
+        setLoading(true);
+        setError(null);
+        const testId = params.testId as string;
+
+        const data = await MockResultsAPI.getTestResult(mockStudentId, testId);
+        setResult(data);
+      } catch (err) {
+        console.error("Failed to load test result:", err);
+        setError("Failed to load test result. Please try again.");
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    if (params.testId) {
+      loadTestResult();
+    }
+  }, [params.testId]);
+
+  const handleBack = () => {
+    router.back();
+  };
+
+  if (loading) {
+    return (
+      <div className="flex flex-col min-h-screen">
+        <TopBar />
+        <div className="container mx-auto px-4 py-8">
+          <div className="flex items-center justify-center min-h-96">
+            <div className="text-center">
+              <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary mx-auto mb-4"></div>
+              <p className="text-muted-foreground">Loading test result...</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  if (error || !result) {
+    return (
+      <div className="flex flex-col min-h-screen">
+        <TopBar />
+        <div className="container mx-auto px-4 py-8">
+          <div className="flex items-center justify-center min-h-96">
+            <div className="text-center">
+              <h2 className="text-xl font-semibold mb-2">
+                Error Loading Test Result
+              </h2>
+              <p className="text-muted-foreground mb-4">
+                {error || "Test result not found"}
+              </p>
+              <button
+                onClick={() => router.back()}
+                className="px-4 py-2 bg-primary text-primary-foreground rounded-md hover:bg-primary/90"
+              >
+                Go Back
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex flex-col min-h-screen">
+      <TopBar />
+      <div className="container mx-auto px-4 py-8">
+        <DetailedTestResultView result={result} onBack={handleBack} />
+      </div>
+    </div>
+  );
+}
diff --git a/src/app/(test)/teacher-results/page.tsx b/src/app/(test)/teacher-results/page.tsx
new file mode 100644
index 0000000..fb3be6b
--- /dev/null
+++ b/src/app/(test)/teacher-results/page.tsx
@@ -0,0 +1,573 @@
+"use client";
+
+import React, { useState, useEffect } from "react";
+import { useRouter, useSearchParams } from "next/navigation";
+import TopBar from "@/components/question_creation/top-bar";
+import {
+  TeacherCourseOverview,
+  TestOverview,
+  DetailedTestStatistics,
+} from "@/components/results/teacher/types";
+import { MockTeacherResultsAPI } from "@/lib/results-api";
+import {
+  CoursesGrid,
+  RecentTestsCard,
+  CourseTestsTable,
+  PerformanceDistributionChart,
+  StudentResultsTable,
+  QuestionStatsTable,
+  SortOption,
+  SortDropdown,
+} from "@/components/results/teacher";
+import { DetailedTestResultView } from "@/components/results/common/detailed-test-result";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import {
+  ChevronLeft,
+  Users,
+  Award,
+  BookOpen,
+  Clock,
+  FileBarChart,
+} from "lucide-react";
+import { Separator } from "@/components/ui/separator";
+import { toast } from "sonner";
+
+export default function TeacherResultsPage() {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const [currentView, setCurrentView] = useState<
+    "overview" | "course" | "test" | "student-detail"
+  >("overview");
+  const [selectedCourseId, setSelectedCourseId] = useState<string | null>(null);
+  const [selectedTestId, setSelectedTestId] = useState<string | null>(null);
+  const [selectedStudentId, setSelectedStudentId] = useState<string | null>(
+    null,
+  );
+
+  const [coursesList, setCoursesList] = useState<TeacherCourseOverview[]>([]);
+  const [recentTests, setRecentTests] = useState<TestOverview[]>([]);
+  const [courseTests, setCourseTests] = useState<TestOverview[]>([]);
+  const [testStatistics, setTestStatistics] =
+    useState<DetailedTestStatistics | null>(null);
+  const [courseSortOption, setCourseSortOption] =
+    useState<SortOption>("latest");
+
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  // Load initial data (courses and recent tests)
+  const loadInitialData = React.useCallback(async () => {
+    const mockTeacherId = "teacher-1"; // In a real app, get from auth context
+
+    setLoading(true);
+    setError(null);
+
+    try {
+      // Load both teacher courses and recent tests in parallel
+      const [courses, tests] = await Promise.all([
+        MockTeacherResultsAPI.getTeacherCourses(mockTeacherId),
+        MockTeacherResultsAPI.getRecentTests(mockTeacherId, 3),
+      ]);
+
+      setCoursesList(courses);
+      setRecentTests(tests);
+    } catch (err) {
+      console.error("Failed to load teacher results data:", err);
+      setError("Failed to load results. Please try again.");
+      toast.error("Failed to load results data", {
+        description: "Failed to load results. Please try again.",
+      });
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  // Load course tests when a course is selected
+  const loadCourseTests = React.useCallback(async (courseId: string) => {
+    setLoading(true);
+
+    try {
+      const tests = await MockTeacherResultsAPI.getCourseTests(courseId);
+      setCourseTests(tests);
+    } catch (err) {
+      console.error("Failed to load course tests:", err);
+      setError("Failed to load course tests. Please try again.");
+      toast.error("Failed to load course tests", {
+        description: "Please try again",
+      });
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  // Load test statistics when a test is selected
+  const loadTestStatistics = React.useCallback(async (testId: string) => {
+    setLoading(true);
+
+    try {
+      const stats = await MockTeacherResultsAPI.getTestStatistics(testId);
+      setTestStatistics(stats);
+    } catch (err) {
+      console.error("Failed to load test statistics:", err);
+      setError("Failed to load test statistics. Please try again.");
+      toast.error("Failed to load test statistics", {
+        description: "Please try again",
+      });
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  // Handle navigation from URL parameters
+  useEffect(() => {
+    const view = searchParams.get("view");
+    const courseId = searchParams.get("courseId");
+    const testId = searchParams.get("testId");
+
+    if (view === "test" && testId) {
+      setCurrentView("test");
+      setSelectedTestId(testId);
+      loadTestStatistics(testId);
+    } else if (view === "course" && courseId) {
+      setCurrentView("course");
+      setSelectedCourseId(courseId);
+      loadCourseTests(courseId);
+    } else {
+      setCurrentView("overview");
+      setSelectedCourseId(null);
+      setSelectedTestId(null);
+    }
+  }, [searchParams, loadCourseTests, loadTestStatistics]);
+
+  // Load initial data
+  useEffect(() => {
+    loadInitialData();
+  }, [loadInitialData]);
+
+  // Navigation handlers
+  const handleViewCourse = (courseId: string) => {
+    router.push(`/teacher-results?view=course&courseId=${courseId}`);
+  };
+
+  const handleViewTest = (testId: string) => {
+    router.push(`/teacher-results?view=test&testId=${testId}`);
+  };
+  const handleBack = () => {
+    if (currentView === "student-detail") {
+      setCurrentView("test");
+      setSelectedStudentId(null);
+    } else if (currentView === "test" && selectedCourseId) {
+      router.push(`/teacher-results?view=course&courseId=${selectedCourseId}`);
+    } else {
+      router.push("/teacher-results");
+    }
+  };
+  const handleViewStudentResult = (studentId: string) => {
+    setSelectedStudentId(studentId);
+    setCurrentView("student-detail");
+  };
+
+  // Find selected course
+  const selectedCourse = coursesList.find(
+    (course) => course.courseId === selectedCourseId,
+  );
+  // Use the selected test ID in a meaningful way - creating document title
+  // and displaying test ID for debugging purposes when in test view
+  useEffect(() => {
+    // Update document title based on the current view
+    if (currentView === "test" && selectedTestId && testStatistics) {
+      document.title = `Test: ${testStatistics.testName} | Teacher Results`;
+      console.log(`Viewing test with ID: ${selectedTestId}`);
+    } else if (currentView === "course" && selectedCourse) {
+      document.title = `Course: ${selectedCourse.courseName} | Teacher Results`;
+    } else {
+      document.title = "Teacher Results Dashboard";
+    }
+
+    return () => {
+      document.title = "Evalify";
+    };
+  }, [currentView, selectedTestId, selectedCourse, testStatistics]);
+
+  // Loading state
+  if (loading) {
+    return (
+      <div className="container mx-auto px-4 py-8">
+        <div className="flex items-center justify-center min-h-96">
+          <div className="text-center">
+            <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary mx-auto mb-4"></div>
+            <p className="text-muted-foreground">Loading results...</p>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  // Error state
+  if (error) {
+    return (
+      <div className="container mx-auto px-4 py-8">
+        <div className="flex items-center justify-center min-h-96">
+          <div className="text-center">
+            <h2 className="text-xl font-semibold mb-2">
+              Error Loading Results
+            </h2>
+            <p className="text-muted-foreground mb-4">{error}</p>
+            <Button
+              onClick={loadInitialData}
+              className="px-4 py-2 bg-primary text-primary-foreground rounded-md hover:bg-primary/90"
+            >
+              Try Again
+            </Button>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex flex-col min-h-screen bg-muted/20">
+      <TopBar />
+
+      <div className="container mx-auto px-4 py-8 space-y-8">
+        {/* Overview Page */}
+        {currentView === "overview" && (
+          <>
+            <div className="mb-8">
+              <div className="flex items-center gap-3 mb-3">
+                <div className="bg-primary/10 p-2 rounded-full">
+                  <FileBarChart className="h-6 w-6 text-primary" />
+                </div>
+                <h1 className="text-3xl font-bold">Test Results & Analytics</h1>
+              </div>
+              <p className="text-muted-foreground ml-12">
+                Monitor student performance and test statistics across all your
+                courses
+              </p>
+              <div className="mt-4 h-1 w-24 bg-primary rounded-full ml-12"></div>
+            </div>
+            {/* Stats Summary Cards */}
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-8">
+              <Card className="border-l-4 border-l-blue-500 shadow-sm hover:shadow-md transition-shadow">
+                <CardContent className="p-4 flex items-center gap-4">
+                  <div className="bg-blue-500/10 p-3 rounded-full">
+                    <Users className="h-6 w-6 text-blue-500" />
+                  </div>
+                  <div>
+                    <p className="text-sm text-muted-foreground">
+                      Total Students
+                    </p>
+                    <p className="text-2xl font-semibold">
+                      {coursesList.reduce(
+                        (sum, course) => sum + course.totalStudents,
+                        0,
+                      )}
+                    </p>
+                  </div>
+                </CardContent>
+              </Card>
+
+              <Card className="border-l-4 border-l-emerald-500 shadow-sm hover:shadow-md transition-shadow">
+                <CardContent className="p-4 flex items-center gap-4">
+                  <div className="bg-emerald-500/10 p-3 rounded-full">
+                    <BookOpen className="h-6 w-6 text-emerald-500" />
+                  </div>
+                  <div>
+                    <p className="text-sm text-muted-foreground">
+                      Active Courses
+                    </p>
+                    <p className="text-2xl font-semibold">
+                      {coursesList.length}
+                    </p>
+                  </div>
+                </CardContent>
+              </Card>
+
+              <Card className="border-l-4 border-l-amber-500 shadow-sm hover:shadow-md transition-shadow">
+                <CardContent className="p-4 flex items-center gap-4">
+                  <div className="bg-amber-500/10 p-3 rounded-full">
+                    <Award className="h-6 w-6 text-amber-500" />
+                  </div>
+                  <div>
+                    <p className="text-sm text-muted-foreground">
+                      Avg Course Score
+                    </p>
+                    <p className="text-2xl font-semibold">
+                      {coursesList.length > 0
+                        ? (
+                            coursesList.reduce(
+                              (sum, course) => sum + course.averageScore,
+                              0,
+                            ) / coursesList.length
+                          ).toFixed(1)
+                        : 0}
+                      %
+                    </p>
+                  </div>
+                </CardContent>
+              </Card>
+
+              <Card className="border-l-4 border-l-purple-500 shadow-sm hover:shadow-md transition-shadow">
+                <CardContent className="p-4 flex items-center gap-4">
+                  <div className="bg-purple-500/10 p-3 rounded-full">
+                    <Clock className="h-6 w-6 text-purple-500" />
+                  </div>
+                  <div>
+                    <p className="text-sm text-muted-foreground">
+                      Recent Tests
+                    </p>
+                    <p className="text-2xl font-semibold">
+                      {recentTests.length}
+                    </p>
+                  </div>
+                </CardContent>
+              </Card>
+            </div>
+            {/* Recent Tests */}
+            <div className="mb-1">
+              <div className="flex items-center gap-2 mb-2">
+                <Clock className="h-5 w-5 text-primary" />
+                <h2 className="text-xl font-semibold">Recent Tests</h2>
+              </div>
+              <p className="text-sm text-muted-foreground ml-7 mb-4">
+                Recently administered tests across all courses
+              </p>
+            </div>
+            <RecentTestsCard tests={recentTests} onViewTest={handleViewTest} />{" "}
+            {/* All Courses */}
+            <div className="mt-8 mb-1">
+              <div className="flex items-center justify-between mb-2">
+                <div className="flex items-center gap-2">
+                  <BookOpen className="h-5 w-5 text-primary" />
+                  <h2 className="text-xl font-semibold">Your Courses</h2>
+                </div>{" "}
+                <div className="flex items-center">
+                  <span className="text-sm text-muted-foreground mr-2">
+                    Sort by:
+                  </span>
+                  <SortDropdown
+                    value={courseSortOption || "latest"}
+                    onChange={(value) => setCourseSortOption(value)}
+                  />
+                </div>
+              </div>
+              <p className="text-sm text-muted-foreground ml-7 mb-4">
+                Performance analytics for all your courses
+              </p>
+            </div>
+            <CoursesGrid
+              courses={coursesList}
+              onViewCourse={handleViewCourse}
+              sortBy={courseSortOption}
+            />
+          </>
+        )}
+
+        {/* Course Page */}
+        {currentView === "course" && selectedCourse && (
+          <>
+            <div>
+              <Button
+                variant="ghost"
+                className="mb-4 pl-1 flex items-center gap-1"
+                onClick={handleBack}
+              >
+                <ChevronLeft className="h-4 w-4" /> Back to Overview
+              </Button>
+              <div className="mb-8">
+                <h1 className="text-3xl font-bold mb-2">
+                  {selectedCourse.courseName}
+                </h1>
+                <p className="text-muted-foreground">
+                  {selectedCourse.courseCode} • Performance Analytics
+                </p>
+                <div className="mt-4 h-1 w-24 bg-primary rounded-full"></div>
+              </div>
+            </div>
+            {/* Course Summary Card */}
+            <Card className="mb-6 border border-border shadow-sm overflow-hidden">
+              <CardHeader className="bg-muted/30 pb-2">
+                <CardTitle>Course Summary</CardTitle>
+              </CardHeader>
+              <CardContent className="pt-6">
+                <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+                  <div className="flex items-center gap-3">
+                    <Users className="h-10 w-10 text-blue-600 p-1.5 bg-blue-100 rounded-full dark:bg-blue-900/30 dark:text-blue-300" />
+                    <div>
+                      <p className="text-sm text-muted-foreground">Students</p>
+                      <p className="text-xl font-semibold">
+                        {selectedCourse.totalStudents}
+                      </p>
+                    </div>
+                  </div>
+                  <div className="flex items-center gap-3">
+                    <BookOpen className="h-10 w-10 text-emerald-600 p-1.5 bg-emerald-100 rounded-full dark:bg-emerald-900/30 dark:text-emerald-300" />
+                    <div>
+                      <p className="text-sm text-muted-foreground">Tests</p>
+                      <p className="text-xl font-semibold">
+                        {selectedCourse.totalTests}
+                      </p>
+                    </div>
+                  </div>
+                  <div className="flex items-center gap-3">
+                    <Award className="h-10 w-10 text-amber-600 p-1.5 bg-amber-100 rounded-full dark:bg-amber-900/30 dark:text-amber-300" />
+                    <div>
+                      <p className="text-sm text-muted-foreground">
+                        Average Score
+                      </p>
+                      <p className="text-xl font-semibold">
+                        {selectedCourse.averageScore.toFixed(1)}%
+                      </p>
+                    </div>
+                  </div>
+                  <div className="flex items-center gap-3">
+                    <Clock className="h-10 w-10 text-purple-600 p-1.5 bg-purple-100 rounded-full dark:bg-purple-900/30 dark:text-purple-300" />
+                    <div>
+                      <p className="text-sm text-muted-foreground">
+                        Completion Rate
+                      </p>
+                      <p className="text-xl font-semibold">
+                        {selectedCourse.completionRate}%
+                      </p>
+                    </div>
+                  </div>
+                </div>
+              </CardContent>
+            </Card>{" "}
+            {/* Course Tests */}
+            <div className="flex flex-col gap-1">
+              <div className="flex justify-between items-center">
+                <div>
+                  <h2 className="text-xl font-semibold mb-0">Test History</h2>
+                  <p className="text-sm text-muted-foreground">
+                    All tests administered for this course
+                  </p>
+                </div>
+              </div>
+              <div className="mt-2">
+                <CourseTestsTable
+                  tests={courseTests}
+                  onViewTest={handleViewTest}
+                />
+              </div>
+            </div>
+          </>
+        )}
+
+        {/* Test Details Page */}
+        {currentView === "test" && testStatistics && (
+          <>
+            <div>
+              <Button
+                variant="ghost"
+                className="mb-4 pl-1 flex items-center gap-1"
+                onClick={handleBack}
+              >
+                <ChevronLeft className="h-4 w-4" /> Back to Course
+              </Button>
+              <div className="mb-8">
+                <h1 className="text-3xl font-bold mb-2">
+                  {testStatistics.testName}
+                </h1>
+                <p className="text-muted-foreground">
+                  {testStatistics.courseName} ({testStatistics.courseCode}) •
+                  Test Analytics
+                </p>
+                <div className="mt-4 h-1 w-24 bg-primary rounded-full"></div>
+              </div>
+            </div>
+            {/* Test Summary */}
+            <Card className="mb-6 border border-border shadow-sm overflow-hidden">
+              <CardHeader className="bg-muted/30 pb-2">
+                <CardTitle>Test Overview</CardTitle>
+              </CardHeader>
+              <CardContent className="pt-6">
+                <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+                  <div className="flex items-center gap-3">
+                    <Award className="h-10 w-10 text-amber-600 p-1.5 bg-amber-100 rounded-full dark:bg-amber-900/30 dark:text-amber-300" />
+                    <div>
+                      <p className="text-sm text-muted-foreground">
+                        Average Score
+                      </p>
+                      <p className="text-xl font-semibold">
+                        {testStatistics.averageScore.toFixed(1)}%
+                      </p>
+                    </div>
+                  </div>
+                  <div className="flex items-center gap-3">
+                    <Users className="h-10 w-10 text-blue-600 p-1.5 bg-blue-100 rounded-full dark:bg-blue-900/30 dark:text-blue-300" />
+                    <div>
+                      <p className="text-sm text-muted-foreground">
+                        Submissions
+                      </p>
+                      <p className="text-xl font-semibold">
+                        {testStatistics.totalSubmissions}
+                      </p>
+                    </div>
+                  </div>
+                  <div className="flex items-center gap-3">
+                    <FileBarChart className="h-10 w-10 text-emerald-600 p-1.5 bg-emerald-100 rounded-full dark:bg-emerald-900/30 dark:text-emerald-300" />
+                    <div>
+                      <p className="text-sm text-muted-foreground">
+                        High / Low
+                      </p>
+                      <p className="text-xl font-semibold">
+                        {testStatistics.highestScore}% /{" "}
+                        {testStatistics.lowestScore}%
+                      </p>
+                    </div>
+                  </div>
+                  <div className="flex items-center gap-3">
+                    <Clock className="h-10 w-10 text-purple-600 p-1.5 bg-purple-100 rounded-full dark:bg-purple-900/30 dark:text-purple-300" />
+                    <div>
+                      <p className="text-sm text-muted-foreground">
+                        Median Score
+                      </p>
+                      <p className="text-xl font-semibold">
+                        {testStatistics.medianScore}%
+                      </p>
+                    </div>
+                  </div>
+                </div>
+              </CardContent>
+            </Card>{" "}
+            {/* Performance Distribution Chart */}
+            <div className="mb-2">
+              <h2 className="text-xl font-semibold">Score Distribution</h2>
+              <p className="text-sm text-muted-foreground mt-1">
+                Student performance across different score ranges
+              </p>
+            </div>
+            <PerformanceDistributionChart statistics={testStatistics} />
+            <Separator className="my-8" />
+            {/* Student Results Table */}
+            <div className="mb-2">
+              <h2 className="text-xl font-semibold">Student Performance</h2>
+              <p className="text-sm text-muted-foreground mt-1">
+                Individual student scores and statistics
+              </p>
+            </div>{" "}
+            <StudentResultsTable
+              statistics={testStatistics}
+              onViewStudentResult={handleViewStudentResult}
+            />
+            <Separator className="my-8" />
+            {/* Question Stats Table */}
+            <div className="mb-2">
+              <h2 className="text-xl font-semibold">Question Analysis</h2>
+              <p className="text-sm text-muted-foreground mt-1">
+                Performance metrics for each question on the test
+              </p>
+            </div>{" "}
+            <QuestionStatsTable statistics={testStatistics} />
+          </>
+        )}
+
+        {currentView === "student-detail" && selectedStudentId && (
+          <DetailedTestResultView onBack={handleBack} />
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/navigation/side-navbar/side-navbar.tsx b/src/components/navigation/side-navbar/side-navbar.tsx
index 112024c..0835de9 100644
--- a/src/components/navigation/side-navbar/side-navbar.tsx
+++ b/src/components/navigation/side-navbar/side-navbar.tsx
@@ -61,7 +61,7 @@ const academicsItems = [
   },
   {
     title: "Results",
-    url: "/result",
+    url: "/student-results",
     icon: Trophy,
   },
 ];
@@ -72,6 +72,11 @@ const administrationItems = [
     url: "/user",
     icon: Users,
   },
+  {
+    title: "Teacher Results",
+    url: "/teacher-results",
+    icon: BarChart3,
+  },
   {
     title: "Batches",
     url: "/batch",
diff --git a/src/components/question_creation/question-editor.tsx b/src/components/question_creation/question-editor.tsx
index 64d7fb4..f3ef169 100644
--- a/src/components/question_creation/question-editor.tsx
+++ b/src/components/question_creation/question-editor.tsx
@@ -141,7 +141,6 @@ const QuestionEditor: React.FC<QuestionEditorProps> = ({
           type: "true-false",
           correctAnswer: null,
         };
-
       case "fillup":
         return {
           ...baseData,
@@ -279,7 +278,6 @@ const QuestionEditor: React.FC<QuestionEditorProps> = ({
           );
         }
         break;
-
       case "fillup":
         if (questionData.type === "fillup") {
           return (
@@ -288,6 +286,8 @@ const QuestionEditor: React.FC<QuestionEditorProps> = ({
               blanks={questionData.blanks}
               explanation={questionData.explanation}
               showExplanation={questionData.showExplanation}
+              strictMatch={questionData.strictMatch}
+              useHybridEvaluation={questionData.useHybridEvaluation}
               onQuestionChange={(question) => updateData({ question })}
               onBlanksChange={(blanks) => updateData({ blanks })}
               onExplanationChange={(explanation) => updateData({ explanation })}
@@ -298,8 +298,6 @@ const QuestionEditor: React.FC<QuestionEditorProps> = ({
               onUseHybridEvaluationChange={(useHybridEvaluation) =>
                 updateData({ useHybridEvaluation })
               }
-              strictMatch={questionData.strictMatch}
-              useHybridEvaluation={questionData.useHybridEvaluation}
             />
           );
         }
diff --git a/src/components/question_creation/question-settings.tsx b/src/components/question_creation/question-settings.tsx
index 36575ed..8f3e576 100644
--- a/src/components/question_creation/question-settings.tsx
+++ b/src/components/question_creation/question-settings.tsx
@@ -133,8 +133,7 @@ const QuestionSettings = ({
                 />
               </div>
               {availableTopics.length > 0 && (
-                <div>
-                  <div className="flex items-center gap-2 text-sm font-semibold mb-2">
+                <div>                  <div className="flex items-center gap-2 text-sm font-semibold mb-2">
                     <Tags className="h-4 w-4 text-primary" />
                     <label>Related Topics</label>
                   </div>
@@ -157,8 +156,7 @@ const QuestionSettings = ({
                     allowMultiple={true}
                   />
                 </div>
-              )}
-            </div>
+              )}            </div>
           </div>
         </CardContent>
       </Card>
diff --git a/src/components/question_creation/question-types/fillup-question.tsx b/src/components/question_creation/question-types/fillup-question.tsx
index e2626af..3647bb5 100644
--- a/src/components/question_creation/question-types/fillup-question.tsx
+++ b/src/components/question_creation/question-types/fillup-question.tsx
@@ -151,7 +151,6 @@ const FillupQuestion: React.FC<FillupQuestionProps> = ({
       error("Editor is not ready. Please try again.");
       return;
     }
-
     const editor = editorRef.current.editor;
     if (!editor) {
       console.error(
@@ -161,9 +160,7 @@ const FillupQuestion: React.FC<FillupQuestionProps> = ({
         "Editor is not initialized. Please refresh the page and try again.",
       );
       return;
-    }
-
-    // Check if editor is destroyed or not ready
+    } // Check if editor is destroyed or not ready
     if (editor.isDestroyed) {
       console.error("Cannot insert blank - editor has been destroyed");
       error("Editor is no longer available. Please refresh the page.");
@@ -200,9 +197,7 @@ const FillupQuestion: React.FC<FillupQuestionProps> = ({
       console.error("Editor state:", {
         isDestroyed: editor.isDestroyed,
         isFocused: editor.isFocused,
-      });
-
-      // Show user-friendly error message
+      }); // Show user-friendly error message
       error("Failed to insert blank. Please try again or refresh the page.");
     }
   };
@@ -234,7 +229,6 @@ const FillupQuestion: React.FC<FillupQuestionProps> = ({
       isUpdating.current = false;
     }, 100);
   };
-
   const removeAnswerFromBlank = (blankId: string, answerToRemove: string) => {
     // Set updating flag to prevent blank detection during answer removal
     isUpdating.current = true;
@@ -349,7 +343,7 @@ const FillupQuestion: React.FC<FillupQuestionProps> = ({
               </p>
             </div>
           </div>
-        </CardHeader>
+        </CardHeader>{" "}
         <CardContent>
           <TiptapEditor
             ref={editorRef}
@@ -664,7 +658,7 @@ const FillupQuestion: React.FC<FillupQuestionProps> = ({
               onCheckedChange={onShowExplanationChange}
             />
           </div>
-        </CardHeader>
+        </CardHeader>{" "}
         {showExplanation && (
           <CardContent>
             <TiptapEditor
diff --git a/src/components/question_creation/question-types/true-false-question.tsx b/src/components/question_creation/question-types/true-false-question.tsx
index 938d782..68d3df6 100644
--- a/src/components/question_creation/question-types/true-false-question.tsx
+++ b/src/components/question_creation/question-types/true-false-question.tsx
@@ -56,7 +56,11 @@ const TrueFalseQuestion: React.FC<TrueFalseQuestionProps> = ({
           </CardTitle>
         </CardHeader>
         <CardContent>
-          <div className="flex gap-4">
+          <div
+            role="radiogroup"
+            aria-label="True or False answer selection"
+            className="flex gap-4"
+          >
             <div
               tabIndex={correctAnswer === true ? 0 : -1}
               className={`flex-1 flex items-center justify-center p-4 border rounded-lg transition-colors cursor-pointer ${
@@ -65,6 +69,12 @@ const TrueFalseQuestion: React.FC<TrueFalseQuestionProps> = ({
                   : "border-border hover:border-primary/30"
               }`}
               onClick={() => onCorrectAnswerChange(true)}
+              onKeyDown={(e) => {
+                if (e.key === "Enter" || e.key === " ") {
+                  e.preventDefault();
+                  onCorrectAnswerChange(true);
+                }
+              }}
             >
               <Label className="text-lg font-medium cursor-pointer">True</Label>
             </div>
@@ -76,6 +86,12 @@ const TrueFalseQuestion: React.FC<TrueFalseQuestionProps> = ({
                   : "border-border hover:border-primary/30"
               }`}
               onClick={() => onCorrectAnswerChange(false)}
+              onKeyDown={(e) => {
+                if (e.key === "Enter" || e.key === " ") {
+                  e.preventDefault();
+                  onCorrectAnswerChange(false);
+                }
+              }}
             >
               <Label className="text-lg font-medium cursor-pointer">
                 False
diff --git a/src/components/results/common/detailed-test-result.tsx b/src/components/results/common/detailed-test-result.tsx
new file mode 100644
index 0000000..8ebdf69
--- /dev/null
+++ b/src/components/results/common/detailed-test-result.tsx
@@ -0,0 +1,460 @@
+"use client";
+
+import React from "react";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { getScoreTextColor } from "@/lib/utils/score-colors";
+import {
+  ArrowLeft,
+  Clock,
+  FileText,
+  Calendar,
+  CheckCircle,
+  XCircle,
+  HelpCircle,
+} from "lucide-react";
+import type { DetailedTestResult, QuestionResult } from "./types";
+
+// Mock data for detailed test result
+const mockDetailedTestResult: DetailedTestResult = {
+  testId: "mock-test-123",
+  testName: "Data Structures and Algorithms - Final Exam",
+  courseName: "Computer Science",
+  courseId: "CS301",
+  courseCode: "CS301",
+  completedAt: "2025-06-15T10:30:00Z",
+  timeSpent: 45,
+  score: 85,
+  maxScore: 100,
+  percentage: 85,
+  questionCount: 20,
+  correctCount: 17,
+  passingScore: 60,
+  questions: [
+    {
+      questionId: "q1",
+      questionText: "What is the time complexity of binary search?",
+      questionType: "mcq",
+      marks: 5,
+      studentAnswer: "a",
+      correctAnswer: "a",
+      isCorrect: true,
+      timeTaken: 2,
+      explanation:
+        "Binary search has O(log n) time complexity as it divides the search space in half with each iteration.",
+      options: [
+        { id: "a", text: "O(log n)", isCorrect: true },
+        { id: "b", text: "O(n)", isCorrect: false },
+        { id: "c", text: "O(n log n)", isCorrect: false },
+        { id: "d", text: "O(n²)", isCorrect: false },
+      ],
+    },
+    {
+      questionId: "q2",
+      questionText: "Which data structure follows LIFO principle?",
+      questionType: "mcq",
+      marks: 5,
+      studentAnswer: "b",
+      correctAnswer: "a",
+      isCorrect: false,
+      timeTaken: 3,
+      explanation:
+        "Stack follows Last In First Out (LIFO) principle where the last element added is the first one to be removed.",
+      options: [
+        { id: "a", text: "Stack", isCorrect: true },
+        { id: "b", text: "Queue", isCorrect: false },
+        { id: "c", text: "Array", isCorrect: false },
+        { id: "d", text: "Linked List", isCorrect: false },
+      ],
+    },
+    {
+      questionId: "q3",
+      questionText: "Is a binary tree with only one node considered balanced?",
+      questionType: "true-false",
+      marks: 3,
+      studentAnswer: true,
+      correctAnswer: true,
+      isCorrect: true,
+      timeTaken: 1,
+      explanation:
+        "A tree with only one node is considered balanced as the height difference between left and right subtrees is 0.",
+    },
+    {
+      questionId: "q4",
+      questionText:
+        "Complete the function to find the maximum element in an array:",
+      questionType: "fillup",
+      marks: 7,
+      studentAnswer: "Math.max(...arr)",
+      correctAnswer: "Math.max(...arr)",
+      isCorrect: true,
+      timeTaken: 4,
+      explanation:
+        "Math.max(...arr) uses the spread operator to pass all array elements as arguments to Math.max().",
+    },
+    {
+      questionId: "q5",
+      questionText: "Explain the difference between BFS and DFS algorithms.",
+      questionType: "descriptive",
+      marks: 10,
+      studentAnswer:
+        "BFS explores nodes level by level using a queue, while DFS goes as deep as possible using a stack or recursion.",
+      correctAnswer:
+        "BFS (Breadth-First Search) explores all neighbors at the current depth before moving to nodes at the next depth level, typically using a queue. DFS (Depth-First Search) explores as far as possible along each branch before backtracking, typically using a stack or recursion.",
+      isCorrect: true,
+      timeTaken: 8,
+      explanation:
+        "Good explanation covering the key differences in traversal order and data structures used.",
+    },
+  ],
+};
+
+interface DetailedTestResultProps {
+  result?: DetailedTestResult;
+  onBack: () => void;
+}
+
+export const DetailedTestResultView: React.FC<DetailedTestResultProps> = ({
+  onBack,
+}) => {
+  // Use mock data for now
+  const result = mockDetailedTestResult; // No longer needed - imported at the top
+  const getQuestionIcon = (isCorrect: boolean, questionType: string) => {
+    if (questionType === "descriptive" || questionType === "coding") {
+      return <HelpCircle className="h-4 w-4 text-amber-600" />;
+    }
+    return isCorrect ? (
+      <CheckCircle className="h-4 w-4 text-emerald-600" />
+    ) : (
+      <XCircle className="h-4 w-4 text-red-600" />
+    );
+  };
+
+  const renderAnswer = (question: QuestionResult) => {
+    switch (question.questionType) {
+      case "mcq":
+        return (
+          <div className="space-y-2">
+            {question.options?.map((option, index) => (
+              <div
+                key={option.id}
+                className={`p-2 rounded border ${
+                  option.isCorrect
+                    ? "bg-emerald-100 border-emerald-300 dark:bg-green-900/20 dark:border-green-800"
+                    : question.studentAnswer === option.id
+                      ? "bg-red-100 border-red-300 dark:bg-red-900/20 dark:border-red-800"
+                      : "bg-slate-100 border-slate-300 dark:bg-gray-900/20 dark:border-gray-800"
+                }`}
+              >
+                <div className="flex items-center gap-2">
+                  <span className="font-medium">
+                    {String.fromCharCode(65 + index)}.
+                  </span>
+                  <span>{option.text}</span>{" "}
+                  {option.isCorrect && (
+                    <Badge
+                      variant="secondary"
+                      className="ml-auto bg-emerald-100 border border-emerald-300 text-emerald-800"
+                    >
+                      Correct
+                    </Badge>
+                  )}
+                  {question.studentAnswer === option.id &&
+                    !option.isCorrect && (
+                      <Badge
+                        variant="secondary"
+                        className="ml-auto bg-red-100 border border-red-300 text-red-800"
+                      >
+                        Your Answer
+                      </Badge>
+                    )}
+                </div>
+              </div>
+            ))}
+          </div>
+        );
+
+      case "true-false":
+        return (
+          <div className="space-y-2">
+            <div className="flex items-center gap-4">
+              <span>
+                Your Answer:
+                <Badge
+                  variant="outline"
+                  className={
+                    question.isCorrect
+                      ? "ml-2 text-green-600"
+                      : "ml-2 text-red-600"
+                  }
+                >
+                  {typeof question.studentAnswer === "boolean"
+                    ? question.studentAnswer
+                      ? "True"
+                      : "False"
+                    : String(question.studentAnswer)}
+                </Badge>
+              </span>
+              <span>
+                Correct Answer:
+                <Badge variant="outline" className="ml-2 text-green-600">
+                  {typeof question.correctAnswer === "boolean"
+                    ? question.correctAnswer
+                      ? "True"
+                      : "False"
+                    : String(question.correctAnswer)}
+                </Badge>
+              </span>
+            </div>
+          </div>
+        );
+
+      case "fillup":
+        return (
+          <div className="space-y-2">
+            <div>
+              <span className="text-sm text-muted-foreground">
+                Your Answer:
+              </span>
+              <p
+                className={`mt-1 p-2 rounded border ${
+                  question.isCorrect
+                    ? "bg-green-50 border-green-200 text-green-800 dark:bg-green-900/20 dark:border-green-800"
+                    : "bg-red-50 border-red-200 text-red-800 dark:bg-red-900/20 dark:border-red-800"
+                }`}
+              >
+                {!question.studentAnswer
+                  ? "No answer provided"
+                  : Array.isArray(question.studentAnswer)
+                    ? question.studentAnswer.join(", ")
+                    : typeof question.studentAnswer === "object"
+                      ? JSON.stringify(question.studentAnswer)
+                      : String(question.studentAnswer)}
+              </p>
+            </div>
+            <div>
+              <span className="text-sm text-muted-foreground">
+                Correct Answer:
+              </span>
+              <p className="mt-1 p-2 rounded border bg-green-50 border-green-200 text-green-800 dark:bg-green-900/20 dark:border-green-800">
+                {Array.isArray(question.correctAnswer)
+                  ? question.correctAnswer.join(", ")
+                  : typeof question.correctAnswer === "object"
+                    ? JSON.stringify(question.correctAnswer)
+                    : String(question.correctAnswer)}
+              </p>
+            </div>
+          </div>
+        );
+
+      default:
+        return (
+          <div className="p-3 bg-muted rounded border">
+            <p className="text-sm text-muted-foreground">
+              Answer review not available for this question type
+            </p>
+          </div>
+        );
+    }
+  };
+
+  return (
+    <div className="space-y-6">
+      {/* Header */}{" "}
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-4">
+          {" "}
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={onBack}
+            className="flex items-center gap-2"
+          >
+            <ArrowLeft className="h-4 w-4" />
+            Back to Tests
+          </Button>
+        </div>
+      </div>
+      {/* Test Overview */}
+      <div className="bg-gradient-to-b from-blue-50 to-transparent dark:from-blue-950/20 dark:to-transparent p-6 rounded-lg border border-blue-200 dark:border-blue-900/30 mb-8">
+        <div className="flex flex-col gap-3 md:flex-row md:items-center md:justify-between mb-6">
+          <div>
+            <h1 className="text-2xl font-bold mb-1">{result.testName}</h1>
+            <p className="text-muted-foreground">
+              {result.courseName} ({result.courseCode})
+            </p>
+          </div>
+          <div className="flex items-center gap-4">
+            <div className="flex items-center gap-2">
+              <Calendar className="h-4 w-4 text-muted-foreground" />
+              <span className="text-sm">
+                {new Date(result.completedAt).toLocaleDateString()}
+              </span>
+            </div>
+            <div className="flex items-center gap-2">
+              <Clock className="h-4 w-4 text-muted-foreground" />
+              <span className="text-sm">{result.timeSpent} min</span>
+            </div>
+          </div>
+        </div>
+
+        <div className="bg-card rounded-lg border p-4 shadow-sm">
+          {" "}
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
+            <div>
+              <p className="text-sm text-muted-foreground mb-1">Score</p>
+              <div className="flex items-baseline gap-2">
+                {" "}
+                <span
+                  className={`text-2xl font-bold ${getScoreTextColor(result.percentage)}`}
+                >
+                  {result.percentage.toFixed(1)}%
+                </span>
+                <span className="text-sm text-muted-foreground">
+                  ({result.score}/{result.maxScore})
+                </span>
+              </div>
+            </div>{" "}
+            <div className="grid grid-cols-3 gap-2">
+              <div className="col-span-3 mb-1">
+                <p className="text-sm text-muted-foreground">
+                  Question Results
+                </p>
+              </div>
+              <div className="flex items-center gap-1 bg-emerald-50 px-2 py-1 rounded-md border border-emerald-200 dark:bg-emerald-900/20 dark:border-emerald-800/40">
+                <CheckCircle className="h-4 w-4 text-emerald-600 dark:text-emerald-400" />
+                <p className="text-emerald-700 dark:text-emerald-300 font-medium">
+                  {result.correctCount}
+                </p>
+                <p className="text-xs text-emerald-600/80 dark:text-emerald-400/80">
+                  correct
+                </p>
+              </div>
+              <div className="flex items-center gap-1 bg-red-50 px-2 py-1 rounded-md border border-red-200 dark:bg-red-900/20 dark:border-red-800/40">
+                <XCircle className="h-4 w-4 text-red-600 dark:text-red-400" />
+                <p className="text-red-700 dark:text-red-300 font-medium">
+                  {result.questions.filter((q) => q.isCorrect === false).length}
+                </p>
+                <p className="text-xs text-red-600/80 dark:text-red-400/80">
+                  wrong
+                </p>
+              </div>
+              <div className="flex items-center gap-1 bg-amber-50 px-2 py-1 rounded-md border border-amber-200 dark:bg-amber-900/20 dark:border-amber-800/40">
+                <HelpCircle className="h-4 w-4 text-amber-600 dark:text-amber-400" />{" "}
+                <p className="text-amber-700 dark:text-amber-300 font-medium">
+                  {
+                    result.questions.filter(
+                      (q) =>
+                        q.studentAnswer === undefined ||
+                        q.studentAnswer === null ||
+                        q.studentAnswer === "" ||
+                        (Array.isArray(q.studentAnswer) &&
+                          q.studentAnswer.length === 0) ||
+                        (typeof q.studentAnswer === "object" &&
+                          Object.keys(q.studentAnswer).length === 0),
+                    ).length
+                  }
+                </p>
+                <p className="text-xs text-amber-600/80 dark:text-amber-400/80">
+                  unanswered
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      {/* Questions */}
+      <div className="mb-4">
+        {" "}
+        <div className="flex items-center gap-2 mb-4">
+          <FileText className="h-5 w-5 text-primary" />
+          <h2 className="text-xl font-semibold">Questions & Answers</h2>
+        </div>
+        <div className="space-y-6">
+          {result.questions.map((question, index) => (
+            <Card key={question.questionId} className="overflow-hidden">
+              {" "}
+              <CardHeader className="bg-muted/30 py-3">
+                <div className="flex items-start justify-between">
+                  <div className="flex items-start gap-3">
+                    <span className="bg-primary/10 text-primary rounded-full h-6 w-6 flex items-center justify-center text-sm font-medium">
+                      {index + 1}
+                    </span>
+                    <div>
+                      <div className="flex items-center gap-2">
+                        {getQuestionIcon(
+                          question.isCorrect,
+                          question.questionType,
+                        )}{" "}
+                        <Badge
+                          variant="outline"
+                          className={`font-normal text-xs ${
+                            question.questionType === "mcq"
+                              ? "bg-violet-100 text-violet-800 border-violet-300 dark:bg-violet-950/50 dark:text-violet-300"
+                              : question.questionType === "fillup"
+                                ? "bg-sky-100 text-sky-800 border-sky-300 dark:bg-sky-950/50 dark:text-sky-300"
+                                : question.questionType === "true-false"
+                                  ? "bg-teal-100 text-teal-800 border-teal-300 dark:bg-teal-950/50 dark:text-teal-300"
+                                  : question.questionType === "descriptive"
+                                    ? "bg-amber-100 text-amber-800 border-amber-300 dark:bg-amber-950/50 dark:text-amber-300"
+                                    : question.questionType === "coding"
+                                      ? "bg-blue-100 text-blue-800 border-blue-300 dark:bg-blue-950/50 dark:text-blue-300"
+                                      : question.questionType === "file-upload"
+                                        ? "bg-purple-100 text-purple-800 border-purple-300 dark:bg-purple-950/50 dark:text-purple-300"
+                                        : question.questionType === "match"
+                                          ? "bg-pink-100 text-pink-800 border-pink-300 dark:bg-pink-950/50 dark:text-pink-300"
+                                          : "bg-gray-100 text-gray-800 border-gray-300 dark:bg-gray-950/50 dark:text-gray-300"
+                          }`}
+                        >
+                          {question.questionType === "mcq"
+                            ? "Multiple Choice"
+                            : question.questionType === "fillup"
+                              ? "Fill in the blank"
+                              : question.questionType === "true-false"
+                                ? "True or False"
+                                : question.questionType === "descriptive"
+                                  ? "Essay"
+                                  : question.questionType === "coding"
+                                    ? "Coding"
+                                    : question.questionType === "file-upload"
+                                      ? "File Upload"
+                                      : question.questionType === "match"
+                                        ? "Match Items"
+                                        : "Other"}
+                        </Badge>
+                        <Badge
+                          variant="secondary"
+                          className="font-normal text-xs bg-gray-200 text-gray-800 dark:bg-gray-800 dark:text-gray-200"
+                        >
+                          {question.marks}{" "}
+                          {question.marks === 1 ? "mark" : "marks"}
+                        </Badge>
+                      </div>
+                      <CardTitle className="text-base font-medium mt-2">
+                        {question.questionText}
+                      </CardTitle>
+                    </div>
+                  </div>
+                </div>
+              </CardHeader>
+              <CardContent className="pt-4">
+                {renderAnswer(question)}{" "}
+                {question.explanation && (
+                  <div className="mt-4 p-3 rounded bg-indigo-100 dark:bg-indigo-900/30 border border-indigo-300 dark:border-indigo-800">
+                    <p className="text-sm font-medium mb-1 text-indigo-800 dark:text-indigo-300">
+                      Explanation
+                    </p>
+                    <p className="text-sm text-indigo-800/90 dark:text-indigo-300/80">
+                      {question.explanation}
+                    </p>
+                  </div>
+                )}
+              </CardContent>
+            </Card>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};
diff --git a/src/components/results/common/index.ts b/src/components/results/common/index.ts
new file mode 100644
index 0000000..bc6e845
--- /dev/null
+++ b/src/components/results/common/index.ts
@@ -0,0 +1,3 @@
+// Export all common components and types
+export * from "./types";
+export * from "./detailed-test-result";
diff --git a/src/components/results/common/types.ts b/src/components/results/common/types.ts
new file mode 100644
index 0000000..e1e340a
--- /dev/null
+++ b/src/components/results/common/types.ts
@@ -0,0 +1,74 @@
+// Common types for the results system - shared between student and teacher components
+
+export interface TestSummary {
+  testId: string;
+  testName: string;
+  score: number;
+  maxScore: number;
+  percentage: number;
+  timeTaken: number;
+  completedAt: string;
+  difficulty: "easy" | "medium" | "hard";
+  questionCount: number;
+  correctAnswers: number;
+  status: "completed" | "in-progress" | "not-started";
+}
+
+export interface RecentTestResult {
+  testId: string;
+  testName: string;
+  courseName: string;
+  score: number;
+  maxScore: number;
+  percentage: number;
+  timeTaken: number; // in minutes
+  completedAt: string;
+  status: "completed" | "in-progress" | "not-started";
+}
+
+export interface QuestionResult {
+  questionId: string;
+  questionText: string;
+  questionType: "mcq" | "fillup" | "true-false" | "descriptive" | "coding";
+  marks: number;
+  studentAnswer: string | string[] | boolean | Record<string, unknown>;
+  correctAnswer: string | string[] | boolean | Record<string, unknown>;
+  isCorrect: boolean;
+  timeTaken: number;
+  explanation?: string;
+  options?: Array<{
+    id: string;
+    text: string;
+    isCorrect: boolean;
+  }>;
+}
+
+export interface DetailedTestResult {
+  testId: string;
+  testName: string;
+  courseName: string;
+  courseId: string;
+  courseCode: string;
+  completedAt: string;
+  timeSpent: number;
+  score: number;
+  maxScore: number;
+  percentage: number;
+  questionCount: number;
+  correctCount: number;
+  questions: QuestionResult[];
+  passingScore?: number;
+}
+
+export interface ResultsFilters {
+  courseId?: string;
+  dateRange?: {
+    start: Date;
+    end: Date;
+  };
+  scoreRange?: {
+    min: number;
+    max: number;
+  };
+  status?: "completed" | "in-progress" | "not-started";
+}
diff --git a/src/components/results/index.ts b/src/components/results/index.ts
new file mode 100644
index 0000000..770647c
--- /dev/null
+++ b/src/components/results/index.ts
@@ -0,0 +1,40 @@
+// Re-export all components from the new structure
+// Doing named exports to avoid name conflicts
+export type {
+  TestSummary,
+  RecentTestResult,
+  QuestionResult,
+  DetailedTestResult,
+  ResultsFilters,
+} from "./common/types";
+export { DetailedTestResultView } from "./common/detailed-test-result";
+
+// Teacher exports
+export type {
+  TeacherCourseOverview,
+  TestOverview,
+  PerformanceDistribution,
+  StudentTestResult,
+  QuestionStat,
+  DetailedTestStatistics,
+} from "./teacher/types";
+export {
+  CoursesGrid,
+  CourseTestsTable,
+  CourseSummaryCard,
+  QuestionStatsTable,
+  RecentTestsCard as TeacherRecentTestsCard,
+  StudentResultsTable,
+  PerformanceDistributionChart,
+} from "./teacher";
+
+// Student exports
+export type { StudentOverallResult, CourseResult } from "./student/types";
+export {
+  StudentOverviewCard,
+  RecentTestsCard as StudentRecentTestsCard, // Restored export
+  CourseResultsGrid,
+  CourseCard,
+  TestSummaries,
+  PerformanceTrends,
+} from "./student";
diff --git a/src/components/results/student/course-card.tsx b/src/components/results/student/course-card.tsx
new file mode 100644
index 0000000..c510b6a
--- /dev/null
+++ b/src/components/results/student/course-card.tsx
@@ -0,0 +1,112 @@
+"use client";
+
+import React from "react";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+
+import { CourseResult } from "./types";
+import { TestSummary } from "../common/types";
+import { getScoreBgColor, getScoreTextColor } from "@/lib/utils/score-colors";
+
+interface CourseCardProps {
+  course: CourseResult;
+  onViewCourse: (courseId: string) => void;
+  onViewTest?: (testId: string) => void;
+}
+
+export function CourseCard({
+  course,
+  onViewCourse,
+  onViewTest,
+}: CourseCardProps) {
+  // Calculate average score
+  const averageScore = course.testResults.length
+    ? course.testResults.reduce(
+        (sum: number, test: TestSummary) => sum + test.percentage,
+        0,
+      ) / course.testResults.length
+    : 0;
+  // No longer needed - best score removed
+  // Sort tests by completion date (most recent first) and get top 3
+  const recentTests = [...course.testResults]
+    .sort(
+      (a, b) =>
+        new Date(b.completedAt).getTime() - new Date(a.completedAt).getTime(),
+    )
+    .slice(0, 3);
+
+  return (
+    <Card
+      className="overflow-hidden hover:shadow-md transition-shadow duration-200 cursor-pointer"
+      onClick={() => onViewCourse(course.courseId)}
+    >
+      {" "}
+      <CardHeader className="pb-3 border-b">
+        <CardTitle className="flex items-center gap-2">
+          <div className="truncate flex-1 leading-normal py-1 mr-3 overflow-visible">
+            {course.courseName}
+          </div>
+          <Badge variant="secondary" className="shrink-0 whitespace-nowrap">
+            {course.courseCode}
+          </Badge>
+        </CardTitle>
+      </CardHeader>
+      <CardContent className="pt-4">
+        <div className="space-y-5">
+          {" "}
+          {/* Progress and Stats */}{" "}
+          <div>
+            {/* Average Score - Emphasized */}
+            <div className="flex flex-col items-center justify-center mb-3">
+              <div className="text-sm text-muted-foreground mb-1">
+                Average Score
+              </div>
+              <div
+                className={`text-2xl font-bold ${getScoreTextColor(averageScore)}`}
+              >
+                {averageScore.toFixed(1)}%
+              </div>
+              <div className="text-xs text-muted-foreground mt-1">
+                {course.completedTests} of {course.totalTests} tests completed
+              </div>
+            </div>
+          </div>
+          {/* Recent Tests */}
+          {recentTests.length > 0 && (
+            <div>
+              <h4 className="text-sm font-medium mb-2">Recent Tests</h4>
+              <div className="space-y-2">
+                {recentTests.map((test) => (
+                  <div
+                    key={test.testId}
+                    className="flex items-center justify-between p-2 rounded-md border hover:bg-accent/50 transition-colors cursor-pointer"
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      if (onViewTest) onViewTest(test.testId);
+                    }}
+                  >
+                    <div className="truncate mr-2">
+                      <div className="text-xs font-medium truncate">
+                        {test.testName}
+                      </div>
+                      <div className="text-xs text-muted-foreground">
+                        {new Date(test.completedAt).toLocaleDateString()}
+                      </div>
+                    </div>{" "}
+                    <Badge
+                      variant="outline"
+                      className={`${getScoreBgColor(test.percentage)} text-xs shrink-0`}
+                    >
+                      {test.score}/{test.maxScore} ({test.percentage.toFixed(1)}
+                      %)
+                    </Badge>
+                  </div>
+                ))}
+              </div>
+            </div>
+          )}
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
diff --git a/src/components/results/student/course-results-grid.tsx b/src/components/results/student/course-results-grid.tsx
new file mode 100644
index 0000000..fb02d5f
--- /dev/null
+++ b/src/components/results/student/course-results-grid.tsx
@@ -0,0 +1,41 @@
+"use client";
+
+import React from "react";
+import { Card, CardContent } from "@/components/ui/card";
+import { CourseResult } from "./types";
+import { CourseCard } from "./course-card";
+
+interface CourseResultsGridProps {
+  courses: CourseResult[];
+  onViewCourse: (courseId: string) => void;
+  onViewTest?: (testId: string) => void;
+}
+
+export function CourseResultsGrid({
+  courses,
+  onViewCourse,
+  onViewTest,
+}: CourseResultsGridProps) {
+  return (
+    <div className="space-y-6">
+      <div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
+        {courses.map((course) => (
+          <CourseCard
+            key={course.courseId}
+            course={course}
+            onViewCourse={onViewCourse}
+            onViewTest={onViewTest}
+          />
+        ))}
+      </div>
+
+      {courses.length === 0 && (
+        <Card>
+          <CardContent className="flex items-center justify-center h-40">
+            <p className="text-muted-foreground">No courses found</p>
+          </CardContent>
+        </Card>
+      )}
+    </div>
+  );
+}
diff --git a/src/components/results/student/index.ts b/src/components/results/student/index.ts
new file mode 100644
index 0000000..6733d12
--- /dev/null
+++ b/src/components/results/student/index.ts
@@ -0,0 +1,8 @@
+// Export all student-specific components
+export * from "./student-overview";
+export * from "./course-card";
+export * from "./course-results-grid";
+export * from "./performance-trends";
+export * from "./recent-tests-card"; // Re-enabled export
+export * from "./test-summaries";
+export * from "./types";
diff --git a/src/components/results/student/performance-trends.tsx b/src/components/results/student/performance-trends.tsx
new file mode 100644
index 0000000..c97381a
--- /dev/null
+++ b/src/components/results/student/performance-trends.tsx
@@ -0,0 +1,230 @@
+"use client";
+
+import React, { useState } from "react";
+import { Badge } from "@/components/ui/badge";
+import {
+  ChevronDown,
+  ChevronUp,
+  TrendingUp,
+  TrendingDown,
+  Minus,
+} from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import type { TestSummary } from "../common/types";
+import { getScoreTextColor } from "@/lib/utils/score-colors";
+
+interface PerformanceTrendsProps {
+  tests: TestSummary[];
+  courseName: string;
+}
+
+export function PerformanceTrends({
+  tests,
+  courseName,
+}: PerformanceTrendsProps) {
+  const [isExpanded, setIsExpanded] = useState(false);
+
+  // Sort tests by completion date
+  const sortedTests = [...tests].sort(
+    (a, b) =>
+      new Date(a.completedAt).getTime() - new Date(b.completedAt).getTime(),
+  );
+
+  const scores = sortedTests.map((test) => test.percentage);
+
+  // Calculate stats
+  const averageScore =
+    scores.length > 0
+      ? scores.reduce((sum, score) => sum + score, 0) / scores.length
+      : 0;
+
+  const highestScore = scores.length > 0 ? Math.max(...scores) : 0;
+
+  const latestScore = scores.length > 0 ? scores[scores.length - 1] : 0;
+
+  // Get trend (improving, stable, declining)
+  const getTrend = () => {
+    if (scores.length < 2) return "Not enough data";
+
+    const firstHalf = scores.slice(0, Math.floor(scores.length / 2));
+    const secondHalf = scores.slice(Math.floor(scores.length / 2));
+
+    const firstAvg =
+      firstHalf.reduce((sum, score) => sum + score, 0) / firstHalf.length;
+    const secondAvg =
+      secondHalf.reduce((sum, score) => sum + score, 0) / secondHalf.length;
+
+    const diff = secondAvg - firstAvg;
+    if (diff > 5) return "Improving";
+    if (diff < -5) return "Declining";
+    return "Stable";
+  };
+
+  const getTrendIcon = () => {
+    const trend = getTrend();
+    if (trend === "Improving")
+      return <TrendingUp className="h-4 w-4 text-green-600" />;
+    if (trend === "Declining")
+      return <TrendingDown className="h-4 w-4 text-red-600" />;
+    return <Minus className="h-4 w-4 text-orange-600" />;
+  };
+
+  const getTrendColor = () => {
+    const trend = getTrend();
+    if (trend === "Improving") return "text-green-600";
+    if (trend === "Declining") return "text-red-600";
+    return "text-orange-600";
+  };
+
+  const testCount = sortedTests.length;
+
+  if (testCount === 0) {
+    return (
+      <Card className="border-border">
+        <CardContent className="py-6">
+          <div className="text-center text-muted-foreground">
+            <p>No test data available for {courseName}</p>
+          </div>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  return (
+    <Card className="border-border">
+      <CardHeader className="pb-0">
+        <CardTitle className="flex items-center justify-between">
+          <span>Performance Trends</span>
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={() => setIsExpanded(!isExpanded)}
+            className="gap-1"
+            aria-label={isExpanded ? "Show less" : "Show more"}
+          >
+            {isExpanded ? (
+              <>
+                Show Less
+                <ChevronUp className="h-4 w-4" />
+              </>
+            ) : (
+              <>
+                Show More
+                <ChevronDown className="h-4 w-4" />
+              </>
+            )}
+          </Button>
+        </CardTitle>
+      </CardHeader>
+      <CardContent className="pt-4">
+        <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-4">
+          <div>
+            {" "}
+            <div className="text-sm text-muted-foreground">Average Score</div>
+            <div
+              className={`font-medium text-lg mt-1 ${getScoreTextColor(averageScore)}`}
+            >
+              {averageScore.toFixed(1)}%
+            </div>
+          </div>
+
+          <div>
+            {" "}
+            <div className="text-sm text-muted-foreground">Latest Score</div>
+            <div
+              className={`font-medium text-lg mt-1 ${getScoreTextColor(latestScore)}`}
+            >
+              {latestScore.toFixed(1)}%
+            </div>
+          </div>
+
+          <div>
+            {" "}
+            <div className="text-sm text-muted-foreground">Best Score</div>
+            <div
+              className={`font-medium text-lg mt-1 ${getScoreTextColor(highestScore)}`}
+            >
+              {highestScore.toFixed(1)}%
+            </div>
+          </div>
+
+          <div>
+            <div className="text-sm text-muted-foreground">Trend</div>
+            <div
+              className={`font-medium text-lg mt-1 flex items-center ${getTrendColor()}`}
+            >
+              {getTrendIcon()}
+              <span className="ml-1">{getTrend()}</span>
+            </div>
+          </div>
+        </div>
+
+        {isExpanded && (
+          <div className="mt-4">
+            <div className="mb-2 font-medium">Score History</div>
+            <div className="relative h-32 w-full">
+              {scores.length > 1 && (
+                <div className="absolute inset-0">
+                  <svg
+                    className="h-full w-full"
+                    viewBox={`0 0 ${scores.length - 1} 100`}
+                  >
+                    {/* Connect the score points with lines */}
+                    <polyline
+                      points={scores
+                        .map((score, i) => `${i}, ${100 - score}`)
+                        .join(" ")}
+                      fill="none"
+                      stroke="currentColor"
+                      strokeWidth="2"
+                      className="text-primary"
+                    />
+
+                    {/* Add dots for each score point */}
+                    {scores.map((score, i) => (
+                      <circle
+                        key={i}
+                        cx={i}
+                        cy={100 - score}
+                        r="2"
+                        className="fill-primary"
+                      />
+                    ))}
+                  </svg>
+                </div>
+              )}
+            </div>
+
+            <div className="mt-4 space-y-2">
+              <div className="text-sm font-medium">Test History</div>
+              <div className="space-y-2">
+                {sortedTests.map((test, index) => (
+                  <div
+                    key={test.testId}
+                    className="flex justify-between items-center"
+                  >
+                    <div className="flex items-center">
+                      <Badge
+                        variant="outline"
+                        className="mr-2 w-6 h-6 flex items-center justify-center p-0"
+                      >
+                        {index + 1}
+                      </Badge>
+                      <span className="text-sm">{test.testName}</span>
+                    </div>{" "}
+                    <div
+                      className={`text-sm font-medium ${getScoreTextColor(test.percentage)}`}
+                    >
+                      {test.percentage.toFixed(1)}%
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </div>
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+}
diff --git a/src/components/results/student/recent-tests-card.tsx b/src/components/results/student/recent-tests-card.tsx
new file mode 100644
index 0000000..0862098
--- /dev/null
+++ b/src/components/results/student/recent-tests-card.tsx
@@ -0,0 +1,163 @@
+"use client";
+
+import React from "react";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import { BookOpen, Calendar, Timer } from "lucide-react";
+import type { RecentTestResult } from "../common/types";
+import { getScoreBgColor } from "@/lib/utils/score-colors";
+import { Skeleton } from "@/components/ui/skeleton";
+import { useRecentTestResults } from "@/repo/student-results/student-results-api";
+
+interface RecentTestsCardProps {
+  studentId: string;
+  limit?: number;
+  tests?: RecentTestResult[];
+  onViewTest: (testId: string) => void;
+  showHeader?: boolean;
+}
+
+// Ensure this component is properly exported
+export const RecentTestsCard: React.FC<RecentTestsCardProps> = ({
+  studentId,
+  limit = 3,
+  tests: propTests,
+  onViewTest,
+  showHeader = true,
+}) => {
+  // Use our custom React Query hook if studentId is provided, otherwise use prop tests
+  const {
+    data: queryTests,
+    isLoading,
+    isError,
+  } = useRecentTestResults(studentId, limit, {
+    enabled: !!studentId && !propTests,
+  });
+
+  // Use either provided tests from props or fetched tests from query
+  const tests = propTests || queryTests || [];
+
+  // Sort tests by completion date (most recent first)
+  const sortedTests = [...tests].sort(
+    (a, b) =>
+      new Date(b.completedAt).getTime() - new Date(a.completedAt).getTime(),
+  );
+
+  // Show only the specified limit (default 3)
+  const recentTests = sortedTests.slice(0, limit);
+
+  if (isLoading) {
+    return (
+      <Card className="shadow-sm">
+        {showHeader && (
+          <CardHeader className="pb-3 border-b">
+            <CardTitle className="text-lg font-semibold">
+              Recent Tests
+            </CardTitle>
+          </CardHeader>
+        )}
+        <CardContent className="p-0">
+          <div className="divide-y">
+            {Array.from({ length: limit }).map((_, i) => (
+              <div key={i} className="py-3 px-4">
+                <div className="flex justify-between items-start mb-2">
+                  <Skeleton className="h-5 w-3/4" />
+                  <Skeleton className="h-6 w-16" />
+                </div>
+                <div className="flex gap-3">
+                  <Skeleton className="h-4 w-24" />
+                  <Skeleton className="h-4 w-24" />
+                  <Skeleton className="h-4 w-16" />
+                </div>
+              </div>
+            ))}
+          </div>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  if (isError) {
+    return (
+      <Card className="shadow-sm">
+        {showHeader && (
+          <CardHeader className="pb-3 border-b">
+            <CardTitle className="text-lg font-semibold">
+              Recent Tests
+            </CardTitle>
+          </CardHeader>
+        )}
+        <CardContent className="text-center py-6">
+          <p className="text-muted-foreground">Failed to load test results</p>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  if (recentTests.length === 0) {
+    return (
+      <Card className="shadow-sm">
+        {showHeader && (
+          <CardHeader className="pb-3 border-b">
+            <CardTitle className="text-lg font-semibold">
+              Recent Tests
+            </CardTitle>
+          </CardHeader>
+        )}
+        <CardContent className="text-center py-6">
+          <p className="text-muted-foreground">No tests completed yet</p>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  return (
+    <Card className="shadow-sm">
+      {showHeader && (
+        <CardHeader className="py-2 px-4 border-b">
+          <CardTitle className="text-lg font-semibold">Recent Tests</CardTitle>
+        </CardHeader>
+      )}
+      <CardContent className={`p-0 ${!showHeader ? "pt-0" : ""}`}>
+        <div className="divide-y">
+          {recentTests.map((test) => (
+            <div
+              key={test.testId}
+              className="py-3 px-4 hover:bg-accent/50 transition-colors cursor-pointer"
+              onClick={() => onViewTest(test.testId)}
+            >
+              <div className="flex justify-between items-start mb-1">
+                <h3 className="text-sm font-medium pr-2 leading-normal line-clamp-1 overflow-visible">
+                  {test.testName}
+                </h3>
+                <Badge
+                  variant="outline"
+                  className={`${getScoreBgColor(test.percentage)} text-xs px-2 py-0.5 font-medium shrink-0`}
+                >
+                  {test.score}/{test.maxScore} ({test.percentage.toFixed(1)}%)
+                </Badge>
+              </div>
+
+              <div className="flex items-center gap-3 text-xs">
+                <div className="flex items-center text-muted-foreground">
+                  <BookOpen className="mr-1 h-3 w-3" />
+                  {test.courseName}
+                </div>
+
+                <div className="flex items-center text-muted-foreground">
+                  <Calendar className="h-3 w-3 mr-1" />
+                  {new Date(test.completedAt).toLocaleDateString()}
+                </div>
+
+                <div className="flex items-center text-muted-foreground">
+                  <Timer className="h-3 w-3 mr-1" />
+                  {test.timeTaken} min
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      </CardContent>
+    </Card>
+  );
+};
diff --git a/src/components/results/student/student-overview.tsx b/src/components/results/student/student-overview.tsx
new file mode 100644
index 0000000..8f8b865
--- /dev/null
+++ b/src/components/results/student/student-overview.tsx
@@ -0,0 +1,12 @@
+"use client";
+
+import React from "react";
+
+// Using React.FC without props since this component doesn't take any props
+type StudentOverviewCardProps = React.PropsWithChildren;
+
+export const StudentOverviewCard: React.FC<StudentOverviewCardProps> = () => {
+  return (
+    <div className="mb-8">{/* Empty space where the cards used to be */}</div>
+  );
+};
diff --git a/src/components/results/student/student-results-overview.tsx b/src/components/results/student/student-results-overview.tsx
new file mode 100644
index 0000000..e69de29
diff --git a/src/components/results/student/test-summaries.tsx b/src/components/results/student/test-summaries.tsx
new file mode 100644
index 0000000..3e98f00
--- /dev/null
+++ b/src/components/results/student/test-summaries.tsx
@@ -0,0 +1,266 @@
+"use client";
+
+import React from "react";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import {
+  ArrowLeft,
+  Clock,
+  Target,
+  FileText,
+  Calendar,
+  CheckCircle,
+  ChevronRight,
+} from "lucide-react";
+import type { TestSummary } from "../common/types";
+import { getScoreBgColor, getScoreTextColor } from "@/lib/utils/score-colors";
+
+interface TestSummariesProps {
+  courseName: string;
+  courseCode: string;
+  tests: TestSummary[];
+  onBack: () => void;
+  onViewTest: (testId: string) => void;
+}
+
+export function TestSummaries({
+  courseName,
+  courseCode,
+  tests,
+  onBack,
+  onViewTest,
+}: TestSummariesProps) {
+  const getStatusColor = (status: string) => {
+    switch (status) {
+      case "completed":
+        return "bg-green-100 text-green-800 border-green-300 dark:bg-green-900/30 dark:text-green-300";
+      case "in-progress":
+        return "bg-blue-100 text-blue-800 border-blue-300 dark:bg-blue-900/30 dark:text-blue-300";
+      default:
+        return "bg-slate-100 text-slate-800 border-slate-300 dark:bg-slate-900/30 dark:text-slate-300";
+    }
+  };
+
+  const getDifficultyColor = (difficulty: string) => {
+    switch (difficulty) {
+      case "easy":
+        return "bg-emerald-100 text-emerald-800 border-emerald-300 dark:bg-emerald-900/30 dark:text-emerald-300";
+      case "medium":
+        return "bg-amber-100 text-amber-800 border-amber-300 dark:bg-amber-900/30 dark:text-amber-300";
+      case "hard":
+        return "bg-red-100 text-red-800 border-red-300 dark:bg-red-900/30 dark:text-red-300";
+      default:
+        return "bg-slate-100 text-slate-800 border-slate-300 dark:bg-slate-900/30 dark:text-slate-300";
+    }
+  };
+
+  const completedTests = tests.filter((test) => test.status === "completed");
+  const averageScore =
+    completedTests.length > 0
+      ? completedTests.reduce((acc, test) => acc + test.percentage, 0) /
+        completedTests.length
+      : 0;
+
+  // Sort tests by date (most recent first)
+  const sortedTests = [...tests].sort(
+    (a, b) =>
+      new Date(b.completedAt).getTime() - new Date(a.completedAt).getTime(),
+  );
+
+  return (
+    <div className="space-y-6">
+      {/* Header */}
+      <div className="flex flex-col sm:flex-row sm:items-center gap-4 justify-between bg-card shadow-sm rounded-lg p-4">
+        <div className="flex items-center gap-3">
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={onBack}
+            className="flex items-center gap-1.5 h-8"
+          >
+            <ArrowLeft className="h-3.5 w-3.5" />
+            Back
+          </Button>
+          <div>
+            <h1 className="text-xl font-bold flex items-center gap-2">
+              {courseName}
+              <Badge variant="secondary">{courseCode}</Badge>
+            </h1>
+          </div>
+        </div>
+        <Badge variant="outline" className="self-start sm:self-auto">
+          {tests.length} {tests.length === 1 ? "Test" : "Tests"}
+        </Badge>
+      </div>
+      {/* Course Statistics Cards */}
+      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+        <Card className="shadow-sm">
+          {" "}
+          <CardHeader className="pb-2 border-b">
+            <CardTitle className="text-sm font-medium flex items-center gap-2">
+              <span className="p-1.5 rounded-full bg-indigo-100 dark:bg-indigo-900">
+                <Target className="h-4 w-4 text-indigo-600 dark:text-indigo-400" />
+              </span>
+              Average Score
+            </CardTitle>{" "}
+          </CardHeader>
+          <CardContent className="pt-3">
+            <div className="flex items-baseline">
+              <span
+                className={`text-2xl font-bold ${getScoreTextColor(averageScore)}`}
+              >
+                {averageScore.toFixed(1)}%
+              </span>
+            </div>
+          </CardContent>
+        </Card>
+
+        <Card className="shadow-sm">
+          {" "}
+          <CardHeader className="pb-2 border-b">
+            <CardTitle className="text-sm font-medium flex items-center gap-2">
+              <span className="p-1.5 rounded-full bg-emerald-100 dark:bg-emerald-900">
+                <CheckCircle className="h-4 w-4 text-emerald-600 dark:text-emerald-400" />
+              </span>
+              Completion
+            </CardTitle>{" "}
+          </CardHeader>
+          <CardContent className="pt-3">
+            <div className="flex items-baseline gap-2">
+              <span className="text-2xl font-bold text-green-600 dark:text-green-400">
+                {tests.length > 0
+                  ? ((completedTests.length / tests.length) * 100).toFixed(0)
+                  : 0}
+                %
+              </span>
+              <span className="text-sm text-muted-foreground">
+                ({completedTests.length}/{tests.length} tests)
+              </span>
+            </div>
+          </CardContent>
+        </Card>
+
+        <Card className="shadow-sm">
+          {" "}
+          <CardHeader className="pb-2 border-b">
+            <CardTitle className="text-sm font-medium flex items-center gap-2">
+              <span className="p-1.5 rounded-full bg-violet-100 dark:bg-violet-900">
+                <Clock className="h-4 w-4 text-violet-600 dark:text-violet-400" />
+              </span>
+              Best Performance
+            </CardTitle>{" "}
+          </CardHeader>
+          <CardContent className="pt-3">
+            {completedTests.length > 0 ? (
+              <div className="flex items-baseline gap-2">
+                {" "}
+                <span
+                  className={`text-2xl font-bold ${getScoreTextColor(Math.max(...completedTests.map((test) => test.percentage)))}`}
+                >
+                  {Math.max(
+                    ...completedTests.map((test) => test.percentage),
+                  ).toFixed(1)}
+                  %
+                </span>
+                <span className="text-xs text-muted-foreground">
+                  highest score
+                </span>
+              </div>
+            ) : (
+              <span className="text-muted-foreground">No completed tests</span>
+            )}
+          </CardContent>
+        </Card>
+      </div>{" "}
+      {/* Performance Trends removed as requested */} {/* Tests List */}{" "}
+      <Card className="shadow-sm">
+        <CardHeader className="py-2 px-4 border-b">
+          <CardTitle className="flex items-center justify-between text-lg">
+            Test Results
+            {completedTests.length > 0 && (
+              <span className="text-sm font-normal text-muted-foreground">
+                Click on a test to view detailed results
+              </span>
+            )}
+          </CardTitle>
+        </CardHeader>
+        <CardContent className="p-0">
+          {" "}
+          {tests.length === 0 ? (
+            <div className="text-center p-6">
+              <p className="text-muted-foreground">
+                No tests available for this course
+              </p>
+            </div>
+          ) : (
+            <div className="divide-y">
+              {sortedTests.map((test) => (
+                <div
+                  key={test.testId}
+                  className="py-3 px-4 hover:bg-accent/50 transition-colors cursor-pointer"
+                  onClick={() => onViewTest(test.testId)}
+                >
+                  <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+                    <div className="space-y-1">
+                      <div className="flex flex-wrap items-center gap-2">
+                        <h3 className="font-medium">{test.testName}</h3>
+                        <Badge
+                          variant="secondary"
+                          className={getDifficultyColor(test.difficulty)}
+                        >
+                          {test.difficulty}
+                        </Badge>
+                        <Badge
+                          variant="outline"
+                          className={getStatusColor(test.status)}
+                        >
+                          {test.status === "completed"
+                            ? "Completed"
+                            : test.status === "in-progress"
+                              ? "In Progress"
+                              : "Not Started"}
+                        </Badge>
+                      </div>
+
+                      <div className="flex flex-wrap gap-x-4 gap-y-1 text-xs text-muted-foreground">
+                        <div className="flex items-center gap-1.5">
+                          <Calendar className="h-3 w-3 text-blue-500" />
+                          <span>
+                            {new Date(test.completedAt).toLocaleDateString()}
+                          </span>
+                        </div>
+                        <div className="flex items-center gap-1.5">
+                          <Clock className="h-3 w-3 text-purple-500" />
+                          <span>{test.timeTaken} min</span>
+                        </div>
+                        <div className="flex items-center gap-1.5">
+                          <FileText className="h-3 w-3 text-emerald-500" />
+                          <span>
+                            {test.correctAnswers}/{test.questionCount} correct
+                          </span>
+                        </div>
+                      </div>
+                    </div>
+
+                    <div className="flex items-center justify-between sm:justify-end gap-3 mt-2 sm:mt-0">
+                      {" "}
+                      <Badge
+                        variant="outline"
+                        className={`px-3 py-1 text-sm font-semibold ${getScoreBgColor(test.percentage)}`}
+                      >
+                        {test.score}/{test.maxScore} (
+                        {test.percentage.toFixed(1)}%)
+                      </Badge>{" "}
+                      <ChevronRight className="h-4 w-4 text-muted-foreground" />
+                    </div>
+                  </div>
+                </div>
+              ))}
+            </div>
+          )}
+        </CardContent>
+      </Card>
+    </div>
+  );
+}
diff --git a/src/components/results/student/types.ts b/src/components/results/student/types.ts
new file mode 100644
index 0000000..cadd0f4
--- /dev/null
+++ b/src/components/results/student/types.ts
@@ -0,0 +1,26 @@
+// Student-specific types
+
+import type { RecentTestResult, TestSummary } from "../common/types";
+
+export interface StudentOverallResult {
+  studentId: string;
+  studentName: string;
+  totalTests: number;
+  averageScore: number;
+  highestScore: number;
+  lowestScore: number;
+  totalTimeTaken: number; // in minutes
+  recentTests: RecentTestResult[];
+}
+
+export interface CourseResult {
+  courseId: string;
+  courseName: string;
+  courseCode: string;
+  totalTests: number;
+  completedTests: number;
+  averageScore: number;
+  highestScore: number;
+  lastTestDate: string;
+  testResults: TestSummary[];
+}
diff --git a/src/components/results/teacher/course-summary-card.tsx b/src/components/results/teacher/course-summary-card.tsx
new file mode 100644
index 0000000..69c8b7d
--- /dev/null
+++ b/src/components/results/teacher/course-summary-card.tsx
@@ -0,0 +1,59 @@
+"use client";
+
+import React from "react";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { TeacherCourseOverview } from "./types";
+import { Users, BookOpen, Award } from "lucide-react";
+
+interface CourseSummaryCardProps {
+  course: TeacherCourseOverview;
+  onViewCourse: (courseId: string) => void;
+}
+
+export function CourseSummaryCard({
+  course,
+  onViewCourse,
+}: CourseSummaryCardProps) {
+  return (
+    <Card
+      className="hover:shadow-md transition-shadow duration-200 cursor-pointer overflow-hidden"
+      onClick={() => onViewCourse(course.courseId)}
+    >
+      <CardHeader className="pb-2 bg-primary/10">
+        <CardTitle className="text-lg font-semibold">
+          {course.courseName}
+        </CardTitle>
+        <p className="text-sm text-muted-foreground">{course.courseCode}</p>
+      </CardHeader>
+      <CardContent className="pt-4">
+        <div className="space-y-4">
+          <div className="grid grid-cols-2 gap-3">
+            <div className="flex items-center gap-2">
+              <Users className="h-4 w-4 text-muted-foreground" />
+              <div className="text-sm">
+                <span className="text-muted-foreground">Students</span>
+                <p className="font-medium">{course.totalStudents}</p>
+              </div>
+            </div>
+
+            <div className="flex items-center gap-2">
+              <BookOpen className="h-4 w-4 text-muted-foreground" />
+              <div className="text-sm">
+                <span className="text-muted-foreground">Tests</span>
+                <p className="font-medium">{course.totalTests}</p>
+              </div>
+            </div>
+
+            <div className="flex items-center gap-2">
+              <Award className="h-4 w-4 text-muted-foreground" />
+              <div className="text-sm">
+                <span className="text-muted-foreground">High Score</span>
+                <p className="font-medium">{course.highestScore}%</p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
diff --git a/src/components/results/teacher/course-tests-table.tsx b/src/components/results/teacher/course-tests-table.tsx
new file mode 100644
index 0000000..0028077
--- /dev/null
+++ b/src/components/results/teacher/course-tests-table.tsx
@@ -0,0 +1,250 @@
+"use client";
+
+import React, { useState } from "react";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { TestOverview } from "./types";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import { formatDistanceToNow } from "date-fns";
+import {
+  Search,
+  Calendar,
+  Users,
+  BarChart,
+  ChevronDown,
+  ChevronUp,
+} from "lucide-react";
+import { Input } from "@/components/ui/input";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+
+interface CourseTestsTableProps {
+  tests: TestOverview[];
+  onViewTest: (testId: string) => void;
+}
+
+type SortField = "createdAt" | "testName" | "totalSubmissions" | "averageScore";
+type SortDirection = "asc" | "desc";
+
+export function CourseTestsTable({ tests, onViewTest }: CourseTestsTableProps) {
+  const [searchQuery, setSearchQuery] = useState("");
+  const [sortField, setSortField] = useState<SortField>("createdAt");
+  const [sortDirection, setSortDirection] = useState<SortDirection>("desc"); // desc = newest first
+
+  // Function to get badge color based on average score
+  const getScoreBadgeColor = (score: number): string => {
+    if (score >= 90)
+      return "bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300";
+    if (score >= 80)
+      return "bg-emerald-100 text-emerald-800 dark:bg-emerald-900/30 dark:text-emerald-300";
+    if (score >= 70)
+      return "bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300";
+    if (score >= 60)
+      return "bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-300";
+    return "bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-300";
+  };
+
+  // Handle sorting
+  const handleSort = (field: SortField) => {
+    if (field === sortField) {
+      // Toggle sort direction if clicking the same field
+      setSortDirection(sortDirection === "asc" ? "desc" : "asc");
+    } else {
+      // Set new field and default direction
+      setSortField(field);
+      // Default to desc for dates (newest first), asc for names
+      setSortDirection(field === "createdAt" ? "desc" : "asc");
+    }
+  };
+
+  // Get sorting indicator
+  const getSortIcon = (field: SortField) => {
+    if (field !== sortField) return null;
+
+    return sortDirection === "asc" ? (
+      <ChevronUp className="h-3.5 w-3.5 ml-1 inline" />
+    ) : (
+      <ChevronDown className="h-3.5 w-3.5 ml-1 inline" />
+    );
+  };
+
+  // Filter and sort tests
+  const filteredAndSortedTests = [...tests]
+    .filter((test) =>
+      test.testName.toLowerCase().includes(searchQuery.toLowerCase()),
+    )
+    .sort((a, b) => {
+      let comparison = 0;
+      switch (sortField) {
+        case "createdAt":
+          comparison =
+            new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime();
+          break;
+        case "testName":
+          comparison = a.testName.localeCompare(b.testName);
+          break;
+        case "totalSubmissions":
+          comparison = a.totalSubmissions - b.totalSubmissions;
+          break;
+        case "averageScore":
+          comparison = a.averageScore - b.averageScore;
+          break;
+      }
+
+      return sortDirection === "asc" ? comparison : -comparison;
+    });
+
+  if (tests.length === 0) {
+    return (
+      <Card>
+        <CardHeader>
+          <CardTitle>Tests</CardTitle>
+        </CardHeader>
+        <CardContent className="text-center py-12">
+          <div className="flex flex-col items-center justify-center">
+            <div className="rounded-full bg-muted p-3 mb-3">
+              <BarChart className="h-6 w-6 text-muted-foreground" />
+            </div>
+            <p className="text-muted-foreground font-medium">
+              No tests found for this course
+            </p>
+            <p className="text-sm text-muted-foreground mt-1">
+              Tests administered for this course will appear here
+            </p>
+          </div>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  return (
+    <Card className="shadow-sm">
+      <CardContent className="p-4">
+        <div className="mb-4 relative">
+          <Search className="absolute left-3 top-2.5 h-4 w-4 text-muted-foreground" />
+          <Input
+            type="text"
+            placeholder="Search tests..."
+            className="pl-9 bg-muted/30 border-muted"
+            value={searchQuery}
+            onChange={(e) => setSearchQuery(e.target.value)}
+          />
+        </div>{" "}
+        <div className="overflow-hidden rounded-md border">
+          <Table>
+            {/* Prevent extra whitespace inside table components */}
+            <TableHeader>
+              <TableRow className="bg-muted/30">
+                <TableHead>
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    className="p-0 font-medium text-muted-foreground hover:text-foreground hover:bg-transparent w-full justify-start"
+                    onClick={() => handleSort("testName")}
+                  >
+                    Test Name {getSortIcon("testName")}
+                  </Button>
+                </TableHead>
+                <TableHead className="hidden sm:table-cell">
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    className="p-0 font-medium text-muted-foreground hover:text-foreground hover:bg-transparent w-full justify-start"
+                    onClick={() => handleSort("createdAt")}
+                  >
+                    Created {getSortIcon("createdAt")}
+                  </Button>
+                </TableHead>{" "}
+                <TableHead className="text-center">
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    className="p-0 font-medium text-muted-foreground hover:text-foreground hover:bg-transparent w-full justify-center"
+                    onClick={() => handleSort("totalSubmissions")}
+                  >
+                    Submissions {getSortIcon("totalSubmissions")}
+                  </Button>
+                </TableHead>
+                <TableHead className="hidden md:table-cell text-center">
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    className="p-0 font-medium text-muted-foreground hover:text-foreground hover:bg-transparent w-full justify-center"
+                    onClick={() => handleSort("averageScore")}
+                  >
+                    Avg. Score {getSortIcon("averageScore")}
+                  </Button>
+                </TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {filteredAndSortedTests.map((test) => {
+                const scoreBadgeColor = getScoreBadgeColor(test.averageScore);
+                return (
+                  <TableRow
+                    key={test.testId}
+                    className="cursor-pointer hover:bg-accent/50 transition-colors"
+                    onClick={() => onViewTest(test.testId)}
+                  >
+                    <TableCell>
+                      <div>
+                        <p className="font-medium">{test.testName}</p>
+                        <p className="text-sm text-muted-foreground">
+                          {test.courseCode}
+                        </p>
+                      </div>
+                    </TableCell>
+                    <TableCell className="hidden sm:table-cell">
+                      <div className="flex items-center gap-2">
+                        <Calendar className="h-3.5 w-3.5 text-muted-foreground" />
+                        <span>
+                          {formatDistanceToNow(new Date(test.createdAt), {
+                            addSuffix: true,
+                          })}
+                        </span>
+                      </div>
+                    </TableCell>{" "}
+                    <TableCell className="text-center">
+                      <div className="flex flex-col items-center justify-center">
+                        <div className="flex items-center justify-center gap-1.5">
+                          <Users className="h-3.5 w-3.5 text-blue-600" />
+                          <span className="whitespace-nowrap font-medium">
+                            {test.totalSubmissions}
+                          </span>
+                        </div>{" "}
+                        <span className="text-xs text-muted-foreground whitespace-nowrap">
+                          of{" "}
+                          {Math.round(
+                            test.totalSubmissions /
+                              (test.completionRate > 0
+                                ? test.completionRate / 100
+                                : 1),
+                          )}{" "}
+                          students
+                        </span>
+                      </div>
+                    </TableCell>
+                    <TableCell className="hidden md:table-cell text-center">
+                      <Badge
+                        variant="secondary"
+                        className={`${scoreBadgeColor} text-xs px-2 py-0.5`}
+                      >
+                        {test.averageScore.toFixed(1)}%
+                      </Badge>
+                    </TableCell>
+                  </TableRow>
+                );
+              })}
+            </TableBody>{" "}
+          </Table>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
diff --git a/src/components/results/teacher/courses-grid.tsx b/src/components/results/teacher/courses-grid.tsx
new file mode 100644
index 0000000..e8d3542
--- /dev/null
+++ b/src/components/results/teacher/courses-grid.tsx
@@ -0,0 +1,191 @@
+"use client";
+
+import React from "react";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { TeacherCourseOverview } from "./types";
+import { BookOpen, Clock, Users, BarChart } from "lucide-react";
+import { formatDistanceToNow } from "date-fns";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+
+// Function to get a color for the course card based on course code
+const getCourseColor = (courseCode: string): string => {
+  // Extract the first letter or number from the course code
+  const firstChar = courseCode.charAt(0).toLowerCase();
+
+  // Assign colors based on the first character
+  if (["a", "b", "c"].includes(firstChar))
+    return "border-l-blue-500 bg-blue-50/80 dark:bg-blue-950/30";
+  if (["d", "e", "f"].includes(firstChar))
+    return "border-l-emerald-500 bg-emerald-50/80 dark:bg-emerald-950/30";
+  if (["g", "h", "i"].includes(firstChar))
+    return "border-l-violet-500 bg-violet-50/80 dark:bg-violet-950/30";
+  if (["j", "k", "l"].includes(firstChar))
+    return "border-l-amber-500 bg-amber-50/80 dark:bg-amber-950/30";
+  if (["m", "n", "o"].includes(firstChar))
+    return "border-l-cyan-500 bg-cyan-50/80 dark:bg-cyan-950/30";
+  if (["p", "q", "r"].includes(firstChar))
+    return "border-l-rose-500 bg-rose-50/80 dark:bg-rose-950/30";
+  if (["s", "t", "u"].includes(firstChar))
+    return "border-l-green-500 bg-green-50/80 dark:bg-green-950/30";
+  if (["v", "w", "x", "y", "z"].includes(firstChar))
+    return "border-l-orange-500 bg-orange-50/80 dark:bg-orange-950/30";
+
+  // Default for numbers or other characters
+  return "border-l-indigo-500 bg-indigo-50/80 dark:bg-indigo-950/30";
+};
+
+export type SortOption =
+  | "latest"
+  | "oldest"
+  | "code-asc"
+  | "code-desc"
+  | "name-asc"
+  | "name-desc";
+
+export const SortDropdown = ({
+  value,
+  onChange,
+}: {
+  value: SortOption;
+  onChange: (value: SortOption) => void;
+}) => {
+  return (
+    <Select value={value} onValueChange={(val) => onChange(val as SortOption)}>
+      <SelectTrigger className="w-[180px]">
+        <SelectValue placeholder="Sort by" />
+      </SelectTrigger>
+      <SelectContent>
+        <SelectItem value="latest">Latest Test</SelectItem>
+        <SelectItem value="oldest">Oldest Test</SelectItem>
+        <SelectItem value="code-asc">Course Code (A-Z)</SelectItem>
+        <SelectItem value="code-desc">Course Code (Z-A)</SelectItem>
+        <SelectItem value="name-asc">Course Name (A-Z)</SelectItem>
+        <SelectItem value="name-desc">Course Name (Z-A)</SelectItem>
+      </SelectContent>
+    </Select>
+  );
+};
+
+interface CoursesGridProps {
+  courses: TeacherCourseOverview[];
+  onViewCourse: (courseId: string) => void;
+  sortBy?: SortOption;
+}
+
+export function CoursesGrid({
+  courses,
+  onViewCourse,
+  sortBy = "latest",
+}: CoursesGridProps) {
+  if (courses.length === 0) {
+    return (
+      <Card>
+        <CardContent className="flex items-center justify-center h-40">
+          <p className="text-muted-foreground">No courses available</p>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  // Sort courses based on selected option
+  const sortedCourses = [...courses].sort((a, b) => {
+    switch (sortBy) {
+      case "latest":
+        return (
+          new Date(b.lastTestDate || "").getTime() -
+          new Date(a.lastTestDate || "").getTime()
+        );
+      case "oldest":
+        return (
+          new Date(a.lastTestDate || "").getTime() -
+          new Date(b.lastTestDate || "").getTime()
+        );
+      case "code-asc":
+        return a.courseCode.localeCompare(b.courseCode);
+      case "code-desc":
+        return b.courseCode.localeCompare(a.courseCode);
+      case "name-asc":
+        return a.courseName.localeCompare(b.courseName);
+      case "name-desc":
+        return b.courseName.localeCompare(a.courseName);
+      default:
+        return 0;
+    }
+  });
+
+  return (
+    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+      {sortedCourses.map((course) => {
+        const colorClass = getCourseColor(course.courseCode);
+        return (
+          <Card
+            key={course.courseId}
+            className="hover:shadow-md transition-all cursor-pointer overflow-hidden"
+            onClick={() => onViewCourse(course.courseId)}
+          >
+            {/* Apply the color class to the entire header and remove padding-top to ensure color extends to top */}
+            <CardHeader className={`pt-0 pb-2 border-l-4 ${colorClass}`}>
+              <div className="pt-4">
+                <CardTitle className="flex justify-between items-start">
+                  <div>
+                    <h3 className="font-bold text-lg">{course.courseName}</h3>
+                    <p className="text-sm text-muted-foreground mt-1">
+                      {course.courseCode}
+                    </p>
+                  </div>
+                </CardTitle>
+              </div>
+            </CardHeader>
+
+            <CardContent className="p-5">
+              <div className="grid grid-cols-2 gap-4">
+                <div className="flex flex-col space-y-1">
+                  <div className="flex items-center text-sm text-muted-foreground">
+                    <Users className="h-4 w-4 mr-2" />
+                    Students
+                  </div>
+                  <p className="font-medium">{course.totalStudents}</p>
+                </div>
+                <div className="flex flex-col space-y-1">
+                  <div className="flex items-center text-sm text-muted-foreground">
+                    <BookOpen className="h-4 w-4 mr-2" />
+                    Tests
+                  </div>
+                  <p className="font-medium">{course.totalTests}</p>
+                </div>{" "}
+                <div className="flex flex-col space-y-1">
+                  <div className="flex items-center text-sm text-muted-foreground">
+                    <BarChart className="h-4 w-4 mr-2" />
+                    Avg Score
+                  </div>
+                  <p className="font-medium">
+                    {course.averageScore.toFixed(1)}%
+                  </p>
+                </div>
+                <div className="flex flex-col space-y-1">
+                  <div className="flex items-center text-sm text-muted-foreground">
+                    <Clock className="h-4 w-4 mr-2" />
+                    Last Test
+                  </div>
+                  <p className="font-medium text-sm">
+                    {course.lastTestDate
+                      ? formatDistanceToNow(new Date(course.lastTestDate), {
+                          addSuffix: true,
+                        })
+                      : "None"}
+                  </p>
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+        );
+      })}
+    </div>
+  );
+}
diff --git a/src/components/results/teacher/index.ts b/src/components/results/teacher/index.ts
new file mode 100644
index 0000000..c8dd5f4
--- /dev/null
+++ b/src/components/results/teacher/index.ts
@@ -0,0 +1,9 @@
+// Export all teacher-specific components
+export * from "./performance-distribution-chart";
+export * from "./courses-grid";
+export * from "./course-tests-table";
+export * from "./course-summary-card";
+export * from "./question-stats-table";
+export * from "./recent-tests-card";
+export * from "./student-results-table";
+export * from "./types";
diff --git a/src/components/results/teacher/performance-distribution-chart.tsx b/src/components/results/teacher/performance-distribution-chart.tsx
new file mode 100644
index 0000000..8900f5f
--- /dev/null
+++ b/src/components/results/teacher/performance-distribution-chart.tsx
@@ -0,0 +1,412 @@
+"use client";
+
+import React, { useState } from "react";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import {
+  DetailedTestStatistics,
+  PerformanceDistribution,
+  StudentTestResult,
+} from "./types";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { useToast } from "@/hooks/use-toast";
+import {
+  Chart as ChartJS,
+  CategoryScale,
+  LinearScale,
+  BarElement,
+  Title,
+  Tooltip,
+  Legend,
+} from "chart.js";
+import { Bar } from "react-chartjs-2";
+
+// Register Chart.js components
+ChartJS.register(
+  CategoryScale,
+  LinearScale,
+  BarElement,
+  Title,
+  Tooltip,
+  Legend,
+);
+
+// Color mapping for the performance bars
+const getBarColor = (lowerBound: number): string => {
+  if (lowerBound < 20) return "#ef4444"; // red-500
+  if (lowerBound < 40) return "#f97316"; // orange-500
+  if (lowerBound < 60) return "#eab308"; // yellow-500
+  if (lowerBound < 80) return "#10b981"; // emerald-500
+  return "#16a34a"; // green-600
+};
+
+interface PerformanceDistributionChartProps {
+  statistics: DetailedTestStatistics;
+}
+
+type GroupingSize = "20%" | "10%" | "5%";
+
+export function PerformanceDistributionChart({
+  statistics,
+}: PerformanceDistributionChartProps) {
+  const { error } = useToast();
+  const [grouping, setGrouping] = useState<GroupingSize>("20%");
+
+  const handleGroupingChange = (value: string) => {
+    setGrouping(value as GroupingSize);
+  };
+
+  // Create custom performance distribution based on selected grouping
+  const generateDistribution = (
+    results: StudentTestResult[],
+    groupSize: number,
+  ): PerformanceDistribution[] => {
+    if (!results || results.length === 0) return [];
+
+    try {
+      // Create bins based on group size
+      const numberOfBins = 100 / groupSize;
+      const bins: { count: number; range: string }[] = [];
+
+      for (let i = 0; i < numberOfBins; i++) {
+        const lowerBound = i * groupSize;
+        const upperBound =
+          lowerBound + groupSize - (i === numberOfBins - 1 ? 0 : 1);
+        bins.push({
+          count: 0,
+          range: `${lowerBound}-${upperBound}`,
+        });
+      }
+
+      // Count students in each bin
+      results.forEach((result: StudentTestResult) => {
+        const scorePercentage = result.percentage;
+
+        if (scorePercentage === 100) {
+          // Special case for 100% to put it in the last bin
+          bins[bins.length - 1].count++;
+        } else {
+          const binIndex = Math.floor(scorePercentage / groupSize);
+          if (binIndex >= 0 && binIndex < bins.length) {
+            bins[binIndex].count++;
+          }
+        }
+      });
+
+      // Calculate percentages
+      const totalStudents = results.length;
+      return bins.map((bin) => {
+        const lowerBound = parseInt(bin.range.split("-")[0]);
+        return {
+          range: bin.range,
+          count: bin.count,
+          percentage:
+            totalStudents > 0
+              ? Math.round((bin.count / totalStudents) * 100)
+              : 0,
+          lowerBound,
+          color: getBarColor(lowerBound),
+        };
+      });
+    } catch (err) {
+      error("Error processing performance data");
+      console.error("Error generating distribution:", err);
+      return [];
+    }
+  };
+
+  // Get performance distribution based on selected grouping
+  const getPerformanceDistribution = (): PerformanceDistribution[] => {
+    const { studentResults } = statistics;
+
+    // Use original data if it's already in the right format and grouping is 20%
+    if (grouping === "20%" && statistics.performanceDistribution?.length > 0) {
+      return statistics.performanceDistribution.map((item) => {
+        const lowerBound = parseInt(item.range.split("-")[0]);
+        return {
+          ...item,
+          lowerBound,
+          color: getBarColor(lowerBound),
+        };
+      });
+    }
+
+    // Otherwise generate new distribution based on selected grouping
+    const groupSize = parseInt(grouping);
+    return generateDistribution(studentResults, groupSize);
+  };
+
+  const performanceDistribution = getPerformanceDistribution();
+
+  // Debug: Log the data being passed to the chart
+  console.log("Performance Distribution Data:", performanceDistribution);
+  console.log("Statistics:", statistics);
+
+  // Generate sample data for testing when no real data available
+  const generateSampleData = (
+    groupingValue: string,
+  ): PerformanceDistribution[] => {
+    const groupSize = parseInt(groupingValue);
+    const numberOfBins = 100 / groupSize;
+    const sampleData: PerformanceDistribution[] = [];
+
+    for (let i = 0; i < numberOfBins; i++) {
+      const lowerBound = i * groupSize;
+      const upperBound =
+        lowerBound + groupSize - (i === numberOfBins - 1 ? 0 : 1);
+      const count = Math.floor(Math.random() * 10) + 1; // Random count between 1-10
+      sampleData.push({
+        range: `${lowerBound}-${upperBound}`,
+        count,
+        percentage: Math.round((count / 20) * 100), // Assuming total of 20 students
+        lowerBound,
+        color: getBarColor(lowerBound),
+      });
+    }
+
+    return sampleData;
+  };
+
+  // Ensure we have data to render
+  if (!performanceDistribution || performanceDistribution.length === 0) {
+    // Create sample data for testing if no real data is available
+    const sampleData = generateSampleData(grouping);
+
+    console.log("Using sample data:", sampleData);
+
+    return (
+      <Card className="border border-border shadow-sm">
+        <CardHeader className="pb-2 bg-muted/30 border-b">
+          <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-3">
+            <CardTitle className="flex items-center gap-2">
+              <div className="h-3 w-3 rounded-full bg-primary"></div>
+              Performance Distribution (Sample Data)
+            </CardTitle>
+
+            <div className="flex flex-col sm:flex-row items-start sm:items-center gap-2">
+              <span className="text-sm text-muted-foreground whitespace-nowrap">
+                Group by score range:
+              </span>
+              <Select value={grouping} onValueChange={handleGroupingChange}>
+                <SelectTrigger className="w-[100px] h-8">
+                  <SelectValue placeholder="Group by" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="5%">5%</SelectItem>
+                  <SelectItem value="10%">10%</SelectItem>
+                  <SelectItem value="20%">20%</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+          </div>
+        </CardHeader>
+        <CardContent className="pt-6">
+          <div className="h-80 w-full">
+            <Bar
+              data={{
+                labels: sampleData.map((item) => `${item.range}%`),
+                datasets: [
+                  {
+                    label: "Number of Students",
+                    data: sampleData.map((item) => item.count),
+                    backgroundColor: sampleData.map(
+                      (item) => item.color || getBarColor(item.lowerBound || 0),
+                    ),
+                    borderColor: sampleData.map(
+                      (item) => item.color || getBarColor(item.lowerBound || 0),
+                    ),
+                    borderWidth: 1,
+                    borderRadius: 4,
+                    borderSkipped: false,
+                  },
+                ],
+              }}
+              options={{
+                responsive: true,
+                maintainAspectRatio: false,
+                plugins: {
+                  legend: {
+                    display: false,
+                  },
+                  tooltip: {
+                    backgroundColor: "rgba(255, 255, 255, 0.95)",
+                    titleColor: "#374151",
+                    bodyColor: "#6B7280",
+                    borderColor: "#E5E7EB",
+                    borderWidth: 1,
+                    cornerRadius: 8,
+                    displayColors: false,
+                    callbacks: {
+                      title: function (context) {
+                        const index = context[0].dataIndex;
+                        return `Score Range: ${sampleData[index].range}%`;
+                      },
+                      label: function (context) {
+                        const index = context.dataIndex;
+                        const data = sampleData[index];
+                        return `Students: ${data.count} (${data.percentage}%)`;
+                      },
+                    },
+                  },
+                },
+                scales: {
+                  x: {
+                    grid: {
+                      display: false,
+                    },
+                    ticks: {
+                      maxRotation: 45,
+                      minRotation: 45,
+                    },
+                  },
+                  y: {
+                    beginAtZero: true,
+                    grid: {
+                      color: "rgba(0, 0, 0, 0.1)",
+                    },
+                    title: {
+                      display: true,
+                      text: "Number of Students",
+                    },
+                    ticks: {
+                      precision: 0,
+                    },
+                  },
+                },
+                interaction: {
+                  intersect: false,
+                  mode: "index",
+                },
+              }}
+            />
+          </div>
+          <div className="mt-4 text-center">
+            <p className="text-sm text-muted-foreground">
+              Showing student distribution grouped by {grouping} score ranges
+            </p>
+          </div>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  return (
+    <Card className="border border-border shadow-sm">
+      <CardHeader className="pb-2 bg-muted/30 border-b">
+        <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-3">
+          <CardTitle className="flex items-center gap-2">
+            <div className="h-3 w-3 rounded-full bg-primary"></div>
+            Performance Distribution
+          </CardTitle>
+
+          <div className="flex flex-col sm:flex-row items-start sm:items-center gap-2">
+            <span className="text-sm text-muted-foreground whitespace-nowrap">
+              Group by score range:
+            </span>
+            <Select value={grouping} onValueChange={handleGroupingChange}>
+              <SelectTrigger className="w-[100px] h-8">
+                <SelectValue placeholder="Group by" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="5%">5%</SelectItem>
+                <SelectItem value="10%">10%</SelectItem>
+                <SelectItem value="20%">20%</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+        </div>
+      </CardHeader>
+      <CardContent className="pt-6">
+        <div className="h-80 w-full">
+          <Bar
+            data={{
+              labels: performanceDistribution.map((item) => `${item.range}%`),
+              datasets: [
+                {
+                  label: "Number of Students",
+                  data: performanceDistribution.map((item) => item.count),
+                  backgroundColor: performanceDistribution.map(
+                    (item) => item.color || getBarColor(item.lowerBound || 0),
+                  ),
+                  borderColor: performanceDistribution.map(
+                    (item) => item.color || getBarColor(item.lowerBound || 0),
+                  ),
+                  borderWidth: 1,
+                  borderRadius: 4,
+                  borderSkipped: false,
+                },
+              ],
+            }}
+            options={{
+              responsive: true,
+              maintainAspectRatio: false,
+              plugins: {
+                legend: {
+                  display: false,
+                },
+                tooltip: {
+                  backgroundColor: "rgba(255, 255, 255, 0.95)",
+                  titleColor: "#374151",
+                  bodyColor: "#6B7280",
+                  borderColor: "#E5E7EB",
+                  borderWidth: 1,
+                  cornerRadius: 8,
+                  displayColors: false,
+                  callbacks: {
+                    title: function (context) {
+                      const index = context[0].dataIndex;
+                      return `Score Range: ${performanceDistribution[index].range}%`;
+                    },
+                    label: function (context) {
+                      const index = context.dataIndex;
+                      const data = performanceDistribution[index];
+                      return `Students: ${data.count} (${data.percentage}%)`;
+                    },
+                  },
+                },
+              },
+              scales: {
+                x: {
+                  grid: {
+                    display: false,
+                  },
+                  ticks: {
+                    maxRotation: 45,
+                    minRotation: 45,
+                  },
+                },
+                y: {
+                  beginAtZero: true,
+                  grid: {
+                    color: "rgba(0, 0, 0, 0.1)",
+                  },
+                  title: {
+                    display: true,
+                    text: "Number of Students",
+                  },
+                  ticks: {
+                    precision: 0,
+                  },
+                },
+              },
+              interaction: {
+                intersect: false,
+                mode: "index",
+              },
+            }}
+          />
+        </div>
+        <div className="mt-4 text-center">
+          <p className="text-sm text-muted-foreground">
+            Showing student distribution grouped by {grouping} score ranges
+          </p>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
diff --git a/src/components/results/teacher/question-stats-table.tsx b/src/components/results/teacher/question-stats-table.tsx
new file mode 100644
index 0000000..99cdcdc
--- /dev/null
+++ b/src/components/results/teacher/question-stats-table.tsx
@@ -0,0 +1,458 @@
+"use client";
+
+import React, { useState, useMemo } from "react";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { DetailedTestStatistics, QuestionStat } from "./types";
+import { Progress } from "@/components/ui/progress";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import { Badge } from "@/components/ui/badge";
+import { Search, ArrowUpDown, ArrowUp, ArrowDown } from "lucide-react";
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
+
+interface QuestionStatsTableProps {
+  statistics?: DetailedTestStatistics;
+}
+
+type SortField =
+  | "questionNumber"
+  | "questionText"
+  | "questionType"
+  | "difficulty"
+  | "averageScore"
+  | "correctPercentage"
+  | "attemptedCount"
+  | "skippedCount";
+type SortDirection = "asc" | "desc";
+
+// Mock data for question stats
+const mockQuestionStats: QuestionStat[] = [
+  {
+    questionId: "q1",
+    questionNumber: 1,
+    questionText:
+      "What is the time complexity of binary search algorithm when searching in a sorted array?",
+    questionType: "mcq",
+    difficulty: "medium",
+    averageScore: 4.2,
+    correctPercentage: 85,
+    attemptedCount: 10,
+    skippedCount: 0,
+  },
+  {
+    questionId: "q2",
+    questionNumber: 2,
+    questionText:
+      "Which data structure follows the Last In First Out (LIFO) principle?",
+    questionType: "mcq",
+    difficulty: "easy",
+    averageScore: 4.8,
+    correctPercentage: 95,
+    attemptedCount: 10,
+    skippedCount: 0,
+  },
+  {
+    questionId: "q3",
+    questionNumber: 3,
+    questionText:
+      "Is a binary tree with only one node considered balanced according to AVL tree definition?",
+    questionType: "true-false",
+    difficulty: "medium",
+    averageScore: 2.4,
+    correctPercentage: 80,
+    attemptedCount: 10,
+    skippedCount: 0,
+  },
+  {
+    questionId: "q4",
+    questionNumber: 4,
+    questionText: "Complete the function: def find_max(arr): return ___",
+    questionType: "fillup",
+    difficulty: "easy",
+    averageScore: 6.3,
+    correctPercentage: 90,
+    attemptedCount: 9,
+    skippedCount: 1,
+  },
+  {
+    questionId: "q5",
+    questionNumber: 5,
+    questionText:
+      "Explain the difference between Breadth-First Search (BFS) and Depth-First Search (DFS) algorithms. Include their time complexities and use cases.",
+    questionType: "descriptive",
+    difficulty: "hard",
+    averageScore: 7.5,
+    correctPercentage: 75,
+    attemptedCount: 8,
+    skippedCount: 2,
+  },
+  {
+    questionId: "q6",
+    questionNumber: 6,
+    questionText:
+      "Implement a function to reverse a linked list iteratively in Python.",
+    questionType: "coding",
+    difficulty: "hard",
+    averageScore: 6.8,
+    correctPercentage: 68,
+    attemptedCount: 7,
+    skippedCount: 3,
+  },
+  {
+    questionId: "q7",
+    questionNumber: 7,
+    questionText: "What is the space complexity of merge sort algorithm?",
+    questionType: "mcq",
+    difficulty: "medium",
+    averageScore: 3.5,
+    correctPercentage: 70,
+    attemptedCount: 10,
+    skippedCount: 0,
+  },
+  {
+    questionId: "q8",
+    questionNumber: 8,
+    questionText:
+      "Can a hash table have O(n) worst-case time complexity for search operations?",
+    questionType: "true-false",
+    difficulty: "hard",
+    averageScore: 2.1,
+    correctPercentage: 70,
+    attemptedCount: 10,
+    skippedCount: 0,
+  },
+  {
+    questionId: "q9",
+    questionNumber: 9,
+    questionText:
+      "Write a function to check if a string is a palindrome: def is_palindrome(s): ___",
+    questionType: "fillup",
+    difficulty: "easy",
+    averageScore: 4.8,
+    correctPercentage: 96,
+    attemptedCount: 9,
+    skippedCount: 1,
+  },
+  {
+    questionId: "q10",
+    questionNumber: 10,
+    questionText:
+      "Implement a binary search tree (BST) class with insert, search, and delete methods in your preferred programming language.",
+    questionType: "coding",
+    difficulty: "advanced",
+    averageScore: 5.2,
+    correctPercentage: 52,
+    attemptedCount: 6,
+    skippedCount: 4,
+  },
+];
+
+export function QuestionStatsTable({}: QuestionStatsTableProps) {
+  const [searchQuery, setSearchQuery] = useState("");
+  const [sortField, setSortField] = useState<SortField>("questionNumber");
+  const [sortDirection, setSortDirection] = useState<SortDirection>("asc");
+
+  const handleSort = (field: SortField) => {
+    if (sortField === field) {
+      setSortDirection(sortDirection === "asc" ? "desc" : "asc");
+    } else {
+      setSortField(field);
+      setSortDirection("asc");
+    }
+  };
+
+  const getSortIcon = (field: SortField) => {
+    if (sortField !== field) {
+      return <ArrowUpDown className="h-4 w-4" />;
+    }
+    return sortDirection === "asc" ? (
+      <ArrowUp className="h-4 w-4" />
+    ) : (
+      <ArrowDown className="h-4 w-4" />
+    );
+  };
+
+  const truncateText = (text: string, maxLength: number = 60) => {
+    if (text.length <= maxLength) return text;
+    return text.substring(0, maxLength) + "...";
+  };
+
+  const getDifficultyColor = (difficulty: string) => {
+    switch (difficulty.toLowerCase()) {
+      case "easy":
+        return "bg-green-50 text-green-700 border-green-200 dark:bg-green-950 dark:text-green-300 dark:border-green-800";
+      case "medium":
+        return "bg-amber-50 text-amber-700 border-amber-200 dark:bg-amber-950 dark:text-amber-300 dark:border-amber-800";
+      case "hard":
+        return "bg-orange-50 text-orange-700 border-orange-200 dark:bg-orange-950 dark:text-orange-300 dark:border-orange-800";
+      case "advanced":
+        return "bg-red-50 text-red-700 border-red-200 dark:bg-red-950 dark:text-red-300 dark:border-red-800";
+      default:
+        return "bg-blue-50 text-blue-700 border-blue-200 dark:bg-blue-950 dark:text-blue-300 dark:border-blue-800";
+    }
+  };
+
+  const sortedAndFilteredQuestions = useMemo(() => {
+    // Use mock data for now
+    const questionsData = mockQuestionStats;
+
+    const filtered = questionsData.filter(
+      (question) =>
+        question.questionType
+          .toLowerCase()
+          .includes(searchQuery.toLowerCase()) ||
+        question.questionText
+          .toLowerCase()
+          .includes(searchQuery.toLowerCase()) ||
+        question.difficulty.toLowerCase().includes(searchQuery.toLowerCase()),
+    );
+
+    return filtered.sort((a, b) => {
+      let aValue: string | number;
+      let bValue: string | number;
+
+      switch (sortField) {
+        case "questionNumber":
+          aValue = a.questionNumber;
+          bValue = b.questionNumber;
+          break;
+        case "questionText":
+          aValue = a.questionText.toLowerCase();
+          bValue = b.questionText.toLowerCase();
+          break;
+        case "questionType":
+          aValue = a.questionType.toLowerCase();
+          bValue = b.questionType.toLowerCase();
+          break;
+        case "difficulty":
+          // Custom sorting for difficulty
+          const difficultyOrder = { easy: 1, medium: 2, hard: 3, advanced: 4 };
+          aValue =
+            difficultyOrder[
+              a.difficulty.toLowerCase() as keyof typeof difficultyOrder
+            ] || 5;
+          bValue =
+            difficultyOrder[
+              b.difficulty.toLowerCase() as keyof typeof difficultyOrder
+            ] || 5;
+          break;
+        case "averageScore":
+          aValue = a.averageScore;
+          bValue = b.averageScore;
+          break;
+        case "correctPercentage":
+          aValue = a.correctPercentage;
+          bValue = b.correctPercentage;
+          break;
+        case "attemptedCount":
+          aValue = a.attemptedCount;
+          bValue = b.attemptedCount;
+          break;
+        case "skippedCount":
+          aValue = a.skippedCount;
+          bValue = b.skippedCount;
+          break;
+        default:
+          aValue = a.questionNumber;
+          bValue = b.questionNumber;
+      }
+
+      if (aValue < bValue) {
+        return sortDirection === "asc" ? -1 : 1;
+      }
+      if (aValue > bValue) {
+        return sortDirection === "asc" ? 1 : -1;
+      }
+      return 0;
+    });
+  }, [searchQuery, sortField, sortDirection]);
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>
+          Question Analysis ({sortedAndFilteredQuestions.length} questions)
+        </CardTitle>
+      </CardHeader>
+      <CardContent>
+        <div className="space-y-4">
+          <div className="flex items-center border rounded-md px-3">
+            <Search className="h-4 w-4 text-muted-foreground" />
+            <Input
+              placeholder="Search by question text, type, or difficulty..."
+              value={searchQuery}
+              onChange={(e) => setSearchQuery(e.target.value)}
+              className="border-0 focus-visible:ring-0 focus-visible:ring-offset-0"
+            />
+          </div>
+          <div className="rounded-md border">
+            <Table>
+              <TableHeader>
+                <TableRow>
+                  <TableHead className="text-center">
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      className="h-auto p-0 font-semibold hover:bg-transparent"
+                      onClick={() => handleSort("questionNumber")}
+                    >
+                      Q#
+                      {getSortIcon("questionNumber")}
+                    </Button>
+                  </TableHead>
+                  <TableHead>
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      className="h-auto p-0 font-semibold hover:bg-transparent"
+                      onClick={() => handleSort("questionText")}
+                    >
+                      Question Text
+                      {getSortIcon("questionText")}
+                    </Button>
+                  </TableHead>
+                  <TableHead>
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      className="h-auto p-0 font-semibold hover:bg-transparent"
+                      onClick={() => handleSort("questionType")}
+                    >
+                      Type
+                      {getSortIcon("questionType")}
+                    </Button>
+                  </TableHead>
+                  <TableHead className="text-center">
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      className="h-auto p-0 font-semibold hover:bg-transparent"
+                      onClick={() => handleSort("difficulty")}
+                    >
+                      Difficulty
+                      {getSortIcon("difficulty")}
+                    </Button>
+                  </TableHead>
+                  <TableHead>
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      className="h-auto p-0 font-semibold hover:bg-transparent"
+                      onClick={() => handleSort("correctPercentage")}
+                    >
+                      Correct %{getSortIcon("correctPercentage")}
+                    </Button>
+                  </TableHead>
+                  <TableHead className="text-center">
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      className="h-auto p-0 font-semibold hover:bg-transparent"
+                      onClick={() => handleSort("averageScore")}
+                    >
+                      Avg Score
+                      {getSortIcon("averageScore")}
+                    </Button>
+                  </TableHead>
+                  <TableHead className="text-center">
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      className="h-auto p-0 font-semibold hover:bg-transparent"
+                      onClick={() => handleSort("attemptedCount")}
+                    >
+                      Attempted
+                      {getSortIcon("attemptedCount")}
+                    </Button>
+                  </TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {sortedAndFilteredQuestions.map((question) => (
+                  <TableRow key={question.questionId}>
+                    <TableCell className="text-center font-medium">
+                      {question.questionNumber}
+                    </TableCell>
+                    <TableCell className="max-w-xs">
+                      <div
+                        className="font-medium"
+                        title={question.questionText}
+                      >
+                        {truncateText(question.questionText)}
+                      </div>
+                    </TableCell>
+                    <TableCell>
+                      <Badge variant="secondary" className="capitalize">
+                        {question.questionType}
+                      </Badge>
+                    </TableCell>
+                    <TableCell className="text-center">
+                      <Badge
+                        variant="outline"
+                        className={getDifficultyColor(question.difficulty)}
+                      >
+                        {question.difficulty}
+                      </Badge>
+                    </TableCell>
+                    <TableCell>
+                      <div className="space-y-2">
+                        <div className="flex justify-between items-center text-xs">
+                          <span className="font-semibold">
+                            {question.correctPercentage}%
+                          </span>
+                        </div>
+                        <Progress
+                          value={question.correctPercentage}
+                          className="h-2"
+                        />
+                      </div>
+                    </TableCell>
+                    <TableCell className="text-center">
+                      <div className="font-semibold">
+                        {question.averageScore.toFixed(1)}
+                      </div>
+                    </TableCell>
+                    <TableCell className="text-center">
+                      <div className="space-y-1">
+                        <div className="font-semibold">
+                          {question.attemptedCount}
+                        </div>
+                        <div className="text-xs text-muted-foreground">
+                          {question.skippedCount} skipped
+                        </div>
+                      </div>
+                    </TableCell>
+                  </TableRow>
+                ))}
+                {sortedAndFilteredQuestions.length === 0 && (
+                  <TableRow>
+                    <TableCell
+                      colSpan={7}
+                      className="text-center py-8 text-muted-foreground"
+                    >
+                      {searchQuery
+                        ? "No questions found matching your search."
+                        : "No question data available."}
+                    </TableCell>
+                  </TableRow>
+                )}
+              </TableBody>
+            </Table>
+          </div>
+          {sortedAndFilteredQuestions.length > 0 && (
+            <div className="text-sm text-muted-foreground text-center">
+              Hover over question text to see the full question
+            </div>
+          )}
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
diff --git a/src/components/results/teacher/recent-tests-card.tsx b/src/components/results/teacher/recent-tests-card.tsx
new file mode 100644
index 0000000..515f9e4
--- /dev/null
+++ b/src/components/results/teacher/recent-tests-card.tsx
@@ -0,0 +1,119 @@
+"use client";
+
+import React from "react";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import type { TestOverview } from "./types";
+import { Calendar, Clock, Users, FileText } from "lucide-react";
+import { formatDistanceToNow } from "date-fns";
+import { Badge } from "@/components/ui/badge";
+
+// Function to get badge color based on average score
+const getScoreBadgeColor = (score: number): string => {
+  if (score >= 90)
+    return "bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300";
+  if (score >= 80)
+    return "bg-emerald-100 text-emerald-800 dark:bg-emerald-900/30 dark:text-emerald-300";
+  if (score >= 70)
+    return "bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300";
+  if (score >= 60)
+    return "bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-300";
+  return "bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-300";
+};
+
+interface RecentTestsCardProps {
+  tests: TestOverview[];
+  onViewTest: (testId: string) => void;
+}
+
+export function RecentTestsCard({ tests, onViewTest }: RecentTestsCardProps) {
+  // Filter to show only tests from the last 7 days
+  const sevenDaysAgo = new Date(Date.now() - 7 * 24 * 60 * 60 * 1000);
+  const recentTests = tests
+    .filter((test) => new Date(test.createdAt) >= sevenDaysAgo)
+    .sort(
+      (a, b) =>
+        new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime(),
+    ) // Most recent first
+    .slice(0, 3); // Show max 3 tests
+
+  if (recentTests.length === 0) {
+    return (
+      <Card className="border border-border shadow-sm">
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2">
+            <FileText className="h-5 w-5 text-primary" />
+            Recent Tests (Last 7 Days)
+          </CardTitle>
+        </CardHeader>
+        <CardContent className="text-center py-8">
+          <div className="flex flex-col items-center justify-center">
+            <Clock className="h-10 w-10 text-muted-foreground/40 mb-2" />
+            <p className="text-muted-foreground">No tests in the last 7 days</p>
+          </div>
+        </CardContent>
+      </Card>
+    );
+  }
+  return (
+    <Card className="border border-border shadow-sm overflow-hidden">
+      <CardHeader className="pb-3 bg-muted/30 border-b">
+        <CardTitle className="flex items-center gap-2">
+          <div className="h-3 w-3 rounded-full bg-primary"></div>
+          Recent Tests (Last 7 Days)
+        </CardTitle>
+      </CardHeader>
+      <CardContent className="p-0">
+        <div className="divide-y">
+          {recentTests.map((test) => {
+            const testDate = new Date(test.createdAt);
+            const timeAgo = formatDistanceToNow(testDate, { addSuffix: true });
+            const scoreBadgeColor = getScoreBadgeColor(test.averageScore);
+
+            return (
+              <div
+                key={test.testId}
+                className="p-4 hover:bg-accent/50 transition-colors cursor-pointer"
+                onClick={() => onViewTest(test.testId)}
+              >
+                <div className="flex flex-col space-y-3">
+                  <div className="space-y-2">
+                    <div className="flex items-center gap-2">
+                      <div className="bg-primary/10 p-1.5 rounded-full">
+                        <FileText className="h-3.5 w-3.5 text-primary" />
+                      </div>
+                      <div>
+                        <h3 className="font-medium">{test.testName}</h3>
+                        <p className="text-xs text-muted-foreground">
+                          {test.courseName} ({test.courseCode})
+                        </p>
+                      </div>
+                    </div>
+
+                    <div className="flex flex-wrap gap-x-4 gap-y-1 text-sm">
+                      <div className="flex items-center gap-1.5">
+                        <Users className="h-3.5 w-3.5 text-blue-500" />
+                        <span className="text-xs">{test.totalSubmissions}</span>
+                      </div>
+                      <div className="flex items-center gap-1.5">
+                        <Badge
+                          variant="secondary"
+                          className={`text-xs px-1.5 py-0 ${scoreBadgeColor}`}
+                        >
+                          {test.averageScore.toFixed(1)}%
+                        </Badge>
+                      </div>
+                      <div className="flex items-center gap-1.5">
+                        <Calendar className="h-3.5 w-3.5 text-purple-500" />
+                        <span className="text-xs">{timeAgo}</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            );
+          })}
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
diff --git a/src/components/results/teacher/student-results-table.tsx b/src/components/results/teacher/student-results-table.tsx
new file mode 100644
index 0000000..581a63d
--- /dev/null
+++ b/src/components/results/teacher/student-results-table.tsx
@@ -0,0 +1,488 @@
+"use client";
+
+import React, { useState, useMemo } from "react";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { DetailedTestStatistics, StudentTestResult } from "./types";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import { formatRelative } from "date-fns";
+import { Badge } from "@/components/ui/badge";
+import { Search, ArrowUpDown, ArrowUp, ArrowDown } from "lucide-react";
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
+
+interface StudentResultsTableProps {
+  statistics?: DetailedTestStatistics;
+  onViewStudentResult?: (studentId: string) => void;
+}
+
+type SortField =
+  | "studentName"
+  | "rollNumber"
+  | "score"
+  | "percentage"
+  | "correctAnswers"
+  | "wrongAnswers"
+  | "unansweredQuestions"
+  | "submittedAt";
+type SortDirection = "asc" | "desc";
+
+// Mock data for student results
+const mockStudentResults: StudentTestResult[] = [
+  {
+    studentId: "1",
+    studentName: "Alice Johnson",
+    rollNumber: "CS2021001",
+    score: 85,
+    maxScore: 100,
+    percentage: 85,
+    timeTaken: 45,
+    completedAt: "2025-06-15T10:30:00Z",
+    status: "completed",
+    attemptCount: 1,
+    correctAnswers: 17,
+    wrongAnswers: 2,
+    unansweredQuestions: 1,
+    submittedAt: "2025-06-15T10:30:00Z",
+  },
+  {
+    studentId: "2",
+    studentName: "Bob Smith",
+    rollNumber: "CS2021002",
+    score: 92,
+    maxScore: 100,
+    percentage: 92,
+    timeTaken: 38,
+    completedAt: "2025-06-15T09:45:00Z",
+    status: "completed",
+    attemptCount: 1,
+    correctAnswers: 18,
+    wrongAnswers: 1,
+    unansweredQuestions: 1,
+    submittedAt: "2025-06-15T09:45:00Z",
+  },
+  {
+    studentId: "3",
+    studentName: "Carol Davis",
+    rollNumber: "CS2021003",
+    score: 78,
+    maxScore: 100,
+    percentage: 78,
+    timeTaken: 52,
+    completedAt: "2025-06-15T11:15:00Z",
+    status: "completed",
+    attemptCount: 2,
+    correctAnswers: 15,
+    wrongAnswers: 3,
+    unansweredQuestions: 2,
+    submittedAt: "2025-06-15T11:15:00Z",
+  },
+  {
+    studentId: "4",
+    studentName: "David Wilson",
+    rollNumber: "CS2021004",
+    score: 95,
+    maxScore: 100,
+    percentage: 95,
+    timeTaken: 42,
+    completedAt: "2025-06-15T10:00:00Z",
+    status: "completed",
+    attemptCount: 1,
+    correctAnswers: 19,
+    wrongAnswers: 1,
+    unansweredQuestions: 0,
+    submittedAt: "2025-06-15T10:00:00Z",
+  },
+  {
+    studentId: "5",
+    studentName: "Emma Brown",
+    rollNumber: "CS2021005",
+    score: 67,
+    maxScore: 100,
+    percentage: 67,
+    timeTaken: 58,
+    completedAt: "2025-06-15T12:00:00Z",
+    status: "completed",
+    attemptCount: 1,
+    correctAnswers: 13,
+    wrongAnswers: 5,
+    unansweredQuestions: 2,
+    submittedAt: "2025-06-15T12:00:00Z",
+  },
+  {
+    studentId: "6",
+    studentName: "Frank Miller",
+    rollNumber: "CS2021006",
+    score: 88,
+    maxScore: 100,
+    percentage: 88,
+    timeTaken: 40,
+    completedAt: "2025-06-15T09:30:00Z",
+    status: "completed",
+    attemptCount: 1,
+    correctAnswers: 17,
+    wrongAnswers: 2,
+    unansweredQuestions: 1,
+    submittedAt: "2025-06-15T09:30:00Z",
+  },
+  {
+    studentId: "7",
+    studentName: "Grace Lee",
+    rollNumber: "CS2021007",
+    score: 73,
+    maxScore: 100,
+    percentage: 73,
+    timeTaken: 48,
+    completedAt: "2025-06-15T11:45:00Z",
+    status: "completed",
+    attemptCount: 1,
+    correctAnswers: 14,
+    wrongAnswers: 4,
+    unansweredQuestions: 2,
+    submittedAt: "2025-06-15T11:45:00Z",
+  },
+  {
+    studentId: "8",
+    studentName: "Henry Chen",
+    rollNumber: "CS2021008",
+    score: 91,
+    maxScore: 100,
+    percentage: 91,
+    timeTaken: 35,
+    completedAt: "2025-06-15T08:45:00Z",
+    status: "completed",
+    attemptCount: 1,
+    correctAnswers: 18,
+    wrongAnswers: 1,
+    unansweredQuestions: 1,
+    submittedAt: "2025-06-15T08:45:00Z",
+  },
+  {
+    studentId: "9",
+    studentName: "Isabella Rodriguez",
+    rollNumber: "CS2021009",
+    score: 56,
+    maxScore: 100,
+    percentage: 56,
+    timeTaken: 60,
+    completedAt: "2025-06-15T13:30:00Z",
+    status: "completed",
+    attemptCount: 3,
+    correctAnswers: 11,
+    wrongAnswers: 7,
+    unansweredQuestions: 2,
+    submittedAt: "2025-06-15T13:30:00Z",
+  },
+  {
+    studentId: "10",
+    studentName: "Jack Thompson",
+    rollNumber: "CS2021010",
+    score: 82,
+    maxScore: 100,
+    percentage: 82,
+    timeTaken: 44,
+    completedAt: "2025-06-15T10:15:00Z",
+    status: "completed",
+    attemptCount: 1,
+    correctAnswers: 16,
+    wrongAnswers: 3,
+    unansweredQuestions: 1,
+    submittedAt: "2025-06-15T10:15:00Z",
+  },
+];
+
+export function StudentResultsTable({
+  onViewStudentResult,
+}: StudentResultsTableProps) {
+  const [searchQuery, setSearchQuery] = useState("");
+  const [sortField, setSortField] = useState<SortField>("score");
+  const [sortDirection, setSortDirection] = useState<SortDirection>("desc");
+
+  const handleSort = (field: SortField) => {
+    if (sortField === field) {
+      setSortDirection(sortDirection === "asc" ? "desc" : "asc");
+    } else {
+      setSortField(field);
+      setSortDirection("desc");
+    }
+  };
+
+  const getSortIcon = (field: SortField) => {
+    if (sortField !== field) {
+      return <ArrowUpDown className="h-4 w-4" />;
+    }
+    return sortDirection === "asc" ? (
+      <ArrowUp className="h-4 w-4" />
+    ) : (
+      <ArrowDown className="h-4 w-4" />
+    );
+  };
+  const sortedAndFilteredResults = useMemo(() => {
+    const filtered = mockStudentResults.filter(
+      (student) =>
+        student.studentName.toLowerCase().includes(searchQuery.toLowerCase()) ||
+        student.rollNumber.toLowerCase().includes(searchQuery.toLowerCase()),
+    );
+
+    return filtered.sort((a, b) => {
+      let aValue: string | number | Date;
+      let bValue: string | number | Date;
+
+      switch (sortField) {
+        case "studentName":
+          aValue = a.studentName.toLowerCase();
+          bValue = b.studentName.toLowerCase();
+          break;
+        case "rollNumber":
+          aValue = a.rollNumber.toLowerCase();
+          bValue = b.rollNumber.toLowerCase();
+          break;
+        case "score":
+          aValue = a.score;
+          bValue = b.score;
+          break;
+        case "percentage":
+          aValue = a.percentage;
+          bValue = b.percentage;
+          break;
+        case "correctAnswers":
+          aValue = a.correctAnswers || 0;
+          bValue = b.correctAnswers || 0;
+          break;
+        case "wrongAnswers":
+          aValue = a.wrongAnswers || 0;
+          bValue = b.wrongAnswers || 0;
+          break;
+        case "unansweredQuestions":
+          aValue = a.unansweredQuestions || 0;
+          bValue = b.unansweredQuestions || 0;
+          break;
+        case "submittedAt":
+          aValue = new Date(a.submittedAt || a.completedAt);
+          bValue = new Date(b.submittedAt || b.completedAt);
+          break;
+        default:
+          aValue = a.score;
+          bValue = b.score;
+      }
+
+      if (aValue < bValue) {
+        return sortDirection === "asc" ? -1 : 1;
+      }
+      if (aValue > bValue) {
+        return sortDirection === "asc" ? 1 : -1;
+      }
+      return 0;
+    });
+  }, [searchQuery, sortField, sortDirection]);
+  const handleRowClick = (student: StudentTestResult) => {
+    if (onViewStudentResult) {
+      onViewStudentResult(student.studentId);
+    }
+  };
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>
+          Student Results ({sortedAndFilteredResults.length} students)
+        </CardTitle>
+      </CardHeader>
+      <CardContent>
+        <div className="space-y-4">
+          <div className="flex items-center border rounded-md px-3">
+            <Search className="h-4 w-4 text-muted-foreground" />
+            <Input
+              placeholder="Search by student name or roll number..."
+              value={searchQuery}
+              onChange={(e) => setSearchQuery(e.target.value)}
+              className="border-0 focus-visible:ring-0 focus-visible:ring-offset-0"
+            />
+          </div>
+          <div className="rounded-md border">
+            <Table>
+              <TableHeader>
+                <TableRow>
+                  <TableHead>
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      className="h-auto p-0 font-semibold hover:bg-transparent"
+                      onClick={() => handleSort("studentName")}
+                    >
+                      Student Name
+                      {getSortIcon("studentName")}
+                    </Button>
+                  </TableHead>
+                  <TableHead>
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      className="h-auto p-0 font-semibold hover:bg-transparent"
+                      onClick={() => handleSort("rollNumber")}
+                    >
+                      Roll Number
+                      {getSortIcon("rollNumber")}
+                    </Button>
+                  </TableHead>
+                  <TableHead className="text-center">
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      className="h-auto p-0 font-semibold hover:bg-transparent"
+                      onClick={() => handleSort("score")}
+                    >
+                      Score
+                      {getSortIcon("score")}
+                    </Button>
+                  </TableHead>
+                  <TableHead className="text-center">
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      className="h-auto p-0 font-semibold hover:bg-transparent"
+                      onClick={() => handleSort("correctAnswers")}
+                    >
+                      Correct
+                      {getSortIcon("correctAnswers")}
+                    </Button>
+                  </TableHead>
+                  <TableHead className="text-center">
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      className="h-auto p-0 font-semibold hover:bg-transparent"
+                      onClick={() => handleSort("wrongAnswers")}
+                    >
+                      Wrong
+                      {getSortIcon("wrongAnswers")}
+                    </Button>
+                  </TableHead>
+                  <TableHead className="text-center">
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      className="h-auto p-0 font-semibold hover:bg-transparent"
+                      onClick={() => handleSort("unansweredQuestions")}
+                    >
+                      Unanswered
+                      {getSortIcon("unansweredQuestions")}
+                    </Button>
+                  </TableHead>
+                  <TableHead>
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      className="h-auto p-0 font-semibold hover:bg-transparent"
+                      onClick={() => handleSort("submittedAt")}
+                    >
+                      Submitted At
+                      {getSortIcon("submittedAt")}
+                    </Button>
+                  </TableHead>
+                  <TableHead className="text-center">Status</TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {sortedAndFilteredResults.map((result) => (
+                  <TableRow
+                    key={result.studentId}
+                    className="cursor-pointer hover:bg-muted/50 transition-colors"
+                    onClick={() => handleRowClick(result)}
+                  >
+                    <TableCell className="font-medium">
+                      {result.studentName}
+                    </TableCell>
+                    <TableCell className="font-mono text-sm">
+                      {result.rollNumber || "N/A"}
+                    </TableCell>
+                    <TableCell className="text-center">
+                      <div className="space-y-1">
+                        <div className="font-semibold">
+                          {result.score} / {result.maxScore}
+                        </div>
+                        <div className="text-xs text-muted-foreground">
+                          {result.percentage.toFixed(1)}%
+                        </div>
+                      </div>
+                    </TableCell>
+                    <TableCell className="text-center">
+                      <div className="inline-flex items-center justify-center w-8 h-8 rounded-full bg-green-100 text-green-700 dark:bg-green-900 dark:text-green-300 text-sm font-semibold">
+                        {result.correctAnswers || 0}
+                      </div>
+                    </TableCell>
+                    <TableCell className="text-center">
+                      <div className="inline-flex items-center justify-center w-8 h-8 rounded-full bg-red-100 text-red-700 dark:bg-red-900 dark:text-red-300 text-sm font-semibold">
+                        {result.wrongAnswers || 0}
+                      </div>
+                    </TableCell>
+                    <TableCell className="text-center">
+                      <div className="inline-flex items-center justify-center w-8 h-8 rounded-full bg-gray-100 text-gray-700 dark:bg-gray-800 dark:text-gray-300 text-sm font-semibold">
+                        {result.unansweredQuestions || 0}
+                      </div>
+                    </TableCell>
+                    <TableCell>
+                      <div className="space-y-1">
+                        <div className="text-sm">
+                          {formatRelative(
+                            new Date(result.submittedAt || result.completedAt),
+                            new Date(),
+                          )}
+                        </div>
+                        <div className="text-xs text-muted-foreground">
+                          {new Date(
+                            result.submittedAt || result.completedAt,
+                          ).toLocaleDateString()}
+                        </div>
+                      </div>
+                    </TableCell>
+                    <TableCell className="text-center">
+                      {result.status === "completed" ? (
+                        <Badge
+                          variant="outline"
+                          className="bg-green-50 text-green-700 border-green-200 dark:bg-green-950 dark:text-green-300 dark:border-green-800"
+                        >
+                          Completed
+                        </Badge>
+                      ) : (
+                        <Badge
+                          variant="outline"
+                          className="bg-amber-50 text-amber-700 border-amber-200 dark:bg-amber-950 dark:text-amber-300 dark:border-amber-800"
+                        >
+                          {result.status}
+                        </Badge>
+                      )}
+                    </TableCell>
+                  </TableRow>
+                ))}
+                {sortedAndFilteredResults.length === 0 && (
+                  <TableRow>
+                    <TableCell
+                      colSpan={8}
+                      className="text-center py-8 text-muted-foreground"
+                    >
+                      {searchQuery
+                        ? "No students found matching your search."
+                        : "No student results available."}
+                    </TableCell>
+                  </TableRow>
+                )}
+              </TableBody>
+            </Table>
+          </div>
+          {sortedAndFilteredResults.length > 0 && (
+            <div className="text-sm text-muted-foreground text-center">
+              Click on any row to view detailed student answers
+            </div>
+          )}
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
diff --git a/src/components/results/teacher/types.ts b/src/components/results/teacher/types.ts
new file mode 100644
index 0000000..3d6effc
--- /dev/null
+++ b/src/components/results/teacher/types.ts
@@ -0,0 +1,86 @@
+// Teacher-specific result types
+
+export interface TeacherCourseOverview {
+  courseId: string;
+  courseName: string;
+  courseCode: string;
+  totalStudents: number;
+  totalTests: number;
+  averageScore: number;
+  highestScore: number;
+  lowestScore: number;
+  completionRate: number; // percentage of students who completed tests
+  lastTestDate: string;
+}
+
+export interface TestOverview {
+  testId: string;
+  testName: string;
+  courseName: string;
+  courseCode: string;
+  totalSubmissions: number;
+  averageScore: number;
+  highestScore: number;
+  lowestScore: number;
+  medianScore: number;
+  completionRate: number;
+  createdAt: string;
+  duration: number; // in minutes
+}
+
+export interface PerformanceDistribution {
+  range: string; // e.g. "0-10", "11-20", etc.
+  count: number;
+  percentage: number;
+  lowerBound?: number;
+  color?: string;
+}
+
+export interface StudentTestResult {
+  studentId: string;
+  studentName: string;
+  rollNumber: string;
+  score: number;
+  maxScore: number;
+  percentage: number;
+  timeTaken: number; // in minutes
+  completedAt: string;
+  status: string;
+  attemptCount: number;
+  correctAnswers: number;
+  wrongAnswers: number;
+  unansweredQuestions: number;
+  submittedAt: string;
+}
+
+export interface DetailedTestStatistics {
+  testId: string;
+  testName: string;
+  courseId: string;
+  courseName: string;
+  courseCode: string;
+  totalQuestions: number;
+  totalMarks: number;
+  averageScore: number;
+  highestScore: number;
+  lowestScore: number;
+  medianScore: number;
+  standardDeviation: number;
+  averageCompletionTime: number; // in minutes
+  totalSubmissions: number;
+  performanceDistribution: PerformanceDistribution[];
+  studentResults: StudentTestResult[];
+  questionStats: QuestionStat[];
+}
+
+export interface QuestionStat {
+  questionId: string;
+  questionNumber: number;
+  questionText: string;
+  questionType: string;
+  difficulty: string;
+  averageScore: number;
+  correctPercentage: number;
+  attemptedCount: number;
+  skippedCount: number;
+}
diff --git a/src/lib/results-api.ts b/src/lib/results-api.ts
new file mode 100644
index 0000000..8089040
--- /dev/null
+++ b/src/lib/results-api.ts
@@ -0,0 +1,1166 @@
+// API utilities for results data
+import axiosInstance from "@/lib/axios/axios-client";
+import type {
+  TestSummary,
+  DetailedTestResult,
+} from "@/components/results/common/types";
+import type {
+  StudentOverallResult,
+  CourseResult,
+} from "@/components/results/student/types";
+import type {
+  TeacherCourseOverview,
+  TestOverview,
+  DetailedTestStatistics,
+  PerformanceDistribution,
+  StudentTestResult,
+  QuestionStat,
+} from "@/components/results/teacher/types";
+
+export class ResultsAPI {
+  // Get student's overall results summary
+  static async getStudentOverview(
+    studentId: string,
+  ): Promise<StudentOverallResult> {
+    try {
+      const response = await axiosInstance.get(
+        `/students/${studentId}/results/overview`,
+      );
+      return response.data;
+    } catch (error) {
+      console.error("Failed to fetch student overview:", error);
+      throw new Error("Failed to load student results overview");
+    }
+  }
+
+  // Get course-wise results for a student
+  static async getCourseResults(studentId: string): Promise<CourseResult[]> {
+    try {
+      const response = await axiosInstance.get(
+        `/students/${studentId}/results/courses`,
+      );
+      return response.data;
+    } catch (error) {
+      console.error("Failed to fetch course results:", error);
+      throw new Error("Failed to load course results");
+    }
+  }
+
+  // Get test summaries for a specific course
+  static async getTestSummaries(
+    studentId: string,
+    courseId: string,
+  ): Promise<TestSummary[]> {
+    try {
+      const response = await axiosInstance.get(
+        `/students/${studentId}/courses/${courseId}/tests`,
+      );
+      return response.data;
+    } catch (error) {
+      console.error("Failed to fetch test summaries:", error);
+      throw new Error("Failed to load test summaries");
+    }
+  }
+
+  // Get detailed test result
+  static async getTestResult(
+    studentId: string,
+    testId: string,
+  ): Promise<DetailedTestResult> {
+    try {
+      const response = await axiosInstance.get(
+        `/students/${studentId}/tests/${testId}/result`,
+      );
+      return response.data;
+    } catch (error) {
+      console.error("Failed to fetch test result:", error);
+      throw new Error("Failed to load test result");
+    }
+  }
+
+  // Get recent test results (for dashboard/overview)
+  static async getRecentResults(
+    studentId: string,
+    limit: number = 5,
+  ): Promise<TestSummary[]> {
+    try {
+      const response = await axiosInstance.get(
+        `/students/${studentId}/results/recent?limit=${limit}`,
+      );
+      return response.data;
+    } catch (error) {
+      console.error("Failed to fetch recent results:", error);
+      throw new Error("Failed to load recent results");
+    }
+  }
+}
+
+// Mock data for development/testing
+export const MockResultsAPI = {
+  getStudentOverview: async (
+    studentId: string,
+  ): Promise<StudentOverallResult> => {
+    // Simulate API delay
+    await new Promise((resolve) => setTimeout(resolve, 500));
+
+    return {
+      studentId,
+      studentName: "John Doe",
+      totalTests: 15,
+      averageScore: 78.5,
+      highestScore: 95,
+      lowestScore: 62,
+      totalTimeTaken: 450,
+      recentTests: [
+        {
+          testId: "test-1",
+          testName: "Data Structures Midterm",
+          courseName: "Data Structures and Algorithms",
+          score: 85,
+          maxScore: 100,
+          percentage: 85,
+          timeTaken: 90,
+          completedAt: new Date(
+            Date.now() - 1 * 24 * 60 * 60 * 1000,
+          ).toISOString(), // 1 day ago (most recent)
+          status: "completed",
+        },
+        {
+          testId: "test-2",
+          testName: "Database Design Quiz",
+          courseName: "Database Management Systems",
+          score: 92,
+          maxScore: 100,
+          percentage: 92,
+          timeTaken: 45,
+          completedAt: new Date(
+            Date.now() - 3 * 24 * 60 * 60 * 1000,
+          ).toISOString(), // 3 days ago
+          status: "completed",
+        },
+        {
+          testId: "test-3",
+          testName: "OOP Concepts Test",
+          courseName: "Object Oriented Programming",
+          score: 78,
+          maxScore: 100,
+          percentage: 78,
+          timeTaken: 60,
+          completedAt: new Date(
+            Date.now() - 6 * 24 * 60 * 60 * 1000,
+          ).toISOString(), // 6 days ago
+          status: "completed",
+        },
+        // Note: We're only showing tests from the last 7 days, sorted by most recent
+      ],
+    };
+  },
+  getCourseResults: async (studentId: string): Promise<CourseResult[]> => {
+    await new Promise((resolve) => setTimeout(resolve, 300));
+
+    // In real implementation, filter courses by studentId
+    console.log("Loading courses for student:", studentId);
+
+    return [
+      {
+        courseId: "course-1",
+        courseName: "Data Structures and Algorithms",
+        courseCode: "CS301",
+        totalTests: 5,
+        completedTests: 4,
+        averageScore: 82.5,
+        highestScore: 95,
+        lastTestDate: new Date(
+          Date.now() - 2 * 24 * 60 * 60 * 1000,
+        ).toISOString(),
+        testResults: [
+          {
+            testId: "test-1-1",
+            testName: "Arrays and Linked Lists",
+            score: 78,
+            maxScore: 100,
+            percentage: 78,
+            timeTaken: 55,
+            completedAt: new Date(
+              Date.now() - 60 * 24 * 60 * 60 * 1000,
+            ).toISOString(),
+            difficulty: "medium",
+            questionCount: 15,
+            correctAnswers: 11,
+            status: "completed",
+          },
+          {
+            testId: "test-1-2",
+            testName: "Stacks and Queues",
+            score: 85,
+            maxScore: 100,
+            percentage: 85,
+            timeTaken: 62,
+            completedAt: new Date(
+              Date.now() - 45 * 24 * 60 * 60 * 1000,
+            ).toISOString(),
+            difficulty: "medium",
+            questionCount: 20,
+            correctAnswers: 17,
+            status: "completed",
+          },
+          {
+            testId: "test-1-3",
+            testName: "Trees and Graphs",
+            score: 72,
+            maxScore: 100,
+            percentage: 72,
+            timeTaken: 75,
+            completedAt: new Date(
+              Date.now() - 30 * 24 * 60 * 60 * 1000,
+            ).toISOString(),
+            difficulty: "hard",
+            questionCount: 18,
+            correctAnswers: 13,
+            status: "completed",
+          },
+          {
+            testId: "test-1-4",
+            testName: "Sorting Algorithms",
+            score: 95,
+            maxScore: 100,
+            percentage: 95,
+            timeTaken: 48,
+            completedAt: new Date(
+              Date.now() - 2 * 24 * 60 * 60 * 1000,
+            ).toISOString(),
+            difficulty: "hard",
+            questionCount: 20,
+            correctAnswers: 19,
+            status: "completed",
+          },
+        ],
+      },
+      {
+        courseId: "course-2",
+        courseName: "Database Management Systems",
+        courseCode: "CS302",
+        totalTests: 3,
+        completedTests: 3,
+        averageScore: 88.3,
+        highestScore: 92,
+        lastTestDate: new Date(
+          Date.now() - 4 * 24 * 60 * 60 * 1000,
+        ).toISOString(),
+        testResults: [
+          {
+            testId: "test-2-1",
+            testName: "SQL Fundamentals",
+            score: 90,
+            maxScore: 100,
+            percentage: 90,
+            timeTaken: 40,
+            completedAt: new Date(
+              Date.now() - 40 * 24 * 60 * 60 * 1000,
+            ).toISOString(),
+            difficulty: "easy",
+            questionCount: 30,
+            correctAnswers: 27,
+            status: "completed",
+          },
+          {
+            testId: "test-2-2",
+            testName: "Database Design",
+            score: 83,
+            maxScore: 100,
+            percentage: 83,
+            timeTaken: 65,
+            completedAt: new Date(
+              Date.now() - 15 * 24 * 60 * 60 * 1000,
+            ).toISOString(),
+            difficulty: "medium",
+            questionCount: 18,
+            correctAnswers: 15,
+            status: "completed",
+          },
+          {
+            testId: "test-2-3",
+            testName: "Transactions and Concurrency",
+            score: 92,
+            maxScore: 100,
+            percentage: 92,
+            timeTaken: 55,
+            completedAt: new Date(
+              Date.now() - 4 * 24 * 60 * 60 * 1000,
+            ).toISOString(),
+            difficulty: "hard",
+            questionCount: 25,
+            correctAnswers: 23,
+            status: "completed",
+          },
+        ],
+      },
+      {
+        courseId: "course-3",
+        courseName: "Object Oriented Programming",
+        courseCode: "CS201",
+        totalTests: 4,
+        completedTests: 3,
+        averageScore: 75.7,
+        highestScore: 85,
+        lastTestDate: new Date(
+          Date.now() - 7 * 24 * 60 * 60 * 1000,
+        ).toISOString(),
+        testResults: [
+          {
+            testId: "test-3-1",
+            testName: "Classes and Objects",
+            score: 85,
+            maxScore: 100,
+            percentage: 85,
+            timeTaken: 52,
+            completedAt: new Date(
+              Date.now() - 35 * 24 * 60 * 60 * 1000,
+            ).toISOString(),
+            difficulty: "easy",
+            questionCount: 20,
+            correctAnswers: 17,
+            status: "completed",
+          },
+          {
+            testId: "test-3-2",
+            testName: "Inheritance and Polymorphism",
+            score: 72,
+            maxScore: 100,
+            percentage: 72,
+            timeTaken: 60,
+            completedAt: new Date(
+              Date.now() - 20 * 24 * 60 * 60 * 1000,
+            ).toISOString(),
+            difficulty: "medium",
+            questionCount: 25,
+            correctAnswers: 18,
+            status: "completed",
+          },
+          {
+            testId: "test-3-3",
+            testName: "Exception Handling",
+            score: 70,
+            maxScore: 100,
+            percentage: 70,
+            timeTaken: 58,
+            completedAt: new Date(
+              Date.now() - 7 * 24 * 60 * 60 * 1000,
+            ).toISOString(),
+            difficulty: "medium",
+            questionCount: 20,
+            correctAnswers: 14,
+            status: "completed",
+          },
+        ],
+      },
+      {
+        courseId: "course-4",
+        courseName: "Web Development",
+        courseCode: "CS401",
+        totalTests: 5,
+        completedTests: 5,
+        averageScore: 89.4,
+        highestScore: 97,
+        lastTestDate: new Date(
+          Date.now() - 3 * 24 * 60 * 60 * 1000,
+        ).toISOString(),
+        testResults: [
+          {
+            testId: "test-4-1",
+            testName: "HTML Fundamentals",
+            score: 95,
+            maxScore: 100,
+            percentage: 95,
+            timeTaken: 35,
+            completedAt: new Date(
+              Date.now() - 50 * 24 * 60 * 60 * 1000,
+            ).toISOString(),
+            difficulty: "easy",
+            questionCount: 20,
+            correctAnswers: 19,
+            status: "completed",
+          },
+          {
+            testId: "test-4-2",
+            testName: "CSS and Responsive Design",
+            score: 88,
+            maxScore: 100,
+            percentage: 88,
+            timeTaken: 55,
+            completedAt: new Date(
+              Date.now() - 40 * 24 * 60 * 60 * 1000,
+            ).toISOString(),
+            difficulty: "medium",
+            questionCount: 25,
+            correctAnswers: 22,
+            status: "completed",
+          },
+          {
+            testId: "test-4-3",
+            testName: "JavaScript Fundamentals",
+            score: 82,
+            maxScore: 100,
+            percentage: 82,
+            timeTaken: 65,
+            completedAt: new Date(
+              Date.now() - 25 * 24 * 60 * 60 * 1000,
+            ).toISOString(),
+            difficulty: "medium",
+            questionCount: 30,
+            correctAnswers: 25,
+            status: "completed",
+          },
+          {
+            testId: "test-4-4",
+            testName: "DOM Manipulation",
+            score: 85,
+            maxScore: 100,
+            percentage: 85,
+            timeTaken: 60,
+            completedAt: new Date(
+              Date.now() - 10 * 24 * 60 * 60 * 1000,
+            ).toISOString(),
+            difficulty: "hard",
+            questionCount: 20,
+            correctAnswers: 17,
+            status: "completed",
+          },
+          {
+            testId: "test-4-5",
+            testName: "Modern Frontend Frameworks",
+            score: 97,
+            maxScore: 100,
+            percentage: 97,
+            timeTaken: 70,
+            completedAt: new Date(
+              Date.now() - 3 * 24 * 60 * 60 * 1000,
+            ).toISOString(),
+            difficulty: "hard",
+            questionCount: 25,
+            correctAnswers: 24,
+            status: "completed",
+          },
+        ],
+      },
+      {
+        courseId: "course-5",
+        courseName: "Operating Systems",
+        courseCode: "CS355",
+        totalTests: 4,
+        completedTests: 3,
+        averageScore: 76.3,
+        highestScore: 88,
+        lastTestDate: new Date(
+          Date.now() - 5 * 24 * 60 * 60 * 1000,
+        ).toISOString(),
+        testResults: [
+          {
+            testId: "test-5-1",
+            testName: "Introduction to OS",
+            score: 80,
+            maxScore: 100,
+            percentage: 80,
+            timeTaken: 50,
+            completedAt: new Date(
+              Date.now() - 45 * 24 * 60 * 60 * 1000,
+            ).toISOString(),
+            difficulty: "easy",
+            questionCount: 20,
+            correctAnswers: 16,
+            status: "completed",
+          },
+          {
+            testId: "test-5-2",
+            testName: "Process Management",
+            score: 88,
+            maxScore: 100,
+            percentage: 88,
+            timeTaken: 65,
+            completedAt: new Date(
+              Date.now() - 30 * 24 * 60 * 60 * 1000,
+            ).toISOString(),
+            difficulty: "medium",
+            questionCount: 25,
+            correctAnswers: 22,
+            status: "completed",
+          },
+          {
+            testId: "test-5-3",
+            testName: "Memory Management",
+            score: 61,
+            maxScore: 100,
+            percentage: 61,
+            timeTaken: 70,
+            completedAt: new Date(
+              Date.now() - 5 * 24 * 60 * 60 * 1000,
+            ).toISOString(),
+            difficulty: "hard",
+            questionCount: 20,
+            correctAnswers: 12,
+            status: "completed",
+          },
+        ],
+      },
+      {
+        courseId: "course-6",
+        courseName: "Machine Learning",
+        courseCode: "CS450",
+        totalTests: 4,
+        completedTests: 2,
+        averageScore: 90.5,
+        highestScore: 94,
+        lastTestDate: new Date(
+          Date.now() - 12 * 24 * 60 * 60 * 1000,
+        ).toISOString(),
+        testResults: [
+          {
+            testId: "test-6-1",
+            testName: "Introduction to ML",
+            score: 87,
+            maxScore: 100,
+            percentage: 87,
+            timeTaken: 60,
+            completedAt: new Date(
+              Date.now() - 28 * 24 * 60 * 60 * 1000,
+            ).toISOString(),
+            difficulty: "medium",
+            questionCount: 25,
+            correctAnswers: 22,
+            status: "completed",
+          },
+          {
+            testId: "test-6-2",
+            testName: "Supervised Learning",
+            score: 94,
+            maxScore: 100,
+            percentage: 94,
+            timeTaken: 75,
+            completedAt: new Date(
+              Date.now() - 12 * 24 * 60 * 60 * 1000,
+            ).toISOString(),
+            difficulty: "hard",
+            questionCount: 30,
+            correctAnswers: 28,
+            status: "completed",
+          },
+        ],
+      },
+    ];
+  },
+  getTestSummaries: async (
+    studentId: string,
+    courseId: string,
+  ): Promise<TestSummary[]> => {
+    await new Promise((resolve) => setTimeout(resolve, 400));
+
+    // In real implementation, filter tests by studentId and courseId
+    console.log("Loading tests for student:", studentId, "course:", courseId);
+
+    return [
+      {
+        testId: "test-1",
+        testName: "Data Structures Midterm",
+        score: 85,
+        maxScore: 100,
+        percentage: 85,
+        timeTaken: 90,
+        completedAt: new Date(
+          Date.now() - 2 * 24 * 60 * 60 * 1000,
+        ).toISOString(),
+        difficulty: "medium",
+        questionCount: 20,
+        correctAnswers: 17,
+        status: "completed",
+      },
+      {
+        testId: "test-2",
+        testName: "Arrays and Linked Lists",
+        score: 78,
+        maxScore: 100,
+        percentage: 78,
+        timeTaken: 75,
+        completedAt: new Date(
+          Date.now() - 14 * 24 * 60 * 60 * 1000,
+        ).toISOString(),
+        difficulty: "easy",
+        questionCount: 15,
+        correctAnswers: 12,
+        status: "completed",
+      },
+      {
+        testId: "test-3",
+        testName: "Trees and Graphs",
+        score: 95,
+        maxScore: 100,
+        percentage: 95,
+        timeTaken: 105,
+        completedAt: new Date(
+          Date.now() - 21 * 24 * 60 * 60 * 1000,
+        ).toISOString(),
+        difficulty: "hard",
+        questionCount: 25,
+        correctAnswers: 24,
+        status: "completed",
+      },
+      {
+        testId: "test-4",
+        testName: "Final Assessment",
+        score: 0,
+        maxScore: 100,
+        percentage: 0,
+        timeTaken: 0,
+        completedAt: "",
+        difficulty: "hard",
+        questionCount: 30,
+        correctAnswers: 0,
+        status: "not-started",
+      },
+    ];
+  },
+
+  getTestResult: async (
+    studentId: string,
+    testId: string,
+  ): Promise<DetailedTestResult> => {
+    await new Promise((resolve) => setTimeout(resolve, 600));
+
+    return {
+      testId,
+      testName: "Data Structures Midterm",
+      courseName: "Data Structures and Algorithms",
+      courseId: "course-1",
+      courseCode: "CS301",
+      score: 85,
+      maxScore: 100,
+      percentage: 85,
+      timeSpent: 90,
+      completedAt: new Date(Date.now() - 2 * 24 * 60 * 60 * 1000).toISOString(),
+      questionCount: 20,
+      correctCount: 17,
+      passingScore: 60,
+      questions: [
+        {
+          questionId: "q1",
+          questionText:
+            "<p>What is the time complexity of searching in a balanced binary search tree?</p>",
+          questionType: "mcq",
+          marks: 5,
+          studentAnswer: "option-2",
+          correctAnswer: "option-2",
+          isCorrect: true,
+          timeTaken: 45,
+          explanation:
+            "<p>A balanced BST has a height of log(n), so search operations take O(log n) time.</p>",
+          options: [
+            { id: "option-1", text: "O(n)", isCorrect: false },
+            { id: "option-2", text: "O(log n)", isCorrect: true },
+            { id: "option-3", text: "O(n²)", isCorrect: false },
+            { id: "option-4", text: "O(1)", isCorrect: false },
+          ],
+        },
+        {
+          questionId: "q2",
+          questionText:
+            "<p>Fill in the blank: The worst-case time complexity of Quick Sort is ____.</p>",
+          questionType: "fillup",
+          marks: 3,
+          studentAnswer: "O(n²)",
+          correctAnswer: ["O(n²)", "O(n^2)", "n²", "n^2"],
+          isCorrect: true,
+          timeTaken: 30,
+          explanation:
+            "<p>Quick Sort has O(n²) worst-case complexity when the pivot is always the smallest or largest element.</p>",
+        },
+        {
+          questionId: "q3",
+          questionText:
+            "<p>A stack follows the LIFO (Last In, First Out) principle.</p>",
+          questionType: "true-false",
+          marks: 2,
+          studentAnswer: true,
+          correctAnswer: true,
+          isCorrect: true,
+          timeTaken: 15,
+          explanation:
+            "<p>Yes, a stack is a LIFO data structure where the last element added is the first one to be removed.</p>",
+        },
+        {
+          questionId: "q4",
+          questionText:
+            "<p>What is the space complexity of the recursive implementation of binary search?</p>",
+          questionType: "mcq",
+          marks: 4,
+          studentAnswer: "option-1",
+          correctAnswer: "option-2",
+          isCorrect: false,
+          timeTaken: 60,
+          explanation:
+            "<p>Recursive binary search uses O(log n) space due to the call stack, while iterative uses O(1).</p>",
+          options: [
+            { id: "option-1", text: "O(1)", isCorrect: false },
+            { id: "option-2", text: "O(log n)", isCorrect: true },
+            { id: "option-3", text: "O(n)", isCorrect: false },
+            { id: "option-4", text: "O(n log n)", isCorrect: false },
+          ],
+        },
+        {
+          questionId: "q5",
+          questionText:
+            "<p>In a hash table, what happens when two keys map to the same index?</p>",
+          questionType: "fillup",
+          marks: 3,
+          studentAnswer: "",
+          correctAnswer: ["collision", "hash collision"],
+          isCorrect: false,
+          timeTaken: 0,
+          explanation:
+            "<p>When two keys hash to the same index, it's called a collision. This can be resolved using techniques like chaining or open addressing.</p>",
+        },
+      ],
+    };
+  },
+};
+
+// Mock data for teacher results
+
+export const MockTeacherResultsAPI = {
+  getTeacherCourses: async (
+    teacherId: string,
+  ): Promise<TeacherCourseOverview[]> => {
+    // Simulate API delay
+    await new Promise((resolve) => setTimeout(resolve, 500));
+
+    // Log the teacher ID for debugging purposes
+    console.log(`Fetching courses for teacher: ${teacherId}`);
+
+    // In a real app, we would filter courses by teacher ID
+    // For now, we're returning mock data regardless of teacherId
+    return [
+      {
+        courseId: "course-1",
+        courseName: "Data Structures and Algorithms",
+        courseCode: "CSE-301",
+        totalStudents: 65,
+        totalTests: 5,
+        averageScore: 76.4,
+        highestScore: 98,
+        lowestScore: 42,
+        completionRate: 94.5,
+        lastTestDate: new Date(
+          Date.now() - 7 * 24 * 60 * 60 * 1000,
+        ).toISOString(),
+      },
+      {
+        courseId: "course-2",
+        courseName: "Database Management Systems",
+        courseCode: "CSE-401",
+        totalStudents: 58,
+        totalTests: 4,
+        averageScore: 81.7,
+        highestScore: 99,
+        lowestScore: 55,
+        completionRate: 97.2,
+        lastTestDate: new Date(
+          Date.now() - 14 * 24 * 60 * 60 * 1000,
+        ).toISOString(),
+      },
+      {
+        courseId: "course-3",
+        courseName: "Object Oriented Programming",
+        courseCode: "CSE-201",
+        totalStudents: 72,
+        totalTests: 6,
+        averageScore: 68.9,
+        highestScore: 95,
+        lowestScore: 35,
+        completionRate: 88.4,
+        lastTestDate: new Date(
+          Date.now() - 3 * 24 * 60 * 60 * 1000,
+        ).toISOString(),
+      },
+      {
+        courseId: "course-4",
+        courseName: "Computer Networks",
+        courseCode: "CSE-405",
+        totalStudents: 45,
+        totalTests: 3,
+        averageScore: 72.3,
+        highestScore: 96,
+        lowestScore: 48,
+        completionRate: 91.7,
+        lastTestDate: new Date(
+          Date.now() - 21 * 24 * 60 * 60 * 1000,
+        ).toISOString(),
+      },
+      {
+        courseId: "course-5",
+        courseName: "Operating Systems",
+        courseCode: "CSE-302",
+        totalStudents: 60,
+        totalTests: 4,
+        averageScore: 74.5,
+        highestScore: 97,
+        lowestScore: 40,
+        completionRate: 93.8,
+        lastTestDate: new Date(
+          Date.now() - 10 * 24 * 60 * 60 * 1000,
+        ).toISOString(),
+      },
+      {
+        courseId: "course-6",
+        courseName: "Software Engineering",
+        courseCode: "CSE-403",
+        totalStudents: 55,
+        totalTests: 5,
+        averageScore: 79.2,
+        highestScore: 98,
+        lowestScore: 51,
+        completionRate: 95.6,
+        lastTestDate: new Date(
+          Date.now() - 5 * 24 * 60 * 60 * 1000,
+        ).toISOString(),
+      },
+    ];
+  },
+
+  getCourseTests: async (courseId: string): Promise<TestOverview[]> => {
+    // Simulate API delay
+    await new Promise((resolve) => setTimeout(resolve, 500));
+
+    const testData: Record<string, TestOverview[]> = {
+      "course-1": [
+        {
+          testId: "test-1-1",
+          testName: "Midterm Exam",
+          courseName: "Data Structures and Algorithms",
+          courseCode: "CSE-301",
+          totalSubmissions: 63,
+          averageScore: 75.6,
+          highestScore: 98,
+          lowestScore: 42,
+          medianScore: 78,
+          completionRate: 96.9,
+          createdAt: new Date(
+            Date.now() - 30 * 24 * 60 * 60 * 1000,
+          ).toISOString(),
+          duration: 90,
+        },
+        {
+          testId: "test-1-2",
+          testName: "Quiz 1: Arrays and Linked Lists",
+          courseName: "Data Structures and Algorithms",
+          courseCode: "CSE-301",
+          totalSubmissions: 65,
+          averageScore: 82.3,
+          highestScore: 100,
+          lowestScore: 55,
+          medianScore: 85,
+          completionRate: 100,
+          createdAt: new Date(
+            Date.now() - 45 * 24 * 60 * 60 * 1000,
+          ).toISOString(),
+          duration: 30,
+        },
+        {
+          testId: "test-1-3",
+          testName: "Quiz 2: Trees and Graphs",
+          courseName: "Data Structures and Algorithms",
+          courseCode: "CSE-301",
+          totalSubmissions: 61,
+          averageScore: 68.7,
+          highestScore: 95,
+          lowestScore: 40,
+          medianScore: 72,
+          completionRate: 93.8,
+          createdAt: new Date(
+            Date.now() - 20 * 24 * 60 * 60 * 1000,
+          ).toISOString(),
+          duration: 45,
+        },
+        {
+          testId: "test-1-4",
+          testName: "Final Exam",
+          courseName: "Data Structures and Algorithms",
+          courseCode: "CSE-301",
+          totalSubmissions: 64,
+          averageScore: 77.9,
+          highestScore: 97,
+          lowestScore: 45,
+          medianScore: 80,
+          completionRate: 98.5,
+          createdAt: new Date(
+            Date.now() - 7 * 24 * 60 * 60 * 1000,
+          ).toISOString(),
+          duration: 120,
+        },
+      ],
+      "course-2": [
+        {
+          testId: "test-2-1",
+          testName: "Midterm Exam",
+          courseName: "Database Management Systems",
+          courseCode: "CSE-401",
+          totalSubmissions: 56,
+          averageScore: 80.2,
+          highestScore: 99,
+          lowestScore: 55,
+          medianScore: 82,
+          completionRate: 96.6,
+          createdAt: new Date(
+            Date.now() - 35 * 24 * 60 * 60 * 1000,
+          ).toISOString(),
+          duration: 90,
+        },
+        {
+          testId: "test-2-2",
+          testName: "SQL Quiz",
+          courseName: "Database Management Systems",
+          courseCode: "CSE-401",
+          totalSubmissions: 58,
+          averageScore: 85.7,
+          highestScore: 100,
+          lowestScore: 60,
+          medianScore: 88,
+          completionRate: 100,
+          createdAt: new Date(
+            Date.now() - 25 * 24 * 60 * 60 * 1000,
+          ).toISOString(),
+          duration: 45,
+        },
+        {
+          testId: "test-2-3",
+          testName: "Final Project Review",
+          courseName: "Database Management Systems",
+          courseCode: "CSE-401",
+          totalSubmissions: 55,
+          averageScore: 82.5,
+          highestScore: 98,
+          lowestScore: 65,
+          medianScore: 84,
+          completionRate: 94.8,
+          createdAt: new Date(
+            Date.now() - 14 * 24 * 60 * 60 * 1000,
+          ).toISOString(),
+          duration: 60,
+        },
+      ],
+      "course-3": [
+        {
+          testId: "test-3-1",
+          testName: "Java Basics Quiz",
+          courseName: "Object Oriented Programming",
+          courseCode: "CSE-201",
+          totalSubmissions: 70,
+          averageScore: 72.4,
+          highestScore: 95,
+          lowestScore: 40,
+          medianScore: 75,
+          completionRate: 97.2,
+          createdAt: new Date(
+            Date.now() - 40 * 24 * 60 * 60 * 1000,
+          ).toISOString(),
+          duration: 30,
+        },
+      ],
+      "course-4": [
+        {
+          testId: "test-4-1",
+          testName: "OSI Model Quiz",
+          courseName: "Computer Networks",
+          courseCode: "CSE-405",
+          totalSubmissions: 42,
+          averageScore: 71.8,
+          highestScore: 96,
+          lowestScore: 48,
+          medianScore: 74,
+          completionRate: 93.3,
+          createdAt: new Date(
+            Date.now() - 21 * 24 * 60 * 60 * 1000,
+          ).toISOString(),
+          duration: 45,
+        },
+      ],
+    };
+
+    return testData[courseId] || [];
+  },
+  getRecentTests: async (
+    _teacherId: string,
+    limit: number = 3,
+  ): Promise<TestOverview[]> => {
+    // Simulate API delay
+    await new Promise((resolve) => setTimeout(resolve, 500));
+
+    // Create all our mock tests
+    const allTests = [
+      {
+        testId: "test-1-4",
+        testName: "Final Exam",
+        courseName: "Data Structures and Algorithms",
+        courseCode: "CSE-301",
+        totalSubmissions: 64,
+        averageScore: 77.9,
+        highestScore: 97,
+        lowestScore: 45,
+        medianScore: 80,
+        completionRate: 98.5,
+        createdAt: new Date(Date.now() - 1 * 24 * 60 * 60 * 1000).toISOString(), // 1 day ago
+        duration: 120,
+      },
+      {
+        testId: "test-6-2",
+        testName: "Design Patterns Quiz",
+        courseName: "Software Engineering",
+        courseCode: "CSE-403",
+        totalSubmissions: 53,
+        averageScore: 81.2,
+        highestScore: 98,
+        lowestScore: 60,
+        medianScore: 83,
+        completionRate: 96.4,
+        createdAt: new Date(Date.now() - 3 * 24 * 60 * 60 * 1000).toISOString(), // 3 days ago
+        duration: 45,
+      },
+      {
+        testId: "test-3-4",
+        testName: "Design Principles Quiz",
+        courseName: "Object Oriented Programming",
+        courseCode: "CSE-201",
+        totalSubmissions: 68,
+        averageScore: 69.5,
+        highestScore: 94,
+        lowestScore: 35,
+        medianScore: 72,
+        completionRate: 94.4,
+        createdAt: new Date(Date.now() - 5 * 24 * 60 * 60 * 1000).toISOString(), // 5 days ago
+        duration: 40,
+      },
+      {
+        testId: "test-5-2",
+        testName: "Database Concepts Exam",
+        courseName: "Database Systems",
+        courseCode: "CSE-305",
+        totalSubmissions: 59,
+        averageScore: 72.3,
+        highestScore: 95,
+        lowestScore: 48,
+        medianScore: 75,
+        completionRate: 97.8,
+        createdAt: new Date(Date.now() - 8 * 24 * 60 * 60 * 1000).toISOString(), // 8 days ago (beyond our 7-day window)
+        duration: 90,
+      },
+      {
+        testId: "test-2-3",
+        testName: "Midterm Examination",
+        courseName: "Algorithm Analysis",
+        courseCode: "CSE-401",
+        totalSubmissions: 61,
+        averageScore: 74.8,
+        highestScore: 93,
+        lowestScore: 52,
+        medianScore: 78,
+        completionRate: 96.1,
+        createdAt: new Date(
+          Date.now() - 12 * 24 * 60 * 60 * 1000,
+        ).toISOString(), // 12 days ago (beyond our 7-day window)
+        duration: 90,
+      },
+    ];
+
+    // Filter tests to get only those from the last 7 days
+    const sevenDaysAgo = new Date(Date.now() - 7 * 24 * 60 * 60 * 1000);
+
+    return allTests
+      .filter((test) => new Date(test.createdAt) >= sevenDaysAgo)
+      .sort(
+        (a, b) =>
+          new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime(),
+      ) // Sort by most recent
+      .slice(0, limit); // Limit to max 3 tests
+  },
+
+  getTestStatistics: async (
+    testId: string,
+  ): Promise<DetailedTestStatistics> => {
+    // Simulate API delay
+    await new Promise((resolve) => setTimeout(resolve, 500));
+
+    // Mock data for one specific test
+    const performanceDistribution: PerformanceDistribution[] = [
+      { range: "0-20", count: 1, percentage: 1.6 },
+      { range: "21-40", count: 3, percentage: 4.7 },
+      { range: "41-60", count: 12, percentage: 18.8 },
+      { range: "61-80", count: 28, percentage: 43.7 },
+      { range: "81-100", count: 20, percentage: 31.2 },
+    ];
+
+    // Generate mock student results
+    const studentResults: StudentTestResult[] = Array.from(
+      { length: 20 },
+      (_, i) => {
+        const score = Math.floor(Math.random() * 60) + 40; // Random score between 40 and 100
+        return {
+          studentId: `student-${i + 1}`,
+          studentName: `Student ${i + 1}`,
+          score: score,
+          maxScore: 100,
+          percentage: score,
+          timeTaken: Math.floor(Math.random() * 60) + 30, // Random time between 30 and 90 minutes
+          completedAt: new Date(
+            Date.now() - Math.floor(Math.random() * 7) * 24 * 60 * 60 * 1000,
+          ).toISOString(),
+          status: "completed",
+          attemptCount: Math.floor(Math.random() * 2) + 1, // 1 or 2 attempts
+        };
+      },
+    );
+
+    // Generate mock question stats
+    const questionStats: QuestionStat[] = Array.from({ length: 10 }, (_, i) => {
+      const correctPct = Math.floor(Math.random() * 60) + 40; // Random percentage between 40 and 100
+      return {
+        questionId: `q-${i + 1}`,
+        questionNumber: i + 1,
+        questionType:
+          i % 3 === 0
+            ? "Multiple Choice"
+            : i % 3 === 1
+              ? "True/False"
+              : "Short Answer",
+        difficulty:
+          i % 4 === 0
+            ? "Easy"
+            : i % 4 === 1
+              ? "Medium"
+              : i % 4 === 2
+                ? "Hard"
+                : "Advanced",
+        averageScore: (correctPct / 100) * (i % 3 === 2 ? 5 : 1), // Out of 1 or 5 points
+        correctPercentage: correctPct,
+        attemptedCount: 64 - Math.floor(Math.random() * 4), // Between 60-64 attempts
+        skippedCount: Math.floor(Math.random() * 4), // Between 0-4 skips
+      };
+    });
+
+    return {
+      testId,
+      testName: "Final Exam",
+      courseId: "course-1",
+      courseName: "Data Structures and Algorithms",
+      courseCode: "CSE-301",
+      totalQuestions: 10,
+      totalMarks: 100,
+      averageScore: 77.9,
+      highestScore: 97,
+      lowestScore: 45,
+      medianScore: 80,
+      standardDeviation: 12.5,
+      averageCompletionTime: 72, // in minutes
+      totalSubmissions: 64,
+      performanceDistribution,
+      studentResults,
+      questionStats,
+    };
+  },
+};
diff --git a/src/lib/utils/score-colors.ts b/src/lib/utils/score-colors.ts
new file mode 100644
index 0000000..0acd208
--- /dev/null
+++ b/src/lib/utils/score-colors.ts
@@ -0,0 +1,46 @@
+/**
+ * Utility functions for consistent score color display across the application
+ */
+
+/**
+ * Returns a text color class based on the score percentage
+ * Green (100% to 80%), Yellow (79% to 50%), Red (below 50%)
+ */
+export function getScoreTextColor(percentage: number): string {
+  if (percentage >= 90) return "text-emerald-800 dark:text-emerald-400";
+  if (percentage >= 80) return "text-green-700 dark:text-green-400";
+  if (percentage >= 70) return "text-lime-700 dark:text-lime-400";
+  if (percentage >= 60) return "text-yellow-700 dark:text-yellow-400";
+  if (percentage >= 50) return "text-amber-700 dark:text-amber-400";
+  return "text-red-700 dark:text-red-400";
+}
+
+/**
+ * Returns a background color class based on the score percentage
+ * Green (100% to 80%), Yellow (79% to 50%), Red (below 50%)
+ */
+export function getScoreBgColor(percentage: number): string {
+  if (percentage >= 90)
+    return "bg-emerald-100 text-emerald-800 border-emerald-300 dark:bg-emerald-950 dark:text-emerald-300";
+  if (percentage >= 80)
+    return "bg-green-100 text-green-800 border-green-300 dark:bg-green-950/80 dark:text-green-300";
+  if (percentage >= 70)
+    return "bg-lime-100 text-lime-800 border-lime-300 dark:bg-lime-950 dark:text-lime-300";
+  if (percentage >= 60)
+    return "bg-yellow-100 text-yellow-800 border-yellow-300 dark:bg-yellow-950 dark:text-yellow-300";
+  if (percentage >= 50)
+    return "bg-amber-100 text-amber-800 border-amber-300 dark:bg-amber-950 dark:text-amber-300";
+  return "bg-red-100 text-red-800 border-red-300 dark:bg-red-950 dark:text-red-300";
+}
+
+/**
+ * Returns a progress bar color class based on the score percentage
+ */
+export function getProgressColor(percentage: number): string {
+  if (percentage >= 90) return "bg-green-600";
+  if (percentage >= 80) return "bg-emerald-500";
+  if (percentage >= 70) return "bg-lime-600";
+  if (percentage >= 60) return "bg-yellow-600";
+  if (percentage >= 50) return "bg-amber-600";
+  return "bg-red-600";
+}
diff --git a/src/repo/student-results/index.ts b/src/repo/student-results/index.ts
new file mode 100644
index 0000000..e69de29
diff --git a/src/repo/student-results/student-results-api.ts b/src/repo/student-results/student-results-api.ts
new file mode 100644
index 0000000..eafe77e
--- /dev/null
+++ b/src/repo/student-results/student-results-api.ts
@@ -0,0 +1,7 @@
+// Minimal stub for useRecentTestResults to fix import error
+import { useMemo } from "react";
+
+export function useRecentTestResults() {
+  // Return empty data and loading false for now
+  return useMemo(() => ({ data: [], isLoading: false, isError: false }), []);
+}