diff --git a/README.md b/README.md
index f1acf93..efa9bc7 100644
--- a/README.md
+++ b/README.md
@@ -2,6 +2,8 @@
 
 Free meal planner for cooks short on ideas! (like me …)
 
+[Available on](https://chefs-meal-planner.onrender.com/)
+
 ## Features
 
 - Random meal suggestion
@@ -52,6 +54,7 @@ Free meal planner for cooks short on ideas! (like me …)
 - Notation system: know what are the most loved meals
 - Suggestions based on what your personal taste
 - Recipes in Video
+- Get a full menu (Starter, Main, Dessert + Cocktail)
 
 ## Supports
 
@@ -68,7 +71,7 @@ Free meal planner for cooks short on ideas! (like me …)
 
 ## Versions
 
-### Features in V.1
+### Features in V.0.1
 
 - WebApp
 - Random meal suggestion
@@ -78,3 +81,4 @@ Free meal planner for cooks short on ideas! (like me …)
 ## TO DO
 
 - put a preloader
+- change favicon
diff --git a/public/index.html b/public/index.html
index 4fba074..e536c43 100644
--- a/public/index.html
+++ b/public/index.html
@@ -5,7 +5,7 @@
     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
-    <meta name="description" content="Chef's Meal Planner" />
+    <meta name="description" content="Chef's | Meal Planner" />
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
 
@@ -25,15 +25,15 @@
       href="https://fonts.googleapis.com/icon?family=Material+Icons"
     />
 
-    <title>Chef's Meal Planner</title>
+    <title>Chef's | Meal Planner</title>
   </head>
   <body>
-    <script>
+    <!-- <script>
       document.addEventListener("DOMContentLoaded", function() {
         var elems = document.querySelectorAll(".sidenav");
         var instances = M.Sidenav.init(elems, options);
       });
-    </script>
+    </script> -->
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
   </body>
diff --git a/public/manifest.json b/public/manifest.json
index 9a0ef6e..8cdd059 100644
--- a/public/manifest.json
+++ b/public/manifest.json
@@ -18,7 +18,7 @@
       "sizes": "512x512"
     }
   ],
-  "start_url": ".",
+  "start_url": "/",
   "display": "standalone",
   "theme_color": "#000000",
   "background_color": "#ffffff"
