diff --git a/client/package-lock.json b/client/package-lock.json
index ee0617d..05a4fd6 100644
--- a/client/package-lock.json
+++ b/client/package-lock.json
@@ -12,6 +12,7 @@
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-router-dom": "^6.16.0",
+        "react-select": "^5.7.7",
         "ts-node": "^10.9.1"
       },
       "devDependencies": {
@@ -49,6 +50,210 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/@babel/code-frame": {
+      "version": "7.22.13",
+      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.22.13.tgz",
+      "integrity": "sha512-XktuhWlJ5g+3TJXc5upd9Ks1HutSArik6jf2eAjYFyIOf4ej3RN+184cZbzDvbPnuTJIUhPKKJE3cIsYTiAT3w==",
+      "dependencies": {
+        "@babel/highlight": "^7.22.13",
+        "chalk": "^2.4.2"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/code-frame/node_modules/ansi-styles": {
+      "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==",
+      "dependencies": {
+        "color-convert": "^1.9.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/@babel/code-frame/node_modules/chalk": {
+      "version": "2.4.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
+      "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
+      "dependencies": {
+        "ansi-styles": "^3.2.1",
+        "escape-string-regexp": "^1.0.5",
+        "supports-color": "^5.3.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/@babel/code-frame/node_modules/color-convert": {
+      "version": "1.9.3",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
+      "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
+      "dependencies": {
+        "color-name": "1.1.3"
+      }
+    },
+    "node_modules/@babel/code-frame/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=="
+    },
+    "node_modules/@babel/code-frame/node_modules/escape-string-regexp": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
+      "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==",
+      "engines": {
+        "node": ">=0.8.0"
+      }
+    },
+    "node_modules/@babel/code-frame/node_modules/has-flag": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
+      "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/@babel/code-frame/node_modules/supports-color": {
+      "version": "5.5.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
+      "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+      "dependencies": {
+        "has-flag": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/@babel/helper-module-imports": {
+      "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==",
+      "dependencies": {
+        "@babel/types": "^7.22.15"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-string-parser": {
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.22.5.tgz",
+      "integrity": "sha512-mM4COjgZox8U+JcXQwPijIZLElkgEpO5rsERVDJTc2qfCDfERyob6k5WegS14SX18IIjv+XD+GrqNumY5JRCDw==",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-validator-identifier": {
+      "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==",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/highlight": {
+      "version": "7.22.20",
+      "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.22.20.tgz",
+      "integrity": "sha512-dkdMCN3py0+ksCgYmGG8jKeGA/8Tk+gJwSYYlFGxG5lmhfKNoAy004YpLxpS1W2J8m/EK2Ew+yOs9pVRwO89mg==",
+      "dependencies": {
+        "@babel/helper-validator-identifier": "^7.22.20",
+        "chalk": "^2.4.2",
+        "js-tokens": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/highlight/node_modules/ansi-styles": {
+      "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==",
+      "dependencies": {
+        "color-convert": "^1.9.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/@babel/highlight/node_modules/chalk": {
+      "version": "2.4.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
+      "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
+      "dependencies": {
+        "ansi-styles": "^3.2.1",
+        "escape-string-regexp": "^1.0.5",
+        "supports-color": "^5.3.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/@babel/highlight/node_modules/color-convert": {
+      "version": "1.9.3",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
+      "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
+      "dependencies": {
+        "color-name": "1.1.3"
+      }
+    },
+    "node_modules/@babel/highlight/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=="
+    },
+    "node_modules/@babel/highlight/node_modules/escape-string-regexp": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
+      "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==",
+      "engines": {
+        "node": ">=0.8.0"
+      }
+    },
+    "node_modules/@babel/highlight/node_modules/has-flag": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
+      "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/@babel/highlight/node_modules/supports-color": {
+      "version": "5.5.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
+      "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+      "dependencies": {
+        "has-flag": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/@babel/runtime": {
+      "version": "7.23.2",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.23.2.tgz",
+      "integrity": "sha512-mM8eg4yl5D6i3lu2QKPuPH4FArvJ8KhTofbE7jwMUv9KX5mBvwPAqnV3MlyBNqdp9RyRKP6Yck8TrfYrPvX3bg==",
+      "dependencies": {
+        "regenerator-runtime": "^0.14.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/types": {
+      "version": "7.23.0",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.23.0.tgz",
+      "integrity": "sha512-0oIyUfKoI3mSqMvsxBdclDwxXKXAUA8v/apZbc+iSyARYou1o8ZGDxbUYyLFoW2arqS2jDGqJuZvv1d/io1axg==",
+      "dependencies": {
+        "@babel/helper-string-parser": "^7.22.5",
+        "@babel/helper-validator-identifier": "^7.22.20",
+        "to-fast-properties": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
     "node_modules/@cspotcode/source-map-support": {
       "version": "0.8.1",
       "resolved": "https://registry.npmjs.org/@cspotcode/source-map-support/-/source-map-support-0.8.1.tgz",
@@ -69,6 +274,109 @@
         "@jridgewell/sourcemap-codec": "^1.4.10"
       }
     },
+    "node_modules/@emotion/babel-plugin": {
+      "version": "11.11.0",
+      "resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.11.0.tgz",
+      "integrity": "sha512-m4HEDZleaaCH+XgDDsPF15Ht6wTLsgDTeR3WYj9Q/k76JtWhrJjcP4+/XlG8LGT/Rol9qUfOIztXeA84ATpqPQ==",
+      "dependencies": {
+        "@babel/helper-module-imports": "^7.16.7",
+        "@babel/runtime": "^7.18.3",
+        "@emotion/hash": "^0.9.1",
+        "@emotion/memoize": "^0.8.1",
+        "@emotion/serialize": "^1.1.2",
+        "babel-plugin-macros": "^3.1.0",
+        "convert-source-map": "^1.5.0",
+        "escape-string-regexp": "^4.0.0",
+        "find-root": "^1.1.0",
+        "source-map": "^0.5.7",
+        "stylis": "4.2.0"
+      }
+    },
+    "node_modules/@emotion/cache": {
+      "version": "11.11.0",
+      "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-11.11.0.tgz",
+      "integrity": "sha512-P34z9ssTCBi3e9EI1ZsWpNHcfY1r09ZO0rZbRO2ob3ZQMnFI35jB536qoXbkdesr5EUhYi22anuEJuyxifaqAQ==",
+      "dependencies": {
+        "@emotion/memoize": "^0.8.1",
+        "@emotion/sheet": "^1.2.2",
+        "@emotion/utils": "^1.2.1",
+        "@emotion/weak-memoize": "^0.3.1",
+        "stylis": "4.2.0"
+      }
+    },
+    "node_modules/@emotion/hash": {
+      "version": "0.9.1",
+      "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.9.1.tgz",
+      "integrity": "sha512-gJB6HLm5rYwSLI6PQa+X1t5CFGrv1J1TWG+sOyMCeKz2ojaj6Fnl/rZEspogG+cvqbt4AE/2eIyD2QfLKTBNlQ=="
+    },
+    "node_modules/@emotion/memoize": {
+      "version": "0.8.1",
+      "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.8.1.tgz",
+      "integrity": "sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA=="
+    },
+    "node_modules/@emotion/react": {
+      "version": "11.11.1",
+      "resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.11.1.tgz",
+      "integrity": "sha512-5mlW1DquU5HaxjLkfkGN1GA/fvVGdyHURRiX/0FHl2cfIfRxSOfmxEH5YS43edp0OldZrZ+dkBKbngxcNCdZvA==",
+      "dependencies": {
+        "@babel/runtime": "^7.18.3",
+        "@emotion/babel-plugin": "^11.11.0",
+        "@emotion/cache": "^11.11.0",
+        "@emotion/serialize": "^1.1.2",
+        "@emotion/use-insertion-effect-with-fallbacks": "^1.0.1",
+        "@emotion/utils": "^1.2.1",
+        "@emotion/weak-memoize": "^0.3.1",
+        "hoist-non-react-statics": "^3.3.1"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@emotion/serialize": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.1.2.tgz",
+      "integrity": "sha512-zR6a/fkFP4EAcCMQtLOhIgpprZOwNmCldtpaISpvz348+DP4Mz8ZoKaGGCQpbzepNIUWbq4w6hNZkwDyKoS+HA==",
+      "dependencies": {
+        "@emotion/hash": "^0.9.1",
+        "@emotion/memoize": "^0.8.1",
+        "@emotion/unitless": "^0.8.1",
+        "@emotion/utils": "^1.2.1",
+        "csstype": "^3.0.2"
+      }
+    },
+    "node_modules/@emotion/sheet": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-1.2.2.tgz",
+      "integrity": "sha512-0QBtGvaqtWi+nx6doRwDdBIzhNdZrXUppvTM4dtZZWEGTXL/XE/yJxLMGlDT1Gt+UHH5IX1n+jkXyytE/av7OA=="
+    },
+    "node_modules/@emotion/unitless": {
+      "version": "0.8.1",
+      "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.8.1.tgz",
+      "integrity": "sha512-KOEGMu6dmJZtpadb476IsZBclKvILjopjUii3V+7MnXIQCYh8W3NgNcgwo21n9LXZX6EDIKvqfjYxXebDwxKmQ=="
+    },
+    "node_modules/@emotion/use-insertion-effect-with-fallbacks": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@emotion/use-insertion-effect-with-fallbacks/-/use-insertion-effect-with-fallbacks-1.0.1.tgz",
+      "integrity": "sha512-jT/qyKZ9rzLErtrjGgdkMBn2OP8wl0G3sQlBb3YPryvKHsjvINUhVaPFfP+fpBcOkmrVOVEEHQFJ7nbj2TH2gw==",
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      }
+    },
+    "node_modules/@emotion/utils": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-1.2.1.tgz",
+      "integrity": "sha512-Y2tGf3I+XVnajdItskUCn6LX+VUDmP6lTL4fcqsXAv43dnlbZiuW4MWQW38rW/BVWSE7Q/7+XQocmpnRYILUmg=="
+    },
+    "node_modules/@emotion/weak-memoize": {
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.3.1.tgz",
+      "integrity": "sha512-EsBwpc7hBUJWAsNPBmJy4hxWx12v6bshQsldrVmjxJoc3isbxhOrF2IcCpaXxfvq03NwkI7sbsOLXbYuqF/8Ww=="
+    },
     "node_modules/@esbuild/win32-x64": {
       "version": "0.18.20",
       "cpu": [
@@ -136,6 +444,28 @@
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
       }
     },
+    "node_modules/@floating-ui/core": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.5.0.tgz",
+      "integrity": "sha512-kK1h4m36DQ0UHGj5Ah4db7R0rHemTqqO0QLvUqi1/mUUp3LuAWbWxdxSIf/XsnH9VS6rRVPLJCncjRzUvyCLXg==",
+      "dependencies": {
+        "@floating-ui/utils": "^0.1.3"
+      }
+    },
+    "node_modules/@floating-ui/dom": {
+      "version": "1.5.3",
+      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.5.3.tgz",
+      "integrity": "sha512-ClAbQnEqJAKCJOEbbLo5IUlZHkNszqhuxS4fHAVxRPXPya6Ysf2G8KypnYcOTpx6I8xcgF9bbHb6g/2KpbV8qA==",
+      "dependencies": {
+        "@floating-ui/core": "^1.4.2",
+        "@floating-ui/utils": "^0.1.3"
+      }
+    },
+    "node_modules/@floating-ui/utils": {
+      "version": "0.1.6",
+      "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.1.6.tgz",
+      "integrity": "sha512-OfX7E2oUDYxtBvsuS4e/jSn4Q9Qb6DzgeYtsAdkPZ47znpoNsMgZw0+tVijiv3uGNR6dgNlty6r9rzIzHjtd/A=="
+    },
     "node_modules/@humanwhocodes/config-array": {
       "version": "0.11.11",
       "dev": true,
@@ -333,14 +663,17 @@
       "integrity": "sha512-najjVq5KN2vsH2U/xyh2opaSEz6cZMR2SetLIlxlj08nOcmPOemJmUK2o4kUzfLqfrWE0PIrNeE16XhYDd3nqg==",
       "peer": true
     },
+    "node_modules/@types/parse-json": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.0.tgz",
+      "integrity": "sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA=="
+    },
     "node_modules/@types/prop-types": {
       "version": "15.7.5",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/@types/react": {
       "version": "18.2.21",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@types/prop-types": "*",
@@ -356,9 +689,16 @@
         "@types/react": "*"
       }
     },
+    "node_modules/@types/react-transition-group": {
+      "version": "4.4.7",
+      "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.7.tgz",
+      "integrity": "sha512-ICCyBl5mvyqYp8Qeq9B5G/fyBSRC0zx3XM3sCC6KkcMsNeAHqXBKkmat4GqdJET5jtYUpZXrxI5flve5qhi2Eg==",
+      "dependencies": {
+        "@types/react": "*"
+      }
+    },
     "node_modules/@types/scheduler": {
       "version": "0.16.3",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/@types/semver": {
@@ -707,6 +1047,20 @@
         "proxy-from-env": "^1.1.0"
       }
     },
+    "node_modules/babel-plugin-macros": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/babel-plugin-macros/-/babel-plugin-macros-3.1.0.tgz",
+      "integrity": "sha512-Cg7TFGpIr01vOQNODXOOaGz2NpCU5gl8x1qJFbb6hbZxR7XrcE2vtbAsTAbJ7/xwJtUuJEw8K8Zr/AE0LHlesg==",
+      "dependencies": {
+        "@babel/runtime": "^7.12.5",
+        "cosmiconfig": "^7.0.0",
+        "resolve": "^1.19.0"
+      },
+      "engines": {
+        "node": ">=10",
+        "npm": ">=6"
+      }
+    },
     "node_modules/balanced-match": {
       "version": "1.0.2",
       "dev": true,
@@ -773,7 +1127,6 @@
     },
     "node_modules/callsites": {
       "version": "3.1.0",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=6"
@@ -898,6 +1251,34 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/convert-source-map": {
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.9.0.tgz",
+      "integrity": "sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A=="
+    },
+    "node_modules/cosmiconfig": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-7.1.0.tgz",
+      "integrity": "sha512-AdmX6xUzdNASswsFtmwSt7Vj8po9IuqXm0UXz7QKPuEUmPB4XyjGfaAr2PSuELMwkRMVH1EpIkX5bTZGRB3eCA==",
+      "dependencies": {
+        "@types/parse-json": "^4.0.0",
+        "import-fresh": "^3.2.1",
+        "parse-json": "^5.0.0",
+        "path-type": "^4.0.0",
+        "yaml": "^1.10.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/cosmiconfig/node_modules/yaml": {
+      "version": "1.10.2",
+      "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz",
+      "integrity": "sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/create-require": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/create-require/-/create-require-1.1.1.tgz",
@@ -929,7 +1310,6 @@
     },
     "node_modules/csstype": {
       "version": "3.1.2",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/debug": {
@@ -1001,11 +1381,28 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/dom-helpers": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz",
+      "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==",
+      "dependencies": {
+        "@babel/runtime": "^7.8.7",
+        "csstype": "^3.0.2"
+      }
+    },
     "node_modules/electron-to-chromium": {
       "version": "1.4.515",
       "dev": true,
       "license": "ISC"
     },
+    "node_modules/error-ex": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz",
+      "integrity": "sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==",
+      "dependencies": {
+        "is-arrayish": "^0.2.1"
+      }
+    },
     "node_modules/esbuild": {
       "version": "0.18.20",
       "dev": true,
@@ -1052,7 +1449,6 @@
     },
     "node_modules/escape-string-regexp": {
       "version": "4.0.0",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=10"
@@ -1284,6 +1680,11 @@
         "node": ">=8"
       }
     },
+    "node_modules/find-root": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/find-root/-/find-root-1.1.0.tgz",
+      "integrity": "sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng=="
+    },
     "node_modules/find-up": {
       "version": "5.0.0",
       "dev": true,
@@ -1382,7 +1783,6 @@
     },
     "node_modules/function-bind": {
       "version": "1.1.1",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/glob": {
@@ -1455,7 +1855,6 @@
     },
     "node_modules/has": {
       "version": "1.0.3",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "function-bind": "^1.1.1"
@@ -1472,6 +1871,14 @@
         "node": ">=8"
       }
     },
