diff --git a/.firebase/hosting.YnVpbGQ.cache b/.firebase/hosting.YnVpbGQ.cache
new file mode 100644
index 00000000..d9006687
--- /dev/null
+++ b/.firebase/hosting.YnVpbGQ.cache
@@ -0,0 +1,26 @@
+asset-manifest.json,1683791116857,6eb134c96134da3fbe9eeae52617c3b55635e89fca98c4b96b7185c85b83b0db
+index.html,1683791116857,84a002df460ea1b67eed581e15230756274823169e310809d8a341fb15be9ef1
+favicon.ico,1683791080842,41b6bdb6164ca309be0b4f953a0146299823bd70ed0d7dbae9133899e3fa1c43
+manifest.json,1683791080873,8a52b2056a920670efed97e8438c2e2719e781bf7d3d1d3d6fe3f94341877c5f
+icons/filter.svg,1683791080856,1152f8b25752467e67885443b0273622b43826c18c5fde4006ecec52350e0157
+icons/location.svg,1683791080857,62d5ce23bbc1c5a5418f919815ebadf64cf54acc39be7839bd865aa7ff99c0e8
+logos/icon-fail.svg,1683791080863,f651279aa076dd93924442062a13b1532db31c2d24d465d64c342ae917e97741
+logos/icon-blue.svg,1683791080862,61c9c5a1f5f1da1f176bc14cdd5253ed950fbe368b2a95f8ddf473cb53d508d1
+logos/icon-white.svg,1683791080865,8cde4aedecd49248dbff0a3326db72a0a2957ae6fddbfc6937fbde005f8f3691
+logos/logo-home.svg,1683791080867,22f34923d22812c008f923a17ede1a78bc80de78b8ff9d29137e47b74f98d190
+logos/logo-black-wide.svg,1683791080866,71513b726d72b6da31da5596d22d0c16c24ddc79c336ec97b92b012c9fefa4c8
+logos/logo-white-wide.svg,1683791080869,eaafb2eb52aec1424575a8f98e43ca676011f13db95e7c580362e86416c85102
+static/css/main.e6b87447.css,1683791116876,450c3435403389a7ed1e5a56b12152937f9c27f156dc7c26e4a30f919fb1d112
+static/js/main.18302841.js.LICENSE.txt,1683791116876,bbda607af6d4fcdfb72c785d7c5c6ff40ec87dff5a23c6c7db76a43d56cd2ead
+logos/logo192.png,1683791080870,1d108d2885e7098d4850ecb339f6e3189265feb7fc38aee2127930c9a7822dd9
+static/css/main.e6b87447.css.map,1683791116876,352ae90c4162019e3957f1ccfbf95f6fbedfdb8012e53c02310c231a4184ed26
+logos/logo512.png,1683791080872,8d33f703e8de9a6bc36b5d30543614ad771534073497a76346c80dfb0613be48
+static/media/Satoshi-Bold.a0e6d25529eab537426c.woff2,1683791116877,0322da84a6df2b206c14be485db038e0235c2e3cb8900aeec91e6715370217c9
+static/media/Satoshi-Bold.a875ff682ee232938607.woff,1683791116876,669b77becddb880ad6eea8afaa0284f5cd30205e3774249b4c925b3b4357e33c
+static/media/Satoshi-Medium.1ffe968245568e8ba1e7.woff2,1683791116874,1a9856d068e4a9398ebb559091c26b7152d50b77aceef2d192adefd234580577
+static/media/Satoshi-Medium.2419b46c96ed15331ba2.woff,1683791116874,c9f69fbb1b54f1651c08a59d599875751d87462d69bb8a4ea75b781b12f2fb0a
+static/media/Satoshi-Bold.137a52d9f47dd71c6247.ttf,1683791116874,193cdc00db3a07259a85711d51aac391ed19600a2fabe5a9ae2fb841c241a5d8
+static/media/Satoshi-Medium.759562088ba19068aef8.ttf,1683791116874,b88be54c30614e53c240020cd528854faf72bdbbcc6d0703e8e1dd8009e1778b
+static/media/Oakes-Grotesk-Bold.a6b9f0fbd8198bd97c6d.ttf,1683791116876,027e39f5f236c6df4f3cf2ecef6b2855e217a3640bc15ecf8db800de406d0fcd
+static/js/main.18302841.js,1683791116875,6e7717affdeac6e7b2724bcbbbb01c23b6375721c6f569a7c3f56a23cb32e096
+static/js/main.18302841.js.map,1683791116875,c52b7d2d75bf575f5ebadf6a91e41d60769781d495589fd49bbd6354bdc2a4c9
diff --git a/.firebaserc b/.firebaserc
new file mode 100644
index 00000000..b34ef3cb
--- /dev/null
+++ b/.firebaserc
@@ -0,0 +1,5 @@
+{
+  "projects": {
+    "default": "markan-where"
+  }
+}
diff --git a/.gitignore b/.gitignore
index 4d29575d..0ab4e86e 100644
--- a/.gitignore
+++ b/.gitignore
@@ -21,3 +21,5 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+/src/database
diff --git a/README.md b/README.md
index e273017e..daed1652 100644
--- a/README.md
+++ b/README.md
@@ -1,15 +1,9 @@
-# Rocket Academy Coding Bootcamp: Project 1: Frontend App
+# Makan Where: Makan Recommendation Generator by @markan.sg!
 
-https://bc.rocketacademy.co/1-frontend/1.p-frontend-app
+Not sure what to eat? With this app, you can find curated food recommendations around you by Mark!
+You can explore the app here: https://markcwy-ra.github.io/markan-where/
 
-## Available Scripts
+## Current Version Notes
 
-This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app). In the project directory, you can run:
-
-### `npm start`
-
-Runs the app in the development mode.\
-Open [http://localhost:3000](http://localhost:3000) to view it in your browser.
-
-The page will reload when you make changes.\
-You may also see any lint errors in the console.
+Currently has limited number of food places, list will be updated soon!
+Images and location takes a while to load, so please be patient!
diff --git a/firebase.json b/firebase.json
new file mode 100644
index 00000000..340ed5b7
--- /dev/null
+++ b/firebase.json
@@ -0,0 +1,16 @@
+{
+  "hosting": {
+    "public": "build",
+    "ignore": [
+      "firebase.json",
+      "**/.*",
+      "**/node_modules/**"
+    ],
+    "rewrites": [
+      {
+        "source": "**",
+        "destination": "/index.html"
+      }
+    ]
+  }
+}
diff --git a/package-lock.json b/package-lock.json
index c205fc57..ad0e9385 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,9 +8,16 @@
       "name": "project1-bootcamp",
       "version": "0.1.0",
       "dependencies": {
+        "axios": "^1.3.6",
+        "framer-motion": "^10.11.2",
+        "geolib": "^3.3.3",
+        "gh-pages": "^3.2.3",
+        "papaparse": "^5.4.1",
         "react": "^18.1.0",
         "react-dom": "^18.1.0",
-        "react-scripts": "5.0.1"
+        "react-router-dom": "^6.10.0",
+        "react-scripts": "5.0.1",
+        "react-slider": "^2.0.4"
       }
     },
     "node_modules/@ampproject/remapping": {
@@ -1997,6 +2004,21 @@
         "postcss": "^8.3"
       }
     },
+    "node_modules/@emotion/is-prop-valid": {
+      "version": "0.8.8",
+      "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz",
+      "integrity": "sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==",
+      "optional": true,
+      "dependencies": {
+        "@emotion/memoize": "0.7.4"
+      }
+    },
+    "node_modules/@emotion/memoize": {
+      "version": "0.7.4",
+      "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz",
+      "integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==",
+      "optional": true
+    },
     "node_modules/@eslint/eslintrc": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-1.2.2.tgz",
@@ -2866,6 +2888,14 @@
         }
       }
     },
+    "node_modules/@remix-run/router": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.5.0.tgz",
+      "integrity": "sha512-bkUDCp8o1MvFO+qxkODcbhSqRa6P2GXgrGZVpt0dCXNW2HCSCqYI0ZoAqEOSAjRWmmlKcYgFvN4B4S+zo/f8kg==",
+      "engines": {
+        "node": ">=14"
+      }
+    },
     "node_modules/@rollup/plugin-babel": {
       "version": "5.3.1",
       "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz",
@@ -4121,6 +4151,14 @@
         "node": ">=8"
       }
     },
+    "node_modules/array-uniq": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/array-uniq/-/array-uniq-1.0.3.tgz",
+      "integrity": "sha512-MNha4BWQ6JbwhFhj03YK552f7cb3AzoE8SzeljgChvL1dl3IcvggXVz1DilzySZkCja+CXuZbdW7yATchWn8/Q==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/array.prototype.flat": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/array.prototype.flat/-/array.prototype.flat-1.3.0.tgz",
@@ -4226,6 +4264,29 @@
         "node": ">=4"
       }
     },
+    "node_modules/axios": {
+      "version": "1.3.6",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.3.6.tgz",
+      "integrity": "sha512-PEcdkk7JcdPiMDkvM4K6ZBRYq9keuVJsToxm2zQIM70Qqo2WHTdJZMXcG9X+RmRp2VPNUQC8W1RAGbgt6b1yMg==",
+      "dependencies": {
+        "follow-redirects": "^1.15.0",
+        "form-data": "^4.0.0",
+        "proxy-from-env": "^1.1.0"
+      }
+    },
+    "node_modules/axios/node_modules/form-data": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
+      "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
+      "dependencies": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "mime-types": "^2.1.12"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/axobject-query": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-2.2.0.tgz",
@@ -5950,6 +6011,11 @@
       "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.131.tgz",
       "integrity": "sha512-oi3YPmaP87hiHn0c4ePB67tXaF+ldGhxvZnT19tW9zX6/Ej+pLN0Afja5rQ6S+TND7I9EuwQTT8JYn1k7R7rrw=="
     },
+    "node_modules/email-addresses": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/email-addresses/-/email-addresses-3.1.0.tgz",
+      "integrity": "sha512-k0/r7GrWVL32kZlGwfPNgB2Y/mMXVTq/decgLczm/j34whdaspNrZO8CnXPf1laaHxI6ptUlsnAxN+UAPw+fzg=="
+    },
     "node_modules/emittery": {
       "version": "0.8.1",
       "resolved": "https://registry.npmjs.org/emittery/-/emittery-0.8.1.tgz",
@@ -7073,6 +7139,30 @@
         "node": ">=10"
       }
     },
