diff --git a/src/frontend/db.json b/src/frontend/db.json
index e792c410e..2aca5b37c 100644
--- a/src/frontend/db.json
+++ b/src/frontend/db.json
@@ -1,5 +1,4 @@
 {
-  "home": [],
   "mockdata": [
     {
       "id": 1,
@@ -43,7 +42,7 @@
     },
     {
       "id": 5,
-      "name": "cool park",
+      "name": "Champaign park",
       "address": "White St.",
       "review": "Amazingly horrible",
       "image": "https://upload.wikimedia.org/wikipedia/commons/7/7f/St_James_Town1.jpg",
@@ -63,7 +62,7 @@
     },
     {
       "id": 7,
-      "name": "not a park",
+      "name": "Champaign park",
       "address": "Wright street",
       "review": "Too yellow",
       "image": "https://upload.wikimedia.org/wikipedia/commons/7/7f/St_James_Town1.jpg",
@@ -73,7 +72,7 @@
     },
     {
       "id": 8,
-      "name": "park park",
+      "name": "Champaign park",
       "address": "West springfield",
       "review": "Slightly below average horrible",
       "image": "https://upload.wikimedia.org/wikipedia/commons/7/7f/St_James_Town1.jpg",
@@ -83,7 +82,7 @@
     },
     {
       "id": 9,
-      "name": "Urbana park",
+      "name": "Champaign park",
       "address": "51 E John",
       "review": "Purple",
       "image": "https://upload.wikimedia.org/wikipedia/commons/7/7f/St_James_Town1.jpg",
@@ -93,7 +92,7 @@
     },
     {
       "id": 10,
-      "name": "Good park",
+      "name": "Champaign park",
       "address": "Wright street",
       "review": "Orange",
       "image": "https://upload.wikimedia.org/wikipedia/commons/7/7f/St_James_Town1.jpg",
@@ -103,7 +102,7 @@
     },
     {
       "id": 11,
-      "name": "Bad park",
+      "name": "Champaign park",
       "address": "West springfield",
       "review": "AMAZING AMAZING average",
       "image": "https://upload.wikimedia.org/wikipedia/commons/7/7f/St_James_Town1.jpg",
@@ -113,7 +112,7 @@
     },
     {
       "id": 12,
-      "name": "Spooky park",
+      "name": "Champaign park",
       "address": "Green st.",
       "review": "Slightly AMAZING AMAZING AMAZING",
       "image": "https://upload.wikimedia.org/wikipedia/commons/7/7f/St_James_Town1.jpg",
@@ -123,7 +122,7 @@
     },
     {
       "id": 13,
-      "name": "Corporate park",
+      "name": "Champaign park",
       "address": "202 E Daniel St.",
       "review": "Extremely AMAZING AMAZING AMAZING",
       "image": "https://upload.wikimedia.org/wikipedia/commons/7/7f/St_James_Town1.jpg",
@@ -139,4 +138,4 @@
       "postId": 1
     }
   ]
-}
+}
\ No newline at end of file
diff --git a/src/frontend/public/index.html b/src/frontend/public/index.html
index 6c5581dff..c79cf8fa8 100644
--- a/src/frontend/public/index.html
+++ b/src/frontend/public/index.html
@@ -12,7 +12,6 @@
       homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
     -->
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.
diff --git a/src/frontend/public/manifest.json b/src/frontend/public/manifest.json
index 080d6c77a..43d793f59 100644
--- a/src/frontend/public/manifest.json
+++ b/src/frontend/public/manifest.json
@@ -2,21 +2,6 @@
   "short_name": "React App",
   "name": "Create React App Sample",
   "icons": [
-    {
-      "src": "favicon.ico",
-      "sizes": "64x64 32x32 24x24 16x16",
-      "type": "image/x-icon"
-    },
-    {
-      "src": "logo192.png",
-      "type": "image/png",
-      "sizes": "192x192"
-    },
-    {
-      "src": "logo512.png",
-      "type": "image/png",
-      "sizes": "512x512"
-    }
   ],
   "start_url": ".",
   "display": "standalone",
diff --git a/src/frontend/src/App.tsx b/src/frontend/src/App.tsx
index bbe80ced1..a8074f757 100644
--- a/src/frontend/src/App.tsx
+++ b/src/frontend/src/App.tsx
@@ -6,9 +6,9 @@ function App() {
    return (
       <div className="App">
          {/*<LeftSection/>
-      <Header/>*/}
+         <Header/>
+         <Login/>*/}
          <Searching />
-         {/*<Login/>*/}
       </div>
    );
 }
