diff --git a/package-lock.json b/package-lock.json
index 8197e6f22..94217b93a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,7 @@
       "name": "react-hotel",
       "version": "0.1.0",
       "dependencies": {
+        "moment": "^2.29.4",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-scripts": "^5.0.1"
@@ -11681,6 +11682,14 @@
         "mkdirp": "bin/cmd.js"
       }
     },
+    "node_modules/moment": {
+      "version": "2.29.4",
+      "resolved": "https://registry.npmjs.org/moment/-/moment-2.29.4.tgz",
+      "integrity": "sha512-5LC9SOxjSc2HF6vO2CyuTDNivEdoz2IvyJJGj6X8DJ0eFyfszE0QiEd+iXmBvUP3WHxSjFH/vIsA0EN00cgr8w==",
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/mri": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/mri/-/mri-1.2.0.tgz",
diff --git a/package.json b/package.json
index e3e1562a7..f81c28013 100644
--- a/package.json
+++ b/package.json
@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "moment": "^2.29.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-scripts": "^5.0.1"
diff --git a/src/App.css b/src/App.css
index 05fe2d52e..11c498c2a 100644
--- a/src/App.css
+++ b/src/App.css
@@ -4,9 +4,10 @@
 
 .App-logo {
   animation: App-logo-spin infinite 20s linear;
-  height: 80px;
+  height: 60px;
 }
 
+
 .App-header {
   background-color: #222;
   height: 50px;
@@ -48,10 +49,42 @@ tr {
 }
 
 .footer {
-  padding-top: 20px;
+  padding-top: 10px;
   text-align: center;
 }
 
+.card-img {
+  width: 100%;
+  height: auto;
+  flex-grow: 1;
+}
+
+.card-container {
+  display: flex;
+  justify-content: space-around;
+  margin-top: 50px;
+}
+
 .card {
   width: 18rem;
 }
+
+/* .footer {
+  position: fixed;
+  left: 0;
+  bottom: 0;
+  width: 100%;
+  padding: 10px;
+  text-align: center;
+  background-color: #222;
+}
+
+.footer, h1 {
+  color:white;
+} */
+
+.selected-row {
+  background-color: yellow;
+  color: black;
+  font-weight: bold;
+}
\ No newline at end of file
diff --git a/src/App.js b/src/App.js
index 953c98560..52d111a98 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,13 +1,20 @@
 import React from "react";
-
 import Bookings from "./Bookings";
 import "./App.css";
+import Heading from "./Heading";
+import TouristInfoCards from "./TouristInfoCards";
+import Footer from "./Footer";
+import SearchResults from "./SearchResults";
+import Restaurant from './Restaurant'
 
 const App = () => {
   return (
     <div className="App">
-      <header className="App-header">CYF Hotel</header>
+      <Heading />
+      <TouristInfoCards />
       <Bookings />
+      <Restaurant />
+      <Footer />
     </div>
   );
 };
diff --git a/src/Bookings.js b/src/Bookings.js
index e0d911b13..3e3c55c56 100644
--- a/src/Bookings.js
+++ b/src/Bookings.js
@@ -1,19 +1,56 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
 import Search from "./Search.js";
-// import SearchResults from "./SearchResults.js";
-// import FakeBookings from "./data/fakeBookings.json";
+import SearchResults from "./SearchResults.js";
 
 const Bookings = () => {
-  const search = searchVal => {
-    console.info("TO DO!", searchVal);
+  const [bookings, setBookings] = useState([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState(null);
+
+  useEffect(() => {
+    fetch("https://cyf-react.glitch.me")
+      .then((response) => response.json())
+      .then((json) => {
+        setBookings(json);
+        setIsLoading(false);
+      })
+      .catch((error) => {
+        console.log("Error fetching data:", error);
+        setError("Error fetching data. Please try again later.");
+        setIsLoading(false);
+      });
+  }, []);
+
+  useEffect(() => {
+    fetch("https://cyf-react.glitch.me")
+      .then((response) => response.json())
+      .then((json) => setBookings(json))
+      .catch((error) => console.log("Error fetching data:", error));
+  }, []);
+
+  var search = (searchVal) => {
+    const filteredBookings = bookings.filter(
+      (booking) =>
+        booking.firstName.includes(searchVal) ||
+        booking.surname.includes(searchVal)
+    );
+    setBookings(filteredBookings);
   };
 
   return (
     <div className="App-content">
-      <div className="container">
-        <Search search={search} />
-        {/* <SearchResults results={FakeBookings} /> */}
-      </div>
+      {isLoading ? (
+        <h1>Loading...Please Wait</h1>
+      ) : error ? (
+        <h1>{error}</h1>
+      ) : (
+        <div className="container">
+          <div className="container">
+            <Search search={search} />
+            <SearchResults bookings={bookings} />
+          </div>
+        </div>
+      )}
     </div>
   );
 };
diff --git a/src/CostumerProfile.js b/src/CostumerProfile.js
new file mode 100644
index 000000000..8e05e356e
--- /dev/null
+++ b/src/CostumerProfile.js
@@ -0,0 +1,44 @@
+import React, { useEffect, useState } from "react";
+
+const CostumerProfile = ({id}) => {
+   
+   const [costumerProfile, setCostumerProfile] = useState(null)
+   
+   useEffect(() => {
+      const fetchCostumerProfile = async () => {
+         try {
+            const res = await fetch(`https://cyf-react.glitch.me/customers/${id}`);
+            const data = await res.json();
+            setCostumerProfile(data);
+         } catch (error) {
+            console.error("Error fetching Costumer Profile:", error);
+         }
+      };
+      if (id) {
+         fetchCostumerProfile();
+      }
+   }, [id]);
+
+   if (!id) {
+      return null;
+   }
+
+   return(
+      <div>
+        {costumerProfile ? (
+         <div>
+            <h1>Costumer Profile {id}</h1>
+            <ul>
+               <li>Email: {costumerProfile.email}</li>
+               <li>VIP: {costumerProfile.vip ? "Yes" : "No"}</li>
+               <li>Phone Number: {costumerProfile.phoneNumber}</li>
+            </ul>
+         </div>
+        ) : (
+         <p>Loading Costumer Profile...</p>
+        )}
+      </div>
+   );
+};
+
+export default CostumerProfile;
\ No newline at end of file
diff --git a/src/Footer.js b/src/Footer.js
new file mode 100644
index 000000000..b60e35dfe
--- /dev/null
+++ b/src/Footer.js
@@ -0,0 +1,15 @@
+import React from "react";
+
+const Footer = () => {
+
+const myProps = ["123 Fake Street, London, E1 4UD", "hello@fakehotel.com", "0123 456789"];
+return(
+    <div className="footer">
+        <ul className="ul">
+            {myProps.map((item, index) => <li key={index}>{item}</li>
+        )}
+        </ul> 
+    </div>
+)
+}
+export default Footer;
\ No newline at end of file
diff --git a/src/Heading.js b/src/Heading.js
new file mode 100644
index 000000000..60bbec09b
--- /dev/null
+++ b/src/Heading.js
@@ -0,0 +1,12 @@
+import React from "react";
+import "./App.css";
+
+const Heading = () => {
+    return(
+        <header className="App-header">
+            <img alt="App-logo" className="App-logo" src="https://marketplace.canva.com/EAE8Xyb2xY8/1/0/1600w/canva-gold-exclusive-royal-luxury-hotel-logo-izeElzvImEY.jpg"></img>
+            <h1>CYF Hotel</h1></header>
+    );
+}
+
+export default Heading;
\ No newline at end of file
diff --git a/src/Order.js b/src/Order.js
new file mode 100644
index 000000000..e37ec101f
--- /dev/null
+++ b/src/Order.js
@@ -0,0 +1,19 @@
+import React, { useState } from "react";
+import RestaurantButton from "./RestaurantButton";
+
+const Order = ({orderType}) => {
+    const [orders, setOrders] = useState(0);
+    
+    const orderOne = () => {
+      setOrders(orders + 1);
+    };
+
+    return(
+        <li>
+          {orderType} {orders} <RestaurantButton onClick={orderOne}/>
+        </li>
+        
+    )
+}
+
+export default Order;
\ No newline at end of file
diff --git a/src/Restaurant.js b/src/Restaurant.js
index ecb2b43a2..4530da2ed 100644
--- a/src/Restaurant.js
+++ b/src/Restaurant.js
@@ -1,14 +1,16 @@
-import React from "react";
+import React, { useState } from "react";
+import RestaurantButton from './RestaurantButton';
+import Order from './Order';
 
 const Restaurant = () => {
-  const pizzas = 0;
+
   return (
     <div>
       <h3>Restaurant Orders</h3>
       <ul>
-        <li>
-          Pizzas: {pizzas} <button className="btn btn-primary">Add</button>
-        </li>
+          <Order orderType="Pizzas"/>
+          <Order orderType="Salads"/>
+          <Order orderType="Chocolate cake"/>
       </ul>
     </div>
   );
diff --git a/src/RestaurantButton.js b/src/RestaurantButton.js
new file mode 100644
index 000000000..c9debc2c7
--- /dev/null
+++ b/src/RestaurantButton.js
@@ -0,0 +1,14 @@
+import React, { useState } from "react";
+
+const RestaurantButton = ({ onClick }) => {
+    return (
+        <button className="btn btn-primary"
+          onClick={onClick} >Add</button>
+    )
+
+
+}
+
+
+export default RestaurantButton;
+
diff --git a/src/Search.js b/src/Search.js
index 7bd5871c0..d1d67afd8 100644
--- a/src/Search.js
+++ b/src/Search.js
@@ -1,6 +1,19 @@
-import React from "react";
+import React, { useState } from "react";
+import SearchButton from "./SearchButton";
+
+const Search = (props) => {
+
+const [searchInput, setSearchInput] = useState("")
+
+const handleSearchInput = (event) => {
+  setSearchInput(event.target.value);
+}
+
+const handleSubmitInput = event => {
+  event.preventDefault();
+  props.search(searchInput);
+}
 
-const Search = () => {
   return (
     <div className="search">
       <div className="page-header">
@@ -8,16 +21,19 @@ const Search = () => {
       </div>
       <div className="row search-wrapper">
         <div className="col">
-          <form className="form-group search-box">
+          <form onSubmit={handleSubmitInput} 
+                className="form-group search-box">
             <label htmlFor="customerName">Customer name</label>
             <div className="search-row">
               <input
+                value={searchInput}
+                onChange={handleSearchInput}
                 type="text"
                 id="customerName"
                 className="form-control"
                 placeholder="Customer name"
               />
-              <button className="btn btn-primary">Search</button>
+              <SearchButton />
             </div>
           </form>
         </div>
@@ -26,4 +42,5 @@ const Search = () => {
   );
 };
 
+
 export default Search;
diff --git a/src/SearchButton.js b/src/SearchButton.js
new file mode 100644
index 000000000..8493d2830
--- /dev/null
+++ b/src/SearchButton.js
@@ -0,0 +1,10 @@
+import React from "react";
+
+
+const SearchButton = () => {
+    return(  
+        <button className="btn btn-primary">Search</button>
+    );
+  }
+  
+  export default SearchButton;
\ No newline at end of file
diff --git a/src/SearchResults.js b/src/SearchResults.js
new file mode 100644
index 000000000..1b41614ff
--- /dev/null
+++ b/src/SearchResults.js
@@ -0,0 +1,65 @@
+import React, { useState } from "react";
+import moment from "moment/moment";
+import CostumerProfile from "./CostumerProfile";
+
+const SearchResults = (props) => {
+   const [selectedRows, setSelectedRows] = useState([]); 
+   const [selectedCostumerId, setSelectedCostumerId] = useState(null);
+
+   const handleShowProfile = (id) => {
+    setSelectedCostumerId(id);
+   }
+
+   const selectedClicks = (bookingId) => {
+    setSelectedRows((selectedClickedRows) => {
+        if (selectedClickedRows.includes(bookingId)) {
+            return selectedClickedRows.filter((id) => id !== bookingId)
+        } else {
+            return [...selectedClickedRows, bookingId];
+        }
+    });
+    }
+    
+
+   return(
+    <div>
+        <CostumerProfile id={selectedCostumerId}/>
+        <table className="table">
+            <thead>
+                <tr>
+                    <th scope="col">Title</th>
+                    <th scope="col">First Name</th>
+                    <th scope="col">Surname</th>
+                    <th scope="col">Email</th>
+                    <th scope="col">Room ID</th>
+                    <th scope="col">CheckIn</th>
+                    <th scope="col">CheckOut</th>
+                    <th scope="col">Nights</th>
+                    <th scope="button">Costumer Profile</th>
+                </tr>
+            </thead>
+            <tbody className="tbody">
+                {props.bookings.map((booking, key) => (
+                <tr 
+                key={booking.id}
+                className={selectedRows.includes(booking.id) ? "selected-row" : ""}
+                onClick={() => selectedClicks(booking.id)}>
+                    <th scope="row">{booking.title}</th>
+                     <td>{booking.firstName}</td>
+                     <td>{booking.surname}</td>
+                     <td>{booking.email}</td>
+                     <td>{booking.roomId}</td>
+                     <td>{booking.checkInDate}</td>
+                     <td>{booking.checkOutDate}</td>
+                     <td>{moment(booking.checkOutDate).diff(booking.checkInDate, "days")}</td>
+                    <td>
+                        <button onClick={() => handleShowProfile(booking.id)}>Show Profile</button>
+                    </td>
+                </tr>
+                ))}
+             </tbody>
+        </table>     
+        </div>
+     )
+};
+export default SearchResults;
\ No newline at end of file
diff --git a/src/TouristInfoCards.js b/src/TouristInfoCards.js
new file mode 100644
index 000000000..15906ed7a
--- /dev/null
+++ b/src/TouristInfoCards.js
@@ -0,0 +1,31 @@
+import React from "react";
+
+const TouristInfoCards = () => {
+    return(
+        <div className="card-container">
+            <img src="" alt=""></img>
+            <div className="card">
+                <img className="card-img" src="https://media.istockphoto.com/id/1421242432/photo/glasgow-united-kingdom-aerial-shot-of-modern-buildings-in-the-central-area-of-the-city-with.jpg?s=612x612&w=0&k=20&c=5atqO3S6NsvBJazWGSyth82FhvVfgajQARHv8KQ0J-Q=" alt="glasgow"></img>
+                <h4>Glasgow</h4>
+                <p>Glasgow's city centre is home to flagship stores, impressive shopping centres and designer favourites all within an easily walkable area.</p>
+                <a href="https://www.peoplemakeglasgow.com" className="btn btn-primary">More Information</a>
+            </div>
+             <img src="" alt=""></img>
+            <div className="card">
+                <img className="card-img" src="https://media.istockphoto.com/id/1061647528/photo/view-of-a-footbridge-in-salford-quays-in-manchester-england.jpg?s=612x612&w=0&k=20&c=vl5COcWWCtvUM8Nu26oP2WUTfhP45wcGNN8nrbtjcsw=" alt="manchester"></img>
+                <h4>Manchester</h4>
+                <p>Manchester is one of the most exciting places to visit in the UK right now where everybody and anybody is very warmly welcomed.</p>
+                <a href="https://www.visitmanchester.com" className="btn btn-primary">More Information</a>
+            </div>
+             <img src="" alt=""></img>
+            <div className="card">
+                <img className="card-img" src="https://img.freepik.com/free-photo/panoramic-view-big-ben-london-sunset-uk_268835-1401.jpg?w=2000" alt="london"></img>
+                <h4>London</h4>
+                <p>Visit London, the official guide to England’s exciting capital. For more Information click the link and visit the wonders of London</p>
+                <a href="https://www.visitlondon.com" className="btn btn-primary">More Information</a>
+            </div>
+        </div>
+    )
+} 
+
+export default TouristInfoCards;
\ No newline at end of file