+    "node_modules/filename-reserved-regex": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/filename-reserved-regex/-/filename-reserved-regex-2.0.0.tgz",
+      "integrity": "sha512-lc1bnsSr4L4Bdif8Xb/qrtokGbq5zlsms/CYH8PP+WtCkGNF65DPiQY8vG3SakEdRn8Dlnm+gW/qWKKjS5sZzQ==",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/filenamify": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/filenamify/-/filenamify-4.3.0.tgz",
+      "integrity": "sha512-hcFKyUG57yWGAzu1CMt/dPzYZuv+jAJUT85bL8mrXvNe6hWj6yEHEc4EdcgiA6Z3oi1/9wXJdZPXF2dZNgwgOg==",
+      "dependencies": {
+        "filename-reserved-regex": "^2.0.0",
+        "strip-outer": "^1.0.1",
+        "trim-repeated": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/filesize": {
       "version": "8.0.7",
       "resolved": "https://registry.npmjs.org/filesize/-/filesize-8.0.7.tgz",
@@ -7171,9 +7261,9 @@
       "integrity": "sha512-WIWGi2L3DyTUvUrwRKgGi9TwxQMUEqPOPQBVi71R96jZXJdFskXEmf54BoZaS1kknGODoIGASGEzBUYdyMCBJg=="
     },
     "node_modules/follow-redirects": {
-      "version": "1.14.9",
-      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.14.9.tgz",
-      "integrity": "sha512-MQDfihBQYMcyy5dhRDJUHcw7lb2Pv/TuE6xP1vyraLukNDHKbDxDNaOE3NbCAdKQApno+GPRyo1YAp89yCjK4w==",
+      "version": "1.15.2",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.2.tgz",
+      "integrity": "sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==",
       "funding": [
         {
           "type": "individual",
@@ -7378,6 +7468,29 @@
         "url": "https://www.patreon.com/infusion"
       }
     },
+    "node_modules/framer-motion": {
+      "version": "10.11.2",
+      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-10.11.2.tgz",
+      "integrity": "sha512-IrwuC9regNOU99JoM/Z62CAMA3awGV6AcF7e3bcgXk/ZoNlGSt5aVq0J7UAwtLmCkwVlRvBkiMnvv2mZ1GW2pg==",
+      "dependencies": {
+        "tslib": "^2.4.0"
+      },
+      "optionalDependencies": {
+        "@emotion/is-prop-valid": "^0.8.2"
+      },
+      "peerDependencies": {
+        "react": "^18.0.0",
+        "react-dom": "^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "react": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/fresh": {
       "version": "0.5.2",
       "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz",
@@ -7448,6 +7561,11 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/geolib": {
+      "version": "3.3.3",
+      "resolved": "https://registry.npmjs.org/geolib/-/geolib-3.3.3.tgz",
+      "integrity": "sha512-YO704pzdB/8QQekQuDmFD5uv5RAwAf4rOUPdcMhdEOz+HoPWD0sC7Qqdwb+LAvwIjXVRawx0QgZlocKYh8PFOQ=="
+    },
     "node_modules/get-caller-file": {
       "version": "2.0.5",
       "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz",
@@ -7508,6 +7626,87 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/gh-pages": {
+      "version": "3.2.3",
+      "resolved": "https://registry.npmjs.org/gh-pages/-/gh-pages-3.2.3.tgz",
+      "integrity": "sha512-jA1PbapQ1jqzacECfjUaO9gV8uBgU6XNMV0oXLtfCX3haGLe5Atq8BxlrADhbD6/UdG9j6tZLWAkAybndOXTJg==",
+      "dependencies": {
+        "async": "^2.6.1",
+        "commander": "^2.18.0",
+        "email-addresses": "^3.0.1",
+        "filenamify": "^4.3.0",
+        "find-cache-dir": "^3.3.1",
+        "fs-extra": "^8.1.0",
+        "globby": "^6.1.0"
+      },
+      "bin": {
+        "gh-pages": "bin/gh-pages.js",
+        "gh-pages-clean": "bin/gh-pages-clean.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/gh-pages/node_modules/array-union": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/array-union/-/array-union-1.0.2.tgz",
+      "integrity": "sha512-Dxr6QJj/RdU/hCaBjOfxW+q6lyuVE6JFWIrAUpuOOhoJJoQ99cUn3igRaHVB5P9WrgFVN0FfArM3x0cueOU8ng==",
+      "dependencies": {
+        "array-uniq": "^1.0.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/gh-pages/node_modules/commander": {
+      "version": "2.20.3",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
+      "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ=="
+    },
+    "node_modules/gh-pages/node_modules/fs-extra": {
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-8.1.0.tgz",
+      "integrity": "sha512-yhlQgA6mnOJUKOsRUFsgJdQCvkKhcz8tlZG5HBQfReYZy46OwLcY+Zia0mtdHsOo9y/hP+CxMN0TU9QxoOtG4g==",
+      "dependencies": {
+        "graceful-fs": "^4.2.0",
+        "jsonfile": "^4.0.0",
+        "universalify": "^0.1.0"
+      },
+      "engines": {
+        "node": ">=6 <7 || >=8"
+      }
+    },
+    "node_modules/gh-pages/node_modules/globby": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/globby/-/globby-6.1.0.tgz",
+      "integrity": "sha512-KVbFv2TQtbzCoxAnfD6JcHZTYCzyliEaaeM/gH8qQdkKr5s0OP9scEgvdcngyk7AVdY6YVW/TJHd+lQ/Df3Daw==",
+      "dependencies": {
+        "array-union": "^1.0.1",
+        "glob": "^7.0.3",
+        "object-assign": "^4.0.1",
+        "pify": "^2.0.0",
+        "pinkie-promise": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/gh-pages/node_modules/jsonfile": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-4.0.0.tgz",
+      "integrity": "sha512-m6F1R3z8jjlf2imQHS2Qez5sjKWQzbuuhuJ/FKYFRZvPE3PuHcSMVZzfsLhGVOkfd20obL5SWEBew5ShlquNxg==",
+      "optionalDependencies": {
+        "graceful-fs": "^4.1.6"
+      }
+    },
+    "node_modules/gh-pages/node_modules/universalify": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/universalify/-/universalify-0.1.2.tgz",
+      "integrity": "sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg==",
+      "engines": {
+        "node": ">= 4.0.0"
+      }
+    },
     "node_modules/glob": {
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.0.tgz",
@@ -11348,6 +11547,11 @@
         "node": ">=6"
       }
     },
+    "node_modules/papaparse": {
+      "version": "5.4.1",
+      "resolved": "https://registry.npmjs.org/papaparse/-/papaparse-5.4.1.tgz",
+      "integrity": "sha512-HipMsgJkZu8br23pW15uvo6sib6wne/4woLZPlFf3rpDyMe9ywEXUsuD7+6K9PRkJlVT51j/sCOYDKGGS3ZJrw=="
+    },
     "node_modules/param-case": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/param-case/-/param-case-3.0.4.tgz",
@@ -11470,6 +11674,33 @@
         "url": "https://github.com/sponsors/jonschlinkert"
       }
     },
+    "node_modules/pify": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
+      "integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/pinkie": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/pinkie/-/pinkie-2.0.4.tgz",
+      "integrity": "sha512-MnUuEycAemtSaeFSjXKW/aroV7akBbY+Sv+RkyqFjgAe73F+MR0TBWKBRDkmfWq/HiFmdavfZ1G7h4SPZXaCSg==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/pinkie-promise": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/pinkie-promise/-/pinkie-promise-2.0.1.tgz",
+      "integrity": "sha512-0Gni6D4UcLTbv9c57DfxDGdr41XfgUjqWZu492f0cIGr16zDU06BWP/RAEvOuo7CQ0CNjHaLlM59YJJFm3NWlw==",
+      "dependencies": {
+        "pinkie": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/pirates": {
       "version": "4.0.5",
       "resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.5.tgz",
@@ -12815,6 +13046,11 @@
         "node": ">= 0.10"
       }
     },
+    "node_modules/proxy-from-env": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
+      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
+    },
     "node_modules/psl": {
       "version": "1.8.0",
       "resolved": "https://registry.npmjs.org/psl/-/psl-1.8.0.tgz",
@@ -13112,6 +13348,36 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-router": {
+      "version": "6.10.0",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.10.0.tgz",
+      "integrity": "sha512-Nrg0BWpQqrC3ZFFkyewrflCud9dio9ME3ojHCF/WLsprJVzkq3q3UeEhMCAW1dobjeGbWgjNn/PVF6m46ANxXQ==",
+      "dependencies": {
+        "@remix-run/router": "1.5.0"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "peerDependencies": {
+        "react": ">=16.8"
+      }
+    },
+    "node_modules/react-router-dom": {
+      "version": "6.10.0",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.10.0.tgz",
+      "integrity": "sha512-E5dfxRPuXKJqzwSe/qGcqdwa18QiWC6f3H3cWXM24qj4N0/beCIf/CWTipop2xm7mR0RCS99NnaqPNjHtrAzCg==",
+      "dependencies": {
+        "@remix-run/router": "1.5.0",
+        "react-router": "6.10.0"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "peerDependencies": {
+        "react": ">=16.8",
+        "react-dom": ">=16.8"
+      }
+    },
     "node_modules/react-scripts": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz",
@@ -13184,6 +13450,17 @@
         }
       }
     },
+    "node_modules/react-slider": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/react-slider/-/react-slider-2.0.4.tgz",
+      "integrity": "sha512-sWwQD01n6v+MbeLCYthJGZPc0kzOyhQHyd0bSo0edg+IAxTVQmj3Oy4SBK65eX6gNwS9meUn6Z5sIBUVmwAd9g==",
+      "dependencies": {
+        "prop-types": "^15.8.1"
+      },
+      "peerDependencies": {
+        "react": "^16 || ^17 || ^18"
+      }
+    },
     "node_modules/readable-stream": {
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.0.tgz",
@@ -14216,6 +14493,17 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/strip-outer": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/strip-outer/-/strip-outer-1.0.1.tgz",
+      "integrity": "sha512-k55yxKHwaXnpYGsOzg4Vl8+tDrWylxDEpknGjhTiZB8dFRU5rTo9CAzeycivxV3s+zlTKwrs6WxMxR95n26kwg==",
+      "dependencies": {
+        "escape-string-regexp": "^1.0.2"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/style-loader": {
       "version": "3.3.1",
       "resolved": "https://registry.npmjs.org/style-loader/-/style-loader-3.3.1.tgz",
@@ -14680,6 +14968,17 @@
         "node": ">=8"
       }
     },
+    "node_modules/trim-repeated": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/trim-repeated/-/trim-repeated-1.0.0.tgz",
+      "integrity": "sha512-pkonvlKk8/ZuR0D5tLW8ljt5I8kmxp2XKymhepUeOdCEfKpZaktSArkLHZt76OB1ZvO9bssUsDty4SWhLvZpLg==",
+      "dependencies": {
+        "escape-string-regexp": "^1.0.2"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/tryer": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/tryer/-/tryer-1.0.1.tgz",
@@ -17187,6 +17486,21 @@
       "integrity": "sha512-T5ZyNSw9G0x0UDFiXV40a7VjKw2b+l4G+S0sctKqxhx8cg9QtMUAGwJBVU9mHPDPoZEmwm0tEoukjl4zb9MU7Q==",
       "requires": {}
     },
+    "@emotion/is-prop-valid": {
+      "version": "0.8.8",
+      "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz",
+      "integrity": "sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==",
+      "optional": true,
+      "requires": {
+        "@emotion/memoize": "0.7.4"
+      }
+    },
+    "@emotion/memoize": {
+      "version": "0.7.4",
+      "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz",
+      "integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==",
+      "optional": true
+    },
     "@eslint/eslintrc": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-1.2.2.tgz",
@@ -17810,6 +18124,11 @@
         "source-map": "^0.7.3"
       }
     },
+    "@remix-run/router": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.5.0.tgz",
+      "integrity": "sha512-bkUDCp8o1MvFO+qxkODcbhSqRa6P2GXgrGZVpt0dCXNW2HCSCqYI0ZoAqEOSAjRWmmlKcYgFvN4B4S+zo/f8kg=="
+    },
     "@rollup/plugin-babel": {
       "version": "5.3.1",
       "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz",
@@ -18750,6 +19069,11 @@
       "resolved": "https://registry.npmjs.org/array-union/-/array-union-2.1.0.tgz",
       "integrity": "sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw=="
     },
+    "array-uniq": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/array-uniq/-/array-uniq-1.0.3.tgz",
+      "integrity": "sha512-MNha4BWQ6JbwhFhj03YK552f7cb3AzoE8SzeljgChvL1dl3IcvggXVz1DilzySZkCja+CXuZbdW7yATchWn8/Q=="
+    },
     "array.prototype.flat": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/array.prototype.flat/-/array.prototype.flat-1.3.0.tgz",
@@ -18818,6 +19142,28 @@
       "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.4.1.tgz",
       "integrity": "sha512-gd1kmb21kwNuWr6BQz8fv6GNECPBnUasepcoLbekws23NVBLODdsClRZ+bQ8+9Uomf3Sm3+Vwn0oYG9NvwnJCw=="
     },
+    "axios": {
+      "version": "1.3.6",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.3.6.tgz",
+      "integrity": "sha512-PEcdkk7JcdPiMDkvM4K6ZBRYq9keuVJsToxm2zQIM70Qqo2WHTdJZMXcG9X+RmRp2VPNUQC8W1RAGbgt6b1yMg==",
+      "requires": {
+        "follow-redirects": "^1.15.0",
+        "form-data": "^4.0.0",
+        "proxy-from-env": "^1.1.0"
+      },
+      "dependencies": {
+        "form-data": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
+          "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
+          "requires": {
+            "asynckit": "^0.4.0",
+            "combined-stream": "^1.0.8",
+            "mime-types": "^2.1.12"
+          }
+        }
+      }
+    },
     "axobject-query": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-2.2.0.tgz",
@@ -20080,6 +20426,11 @@
       "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.131.tgz",
       "integrity": "sha512-oi3YPmaP87hiHn0c4ePB67tXaF+ldGhxvZnT19tW9zX6/Ej+pLN0Afja5rQ6S+TND7I9EuwQTT8JYn1k7R7rrw=="
     },
+    "email-addresses": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/email-addresses/-/email-addresses-3.1.0.tgz",
+      "integrity": "sha512-k0/r7GrWVL32kZlGwfPNgB2Y/mMXVTq/decgLczm/j34whdaspNrZO8CnXPf1laaHxI6ptUlsnAxN+UAPw+fzg=="
+    },
     "emittery": {
       "version": "0.8.1",
       "resolved": "https://registry.npmjs.org/emittery/-/emittery-0.8.1.tgz",
@@ -20909,6 +21260,21 @@
         }
       }
     },