diff --git a/src/frontend/src/components/List.tsx b/src/frontend/src/components/List.tsx
new file mode 100644
index 000000000..e6b6582ec
--- /dev/null
+++ b/src/frontend/src/components/List.tsx
@@ -0,0 +1,34 @@
+import React from "react";
+import data from "../staticdata.json";
+import "./SearchBarStyles.css";
+import SingleCard from "./SingleCard";
+
+interface Props {
+    props: string;
+}
+
+const List = ({ props }: Props) => {
+    // eslint-disable-next-line
+    const filteredData = data.filter((el: any) => {
+        if (props === '') {
+            return el;
+        } else if (el.name) {
+            return el.name.toLowerCase().includes(props);
+        }
+    })
+    return (
+        <div className="list">
+            {filteredData.splice(0, 5).map((apartment, index) => {
+                if (props !== '') {
+                    return (
+                        <div key={index} className="box">
+                            <p key={apartment.id}>{apartment.name}</p>
+                        </div>
+                    );
+                }
+            })}
+        </div>
+    );
+}
+
+export default List;
diff --git a/src/frontend/src/components/SearchAndDisplayResults.tsx b/src/frontend/src/components/SearchAndDisplayResults.tsx
index cd9ff5ab3..bad2df3d2 100644
--- a/src/frontend/src/components/SearchAndDisplayResults.tsx
+++ b/src/frontend/src/components/SearchAndDisplayResults.tsx
@@ -1,14 +1,13 @@
-import { TextField, ToggleButton, ToggleButtonGroup } from '@mui/material';
-import axios from 'axios';
+import { ToggleButton, ToggleButtonGroup } from '@mui/material';
 import React, {
    useState,
    useRef,
    useCallback,
    KeyboardEvent,
-   useEffect,
 } from 'react';
 import SingleCard from './SingleCard';
 import useSearchApartment from './getsApartments';