+    "node_modules/hoist-non-react-statics": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
+      "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
+      "dependencies": {
+        "react-is": "^16.7.0"
+      }
+    },
     "node_modules/ignore": {
       "version": "5.2.4",
       "dev": true,
@@ -1482,7 +1889,6 @@
     },
     "node_modules/import-fresh": {
       "version": "3.3.0",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "parent-module": "^1.0.0",
@@ -1517,6 +1923,11 @@
       "dev": true,
       "license": "ISC"
     },
+    "node_modules/is-arrayish": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz",
+      "integrity": "sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg=="
+    },
     "node_modules/is-binary-path": {
       "version": "2.1.0",
       "dev": true,
@@ -1530,7 +1941,6 @@
     },
     "node_modules/is-core-module": {
       "version": "2.13.0",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "has": "^1.0.3"
@@ -1607,6 +2017,11 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/json-parse-even-better-errors": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz",
+      "integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w=="
+    },
     "node_modules/json-schema-traverse": {
       "version": "0.4.1",
       "dev": true,
@@ -1647,7 +2062,6 @@
     },
     "node_modules/lines-and-columns": {
       "version": "1.2.4",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/locate-path": {
@@ -1695,6 +2109,11 @@
       "resolved": "https://registry.npmjs.org/make-error/-/make-error-1.3.6.tgz",
       "integrity": "sha512-s8UhlNe7vPKomQhC1qFelMokr/Sc3AgNbso3n74mVPA5LTZwkB9NlXf4XPamLxJE8h0gh73rM94xvwRT2CVInw=="
     },