+    "filename-reserved-regex": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/filename-reserved-regex/-/filename-reserved-regex-2.0.0.tgz",
+      "integrity": "sha512-lc1bnsSr4L4Bdif8Xb/qrtokGbq5zlsms/CYH8PP+WtCkGNF65DPiQY8vG3SakEdRn8Dlnm+gW/qWKKjS5sZzQ=="
+    },
+    "filenamify": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/filenamify/-/filenamify-4.3.0.tgz",
+      "integrity": "sha512-hcFKyUG57yWGAzu1CMt/dPzYZuv+jAJUT85bL8mrXvNe6hWj6yEHEc4EdcgiA6Z3oi1/9wXJdZPXF2dZNgwgOg==",
+      "requires": {
+        "filename-reserved-regex": "^2.0.0",
+        "strip-outer": "^1.0.1",
+        "trim-repeated": "^1.0.0"
+      }
+    },
     "filesize": {
       "version": "8.0.7",
       "resolved": "https://registry.npmjs.org/filesize/-/filesize-8.0.7.tgz",
@@ -20985,9 +21351,9 @@
       "integrity": "sha512-WIWGi2L3DyTUvUrwRKgGi9TwxQMUEqPOPQBVi71R96jZXJdFskXEmf54BoZaS1kknGODoIGASGEzBUYdyMCBJg=="
     },
     "follow-redirects": {
-      "version": "1.14.9",
-      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.14.9.tgz",
-      "integrity": "sha512-MQDfihBQYMcyy5dhRDJUHcw7lb2Pv/TuE6xP1vyraLukNDHKbDxDNaOE3NbCAdKQApno+GPRyo1YAp89yCjK4w=="
+      "version": "1.15.2",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.2.tgz",
+      "integrity": "sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA=="
     },
     "fork-ts-checker-webpack-plugin": {
       "version": "6.5.2",
@@ -21112,6 +21478,15 @@
       "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.2.0.tgz",
       "integrity": "sha512-MhLuK+2gUcnZe8ZHlaaINnQLl0xRIGRfcGk2yl8xoQAfHrSsL3rYu6FCmBdkdbhc9EPlwyGHewaRsvwRMJtAlA=="
     },
+    "framer-motion": {
+      "version": "10.11.2",
+      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-10.11.2.tgz",
+      "integrity": "sha512-IrwuC9regNOU99JoM/Z62CAMA3awGV6AcF7e3bcgXk/ZoNlGSt5aVq0J7UAwtLmCkwVlRvBkiMnvv2mZ1GW2pg==",
+      "requires": {
+        "@emotion/is-prop-valid": "^0.8.2",
+        "tslib": "^2.4.0"
+      }
+    },
     "fresh": {
       "version": "0.5.2",
       "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz",
@@ -21163,6 +21538,11 @@
       "resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz",
       "integrity": "sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg=="
     },
+    "geolib": {
+      "version": "3.3.3",
+      "resolved": "https://registry.npmjs.org/geolib/-/geolib-3.3.3.tgz",
+      "integrity": "sha512-YO704pzdB/8QQekQuDmFD5uv5RAwAf4rOUPdcMhdEOz+HoPWD0sC7Qqdwb+LAvwIjXVRawx0QgZlocKYh8PFOQ=="
+    },
     "get-caller-file": {
       "version": "2.0.5",
       "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz",
@@ -21202,6 +21582,70 @@
         "get-intrinsic": "^1.1.1"
       }
     },
+    "gh-pages": {
+      "version": "3.2.3",
+      "resolved": "https://registry.npmjs.org/gh-pages/-/gh-pages-3.2.3.tgz",
+      "integrity": "sha512-jA1PbapQ1jqzacECfjUaO9gV8uBgU6XNMV0oXLtfCX3haGLe5Atq8BxlrADhbD6/UdG9j6tZLWAkAybndOXTJg==",
+      "requires": {
+        "async": "^2.6.1",
+        "commander": "^2.18.0",
+        "email-addresses": "^3.0.1",
+        "filenamify": "^4.3.0",
+        "find-cache-dir": "^3.3.1",
+        "fs-extra": "^8.1.0",
+        "globby": "^6.1.0"
+      },
+      "dependencies": {
+        "array-union": {
+          "version": "1.0.2",
+          "resolved": "https://registry.npmjs.org/array-union/-/array-union-1.0.2.tgz",
+          "integrity": "sha512-Dxr6QJj/RdU/hCaBjOfxW+q6lyuVE6JFWIrAUpuOOhoJJoQ99cUn3igRaHVB5P9WrgFVN0FfArM3x0cueOU8ng==",
+          "requires": {
+            "array-uniq": "^1.0.1"
+          }
+        },
+        "commander": {
+          "version": "2.20.3",
+          "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
+          "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ=="
+        },
+        "fs-extra": {
+          "version": "8.1.0",
+          "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-8.1.0.tgz",
+          "integrity": "sha512-yhlQgA6mnOJUKOsRUFsgJdQCvkKhcz8tlZG5HBQfReYZy46OwLcY+Zia0mtdHsOo9y/hP+CxMN0TU9QxoOtG4g==",
+          "requires": {
+            "graceful-fs": "^4.2.0",
+            "jsonfile": "^4.0.0",
+            "universalify": "^0.1.0"
+          }
+        },
+        "globby": {
+          "version": "6.1.0",
+          "resolved": "https://registry.npmjs.org/globby/-/globby-6.1.0.tgz",
+          "integrity": "sha512-KVbFv2TQtbzCoxAnfD6JcHZTYCzyliEaaeM/gH8qQdkKr5s0OP9scEgvdcngyk7AVdY6YVW/TJHd+lQ/Df3Daw==",
+          "requires": {
+            "array-union": "^1.0.1",
+            "glob": "^7.0.3",
+            "object-assign": "^4.0.1",
+            "pify": "^2.0.0",
+            "pinkie-promise": "^2.0.0"
+          }
+        },
+        "jsonfile": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-4.0.0.tgz",
+          "integrity": "sha512-m6F1R3z8jjlf2imQHS2Qez5sjKWQzbuuhuJ/FKYFRZvPE3PuHcSMVZzfsLhGVOkfd20obL5SWEBew5ShlquNxg==",
+          "requires": {
+            "graceful-fs": "^4.1.6"
+          }
+        },
+        "universalify": {
+          "version": "0.1.2",
+          "resolved": "https://registry.npmjs.org/universalify/-/universalify-0.1.2.tgz",
+          "integrity": "sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg=="
+        }
+      }
+    },
     "glob": {
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.0.tgz",
@@ -23976,6 +24420,11 @@
       "resolved": "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz",
       "integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ=="
     },
+    "papaparse": {
+      "version": "5.4.1",
+      "resolved": "https://registry.npmjs.org/papaparse/-/papaparse-5.4.1.tgz",
+      "integrity": "sha512-HipMsgJkZu8br23pW15uvo6sib6wne/4woLZPlFf3rpDyMe9ywEXUsuD7+6K9PRkJlVT51j/sCOYDKGGS3ZJrw=="
+    },
     "param-case": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/param-case/-/param-case-3.0.4.tgz",
@@ -24068,6 +24517,24 @@
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
       "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA=="
     },
+    "pify": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
+      "integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog=="
+    },
+    "pinkie": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/pinkie/-/pinkie-2.0.4.tgz",
+      "integrity": "sha512-MnUuEycAemtSaeFSjXKW/aroV7akBbY+Sv+RkyqFjgAe73F+MR0TBWKBRDkmfWq/HiFmdavfZ1G7h4SPZXaCSg=="
+    },
+    "pinkie-promise": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/pinkie-promise/-/pinkie-promise-2.0.1.tgz",
+      "integrity": "sha512-0Gni6D4UcLTbv9c57DfxDGdr41XfgUjqWZu492f0cIGr16zDU06BWP/RAEvOuo7CQ0CNjHaLlM59YJJFm3NWlw==",
+      "requires": {
+        "pinkie": "^2.0.0"
+      }
+    },
     "pirates": {
       "version": "4.0.5",
       "resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.5.tgz",
@@ -24908,6 +25375,11 @@
         }
       }
     },
+    "proxy-from-env": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
+      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
+    },
     "psl": {
       "version": "1.8.0",
       "resolved": "https://registry.npmjs.org/psl/-/psl-1.8.0.tgz",
@@ -25119,6 +25591,23 @@
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz",
       "integrity": "sha512-F27qZr8uUqwhWZboondsPx8tnC3Ct3SxZA3V5WyEvujRyyNv0VYPhoBg1gZ8/MV5tubQp76Trw8lTv9hzRBa+A=="
     },
+    "react-router": {
+      "version": "6.10.0",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.10.0.tgz",
+      "integrity": "sha512-Nrg0BWpQqrC3ZFFkyewrflCud9dio9ME3ojHCF/WLsprJVzkq3q3UeEhMCAW1dobjeGbWgjNn/PVF6m46ANxXQ==",
+      "requires": {
+        "@remix-run/router": "1.5.0"
+      }
+    },
+    "react-router-dom": {
+      "version": "6.10.0",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.10.0.tgz",
+      "integrity": "sha512-E5dfxRPuXKJqzwSe/qGcqdwa18QiWC6f3H3cWXM24qj4N0/beCIf/CWTipop2xm7mR0RCS99NnaqPNjHtrAzCg==",
+      "requires": {
+        "@remix-run/router": "1.5.0",
+        "react-router": "6.10.0"
+      }
+    },
     "react-scripts": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz",
@@ -25174,6 +25663,14 @@
         "workbox-webpack-plugin": "^6.4.1"
       }
     },
+    "react-slider": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/react-slider/-/react-slider-2.0.4.tgz",
+      "integrity": "sha512-sWwQD01n6v+MbeLCYthJGZPc0kzOyhQHyd0bSo0edg+IAxTVQmj3Oy4SBK65eX6gNwS9meUn6Z5sIBUVmwAd9g==",
+      "requires": {
+        "prop-types": "^15.8.1"
+      }
+    },
     "readable-stream": {
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.0.tgz",
@@ -25940,6 +26437,14 @@
       "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz",
       "integrity": "sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig=="
     },
+    "strip-outer": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/strip-outer/-/strip-outer-1.0.1.tgz",
+      "integrity": "sha512-k55yxKHwaXnpYGsOzg4Vl8+tDrWylxDEpknGjhTiZB8dFRU5rTo9CAzeycivxV3s+zlTKwrs6WxMxR95n26kwg==",
+      "requires": {
+        "escape-string-regexp": "^1.0.2"
+      }
+    },
     "style-loader": {
       "version": "3.3.1",
       "resolved": "https://registry.npmjs.org/style-loader/-/style-loader-3.3.1.tgz",
@@ -26286,6 +26791,14 @@
         "punycode": "^2.1.1"
       }
     },
+    "trim-repeated": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/trim-repeated/-/trim-repeated-1.0.0.tgz",
+      "integrity": "sha512-pkonvlKk8/ZuR0D5tLW8ljt5I8kmxp2XKymhepUeOdCEfKpZaktSArkLHZt76OB1ZvO9bssUsDty4SWhLvZpLg==",
+      "requires": {
+        "escape-string-regexp": "^1.0.2"
+      }
+    },
     "tryer": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/tryer/-/tryer-1.0.1.tgz",
diff --git a/package.json b/package.json
index a100866d..1ebc76f3 100644
--- a/package.json
+++ b/package.json
@@ -2,12 +2,22 @@
   "name": "project1-bootcamp",
   "version": "0.1.0",
   "private": true,
+  "homepage": ".",
   "dependencies": {
+    "axios": "^1.3.6",
+    "framer-motion": "^10.11.2",
+    "geolib": "^3.3.3",
+    "gh-pages": "^3.2.3",
+    "papaparse": "^5.4.1",
     "react": "^18.1.0",
     "react-dom": "^18.1.0",
-    "react-scripts": "5.0.1"
+    "react-router-dom": "^6.10.0",
+    "react-scripts": "5.0.1",
+    "react-slider": "^2.0.4"
   },
   "scripts": {
+    "predeploy": "npm run build",
+    "deploy": "gh-pages -d build",
     "start": "react-scripts start",
     "build": "react-scripts build"
   },
diff --git a/public/favicon.ico b/public/favicon.ico
old mode 100755
new mode 100644
index c17bf23f..0efe5f36
Binary files a/public/favicon.ico and b/public/favicon.ico differ
diff --git a/public/icons/filter.svg b/public/icons/filter.svg
new file mode 100644
index 00000000..e877afde
--- /dev/null
+++ b/public/icons/filter.svg
@@ -0,0 +1,3 @@
+<svg width="19" height="13" viewBox="0 0 19 13" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0.5 0.464233V2.46423H18.5V0.464233H0.5ZM7.5 12.4642H11.5V10.4642H7.5V12.4642ZM15.5 7.46423H3.5V5.46423H15.5V7.46423Z" fill="white"/>
+</svg>
diff --git a/public/icons/location.svg b/public/icons/location.svg
new file mode 100644
index 00000000..5907135d
--- /dev/null
+++ b/public/icons/location.svg
@@ -0,0 +1,3 @@
+<svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M16.0572 2.25057C16.4028 1.4255 15.5742 0.596457 14.7489 0.941676L1.5443 6.46562C0.68189 6.82639 0.741987 8.06786 1.63521 8.34364L6.99995 10L8.64847 15.3611C8.92333 16.2549 10.1653 16.316 10.5266 15.4535L16.0572 2.25057Z" fill="white"/>
+</svg>
diff --git a/public/index.html b/public/index.html
index bd669818..56fd3355 100644
--- a/public/index.html
+++ b/public/index.html
@@ -7,9 +7,9 @@
     <meta name="theme-color" content="#000000" />
     <meta
       name="description"
-      content="Web site created using create-react-app"
+      content="Don't know what to eat? Get food recommendations from @markan.sg!"
     />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logos/logo192.png" />
     <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
