diff --git a/package-lock.json b/package-lock.json
index 61170d7..f9a5630 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -13,6 +13,7 @@
         "firebase-admin": "^12.7.0",
         "react": "^18.3.0",
         "react-dom": "^18.3.0",
+        "react-router-dom": "^6.28.0",
         "socket.io": "^4.8.1",
         "socket.io-client": "^4.8.1"
       },
@@ -1750,6 +1751,15 @@
       "integrity": "sha512-Vvn3zZrhQZkkBE8LSuW3em98c0FwgO4nxzv6OdSxPKJIEKY2bGbHn+mhGIPerzI4twdxaP8/0+06HBpwf345Lw==",
       "license": "BSD-3-Clause"
     },
+    "node_modules/@remix-run/router": {
+      "version": "1.21.0",
+      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.21.0.tgz",
+      "integrity": "sha512-xfSkCAchbdG5PnbrKqFWwia4Bi61nH+wm8wLEqfHDyp7Y3dZzgqS2itV8i4gAq9pC2HsTpwyBC6Ds8VHZ96JlA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
     "node_modules/@rollup/rollup-android-arm-eabi": {
       "version": "4.22.4",
       "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.22.4.tgz",
@@ -5182,6 +5192,38 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-router": {
+      "version": "6.28.0",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.28.0.tgz",
+      "integrity": "sha512-HrYdIFqdrnhDw0PqG/AKjAqEqM7AvxCz0DQ4h2W8k6nqmc5uRBYDag0SBxx9iYz5G8gnuNVLzUe13wl9eAsXXg==",
+      "license": "MIT",
+      "dependencies": {
+        "@remix-run/router": "1.21.0"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8"
+      }
+    },
+    "node_modules/react-router-dom": {
+      "version": "6.28.0",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.28.0.tgz",
+      "integrity": "sha512-kQ7Unsl5YdyOltsPGl31zOjLrDv+m2VcIEcIHqYYD3Lp0UppLjrzcfJqDJwXxFw3TH/yvapbnUvPlAj7Kx5nbg==",
+      "license": "MIT",
+      "dependencies": {
+        "@remix-run/router": "1.21.0",
+        "react-router": "6.28.0"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8",
+        "react-dom": ">=16.8"
+      }
+    },
     "node_modules/readable-stream": {
       "version": "3.6.2",
       "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
diff --git a/package.json b/package.json
index 97b701c..e6cd875 100644
--- a/package.json
+++ b/package.json
@@ -16,6 +16,7 @@
     "firebase-admin": "^12.7.0",
     "react": "^18.3.0",
     "react-dom": "^18.3.0",
+    "react-router-dom": "^6.28.0",
     "socket.io": "^4.8.1",
     "socket.io-client": "^4.8.1"
   },
diff --git a/src/components/Banner.jsx b/src/components/Banner.jsx
index b5a7a2f..e89093d 100644
--- a/src/components/Banner.jsx
+++ b/src/components/Banner.jsx
@@ -85,9 +85,9 @@ export const Banner = ({ cafes }) => {
             </div>
 
             <div className="banner-buttons">
-                <button className="banner-btn">
+                {/* <button className="banner-btn">
                     Review
-                </button>
+                </button> */}
                 {user ? (
                     <button className="banner-btn" onClick={handleLogout}>
                         Logout
diff --git a/src/components/CafeList.css b/src/components/CafeList.css
index 661a09d..6a27e2c 100644
--- a/src/components/CafeList.css
+++ b/src/components/CafeList.css
@@ -15,8 +15,14 @@
 }
 
 .cafe-list {
-    display: block;
-    flex-grow: 1;
+    width: 100%;
+    align-items: center;
+    justify-content: center;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 1rem;
+    padding: 1rem;
+    overflow-y: auto;
 }
 
 .cafe-card {
diff --git a/src/components/CafeList.jsx b/src/components/CafeList.jsx
index c0c16e0..992ca57 100644
--- a/src/components/CafeList.jsx
+++ b/src/components/CafeList.jsx
@@ -9,7 +9,7 @@ const CafeList = ({ cafes }) => {
 
     return (
         <div className="cafe-list-container">
-            <div className="filter">
+            {/* <div className="filter">
                 <h4>Filter Options</h4>
                 <label>
                     Rating:
@@ -26,7 +26,7 @@ const CafeList = ({ cafes }) => {
                     Location:
                     <input type="text" placeholder="Search by location" />
                 </label>
-            </div>
+            </div> */}
             <div className="cafe-list">
                 {cafes.map((cafe) => (
                     <div