+    "node_modules/memoize-one": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-6.0.0.tgz",
+      "integrity": "sha512-rkpe71W0N0c0Xz6QD0eJETuWAJGnJ9afsl1srmwPrI+yBCkge5EycXXbYRyvL29zZVUWQCY7InPRCv3GDXuZNw=="
+    },
     "node_modules/merge2": {
       "version": "1.4.1",
       "dev": true,
@@ -1805,7 +2224,6 @@
     },
     "node_modules/object-assign": {
       "version": "4.1.1",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=0.10.0"
@@ -1873,7 +2291,6 @@
     },
     "node_modules/parent-module": {
       "version": "1.0.1",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "callsites": "^3.0.0"
@@ -1882,6 +2299,23 @@
         "node": ">=6"
       }
     },
+    "node_modules/parse-json": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.2.0.tgz",
+      "integrity": "sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==",
+      "dependencies": {
+        "@babel/code-frame": "^7.0.0",
+        "error-ex": "^1.3.1",
+        "json-parse-even-better-errors": "^2.3.0",
+        "lines-and-columns": "^1.1.6"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/path-exists": {
       "version": "4.0.0",
       "dev": true,
@@ -1908,12 +2342,10 @@
     },
     "node_modules/path-parse": {
       "version": "1.0.7",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/path-type": {
       "version": "4.0.0",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=8"
@@ -2084,6 +2516,16 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/prop-types": {
+      "version": "15.8.1",
+      "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
+      "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
+      "dependencies": {
+        "loose-envify": "^1.4.0",
+        "object-assign": "^4.1.1",
+        "react-is": "^16.13.1"
+      }
+    },
     "node_modules/proxy-from-env": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