@@ -24,7 +24,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>Rocket Bootcamp Project</title>
+    <title>Makan Where?</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
diff --git a/public/logo192.png b/public/logo192.png
deleted file mode 100755
index 1dd995bc..00000000
Binary files a/public/logo192.png and /dev/null differ
diff --git a/public/logo512.png b/public/logo512.png
deleted file mode 100755
index 81efd5f5..00000000
Binary files a/public/logo512.png and /dev/null differ
diff --git a/public/logos/icon-blue.svg b/public/logos/icon-blue.svg
new file mode 100644
index 00000000..6b6310a6
--- /dev/null
+++ b/public/logos/icon-blue.svg
@@ -0,0 +1,6 @@
+<svg width="150" height="151" viewBox="0 0 150 151" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M150 75.0388C150 33.6175 116.421 0.0388184 75 0.0388184C33.5786 0.0388184 0 33.6175 0 75.0388C0 116.46 33.5786 150.039 75 150.039C116.421 150.039 150 116.46 150 75.0388Z" fill="#0078EF"/>
+<path d="M57.8572 48.146L52.4914 62.576C52.4314 62.7346 52.2086 62.7346 52.1486 62.576L46.8086 48.1503C46.6929 47.8375 46.3929 47.6275 46.0586 47.6275H42.0857C41.9272 47.6275 41.7986 47.756 41.7986 47.9146V67.166C41.7986 67.3246 41.9272 67.4532 42.0857 67.4532H44.9486C45.1072 67.4532 45.2357 67.3246 45.2357 67.166V53.5332C45.2357 53.3275 45.5186 53.2803 45.5914 53.4689L50.4686 66.9217C50.5843 67.2389 50.8843 67.4489 51.2229 67.4489H53.4814C53.82 67.4489 54.12 67.2346 54.2357 66.9175L59.0614 53.4775C59.13 53.2846 59.4172 53.336 59.4172 53.5375V67.1617C59.4172 67.3203 59.5457 67.4489 59.7043 67.4489H62.5372C62.6957 67.4489 62.8243 67.3203 62.8243 67.1617V47.9103C62.8243 47.7517 62.6957 47.6232 62.5372 47.6232H58.6157C58.2814 47.6232 57.9814 47.8332 57.8657 48.146H57.8572Z" fill="white"/>
+<path d="M103.243 48.146L97.8771 62.576C97.8171 62.7346 97.5942 62.7346 97.5342 62.576L92.1942 48.1503C92.0785 47.8375 91.7785 47.6275 91.4442 47.6275H87.4714C87.3128 47.6275 87.1842 47.756 87.1842 47.9146V67.166C87.1842 67.3246 87.3128 67.4532 87.4714 67.4532H90.3342C90.4928 67.4532 90.6213 67.3246 90.6213 67.166V53.5332C90.6213 53.3275 90.9042 53.2803 90.9771 53.4689L95.8542 66.9217C95.9699 67.2389 96.2699 67.4489 96.6085 67.4489H98.8671C99.2056 67.4489 99.5056 67.2346 99.6213 66.9175L104.447 53.4775C104.516 53.2846 104.803 53.336 104.803 53.5375V67.1617C104.803 67.3203 104.931 67.4489 105.09 67.4489H107.923C108.081 67.4489 108.21 67.3203 108.21 67.1617V47.9103C108.21 47.7517 108.081 47.6232 107.923 47.6232H104.001C103.667 47.6232 103.367 47.8332 103.251 48.146H103.243Z" fill="white"/>
+<path d="M104.777 80.9832C104.751 89.7989 100.492 97.8818 95.2244 102.596C95.0615 102.742 94.8001 102.592 94.8601 102.377C95.2458 100.942 95.1686 98.9446 95.1686 98.9446C95.1686 93.3003 90.6772 88.5475 85.1529 88.3503C82.3758 88.2518 79.7358 89.2332 77.7044 91.1189C75.5358 93.1375 74.3829 96.0218 74.3829 98.9832V104.323C74.3829 105.039 74.3144 105.707 74.1901 106.32C73.6929 108.737 71.3101 110.285 68.8844 109.83C55.4829 107.019 45.3686 95.1689 45.2358 80.9789C45.2358 80.8203 45.1072 80.696 44.9529 80.696H42.0986C41.9401 80.696 41.8072 80.8289 41.8115 80.9875C41.9701 99.1589 56.7986 113.897 75.0086 113.897C93.2186 113.897 108.051 99.1632 108.206 80.9875C108.206 80.8289 108.077 80.696 107.919 80.696H105.064C104.906 80.696 104.781 80.8246 104.781 80.9789L104.777 80.9832ZM91.7444 98.9489V100.929C91.7444 103.149 90.7544 105.249 89.0444 106.659L88.9029 106.775C88.3501 107.233 87.7372 107.61 87.0815 107.906C86.5844 108.129 86.0786 108.339 85.5686 108.532C85.4058 108.592 85.2601 108.42 85.3372 108.266C86.0829 106.77 86.4944 105.095 86.4944 103.346V92.5846C86.4944 92.2889 86.7901 92.0789 87.0644 92.1818C89.7729 93.1675 91.7444 95.8589 91.7444 98.9489ZM77.8115 105.669V98.906C77.8115 97.1789 78.3815 95.4775 79.5172 94.1746C80.3444 93.2275 81.3644 92.5503 82.4958 92.1603C82.7744 92.066 83.0615 92.2718 83.0615 92.5632V103.346C83.0615 106.346 81.5358 109.037 79.1615 109.98C77.5115 110.636 75.8701 110.636 75.0258 110.576C74.8544 110.563 74.8072 110.34 74.9572 110.255C76.3758 109.483 77.8115 108.017 77.8115 105.669Z" fill="white"/>
+</svg>
diff --git a/public/logos/icon-fail.svg b/public/logos/icon-fail.svg
new file mode 100644
index 00000000..cc1e5b24
--- /dev/null
+++ b/public/logos/icon-fail.svg
@@ -0,0 +1,6 @@
+<svg width="150" height="151" viewBox="0 0 150 151" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M150 75.3818C150 33.9605 116.421 0.381836 75 0.381836C33.5786 0.381836 0 33.9605 0 75.3818C0 116.803 33.5786 150.382 75 150.382C116.421 150.382 150 116.803 150 75.3818Z" fill="#9EDEF5"/>
+<path d="M41.7895 112.681C41.7896 94.3397 56.6584 79.4709 75 79.4709C93.3416 79.4709 108.21 94.3397 108.21 112.681" stroke="#0078EF" stroke-width="3"/>
+<path d="M57.8572 48.4887L52.4914 62.9187C52.4314 63.0773 52.2086 63.0773 52.1486 62.9187L46.8086 48.493C46.6929 48.1802 46.3929 47.9702 46.0586 47.9702H42.0857C41.9272 47.9702 41.7986 48.0987 41.7986 48.2573V67.5087C41.7986 67.6673 41.9272 67.7959 42.0857 67.7959H44.9486C45.1072 67.7959 45.2357 67.6673 45.2357 67.5087V53.8759C45.2357 53.6702 45.5186 53.623 45.5914 53.8116L50.4686 67.2645C50.5843 67.5816 50.8843 67.7916 51.2229 67.7916H53.4814C53.82 67.7916 54.12 67.5773 54.2357 67.2602L59.0614 53.8202C59.13 53.6273 59.4172 53.6787 59.4172 53.8802V67.5045C59.4172 67.663 59.5457 67.7916 59.7043 67.7916H62.5372C62.6957 67.7916 62.8243 67.663 62.8243 67.5045V48.253C62.8243 48.0945 62.6957 47.9659 62.5372 47.9659H58.6157C58.2814 47.9659 57.9814 48.1759 57.8657 48.4887H57.8572Z" fill="#0078EF"/>
+<path d="M103.243 48.4887L97.8777 62.9187C97.8177 63.0773 97.5948 63.0773 97.5348 62.9187L92.1948 48.493C92.0791 48.1802 91.7791 47.9702 91.4448 47.9702H87.472C87.3134 47.9702 87.1848 48.0987 87.1848 48.2573V67.5087C87.1848 67.6673 87.3134 67.7959 87.472 67.7959H90.3348C90.4934 67.7959 90.622 67.6673 90.622 67.5087V53.8759C90.622 53.6702 90.9048 53.623 90.9777 53.8116L95.8548 67.2645C95.9705 67.5816 96.2705 67.7916 96.6091 67.7916H98.8677C99.2062 67.7916 99.5062 67.5773 99.622 67.2602L104.448 53.8202C104.516 53.6273 104.803 53.6787 104.803 53.8802V67.5045C104.803 67.663 104.932 67.7916 105.091 67.7916H107.923C108.082 67.7916 108.211 67.663 108.211 67.5045V48.253C108.211 48.0945 108.082 47.9659 107.923 47.9659H104.002C103.668 47.9659 103.368 48.1759 103.252 48.4887H103.243Z" fill="#0078EF"/>
+</svg>
diff --git a/public/logos/icon-white.svg b/public/logos/icon-white.svg
new file mode 100644
index 00000000..f2ad650c
--- /dev/null
+++ b/public/logos/icon-white.svg
@@ -0,0 +1,6 @@
+<svg width="151" height="151" viewBox="0 0 151 151" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M150.5 75.3818C150.5 33.9605 116.921 0.381836 75.5 0.381836C34.0786 0.381836 0.5 33.9605 0.5 75.3818C0.5 116.803 34.0786 150.382 75.5 150.382C116.921 150.382 150.5 116.803 150.5 75.3818Z" fill="white"/>
+<path d="M58.3578 48.4887L52.9921 62.9187C52.9321 63.0773 52.7092 63.0773 52.6492 62.9187L47.3092 48.493C47.1935 48.1802 46.8935 47.9702 46.5592 47.9702H42.5863C42.4278 47.9702 42.2992 48.0987 42.2992 48.2573V67.5087C42.2992 67.6673 42.4278 67.7959 42.5863 67.7959H45.4492C45.6078 67.7959 45.7363 67.6673 45.7363 67.5087V53.8759C45.7363 53.6702 46.0192 53.623 46.0921 53.8116L50.9692 67.2645C51.0849 67.5816 51.3849 67.7916 51.7235 67.7916H53.9821C54.3206 67.7916 54.6206 67.5773 54.7363 67.2602L59.562 53.8202C59.6306 53.6273 59.9178 53.6787 59.9178 53.8802V67.5045C59.9178 67.663 60.0463 67.7916 60.2049 67.7916H63.0378C63.1963 67.7916 63.3249 67.663 63.3249 67.5045V48.253C63.3249 48.0945 63.1963 47.9659 63.0378 47.9659H59.1163C58.7821 47.9659 58.4821 48.1759 58.3663 48.4887H58.3578Z" fill="#0078EF"/>
+<path d="M103.743 48.4887L98.3769 62.9187C98.3169 63.0773 98.0941 63.0773 98.0341 62.9187L92.6941 48.493C92.5784 48.1802 92.2784 47.9702 91.9441 47.9702H87.9712C87.8127 47.9702 87.6841 48.0987 87.6841 48.2573V67.5087C87.6841 67.6673 87.8127 67.7959 87.9712 67.7959H90.8341C90.9927 67.7959 91.1212 67.6673 91.1212 67.5087V53.8759C91.1212 53.6702 91.4041 53.623 91.4769 53.8116L96.3541 67.2645C96.4698 67.5816 96.7698 67.7916 97.1084 67.7916H99.3669C99.7055 67.7916 100.006 67.5773 100.121 67.2602L104.947 53.8202C105.016 53.6273 105.303 53.6787 105.303 53.8802V67.5045C105.303 67.663 105.431 67.7916 105.59 67.7916H108.423C108.581 67.7916 108.71 67.663 108.71 67.5045V48.253C108.71 48.0945 108.581 47.9659 108.423 47.9659H104.501C104.167 47.9659 103.867 48.1759 103.751 48.4887H103.743Z" fill="#0078EF"/>
+<path d="M105.276 81.326C105.251 90.1417 100.991 98.2245 95.7235 102.939C95.5607 103.085 95.2992 102.935 95.3592 102.72C95.7449 101.285 95.6678 99.2874 95.6678 99.2874C95.6678 93.6431 91.1764 88.8902 85.6521 88.6931C82.8749 88.5945 80.2349 89.576 78.2035 91.4617C76.0349 93.4803 74.8821 96.3645 74.8821 99.326V104.666C74.8821 105.382 74.8135 106.05 74.6892 106.663C74.1921 109.08 71.8092 110.627 69.3835 110.173C55.9821 107.362 45.8678 95.5117 45.7349 81.3217C45.7349 81.1631 45.6064 81.0388 45.4521 81.0388H42.5978C42.4392 81.0388 42.3064 81.1717 42.3106 81.3303C42.4692 99.5017 57.2978 114.24 75.5078 114.24C93.7178 114.24 108.551 99.506 108.705 81.3303C108.705 81.1717 108.576 81.0388 108.418 81.0388H105.564C105.405 81.0388 105.281 81.1674 105.281 81.3217L105.276 81.326ZM92.2435 99.2917V101.272C92.2435 103.492 91.2535 105.592 89.5435 107.002L89.4021 107.117C88.8492 107.576 88.2364 107.953 87.5807 108.249C87.0835 108.472 86.5778 108.682 86.0678 108.875C85.9049 108.935 85.7592 108.763 85.8364 108.609C86.5821 107.113 86.9935 105.437 86.9935 103.689V92.9274C86.9935 92.6317 87.2892 92.4217 87.5635 92.5245C90.2721 93.5102 92.2435 96.2017 92.2435 99.2917ZM78.3107 106.012V99.2488C78.3107 97.5217 78.8806 95.8202 80.0164 94.5174C80.8435 93.5702 81.8635 92.8931 82.9949 92.5031C83.2735 92.4088 83.5607 92.6145 83.5607 92.906V103.689C83.5607 106.689 82.0349 109.38 79.6607 110.323C78.0107 110.979 76.3692 110.979 75.5249 110.919C75.3535 110.906 75.3064 110.683 75.4564 110.597C76.8749 109.826 78.3107 108.36 78.3107 106.012Z" fill="#0078EF"/>
+</svg>
diff --git a/public/logos/logo-black-wide.svg b/public/logos/logo-black-wide.svg
new file mode 100644
index 00000000..5f313898
--- /dev/null
+++ b/public/logos/logo-black-wide.svg
@@ -0,0 +1,16 @@
+<svg width="325" height="28" viewBox="0 0 325 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M30.4609 0V28H24.8646V7.91146L18.2109 28H12.3958L5.63281 7.91146V28H0V0H7.91146L15.2214 20.763L22.6224 0H30.4609Z" fill="black"/>
+<path d="M52.3549 22.3307H40.196L38.0632 28H31.9747L43.2039 0H49.5294L60.7585 28H54.67L52.3549 22.3307ZM50.7507 17.4635L46.394 5.70573L41.8367 17.4635H50.7507Z" fill="black"/>
+<path d="M78.952 28L67.978 15.4948V28H62.3452V0H67.978V12.4323L77.4207 0H83.8921L73.7749 13.7083L86.3166 28H78.952Z" fill="black"/>
+<path d="M105.95 22.3307H93.7912L91.6584 28H85.5699L96.7991 0H103.125L114.354 28H108.265L105.95 22.3307ZM104.346 17.4635L99.9892 5.70573L95.4319 17.4635H104.346Z" fill="black"/>
+<path d="M141.625 0V28H135.883L121.573 8.51302V28H115.94V0H121.683L136.029 19.4505V0H141.625Z" fill="black"/>
+<path d="M194.109 0L186.379 28H180.254L173.346 9.33333L167.184 28H161.096L152.582 0H158.671L164.359 21.8385L170.593 0H176.153L183.098 21.875L188.056 0H194.109Z" fill="black"/>
+<path d="M219.976 0V28H214.344V16.4609H202.312V28H196.68V0H202.312V11.5026H214.344V0H219.976Z" fill="black"/>
+<path d="M229.347 4.88542V11.5391H240.594V16.4609H229.347V23.0781H242.162V28H223.714V0H242.162V4.88542H229.347Z" fill="black"/>
+<path d="M268.085 28H261.759L255.27 17.6276H251.387V28H245.754V0H258.441C260.702 0 262.646 0.923611 264.275 2.77083C265.915 4.6059 266.736 6.72049 266.736 9.11458C266.736 10.9861 266.183 12.7057 265.077 14.2734C263.971 15.829 262.579 16.8194 260.902 17.2448L268.085 28ZM258.223 13.2526C259.195 13.2526 260.003 12.8698 260.647 12.1042C261.291 11.3264 261.613 10.3177 261.613 9.07812C261.613 7.88715 261.291 6.89062 260.647 6.08854C260.003 5.28646 259.195 4.88542 258.223 4.88542H251.387V13.2526H258.223Z" fill="black"/>
+<path d="M276.453 4.88542V11.5391H287.7V16.4609H276.453V23.0781H289.268V28H270.82V0H289.268V4.88542H276.453Z" fill="black"/>
+<path d="M325 14C325 6.26801 318.732 0 311 0C303.268 0 297 6.26801 297 14C297 21.732 303.268 28 311 28C318.732 28 325 21.732 325 14Z" fill="#0078EF"/>
+<path d="M307.8 8.97999L306.798 11.6736C306.787 11.7032 306.746 11.7032 306.734 11.6736L305.738 8.98079C305.716 8.92239 305.66 8.88319 305.598 8.88319H304.856C304.826 8.88319 304.802 8.90719 304.802 8.93679V12.5304C304.802 12.56 304.826 12.584 304.856 12.584H305.39C305.42 12.584 305.444 12.56 305.444 12.5304V9.98559C305.444 9.94719 305.497 9.93839 305.51 9.97359L306.421 12.4848C306.442 12.544 306.498 12.5832 306.562 12.5832H306.983C307.046 12.5832 307.102 12.5432 307.124 12.484L308.025 9.97519C308.038 9.93919 308.091 9.94879 308.091 9.98639V12.5296C308.091 12.5592 308.115 12.5832 308.145 12.5832H308.674C308.703 12.5832 308.727 12.5592 308.727 12.5296V8.93599C308.727 8.90639 308.703 8.88239 308.674 8.88239H307.942C307.879 8.88239 307.823 8.92159 307.802 8.97999H307.8Z" fill="white"/>
+<path d="M316.272 8.97999L315.27 11.6736C315.259 11.7032 315.218 11.7032 315.206 11.6736L314.21 8.98079C314.188 8.92239 314.132 8.88319 314.07 8.88319H313.328C313.298 8.88319 313.274 8.90719 313.274 8.93679V12.5304C313.274 12.56 313.298 12.584 313.328 12.584H313.862C313.892 12.584 313.916 12.56 313.916 12.5304V9.98559C313.916 9.94719 313.969 9.93839 313.982 9.97359L314.893 12.4848C314.914 12.544 314.97 12.5832 315.034 12.5832H315.455C315.518 12.5832 315.574 12.5432 315.596 12.484L316.497 9.97519C316.51 9.93919 316.563 9.94879 316.563 9.98639V12.5296C316.563 12.5592 316.587 12.5832 316.617 12.5832H317.146C317.175 12.5832 317.199 12.5592 317.199 12.5296V8.93599C317.199 8.90639 317.175 8.88239 317.146 8.88239H316.414C316.351 8.88239 316.295 8.92159 316.274 8.97999H316.272Z" fill="white"/>
+<path d="M316.558 15.1096C316.554 16.7552 315.758 18.264 314.775 19.144C314.745 19.1712 314.696 19.1432 314.707 19.1032C314.779 18.8352 314.765 18.4624 314.765 18.4624C314.765 17.4088 313.926 16.5216 312.895 16.4848C312.377 16.4664 311.884 16.6496 311.505 17.0016C311.1 17.3784 310.885 17.9168 310.885 18.4696V19.4664C310.885 19.6 310.872 19.7248 310.849 19.8392C310.756 20.2904 310.311 20.5792 309.858 20.4944C307.357 19.9696 305.469 17.7576 305.444 15.1088C305.444 15.0792 305.42 15.056 305.391 15.056H304.858C304.829 15.056 304.804 15.0808 304.805 15.1104C304.834 18.5024 307.602 21.2536 311.002 21.2536C314.401 21.2536 317.17 18.5032 317.198 15.1104C317.198 15.0808 317.174 15.056 317.145 15.056H316.612C316.582 15.056 316.559 15.08 316.559 15.1088L316.558 15.1096ZM314.126 18.4632V18.8328C314.126 19.2472 313.941 19.6392 313.622 19.9024L313.595 19.924C313.492 20.0096 313.378 20.08 313.255 20.1352C313.162 20.1768 313.068 20.216 312.973 20.252C312.942 20.2632 312.915 20.2312 312.93 20.2024C313.069 19.9232 313.146 19.6104 313.146 19.284V17.2752C313.146 17.22 313.201 17.1808 313.252 17.2C313.758 17.384 314.126 17.8864 314.126 18.4632ZM311.525 19.7176V18.4552C311.525 18.1328 311.631 17.8152 311.843 17.572C311.998 17.3952 312.188 17.2688 312.399 17.196C312.451 17.1784 312.505 17.2168 312.505 17.2712V19.284C312.505 19.844 312.22 20.3464 311.777 20.5224C311.469 20.6448 311.162 20.6448 311.005 20.6336C310.973 20.6312 310.964 20.5896 310.992 20.5736C311.257 20.4296 311.525 20.156 311.525 19.7176Z" fill="white"/>
+</svg>
diff --git a/public/logos/logo-home.svg b/public/logos/logo-home.svg
new file mode 100644
index 00000000..3e65b582
--- /dev/null
+++ b/public/logos/logo-home.svg
@@ -0,0 +1,12 @@
+<svg width="313" height="132" viewBox="0 0 313 132" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M67.8704 0V61.5H55.5784V17.377L40.9641 61.5H28.1917L13.3372 17.377V61.5H0.965088V0H18.342L34.3977 45.6045L50.6536 0H67.8704Z" fill="black"/>
+<path d="M115.959 49.0479H89.2528L84.5683 61.5H71.1952L95.8593 0H109.753L134.417 61.5H121.044L115.959 49.0479ZM112.435 38.3574L102.866 12.5322L92.8563 38.3574H112.435Z" fill="black"/>
+<path d="M174.377 61.5L150.274 34.0332V61.5H137.902V0H150.274V27.3066L171.014 0H185.228L163.006 30.1094L190.553 61.5H174.377Z" fill="black"/>
+<path d="M233.677 49.0479H206.971L202.286 61.5H188.913L213.577 0H227.471L252.135 61.5H238.762L233.677 49.0479ZM230.153 38.3574L220.584 12.5322L210.574 38.3574H230.153Z" fill="black"/>
+<path d="M312.035 0V61.5H299.423L267.992 18.6982V61.5H255.62V0H268.232L299.743 42.7217V0H312.035Z" fill="black"/>
+<path d="M96.4583 70L79.4817 131.5H66.0286L50.8538 90.5L37.3206 131.5H23.9475L5.24927 70H18.6223L31.1145 117.967L44.8079 70H57.0198L72.2747 118.047L83.1653 70H96.4583Z" fill="black"/>
+<path d="M153.275 70V131.5H140.903V106.155H114.477V131.5H102.105V70H114.477V95.2646H140.903V70H153.275Z" fill="black"/>
+<path d="M173.857 80.7305V95.3447H198.561V106.155H173.857V120.689H202.004V131.5H161.485V70H202.004V80.7305H173.857Z" fill="black"/>
+<path d="M258.942 131.5H245.048L230.794 108.718H222.266V131.5H209.894V70H237.761C242.726 70 246.997 72.0286 250.573 76.0859C254.177 80.1165 255.979 84.7611 255.979 90.0195C255.979 94.1302 254.764 97.9072 252.335 101.351C249.906 104.767 246.85 106.943 243.166 107.877L258.942 131.5ZM237.28 99.1084C239.416 99.1084 241.191 98.2676 242.606 96.5859C244.02 94.8776 244.728 92.6621 244.728 89.9395C244.728 87.3236 244.02 85.1348 242.606 83.373C241.191 81.6113 239.416 80.7305 237.28 80.7305H222.266V99.1084H237.28Z" fill="black"/>
+<path d="M277.321 80.7305V95.3447H302.025V106.155H277.321V120.689H305.469V131.5H264.949V70H305.469V80.7305H277.321Z" fill="black"/>
+</svg>
diff --git a/public/logos/logo-white-wide.svg b/public/logos/logo-white-wide.svg
new file mode 100644
index 00000000..25b122b5
--- /dev/null
+++ b/public/logos/logo-white-wide.svg
@@ -0,0 +1,16 @@
+<svg width="325" height="28" viewBox="0 0 325 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M30.4609 0V28H24.8646V7.91146L18.2109 28H12.3958L5.63281 7.91146V28H0V0H7.91146L15.2214 20.763L22.6224 0H30.4609Z" fill="white"/>
+<path d="M52.3549 22.3307H40.196L38.0632 28H31.9747L43.2039 0H49.5294L60.7585 28H54.67L52.3549 22.3307ZM50.7507 17.4635L46.394 5.70573L41.8367 17.4635H50.7507Z" fill="white"/>
+<path d="M78.952 28L67.978 15.4948V28H62.3452V0H67.978V12.4323L77.4207 0H83.8921L73.7749 13.7083L86.3166 28H78.952Z" fill="white"/>
+<path d="M105.95 22.3307H93.7912L91.6584 28H85.5699L96.7991 0H103.125L114.354 28H108.265L105.95 22.3307ZM104.346 17.4635L99.9892 5.70573L95.4319 17.4635H104.346Z" fill="white"/>
+<path d="M141.625 0V28H135.883L121.573 8.51302V28H115.94V0H121.683L136.029 19.4505V0H141.625Z" fill="white"/>
+<path d="M194.109 0L186.379 28H180.254L173.346 9.33333L167.184 28H161.096L152.582 0H158.671L164.359 21.8385L170.593 0H176.153L183.098 21.875L188.056 0H194.109Z" fill="white"/>
+<path d="M219.976 0V28H214.344V16.4609H202.312V28H196.68V0H202.312V11.5026H214.344V0H219.976Z" fill="white"/>
+<path d="M229.347 4.88542V11.5391H240.594V16.4609H229.347V23.0781H242.162V28H223.714V0H242.162V4.88542H229.347Z" fill="white"/>
+<path d="M268.085 28H261.759L255.27 17.6276H251.387V28H245.754V0H258.441C260.702 0 262.646 0.923611 264.275 2.77083C265.915 4.6059 266.736 6.72049 266.736 9.11458C266.736 10.9861 266.183 12.7057 265.077 14.2734C263.971 15.829 262.579 16.8194 260.902 17.2448L268.085 28ZM258.223 13.2526C259.195 13.2526 260.003 12.8698 260.647 12.1042C261.291 11.3264 261.613 10.3177 261.613 9.07812C261.613 7.88715 261.291 6.89062 260.647 6.08854C260.003 5.28646 259.195 4.88542 258.223 4.88542H251.387V13.2526H258.223Z" fill="white"/>
+<path d="M276.453 4.88542V11.5391H287.7V16.4609H276.453V23.0781H289.268V28H270.82V0H289.268V4.88542H276.453Z" fill="white"/>
+<path d="M325 14C325 6.26801 318.732 0 311 0C303.268 0 297 6.26801 297 14C297 21.732 303.268 28 311 28C318.732 28 325 21.732 325 14Z" fill="white"/>
+<path d="M307.8 8.97999L306.798 11.6736C306.787 11.7032 306.746 11.7032 306.734 11.6736L305.738 8.98079C305.716 8.92239 305.66 8.88319 305.598 8.88319H304.856C304.826 8.88319 304.802 8.90719 304.802 8.93679V12.5304C304.802 12.56 304.826 12.584 304.856 12.584H305.39C305.42 12.584 305.444 12.56 305.444 12.5304V9.98559C305.444 9.94719 305.497 9.93839 305.51 9.97359L306.421 12.4848C306.442 12.544 306.498 12.5832 306.562 12.5832H306.983C307.046 12.5832 307.102 12.5432 307.124 12.484L308.025 9.97519C308.038 9.93919 308.091 9.94879 308.091 9.98639V12.5296C308.091 12.5592 308.115 12.5832 308.145 12.5832H308.674C308.703 12.5832 308.727 12.5592 308.727 12.5296V8.93599C308.727 8.90639 308.703 8.88239 308.674 8.88239H307.942C307.879 8.88239 307.823 8.92159 307.802 8.97999H307.8Z" fill="#0078EF"/>
+<path d="M316.272 8.97999L315.27 11.6736C315.259 11.7032 315.218 11.7032 315.206 11.6736L314.21 8.98079C314.188 8.92239 314.132 8.88319 314.07 8.88319H313.328C313.298 8.88319 313.274 8.90719 313.274 8.93679V12.5304C313.274 12.56 313.298 12.584 313.328 12.584H313.862C313.892 12.584 313.916 12.56 313.916 12.5304V9.98559C313.916 9.94719 313.969 9.93839 313.982 9.97359L314.893 12.4848C314.914 12.544 314.97 12.5832 315.034 12.5832H315.455C315.518 12.5832 315.574 12.5432 315.596 12.484L316.497 9.97519C316.51 9.93919 316.563 9.94879 316.563 9.98639V12.5296C316.563 12.5592 316.587 12.5832 316.617 12.5832H317.146C317.175 12.5832 317.199 12.5592 317.199 12.5296V8.93599C317.199 8.90639 317.175 8.88239 317.146 8.88239H316.414C316.351 8.88239 316.295 8.92159 316.274 8.97999H316.272Z" fill="#0078EF"/>
+<path d="M316.558 15.1096C316.554 16.7552 315.758 18.264 314.775 19.144C314.745 19.1712 314.696 19.1432 314.707 19.1032C314.779 18.8352 314.765 18.4624 314.765 18.4624C314.765 17.4088 313.926 16.5216 312.895 16.4848C312.377 16.4664 311.884 16.6496 311.505 17.0016C311.1 17.3784 310.885 17.9168 310.885 18.4696V19.4664C310.885 19.6 310.872 19.7248 310.849 19.8392C310.756 20.2904 310.311 20.5792 309.858 20.4944C307.357 19.9696 305.469 17.7576 305.444 15.1088C305.444 15.0792 305.42 15.056 305.391 15.056H304.858C304.829 15.056 304.804 15.0808 304.805 15.1104C304.834 18.5024 307.602 21.2536 311.002 21.2536C314.401 21.2536 317.17 18.5032 317.198 15.1104C317.198 15.0808 317.174 15.056 317.145 15.056H316.612C316.582 15.056 316.559 15.08 316.559 15.1088L316.558 15.1096ZM314.126 18.4632V18.8328C314.126 19.2472 313.941 19.6392 313.622 19.9024L313.595 19.924C313.492 20.0096 313.378 20.08 313.255 20.1352C313.162 20.1768 313.068 20.216 312.973 20.252C312.942 20.2632 312.915 20.2312 312.93 20.2024C313.069 19.9232 313.146 19.6104 313.146 19.284V17.2752C313.146 17.22 313.201 17.1808 313.252 17.2C313.758 17.384 314.126 17.8864 314.126 18.4632ZM311.525 19.7176V18.4552C311.525 18.1328 311.631 17.8152 311.843 17.572C311.998 17.3952 312.188 17.2688 312.399 17.196C312.451 17.1784 312.505 17.2168 312.505 17.2712V19.284C312.505 19.844 312.22 20.3464 311.777 20.5224C311.469 20.6448 311.162 20.6448 311.005 20.6336C310.973 20.6312 310.964 20.5896 310.992 20.5736C311.257 20.4296 311.525 20.156 311.525 19.7176Z" fill="#0078EF"/>
+</svg>
diff --git a/public/logos/logo192.png b/public/logos/logo192.png
new file mode 100644
index 00000000..22f098ed
Binary files /dev/null and b/public/logos/logo192.png differ
diff --git a/public/logos/logo512.png b/public/logos/logo512.png
new file mode 100644
index 00000000..e9dbf74e
Binary files /dev/null and b/public/logos/logo512.png differ
diff --git a/public/manifest.json b/public/manifest.json
index ffa26a67..8e5f17b5 100644
--- a/public/manifest.json
+++ b/public/manifest.json
@@ -1,6 +1,6 @@
 {
-  "short_name": "Rocket Project",
-  "name": "Rocket Bootcamp Project",
+  "short_name": "Markan Where",
+  "name": "Makan Where my @markan.sg",
   "icons": [
     {
       "src": "favicon.ico",
@@ -8,12 +8,12 @@
       "type": "image/x-icon"
     },
     {
-      "src": "logo192.png",
+      "src": "logos/logo192.png",
       "type": "image/png",
       "sizes": "192x192"
     },
     {
-      "src": "logo512.png",
+      "src": "logos/logo512.png",
       "type": "image/png",
       "sizes": "512x512"
     }
diff --git a/src/App.css b/src/App.css
index 97b7c578..497566af 100644
--- a/src/App.css
+++ b/src/App.css
@@ -1,19 +1,283 @@
-.App {
+@font-face {
+  font-family: "Satoshi";
+  src: url("./fonts/Satoshi/Satoshi-Medium.woff2") format("woff2"),
+    url("./fonts/Satoshi/Satoshi-Medium.woff") format("woff"),
+    url("./fonts/Satoshi/Satoshi-Medium.ttf") format("truetype");
+  font-weight: 400;
+  font-display: swap;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: "Satoshi";
+  src: url("./fonts/Satoshi/Satoshi-Bold.woff2") format("woff2"),
+    url("./fonts/Satoshi/Satoshi-Bold.woff") format("woff"),
+    url("./fonts/Satoshi/Satoshi-Bold.ttf") format("truetype");
+  font-weight: 700;
+  font-display: swap;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: "Oakes Grotesk";
+  src: url("./fonts/Oakes-Grotesk/Oakes-Grotesk-Bold.ttf") format("truetype");
+  font-weight: 700;
+  font-display: swap;
+  font-style: normal;
+}
+
+* {
+  font-family: "Satoshi", sans-serif;
+  padding: 0;
+  margin: 0;
+  box-sizing: border-box;
+}
+
+html,
+body,
+body #root {
+  overflow: hidden;
+  height: 100%;
+}
+
+ul {
+  list-style-type: none;
+}
+
+/* General Styling */
+
+.container,
+.screen {
+  height: 100%;
+  min-height: 600px;
+}
+
+.screen {
   text-align: center;
+  padding: 30px 30px;
+}
+
+#home,
+#instructions,
+#question,
+#final {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 20px;
+}
+
+#instructions,
+#question {
+  background-color: #0078ef;
+  color: white;
 }
 
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
+h1,
+h2,
+h3 {
+  font-family: "Oakes Grotesk", sans-serif;
+  text-transform: uppercase;
 }
 
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
+h2 {
+  font-size: 40px;
+  letter-spacing: -1px;
+  line-height: 0.9;
+}
+
+h4,
+button,
+.food-notes,
+#home #settings-nav {
+  text-transform: uppercase;
+  letter-spacing: 1px;
+  font-weight: 700;
+  font-size: 12px;
+  line-height: 1.1;
+}
+
+img {
+  width: 100%;
+  object-fit: cover;
+  border-radius: 5px;
+  min-height: 0;
+  flex: 1 1 auto;
+}
+
+button {
+  padding: 15px;
+  border: none;
+  background-color: #0078ef;
+  color: white;
+  border-radius: 5px;
+  width: 100%;
+}
+
+.header img {
+  width: 100%;
+  border-radius: 0;
+  min-width: 0;
+}
+
+/* Home Page */
+
+#home .header {
   display: flex;
   flex-direction: column;
   align-items: center;
