diff --git a/.idea/.gitignore b/.idea/.gitignore
new file mode 100644
index 000000000..7f669552a
--- /dev/null
+++ b/.idea/.gitignore
@@ -0,0 +1,7 @@
+# Default ignored files
+/shelf/
+/workspace.xml
+# Editor-based HTTP Client requests
+/httpRequests/
+
+.idea/
diff --git a/README.md b/README.md
index 5711ee7f8..1e582f0cc 100644
--- a/README.md
+++ b/README.md
@@ -1,3 +1,6 @@
+[Demo](https://cyf-irynalypnyk-hotel-react.netlify.app/)
+
+
 A hotel booking application in React. Homework for the [CodeYourFuture React module](https://codeyourfuture.github.io/syllabus-master/react/)
 
 ![Bookings Search page](Bookings.png)
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/public/images/glasgow.jpeg b/public/images/glasgow.jpeg
new file mode 100644
index 000000000..76673e973
Binary files /dev/null and b/public/images/glasgow.jpeg differ
diff --git a/public/images/logo.png b/public/images/logo.png
new file mode 100644
index 000000000..694c3ed68
Binary files /dev/null and b/public/images/logo.png differ
diff --git a/public/images/london.jpeg b/public/images/london.jpeg
new file mode 100644
index 000000000..9407936f7
Binary files /dev/null and b/public/images/london.jpeg differ
diff --git a/public/images/manchester.jpeg b/public/images/manchester.jpeg
new file mode 100644
index 000000000..742b0ba1e
Binary files /dev/null and b/public/images/manchester.jpeg differ
diff --git a/public/index.html b/public/index.html
index e4ed67b21..dd7409117 100644
--- a/public/index.html
+++ b/public/index.html
@@ -11,6 +11,10 @@
       manifest.json provides metadata used when your web app is added to the
       homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
     -->
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Diphylleia&family=Moirai+One&family=Montserrat:wght@300;400&display=swap" rel="stylesheet">
+
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
     <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
     <!--
diff --git a/src/App.css b/src/App.css
index 05fe2d52e..59e676bdd 100644
--- a/src/App.css
+++ b/src/App.css
@@ -1,15 +1,52 @@
+:root {
+  --blue: #007bff;
+  --greyBg: #f8f9fa;
+}
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+  line-height: 1.2;
+  font-family: 'Montserrat', sans-serif;
+}
+
+html, body, #root {
+  width: 100%;
+  height: 100%;
+}
+ul, li {
+  list-style-position: inside;
+}
+
+#root {
+  width: 100%;
+  height: 100%;
+}
+
 .App {
   text-align: left;
 }
 
 .App-logo {
-  animation: App-logo-spin infinite 20s linear;
-  height: 80px;
+  //animation: App-logo-spin infinite 20s linear;
+  height: 40px;
+  margin-right: 20px;
+
+}
+
+.App-logo-text{
+  font-family: 'Moirai One', cursive;
 }
 
 .App-header {
-  background-color: #222;
-  height: 50px;
+  display: flex;
+  /*background-color: #736F72;*/
+  height: auto;
   padding: 20px;
   color: white;
   text-align: left;
@@ -23,35 +60,72 @@
 }
 
 .App-content {
-  padding-top: 20px;
+  padding-top: 40px;
   font-size: large;
 }
 
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
 .search {
   padding: 5px 0 20px 0;
 }
 
 tr {
   color: #5b5757;
+  cursor: pointer;
+}
+
+tr.selected {
+  color: var(--blue);
+  background-color: var(--greyBg);
+}
+
+.card-deck-grid{
+  display: grid!important;
+  grid-template-rows: auto;
+  grid-template-columns: 1fr;
+  row-gap: 24px;
+}
+
+.card-body {
+  flex: 1 1 auto;
+}
+
+.card-footer{
+  border-top: none;
+  background-color: initial;
+  padding-bottom: 25px;
 }
 
 .results {
   padding-top: 15px;
 }
 
+.searchResult {
+  overflow-x: auto;
+}
+
+.searchResult  .table {
+  font-size: 14px;
+  width: 100%;
+}
+
+.searchResult .btn{
+  white-space: nowrap;
+}
+
+.orders {
+  display: flex;
+  flex-direction: column;
+  row-gap: 10px;
+}
+
 .footer {
   padding-top: 20px;
+  padding-bottom: 20px;
   text-align: center;
 }
 