@@ -2137,6 +2579,11 @@
         "react": "^18.2.0"
       }
     },
+    "node_modules/react-is": {
+      "version": "16.13.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
+    },
     "node_modules/react-router": {
       "version": "6.16.0",
       "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.16.0.tgz",
@@ -2167,6 +2614,41 @@
         "react-dom": ">=16.8"
       }
     },
+    "node_modules/react-select": {
+      "version": "5.7.7",
+      "resolved": "https://registry.npmjs.org/react-select/-/react-select-5.7.7.tgz",
+      "integrity": "sha512-HhashZZJDRlfF/AKj0a0Lnfs3sRdw/46VJIRd8IbB9/Ovr74+ZIwkAdSBjSPXsFMG+u72c5xShqwLSKIJllzqw==",
+      "dependencies": {
+        "@babel/runtime": "^7.12.0",
+        "@emotion/cache": "^11.4.0",
+        "@emotion/react": "^11.8.1",
+        "@floating-ui/dom": "^1.0.1",
+        "@types/react-transition-group": "^4.4.0",
+        "memoize-one": "^6.0.0",
+        "prop-types": "^15.6.0",
+        "react-transition-group": "^4.3.0",
+        "use-isomorphic-layout-effect": "^1.1.2"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/react-transition-group": {
+      "version": "4.4.5",
+      "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",
+      "integrity": "sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==",
+      "dependencies": {
+        "@babel/runtime": "^7.5.5",
+        "dom-helpers": "^5.0.1",
+        "loose-envify": "^1.4.0",
+        "prop-types": "^15.6.2"
+      },
+      "peerDependencies": {
+        "react": ">=16.6.0",
+        "react-dom": ">=16.6.0"
+      }
+    },
     "node_modules/read-cache": {
       "version": "1.0.0",
       "dev": true,
@@ -2186,9 +2668,13 @@
         "node": ">=8.10.0"
       }
     },