+  width: 100%;
+  gap: 20px;
+}
+
+#home .header img {
+  width: 100%;
+  min-width: 0;
+}
+
+#home .header #long-logo {
+  display: none;
+}
+
+#home .hero-image {
+  position: relative;
+  width: 100%;
+  flex: 1 1 auto;
+  min-height: 0;
+  display: flex;
+}
+
+#home .hero-image #logo {
+  position: absolute;
+  top: -4vw;
+  left: 6%;
+  z-index: 5;
+  height: 18vw;
+  width: auto;
+}
+
+#home .footer {
+  width: 100%;
+  display: flex;
+  gap: 10px;
+}
+@media (min-width: 950px) {
+  #home .hero-image #logo {
+    display: none;
+  }
+  #home .header #long-logo {
+    display: block;
+  }
+  #home .header #stacked-logo {
+    display: none;
+  }
+}
+
+/* Settings */
+
+#home .footer #settings {
+  display: flex;
   justify-content: center;
-  font-size: calc(10px + 2vmin);
+  align-items: center;
+  width: fit-content;
+  z-index: 11;
+}
+
+#home .footer #settings img {
+  border-radius: 0;
+}
+
+#home #settings-nav {
+  display: flex;
+  flex-direction: column;
+  position: fixed;
+  z-index: 10;
+  padding: 25px;
+  background-color: #0078ef;
   color: white;