+import SearchBar from './SearchBar';
 
 export default function Searching() {
    const [query, setQuery] = useState('');
@@ -39,7 +38,7 @@ export default function Searching() {
       [loading, hasMore]
    );
 
-   const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+   /*const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
       setQuery(e.target.value);
       setPageNum(1);
       setPress(false);
@@ -50,7 +49,6 @@ export default function Searching() {
       if (e.key === 'Enter') {
          e.preventDefault();
          setPress(true);
-         handlePost(query, selected);
       }
    };
 
@@ -77,12 +75,12 @@ export default function Searching() {
                console.log(error.response.headers);
             }
          });
-   }
+   }*/
 
-   useEffect(() => {
+   //useEffect(() => {
       // triggers a post request whenever a button is selected
-      handlePost(query, selected);
-   }, [selected]);
+   //   handlePost(query, selected);
+   //}, [selected]);
 
    const handleToggle = (
       event: React.MouseEvent<HTMLElement>,
@@ -104,10 +102,9 @@ export default function Searching() {
 
    return (
       <div className="App">
-         <h1>Search For Apartments</h1>
          <div>
             <div style={{ display: 'flex', justifyContent: 'center' }}>
-               <div className="search" style={{ width: '800px' }}>
+               {/*<div className="search" style={{ width: '800px' }}>
                   <TextField
                      id="outlined-basic"
                      variant="outlined"
@@ -117,8 +114,9 @@ export default function Searching() {
                      onKeyDown={handlePress}
                      onChange={handleChange}
                   />
+               </div>*/}
                </div>
-            </div>
+            <SearchBar/>
             <br />
             <ToggleButtonGroup
                color="primary"
diff --git a/src/frontend/src/components/SearchBar.tsx b/src/frontend/src/components/SearchBar.tsx
new file mode 100644
index 000000000..08c82c0d1
--- /dev/null
+++ b/src/frontend/src/components/SearchBar.tsx
@@ -0,0 +1,29 @@
+import React from "react";
+import { useState } from "react";
+import TextField from "@mui/material/TextField";
+import List from "./List";
+import "./SearchBarStyles.css";
+
+const SearchBar = () => {
+  const [inputText, setInputText] = useState("");
+  return (
+    <div className="main">
+      <h1>Apartment Search</h1>
+      <div className="search">
+        <TextField
+          id="outlined-basic"
+          onChange={(e: React.ChangeEvent<HTMLInputElement>) => setInputText(e.target.value.toLowerCase())}
+          variant="outlined"
+          fullWidth
+          label="Search"
+          className="myInput"
+        />
+      </div>
+      <div className="myDropdown">
+        <List props={inputText} /> 
+      </div>
+    </div>
+  );
+}
+
+export default SearchBar;
diff --git a/src/frontend/src/components/SearchBarStyles.css b/src/frontend/src/components/SearchBarStyles.css
new file mode 100644
index 000000000..9a3f3543b
--- /dev/null
+++ b/src/frontend/src/components/SearchBarStyles.css
@@ -0,0 +1,37 @@
+.search {
+    background-position: 14px 12px;
+    background-repeat: no-repeat;
+    font-size: 16px;
+    padding: 14px 20px 12px 45px;
+    border: none;
+    margin-left: 600px;
+    width: 500px;
+}
+  
+.box {
+    text-align: center;
+    border: black ridge 1px;
+    border-radius: 10px;
+    margin: 3px;
+    width: 20rem;
+    padding-left: 10px;
+}
+
+.list {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    box-sizing: border-box;
+}
+
+.myDropdown {
+    min-width: 230px;
+    overflow: auto;
+    z-index: 1; 
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    box-sizing: border-box;
+}
diff --git a/src/frontend/src/staticdata.json b/src/frontend/src/staticdata.json
new file mode 100644
index 000000000..979956892
--- /dev/null
+++ b/src/frontend/src/staticdata.json
@@ -0,0 +1,130 @@
+[{
+      "id": 1,
+      "name": "Champaign park",
+      "address": "West Green",
+      "review": "Horribly awesome Horribly awesome Horribly awesome Horribly awesome Horribly awesome Horribly awesome Horribly awesome Horribly awesome Horribly awesome Horribly awesome",
+      "image": "https://upload.wikimedia.org/wikipedia/commons/7/7f/St_James_Town1.jpg",
+      "rating": 0,
+      "price_min": "500",
+      "price_max": "1000"
+    },
+    {
+      "id": 2,
+      "name": "Maywoods Apartments",
+      "address": "West springfield",
+      "review": "Slightly above average",
+      "image": "https://upload.wikimedia.org/wikipedia/commons/thumb/4/47/English_Bay_Vancouver.jpg/1280px-English_Bay_Vancouver.jpg",
+      "rating": 0,
+      "price_min": "500",
+      "price_max": "1000"
+    },
+    {
+      "id": 3,
+      "name": "Town and County",
+      "address": "Healey street",
+      "review": "Slightly AMAZING",
+      "image": "https://upload.wikimedia.org/wikipedia/commons/b/b0/Dingbat_MaryJane.jpg",
+      "rating": 0,
+      "price_min": "500",
+      "price_max": "1000"
+    },
+    {
+      "id": 4,
+      "name": "Lancaster Apartments",
+      "address": "Wright street",
+      "review": "Extremely average",
+      "image": "https://upload.wikimedia.org/wikipedia/commons/7/7f/St_James_Town1.jpg",
+      "rating": 0,
+      "price_min": "500",
+      "price_max": "1000"
+    },
+    {
+      "id": 5,
+      "name": "cool park",
+      "address": "White St.",
+      "review": "Amazingly horrible",
+      "image": "https://upload.wikimedia.org/wikipedia/commons/7/7f/St_James_Town1.jpg",
+      "rating": 0,
+      "price_min": "500",
+      "price_max": "1000"
+    },
+    {
+      "id": 6,
+      "name": "Champaign park",
+      "address": "1032 E Kerr Ave",
+      "review": "Slightly green",
+      "image": "https://upload.wikimedia.org/wikipedia/commons/7/7f/St_James_Town1.jpg",
+      "rating": 0,
+      "price_min": "500",
+      "price_max": "1000"
+    },
+    {
+      "id": 7,
+      "name": "not a park",
+      "address": "Wright street",
+      "review": "Too yellow",
+      "image": "https://upload.wikimedia.org/wikipedia/commons/7/7f/St_James_Town1.jpg",
+      "rating": 0,
+      "price_min": "500",
+      "price_max": "1000"
+    },
+    {
+      "id": 8,
+      "name": "park park",
+      "address": "West springfield",
+      "review": "Slightly below average horrible",
+      "image": "https://upload.wikimedia.org/wikipedia/commons/7/7f/St_James_Town1.jpg",
+      "rating": 0,
+      "price_min": "500",
+      "price_max": "1000"
+    },
+    {
+      "id": 9,
+      "name": "Urbana park",
+      "address": "51 E John",
+      "review": "Purple",
+      "image": "https://upload.wikimedia.org/wikipedia/commons/7/7f/St_James_Town1.jpg",
+      "rating": 0,
+      "price_min": "500",
+      "price_max": "1000"
+    },
+    {
+      "id": 10,
+      "name": "Good park",
+      "address": "Wright street",
+      "review": "Orange",
+      "image": "https://upload.wikimedia.org/wikipedia/commons/7/7f/St_James_Town1.jpg",
+      "rating": 0,
+      "price_min": "500",
+      "price_max": "1000"
+    },
+    {
+      "id": 11,
+      "name": "Bad park",
+      "address": "West springfield",
+      "review": "AMAZING AMAZING average",
+      "image": "https://upload.wikimedia.org/wikipedia/commons/7/7f/St_James_Town1.jpg",
+      "rating": 0,
+      "price_min": "500",
+      "price_max": "1000"
+    },
+    {
+      "id": 12,
+      "name": "Spooky park",
+      "address": "Green st.",
+      "review": "Slightly AMAZING AMAZING AMAZING",
+      "image": "https://upload.wikimedia.org/wikipedia/commons/7/7f/St_James_Town1.jpg",
+      "rating": 0,
+      "price_min": "500",
+      "price_max": "1000"
+    },
+    {
+      "id": 13,
+      "name": "Corporate park",
+      "address": "202 E Daniel St.",
+      "review": "Extremely AMAZING AMAZING AMAZING",
+      "image": "https://upload.wikimedia.org/wikipedia/commons/7/7f/St_James_Town1.jpg",
+      "rating": 0,
+      "price_min": "500",
+      "price_max": "1000"
+}]
\ No newline at end of file