feat/frontend: homepage with timeline and recent scores

6 files changed, 1183 insertions, 10 deletions

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index cc1e3e8..7a122c1 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -17,7 +17,8 @@
         "react-dom": "^18.3.1",
         "react-helmet": "^6.1.0",
         "react-markdown": "^9.0.1",
-        "react-router-dom": "^6.26.1"
+        "react-router-dom": "^6.26.1",
+        "recharts": "^3.3.0"
       },
       "devDependencies": {
         "@eslint/js": "^9.38.0",
@@ -900,6 +901,31 @@
         "node": ">= 8"
       }
     },
+    "node_modules/@reduxjs/toolkit": {
+      "version": "2.9.2",
+      "resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-2.9.2.tgz",
+      "integrity": "sha512-ZAYu/NXkl/OhqTz7rfPaAhY0+e8Fr15jqNxte/2exKUxvHyQ/hcqmdekiN1f+Lcw3pE+34FCgX+26zcUE3duCg==",
+      "dependencies": {
+        "@standard-schema/spec": "^1.0.0",
+        "@standard-schema/utils": "^0.3.0",
+        "immer": "^10.0.3",
+        "redux": "^5.0.1",
+        "redux-thunk": "^3.1.0",
+        "reselect": "^5.1.0"
+      },
+      "peerDependencies": {
+        "react": "^16.9.0 || ^17.0.0 || ^18 || ^19",
+        "react-redux": "^7.2.1 || ^8.1.3 || ^9.0.0"
+      },
+      "peerDependenciesMeta": {
+        "react": {
+          "optional": true
+        },
+        "react-redux": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@remix-run/router": {
       "version": "1.23.0",
       "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.23.0.tgz",
@@ -1224,6 +1250,16 @@
         "win32"
       ]
     },
+    "node_modules/@standard-schema/spec": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@standard-schema/spec/-/spec-1.0.0.tgz",
+      "integrity": "sha512-m2bOd0f2RT9k8QJx1JN85cZYyH1RqFBdlwtkSlf4tBDYLCiiZnv1fIIwacK6cqwXavOydf0NPToMQgpKq+dVlA=="
+    },
+    "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=="
+    },
     "node_modules/@types/babel__core": {
       "version": "7.20.5",
       "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.5.tgz",
@@ -1269,6 +1305,60 @@
         "@babel/types": "^7.28.2"
       }
     },
+    "node_modules/@types/d3-array": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/@types/d3-array/-/d3-array-3.2.2.tgz",
+      "integrity": "sha512-hOLWVbm7uRza0BYXpIIW5pxfrKe0W+D5lrFiAEYR+pb6w3N2SwSMaJbXdUfSEv+dT4MfHBLtn5js0LAWaO6otw=="
+    },
+    "node_modules/@types/d3-color": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/@types/d3-color/-/d3-color-3.1.3.tgz",
+      "integrity": "sha512-iO90scth9WAbmgv7ogoq57O9YpKmFBbmoEoCHDB2xMBY0+/KVrqAaCDyCE16dUspeOvIxFFRI+0sEtqDqy2b4A=="
+    },
+    "node_modules/@types/d3-ease": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@types/d3-ease/-/d3-ease-3.0.2.tgz",
+      "integrity": "sha512-NcV1JjO5oDzoK26oMzbILE6HW7uVXOHLQvHshBUW4UMdZGfiY6v5BeQwh9a9tCzv+CeefZQHJt5SRgK154RtiA=="
+    },
+    "node_modules/@types/d3-interpolate": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/@types/d3-interpolate/-/d3-interpolate-3.0.4.tgz",
+      "integrity": "sha512-mgLPETlrpVV1YRJIglr4Ez47g7Yxjl1lj7YKsiMCb27VJH9W8NVM6Bb9d8kkpG/uAQS5AmbA48q2IAolKKo1MA==",
+      "dependencies": {
+        "@types/d3-color": "*"
+      }
+    },
+    "node_modules/@types/d3-path": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/@types/d3-path/-/d3-path-3.1.1.tgz",
+      "integrity": "sha512-VMZBYyQvbGmWyWVea0EHs/BwLgxc+MKi1zLDCONksozI4YJMcTt8ZEuIR4Sb1MMTE8MMW49v0IwI5+b7RmfWlg=="
+    },
+    "node_modules/@types/d3-scale": {
+      "version": "4.0.9",
+      "resolved": "https://registry.npmjs.org/@types/d3-scale/-/d3-scale-4.0.9.tgz",
+      "integrity": "sha512-dLmtwB8zkAeO/juAMfnV+sItKjlsw2lKdZVVy6LRr0cBmegxSABiLEpGVmSJJ8O08i4+sGR6qQtb6WtuwJdvVw==",
+      "dependencies": {
+        "@types/d3-time": "*"
+      }
+    },
+    "node_modules/@types/d3-shape": {
+      "version": "3.1.7",
+      "resolved": "https://registry.npmjs.org/@types/d3-shape/-/d3-shape-3.1.7.tgz",
+      "integrity": "sha512-VLvUQ33C+3J+8p+Daf+nYSOsjB4GXp19/S/aGo60m9h1v6XaxjiT82lKVWJCfzhtuZ3yD7i/TPeC/fuKLLOSmg==",
+      "dependencies": {
+        "@types/d3-path": "*"
+      }
+    },
+    "node_modules/@types/d3-time": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/@types/d3-time/-/d3-time-3.0.4.tgz",
+      "integrity": "sha512-yuzZug1nkAAaBlBBikKZTgzCeA+k1uy4ZFwWANOfKw5z5LRhV0gNA7gNkKm7HoK+HRN0wX3EkxGk0fpbWhmB7g=="
+    },
+    "node_modules/@types/d3-timer": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@types/d3-timer/-/d3-timer-3.0.2.tgz",
+      "integrity": "sha512-Ps3T8E8dZDam6fUyNiMkekK3XUsaUEik+idO9/YjPtfj2qruF8tFBXS7XhtE4iIXBLxhmLjP3SXpLhVf21I9Lw=="
+    },
     "node_modules/@types/debug": {
       "version": "4.1.12",
       "resolved": "https://registry.npmjs.org/@types/debug/-/debug-4.1.12.tgz",
@@ -1367,6 +1457,11 @@
       "integrity": "sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q==",
       "license": "MIT"
     },
