diff --git a/package-lock.json b/package-lock.json
index 4d189c0..3bab27b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,7 @@
       "name": "comclub-website-2024",
       "version": "0.0.0",
       "dependencies": {
+        "@babel/plugin-syntax-import-attributes": "^7.23.3",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-icons": "^5.0.1",
@@ -56,7 +57,6 @@
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.2.1.tgz",
       "integrity": "sha512-lFMjJTrFL3j7L9yBxwYfCq2k6qqwHyzuUl/XBnif78PWTJYyL/dfowQHWE3sp6U6ZzqWiiIZnpTMO96zhkjwtg==",
-      "dev": true,
       "dependencies": {
         "@jridgewell/gen-mapping": "^0.3.0",
         "@jridgewell/trace-mapping": "^0.3.9"
@@ -69,7 +69,6 @@
       "version": "7.23.5",
       "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.23.5.tgz",
       "integrity": "sha512-CgH3s1a96LipHCmSUmYFPwY7MNx8C3avkq7i4Wl3cfa662ldtUe4VM1TPXX70pfmrlWTb6jLqTYrZyT2ZTJBgA==",
-      "dev": true,
       "dependencies": {
         "@babel/highlight": "^7.23.4",
         "chalk": "^2.4.2"
@@ -82,7 +81,6 @@
       "version": "7.23.5",
       "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.23.5.tgz",
       "integrity": "sha512-uU27kfDRlhfKl+w1U6vp16IuvSLtjAxdArVXPa9BvLkrr7CYIsxH5adpHObeAGY/41+syctUWOZ140a2Rvkgjw==",
-      "dev": true,
       "engines": {
         "node": ">=6.9.0"
       }
@@ -91,7 +89,6 @@
       "version": "7.23.6",
       "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.23.6.tgz",
       "integrity": "sha512-FxpRyGjrMJXh7X3wGLGhNDCRiwpWEF74sKjTLDJSG5Kyvow3QZaG0Adbqzi9ZrVjTWpsX+2cxWXD71NMg93kdw==",
-      "dev": true,
       "dependencies": {
         "@ampproject/remapping": "^2.2.0",
         "@babel/code-frame": "^7.23.5",
@@ -121,7 +118,6 @@
       "version": "7.23.6",
       "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.23.6.tgz",
       "integrity": "sha512-qrSfCYxYQB5owCmGLbl8XRpX1ytXlpueOb0N0UmQwA073KZxejgQTzAmJezxvpwQD9uGtK2shHdi55QT+MbjIw==",
-      "dev": true,
       "dependencies": {
         "@babel/types": "^7.23.6",
         "@jridgewell/gen-mapping": "^0.3.2",
@@ -136,7 +132,6 @@
       "version": "7.23.6",
       "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.23.6.tgz",
       "integrity": "sha512-9JB548GZoQVmzrFgp8o7KxdgkTGm6xs9DW0o/Pim72UDjzr5ObUQ6ZzYPqA+g9OTS2bBQoctLJrky0RDCAWRgQ==",
-      "dev": true,
       "dependencies": {
         "@babel/compat-data": "^7.23.5",
         "@babel/helper-validator-option": "^7.23.5",
@@ -152,7 +147,6 @@
       "version": "7.22.20",
       "resolved": "https://registry.npmjs.org/@babel/helper-environment-visitor/-/helper-environment-visitor-7.22.20.tgz",
       "integrity": "sha512-zfedSIzFhat/gFhWfHtgWvlec0nqB9YEIVrpuwjruLlXfUSnA8cJB0miHKwqDnQ7d32aKo2xt88/xZptwxbfhA==",
-      "dev": true,
       "engines": {
         "node": ">=6.9.0"
       }
@@ -161,7 +155,6 @@
       "version": "7.23.0",
       "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.23.0.tgz",
       "integrity": "sha512-OErEqsrxjZTJciZ4Oo+eoZqeW9UIiOcuYKRJA4ZAgV9myA+pOXhhmpfNCKjEH/auVfEYVFJ6y1Tc4r0eIApqiw==",
-      "dev": true,
       "dependencies": {
         "@babel/template": "^7.22.15",
         "@babel/types": "^7.23.0"
@@ -174,7 +167,6 @@
       "version": "7.22.5",
       "resolved": "https://registry.npmjs.org/@babel/helper-hoist-variables/-/helper-hoist-variables-7.22.5.tgz",
       "integrity": "sha512-wGjk9QZVzvknA6yKIUURb8zY3grXCcOZt+/7Wcy8O2uctxhplmUPkOdlgoNhmdVee2c92JXbf1xpMtVNbfoxRw==",
-      "dev": true,
       "dependencies": {
         "@babel/types": "^7.22.5"
       },
@@ -186,7 +178,6 @@
       "version": "7.22.15",
       "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.22.15.tgz",
       "integrity": "sha512-0pYVBnDKZO2fnSPCrgM/6WMc7eS20Fbok+0r88fp+YtWVLZrp4CkafFGIp+W0VKw4a22sgebPT99y+FDNMdP4w==",
-      "dev": true,
       "dependencies": {
         "@babel/types": "^7.22.15"
       },
@@ -198,7 +189,6 @@
       "version": "7.23.3",
       "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.23.3.tgz",
       "integrity": "sha512-7bBs4ED9OmswdfDzpz4MpWgSrV7FXlc3zIagvLFjS5H+Mk7Snr21vQ6QwrsoCGMfNC4e4LQPdoULEt4ykz0SRQ==",
-      "dev": true,
       "dependencies": {
         "@babel/helper-environment-visitor": "^7.22.20",
         "@babel/helper-module-imports": "^7.22.15",
@@ -217,7 +207,6 @@
       "version": "7.22.5",
       "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.22.5.tgz",
       "integrity": "sha512-uLls06UVKgFG9QD4OeFYLEGteMIAa5kpTPcFL28yuCIIzsf6ZyKZMllKVOCZFhiZ5ptnwX4mtKdWCBE/uT4amg==",
-      "dev": true,
       "engines": {
         "node": ">=6.9.0"
       }
@@ -226,7 +215,6 @@
       "version": "7.22.5",
       "resolved": "https://registry.npmjs.org/@babel/helper-simple-access/-/helper-simple-access-7.22.5.tgz",
       "integrity": "sha512-n0H99E/K+Bika3++WNL17POvo4rKWZ7lZEp1Q+fStVbUi8nxPQEBOlTmCOxW/0JsS56SKKQ+ojAe2pHKJHN35w==",
-      "dev": true,
       "dependencies": {
         "@babel/types": "^7.22.5"
       },
@@ -238,7 +226,6 @@
       "version": "7.22.6",
       "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.22.6.tgz",
       "integrity": "sha512-AsUnxuLhRYsisFiaJwvp1QF+I3KjD5FOxut14q/GzovUe6orHLesW2C7d754kRm53h5gqrz6sFl6sxc4BVtE/g==",
-      "dev": true,
       "dependencies": {
         "@babel/types": "^7.22.5"
       },
@@ -250,7 +237,6 @@
       "version": "7.23.4",
       "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.23.4.tgz",
       "integrity": "sha512-803gmbQdqwdf4olxrX4AJyFBV/RTr3rSmOj0rKwesmzlfhYNDEs+/iOcznzpNWlJlIlTJC2QfPFcHB6DlzdVLQ==",
-      "dev": true,
       "engines": {
         "node": ">=6.9.0"
       }
@@ -259,7 +245,6 @@
       "version": "7.22.20",
       "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.22.20.tgz",
       "integrity": "sha512-Y4OZ+ytlatR8AI+8KZfKuL5urKp7qey08ha31L8b3BwewJAoJamTzyvxPR/5D+KkdJCGPq/+8TukHBlY10FX9A==",
-      "dev": true,
       "engines": {
         "node": ">=6.9.0"
       }
@@ -268,7 +253,6 @@
       "version": "7.23.5",
       "resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.23.5.tgz",
       "integrity": "sha512-85ttAOMLsr53VgXkTbkx8oA6YTfT4q7/HzXSLEYmjcSTJPMPQtvq1BD79Byep5xMUYbGRzEpDsjUf3dyp54IKw==",
-      "dev": true,
       "engines": {
         "node": ">=6.9.0"
       }
@@ -277,7 +261,6 @@
       "version": "7.23.6",
       "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.23.6.tgz",
       "integrity": "sha512-wCfsbN4nBidDRhpDhvcKlzHWCTlgJYUUdSJfzXb2NuBssDSIjc3xcb+znA7l+zYsFljAcGM0aFkN40cR3lXiGA==",
-      "dev": true,
       "dependencies": {
         "@babel/template": "^7.22.15",
         "@babel/traverse": "^7.23.6",
@@ -291,7 +274,6 @@
       "version": "7.23.4",
       "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.23.4.tgz",
       "integrity": "sha512-acGdbYSfp2WheJoJm/EBBBLh/ID8KDc64ISZ9DYtBmC8/Q204PZJLHyzeB5qMzJ5trcOkybd78M4x2KWsUq++A==",
-      "dev": true,
       "dependencies": {
         "@babel/helper-validator-identifier": "^7.22.20",
         "chalk": "^2.4.2",
@@ -305,7 +287,6 @@
       "version": "7.23.6",
       "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.23.6.tgz",
       "integrity": "sha512-Z2uID7YJ7oNvAI20O9X0bblw7Qqs8Q2hFy0R9tAfnfLkp5MW0UH9eUvnDSnFwKZ0AvgS1ucqR4KzvVHgnke1VQ==",
-      "dev": true,
       "bin": {
         "parser": "bin/babel-parser.js"
       },
@@ -313,6 +294,20 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/@babel/plugin-syntax-import-attributes": {
+      "version": "7.23.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-import-attributes/-/plugin-syntax-import-attributes-7.23.3.tgz",
+      "integrity": "sha512-pawnE0P9g10xgoP7yKr6CK63K2FMsTE+FZidZO/1PwRdzmAPVs+HS1mAURUsgaoxammTJvULUdIkEK0gOcU2tA==",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.22.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
     "node_modules/@babel/plugin-transform-react-jsx-self": {
       "version": "7.23.3",
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-self/-/plugin-transform-react-jsx-self-7.23.3.tgz",
@@ -347,7 +342,6 @@
       "version": "7.22.15",
       "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.22.15.tgz",
       "integrity": "sha512-QPErUVm4uyJa60rkI73qneDacvdvzxshT3kksGqlGWYdOTIUOwJ7RDUL8sGqslY1uXWSL6xMFKEXDS3ox2uF0w==",
-      "dev": true,
       "dependencies": {
         "@babel/code-frame": "^7.22.13",
         "@babel/parser": "^7.22.15",
@@ -361,7 +355,6 @@
       "version": "7.23.6",
       "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.23.6.tgz",
       "integrity": "sha512-czastdK1e8YByZqezMPFiZ8ahwVMh/ESl9vPgvgdB9AmFMGP5jfpFax74AQgl5zj4XHzqeYAg2l8PuUeRS1MgQ==",
-      "dev": true,
       "dependencies": {
         "@babel/code-frame": "^7.23.5",
         "@babel/generator": "^7.23.6",
@@ -382,7 +375,6 @@
       "version": "7.23.6",
       "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.23.6.tgz",
       "integrity": "sha512-+uarb83brBzPKN38NX1MkB6vb6+mwvR6amUulqAE7ccQw1pEl+bCia9TbdG1lsnFP7lZySvUn37CHyXQdfTwzg==",
-      "dev": true,
       "dependencies": {
         "@babel/helper-string-parser": "^7.23.4",
         "@babel/helper-validator-identifier": "^7.22.20",
@@ -933,7 +925,6 @@
       "version": "0.3.3",
       "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.3.tgz",
       "integrity": "sha512-HLhSWOLRi875zjjMG/r+Nv0oCW8umGb0BgEhyX3dDX3egwZtB8PqLnjz3yedt8R5StBrzcg4aBpnh8UA9D1BoQ==",
-      "dev": true,
       "dependencies": {
         "@jridgewell/set-array": "^1.0.1",
         "@jridgewell/sourcemap-codec": "^1.4.10",
@@ -947,7 +938,6 @@
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.1.tgz",
       "integrity": "sha512-dSYZh7HhCDtCKm4QakX0xFpsRDqjjtZf/kjI/v3T3Nwt5r8/qz/M19F9ySyOqU94SXBmeG9ttTul+YnR4LOxFA==",
-      "dev": true,
       "engines": {
         "node": ">=6.0.0"
       }
@@ -956,7 +946,6 @@
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.1.2.tgz",
       "integrity": "sha512-xnkseuNADM0gt2bs+BvhO0p78Mk762YnZdsuzFV018NoG1Sj1SCQvpSqa7XUaTam5vAGasABV9qXASMKnFMwMw==",
-      "dev": true,
       "engines": {
         "node": ">=6.0.0"
       }
@@ -964,14 +953,12 @@
     "node_modules/@jridgewell/sourcemap-codec": {
       "version": "1.4.15",
       "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz",
-      "integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==",
-      "dev": true
+      "integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg=="
     },
     "node_modules/@jridgewell/trace-mapping": {
       "version": "0.3.20",
       "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.20.tgz",
       "integrity": "sha512-R8LcPeWZol2zR8mmH3JeKQ6QRCFb7XgUhV9ZlGhHLGyg4wpPiPZNQOOWhFZhxKw8u//yTbNGI42Bx/3paXEQ+Q==",
-      "dev": true,
       "dependencies": {
         "@jridgewell/resolve-uri": "^3.1.0",
         "@jridgewell/sourcemap-codec": "^1.4.14"
@@ -1764,7 +1751,6 @@
       "version": "3.2.1",
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
       "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
-      "dev": true,
       "dependencies": {
         "color-convert": "^1.9.0"
       },
@@ -1976,7 +1962,6 @@
       "version": "4.22.2",
       "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.22.2.tgz",
       "integrity": "sha512-0UgcrvQmBDvZHFGdYUehrCNIazki7/lUP3kkoi/r3YB2amZbFM9J43ZRkJTXBUZK4gmx56+Sqk9+Vs9mwZx9+A==",
-      "dev": true,
       "funding": [
         {
           "type": "opencollective",
@@ -2040,7 +2025,6 @@
       "version": "1.0.30001571",
       "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001571.tgz",
       "integrity": "sha512-tYq/6MoXhdezDLFZuCO/TKboTzuQ/xR5cFdgXPfDtM7/kchBO3b4VWghE/OAi/DV7tTdhmLjZiZBZi1fA/GheQ==",
-      "dev": true,
       "funding": [
         {
           "type": "opencollective",
@@ -2060,7 +2044,6 @@
       "version": "2.4.2",
       "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
       "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
-      "dev": true,
       "dependencies": {
         "ansi-styles": "^3.2.1",
         "escape-string-regexp": "^1.0.5",
@@ -2113,7 +2096,6 @@
       "version": "1.9.3",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
       "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
-      "dev": true,
       "dependencies": {
         "color-name": "1.1.3"
       }
@@ -2121,8 +2103,7 @@
     "node_modules/color-name": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
-      "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==",
-      "dev": true
+      "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw=="
     },
     "node_modules/commander": {
       "version": "4.1.1",
@@ -2142,8 +2123,7 @@
     "node_modules/convert-source-map": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-2.0.0.tgz",
-      "integrity": "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==",
-      "dev": true
+      "integrity": "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg=="
     },
     "node_modules/cross-spawn": {
       "version": "7.0.3",
@@ -2181,7 +2161,6 @@
       "version": "4.3.4",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
       "integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==",
-      "dev": true,
       "dependencies": {
         "ms": "2.1.2"
       },
@@ -2276,8 +2255,7 @@
     "node_modules/electron-to-chromium": {
       "version": "1.4.616",
       "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.616.tgz",
-      "integrity": "sha512-1n7zWYh8eS0L9Uy+GskE0lkBUNK83cXTVJI0pU3mGprFsbfSdAc15VTFbo+A+Bq4pwstmL30AVcEU3Fo463lNg==",
-      "dev": true
+      "integrity": "sha512-1n7zWYh8eS0L9Uy+GskE0lkBUNK83cXTVJI0pU3mGprFsbfSdAc15VTFbo+A+Bq4pwstmL30AVcEU3Fo463lNg=="
     },
     "node_modules/emoji-regex": {
       "version": "9.2.2",
@@ -2448,7 +2426,6 @@
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.1.tgz",
       "integrity": "sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==",
-      "dev": true,
       "engines": {
         "node": ">=6"
       }
@@ -2457,7 +2434,6 @@
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
       "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==",
-      "dev": true,
       "engines": {
         "node": ">=0.8.0"
       }
@@ -2964,7 +2940,6 @@
       "version": "1.0.0-beta.2",
       "resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz",
       "integrity": "sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==",
-      "dev": true,
       "engines": {
         "node": ">=6.9.0"
       }
@@ -3036,7 +3011,6 @@
       "version": "11.12.0",
       "resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz",
       "integrity": "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==",
-      "dev": true,
       "engines": {
         "node": ">=4"
       }
@@ -3107,7 +3081,6 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
       "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==",
-      "dev": true,
       "engines": {
         "node": ">=4"
       }
@@ -3647,7 +3620,6 @@
       "version": "2.5.2",
       "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-2.5.2.tgz",
       "integrity": "sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA==",
-      "dev": true,
       "bin": {
         "jsesc": "bin/jsesc"
       },
@@ -3677,7 +3649,6 @@
       "version": "2.2.3",
       "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz",
       "integrity": "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==",
-      "dev": true,
       "bin": {
         "json5": "lib/cli.js"
       },
@@ -3773,7 +3744,6 @@
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz",
       "integrity": "sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==",
-      "dev": true,
       "dependencies": {
         "yallist": "^3.0.2"
       }
@@ -3824,8 +3794,7 @@
     "node_modules/ms": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
-      "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
-      "dev": true
+      "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
     },
     "node_modules/mz": {
       "version": "2.7.0",
@@ -3865,8 +3834,7 @@
     "node_modules/node-releases": {
       "version": "2.0.14",
       "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.14.tgz",
-      "integrity": "sha512-y10wOWt8yZpqXmOgRo77WaHEmhYQYGNA6y421PKsKYWEK8aW+cqAphborZDhqfyKrbZEN92CN1X2KbafY2s7Yw==",
-      "dev": true
+      "integrity": "sha512-y10wOWt8yZpqXmOgRo77WaHEmhYQYGNA6y421PKsKYWEK8aW+cqAphborZDhqfyKrbZEN92CN1X2KbafY2s7Yw=="
     },
     "node_modules/normalize-path": {
       "version": "3.0.0",
@@ -4130,8 +4098,7 @@
     "node_modules/picocolors": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
-      "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==",
-      "dev": true
+      "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ=="
     },
     "node_modules/picomatch": {
       "version": "2.3.1",
@@ -4656,7 +4623,6 @@
       "version": "6.3.1",
       "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
       "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
-      "dev": true,
       "bin": {
         "semver": "bin/semver.js"
       }
@@ -4994,7 +4960,6 @@
       "version": "5.5.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
       "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
-      "dev": true,
       "dependencies": {
         "has-flag": "^3.0.0"
       },
@@ -5099,7 +5064,6 @@
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
       "integrity": "sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==",
-      "dev": true,
       "engines": {
         "node": ">=4"
       }
@@ -5255,7 +5219,6 @@
       "version": "1.0.13",
       "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.0.13.tgz",
       "integrity": "sha512-xebP81SNcPuNpPP3uzeW1NYXxI3rxyJzF3pD6sH4jE7o/IX+WtSpwnVU+qIsDPyk0d3hmFQ7mjqc6AtV604hbg==",
-      "dev": true,
       "funding": [
         {
           "type": "opencollective",
@@ -5578,8 +5541,7 @@
     "node_modules/yallist": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",
-      "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==",
-      "dev": true
+      "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g=="
     },
     "node_modules/yaml": {
       "version": "2.3.4",
diff --git a/package.json b/package.json
index 20357e5..908be64 100644
--- a/package.json
+++ b/package.json
@@ -10,6 +10,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@babel/plugin-syntax-import-attributes": "^7.23.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-icons": "^5.0.1",
diff --git a/public/about_graphic.svg b/public/about_graphic.svg
new file mode 100644
index 0000000..d48ea4e
--- /dev/null
+++ b/public/about_graphic.svg
@@ -0,0 +1,93 @@
+<svg width="512" height="320" viewBox="0 0 512 320" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_241_1360)">
+<rect x="0.96225" y="0.084186" width="324.103" height="202.947" transform="matrix(0.984808 -0.173648 0.939693 0.34202 -0.064246 236.676)" stroke="#333333"/>
+<rect x="0.96225" y="0.084186" width="324.103" height="162.561" transform="matrix(0.984808 -0.173648 0.939693 0.34202 18.9109 243.582)" stroke="#333333"/>
+<rect x="0.96225" y="0.084186" width="324.103" height="122.176" transform="matrix(0.984808 -0.173648 0.939693 0.34202 37.8857 250.489)" stroke="#333333"/>
+<rect x="0.96225" y="0.084186" width="324.103" height="81.7903" transform="matrix(0.984808 -0.173648 0.939693 0.34202 56.8608 257.395)" stroke="#333333"/>
+<rect x="0.96225" y="0.084186" width="324.103" height="41.4048" transform="matrix(0.984808 -0.173648 0.939693 0.34202 75.8422 264.304)" stroke="#333333"/>
+<rect x="0.96225" y="0.084186" width="283.718" height="202.947" transform="matrix(0.984808 -0.173648 0.939693 0.34202 19.8217 233.17)" stroke="#333333"/>
+<rect x="0.96225" y="0.084186" width="243.332" height="202.947" transform="matrix(0.984808 -0.173648 0.939693 0.34202 39.7077 229.663)" stroke="#333333"/>
+<rect x="0.96225" y="0.084186" width="202.947" height="202.947" transform="matrix(0.984808 -0.173648 0.939693 0.34202 59.5937 226.157)" stroke="#333333"/>
+<rect x="0.96225" y="0.084186" width="162.561" height="202.947" transform="matrix(0.984808 -0.173648 0.939693 0.34202 79.4797 222.65)" stroke="#333333"/>
+<rect x="0.96225" y="0.084186" width="122.176" height="202.947" transform="matrix(0.984808 -0.173648 0.939693 0.34202 99.3657 219.144)" stroke="#333333"/>
+<rect x="0.96225" y="0.084186" width="81.7903" height="202.947" transform="matrix(0.984808 -0.173648 0.939693 0.34202 119.252 215.637)" stroke="#333333"/>
+<rect x="0.96225" y="0.084186" width="41.4048" height="202.947" transform="matrix(0.984808 -0.173648 0.939693 0.34202 139.138 212.131)" stroke="#333333"/>
+<line y1="-0.5" x2="203.947" y2="-0.5" transform="matrix(0.939693 0.34202 -0.984808 0.173648 159.088 208.402)" stroke="#333333"/>
+<line y1="-0.5" x2="325.103" y2="-0.5" transform="matrix(0.984808 -0.173648 0.939693 0.34202 96.7793 271.678)" stroke="#333333"/>
+<rect width="163.484" height="98.1296" rx="16" transform="matrix(0.984808 -0.173648 0 1 147 83.3887)" fill="#365486"/>
+<rect x="0.492404" y="0.413176" width="162.605" height="97.035" rx="15.5" transform="matrix(0.984808 -0.173648 0 1 150.888 79.4953)" fill="#ABB2BF" stroke="#333333"/>
+<path d="M151.373 98.523C151.373 95.1544 151.373 92.658 151.532 90.654C151.69 88.6559 152.004 87.1919 152.607 85.8844C153.693 83.5291 155.425 81.4643 157.556 79.986C158.739 79.1654 160.127 78.6022 162.067 78.0991C164.013 77.5946 166.471 77.1607 169.788 76.5757L293.091 54.8341C296.409 54.2492 298.867 53.8161 300.813 53.6344C302.753 53.4532 304.141 53.5272 305.324 53.9307C307.455 54.6575 309.187 56.1112 310.273 58.0836C310.876 59.1786 311.189 60.532 311.348 62.4741C311.507 64.422 311.507 66.9183 311.507 70.2869V72.5869L151.373 100.823V98.523Z" fill="#F2F2F2" stroke="#333333"/>
+<circle cx="5.40384" cy="5.40384" r="5.40384" transform="matrix(0.984808 -0.173648 0 1 176.425 79.9492)" fill="#FFBD44"/>
+<circle cx="5.40384" cy="5.40384" r="5.40384" transform="matrix(0.984808 -0.173648 0 1 191.325 77.3218)" fill="#00CA4E"/>
+<circle cx="5.40384" cy="5.40384" r="5.40384" transform="matrix(0.984808 -0.173648 0 1 161.524 82.5767)" fill="#FF605C"/>
+<rect x="0.492404" y="0.413176" width="119" height="19" rx="9.5" transform="matrix(0.984808 -0.173648 0 1 172.612 121.665)" fill="white" stroke="#333333"/>
+<path d="M282.77 115.8L280.852 114.191C280.765 114.118 280.648 114.09 280.525 114.112L280.211 114.167C280.742 113.384 281.058 112.461 281.058 111.518C281.058 109.274 279.267 107.772 277.056 108.162C274.846 108.551 273.055 110.685 273.055 112.929C273.055 115.173 274.846 116.675 277.056 116.286C277.986 116.122 278.84 115.651 279.519 114.992V115.311C279.519 115.436 279.567 115.546 279.653 115.619L281.571 117.228C281.752 117.38 282.044 117.328 282.223 117.113L282.768 116.464C282.948 116.249 282.948 115.952 282.77 115.8ZM277.056 114.723C275.697 114.963 274.594 114.041 274.594 112.658C274.594 111.277 275.695 109.964 277.056 109.724C278.416 109.484 279.519 110.407 279.519 111.79C279.519 113.17 278.418 114.483 277.056 114.723Z" fill="#282C34"/>
+<path d="M83 123.32L158.642 109.983L170.279 119.748L158.642 133.616L83 146.954V123.32Z" fill="#365486"/>
+<path d="M113.548 103.47C113.548 101.261 115.311 99.1595 117.487 98.7759L124.155 97.6001C126.33 97.2165 128.094 98.6964 128.094 100.906V244.614L113.548 247.179V103.47Z" fill="#365486"/>
+<path d="M116.95 99.9166C116.95 97.9836 118.493 96.1445 120.397 95.8088L127.065 94.6331C128.968 94.2974 130.511 95.5923 130.511 97.5253V240.734L116.95 243.125V99.9166Z" fill="#E5E5E5" stroke="#333333"/>
+<path d="M86.4023 120.267L161.348 107.052L172.492 116.403L161.348 129.685L86.4023 142.9V120.267Z" fill="#FF605C" stroke="#333333"/>
+<rect width="9.98174" height="13.0935" transform="matrix(0.688671 -0.836264 0.688671 0.593402 151.7 198.525)" fill="#365486"/>
+<rect width="14.8003" height="6.52501" transform="matrix(0.688671 -0.836264 0.688671 0.593402 156.666 206.711)" fill="#365486"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M262.94 185.96L262.94 185.96C262.94 182.305 260.085 169.256 256.564 169.877C254.25 170.285 252.223 176.496 251.106 181.743C248.501 181.576 245.598 181.738 242.537 182.278C239.477 182.817 236.573 183.679 233.968 184.765C232.851 179.912 230.824 174.416 228.51 174.824C224.989 175.445 222.134 189.5 222.134 193.155V193.155V196.464V212.347L205.077 215.355C189.848 218.04 177.503 232.753 177.503 248.217V255.949C175.046 256.32 172.652 255.962 170.597 254.909C168.363 253.764 166.638 251.853 165.658 249.435C164.678 247.018 164.489 244.21 165.117 241.393C165.746 238.577 167.161 235.887 169.17 233.69L169.112 233.632C170.967 231.377 172.507 228.871 173.667 226.212C175.122 222.875 175.946 219.369 176.086 215.916C176.227 212.464 175.681 209.139 174.484 206.152C173.286 203.165 171.463 200.581 169.129 198.563L161.522 207.778C162.807 208.89 163.811 210.313 164.47 211.957C165.13 213.602 165.43 215.433 165.353 217.334C165.275 219.236 164.822 221.166 164.02 223.004C163.437 224.343 162.678 225.611 161.771 226.768C161.443 227.134 161.124 227.507 160.814 227.887C160.776 227.929 160.737 227.97 160.697 228.011L160.706 228.021C157.711 231.736 155.588 236.086 154.578 240.615C153.428 245.768 153.774 250.905 155.567 255.329C157.361 259.752 160.516 263.248 164.604 265.343C168.437 267.306 172.916 267.949 177.503 267.203V267.205L177.749 267.162C177.797 267.154 177.846 267.145 177.894 267.136L239.304 256.308C252.358 254.007 262.939 241.396 262.939 228.141V207.138L262.94 207.138V189.269V185.96Z" fill="#365486"/>
+<mask id="path-30-inside-1_241_1360" fill="white">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M264.891 183.226L264.89 183.276V202.419L264.891 202.419V225.407C264.891 238.662 254.309 251.273 241.256 253.574L179.859 264.4C179.801 264.411 179.744 264.421 179.687 264.431L179.454 264.472V264.47C174.868 265.215 170.388 264.573 166.555 262.609C162.467 260.515 159.312 257.018 157.518 252.595C155.725 248.171 155.379 243.034 156.529 237.881C157.539 233.352 159.662 229.003 162.657 225.287L162.648 225.278C162.688 225.236 162.727 225.195 162.766 225.153C163.075 224.773 163.394 224.4 163.721 224.034C164.628 222.878 165.388 221.609 165.971 220.27C166.773 218.432 167.226 216.502 167.304 214.601C167.381 212.699 167.081 210.868 166.421 209.224C165.762 207.579 164.758 206.156 163.473 205.045L171.08 195.829C173.414 197.847 175.237 200.431 176.435 203.418C177.632 206.405 178.178 209.73 178.037 213.182C177.897 216.635 177.073 220.141 175.618 223.478C174.458 226.137 172.918 228.644 171.063 230.898L171.121 230.957C169.112 233.154 167.697 235.843 167.068 238.659C166.44 241.476 166.629 244.284 167.609 246.702C168.589 249.12 170.314 251.03 172.548 252.175C174.603 253.228 176.998 253.586 179.454 253.215V245.483C179.454 230.019 191.8 215.306 207.029 212.621L224.085 209.614V190.422V190.421C224.085 186.766 226.94 172.711 230.461 172.09C232.55 171.722 234.405 176.167 235.568 180.607C238.255 178.695 241.295 177.35 244.514 176.782C247.714 176.218 250.738 176.485 253.413 177.436C254.577 172.594 256.429 167.511 258.515 167.144C262.036 166.523 264.891 179.571 264.891 183.226Z"/>
+</mask>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M264.891 183.226L264.89 183.276V202.419L264.891 202.419V225.407C264.891 238.662 254.309 251.273 241.256 253.574L179.859 264.4C179.801 264.411 179.744 264.421 179.687 264.431L179.454 264.472V264.47C174.868 265.215 170.388 264.573 166.555 262.609C162.467 260.515 159.312 257.018 157.518 252.595C155.725 248.171 155.379 243.034 156.529 237.881C157.539 233.352 159.662 229.003 162.657 225.287L162.648 225.278C162.688 225.236 162.727 225.195 162.766 225.153C163.075 224.773 163.394 224.4 163.721 224.034C164.628 222.878 165.388 221.609 165.971 220.27C166.773 218.432 167.226 216.502 167.304 214.601C167.381 212.699 167.081 210.868 166.421 209.224C165.762 207.579 164.758 206.156 163.473 205.045L171.08 195.829C173.414 197.847 175.237 200.431 176.435 203.418C177.632 206.405 178.178 209.73 178.037 213.182C177.897 216.635 177.073 220.141 175.618 223.478C174.458 226.137 172.918 228.644 171.063 230.898L171.121 230.957C169.112 233.154 167.697 235.843 167.068 238.659C166.44 241.476 166.629 244.284 167.609 246.702C168.589 249.12 170.314 251.03 172.548 252.175C174.603 253.228 176.998 253.586 179.454 253.215V245.483C179.454 230.019 191.8 215.306 207.029 212.621L224.085 209.614V190.422V190.421C224.085 186.766 226.94 172.711 230.461 172.09C232.55 171.722 234.405 176.167 235.568 180.607C238.255 178.695 241.295 177.35 244.514 176.782C247.714 176.218 250.738 176.485 253.413 177.436C254.577 172.594 256.429 167.511 258.515 167.144C262.036 166.523 264.891 179.571 264.891 183.226Z" fill="white"/>
+<path d="M264.89 183.276L263.906 183.446V183.449L264.89 183.276ZM264.891 183.226L265.875 183.056V183.053L264.891 183.226ZM264.89 202.419L263.906 202.592V203.592L264.89 203.419V202.419ZM264.891 202.419L265.876 202.245V201.245L264.891 201.419V202.419ZM179.859 264.4V263.4L179.855 263.401L179.859 264.4ZM179.687 264.431L179.69 263.43L179.687 263.431V264.431ZM179.454 264.472L178.47 264.645V265.645L179.454 265.472V264.472ZM179.454 264.47L180.439 264.296V263.309L179.468 263.467L179.454 264.47ZM166.555 262.609L166.002 263.534L166.555 262.609ZM157.518 252.595L156.599 253.116L157.518 252.595ZM156.529 237.881L157.488 237.942L157.488 237.942L156.529 237.881ZM162.657 225.287L163.37 225.852L163.974 225.102L163.416 224.516L162.657 225.287ZM162.648 225.278L162.005 224.634L161.275 225.403L161.889 226.049L162.648 225.278ZM162.766 225.153L163.418 225.787L163.447 225.756L163.474 225.723L162.766 225.153ZM163.721 224.034L164.391 224.65L164.419 224.619L164.445 224.586L163.721 224.034ZM165.971 220.27L166.859 220.546L166.859 220.546L165.971 220.27ZM167.304 214.601L166.32 214.732L167.304 214.601ZM166.421 209.224L165.501 209.741V209.741L166.421 209.224ZM163.473 205.045L162.77 204.468L162.095 205.286L162.768 205.867L163.473 205.045ZM171.08 195.829L171.785 195.007L171.082 194.399L170.377 195.253L171.08 195.829ZM178.037 213.182L179.021 213.051L178.037 213.182ZM175.618 223.478L176.506 223.754L175.618 223.478ZM171.063 230.898L170.359 230.323L169.726 231.092L170.318 231.683L171.063 230.898ZM171.121 230.957L171.781 231.582L172.497 230.801L171.867 230.171L171.121 230.957ZM167.068 238.659L168.027 238.72L168.027 238.72L167.068 238.659ZM167.609 246.702L168.528 246.181L167.609 246.702ZM172.548 252.175L171.995 253.1L172.548 252.175ZM179.454 253.215L179.43 254.219L180.439 254.066V253.041L179.454 253.215ZM224.085 209.614V210.614L225.07 210.44V209.44L224.085 209.614ZM224.085 190.421L223.1 190.595V190.595L224.085 190.421ZM235.568 180.607L234.614 181.021L234.922 182.197L236.027 181.411L235.568 180.607ZM253.413 177.436L252.957 178.402L254.06 178.794L254.368 177.514L253.413 177.436ZM265.875 183.106L265.875 183.056L263.906 183.396L263.906 183.446L265.875 183.106ZM265.875 202.245V183.102L263.906 183.449V202.592L265.875 202.245ZM264.891 201.419L264.89 201.419V203.419L264.891 203.419V201.419ZM265.876 225.233V202.245L263.906 202.592V225.581L265.876 225.233ZM241.256 254.574C254.853 252.177 265.876 239.04 265.876 225.233L263.906 225.581C263.906 238.283 253.765 250.369 241.256 252.574V254.574ZM179.859 265.4L241.256 254.574V252.574L179.859 263.4V265.4ZM179.683 265.431C179.743 265.421 179.802 265.41 179.862 265.4L179.855 263.401C179.8 263.411 179.745 263.421 179.69 263.43L179.683 265.431ZM179.454 265.472L179.687 265.431V263.431L179.454 263.472V265.472ZM178.47 264.643V264.645L180.439 264.298V264.296L178.47 264.643ZM166.002 263.534C169.994 265.579 174.661 266.249 179.441 265.472L179.468 263.467C175.075 264.181 170.782 263.567 167.108 261.684L166.002 263.534ZM156.599 253.116C158.464 257.715 161.745 261.353 166.002 263.534L167.108 261.684C163.188 259.676 160.16 256.322 158.438 252.074L156.599 253.116ZM155.571 237.821C154.376 243.177 154.734 248.517 156.599 253.116L158.438 252.074C156.715 247.826 156.383 242.892 157.488 237.942L155.571 237.821ZM161.945 224.722C158.827 228.589 156.621 233.113 155.571 237.821L157.488 237.942C158.458 233.591 160.496 229.416 163.37 225.852L161.945 224.722ZM161.889 226.049L161.898 226.058L163.416 224.516L163.407 224.507L161.889 226.049ZM162.113 224.519C162.077 224.558 162.041 224.596 162.005 224.634L163.292 225.921C163.334 225.876 163.377 225.832 163.418 225.787L162.113 224.519ZM163.052 223.419C162.711 223.799 162.38 224.187 162.058 224.583L163.474 225.723C163.771 225.359 164.076 225.001 164.391 224.65L163.052 223.419ZM165.083 219.994C164.542 221.236 163.838 222.412 162.998 223.483L164.445 224.586C165.419 223.344 166.233 221.982 166.859 220.546L165.083 219.994ZM166.32 214.732C166.248 216.498 165.827 218.29 165.083 219.994L166.859 220.546C167.719 218.575 168.205 216.506 168.288 214.469L166.32 214.732ZM165.501 209.741C166.113 211.267 166.392 212.967 166.32 214.732L168.288 214.469C168.371 212.431 168.049 210.469 167.342 208.706L165.501 209.741ZM162.768 205.867C163.958 206.896 164.889 208.215 165.501 209.741L167.342 208.706C166.635 206.942 165.558 205.415 164.178 204.222L162.768 205.867ZM170.377 195.253L162.77 204.468L164.176 205.621L171.783 196.406L170.377 195.253ZM177.355 202.9C176.11 199.795 174.214 197.107 171.785 195.007L170.375 196.652C172.614 198.588 174.364 201.068 175.514 203.936L177.355 202.9ZM179.021 213.051C179.168 209.462 178.6 206.006 177.355 202.9L175.514 203.936C176.664 206.804 177.189 209.998 177.053 213.314L179.021 213.051ZM176.506 223.754C178.019 220.284 178.875 216.639 179.021 213.051L177.053 213.314C176.918 216.631 176.127 219.998 174.73 223.202L176.506 223.754ZM171.767 231.473C173.698 229.127 175.3 226.519 176.506 223.754L174.73 223.202C173.616 225.755 172.138 228.161 170.359 230.323L171.767 231.473ZM171.867 230.171L171.808 230.113L170.318 231.683L170.376 231.742L171.867 230.171ZM168.027 238.72C168.61 236.107 169.922 233.615 171.781 231.582L170.461 230.331C168.301 232.692 166.783 235.579 166.11 238.599L168.027 238.72ZM168.528 246.181C167.619 243.939 167.444 241.333 168.027 238.72L166.11 238.599C165.436 241.619 165.638 244.629 166.69 247.222L168.528 246.181ZM173.101 251.25C171.035 250.192 169.437 248.423 168.528 246.181L166.69 247.222C167.741 249.816 169.592 251.869 171.995 253.1L173.101 251.25ZM179.479 252.211C177.212 252.553 175 252.223 173.101 251.25L171.995 253.1C174.206 254.233 176.784 254.619 179.43 254.219L179.479 252.211ZM178.47 245.657V253.389L180.439 253.041V245.31L178.47 245.657ZM207.029 211.621C191.256 214.402 178.47 229.641 178.47 245.657L180.439 245.31C180.439 230.398 192.344 216.211 207.029 213.621V211.621ZM224.085 208.614L207.029 211.621V213.621L224.085 210.614V208.614ZM223.1 190.595V209.787L225.07 209.44V190.248L223.1 190.595ZM223.1 190.595V190.595L225.07 190.248V190.248L223.1 190.595ZM230.461 171.09C229.693 171.226 229.039 171.712 228.519 172.277C227.998 172.843 227.537 173.565 227.128 174.348C226.31 175.918 225.596 177.937 225.01 179.993C223.843 184.089 223.1 188.628 223.1 190.595L225.07 190.248C225.07 188.559 225.754 184.243 226.894 180.243C227.462 178.251 228.123 176.411 228.83 175.056C229.184 174.378 229.524 173.871 229.833 173.535C230.142 173.199 230.348 173.11 230.461 173.09V171.09ZM236.523 180.192C235.934 177.943 235.159 175.648 234.243 173.944C233.788 173.095 233.272 172.346 232.691 171.827C232.119 171.316 231.37 170.93 230.461 171.09V173.09C230.596 173.066 230.863 173.098 231.262 173.456C231.653 173.805 232.066 174.375 232.481 175.147C233.306 176.683 234.04 178.83 234.614 181.021L236.523 180.192ZM244.514 175.782C241.13 176.379 237.933 177.794 235.109 179.803L236.027 181.411C238.577 179.597 241.46 178.32 244.514 177.782V175.782ZM253.87 176.469C251.058 175.47 247.878 175.189 244.514 175.782V177.782C247.55 177.247 250.417 177.5 252.957 178.402L253.87 176.469ZM258.515 166.144C257.607 166.304 256.859 166.952 256.287 167.663C255.707 168.385 255.192 169.314 254.737 170.321C253.823 172.342 253.048 174.905 252.459 177.357L254.368 177.514C254.942 175.125 255.675 172.725 256.499 170.903C256.913 169.988 257.325 169.274 257.715 168.789C258.114 168.293 258.38 168.167 258.515 168.144V166.144ZM265.875 183.053C265.875 181.086 265.133 176.809 263.965 173.124C263.379 171.275 262.666 169.507 261.847 168.227C261.439 167.588 260.978 167.028 260.457 166.646C259.936 166.264 259.282 166.008 258.515 166.144V168.144C258.628 168.124 258.833 168.14 259.142 168.367C259.452 168.594 259.792 168.981 260.146 169.534C260.853 170.64 261.513 172.247 262.081 174.039C263.221 177.637 263.906 181.711 263.906 183.4L265.875 183.053Z" fill="#333333" mask="url(#path-30-inside-1_241_1360)"/>
+<rect x="0.688671" y="-0.121431" width="8.98174" height="12.0935" transform="matrix(0.688671 -0.836264 0.688671 0.593402 153.949 196.317)" fill="#D9D9D9" stroke="#333333"/>
+<rect x="0.688671" y="-0.121431" width="13.8003" height="5.52501" transform="matrix(0.688671 -0.836264 0.688671 0.593402 158.915 204.504)" fill="white" stroke="#333333"/>
+<mask id="mask0_241_1360" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="222" y="196" width="11" height="14">
+<ellipse cx="5.17938" cy="6.25047" rx="5.17938" ry="6.25047" transform="matrix(0.984808 -0.173648 0 1 222.518 197.389)" fill="#EFB5B5"/>
+<ellipse cx="5.17938" cy="6.25047" rx="5.17938" ry="6.25047" transform="matrix(0.984808 -0.173648 0 1 222.518 197.389)" fill="#EFB5B5"/>
+</mask>
+<g mask="url(#mask0_241_1360)">
+<rect width="7.76907" height="12.5009" transform="matrix(0.984808 -0.173648 0 1 225.068 196.94)" fill="#EFB5B5"/>
+<rect width="7.76907" height="12.5009" transform="matrix(0.984808 -0.173648 0 1 225.068 196.94)" fill="#EFB5B5"/>
+</g>
+<mask id="mask1_241_1360" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="256" y="190" width="11" height="14">
+<ellipse cx="5.17938" cy="6.48939" rx="5.17938" ry="6.48939" transform="matrix(-0.984808 0.173648 0 1 266.414 189.649)" fill="#EFB5B5"/>
+<ellipse cx="5.17938" cy="6.48939" rx="5.17938" ry="6.48939" transform="matrix(-0.984808 0.173648 0 1 266.414 189.649)" fill="#EFB5B5"/>
+</mask>
+<g mask="url(#mask1_241_1360)">
+<rect width="7.76907" height="12.9788" transform="matrix(-0.984808 0.173648 0 1 263.863 190.099)" fill="#EFB5B5"/>
+<rect width="7.76907" height="12.9788" transform="matrix(-0.984808 0.173648 0 1 263.863 190.099)" fill="#EFB5B5"/>
+</g>
+<ellipse cx="1.05894" cy="1.7924" rx="1.05894" ry="1.7924" transform="matrix(0.984808 -0.173648 0 1 240.342 190.662)" fill="#333333"/>
+<ellipse cx="1.05894" cy="1.7924" rx="1.05894" ry="1.7924" transform="matrix(0.984808 -0.173648 0 1 240.342 190.662)" fill="#333333"/>
+<ellipse cx="1.05894" cy="1.7924" rx="1.05894" ry="1.7924" transform="matrix(0.984808 -0.173648 0 1 240.342 190.662)" fill="#333333"/>
+<ellipse cx="1.05894" cy="1.7924" rx="1.05894" ry="1.7924" transform="matrix(0.984808 -0.173648 0 1 246.6 189.558)" fill="#333333"/>
+<ellipse cx="1.05894" cy="1.7924" rx="1.05894" ry="1.7924" transform="matrix(0.984808 -0.173648 0 1 246.6 189.558)" fill="#333333"/>
+<ellipse cx="1.05894" cy="1.7924" rx="1.05894" ry="1.7924" transform="matrix(0.984808 -0.173648 0 1 246.6 189.558)" fill="#333333"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M239.151 209.58L249.491 207.757L246.537 214.278L248.014 226.017L244.321 232.668L240.628 227.32L242.105 215.059L239.151 209.58Z" fill="#FFBD44"/>
+<circle cx="34.5632" cy="34.5632" r="34.5632" transform="matrix(0.984808 -0.173648 0 1 283 128.249)" fill="#365486"/>
+<circle cx="34.5632" cy="34.5632" r="34.0632" transform="matrix(0.984808 -0.173648 0 1 285.723 125.004)" fill="#FFBD44" stroke="#333333"/>
+<path d="M310.276 141.412C308.373 141.748 306.827 143.57 306.827 145.477V166.215C306.827 168.121 308.373 169.398 310.276 169.063L325.797 166.326C327.7 165.99 329.246 164.168 329.246 162.261V141.523C329.246 139.617 327.7 138.34 325.797 138.675L310.276 141.412ZM316.312 155.901L319.761 155.293C322.143 154.873 324.073 156.466 324.073 158.853C324.073 159.329 323.685 159.786 323.21 159.869L312.863 161.694C312.388 161.778 312 161.457 312 160.982C312 158.595 313.93 156.321 316.312 155.901ZM314.587 151.021C314.587 150.104 314.951 149.161 315.598 148.399C316.244 147.637 317.122 147.118 318.037 146.956C318.951 146.795 319.829 147.005 320.475 147.539C321.122 148.073 321.486 148.888 321.486 149.805C321.486 150.721 321.122 151.664 320.475 152.427C319.829 153.189 318.951 153.708 318.037 153.869C317.122 154.03 316.244 153.821 315.598 153.287C314.951 152.753 314.587 151.938 314.587 151.021ZM332.696 141.779C332.696 141.304 332.308 140.984 331.833 141.067C331.359 141.151 330.971 141.608 330.971 142.083V145.54C330.971 146.015 331.359 146.335 331.833 146.252C332.308 146.168 332.696 145.711 332.696 145.236V141.779ZM331.833 147.98C331.359 148.064 330.971 148.521 330.971 148.996V152.452C330.971 152.928 331.359 153.248 331.833 153.164C332.308 153.081 332.696 152.624 332.696 152.148V148.692C332.696 148.217 332.308 147.896 331.833 147.98ZM332.696 155.605C332.696 155.129 332.308 154.809 331.833 154.893C331.359 154.976 330.971 155.434 330.971 155.909V159.365C330.971 159.84 331.359 160.161 331.833 160.077C332.308 159.993 332.696 159.536 332.696 159.061V155.605Z" fill="white"/>
+<rect width="57.3471" height="57.3471" rx="4" transform="matrix(0.984808 -0.173648 0.939693 0.34202 273.312 232.939)" fill="#365486"/>
+<rect x="0.96225" y="0.084186" width="56.3471" height="56.3471" rx="3.5" transform="matrix(0.984808 -0.173648 0.939693 0.34202 273.442 230.944)" fill="#282C34" stroke="#333333"/>
+<mask id="path-46-inside-2_241_1360" fill="white">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M315.554 230.768C321.792 229.668 322.024 227.02 316.071 224.854C315.019 224.471 313.843 224.128 312.587 223.83L326.043 221.458C328.219 221.074 331.665 221.376 333.741 222.131L380.112 239.009C382.188 239.764 382.107 240.688 379.932 241.072L331.334 249.641C329.159 250.024 325.712 249.723 323.636 248.967L277.265 232.089C275.189 231.334 275.27 230.41 277.446 230.027L290.902 227.654C291.569 228.056 292.428 228.454 293.481 228.837C299.433 231.004 309.316 231.868 315.554 230.768Z"/>
+</mask>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M315.554 230.768C321.792 229.668 322.024 227.02 316.071 224.854C315.019 224.471 313.843 224.128 312.587 223.83L326.043 221.458C328.219 221.074 331.665 221.376 333.741 222.131L380.112 239.009C382.188 239.764 382.107 240.688 379.932 241.072L331.334 249.641C329.159 250.024 325.712 249.723 323.636 248.967L277.265 232.089C275.189 231.334 275.27 230.41 277.446 230.027L290.902 227.654C291.569 228.056 292.428 228.454 293.481 228.837C299.433 231.004 309.316 231.868 315.554 230.768Z" fill="#1A396D"/>
+<path d="M312.587 223.83L311.647 223.488L310.333 223.72L311.906 224.093L312.587 223.83ZM333.741 222.131L334.726 221.958L333.741 222.131ZM380.112 239.009L379.128 239.183L380.112 239.009ZM323.636 248.967L324.621 248.793L323.636 248.967ZM277.265 232.089L276.281 232.263L277.265 232.089ZM277.446 230.027L276.506 229.685L277.446 230.027ZM290.902 227.654L292.111 227.583L291.277 227.08L289.963 227.312L290.902 227.654ZM315.086 225.028C320.52 227.005 320.308 229.422 314.614 230.426L316.493 231.11C323.275 229.914 323.527 227.036 317.056 224.68L315.086 225.028ZM311.906 224.093C313.051 224.365 314.124 224.677 315.086 225.028L317.056 224.68C315.913 224.264 314.635 223.892 313.268 223.568L311.906 224.093ZM313.527 224.172L326.983 221.8L325.104 221.116L311.647 223.488L313.527 224.172ZM326.983 221.8C328.615 221.512 331.199 221.738 332.756 222.305L334.726 221.958C332.131 221.013 327.823 220.636 325.104 221.116L326.983 221.8ZM332.756 222.305L379.128 239.183L381.097 238.835L334.726 221.958L332.756 222.305ZM379.128 239.183C380.684 239.749 380.624 240.442 378.992 240.73L380.872 241.414C383.591 240.934 383.692 239.78 381.097 238.835L379.128 239.183ZM378.992 240.73L330.395 249.299L332.274 249.983L380.872 241.414L378.992 240.73ZM330.395 249.299C328.763 249.586 326.178 249.36 324.621 248.793L322.652 249.141C325.247 250.085 329.555 250.462 332.274 249.983L330.395 249.299ZM324.621 248.793L278.25 231.916L276.281 232.263L322.652 249.141L324.621 248.793ZM278.25 231.916C276.693 231.349 276.754 230.656 278.386 230.369L276.506 229.685C273.787 230.164 273.686 231.319 276.281 232.263L278.25 231.916ZM278.386 230.369L291.842 227.996L289.963 227.312L276.506 229.685L278.386 230.369ZM294.466 228.664C293.503 228.313 292.719 227.95 292.111 227.583L289.693 227.725C290.419 228.162 291.353 228.595 292.496 229.011L294.466 228.664ZM314.614 230.426C308.92 231.43 299.899 230.641 294.466 228.664L292.496 229.011C298.967 231.366 309.711 232.306 316.493 231.11L314.614 230.426Z" fill="#333333" mask="url(#path-46-inside-2_241_1360)"/>
+<rect width="38.7093" height="11.4694" rx="5.73471" transform="matrix(0.984808 -0.173648 0.939693 0.34202 314.68 240.749)" fill="#FFE978"/>
+<rect width="8.60206" height="2.86735" rx="1.43368" transform="matrix(0.984808 -0.173648 0.939693 0.34202 341.967 242.671)" fill="white"/>
+<rect width="14.3368" height="1.43368" rx="0.716839" transform="matrix(0.984808 -0.173648 0.939693 0.34202 323.65 237.53)" fill="white"/>
+<rect width="57.3471" height="57.3471" rx="4" transform="matrix(0.383022 -0.321394 1.3062 0.209374 312.106 226.183)" fill="#365486"/>
+<rect x="0.844612" y="-0.0560099" width="56.3471" height="56.3471" rx="3.5" transform="matrix(0.383022 -0.321394 1.3062 0.209374 310.752 224.85)" fill="#F2F2F2" stroke="#333333"/>
+<mask id="path-53-inside-3_241_1360" fill="white">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M340.335 218.484C342.762 216.448 338.021 213.723 329.747 212.396C328.284 212.162 326.809 211.987 325.358 211.869L330.591 207.477C331.437 206.767 334.463 206.567 337.348 207.029L401.805 217.361C404.691 217.824 406.344 218.774 405.498 219.484L386.597 235.344C385.751 236.054 382.726 236.255 379.84 235.792L315.383 225.46C312.497 224.998 310.844 224.047 311.69 223.337L316.924 218.946C318.146 219.256 319.498 219.534 320.961 219.769C329.235 221.095 337.909 220.52 340.335 218.484Z"/>
+</mask>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M340.335 218.484C342.762 216.448 338.021 213.723 329.747 212.396C328.284 212.162 326.809 211.987 325.358 211.869L330.591 207.477C331.437 206.767 334.463 206.567 337.348 207.029L401.805 217.361C404.691 217.824 406.344 218.774 405.498 219.484L386.597 235.344C385.751 236.054 382.726 236.255 379.84 235.792L315.383 225.46C312.497 224.998 310.844 224.047 311.69 223.337L316.924 218.946C318.146 219.256 319.498 219.534 320.961 219.769C329.235 221.095 337.909 220.52 340.335 218.484Z" fill="white"/>
+<path d="M325.358 211.869L324.052 211.66L323.54 212.088L325.357 212.236L325.358 211.869ZM330.591 207.477L331.898 207.687L330.591 207.477ZM337.348 207.029L336.965 207.351L337.348 207.029ZM401.805 217.361L402.188 217.04L401.805 217.361ZM311.69 223.337L310.384 223.128L311.69 223.337ZM316.924 218.946L317.658 218.696L316.129 218.308L315.618 218.736L316.924 218.946ZM329.364 212.718C336.917 213.928 341.244 216.416 339.029 218.275L341.641 218.693C344.279 216.48 339.125 213.517 330.13 212.075L329.364 212.718ZM325.357 212.236C326.68 212.344 328.026 212.503 329.364 212.718L330.13 212.075C328.542 211.821 326.938 211.63 325.359 211.502L325.357 212.236ZM326.664 212.078L331.898 207.687L329.285 207.268L324.052 211.66L326.664 212.078ZM331.898 207.687C332.532 207.154 334.801 207.004 336.965 207.351L337.731 206.708C334.124 206.13 330.343 206.381 329.285 207.268L331.898 207.687ZM336.965 207.351L401.422 217.683L402.188 217.04L337.731 206.708L336.965 207.351ZM401.422 217.683C403.587 218.03 404.827 218.742 404.192 219.275L406.804 219.694C407.862 218.806 405.795 217.618 402.188 217.04L401.422 217.683ZM404.192 219.275L385.291 235.135L387.903 235.554L406.804 219.694L404.192 219.275ZM385.291 235.135C384.656 235.667 382.387 235.818 380.223 235.471L379.457 236.114C383.064 236.692 386.846 236.441 387.903 235.554L385.291 235.135ZM380.223 235.471L315.766 225.139L315 225.782L379.457 236.114L380.223 235.471ZM315.766 225.139C313.602 224.792 312.362 224.079 312.996 223.547L310.384 223.128C309.326 224.015 311.393 225.204 315 225.782L315.766 225.139ZM312.996 223.547L318.23 219.155L315.618 218.736L310.384 223.128L312.996 223.547ZM321.344 219.447C320.006 219.233 318.772 218.979 317.658 218.696L316.19 219.195C317.519 219.533 318.99 219.836 320.578 220.09L321.344 219.447ZM339.029 218.275C336.814 220.133 328.896 220.658 321.344 219.447L320.578 220.09C329.573 221.532 339.004 220.907 341.641 218.693L339.029 218.275Z" fill="#333333" mask="url(#path-53-inside-3_241_1360)"/>
+<rect x="0.844612" y="-0.0560099" width="9.75258" height="2.58419" rx="0.5" transform="matrix(0.383022 -0.321394 1.3062 0.209374 372.966 226.453)" stroke="#365486"/>
+<rect x="0.844612" y="-0.0560099" width="8.67732" height="6.16839" rx="1.5" transform="matrix(0.383022 -0.321394 1.3062 0.209374 362.94 224.572)" fill="white" stroke="#365486"/>
+<rect x="0.844612" y="-0.0560099" width="8.67732" height="6.16839" rx="1.5" transform="matrix(0.383022 -0.321394 1.3062 0.209374 363.764 223.881)" fill="white" stroke="#365486"/>
+<rect width="2.86735" height="1.43368" rx="0.716839" transform="matrix(0.383022 -0.321394 1.3062 0.209374 368.288 223.102)" fill="#365486"/>
+<rect x="0.844612" y="-0.0560099" width="9.75258" height="2.58419" rx="0.5" transform="matrix(0.383022 -0.321394 1.3062 0.209374 373.927 225.647)" fill="white" stroke="#365486"/>
+</g>
+<defs>
+<clipPath id="clip0_241_1360">
+<rect width="512" height="320" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/public/members/AltheaTan.jpg b/public/members/AltheaTan.jpg
new file mode 100644
index 0000000..f8154ed
Binary files /dev/null and b/public/members/AltheaTan.jpg differ
diff --git a/public/members/ChloeOng.jpg b/public/members/ChloeOng.jpg
new file mode 100644
index 0000000..23e03fb
Binary files /dev/null and b/public/members/ChloeOng.jpg differ
diff --git a/public/members/DavianKho.jpg b/public/members/DavianKho.jpg
new file mode 100644
index 0000000..18564c0
Binary files /dev/null and b/public/members/DavianKho.jpg differ
diff --git a/public/members/EmilyTan.jpg b/public/members/EmilyTan.jpg
new file mode 100644
index 0000000..00f5983
Binary files /dev/null and b/public/members/EmilyTan.jpg differ
diff --git a/public/members/IvanYang.jpg b/public/members/IvanYang.jpg
new file mode 100644
index 0000000..bb13ec3
Binary files /dev/null and b/public/members/IvanYang.jpg differ
diff --git a/public/members/JamieHo.jpg b/public/members/JamieHo.jpg
new file mode 100644
index 0000000..a827ac2
Binary files /dev/null and b/public/members/JamieHo.jpg differ
diff --git a/public/members/JavianNg.jpg b/public/members/JavianNg.jpg
new file mode 100644
index 0000000..f9fb564
Binary files /dev/null and b/public/members/JavianNg.jpg differ
diff --git a/public/members/JoshuaLek.jpg b/public/members/JoshuaLek.jpg
new file mode 100644
index 0000000..be5f04c
Binary files /dev/null and b/public/members/JoshuaLek.jpg differ
diff --git a/public/members/KhooPynZhern.jpg b/public/members/KhooPynZhern.jpg
new file mode 100644
index 0000000..94751ca
Binary files /dev/null and b/public/members/KhooPynZhern.jpg differ
diff --git a/public/members/KongShiTing.jpg b/public/members/KongShiTing.jpg
new file mode 100644
index 0000000..fea48f1
Binary files /dev/null and b/public/members/KongShiTing.jpg differ
diff --git a/public/members/KooJay-Lynn.jpg b/public/members/KooJay-Lynn.jpg
new file mode 100644
index 0000000..f50112e
Binary files /dev/null and b/public/members/KooJay-Lynn.jpg differ
diff --git a/public/members/LeeYongNing.jpg b/public/members/LeeYongNing.jpg
new file mode 100644
index 0000000..a749879
Binary files /dev/null and b/public/members/LeeYongNing.jpg differ
diff --git a/public/members/MartinNg.jpg b/public/members/MartinNg.jpg
new file mode 100644
index 0000000..5295cce
Binary files /dev/null and b/public/members/MartinNg.jpg differ
diff --git a/public/members/MervynSeah.jpg b/public/members/MervynSeah.jpg
new file mode 100644
index 0000000..a606034
Binary files /dev/null and b/public/members/MervynSeah.jpg differ
diff --git a/public/members/NatashaKoh.jpg b/public/members/NatashaKoh.jpg
new file mode 100644
index 0000000..fd35bee
Binary files /dev/null and b/public/members/NatashaKoh.jpg differ
diff --git a/public/members/NatashaSanghar.jpg b/public/members/NatashaSanghar.jpg
new file mode 100644
index 0000000..742d0af
Binary files /dev/null and b/public/members/NatashaSanghar.jpg differ
diff --git a/public/members/NathanLoo.jpg b/public/members/NathanLoo.jpg
new file mode 100644
index 0000000..2acc6d1
Binary files /dev/null and b/public/members/NathanLoo.jpg differ
diff --git a/public/members/NgLeXuan.jpg b/public/members/NgLeXuan.jpg
new file mode 100644
index 0000000..2e71c1e
Binary files /dev/null and b/public/members/NgLeXuan.jpg differ
diff --git a/public/members/OpheliaTeo.jpg b/public/members/OpheliaTeo.jpg
new file mode 100644
index 0000000..691fefe
Binary files /dev/null and b/public/members/OpheliaTeo.jpg differ
diff --git a/public/members/Raeeda.jpg b/public/members/Raeeda.jpg
new file mode 100644
index 0000000..eb1eb67
Binary files /dev/null and b/public/members/Raeeda.jpg differ
diff --git a/public/members/RaysonYeap.jpg b/public/members/RaysonYeap.jpg
new file mode 100644
index 0000000..5f096c2
Binary files /dev/null and b/public/members/RaysonYeap.jpg differ
diff --git a/public/members/ReinaTng.jpg b/public/members/ReinaTng.jpg
new file mode 100644
index 0000000..c3ba034
Binary files /dev/null and b/public/members/ReinaTng.jpg differ
diff --git a/public/members/SeanKevinDias.jpg b/public/members/SeanKevinDias.jpg
new file mode 100644
index 0000000..437bd11
Binary files /dev/null and b/public/members/SeanKevinDias.jpg differ
diff --git a/public/members/TeoHongRui.jpg b/public/members/TeoHongRui.jpg
new file mode 100644
index 0000000..b3810da
Binary files /dev/null and b/public/members/TeoHongRui.jpg differ
diff --git a/public/members/TimothySoon.jpg b/public/members/TimothySoon.jpg
new file mode 100644
index 0000000..862d13d
Binary files /dev/null and b/public/members/TimothySoon.jpg differ
diff --git a/public/members/TohYiHui.jpg b/public/members/TohYiHui.jpg
new file mode 100644
index 0000000..d985b18
Binary files /dev/null and b/public/members/TohYiHui.jpg differ
diff --git a/public/members/TriciaAng.jpg b/public/members/TriciaAng.jpg
new file mode 100644
index 0000000..eba09fb
Binary files /dev/null and b/public/members/TriciaAng.jpg differ
diff --git a/public/members/VivienHe.jpg b/public/members/VivienHe.jpg
new file mode 100644
index 0000000..2e4c724
Binary files /dev/null and b/public/members/VivienHe.jpg differ
diff --git a/public/members/WangYuQing.jpg b/public/members/WangYuQing.jpg
new file mode 100644
index 0000000..d9234d9
Binary files /dev/null and b/public/members/WangYuQing.jpg differ
diff --git a/public/members/WanjariKimaya.jpg b/public/members/WanjariKimaya.jpg
new file mode 100644
index 0000000..2c2a297
Binary files /dev/null and b/public/members/WanjariKimaya.jpg differ
diff --git a/public/mission_icon.svg b/public/mission_icon.svg
new file mode 100644
index 0000000..c7356f6
--- /dev/null
+++ b/public/mission_icon.svg
@@ -0,0 +1,3 @@
+<svg width="96" height="96" viewBox="0 0 96 96" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M48 0C51.3188 0 54 2.68125 54 6V7.95C71.5687 10.5563 85.4438 24.45 88.05 42H90C93.3188 42 96 44.6812 96 48C96 51.3188 93.3188 54 90 54H88.05C85.4438 71.5687 71.55 85.4438 54 88.05V90C54 93.3188 51.3188 96 48 96C44.6812 96 42 93.3188 42 90V88.05C24.4313 85.4438 10.5563 71.5687 7.95 54H6C2.68125 54 0 51.3188 0 48C0 44.6812 2.68125 42 6 42H7.95C10.5563 24.4313 24.4313 10.5563 42 7.95V6C42 2.68125 44.6812 0 48 0ZM20.1375 54C22.4813 64.9312 31.0875 73.5188 42 75.8625V72C42 68.6812 44.6812 66 48 66C51.3188 66 54 68.6812 54 72V75.8625C64.9312 73.5188 73.5188 64.9125 75.8625 54H72C68.6812 54 66 51.3188 66 48C66 44.6812 68.6812 42 72 42H75.8625C73.5188 31.0688 64.9312 22.4813 54 20.1375V24C54 27.3188 51.3188 30 48 30C44.6812 30 42 27.3188 42 24V20.1375C31.0688 22.4813 22.4813 31.0688 20.1375 42H24C27.3188 42 30 44.6812 30 48C30 51.3188 27.3188 54 24 54H20.1375ZM48 42C49.5913 42 51.1174 42.6321 52.2426 43.7574C53.3679 44.8826 54 46.4087 54 48C54 49.5913 53.3679 51.1174 52.2426 52.2426C51.1174 53.3679 49.5913 54 48 54C46.4087 54 44.8826 53.3679 43.7574 52.2426C42.6321 51.1174 42 49.5913 42 48C42 46.4087 42.6321 44.8826 43.7574 43.7574C44.8826 42.6321 46.4087 42 48 42Z" fill="white"/>
+</svg>
diff --git a/public/vision_icon.svg b/public/vision_icon.svg
new file mode 100644
index 0000000..e746250
--- /dev/null
+++ b/public/vision_icon.svg
@@ -0,0 +1,3 @@
+<svg width="96" height="75" viewBox="0 0 96 75" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M47.9917 7.99931C37.1259 7.99931 28.1934 12.9322 21.344 19.2817C14.9279 25.2478 10.4949 32.3305 8.22845 37.3301C10.4949 42.3297 14.9279 49.4124 21.3273 55.3785C28.1934 61.728 37.1259 66.6609 47.9917 66.6609C58.8574 66.6609 67.7899 61.728 74.6394 55.3785C81.0555 49.4124 85.4884 42.3297 87.7549 37.3301C85.4884 32.3305 81.0555 25.2478 74.656 19.2817C67.79 12.9322 58.8574 7.99931 47.9917 7.99931ZM15.8945 13.4322C23.7438 6.1328 34.5262 0 47.9917 0C61.4572 0 72.2396 6.1328 80.0889 13.4322C87.8882 20.6815 93.1044 29.3308 95.5875 35.2803C96.1375 36.5968 96.1375 38.0634 95.5875 39.3799C93.1044 45.3294 87.8882 53.9953 80.0889 61.228C72.2396 68.5274 61.4572 74.6602 47.9917 74.6602C34.5262 74.6602 23.7438 68.5274 15.8945 61.228C8.09513 53.9953 2.87892 45.3294 0.412464 39.3799C-0.137488 38.0634 -0.137488 36.5968 0.412464 35.2803C2.87892 29.3308 8.09513 20.6649 15.8945 13.4322ZM47.9917 50.6623C55.3577 50.6623 61.3238 44.6961 61.3238 37.3301C61.3238 29.9641 55.3577 23.9979 47.9917 23.9979C47.875 23.9979 47.775 23.9979 47.6584 23.9979C47.875 24.8478 47.9917 25.7478 47.9917 26.6644C47.9917 32.5472 43.2088 37.3301 37.3259 37.3301C36.4093 37.3301 35.5094 37.2134 34.6595 36.9968C34.6595 37.1134 34.6595 37.2134 34.6595 37.3301C34.6595 44.6961 40.6256 50.6623 47.9917 50.6623ZM47.9917 15.9986C53.6491 15.9986 59.0749 18.246 63.0753 22.2465C67.0757 26.2469 69.3232 31.6726 69.3232 37.3301C69.3232 42.9876 67.0757 48.4133 63.0753 52.4137C59.0749 56.4142 53.6491 58.6616 47.9917 58.6616C42.3342 58.6616 36.9085 56.4142 32.908 52.4137C28.9076 48.4133 26.6602 42.9876 26.6602 37.3301C26.6602 31.6726 28.9076 26.2469 32.908 22.2465C36.9085 18.246 42.3342 15.9986 47.9917 15.9986Z" fill="white"/>
+</svg>
diff --git a/src/App.jsx b/src/App.jsx
index da28be7..8e60e98 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,5 +1,6 @@
-import { Routes, Route } from 'react-router-dom';
-import { Home, Privacy } from './pages';
+import { useEffect } from 'react';
+import { useLocation, Routes, Route } from 'react-router-dom';
+import { About, Home, Privacy } from './pages';
 import NavigationBar from './layout/NavigationBar';
 import Footer from './layout/Footer';
 import './App.css';
@@ -10,11 +11,15 @@ function App() {
       <NavigationBar />
 
       {/* Main content */}
+      <ScrollToTop />
       <main className='w-full min-h-[100vh]'>
         <Routes>
           <Route path='/' element={<Home />} />
           <Route path='/privacy' element={<Privacy />} />
         </Routes>
+        <Routes>
+          <Route path='/about' element={<About />} />
+        </Routes>
       </main>
 
       <Footer />
@@ -22,4 +27,17 @@ function App() {
   );
 }
 
+// this is needed so that the page automaticall scrolls to the top
+// when the route changes
+function ScrollToTop() {
+  const { pathname } = useLocation();
+
+  useEffect(() => {
+    window.scrollTo(0, 0);
+  }, [pathname]);
+
+  return null;
+}
+
+
 export default App;
diff --git a/src/layout/NavigationBar.css b/src/layout/NavigationBar.css
index 406f482..db23815 100644
--- a/src/layout/NavigationBar.css
+++ b/src/layout/NavigationBar.css
@@ -9,5 +9,6 @@
     md:px-20
     py-4
     bg-white
+    z-50
   ;
 }
diff --git a/src/layout/WindowCard.css b/src/layout/WindowCard.css
new file mode 100644
index 0000000..bc9acea
--- /dev/null
+++ b/src/layout/WindowCard.css
@@ -0,0 +1,35 @@
+.window {
+  @apply
+    rounded-2xl
+    border-outline
+    border-2
+    overflow-hidden
+    drop-shadow-window
+  ;
+}
+
+.action-bar {
+  @apply
+    flex
+    flex-row
+    p-2
+    bg-[#f2f2f2]
+    border-outline
+    border-b-2
+  ;
+}
+
+.action-button {
+  @apply
+    rounded-full
+    w-4
+    h-4
+    mx-1
+  ;
+}
+
+.window-content {
+  @apply
+    bg-white
+  ;
+}
diff --git a/src/layout/WindowCard.tsx b/src/layout/WindowCard.tsx
new file mode 100644
index 0000000..8ac4c94
--- /dev/null
+++ b/src/layout/WindowCard.tsx
@@ -0,0 +1,27 @@
+import React from 'react';
+import './WindowCard.css';
+
+interface WindowProps {
+  content: React.ReactNode;
+  heightClass?: string;
+  widthClass?: string;
+}
+
+function WindowCard(props: WindowProps) {
+  return (
+    <div className={
+      `window ${props.heightClass || ''} ${props.widthClass || ''}`
+    }>
+      <div className='action-bar'>
+        <div className='action-button bg-[#ff605c]'></div>
+        <div className='action-button bg-[#ffbd44]'></div>
+        <div className='action-button bg-[#00ca4e]'></div>
+      </div>
+      <div className='window-content'>
+        <div>{props.content}</div>
+      </div>
+    </div>
+  );
+}
+
+export default WindowCard;
diff --git a/src/pages/about/RoleCard.css b/src/pages/about/RoleCard.css
new file mode 100644
index 0000000..e0d7a2d
--- /dev/null
+++ b/src/pages/about/RoleCard.css
@@ -0,0 +1,40 @@
+.role-card {
+  @apply
+    w-48
+    p-4
+    flex
+    flex-col
+    items-start
+    gap-1
+  ;
+}
+
+.role-card>img {
+  @apply
+    rounded-md
+    w-32
+    h-32
+    object-cover
+    object-top
+    self-center
+  ;
+}
+
+.role-label {
+  @apply
+    h-20
+    m-2
+  ;
+}
+
+.role-label>h4 {
+  @apply
+    font-bold
+  ;
+}
+
+.role-label>p {
+  @apply
+    text-sm
+  ;
+}
diff --git a/src/pages/about/RoleCard.tsx b/src/pages/about/RoleCard.tsx
new file mode 100644
index 0000000..3d55c7f
--- /dev/null
+++ b/src/pages/about/RoleCard.tsx
@@ -0,0 +1,27 @@
+import React from 'react';
+import WindowCard from '../../layout/WindowCard';
+import './RoleCard.css';
+
+interface RoleCardProps {
+  name: string;
+  role: string;
+  imgSrc: string;
+}
+
+function RoleCard(props: RoleCardProps) {
+  const content = (
+    <div className='role-card'>
+      <img src={props.imgSrc}></img>
+      <div className='role-label'>
+        <h4>{props.name}</h4>
+        <p>{props.role}</p>
+      </div>
+    </div>
+  );
+
+  return (
+    <WindowCard content={content}></WindowCard>
+  );
+}
+
+export default RoleCard;
diff --git a/src/pages/about/RolesSection.css b/src/pages/about/RolesSection.css
new file mode 100644
index 0000000..5e39acc
--- /dev/null
+++ b/src/pages/about/RolesSection.css
@@ -0,0 +1,26 @@
+.wing {
+  @apply
+    my-8
+  ;
+}
+
+.wing>h1 {
+  @apply
+    text-3xl
+    text-primary
+    text-center
+    font-bold
+  ;
+}
+
+.member-container {
+  @apply
+    p-8
+    md:px-20
+    flex
+    flex-wrap
+    justify-center
+    gap-8
+    md:gap-16
+  ;
+}
diff --git a/src/pages/about/RolesSection.tsx b/src/pages/about/RolesSection.tsx
new file mode 100644
index 0000000..49245ca
--- /dev/null
+++ b/src/pages/about/RolesSection.tsx
@@ -0,0 +1,37 @@
+import React from 'react';
+import RoleCard from './RoleCard';
+import roles from './roles.json' with {type: 'json'};
+import './RolesSection.css';
+
+function RolesSection() {
+  return (
+    <>
+      {
+        Object.entries(roles).map((value) => {
+          const [wing, members] = value;
+          return (
+            <div className='wing' key={wing}>
+              <h1>{wing}</h1>
+              <div className='member-container'>
+                {
+                  members.map((member) => {
+                    const imgSrc: string =
+                      `members/${member.name.replace(/\s/g, '')}.jpg`;
+                    return <RoleCard
+                      name={member.name}
+                      role={member.role}
+                      imgSrc={imgSrc}
+                      key={member.name}
+                    ></RoleCard>;
+                  })
+                }
+              </div>
+            </div>
+          );
+        })
+      }
+    </>
+  );
+}
+
+export default RolesSection;
diff --git a/src/pages/about/index.css b/src/pages/about/index.css
new file mode 100644
index 0000000..1d4d25a
--- /dev/null
+++ b/src/pages/about/index.css
@@ -0,0 +1,140 @@
+section {
+  @apply
+    flex
+    flex-col
+    md:flex-row
+    items-center
+    justify-center
+    md:justify-around
+    h-[80vh]
+    px-8
+    md:px-20
+    gap-8
+    lg:gap-16
+  ;
+}
+
+.section-description {
+  @apply
+    w-96
+    max-w-full
+    lg:w-[32rem]
+  ;
+}
+
+.section-description>h1 {
+  @apply
+    text-5xl
+    lg:text-6xl
+    text-primary
+    font-heading
+    pb-4
+  ;
+}
+
+.section-description>h2 {
+  @apply
+    text-3xl
+    md:text-4xl
+    text-primary
+    font-subheading
+  ;
+}
+
+.section-description>p {
+  @apply
+    font-body
+  ;
+}
+
+.section-description>p>span {
+  @apply
+    text-highlight
+    font-bold
+  ;
+}
+
+.section-graphic {
+  @apply
+    w-80
+    lg:w-[24rem]
+  ;
+}
+
+.banner {
+  @apply
+    flex
+    flex-col
+    items-center
+    justify-center
+    p-20
+    bg-primary
+    text-white
+  ;
+}
+
+.banner>h1 {
+  @apply
+    text-3xl
+    text-center
+    font-bold
+  ;
+}
+
+.banner>p {
+  @apply
+    w-4/5
+    md:w-3/5
+    text-center
+  ;
+}
+
+.icon-section {
+  @apply
+    h-fit
+    p-20
+    justify-center
+    md:items-start
+    gap-20
+    md:gap-40
+    bg-slate-100
+  ;
+}
+
+.icon-container {
+  @apply
+    flex
+    flex-col
+    items-center
+    justify-center
+    w-64
+  ;
+}
+
+.icon-container>h3 {
+  @apply
+    my-4
+    text-2xl
+    text-primary
+    font-bold
+  ;
+}
+
+.icon-container>p {
+  @apply
+    text-center
+  ;
+}
+
+.icon-bubble {
+  @apply
+    flex
+    flex-col
+    items-center
+    justify-center
+    w-40
+    h-40
+    rounded-full
+    bg-primary
+  ;
+}
diff --git a/src/pages/about/index.tsx b/src/pages/about/index.tsx
new file mode 100644
index 0000000..004d2d8
--- /dev/null
+++ b/src/pages/about/index.tsx
@@ -0,0 +1,74 @@
+import React from 'react';
+// import { Link } from 'react-router-dom';
+import './index.css';
+import RolesSection from './RolesSection';
+
+function About() {
+  return (
+    <div>
+      <section>
+        <img src='about_graphic.svg' className='section-graphic'></img>
+        <div className='section-description'>
+          <h1>About Us</h1>
+          <p>
+            Colloquially known as <span>Computing Club</span>,
+            we are a constituent club of the NUS Students&#39; Union.
+            Find out more about what we do and meet the
+            <span> 26th Management Committee</span> below!
+          </p>
+        </div>
+      </section>
+
+      <div className='banner gap-4'>
+        <h1>Who are we?</h1>
+        <p>
+          Established when the NUS School of Computing (SoC) gained
+          independence as a separate faculty in 1998, the NUS Students&#39;
+          Computing Club is the official faculty club and sole union
+          representative of all undergraduates in SoC.
+        </p>
+        <p>
+          The club has since been taking care of the student life in SoC by
+          organising various events and activities to promote campus vibrancy.
+          We safeguard the interest of our undergraduates, ensure their voices
+          are heard, provide welfare, and form the bridge between our students
+          and the school.
+        </p>
+      </div>
+
+      <section className='icon-section'>
+        <div className='icon-container'>
+          <div className='icon-bubble'>
+            <img src='vision_icon.svg'></img>
+          </div>
+          <h3>Our Vision</h3>
+          <p>
+            To continually support our faculty, to build close-knit
+            relationships among members past and present, and drive
+            the charge for campus vibrancy.
+          </p>
+        </div>
+
+        <div className='icon-container'>
+          <div className='icon-bubble'>
+            <img src='mission_icon.svg'></img>
+          </div>
+          <h3>Our Mission</h3>
+          <p>
+            To be the voice of the students,
+            to ensure their holistic well-being, and
+            to bridge the gaps between them and the school.
+          </p>
+        </div>
+      </section>
+
+      <div className='banner'>
+        <h2 className='text-xl'>Introducing the</h2>
+        <h1>26th Management Committee</h1>
+      </div>
+      <RolesSection></RolesSection>
+    </div>
+  );
+}
+
+export default About;
diff --git a/src/pages/about/roles.json b/src/pages/about/roles.json
new file mode 100644
index 0000000..924bfda
--- /dev/null
+++ b/src/pages/about/roles.json
@@ -0,0 +1,132 @@
+{
+  "Presidency": [
+    {
+      "name": "Javian Ng",
+      "role": "President"
+    },
+    {
+      "name": "Sean Kevin Dias",
+      "role": "General Secretary"
+    },
+    {
+      "name": "Jamie Ho",
+      "role": "Deputy General Secretary"
+    },
+    {
+      "name": "Rayson Yeap",
+      "role": "Tech Lead"
+    },
+    {
+      "name": "Lee Yong Ning",
+      "role": "Deputy Tech Lead"
+    },
+    {
+      "name": "Mervyn Seah",
+      "role": "Finance Secretary"
+    },
+    {
+      "name": "Vivien He",
+      "role": "Deputy Finance Secretary"
+    }
+  ],
+  "External Relations": [
+    {
+      "name": "Koo Jay-Lynn",
+      "role": "Vice President"
+    },
+    {
+      "name": "Wang Yu Qing",
+      "role": "Director, Publicity"
+    },
+    {
+      "name": "Althea Tan",
+      "role": "Deputy Director, Publicity (Content & Graphics)"
+    },
+    {
+      "name": "Davian Kho",
+      "role": "Deputy Director, Publicity (Photos & Video)"
+    },
+    {
+      "name": "Ophelia Teo",
+      "role": "Director, Marketing"
+    },
+    {
+      "name": "Khoo Pyn Zhern",
+      "role": "Deputy Director, Marketing (Merchandise)"
+    },
+    {
+      "name": "Natasha Koh",
+      "role": "Deputy Director, Marketing (Sponsorship)"
+    }
+  ],
+  "Internal Relations": [
+    {
+      "name": "Reina Tng",
+      "role": "Vice President"
+    },
+    {
+      "name": "Joshua Lek",
+      "role": "Director, Welfare"
+    },
+    {
+      "name": "Tricia Ang",
+      "role": "Deputy Director, Welfare"
+    },
+    {
+      "name": "Natasha Sanghar",
+      "role": "Director, Sports"
+    },
+    {
+      "name": "Chloe Ong",
+      "role": "Deputy Director, Sports"
+    }
+  ],
+  "Student Development": [
+    {
+      "name": "Ng Le Xuan",
+      "role": "Vice President"
+    },
+    {
+      "name": "Emily Tan",
+      "role": "Director, Academic Liaison"
+    },
+    {
+      "name": "Teo Hong Rui",
+      "role": "Deputy Director, Academic Liaison"
+    },
+    {
+      "name": "Martin Ng",
+      "role": "Deputy Director, Community Engagement"
+    },
+    {
+      "name": "Kong Shi Ting",
+      "role": "Director, Rag & Flag"
+    }
+  ],
+  "Student Life": [
+    {
+      "name": "Nathan Loo",
+      "role": "Vice President"
+    },
+    {
+      "name": "Raeeda",
+      "role": "Director, Freshman Orientation Projects"
+    },
+    {
+      "name": "Timothy Soon",
+      "role": "Deputy Director, Freshman Orientation Projects"
+    },
+    {
+      "name": "Wanjari Kimaya",
+      "role": "Deputy Director, Freshman Orientation Projects"
+    },
+    {
+      "name": "Toh Yi Hui",
+      "role": "Director, Student Engagement"
+    },
+    {
+      "name": "Ivan Yang",
+      "role": "Deputy Director, Student Engagement"
+    }
+  ]
+}
diff --git a/src/pages/index.ts b/src/pages/index.ts
index 14f2d41..35fca35 100644
--- a/src/pages/index.ts
+++ b/src/pages/index.ts
@@ -1,4 +1,5 @@
+import About from './about';
 import Home from './home';
 import Privacy from './privacy';
 
-export { Home, Privacy };
+export { About, Home, Privacy };
diff --git a/tailwind.config.js b/tailwind.config.js
index a63f6ae..2facf57 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -31,6 +31,9 @@ module.exports = {
           0 10px 16px -1px rgba(189,192,207,0.4)
         `,
       },
+      dropShadow: {
+        window: '8px 8px 0px #365486',
+      },
     },
   },
   plugins: [],
diff --git a/vite.config.js b/vite.config.js
index a3e0fa2..eccf3c6 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -5,7 +5,15 @@ import tailwindcss from 'tailwindcss';
 // https://vitejs.dev/config/
 export default defineConfig(({ command }) => {
   const config = {
-    plugins: [react()],
+    plugins: [react(
+      {
+        babel: {
+          plugins: [
+            ['@babel/plugin-syntax-import-attributes'],
+          ],
+        },
+      },
+    )],
     base: '/',
     css: {
       postcss: {