+  border-radius: 5px;
+  bottom: 83px;
+  right: 30px;
+  gap: 20px;
+  transform-origin: bottom right;
+  text-align: left;
+}
+
+#home #settings-nav h2 {
+  font-size: 20px;
+  letter-spacing: 0;
+}
+
+#home #settings-nav h4 {
+  line-height: 1.4;
+}
+
+#home #settings-nav #settings-checklist {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  padding-bottom: 20px;
+  border-bottom: 2px dotted white;
+}
+
+#home #settings-nav .checklist {
+  display: flex;
+  gap: 5px;
+}
+
+.slider {
+  width: 100%;
+  padding: 10px 0px;
+}
+
+.slider-track {
+  height: 6px;
+  border-radius: 3px;
+  border: 1.5px solid white;
+  background-color: white;
+}
+
+.slider-track.slider-track-0 {
+  background-color: #0078ef;
+}
+
+.slider-thumb {
+  background-color: black;
+  top: 5px;
+  width: 16px;
+  height: 15px;
+  border-radius: 100%;
+  /* remove default outline when selected */
+  outline: none;
+}
+
+/* Instructions Page */
+
+#instructions .header {
+  display: flex;
+  width: 100%;
+  align-items: flex-start;
+  justify-content: space-between;
+  padding-bottom: 20px;
+  border-bottom: 1px solid white;
+}
+
+#instructions #instructions-box {
+  flex: 1 1 auto;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  gap: 20px;
+}
+
+#instructions #instructions-box h4 {
+  font-size: 15px;
+}
+
+#instructions button {
+  background-color: white;
+  color: #0078ef;
 }
diff --git a/src/App.js b/src/App.js
index 4a6f800f..a08aad1b 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,20 +1,118 @@
-import React from "react";
-import logo from "./logo.png";
+import React, { useEffect, useState } from "react";
+import Papa from "papaparse";
+import axios from "axios";
+import HomeScreen from "./Components/HomeScreen";
+import Instructions from "./Components/Instructions";
+import QuestionScreen from "./Components/QuestionScreen/QuestionScreen";
+import FinalScreen from "./Components/FinalScreen/FinalScreen";
 import "./App.css";
 