+    "node_modules/regenerator-runtime": {
+      "version": "0.14.0",
+      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.0.tgz",
+      "integrity": "sha512-srw17NI0TUWHuGa5CFGGmhfNIeja30WMBfbslPNhf6JrqQlLN5gcrvig1oqPxiVaXb0oW0XRKtH6Nngs5lKCIA=="
+    },
     "node_modules/resolve": {
       "version": "1.22.4",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "is-core-module": "^2.13.0",
@@ -2204,7 +2690,6 @@
     },
     "node_modules/resolve-from": {
       "version": "4.0.0",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=4"
@@ -2318,6 +2803,14 @@
         "node": ">=8"
       }
     },
+    "node_modules/source-map": {
+      "version": "0.5.7",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
+      "integrity": "sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/source-map-js": {
       "version": "1.0.2",
       "dev": true,
@@ -2348,6 +2841,11 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/stylis": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.2.0.tgz",
+      "integrity": "sha512-Orov6g6BB1sDfYgzWfTHDOxamtX1bE/zo104Dh9e6fqJ3PooipYyfJ0pUmrZO2wAvO8YbEyeFrkV91XTsGMSrw=="
+    },
     "node_modules/sucrase": {
       "version": "3.34.0",
       "dev": true,
@@ -2401,7 +2899,6 @@
     },
     "node_modules/supports-preserve-symlinks-flag": {
       "version": "1.0.0",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">= 0.4"
@@ -2470,6 +2967,14 @@
         "node": ">=0.8"
       }
     },
+    "node_modules/to-fast-properties": {
+      "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==",
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/to-regex-range": {
       "version": "5.0.1",
       "dev": true,
@@ -2614,6 +3119,19 @@
         "punycode": "^2.1.0"
       }
     },
+    "node_modules/use-isomorphic-layout-effect": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/use-isomorphic-layout-effect/-/use-isomorphic-layout-effect-1.1.2.tgz",
+      "integrity": "sha512-49L8yCO3iGT/ZF9QttjwLF/ZD9Iwto5LnH5LmEdk/6cFmXddqi2ulF0edxTwjj+7mqvpVVGQWvbXZdn32wRSHA==",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/util-deprecate": {
       "version": "1.0.2",
       "dev": true,