+    "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=="
+    },
     "node_modules/@typescript-eslint/eslint-plugin": {
       "version": "8.46.2",
       "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.46.2.tgz",
@@ -1964,6 +2059,14 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
+    "node_modules/clsx": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
+      "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/color-convert": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
@@ -2041,6 +2144,116 @@
       "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
       "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==",
+      "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==",
+      "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==",
+      "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==",
+      "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==",
+      "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==",
+      "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==",
+      "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==",
+      "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==",
+      "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==",
+      "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==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/debug": {
       "version": "4.4.3",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",
@@ -2058,6 +2271,11 @@
         }
       }
     },
+    "node_modules/decimal.js-light": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/decimal.js-light/-/decimal.js-light-2.5.1.tgz",
+      "integrity": "sha512-qIMFpTMZmny+MMIitAB6D7iVPEorVw6YQRWkvarTkT4tBeSLLiHzcwj6q0MmYSFCiVpiqPJTJEYIrpcPzVEIvg=="
+    },
     "node_modules/decode-named-character-reference": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/decode-named-character-reference/-/decode-named-character-reference-1.2.0.tgz",
@@ -2188,6 +2406,11 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/es-toolkit": {
+      "version": "1.41.0",
+      "resolved": "https://registry.npmjs.org/es-toolkit/-/es-toolkit-1.41.0.tgz",
+      "integrity": "sha512-bDd3oRmbVgqZCJS6WmeQieOrzpl3URcWBUVDXxOELlUW2FuW+0glPOz1n0KnRie+PdyvUZcXz2sOn00c6pPRIA=="
+    },
     "node_modules/esbuild": {
       "version": "0.21.5",
       "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.21.5.tgz",
@@ -2421,6 +2644,11 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/eventemitter3": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-5.0.1.tgz",
+      "integrity": "sha512-GWkBvjiSZK87ELrYOSESUYeVIc9mvLLf/nXalMOS5dYrgZq9o5OVkbZAVM06CVxYsCwH9BDZFPlQTlPA1j4ahA=="
+    },
     "node_modules/extend": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/extend/-/extend-3.0.2.tgz",
@@ -2846,6 +3074,15 @@
         "node": ">= 4"
       }
     },
+    "node_modules/immer": {
+      "version": "10.2.0",
+      "resolved": "https://registry.npmjs.org/immer/-/immer-10.2.0.tgz",
+      "integrity": "sha512-d/+XTN3zfODyjr89gM3mPq1WNX2B8pYsu7eORitdwyA2sBubnTl3laYlBk4sXY5FUa5qTZGBDPJICVbvqzjlbw==",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/immer"
+      }
+    },
     "node_modules/import-fresh": {
       "version": "3.3.1",
       "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.1.tgz",
@@ -2898,6 +3135,14 @@
       "integrity": "sha512-0aO8FkhNZlj/ZIbNi7Lxxr12obT7cL1moPfE4tg1LkX7LlLfC6DeX4l2ZEud1ukP9jNQyNnfzQVqwbwmAATY4Q==",
       "license": "MIT"
     },
+    "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==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/is-alphabetical": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/is-alphabetical/-/is-alphabetical-2.0.1.tgz",
@@ -4183,6 +4428,28 @@
         "react": ">=18"
       }
     },