diff --git a/src/App.js b/src/App.js
index 35aa7d5..f574adf 100644
--- a/src/App.js
+++ b/src/App.js
@@ -15,6 +15,7 @@ const App = () => {
   // State Hooks
   const [searchString, setSearchString] = useState("");
   const [categories, setCategories] = useState({ categories: [] });
+  const [searchResults, setSearchResults] = useState({ meals: [] });
   // const [isLoading, setIsLoading] = useState(true); For Preloader
   // Default meal object. TODO: Find a better alternative …
   const mealDef = {
@@ -87,8 +88,11 @@ const App = () => {
       return `${ROOT}${option}.php?c=${keyword}`;
     } else if (option === "lookup") {
       return `${ROOT}${option}.php?i=${keyword}`;
+    } else if (option === "search") {
+      return `${ROOT}${option}.php?s=${keyword}`;
     }
   };
+
   const getFromAPI = (keyword, set, option = null) => {
     const URI = createURI(keyword, option);
     fetch(URI)
@@ -111,6 +115,10 @@ const App = () => {
     getFromAPI("categories", setCategories);
   };
 
+  const getSearchResults = () => {
+    getFromAPI(searchString, setSearchResults, "search");
+  };
+
   const handleChange = ev => {
     const { value } = ev.target;
     setSearchString(value);
@@ -121,42 +129,30 @@ const App = () => {
     <Router>
       <Navbar handleClick={getRandomMeal} buttonUrl={buttonUrl} />
       <div className="container">
-        <SearchBar searchString={searchString} handleChange={handleChange} />
+        <SearchBar
+          searchString={searchString}
+          handleChange={handleChange}
+          onSubmit={getSearchResults}
+        />
       </div>
       <Switch>
-        <Route
-          exact
-          path="/"
-          render={props => (
-            <HomePage
-              {...props}
-              handleClick={getRandomMeal}
-              buttonUrl={buttonUrl}
-            />
-          )}
+        <Route exact path="/">
+          <HomePage handleClick={getRandomMeal} buttonUrl={buttonUrl} />
+        </Route>
+        <Route exact path={buttonUrl}>
+          <MealPage
+            meal={meal}
+            getMeal={getRandomMeal}
+            // isLoading={isLoading}
+          />
+        </Route>
         />
-        <Route
-          exact
-          path={buttonUrl}
-          render={props => (
-            <MealPage
-              {...props}
-              meal={meal}
-              getMeal={getRandomMeal}
-              // isLoading={isLoading}
-            />
-          )}
-        />
-        <Route
-          exact
-          path="/categories"
-          render={props => (
-            <CategoryListPage
-              {...props}
-              categories={categories}
-              getCategories={getCategories}
-            />
-          )}
+        <Route exact path="/categories">
+          <CategoryListPage
+            categories={categories}
+            getCategories={getCategories}
+          />
+        </Route>
         />
         <Route path="/categories/:strCategory/">
           <CategoryPage
@@ -166,13 +162,19 @@ const App = () => {
             meal={meal}
           />
         </Route>
+        <Route exact path="/search">
+          <SearchPage
+            searchString={searchString}
+            searchResults={searchResults}
+            // getSearchResults={getSearchResults}
+          />
+        </Route>
         <Route path="/:idMeal">
           <MealPage meal={meal} getMeal={getMeal} />
         </Route>
-        <Route exact path="/search" component={SearchPage} />
-        {/* We'll have to input searchResults somewhere */}
-        <Route
-          render={props => <NotFound {...props} handleClick={getRandomMeal} />}
+        <Route>
+          <NotFound handleClick={getRandomMeal} />
+        </Route>
         />
       </Switch>
       <Footer />
diff --git a/src/components/SearchBar.js b/src/components/SearchBar.js
index 760ecc7..6246423 100644
--- a/src/components/SearchBar.js
+++ b/src/components/SearchBar.js
@@ -1,15 +1,31 @@
 import React from "react";
+import { Link } from "react-router-dom";
 
 const SearchBar = props => {
   return (
-    <input
-      type="text"
-      name="search"
-      value={props.searchString}
-      placeholder="Search a recipe"
-      onChange={props.handleChange}
-      //{onSubmit={props.handleSubmit}
-    />
+    <div className="row">
+      <input
+        className="input-field col s9"
+        type="text"
+        name="search"
+        value={props.searchString}
+        placeholder="Search a recipe"
+        onChange={props.handleChange}
+      />
+      <Link to="/search">
+        <button
+          className="btn waves-effect waves-light right"
+          type="submit"
+          name="searchButton"
+          value="Search"
+          onClick={props.onSubmit}
+        >
+          {" "}
+          Search
+          <i class="material-icons right">send</i>
+        </button>
+      </Link>
+    </div>
   );
 };
 export default SearchBar;
diff --git a/src/components/SearchResult.js b/src/components/SearchResult.js
new file mode 100644
index 0000000..97f3fa0
--- /dev/null
+++ b/src/components/SearchResult.js
@@ -0,0 +1,20 @@
+import React from "react";
+import { Link } from "react-router-dom";
+
+const SearchResult = props => {
+  const { meal } = props;
+  const { idMeal, strMeal, strMealThumb } = meal;
+
+  return (
+    <div className="row">
+      <Link to={`${idMeal}`}>
+        <li key={props.i}>
+          <img src={strMealThumb} alt={strMeal} />
+          <h3>{strMeal}</h3>
+        </li>
+      </Link>
+    </div>
+  );
+};
+
+export default SearchResult;
diff --git a/src/components/SearchResultList.js b/src/components/SearchResultList.js
deleted file mode 100644
index bf4bb95..0000000
--- a/src/components/SearchResultList.js
+++ /dev/null
@@ -1,16 +0,0 @@
-import React from "react";
-
-const SearchResultList = () => {
-  return (
-    <div>
-      <ul>
-        <li>Recipe #1</li>
-        <li>Recipe #2</li>
-        <li>Recipe #…</li>
-        <li>Recipe #N</li>
-      </ul>
-    </div>
-  );
-};
-
-export default SearchResultList;
diff --git a/src/pages/CategoryList.js b/src/pages/CategoryList.js
index edfdfa9..15a7613 100644
--- a/src/pages/CategoryList.js
+++ b/src/pages/CategoryList.js
@@ -2,7 +2,7 @@ import React, { useEffect } from "react";
 import CategoryEntry from "../components/CategoryEntry";
 
 const CategoryListPage = props => {
-  const categories = props.categories.categories;
+  const { categories } = props.categories;
   const { getCategories } = props;
 
   useEffect(() => {
diff --git a/src/pages/Meal.js b/src/pages/Meal.js
index 90cab77..57faa87 100644
--- a/src/pages/Meal.js
+++ b/src/pages/Meal.js
@@ -47,10 +47,10 @@ const MealPage = props => {
   return (
     <div className="container">
       <div className="row">
-        <div className="col s6">
+        <div className="col s12 m6">
           <MealPresentation meal={item} />
         </div>
-        <div className="col s6">
+        <div className="col s12 m6">
           <IngredientList ingredients={ingredientList} />
           <Recipe recipe={strInstructions} />
         </div>
diff --git a/src/pages/Search.js b/src/pages/Search.js
index 61cd218..e4b13b8 100644
--- a/src/pages/Search.js
+++ b/src/pages/Search.js
@@ -1,18 +1,18 @@
-import React, { Component } from "react";
-import SearchResultList from "../components/SearchResultList";
+import React from "react";
+import SearchResult from "../components/SearchResult";
 
-export default class SearchPage extends Component {
-  constructor(props) {
-    super(props);
-    this.initState = {};
-    this.state = this.initState;
-  }
-  render() {
-    return (
-      <div>
-        <h1>Search Results</h1>
-        <SearchResultList />
-      </div>
-    );
-  }
-}
+const SearchPage = props => {
+  const { meals } = props.searchResults;
+  const { searchString } = props;
+
+  // console.log(meals[0]);
+  return (
+    <div className="container">
+      <h1>Search Results for: {searchString} </h1>
+      {meals.map((meal, i) => (
+        <SearchResult i={i} meal={meal} />
+      ))}
+    </div>
+  );
+};
+export default SearchPage;