diff --git a/client/package.json b/client/package.json
index bfb1b5a..0bc8b2a 100644
--- a/client/package.json
+++ b/client/package.json
@@ -14,6 +14,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.16.0",
+    "react-select": "^5.7.7",
     "ts-node": "^10.9.1"
   },
   "devDependencies": {
diff --git a/client/src/App.tsx b/client/src/App.tsx
index b8e23cd..b1f5666 100644
--- a/client/src/App.tsx
+++ b/client/src/App.tsx
@@ -1,18 +1,16 @@
 
-import {
-    BrowserRouter as Router,
-    Route,
-    Routes,
-} from 'react-router-dom';
-import HomePage from './pages/HomePage';
+import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
+import HomePage from "./pages/HomePage";
+import RequestsPage from "./pages/RequestsPage";
 
 function App() {
     return (
-            <Router>
-                <Routes>
-                   <Route path = '/' element={<HomePage/>} />
-                </Routes>
-            </Router>
+        <Router>
+            <Routes>
+                <Route path="/" element={<HomePage />} />
+                <Route path="/requests/" element={<RequestsPage />} />
+            </Routes>
+        </Router>
     );
 }
 
diff --git a/client/src/components/CollectionSelector.tsx b/client/src/components/CollectionSelector.tsx
new file mode 100644
index 0000000..f6388e0
--- /dev/null
+++ b/client/src/components/CollectionSelector.tsx
@@ -0,0 +1,29 @@
+import { useState } from "react";
+import Select from "react-select";
+
+const options = [
+    { value: "Taylor's gifts", label: "Taylor's gifts" },
+    { value: "Harry's gifts", label: "Harry's gifts" },
+];
+
+export type SelectValueType = {
+    [key: string]: string;
+} | null;
+
+export default function CollectionSelector() {
+    const [selectedOption, setSelectedOption] = useState<SelectValueType>(null);
+
+    const handleOption = (selection: SelectValueType) => {
+        setSelectedOption(selection);
+    };
+
+    return (
+        <div className="App">
+            <Select
+                defaultValue={selectedOption}
+                onChange={handleOption}
+                options={options}
+            />
+        </div>
+    );
+}
\ No newline at end of file
diff --git a/client/src/components/Gift.tsx b/client/src/components/Gift.tsx
new file mode 100644
index 0000000..9e29dc8
--- /dev/null
+++ b/client/src/components/Gift.tsx
@@ -0,0 +1,15 @@
+import React from "react";
+import { Gift } from "../types";
+
+const Gift: React.FC<Gift> = ({ Name, Link }: Gift) => {
+    return (
+        <div>
+            <p className="">{Name}</p>
+            <a className="text-blue-800" href={Link} target="_blank" rel="noreferrer">
+                View product
+            </a>
+        </div>
+    );
+};
+
+export default Gift;
\ No newline at end of file
diff --git a/client/src/components/RequestCard.tsx b/client/src/components/RequestCard.tsx
new file mode 100644
index 0000000..bcc74f3
--- /dev/null
+++ b/client/src/components/RequestCard.tsx
@@ -0,0 +1,51 @@
+import React, { useState } from "react";
+import ResponseCard from "./ResponseCard";
+import ResponseForm from "./ResponseForm";
+import { GiftRequest } from "../types";
+
+const RequestCard: React.FC<GiftRequest> = ({
+                                                RecipientName,
+                                                RecipientAge,
+                                                RecipientInterests,
+                                                BudgetMin,
+                                                BudgetMax,
+                                                GiftResponse,
+                                                DateNeeded,
+                                            }: GiftRequest) => {
+    const [showForm, setShowForm] = useState(false);
+
+    return (
+        <div className="flex flex-col w-full">
+            <h2 className="font-bold text-lg">
+                {RecipientName} ({DateNeeded.toDateString()})
+            </h2>
+            <div key={RecipientName} className="px-4 py-2 bg-slate-100">
+                <p>Recipient: {RecipientName}</p>
+                {!GiftResponse && (
+                    <div>
+                        <p>Recipient age: {RecipientAge}</p>
+                        <p>Recipient interests: {RecipientInterests.join(", ")}</p>
+                        <p>
+                            Budget: ${BudgetMin} - ${BudgetMax}
+                        </p>
+                        <p>Needed by: {DateNeeded.toDateString()}</p>
+                    </div>
+                )}
+            </div>
+            <div>
+                {GiftResponse && <ResponseCard {...GiftResponse} />}
+                {!GiftResponse && !showForm && (
+                    <button
+                        className="bg-blue-600 px-4 py-2  text-white rounded-md mt-4"
+                        onClick={() => setShowForm(true)}
+                    >
+                        Add response
+                    </button>
+                )}
+                {showForm && <ResponseForm />}
+            </div>
+        </div>
+    );
+};
+
+export default RequestCard
\ No newline at end of file
diff --git a/client/src/components/ResponseCard.tsx b/client/src/components/ResponseCard.tsx
new file mode 100644
index 0000000..693020c
--- /dev/null
+++ b/client/src/components/ResponseCard.tsx
@@ -0,0 +1,26 @@
+import React from "react";
+import Gift from "./Gift";
+import { GiftResponse } from "../types";
+
+const ResponseCard: React.FC<GiftResponse> = ({
+                                                  GiftCollection,
+                                                  CustomMessage,
+                                              }: GiftResponse) => {
+    return (
+        <div className="flex flex-col bg-slate-100 px-4 py-2">
+            <h2 className="font-bold text-md">Response:</h2>
+            <p>{CustomMessage}</p>
+            <div>
+                {GiftCollection.Gifts.map((gift) => {
+                    return (
+                        <div className="mt-2">
+                            <Gift {...gift} />
+                        </div>
+                    );
+                })}
+            </div>
+        </div>
+    );
+};
+
+export default ResponseCard;
\ No newline at end of file
diff --git a/client/src/components/ResponseForm.tsx b/client/src/components/ResponseForm.tsx
new file mode 100644
index 0000000..be96c36
--- /dev/null
+++ b/client/src/components/ResponseForm.tsx
@@ -0,0 +1,27 @@
+import CollectionSelector from "./CollectionSelector";
+
+const ResponseForm = () => {
+    return (
+        <div className="flex flex-col justify-between h-full mt-4">
+            <div>
+                <label className="block text-gray-700 text-sm font-bold mb-2">
+                    Select a gift collection:
+                    <CollectionSelector />
+                </label>
+                <label className="block text-gray-700 text-sm font-bold mb-2">
+                    Custom message:
+                    <input
+                        className="border rounded w-full py-2 px-3 text-gray-700"
+                        name="message"
+                        type="text"
+                    />
+                </label>
+            </div>
+            <button className="bg-blue-600 ml-8 px-4 py-2 h-10 text-white rounded-md self-end">
+                Submit
+            </button>
+        </div>
+    );
+};
+
+export default ResponseForm;
\ No newline at end of file
diff --git a/client/src/pages/RequestsPage.tsx b/client/src/pages/RequestsPage.tsx
new file mode 100644
index 0000000..d756293
--- /dev/null
+++ b/client/src/pages/RequestsPage.tsx
@@ -0,0 +1,54 @@
+import RequestCard from "../components/RequestCard";
+import { completeRequests, incompleteRequests } from "./mockData";
+import { useState } from "react";
+import Select from "react-select";
+
+export type SelectValueType = {
+    [key: string]: string;
+} | null;
+
+const options = [
+    { value: "0", label: "Incomplete requests" },
+    { value: "1", label: "Complete requests" },
+    { value: "2", label: "All requests" },
+];
+
+export default function RequestsPage() {
+    const [selectedOption, setSelectedOption] = useState<SelectValueType>({
+        value: "2",
+        label: "All requests",
+    });
+
+    const handleOption = (selection: SelectValueType) => {
+        setSelectedOption(selection);
+    };
+    return (
+        <div className="flex flex-col px-96 py-8">
+            <h2 className="font-bold text-xl">View gift requests</h2>
+            <p>Filter gift requests using the dropdown below. </p>
+            <Select
+                defaultValue={selectedOption}
+                onChange={handleOption}
+                options={options}
+            />
+            {(selectedOption?.value == "0" || selectedOption?.value == "2") && (
+                <div className="mt-6">
+                    <h2 className="font-bold text-xl text-blue-800">
+                        Incomplete requests
+                    </h2>
+                    {incompleteRequests.map((req) => {
+                        return <RequestCard  {...req} />;
+                    })}
+                </div>
+            )}
+            {(selectedOption?.value == "1" || selectedOption?.value == "2") && (
+                <div className="mt-6">
+                    <h2 className="font-bold text-xl text-blue-800">Complete requests</h2>
+                    {completeRequests.map((req) => {
+                        return <RequestCard {...req} />;
+                    })}
+                </div>
+            )}
+        </div>
+    );
+}
\ No newline at end of file
diff --git a/client/src/pages/mockData.tsx b/client/src/pages/mockData.tsx
new file mode 100644
index 0000000..755314f
--- /dev/null
+++ b/client/src/pages/mockData.tsx
@@ -0,0 +1,133 @@
+import { GiftRequest } from "../types";
+
+export const completeRequests: GiftRequest[] = [
+    {
+        CustomerId: 1,
+        GiftResponseId: null,
+        RecipientName: "Alice",
+        RecipientAge: 25,
+        Occasion: ["Birthday", "Anniversary"],
+        RecipientInterests: ["Reading", "Traveling"],
+        BudgetMax: 100,
+        BudgetMin: 50,
+        GiftResponse: {
+            GiftCollection: {
+                CustomerId: 1,
+                Customer: { UserId: 1 },
+                CollectionName: "Books",
+                Gifts: [
+                    {
+                        Name: "The Catcher in the Rye",
+                        Price: 20,
+                        Link: "https://book-link",
+                        Description: "Classic novel",
+                        Demographic: "Adult",
+                        GiftCollections: [],
+                    },
+                    {
+                        Name: "To Kill a Mockingbird",
+                        Price: 15,
+                        Link: "https://book-link",
+                        Description: "Classic novel",
+                        Demographic: "Adult",
+                        GiftCollections: [],
+                    },
+                ],
+            },
+            GiftCollectionId: 1,
+            CustomMessage: "Happy Birthday!",
+        },
+        DateNeeded: new Date("2023-01-15"),
+    },
+    {
+        CustomerId: 2,
+        GiftResponseId: null,
+        RecipientName: "Bob",
+        RecipientAge: 30,
+        Occasion: ["Christmas"],
+        RecipientInterests: ["Music", "Sports"],
+        BudgetMax: 150,
+        BudgetMin: 100,
+        GiftResponse: {
+            GiftCollection: {
+                CustomerId: 2,
+                Customer: { UserId: 2 },
+                CollectionName: "Tech Gadgets",
+                Gifts: [
+                    {
+                        Name: "Wireless Headphones",
+                        Price: 80,
+                        Link: "https://headphones-link",
+                        Description: "High-quality sound",
+                        Demographic: "Adult",
+                        GiftCollections: [],
+                    },
+                    {
+                        Name: "Smartwatch",
+                        Price: 120,
+                        Link: "https://smartwatch-link",
+                        Description: "Fitness tracking and notifications",
+                        Demographic: "Adult",
+                        GiftCollections: [],
+                    },
+                ],
+            },
+            GiftCollectionId: 2,
+            CustomMessage: "Merry Christmas!",
+        },
+        DateNeeded: new Date("2023-12-25"),
+    },
+    {
+        CustomerId: 3,
+        GiftResponseId: null,
+        RecipientName: "Charlie",
+        RecipientAge: 22,
+        Occasion: ["Graduation"],
+        RecipientInterests: ["Art", "Movies"],
+        BudgetMax: 80,
+        BudgetMin: 50,
+        GiftResponse: {
+            GiftCollection: {
+                CustomerId: 3,
+                Customer: { UserId: 3 },
+                CollectionName: "Art Supplies",
+                Gifts: [
+                    {
+                        Name: "Acrylic Paint Set",
+                        Price: 30,
+                        Link: "https://paint-set-link",
+                        Description: "High-quality pigments",
+                        Demographic: "Young Adult",
+                        GiftCollections: [],
+                    },
+                    {
+                        Name: "Sketchbook",
+                        Price: 20,
+                        Link: "https://sketchbook-link",
+                        Description: "Blank pages for creative ideas",
+                        Demographic: "Young Adult",
+                        GiftCollections: [],
+                    },
+                ],
+            },
+            GiftCollectionId: 3,
+            CustomMessage: "Congratulations on your graduation!",
+        },
+        DateNeeded: new Date("2023-05-20"),
+    },
+];
+
+export const incompleteRequests: GiftRequest[] = [
+    {
+        CustomerId: 3,
+        GiftResponseId: null,
+        RecipientName: "Charlie",
+        RecipientAge: 22,
+        Occasion: ["Graduation"],
+        RecipientInterests: ["Art", "Movies"],
+        BudgetMax: 80,
+        BudgetMin: 50,
+        GiftResponse: null,
+        DateNeeded: new Date("2023-05-20"),
+    },
+];
\ No newline at end of file
diff --git a/client/src/types.tsx b/client/src/types.tsx
new file mode 100644
index 0000000..92f038c
--- /dev/null
+++ b/client/src/types.tsx
@@ -0,0 +1,49 @@
+export interface Gift {
+    Name: string;
+    Price: number;
+    Link: string;
+    Description: string;
+    Demographic: string;
+    GiftCollections: GiftCollection[];
+}
+
+export interface GiftRequest {
+    CustomerId: number;
+    GiftResponseId: number | null;
+    RecipientName: string;
+    RecipientAge: number;
+    Occasion: string[];
+    RecipientInterests: string[];
+    BudgetMax: number;
+    BudgetMin: number;
+    GiftResponse: GiftResponse | null;
+    DateNeeded: Date;
+}
+
+export interface GiftCollection {
+    CustomerId: number | null;
+    Customer: Customer;
+    CollectionName: string;
+    Gifts: Gift[];
+}
+
+export interface GiftResponse {
+    GiftCollection: GiftCollection;
+    GiftCollectionId: number;
+    CustomMessage: string;
+}
+
+export interface User {
+    Email: string;
+    FirstName: string;
+    LastName: string;
+    Password: string;
+}
+
+export interface Customer {
+    UserId: number;
+}
+
+export interface Admin {
+    UserId: number;
+}
\ No newline at end of file