-class App extends React.Component {
-  render() {
-    return (
-      <div className="App">
-        <header className="App-header">
-          <img src={logo} className="App-logo" alt="logo" />
-          <p>
-            Edit <code>src/App.js</code> and save to reload.
-          </p>
-        </header>
-      </div>
+const dataSource =
+  "https://docs.google.com/spreadsheets/d/1lr6rakViESEyL92WLERkX7ZY3lRuKr5O8UG5B7LlIq4/export?format=csv";
+
+const App = () => {
+  const [data, setData] = useState(null);
+  const [stage, setStage] = useState(1);
+  const [locationAvailable, setLocationAvailable] = useState(false);
+  const [meal, setMeal] = useState("");
+  const [type, setType] = useState("");
+  const [area, setArea] = useState("");
+  const [settings, setSettings] = useState({
+    searchRadius: 1,
+    firstTime: true,
+    halal: false,
+    vegetarian: false,
+  });
+
+  useEffect(() => {
+    getCsvData();
+    if ("geolocation" in navigator) {
+      setLocationAvailable(true);
+    }
+    if (localStorage.getItem("settings") !== null) {
+      setSettings(JSON.parse(localStorage.getItem("settings")));
+    }
+  }, []);
+
+  const getCsvData = () => {
+    axios.get(dataSource).then((rawOutput) => {
+      const outputData = Papa.parse(rawOutput.data, {
+        header: true,
+        skipEmptyLines: true,
+      });
+      setData(outputData.data);
+    });
+  };
+
+  const handleNext = () => {
+    if (settings["firstTime"]) {
+      setStage((current) => current + 1);
+      if (stage === 2) {
+        let settingsCopy = Object.assign({}, settings);
+        settingsCopy.firstTime = false;
+        setSettings(settingsCopy);
+        localStorage.setItem("settings", JSON.stringify(settings));
+      }
+    } else {
+      setStage((current) => (current === 1 ? current + 2 : current + 1));
+    }
+  };
+
+  const handleRestart = () => {
+    setStage(1);
+    setMeal("");
+    setType("");
+    setArea("");
+  };
+
+  const handleUpdate = (name, value) => {
+    if (name === "area") {
+      setArea(value);
+    } else if (name === "meal") {
+      setMeal(value);
+    } else if (name === "type") {
+      setType(value);
+    } else if (name === "settings") {
+      setSettings(value);
+    }
+  };
+
+  let currentStage;
+  if (stage === 1) {
+    currentStage = (
+      <HomeScreen
+        data={data}
+        handleNext={handleNext}
+        handleUpdate={handleUpdate}
+        settings={settings}
+      />
+    );
+  } else if (stage === 2) {
+    currentStage = <Instructions handleNext={handleNext} />;
+  } else if (stage === 3) {
+    currentStage = (
+      <QuestionScreen
+        locationAvailable={locationAvailable}
+        searchRadius={settings["searchRadius"]}
+        handleUpdate={handleUpdate}
+        handleRestart={handleRestart}
+        handleNext={handleNext}
+      />
+    );
+  } else if (stage === 4) {
+    currentStage = (
+      <FinalScreen
+        settings={settings}
+        data={data}
+        meal={meal}
+        type={type}
+        area={area}
+        handleRestart={handleRestart}
+      />
     );
   }
-}
+
+  return <div className="container">{currentStage}</div>;
+};
 
 export default App;
diff --git a/src/Components/DisplayMeal.js b/src/Components/DisplayMeal.js
new file mode 100644
index 00000000..a27133fa
--- /dev/null
+++ b/src/Components/DisplayMeal.js
@@ -0,0 +1,56 @@
+const DisplayMeal = (props) => {
+  let display;
+  const meal = props.meal;
+  let mealTags = [];
+  if (meal) {
+    if (meal.TAGS) {
+      const mealTagsArray = meal.TAGS.split(", ");
+      mealTagsArray.forEach((tag) => {
+        const tagLower = tag.toLowerCase();
+        mealTags.push(
+          <h4 key={tagLower} id={tagLower}>
+            {tag}
+          </h4>
+        );
+      });
+    } else {
+      mealTags = "";
+    }
+
+    display = (
+      <div className="food-display">
+        <p
+          className="food-notes"
+          id={meal.NOTES.includes("Haven't tried") ? "food-hearsay" : undefined}
+        >
+          {meal.NOTES}
+        </p>
+        <img src={meal.IMAGE} alt={meal.NAME} />
+        <div id="food-details">
+          <h1>{meal.NAME}</h1>
+          <p>{meal.ADDRESS}</p>
+          <div className="meal-tags">{mealTags}</div>
+        </div>
+      </div>
+    );
+  } else {
+    display = (
+      <div className="food-display">
+        <h2>
+          I couldn't
+          <br />
+          find anything
+        </h2>
+        <img id="logo-failed" src="./logos/icon-fail.svg" alt="logo" />
+        <h2>
+          that fits
+          <br />
+          your criteria
+        </h2>
+      </div>
+    );
+  }
+  return display;
+};
+
+export default DisplayMeal;
diff --git a/src/Components/Fade.js b/src/Components/Fade.js
new file mode 100644
index 00000000..cca74993
--- /dev/null
+++ b/src/Components/Fade.js
@@ -0,0 +1,17 @@
+import { motion } from "framer-motion";
+
+const Fade = (props) => {
+  return (
+    <motion.div
+      animate={{ opacity: 1 }}
+      initial={{ opacity: 0 }}
+      exit={{ opacity: 0 }}
+      className={props.className ? props.className : undefined}
+      id={props.idName ? props.idName : undefined}
+    >
+      {props.children}
+    </motion.div>
+  );
+};
+
+export default Fade;
diff --git a/src/Components/FinalScreen/FinalScreen.css b/src/Components/FinalScreen/FinalScreen.css
new file mode 100644
index 00000000..1c8b6b95
--- /dev/null
+++ b/src/Components/FinalScreen/FinalScreen.css
@@ -0,0 +1,100 @@
+#final .header {
+  width: 100%;
+}
+
+#final .food-links {
+  display: flex;
+  width: 100%;
+  gap: 8px;
+}
+
+#final .food-display {
+  flex: 1 1 auto;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 20px;
+  width: 100%;
+  min-height: 0;
+  position: relative;
+}
+
+#final .food-notes {
+  position: absolute;
+  top: 20px;
+  left: -10px;
+  background-color: #0078ef;
+  color: white;
+  padding: 10px 15px;
+  width: fit-content;
+  text-align: left;
+  border-radius: 5px;
+}
+
+#final #food-hearsay {
+  background-color: #ff4a31;
+}
+
+#final .meal-tags {
+  display: flex;
+  justify-content: center;
+  gap: 5px;
+  margin-top: 10px;
+}
+
+#final .meal-tags h4 {
+  color: white;
+  padding: 6px 10px;
+  width: fit-content;
+  height: 25px;
+  border-radius: 15px;
+}
+
+#final .meal-tags #veg {
+  background-color: #0fc771;
+}
+
+#final .meal-tags #halal {
+  background-color: #fd8156;
+}
+
+#final #logo-failed {
+  flex: 0 1 auto;
+  width: 50vw;
+  height: auto;
+}
+
+@media (min-width: 950px) {
+  #final #logo-failed {
+    width: 20vw;
+    min-width: 20vw;
+    height: 20vw;
+  }
+}
+
+#final .footer {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+@media (min-width: 950px) {
+  #final .food-display {
+    flex-direction: row;
+    gap: 20px;
+    width: 100%;
+    min-height: 0;
+  }
+
+  #final .food-display #food-details {
+    flex: 1;
+  }
+
+  #final .food-display img {
+    height: 100%;
+    min-width: 0;
+    flex: 3;
+  }
+}
diff --git a/src/Components/FinalScreen/FinalScreen.js b/src/Components/FinalScreen/FinalScreen.js
new file mode 100644
index 00000000..ce832937
--- /dev/null
+++ b/src/Components/FinalScreen/FinalScreen.js
@@ -0,0 +1,100 @@
+import React, { useState } from "react";
+import DisplayMeal from "../DisplayMeal";
+import Fade from "../Fade";
+import { getDistance } from "geolib";
+import { randomNumber } from "../../utils";
+import "./FinalScreen.css";
+
+const FinalScreen = (props) => {
+  const getCoords = (obj) => {
+    const cords = obj.COORDS.split(", ");
+    return {
+      latitude: Number(cords[0]),
+      longitude: Number(cords[1]),
+    };
+  };
+
+  const getApplicableList = (arr, meal, type, area, settings) => {
+    const halal = settings["halal"] ? "H" : "";
+    const veg = settings["vegetarian"] ? "V" : "";
+    let applicableList = [];
+    const regex = new RegExp("^[A-Z]{2}$");
+    for (let i = 0; i < arr.length; i++) {
+      if (
+        arr[i].MEAL.includes(meal) &&
+        arr[i].TYPE.includes(type) &&
+        arr[i].TAGS.includes(halal) &&
+        arr[i].TAGS.includes(veg)
+      ) {
+        if (regex.test(area) || area === "") {
+          if (arr[i].AREA.includes(area)) {
+            applicableList.push(arr[i]);
+          }
+        } else {
+          const distance = getDistance(props.area, getCoords(arr[i]));
+          if (distance < props.settings["searchRadius"] * 1000) {
+            applicableList.push(arr[i]);
+          }
+        }
+      }
+    }
+
+    return applicableList;
+  };
+
+  const resultArray = getApplicableList(
+    props.data,
+    props.meal,
+    props.type,
+    props.area,
+    props.settings
+  );
+
+  const [select, setSelect] = useState(randomNumber(resultArray.length));
+
+  const result = resultArray[select];
+  return (
+    <Fade className="screen" idName="final">
+      <div className="header">
+        <img src="./logos/logo-black-wide.svg" alt="logo" />
+      </div>
+      <DisplayMeal meal={result} />
+
+      <div className="footer">
+        {resultArray.length !== 0 && (
+          <div className="food-links">
+            <button
+              role="link"
+              onClick={(e) => {
+                e.preventDefault();
+                window.open(result.LINK, "_blank", "noreferrer");
+              }}
+            >
+              Open in Maps
+            </button>
+            {resultArray.length !== 1 && (
+              <button
+                role="link"
+                onClick={(e) => {
+                  e.preventDefault();
+                  let newNo = randomNumber(resultArray.length);
+                  while (newNo === select) {
+                    newNo = randomNumber(resultArray.length);
+                  }
+                  setSelect(newNo);
+                }}
+              >
+                Another one!
+              </button>
+            )}
+          </div>
+        )}
+        <button id="final-restart" onClick={props.handleRestart}>
+          Restart
+        </button>
+      </div>
+    </Fade>
+  );
+};
+
+export default FinalScreen;
diff --git a/src/Components/HomeScreen.js b/src/Components/HomeScreen.js
new file mode 100644
index 00000000..05bfba81
--- /dev/null
+++ b/src/Components/HomeScreen.js
@@ -0,0 +1,59 @@
+import { useEffect, useState } from "react";
+import Settings from "./Settings";
+import Fade from "./Fade";
+import { randomNumber } from "../utils";
+
+const imageList = [
+  "https://i.imgur.com/GFU4Rck.jpg",
+  "https://i.imgur.com/7JX5nqm.jpg",
+  "https://i.imgur.com/CzmORKO.jpg",
+  "https://i.imgur.com/P4dTYzY.jpg",
+  "https://i.imgur.com/ciSqZkv.jpg",
+  "https://i.imgur.com/YzyslzF.jpg",
+  "https://i.imgur.com/hwu8nZ3.jpg",
+];
+
+const HomeScreen = (props) => {
+  const [select, setSelect] = useState(null);
+  const [navShow, setNavShow] = useState(false);
+
+  useEffect(() => {
+    setSelect(randomNumber(imageList.length));
+  }, []);
+
+  const getRandomImage = (number) => {
+    return imageList[number];
+  };
+
+  const handleClick = () => {
+    setNavShow((state) => !state);
+  };
+
+  const randomImage = getRandomImage(select);
+  return (
+    <Fade className="screen" idName="home">
+      <div className="header">
+        <img id="long-logo" src="./logos/logo-black-wide.svg" alt="logo" />
+        <img id="stacked-logo" src="./logos/logo-home.svg" alt="logo" />
+        <h4>By @markan.sg</h4>
+      </div>
+      <div className="hero-image">
+        <img src={randomImage} alt="Food pic from @markan.sg!" />
+        <img id="logo" src="./logos/icon-blue.svg" alt="logo" />
+      </div>
+      <div className="footer">
+        <button onClick={props.handleNext}>Tap for a recommendation</button>
+        <button id="settings" onClick={handleClick}>
+          <img src="./icons/filter.svg" alt="logo" />
+        </button>
+      </div>
+      <Settings
+        navShow={navShow}
+        settings={props.settings}
+        handleUpdate={props.handleUpdate}
+      />
+    </Fade>
+  );
+};
+
+export default HomeScreen;
diff --git a/src/Components/Instructions.js b/src/Components/Instructions.js
new file mode 100644
index 00000000..fcbc1581
--- /dev/null
+++ b/src/Components/Instructions.js
@@ -0,0 +1,27 @@
+import Fade from "./Fade";
+
+const Instructions = (props) => {
+  return (
+    <Fade className="screen" idName="instructions">
+      <div className="header">
+        <img src="./logos/logo-white-wide.svg" alt="logo" />
+      </div>
+      <div id="instructions-box">
+        <h2>
+          Don't know
+          <br />
+          what to eat?
+        </h2>
+        <h4>1. Answer 3 questions</h4>
+        <h4>2. I’ll randomly recommend you something!</h4>
+      </div>
+      <p>
+        (Enable location sharing in settings to get location based
+        recommendations!)
+      </p>
+      <button onClick={props.handleNext}>Tap to begin</button>
+    </Fade>
+  );
+};
+
+export default Instructions;
diff --git a/src/Components/QuestionScreen/Question.css b/src/Components/QuestionScreen/Question.css
new file mode 100644
index 00000000..775bf3ee
--- /dev/null
+++ b/src/Components/QuestionScreen/Question.css
@@ -0,0 +1,110 @@
+#question .header {
+  display: flex;
+  width: 100%;
+  align-items: flex-start;
+  justify-content: space-between;
+  padding-bottom: 20px;
+  border-bottom: 1px solid white;
+}
+
+#question .question-box {
+  flex: 1 1 auto;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  gap: 20px;
+}
+
+.question-options {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 0px 10px;
+}
+
+.question-even {
+  gap: 10px;
+}
+
+#question button {
+  background-color: white;
+  color: #0078ef;
+  height: 92px;
+  width: 92px;
+  border-radius: 60px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 11px;
+}
+
+#question #get-location {
+  width: fit-content;
+  height: auto;
+  background-color: #0078ef;
+  color: white;
+  border: 1px solid white;
+  display: flex;
+  margin: 5px;
+  gap: 5px;
+}
+
+#question #get-location img {
+  height: 12px;
+  width: auto;
+}
+
+#question #logo-button {
+  padding: 0;
+  width: 40vw;
+  height: 40vw;
+  border-radius: 20vw;
+  margin-bottom: 10px;
+}
+
+#question .footer {
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+}
+
+#question .footer button,
+#question #skip {
+  background-color: transparent;
+  color: white;
+  height: fit-content;
+  width: fit-content;
+  padding: 0px 0px 2px 0px;
+  border-radius: 0;
+  border-bottom: 1px solid white;
+  margin-bottom: 0px;
+}
+
+@media (min-width: 950px) {
+  #question .header {
+    padding-bottom: 30px;
+  }
+
+  #question .question-box {
+    gap: 30px;
+  }
+
+  .question-options {
+    gap: 0px 20px;
+  }
+
+  #question button {
+    height: 150px;
+    width: 150px;
+    border-radius: 100px;
+    font-size: 15px;
+  }
+
+  #question #logo-button {
+    width: 20vw;
+    height: 20vw;
+    border-radius: 10vw;
+  }
+}
diff --git a/src/Components/QuestionScreen/QuestionDisplay.js b/src/Components/QuestionScreen/QuestionDisplay.js
new file mode 100644
index 00000000..e2a15352
--- /dev/null
+++ b/src/Components/QuestionScreen/QuestionDisplay.js
@@ -0,0 +1,43 @@
+import { motion } from "framer-motion";
+import { isOdd } from "../../utils";
+import "./Question.css";
+
+const QuestionDisplay = (props) => {
+  const { question } = props;
+  let questionList = question.value.map((option, i) => (
+    <motion.li
+      animate={{ opacity: 1, y: 0 }}
+      initial={{ opacity: 0, y: 20 }}
+      whileHover={{ scale: 1.1 }}
+      exit={{ opacity: 0, y: 20 }}
+      key={option}
+    >
+      <button onClick={props.handleClick} name={question.name} value={option}>
+        {question.display[i]}
+      </button>
+    </motion.li>
+  ));
+  return (
+    <div className="question-box">
+      <h2>{question.q}</h2>
+      <ul
+        className={`question-options ${
+          !isOdd(question.value.length) && "question-even"
+        }`}
+      >
+        {questionList}
+      </ul>
+      {props.questionNo === 3 && props.locationButton && (
+        <button id="get-location" onClick={props.handleLocation}>
+          <img src="./icons/location.svg" alt="location icon" />
+          {props.buttonText}
+        </button>
+      )}
+      <button id="skip" onClick={props.handleSkip}>
+        All of the above
+      </button>
+    </div>
+  );
+};
+
+export default QuestionDisplay;
diff --git a/src/Components/QuestionScreen/QuestionScreen.js b/src/Components/QuestionScreen/QuestionScreen.js
new file mode 100644
index 00000000..b412e68b
--- /dev/null
+++ b/src/Components/QuestionScreen/QuestionScreen.js
@@ -0,0 +1,119 @@
+import React, { useState } from "react";
+import Fade from "../Fade";
+import QuestionDisplay from "./QuestionDisplay";
+import "./Question.css";
+
+const questions = [
+  {
+    q: "Which?",
+    name: "meal",
+    value: ["Breakfast", "Brunch", "Lunch", "Dinner", "Dessert"],
+    display: ["Breakfast", "Brunch", "Lunch", "Dinner", "Dessert"],
+  },
+  {
+    q: "What?",
+    name: "type",
+    value: ["H", "C", "R", "T"],
+    display: ["Hawker", "Casual Dining", "$$$ Dining", "Takeaway Only"],
+  },
+  {
+    q: "Where?",
+    name: "area",
+    value: ["NT", "NE", "CN", "WT", "ET"],
+    display: ["North", "Northeast", "Central", "West", "East"],
+  },
+];
+
+const QuestionScreen = (props) => {
+  const [questionNo, setQuestionNo] = useState(1);
+  const [locationButton, setLocationButton] = useState(props.locationAvailable);
+  const [buttonText, setButtonText] = useState("Use Current Location");
+
+  const handleClick = (e) => {
+    const { name, value } = e.target;
+    props.handleUpdate(name, value);
+    if (questionNo < 4) {
+      setQuestionNo((current) => current + 1);
+    } else {
+      props.handleNext();
+    }
+  };
+
+  const handleSkip = () => {
+    setQuestionNo((current) => current + 1);
+  };
+
+  const handleBack = () => {
+    setQuestionNo((current) => current - 1);
+  };
+
+  const handleLocation = async () => {
+    await setButtonText("Getting location...");
+    await navigator.geolocation.getCurrentPosition(
+      (position) => {
+        props.handleUpdate("area", {
+          latitude: position.coords.latitude,
+          longitude: position.coords.longitude,
+        });
+        setQuestionNo((current) => current + 1);
+      },
+      (error) => {
+        if (error.code === error.PERMISSION_DENIED) {
+          alert(
+            "Can't find your location! Enable location services for your browser in settings."
+          );
+          setLocationButton(false);
+        }
+      },
+      {
+        enableHighAccuracy: false,
+        timeout: 5000,
+        maximumAge: Infinity,
+      }
+    );
+  };
+
+  let currentQuestion = questions[questionNo - 1];
+  let displayQuestion;
+  if (questionNo < 4) {
+    displayQuestion = (
+      <QuestionDisplay
+        handleClick={handleClick}
+        handleLocation={handleLocation}
+        handleSkip={handleSkip}
+        questionNo={questionNo}
+        question={currentQuestion}
+        locationButton={locationButton}
+        buttonText={buttonText}
+      />
+    );
+  } else if (questionNo === 4) {
+    displayQuestion = (
+      <Fade className="question-box">
+        <h2>Tap here</h2>
+        <button id="logo-button" onClick={handleClick}>
+          <img src="./logos/icon-white.svg" alt="logo" />
+        </button>
+        <h2>
+          to get
+          <br />
+          your rec!
+        </h2>
+      </Fade>
+    );
+  }
+  return (
+    <Fade className="screen" idName="question">
+      <div className="header">
+        <img src="./logos/logo-white-wide.svg" alt="logo" />
+      </div>
+      {displayQuestion}
+      <div className="footer">
+        <button onClick={props.handleRestart}>Restart</button>
+        {questionNo !== 1 && <button onClick={handleBack}>Back</button>}
+      </div>
+    </Fade>
+  );
+};
+
+export default QuestionScreen;
diff --git a/src/Components/Settings.js b/src/Components/Settings.js
new file mode 100644
index 00000000..c0b61da7
--- /dev/null
+++ b/src/Components/Settings.js
@@ -0,0 +1,65 @@
+import React from "react";
+import { AnimatePresence } from "framer-motion";
+import ReactSlider from "react-slider";
+import Fade from "./Fade";
+
+const settingOptions = ["halal", "vegetarian"];
+
+const Settings = (props) => {
+  const handleClick = (e) => {
+    const settings = Object.assign({}, props.settings);
+    let value = e.target.value;
+    settings[value] = !settings[value];
+    localStorage.setItem("settings", JSON.stringify(settings));
+    props.handleUpdate("settings", settings);
+  };
+
+  const handleChange = (value) => {
+    const settings = Object.assign({}, props.settings);
+    settings["searchRadius"] = value;
+    localStorage.setItem("settings", JSON.stringify(settings));
+    props.handleUpdate("settings", settings);
+  };
+
+  return (
+    <AnimatePresence>
+      {props.navShow && (
+        <Fade idName="settings-nav">
+          <h2>Filters</h2>
+          <div id="settings-checklist">
+            {settingOptions.map((option) => (
+              <div key={option} className="checklist">
+                <input
+                  value={option}
+                  type="checkbox"
+                  defaultChecked={props.settings[option]}
+                  onClick={handleClick}
+                />
+                {option}
+              </div>
+            ))}
+          </div>
+          <div id="settings-search">
+            <h4>
+              Search Radius:
+              <br />
+              {props.settings["searchRadius"]} km
+            </h4>
+            <ReactSlider
+              className="slider"
+              trackClassName="slider-track"
+              thumbClassName="slider-thumb"
+              min={0.5}
+              max={4}
+              step={0.5}
+              defaultValue={props.settings["searchRadius"]}
+              onChange={handleChange}
+            />
+          </div>
+        </Fade>
+      )}
+    </AnimatePresence>
+  );
+};
+
+export default Settings;
diff --git a/src/fonts/Oakes-Grotesk/Oakes-Grotesk-Bold.ttf b/src/fonts/Oakes-Grotesk/Oakes-Grotesk-Bold.ttf
new file mode 100644
index 00000000..2bf97980
Binary files /dev/null and b/src/fonts/Oakes-Grotesk/Oakes-Grotesk-Bold.ttf differ
diff --git a/src/fonts/Satoshi/Satoshi-Bold.ttf b/src/fonts/Satoshi/Satoshi-Bold.ttf
new file mode 100644
index 00000000..00bc985b
Binary files /dev/null and b/src/fonts/Satoshi/Satoshi-Bold.ttf differ
diff --git a/src/fonts/Satoshi/Satoshi-Bold.woff b/src/fonts/Satoshi/Satoshi-Bold.woff
new file mode 100644
index 00000000..bba8257f
Binary files /dev/null and b/src/fonts/Satoshi/Satoshi-Bold.woff differ
diff --git a/src/fonts/Satoshi/Satoshi-Bold.woff2 b/src/fonts/Satoshi/Satoshi-Bold.woff2
new file mode 100644
index 00000000..0a8db7a4
Binary files /dev/null and b/src/fonts/Satoshi/Satoshi-Bold.woff2 differ
diff --git a/src/fonts/Satoshi/Satoshi-Medium.ttf b/src/fonts/Satoshi/Satoshi-Medium.ttf
new file mode 100644
index 00000000..ab149b71
Binary files /dev/null and b/src/fonts/Satoshi/Satoshi-Medium.ttf differ
diff --git a/src/fonts/Satoshi/Satoshi-Medium.woff b/src/fonts/Satoshi/Satoshi-Medium.woff
new file mode 100644
index 00000000..cef3226e
Binary files /dev/null and b/src/fonts/Satoshi/Satoshi-Medium.woff differ
diff --git a/src/fonts/Satoshi/Satoshi-Medium.woff2 b/src/fonts/Satoshi/Satoshi-Medium.woff2
new file mode 100644
index 00000000..ffd0ac96
Binary files /dev/null and b/src/fonts/Satoshi/Satoshi-Medium.woff2 differ
diff --git a/src/index.js b/src/index.js
index 31508db1..04d8d115 100644
--- a/src/index.js
+++ b/src/index.js
@@ -2,10 +2,7 @@ import React from "react";
 import ReactDOM from "react-dom/client";
 import "./index.css";
 import App from "./App";
+// import { BrowserRouter } from "react-router-dom";
 
 const root = ReactDOM.createRoot(document.getElementById("root"));
-root.render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>
-);
+root.render(<App />);
diff --git a/src/logo.png b/src/logo.png
index a7e08590..630b6102 100755
Binary files a/src/logo.png and b/src/logo.png differ
diff --git a/src/utils.js b/src/utils.js
new file mode 100644
index 00000000..2a40a754
--- /dev/null
+++ b/src/utils.js
@@ -0,0 +1,9 @@
+const randomNumber = (limit) => {
+  return Math.floor(Math.random() * limit);
+};
+
+const isOdd = (number) => {
+  return number % 2 ? true : false;
+};
+
+export { randomNumber, isOdd };