+    "node_modules/react-redux": {
+      "version": "9.2.0",
+      "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-9.2.0.tgz",
+      "integrity": "sha512-ROY9fvHhwOD9ySfrF0wmvu//bKCQ6AeZZq1nJNtbDC+kk5DuSuNX/n6YWYF/SYy7bSba4D4FSz8DJeKY/S/r+g==",
+      "dependencies": {
+        "@types/use-sync-external-store": "^0.0.6",
+        "use-sync-external-store": "^1.4.0"
+      },
+      "peerDependencies": {
+        "@types/react": "^18.2.25 || ^19",
+        "react": "^18.0 || ^19",
+        "redux": "^5.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "redux": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/react-refresh": {
       "version": "0.17.0",
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.17.0.tgz",
@@ -4234,6 +4501,45 @@
         "react": "^16.3.0 || ^17.0.0 || ^18.0.0"
       }
     },
+    "node_modules/recharts": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/recharts/-/recharts-3.3.0.tgz",
+      "integrity": "sha512-Vi0qmTB0iz1+/Cz9o5B7irVyUjX2ynvEgImbgMt/3sKRREcUM07QiYjS1QpAVrkmVlXqy5gykq4nGWMz9AS4Rg==",
+      "dependencies": {
+        "@reduxjs/toolkit": "1.x.x || 2.x.x",
+        "clsx": "^2.1.1",
+        "decimal.js-light": "^2.5.1",
+        "es-toolkit": "^1.39.3",
+        "eventemitter3": "^5.0.1",
+        "immer": "^10.1.1",
+        "react-redux": "8.x.x || 9.x.x",
+        "reselect": "5.1.1",
+        "tiny-invariant": "^1.3.3",
+        "use-sync-external-store": "^1.2.2",
+        "victory-vendor": "^37.0.2"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-is": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/redux": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/redux/-/redux-5.0.1.tgz",
+      "integrity": "sha512-M9/ELqF6fy8FwmkpnF0S3YKOqMyoWJ4+CS5Efg2ct3oY9daQvd/Pc71FpGZsVsbl3Cpb+IIcjBDUnnyBdQbq4w=="
+    },
+    "node_modules/redux-thunk": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/redux-thunk/-/redux-thunk-3.1.0.tgz",
+      "integrity": "sha512-NW2r5T6ksUKXCabzhL9z+h206HQw/NJkcLm1GPImRQ8IzfXwRGqjVhKJGauHirT0DAuyy6hjdnMZaRoAcy0Klw==",
+      "peerDependencies": {
+        "redux": "^5.0.0"
+      }
+    },
     "node_modules/remark-parse": {
       "version": "11.0.0",
       "resolved": "https://registry.npmjs.org/remark-parse/-/remark-parse-11.0.0.tgz",
@@ -4267,6 +4573,11 @@
         "url": "https://opencollective.com/unified"
       }
     },
+    "node_modules/reselect": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/reselect/-/reselect-5.1.1.tgz",
+      "integrity": "sha512-K/BG6eIky/SBpzfHZv/dd+9JBFiS4SWV7FIujVyJRux6e45+73RaUHXLmIR1f7WOMaQ0U1km6qwklRQxpJJY0w=="
+    },
     "node_modules/resolve-from": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
@@ -4511,6 +4822,11 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/tiny-invariant": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.3.3.tgz",
+      "integrity": "sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg=="
+    },
     "node_modules/to-regex-range": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
@@ -4755,6 +5071,14 @@
         "punycode": "^2.1.0"
       }
     },
+    "node_modules/use-sync-external-store": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.6.0.tgz",
+      "integrity": "sha512-Pp6GSwGP/NrPIrxVFAIkOQeyw8lFenOHijQWkUTrDvrF4ALqylP2C/KCkeS9dpUM3KvYRQhna5vt7IL95+ZQ9w==",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
     "node_modules/vfile": {
       "version": "6.0.3",
       "resolved": "https://registry.npmjs.org/vfile/-/vfile-6.0.3.tgz",
@@ -4783,6 +5107,27 @@
         "url": "https://opencollective.com/unified"
       }
     },