-.card {
-  width: 18rem;
+@media (min-width: 900px){
+  .card-deck-grid{
+    grid-template-columns: repeat(3, 1fr);
+  }
 }
diff --git a/src/App.js b/src/App.js
index 953c98560..bde700e9e 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,13 +1,27 @@
 import React from "react";
+import "./App.css";
 
 import Bookings from "./Bookings";
-import "./App.css";
+import Footer from "./Footer";
+import Heading from "./Heading";
+import Restaurant from "./Restaurant";
+import TouristInfoCards from "./TouristInfoCards";
+
+const data = ["123 Fake Street, London, E1 4UD", "hello@fakehotel.com", "0123 456789"];
 
 const App = () => {
+
   return (
     <div className="App">
-      <header className="App-header">CYF Hotel</header>
-      <Bookings />
+      <Heading />
+      <div className="App-content">
+        <div className="container">
+          <TouristInfoCards />
+          <Bookings />
+          <Restaurant />
+        </div>
+      </div>
+      <Footer data={data} />
     </div>
   );
 };
diff --git a/src/Bookings.js b/src/Bookings.js
index e0d911b13..24b3969b5 100644
--- a/src/Bookings.js
+++ b/src/Bookings.js
@@ -1,18 +1,61 @@
-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";
+//import FakeBookings from "./data/fakeBookings.json";
 
 const Bookings = () => {
+  const [bookings, setBookings] = useState([]);
+  const [filteredBookings, setFilteredBookings] = useState([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState(false);
+
+  useEffect(() => {
+    setIsLoading(true);
+    fetch("https://cyf-react.glitch.me")
+      .then(res => {
+      if(res.status >= 400) {
+        throw new Error("Server responds with error!");
+      } else {
+        return res.json()
+      }})
+      .then(data => {
+        setBookings(data);
+        setIsLoading(false);
+    },
+    err => {
+      setError(err)
+      setIsLoading(false);
+    });
+  }, []);
+
+  useEffect(()=> {
+    setFilteredBookings(bookings)
+  }, [bookings])
+
+
   const search = searchVal => {
-    console.info("TO DO!", searchVal);
+   if(searchVal) {
+     const filteredBookings = bookings.filter(booking => {
+       const {firstName, surname} = booking;
+       const preparedSearchVal = searchVal.toLowerCase();
+       const preparedFirstName = firstName.toLowerCase();
+       const preparedSurname = surname.toLowerCase();
+       return preparedFirstName.includes(preparedSearchVal) || preparedSurname.includes(preparedSearchVal)
+     });
+     setFilteredBookings(filteredBookings);
+   } else {
+     setFilteredBookings(bookings);
+   }
   };
 
+
   return (
     <div className="App-content">
       <div className="container">
         <Search search={search} />
-        {/* <SearchResults results={FakeBookings} /> */}
+        {isLoading &&  <div>Loading...</div>}
+        {!isLoading && error &&  <div>{error.message} </div>}
+        {!isLoading && bookings && <SearchResults results={filteredBookings} />}
       </div>
     </div>
   );
diff --git a/src/CustomerProfile.js b/src/CustomerProfile.js
new file mode 100644
index 000000000..be6f4b6ab
--- /dev/null
+++ b/src/CustomerProfile.js
@@ -0,0 +1,30 @@
+import React, { useEffect, useState } from "react";
+
+function CustomerProfile({id}) {
+  const [profile, setProfile] = useState(id)
+
+  useEffect(()=>{
+    fetch(`https://cyf-react.glitch.me/customers/${id}`)
+      .then(res=>res.json())
+      .then(data=>setProfile(data));
+  },[id])
+
+  return (
+    <>
+      {profile ? (
+        <div className="App-content">
+        <h4>Customer profile</h4>
+            <ul>
+              <li>Customer ID: {profile.id}</li>
+              <li>VIP: {profile.vip ? "Yes" : "No"}</li>
+              <li>Email: {profile.email}</li>
+              <li>Tel: {profile.phoneNumber}</li>
+            </ul>
+        </div>
+      ) : null}
+    </>
+
+  );
+}
+
+export default CustomerProfile;
\ No newline at end of file
diff --git a/src/Footer.js b/src/Footer.js
new file mode 100644
index 000000000..6b52278d8
--- /dev/null
+++ b/src/Footer.js
@@ -0,0 +1,13 @@
+import React from "react";
+
+const Footer = ({data}) => {
+    return (
+        <footer className="footer bg-light">
+            <ul>
+                {data.map(item => (<ul key={item}>{item}</ul>))}
+            </ul>
+        </footer>
+    );
+};
+
+export default Footer;
diff --git a/src/Heading.js b/src/Heading.js
new file mode 100644
index 000000000..96609f9af
--- /dev/null
+++ b/src/Heading.js
@@ -0,0 +1,12 @@
+import React from "react";
+
+const Heading = () => {
+    return (
+        <header className="App-header bg-dark">
+            <img src="/images/logo.png" alt="logo" className="App-logo"/>
+            <h1 className="App-logo-text">CYF Hotel</h1>
+        </header>
+     );
+};
+
+export default Heading;
diff --git a/src/InfoCard.js b/src/InfoCard.js
new file mode 100644
index 000000000..fecd8ddef
--- /dev/null
+++ b/src/InfoCard.js
@@ -0,0 +1,16 @@
+import React from 'react';
+
+function InfoCard({img, title, descr, link}) {
+    return (
+        <div className="card">
+            <img src={img} className="card-img-top" />
+            <div className="card-body">
+                <h3 className="card-title">{title}</h3>
+                <p className="card-text">{descr}</p>
+            </div>
+            <div className="card-footer"><a href={link} className="btn btn-outline-primary">More Information</a></div>
+        </div>
+    );
+}
+
+export default InfoCard;
\ No newline at end of file
diff --git a/src/Order.js b/src/Order.js
new file mode 100644
index 000000000..adc244645
--- /dev/null
+++ b/src/Order.js
@@ -0,0 +1,17 @@
+import React, { useState } from "react";
+
+function Order({orderType}) {
+  const [orders, setOrders] = useState(0);
+
+  const orderOne = () => {
+    setOrders(orders + 1);
+  }
+
+  return (
+    <li>
+      {orderType}: {orders} <button className="btn btn-primary" onClick={orderOne}>Add</button>
+    </li>
+  );
+}
+
+export default Order;
\ No newline at end of file
diff --git a/src/Restaurant.js b/src/Restaurant.js
index ecb2b43a2..6619d1367 100644
--- a/src/Restaurant.js
+++ b/src/Restaurant.js
@@ -1,15 +1,18 @@
 import React from "react";
+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>
-      </ul>
+    <div className="App-content pb-5">
+      <div className="container">
+        <h4>Restaurant Orders</h4>
+        <ul className="orders">
+          <Order orderType="Pizzas" />
+          <Order orderType="Salads" />
+          <Order orderType="Chocolate cake" />
+        </ul>
+      </div>
     </div>
   );
 };
diff --git a/src/Search.js b/src/Search.js
index 7bd5871c0..df5035978 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 = ({ search }) => {
+  const [searchInput, setSearchInput] = useState("");
+
+  const handleSearchInput = event => {
+    const search = event.target.value;
+    setSearchInput(search)
+  }
+
+  const handleSearchSubmit = (event) => {
+    event.preventDefault();
+    search(searchInput)
+  }
 
-const Search = () => {
   return (
     <div className="search">
       <div className="page-header">
@@ -8,7 +21,7 @@ const Search = () => {
       </div>
       <div className="row search-wrapper">
         <div className="col">
-          <form className="form-group search-box">
+          <form className="form-group search-box" onSubmit={handleSearchSubmit}>
             <label htmlFor="customerName">Customer name</label>
             <div className="search-row">
               <input
@@ -16,8 +29,10 @@ const Search = () => {
                 id="customerName"
                 className="form-control"
                 placeholder="Customer name"
+                value={searchInput}
+                onChange={handleSearchInput}
               />
-              <button className="btn btn-primary">Search</button>
+              <SearchButton/>
             </div>
           </form>
         </div>
diff --git a/src/SearchButton.js b/src/SearchButton.js
new file mode 100644
index 000000000..20f8bf04c
--- /dev/null
+++ b/src/SearchButton.js
@@ -0,0 +1,9 @@
+import React from "react";
+
+const SearchButton = () => {
+    return (
+        <button className="btn btn-primary">Search</button>
+    );
+};
+
+export default SearchButton;
diff --git a/src/SearchResults.js b/src/SearchResults.js
new file mode 100644
index 000000000..e09cb27bc
--- /dev/null
+++ b/src/SearchResults.js
@@ -0,0 +1,64 @@
+import React, { useState } from "react";
+import moment from "moment";
+import CustomerProfile from "./CustomerProfile";
+
+const SearchResults = (props) => {
+  const { results } = props;
+  const [selected, setSelected] = useState(null);
+  const [customerProfile, setCustomerProfile] = useState(null);
+  const handleRowClick = (id) => () => {
+    setSelected(id);
+  };
+
+  const showCustomerProfile = (id) => () => {
+    setCustomerProfile(id);
+  };
+
+  return (
+    <>
+      <div className="searchResult">
+        <table className="table">
+          <thead>
+          <tr>
+            <th scope="col">id</th>
+            <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">check in date</th>
+            <th scope="col">check out date</th>
+            <th scope="col">qty of nights</th>
+            <th scope="col"></th>
+          </tr>
+          </thead>
+          <tbody>
+          {results && results.map(booking => {
+            const { id, title, firstName, surname, email, roomId, checkInDate, checkOutDate } = booking;
+            const nightsQty = moment(checkOutDate).diff(moment(checkInDate), "days");
+            return (
+              <tr key={id} onClick={handleRowClick(id)} className={selected === id ? "selected" : null}>
+                <td>{id}</td>
+                <td>{title}</td>
+                <td>{firstName}</td>
+                <td>{surname}</td>
+                <td>{email}</td>
+                <td>{roomId}</td>
+                <td>{checkInDate}</td>
+                <td>{checkOutDate}</td>
+                <td>{nightsQty}</td>
+                <td>
+                  <button className="btn btn-outline-secondary" onClick={showCustomerProfile(id)}>Show profile</button>
+                </td>
+              </tr>
+            );
+          })}
+          </tbody>
+        </table>
+      </div>
+      {customerProfile ? <CustomerProfile id={customerProfile} /> : null}
+    </>
+  );
+};
+
+export default SearchResults;
diff --git a/src/TouristInfoCards.js b/src/TouristInfoCards.js
new file mode 100644
index 000000000..c50e8f4ea
--- /dev/null
+++ b/src/TouristInfoCards.js
@@ -0,0 +1,38 @@
+import React, {Fragment} from "react";
+import InfoCard from "./InfoCard";
+
+const cardsInfo = [
+    {
+        img: "/images/glasgow.jpeg",
+        title: "Glasgow",
+        descr: "Glasgow is the largest city in Scotland, and the third-largest city in the United Kingdom. It’s also one of Britain’s 32 unitary authorities, handling local government for Glasgow City Council. The city is very well-known for being one of the UK’s most important industrial centers, with a strong focus on fashion, retail and technology.",
+        link: "/images/glasgow.jpeg",
+    },
+    {
+        img: "/images/manchester.jpeg",
+        title: "Manchester",
+        descr: "Manchester is the only UK city to feature in Lonely Planet's Best in Travel 2023 list and the only UK city in National Geographic's influential ‘Best of the World’ list which annually sets out 25 of the must-see places to visit around the globe.",
+        link: "https://visitmanchester.com",
+    },
+    {
+        img: "/images/london.jpeg",
+        title: "London",
+        descr: "Welcome to London! Discover the best of London with Visit London, the official guide to England’s exciting capital. Find things to do in London, from iconic sightseeing spots and fun-filled days out to top restaurants, theatre and unmissable London events. If you’re not able to visit just yet, plan ahead to make the most of your next visit.",
+        link: "https://visitlondon.com",
+    },
+]
+
+const TouristInfoCards = () => {
+    return (
+        <div className="card-deck card-deck-grid">
+            {cardsInfo.map(card=>{
+                const { img, title, descr, link } = card;
+                return (<Fragment key={title}>
+                    <InfoCard img={img} title={title} descr={descr} link={link}/>
+                </Fragment>)
+            })}
+        </div>
+    );
+};
+
+export default TouristInfoCards;