+    "node_modules/victory-vendor": {
+      "version": "37.3.6",
+      "resolved": "https://registry.npmjs.org/victory-vendor/-/victory-vendor-37.3.6.tgz",
+      "integrity": "sha512-SbPDPdDBYp+5MJHhBCAyI7wKM3d5ivekigc2Dk2s7pgbZ9wIgIBYGVw4zGHBml/qTFbexrofXW6Gu4noGxrOwQ==",
+      "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/vite": {
       "version": "5.4.21",
       "resolved": "https://registry.npmjs.org/vite/-/vite-5.4.21.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index 946ee40..46bb5ad 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -13,7 +13,8 @@
     "react-dom": "^18.3.1",
     "react-helmet": "^6.1.0",
     "react-markdown": "^9.0.1",
-    "react-router-dom": "^6.26.1"
+    "react-router-dom": "^6.26.1",
+    "recharts": "^3.3.0"
   },
   "scripts": {
     "dev": "vite",
@@ -32,4 +33,4 @@
     "typescript-eslint": "^8.46.2",
     "vite": "^5.4.2"
   }
-}
\ No newline at end of file
+}
diff --git a/frontend/src/api/Api.ts b/frontend/src/api/Api.ts
index dd5076a..4385f2c 100644
--- a/frontend/src/api/Api.ts
+++ b/frontend/src/api/Api.ts
@@ -5,6 +5,7 @@ import { get_games, get_chapters, get_games_chapters, get_game_maps, get_search
 import { get_official_rankings, get_unofficial_rankings } from "@api/Rankings";
 import { get_map_summary, get_map_leaderboard, get_map_discussions, get_map_discussion, post_map_discussion, post_map_discussion_comment, delete_map_discussion, post_record, delete_map_record } from "@api/Maps";
 import { delete_map_summary, post_map_summary, put_map_image, put_map_summary } from "@api/Mod";
+import { get_portal_count_history, get_recent_scores } from "@api/Stats";
 import { UploadRunContent } from "@customTypes/Content";
 
 // add new api call function entries here
@@ -47,6 +48,9 @@ export const API = {
   put_map_summary: (token: string, map_id: string, content: ModMenuContent) => put_map_summary(token, map_id, content),
 
   delete_map_summary: (token: string, map_id: string, route_id: number) => delete_map_summary(token, map_id, route_id),
+  // Stats
+  get_portal_count_history: () => get_portal_count_history(),
+  get_recent_scores: () => get_recent_scores(),
 };
 
 const BASE_API_URL: string = import.meta.env.DEV
diff --git a/frontend/src/api/Stats.ts b/frontend/src/api/Stats.ts
new file mode 100644
index 0000000..21654b5
--- /dev/null
+++ b/frontend/src/api/Stats.ts
@@ -0,0 +1,52 @@
+import axios from "axios";
+import { url } from "./Api";
+
+export interface PortalCountData {
+    date: string;
+    count: number;
+}
+
+export interface RecordsTimelineResponse {
+    timeline_singleplayer: PortalCountData[];
+    timeline_multiplayer: PortalCountData[];
+}
+
+export interface ScoreLog {
+    game: {
+        id: number;
+        name: string;
+        image: string;
+        is_coop: boolean;
+        category_portals: null;
+    };
+    user: {
+        steam_id: string;
+        user_name: string;
+    };
+    map: {
+        id: number;
+        name: string;
+        image: string;
+        is_disabled: boolean;
+        portal_count: number;
+        difficulty: number;
+    };
+    score_count: number;
+}
+
+export async function get_portal_count_history(): Promise<RecordsTimelineResponse | undefined> {
+  const response = await axios.get(url("stats/timeline"));
+  if (!response.data.data) {
+    return undefined;
+  }
+  return response.data.data;
+}
+
+export async function get_recent_scores(): Promise<ScoreLog[]> {
+  const response = await axios.get(url("stats/scores"));
+  if (!response.data.data) {
+    return [];
+  }
+  return response.data.data.scores.slice(0, 5);
+}
+
diff --git a/frontend/src/css/Homepage.css b/frontend/src/css/Homepage.css
new file mode 100644
index 0000000..b89602e
--- /dev/null
+++ b/frontend/src/css/Homepage.css
@@ -0,0 +1,545 @@
+.hero-section {
+    text-align: center;
+    padding: 20px 20px;
+    margin: 20px;
+    background: #202232;
+    border-radius: 24px;
+}
+
+.hero-content {
+    max-width: 800px;
+    margin: 0 auto;
+}
+
+.hero-title {
+    font-size: 56px;
+    font-family: BarlowCondensed-Bold;
+    color: #FFF;
+    margin-bottom: 20px;
+    line-height: 1.2;
+}
+
+.hero-subtitle {
+    font-size: 24px;
+    font-family: BarlowSemiCondensed-Regular;
+    color: #CDCFDF;
+    margin: 0;
+}
+
+.stats-section {
+    margin: 20px;
+}
+
+.stats-grid {
+    display: grid;
+    grid-template-columns: 4fr 1fr;
+    gap: 20px;
+}
+
+.stats-container {
+    background: #202232;
+    border-radius: 24px;
+    padding: 20px;
+}
+
+.stats-header {
+    text-align: center;
+    margin-bottom: 30px;
+}
+
+.stats-header h3 {
+    font-size: 32px;
+    font-family: BarlowCondensed-Bold;
+    color: #FFF;
+    margin-top: 0px;
+    margin-bottom: 10px;
+}
+
+.stats-header p {
+    color: #CDCFDF;
+    font-size: 20px;
+    font-family: BarlowSemiCondensed-Regular;
+    margin: 0;
+}
+
+/* Chart Wrapper */
+.chart-wrapper {
+    background: #2b2e46;
+    border-radius: 20px;
+    padding: 20px 10px;
+    margin-top: 20px;
+}
+
+.chart-loading {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 60px 20px;
+    color: #CDCFDF;
+}
+
+.loading-spinner {
+    width: 48px;
+    height: 48px;
+    border: 5px solid #FFF;
+    border-bottom-color: transparent;
+    border-radius: 50%;
+    display: inline-block;
+    box-sizing: border-box;
+    animation: rotation 1s linear infinite;
+    margin-bottom: 20px;
+}
+
+@keyframes rotation {
+    0% {
+        transform: rotate(0deg);
+    }
+
+    100% {
+        transform: rotate(360deg);
+    }
+}
+
+.chart-loading p {
+    font-size: 20px;
+    font-family: BarlowSemiCondensed-Regular;
+    margin: 0;
+}
+
+.chart-empty {
+    text-align: center;
+    padding: 60px 20px;
+    color: #CDCFDF;
+    font-size: 20px;
+    font-family: BarlowSemiCondensed-Regular;
+}
+
+/* Custom Tooltip */
+.custom-tooltip {
+    background: #2b2e46;
+    border-radius: 12px;
+    padding: 12px 16px;
+}
+
+.tooltip-date {
+    color: #CDCFDF;
+    font-family: BarlowSemiCondensed-Regular;
+    font-size: 16px;
+    margin: 0 0 4px 0;
+}
+
+.tooltip-count {
+    color: #FFF;
+    font-family: BarlowSemiCondensed-SemiBold;
+    font-size: 22px;
+    margin: 0;
+}
+
+/* Mode Toggle Buttons */
+.mode-toggle-container {
+    display: flex;
+    justify-content: center;
+    margin-top: 20px;
+}
+
+.mode-toggle-button {
+    background-color: #2b2e46;
+    padding: 10px 20px;
+    border: 0;
+    color: #cdcfdf;
+    cursor: pointer;
+    font-family: BarlowSemiCondensed-Regular;
+    font-size: 24px;
+    transition: all 0.1s;
+    flex: 1;
+    max-width: 150px;
+}
+
+.mode-toggle-button:first-child {
+    border-radius: 5px 0 0 5px;
+}
+
+.mode-toggle-button:last-child {
+    border-radius: 0 5px 5px 0;
+}
+
+.mode-toggle-button:hover,
+.mode-toggle-button.selected {
+    background-color: #202232;
+}
+
+/* Recent Scores */
+.recent-scores-container {
+    background: #202232;
+    border-radius: 24px;
+    padding: 20px;
+    display: flex;
+    flex-direction: column;
+}
+
+.recent-scores-header {
+    text-align: center;
+    margin-bottom: 20px;
+}
+
+.recent-scores-header h3 {
+    font-size: 32px;
+    font-family: BarlowCondensed-Bold;
+    color: #FFF;
+    margin: 0;
+}
+
+.scores-loading {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex: 1;
+    padding: 40px 20px;
+}
+
+.recent-scores-list {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+}
+
+.score-item {
+    background: #2b2e46;
+    border-radius: 16px;
+    padding: 12px 16px;
+    transition: background-color 0.15s;
+}
+
+.score-item:hover {
+    background: #353854;
+}
+
+.score-user {
+    font-family: BarlowSemiCondensed-SemiBold;
+    font-size: 18px;
+    color: #FFF;
+    margin-bottom: 4px;
+}
+
+.score-map {
+    font-family: BarlowSemiCondensed-Regular;
+    font-size: 16px;
+    color: #CDCFDF;
+    margin-bottom: 2px;
+}
+
+.score-portals {
+    font-family: BarlowSemiCondensed-Regular;
+    font-size: 14px;
+    color: #888;
+}
+
+.scores-empty {
+    text-align: center;
+    padding: 40px 20px;
+    color: #CDCFDF;
+    font-size: 16px;
+    font-family: BarlowSemiCondensed-Regular;
+}
+
+/* Info Section */
+.info-section {
+    margin: 20px;
+}
+
+.info-cards {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+    gap: 20px;
+}
+
+.info-card {
+    background: #202232;
+    border-radius: 24px;
+    padding: 30px;
+    text-align: center;
+    transition: background-color 0.15s;
+}
+
+.info-card:hover {
+    background: #2b2e46;
+}
+
+.info-icon {
+    font-size: 50px;
+    margin-bottom: 20px;
+}
+
+.info-card h3 {
+    font-size: 32px;
+    font-family: BarlowCondensed-Bold;
+    color: #FFF;
+    margin-bottom: 15px;
+}
+
+.info-card p {
+    color: #CDCFDF;
+    font-size: 18px;
+    font-family: BarlowSemiCondensed-Regular;
+    line-height: 1.6;
+    margin: 0;
+}
+
+/* Notice Section */
+.notice-section {
+    background: #202232;
+    border-radius: 24px;
+    padding: 30px;
+    margin: 20px;
+}
+
+.notice-content h3 {
+    color: #FFF;
+    font-size: 40px;
+    font-family: BarlowCondensed-Bold;
+    margin-top: 0;
+    margin-bottom: 20px;
+}
+
+.notice-content p {
+    color: #CDCFDF;
+    font-size: 20px;
+    font-family: BarlowSemiCondensed-Regular;
+    line-height: 1.8;
+    margin-bottom: 15px;
+}
+
+.notice-content p:last-child {
+    margin-bottom: 0;
+}
+
+.notice-content strong {
+    color: #FFF;
+    font-family: BarlowSemiCondensed-SemiBold;
+}
+
+/* Responsive Design */
+@media screen and (min-width: 769px) and (max-width: 1024px) {
+    .hero-section {
+        margin: 18px;
+        padding: 40px 18px;
+    }
+
+    .hero-title {
+        font-size: 48px;
+    }
+
+    .hero-subtitle {
+        font-size: 22px;
+    }
+
+    .stats-section {
+        margin: 18px;
+    }
+
+    .stats-grid {
+        gap: 18px;
+    }
+
+    .stats-container {
+        padding: 18px;
+    }
+
+    .stats-header h3 {
+        font-size: 44px;
+    }
+
+    .stats-header p {
+        font-size: 18px;
+    }
+
+    .chart-wrapper {
+        padding: 18px 10px;
+    }
+
+    .recent-scores-container {
+        padding: 18px;
+    }
+
+    .recent-scores-header h3 {
+        font-size: 28px;
+    }
+
+    .score-user {
+        font-size: 16px;
+    }
+
+    .score-map {
+        font-size: 14px;
+    }
+
+    .score-portals {
+        font-size: 12px;
+    }
+
+    .info-section {
+        margin: 18px;
+    }
+
+    .info-cards {
+        gap: 18px;
+    }
+
+    .info-card {
+        padding: 25px;
+    }
+
+    .info-card h3 {
+        font-size: 28px;
+    }
+
+    .info-card p {
+        font-size: 16px;
+    }
+
+    .notice-section {
+        margin: 18px;
+        padding: 25px;
+    }
+
+    .notice-content h3 {
+        font-size: 36px;
+    }
+
+    .notice-content p {
+        font-size: 18px;
+    }
+}
+
+@media screen and (max-width: 768px) {
+    .hero-section {
+        margin: 20px;
+        padding: 30px 20px;
+    }
+
+    .hero-title {
+        font-size: 40px;
+    }
+
+    .hero-subtitle {
+        font-size: 18px;
+    }
+
+    .stats-section {
+        margin: 20px;
+    }
+
+    .stats-grid {
+        grid-template-columns: 1fr;
+        gap: 15px;
+    }
+
+    .stats-container {
+        padding: 15px;
+    }
+
+    .stats-header h3 {
+        font-size: 36px;
+        margin-bottom: 8px;
+    }
+
+    .stats-header p {
+        font-size: 16px;
+    }
+
+    .chart-wrapper {
+        padding: 15px 5px;
+        margin-top: 15px;
+    }
+
+    .recent-scores-container {
+        padding: 15px;
+    }
+
+    .recent-scores-header h3 {
+        font-size: 28px;
+    }
+
+    .score-item {
+        padding: 10px 12px;
+    }
+
+    .score-user {
+        font-size: 16px;
+    }
+
+    .score-map {
+        font-size: 14px;
+    }
+
+    .score-portals {
+        font-size: 12px;
+    }
+
+    .chart-loading,
+    .chart-empty {
+        padding: 40px 15px;
+    }
+
+    .chart-loading p,
+    .chart-empty p {
+        font-size: 16px;
+    }
+
+    .loading-spinner {
+        width: 40px;
+        height: 40px;
+        border-width: 4px;
+    }
+
+    .info-section {
+        margin: 20px;
+    }
+
+    .info-cards {
+        grid-template-columns: 1fr;
+        gap: 15px;
+    }
+
+    .info-card {
+        padding: 20px;
+    }
+
+    .info-icon {
+        font-size: 40px;
+        margin-bottom: 15px;
+    }
+
+    .info-card h3 {
+        font-size: 28px;
+        margin-bottom: 12px;
+    }
+
+    .info-card p {
+        font-size: 16px;
+    }
+
+    .notice-section {
+        margin: 20px;
+        padding: 20px;
+    }
+
+    .notice-content h3 {
+        font-size: 32px;
+        margin-bottom: 15px;
+    }
+
+    .notice-content p {
+        font-size: 16px;
+        margin-bottom: 12px;
+    }
+
+    .tooltip-date {
+        font-size: 14px;
+    }
+
+    .tooltip-count {
+        font-size: 18px;
+    }
+}
\ No newline at end of file
diff --git a/frontend/src/pages/Homepage.tsx b/frontend/src/pages/Homepage.tsx
index 3f30d9a..88290dd 100644
--- a/frontend/src/pages/Homepage.tsx
+++ b/frontend/src/pages/Homepage.tsx
@@ -1,20 +1,246 @@
 import React from "react";
 import { Helmet } from "react-helmet";
+import { XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, Area, AreaChart } from "recharts";
+import { API } from "../api/Api";
+import { PortalCountData, ScoreLog } from "../api/Stats";
+import "../css/Homepage.css";
+import { Link } from "react-router-dom";
 
 const Homepage: React.FC = () => {
+  const [portalCountDataSingleplayer, setPortalCountDataSingleplayer] = React.useState<PortalCountData[]>([]);
+  const [portalCountDataMultiplayer, setPortalCountDataMultiplayer] = React.useState<PortalCountData[]>([]);
+  const [recentScores, setRecentScores] = React.useState<ScoreLog[]>([]);
+  const [isLoading, setIsLoading] = React.useState<boolean>(true);
+  const [isLoadingScores, setIsLoadingScores] = React.useState<boolean>(true);
+  const [selectedMode, setSelectedMode] = React.useState<"singleplayer" | "multiplayer">("singleplayer");
+
+  const processTimelineData = (data: PortalCountData[]): PortalCountData[] => {
+    if (data.length === 0) {
+      return [];
+    };
+    const sortedData = [...data].sort((a, b) => new Date(a.date).getTime() - new Date(b.date).getTime());
+    const startDate = new Date(sortedData[0].date);
+    const endDate = new Date(sortedData[sortedData.length - 1].date);
+
+    const result: PortalCountData[] = [];
+    let currentDate = new Date(startDate.getFullYear(), startDate.getMonth(), 1);
+
+    let dataIndex = 0;
+    let currentCount = sortedData[0].count;
+
+    while (currentDate <= endDate) {
+      while (dataIndex < sortedData.length && new Date(sortedData[dataIndex].date) <= currentDate) {
+        currentCount = sortedData[dataIndex].count;
+        dataIndex++;
+      }
+      result.push({
+        date: currentDate.toISOString(),
+        count: currentCount
+      });
+      const nextDate = new Date(currentDate.getFullYear(), currentDate.getMonth(), currentDate.getDate() + 7);
+      if (nextDate.getMonth() !== currentDate.getMonth()) {
+        currentDate = new Date(nextDate.getFullYear(), nextDate.getMonth(), 1);
+      } else {
+        currentDate = nextDate;
+      }
+    }
+
+    return result;
+  };
+
+  const processedDataSingleplayer = React.useMemo(
+    () => processTimelineData(portalCountDataSingleplayer),
+    [portalCountDataSingleplayer]
+  );
+
+  const processedDataMultiplayer = React.useMemo(
+    () => processTimelineData(portalCountDataMultiplayer),
+    [portalCountDataMultiplayer]
+  );
+
+  const getYearlyTicks = (data: PortalCountData[]): string[] => {
+    if (data.length === 0) {
+      return [];
+    }
+    const seenYears = new Set<number>();
+    const ticks: string[] = [];
+    for (const point of data) {
+      const year = new Date(point.date).getFullYear();
+      if (!seenYears.has(year)) {
+        seenYears.add(year);
+        ticks.push(point.date);
+      }
+    }
+    return ticks;
+  };
+
+  const yearlyTicksSingleplayer = React.useMemo(
+    () => getYearlyTicks(processedDataSingleplayer),
+    [processedDataSingleplayer]
+  );
+
+  const yearlyTicksMultiplayer = React.useMemo(
+    () => getYearlyTicks(processedDataMultiplayer),
+    [processedDataMultiplayer]
+  );
+
+  const fetchPortalCountData = async () => {
+    setIsLoading(true);
+    const data = await API.get_portal_count_history();
+    setPortalCountDataSingleplayer(data?.timeline_singleplayer || []);
+    setPortalCountDataMultiplayer(data?.timeline_multiplayer || []);
+    setIsLoading(false);
+  };
+
+  const fetchRecentScores = async () => {
+    setIsLoadingScores(true);
+    const scores = await API.get_recent_scores();
+    setRecentScores(scores);
+    setIsLoadingScores(false);
+  };
+
+  React.useEffect(() => {
+    fetchPortalCountData();
+    fetchRecentScores();
+  }, []);
+
+  const CustomTooltip = ({ active, payload }: any) => {
+    if (active && payload && payload.length) {
+      return (
+        <div className="custom-tooltip">
+          <p className="tooltip-date">{new Date(payload[0].payload.date).toLocaleDateString("en-US", {
+            year: "numeric",
+            month: "long",
+            day: "numeric"
+          })}</p>
+          <p className="tooltip-count">{`Portal Count: ${payload[0].value}`}</p>
+        </div>
+      );
+    }
+    return null;
+  };
 
   return (
-    <main>
+    <main className="homepage">
       <Helmet>
         <title>LPHUB | Homepage</title>
       </Helmet>
-      <section>
-        <p />
-        <h1>Welcome to Least Portals Hub!</h1>
-        <p>At the moment, LPHUB is in beta state. This means that the site has only the core functionalities enabled for providing both collaborative information and competitive leaderboards.</p>
-        <p>The website should feel intuitive to navigate around. For any type of feedback, reach us at LPHUB Discord server.</p>
-        <p>By using LPHUB, you agree that you have read the 'Leaderboard Rules' and the 'About LPHUB' pages.</p>
+
+      <section className="hero-section">
+        <div className="hero-content">
+          <h1 className="hero-title">Welcome to Least Portals Hub!</h1>
+          <p className="hero-subtitle">
+            Your ultimate destination for Portal 2 Least Portals speedrunning.
+          </p>
+        </div>
       </section>
+
+      <section className="stats-section">
+        <div className="stats-grid">
+          <div className="stats-container">
+            <div className="stats-header">
+              <h3>Least Portals World Record Timeline</h3>
+            </div>
+
+            {isLoading ? (
+              <div className="chart-loading">
+                <div className="loading-spinner"></div>
+              </div>
+            ) : (selectedMode === "singleplayer" ? processedDataSingleplayer : processedDataMultiplayer).length > 0 ? (
+              <>
+                <div className="chart-wrapper">
+                  <ResponsiveContainer width="100%" height={400}>
+                    <AreaChart
+                      data={selectedMode === "singleplayer" ? processedDataSingleplayer : processedDataMultiplayer}
+                      margin={{ top: 10, right: 30, left: 0, bottom: 0 }}
+                    >
+                      <defs>
+                        <linearGradient id="colorCount" x1="0" y1="0" x2="0" y2="1">
+                          <stop offset="5%" stopColor="#CDCFDF" stopOpacity={0.6} />
+                          <stop offset="95%" stopColor="#CDCFDF" stopOpacity={0.05} />
+                        </linearGradient>
+                      </defs>
+                      <CartesianGrid strokeDasharray="3 3" stroke="#202232" opacity={0.5} />
+                      <XAxis
+                        dataKey="date"
+                        stroke="#CDCFDF"
+                        tick={{ fill: "#CDCFDF", fontFamily: "BarlowSemiCondensed-Regular" }}
+                        ticks={selectedMode === "singleplayer" ? yearlyTicksSingleplayer : yearlyTicksMultiplayer}
+                        tickFormatter={(date) => {
+                          const d = new Date(date);
+                          return d.getFullYear().toString();
+                        }}
+                      />
+                      <YAxis
+                        stroke="#CDCFDF"
+                        tick={{ fill: "#CDCFDF", fontFamily: "BarlowSemiCondensed-Regular" }}
+                      />
+                      <Tooltip content={<CustomTooltip />} />
+                      <Area
+                        type="monotone"
+                        dataKey="count"
+                        stroke="#FFF"
+                        strokeWidth={2}
+                        fillOpacity={1}
+                        fill="url(#colorCount)"
+                      />
+                    </AreaChart>
+                  </ResponsiveContainer>
+                </div>
+                <div className="mode-toggle-container">
+                  <button
+                    onClick={() => setSelectedMode("singleplayer")}
+                    className={`mode-toggle-button ${selectedMode === "singleplayer" ? "selected" : ""}`}
+                  >
+                    Singleplayer
+                  </button>
+                  <button
+                    onClick={() => setSelectedMode("multiplayer")}
+                    className={`mode-toggle-button ${selectedMode === "multiplayer" ? "selected" : ""}`}
+                  >
+                    Multiplayer
+                  </button>
+                </div>
+              </>
+            ) : (
+              <div className="chart-empty">
+                <p>No data available yet.</p>
+              </div>
+            )}
+          </div>
+
+          <div className="recent-scores-container">
+            <div className="recent-scores-header">
+              <h3>Recent Scores</h3>
+            </div>
+
+            {isLoadingScores ? (
+              <div className="scores-loading">
+                <div className="loading-spinner"></div>
+              </div>
+            ) : recentScores.length > 0 ? (
+              <div className="recent-scores-list">
+                {recentScores.map((score, index) => (
+                  <div key={index} className="score-item">
+                    <div>
+                      <Link key={index} to={`/users/${score.user.steam_id}`} className="score-user">{score.user.user_name}</Link>
+                    </div>
+                    <div className="score-map">
+                      <Link key={index} to={`/maps/${score.map.id}`} className="score-map">{score.map.name}</Link>
+                    </div>
+                    <div className="score-portals">{score.score_count} { } portals</div>
+                  </div>
+                ))}
+              </div>
+            ) : (
+              <div className="scores-empty">
+                <p>No Recent Scores.</p>
+              </div>
+            )}
+          </div>
+        </div>
+      </section>
+
     </main>
   );
 };