diff --git a/package-lock.json b/package-lock.json
index 1c6373e..39ef4cc 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1043,6 +1043,11 @@
       "resolved": "https://registry.npmjs.org/@csstools/normalize.css/-/normalize.css-10.1.0.tgz",
       "integrity": "sha512-ij4wRiunFfaJxjB0BdrYHIH8FxBJpOwNPhhAcunlmPdXudL1WQV1qoP9un6JsEBAgQH+7UXyyjh0g7jTxXK6tg=="
     },
+    "@emotion/hash": {
+      "version": "0.7.4",
+      "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.7.4.tgz",
+      "integrity": "sha512-fxfMSBMX3tlIbKUdtGKxqB1fyrH6gVrX39Gsv3y8lRYKUqlgDt3UMqQyGnR1bQMa2B8aGnhLZokZgg8vT0Le+A=="
+    },
     "@hapi/address": {
       "version": "2.1.4",
       "resolved": "https://registry.npmjs.org/@hapi/address/-/address-2.1.4.tgz",
@@ -1268,6 +1273,75 @@
         "@types/yargs": "^13.0.0"
       }
     },
+    "@material-ui/core": {
+      "version": "4.9.0",
+      "resolved": "https://registry.npmjs.org/@material-ui/core/-/core-4.9.0.tgz",
+      "integrity": "sha512-zrrr8mPU5DDBYaVil4uJYauW41PjSn5otn7cqGsmWOY0t90fypr9nNgM7rRJaPz2AP6oRSDx1kBQt2igf5uelg==",
+      "requires": {
+        "@babel/runtime": "^7.4.4",
+        "@material-ui/styles": "^4.9.0",
+        "@material-ui/system": "^4.7.1",
+        "@material-ui/types": "^5.0.0",
+        "@material-ui/utils": "^4.7.1",
+        "@types/react-transition-group": "^4.2.0",
+        "clsx": "^1.0.2",
+        "convert-css-length": "^2.0.1",
+        "hoist-non-react-statics": "^3.2.1",
+        "normalize-scroll-left": "^0.2.0",
+        "popper.js": "^1.14.1",
+        "prop-types": "^15.7.2",
+        "react-is": "^16.8.0",
+        "react-transition-group": "^4.3.0"
+      }
+    },
+    "@material-ui/styles": {
+      "version": "4.9.0",
+      "resolved": "https://registry.npmjs.org/@material-ui/styles/-/styles-4.9.0.tgz",
+      "integrity": "sha512-nJHum4RqYBPWsjL/9JET8Z02FZ9gSizlg/7LWVFpIthNzpK6OQ5OSRR4T4x9/p+wK3t1qNn3b1uI4XpnZaPxOA==",
+      "requires": {
+        "@babel/runtime": "^7.4.4",
+        "@emotion/hash": "^0.7.4",
+        "@material-ui/types": "^5.0.0",
+        "@material-ui/utils": "^4.7.1",
+        "clsx": "^1.0.2",
+        "csstype": "^2.5.2",
+        "hoist-non-react-statics": "^3.2.1",
+        "jss": "^10.0.3",
+        "jss-plugin-camel-case": "^10.0.3",
+        "jss-plugin-default-unit": "^10.0.3",
+        "jss-plugin-global": "^10.0.3",
+        "jss-plugin-nested": "^10.0.3",
+        "jss-plugin-props-sort": "^10.0.3",
+        "jss-plugin-rule-value-function": "^10.0.3",
+        "jss-plugin-vendor-prefixer": "^10.0.3",
+        "prop-types": "^15.7.2"
+      }
+    },
+    "@material-ui/system": {
+      "version": "4.7.1",
+      "resolved": "https://registry.npmjs.org/@material-ui/system/-/system-4.7.1.tgz",
+      "integrity": "sha512-zH02p+FOimXLSKOW/OT2laYkl9bB3dD1AvnZqsHYoseUaq0aVrpbl2BGjQi+vJ5lg8w73uYlt9zOWzb3+1UdMQ==",
+      "requires": {
+        "@babel/runtime": "^7.4.4",
+        "@material-ui/utils": "^4.7.1",
+        "prop-types": "^15.7.2"
+      }
+    },
+    "@material-ui/types": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/@material-ui/types/-/types-5.0.0.tgz",
+      "integrity": "sha512-UeH2BuKkwDndtMSS0qgx1kCzSMw+ydtj0xx/XbFtxNSTlXydKwzs5gVW5ZKsFlAkwoOOQ9TIsyoCC8hq18tOwg=="
+    },
+    "@material-ui/utils": {
+      "version": "4.7.1",
+      "resolved": "https://registry.npmjs.org/@material-ui/utils/-/utils-4.7.1.tgz",
+      "integrity": "sha512-+ux0SlLdlehvzCk2zdQ3KiS3/ylWvuo/JwAGhvb8dFVvwR21K28z0PU9OQW2PGogrMEdvX3miEI5tGxTwwWiwQ==",
+      "requires": {
+        "@babel/runtime": "^7.4.4",
+        "prop-types": "^15.7.2",
+        "react-is": "^16.8.0"
+      }
+    },
     "@mrmlnc/readdir-enhanced": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/@mrmlnc/readdir-enhanced/-/readdir-enhanced-2.2.1.tgz",
@@ -1576,6 +1650,14 @@
         "@types/react": "*"
       }
     },
+    "@types/react-transition-group": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.2.3.tgz",
+      "integrity": "sha512-Hk8jiuT7iLOHrcjKP/ZVSyCNXK73wJAUz60xm0mVhiRujrdiI++j4duLiL282VGxwAgxetHQFfqA29LgEeSkFA==",
+      "requires": {
+        "@types/react": "*"
+      }
+    },
     "@types/stack-utils": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-1.0.1.tgz",
@@ -3712,6 +3794,11 @@
         "shallow-clone": "^0.1.2"
       }
     },
+    "clsx": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.0.4.tgz",
+      "integrity": "sha512-1mQ557MIZTrL/140j+JVdRM6e31/OA4vTYxXgqIIZlndyfjHpyawKZia1Im05Vp9BWmImkcNrNtFYQMyFcgJDg=="
+    },
     "co": {
       "version": "4.6.0",
       "resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz",
@@ -3923,6 +4010,11 @@
       "resolved": "https://registry.npmjs.org/content-type/-/content-type-1.0.4.tgz",
       "integrity": "sha512-hIP3EEPs8tB9AT1L+NUqtwOAps4mk2Zob89MWXMHjHWg9milF/j4osnnQLXBCBFBk/tvIG/tUc9mOUJiPBhPXA=="
     },
+    "convert-css-length": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/convert-css-length/-/convert-css-length-2.0.1.tgz",
+      "integrity": "sha512-iGpbcvhLPRKUbBc0Quxx7w/bV14AC3ItuBEGMahA5WTYqB8lq9jH0kTXFheCBASsYnqeMFZhiTruNxr1N59Axg=="
+    },
     "convert-source-map": {
       "version": "1.7.0",
       "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.7.0.tgz",
@@ -4209,6 +4301,15 @@
       "resolved": "https://registry.npmjs.org/css-unit-converter/-/css-unit-converter-1.1.1.tgz",
       "integrity": "sha1-2bkoGtz9jO2TW9urqDeGiX9k6ZY="
     },
+    "css-vendor": {
+      "version": "2.0.7",
+      "resolved": "https://registry.npmjs.org/css-vendor/-/css-vendor-2.0.7.tgz",
+      "integrity": "sha512-VS9Rjt79+p7M0WkPqcAza4Yq1ZHrsHrwf7hPL/bjQB+c1lwmAI+1FXxYTYt818D/50fFVflw0XKleiBN5RITkg==",
+      "requires": {
+        "@babel/runtime": "^7.6.2",
+        "is-in-browser": "^1.0.2"
+      }
+    },
     "css-what": {
       "version": "3.2.1",
       "resolved": "https://registry.npmjs.org/css-what/-/css-what-3.2.1.tgz",
@@ -4635,6 +4736,15 @@
         "utila": "~0.4"
       }
     },
+    "dom-helpers": {
+      "version": "5.1.3",
+      "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.1.3.tgz",
+      "integrity": "sha512-nZD1OtwfWGRBWlpANxacBEZrEuLa16o1nh7YopFWeoF68Zt8GGEmzHu6Xv4F3XaFIC+YXtTLrzgqKxFgLEe4jw==",
+      "requires": {
+        "@babel/runtime": "^7.6.3",
+        "csstype": "^2.6.7"
+      }
+    },
     "dom-serializer": {
       "version": "0.2.2",
       "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-0.2.2.tgz",
@@ -6608,6 +6718,11 @@
       "resolved": "https://registry.npmjs.org/https-browserify/-/https-browserify-1.0.0.tgz",
       "integrity": "sha1-7AbBDgo0wPL68Zn3/X/Hj//QPHM="
     },
+    "hyphenate-style-name": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/hyphenate-style-name/-/hyphenate-style-name-1.0.3.tgz",
+      "integrity": "sha512-EcuixamT82oplpoJ2XU4pDtKGWQ7b00CD9f1ug9IaQ3p1bkHMiKCZ9ut9QDI6qsa6cpUuB+A/I+zLtdNK4n2DQ=="
+    },
     "iconv-lite": {
       "version": "0.4.24",
       "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
@@ -6907,6 +7022,11 @@
         "is-extglob": "^2.1.1"
       }
     },
+    "is-in-browser": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/is-in-browser/-/is-in-browser-1.1.3.tgz",
+      "integrity": "sha1-Vv9NtoOgeMYILrldrX3GLh0E+DU="
+    },
     "is-number": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/is-number/-/is-number-3.0.0.tgz",
@@ -8251,6 +8371,83 @@
         "verror": "1.10.0"
       }
     },
+    "jss": {
+      "version": "10.0.3",
+      "resolved": "https://registry.npmjs.org/jss/-/jss-10.0.3.tgz",
+      "integrity": "sha512-AcDvFdOk16If9qvC9KN3oFXsrkHWM9+TaPMpVB9orm3z+nq1Xw3ofHyflRe/mkSucRZnaQtlhZs1hdP3DR9uRw==",
+      "requires": {
+        "@babel/runtime": "^7.3.1",
+        "csstype": "^2.6.5",
+        "is-in-browser": "^1.1.3",
+        "tiny-warning": "^1.0.2"
+      }
+    },
+    "jss-plugin-camel-case": {
+      "version": "10.0.3",
+      "resolved": "https://registry.npmjs.org/jss-plugin-camel-case/-/jss-plugin-camel-case-10.0.3.tgz",
+      "integrity": "sha512-rild/oFKFkmRP7AoiX9D6bdDAUfmJv8c7sEBvFoi+JP31dn2W8nw4txMKGnV1LJKlFkYprdZt1X99Uvztl1hug==",
+      "requires": {
+        "@babel/runtime": "^7.3.1",
+        "hyphenate-style-name": "^1.0.3",
+        "jss": "^10.0.3"
+      }
+    },
+    "jss-plugin-default-unit": {
+      "version": "10.0.3",
+      "resolved": "https://registry.npmjs.org/jss-plugin-default-unit/-/jss-plugin-default-unit-10.0.3.tgz",
+      "integrity": "sha512-n+XfVLPF9Qh7IOTdQ8M4oRpjpg6egjr/r0NNytubbCafMgCILJYIVrMTGgOTydH+uvak8onQY3f/F9hasPUx6g==",
+      "requires": {
+        "@babel/runtime": "^7.3.1",
+        "jss": "^10.0.3"
+      }
+    },
+    "jss-plugin-global": {
+      "version": "10.0.3",
+      "resolved": "https://registry.npmjs.org/jss-plugin-global/-/jss-plugin-global-10.0.3.tgz",
+      "integrity": "sha512-kNotkAciJIXpIGYnmueaIifBne9rdq31O8Xq1nF7KMfKlskNRANTcEX5rVnsGKl2yubTMYfjKBFCeDgcQn6+gA==",
+      "requires": {
+        "@babel/runtime": "^7.3.1",
+        "jss": "^10.0.3"
+      }
+    },
+    "jss-plugin-nested": {
+      "version": "10.0.3",
+      "resolved": "https://registry.npmjs.org/jss-plugin-nested/-/jss-plugin-nested-10.0.3.tgz",
+      "integrity": "sha512-OMucRs9YLvWlZ3Ew+VhdgNVMwSS2zZy/2vy+s/etvopnPUzDHgCnJwdY2Wx/SlhLGERJeKKufyih2seH+ui0iw==",
+      "requires": {
+        "@babel/runtime": "^7.3.1",
+        "jss": "^10.0.3",
+        "tiny-warning": "^1.0.2"
+      }
+    },
+    "jss-plugin-props-sort": {
+      "version": "10.0.3",
+      "resolved": "https://registry.npmjs.org/jss-plugin-props-sort/-/jss-plugin-props-sort-10.0.3.tgz",
+      "integrity": "sha512-ufhvdCMnRcDa0tNHoZ12OcVNQQyE10yLMohxo/UIMarLV245rM6n9D19A12epjldRgyiS13SoSyLFCJEobprYg==",
+      "requires": {
+        "@babel/runtime": "^7.3.1",
+        "jss": "^10.0.3"
+      }
+    },
+    "jss-plugin-rule-value-function": {
+      "version": "10.0.3",
+      "resolved": "https://registry.npmjs.org/jss-plugin-rule-value-function/-/jss-plugin-rule-value-function-10.0.3.tgz",
+      "integrity": "sha512-RWwIT2UBAIwf3f6DQtt5gyjxHMRJoeO9TQku+ueR8dBMakqSSe8vFwQNfjXEoe0W+Tez5HZCTkZKNMulv3Z+9A==",
+      "requires": {
+        "@babel/runtime": "^7.3.1",
+        "jss": "^10.0.3"
+      }
+    },
+    "jss-plugin-vendor-prefixer": {
+      "version": "10.0.3",
+      "resolved": "https://registry.npmjs.org/jss-plugin-vendor-prefixer/-/jss-plugin-vendor-prefixer-10.0.3.tgz",
+      "integrity": "sha512-zVs6e5z4tFRK/fJ5kuTLzXlTFQbLeFTVwk7lTZiYNufmZwKT0kSmnOJDUukcSe7JLGSRztjWhnHB/6voP174gw==",
+      "requires": {
+        "@babel/runtime": "^7.3.1",
+        "css-vendor": "^2.0.7",
+        "jss": "^10.0.3"
+      }
+    },
     "jsx-ast-utils": {
       "version": "2.2.3",
       "resolved": "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-2.2.3.tgz",
@@ -9120,6 +9317,11 @@
       "resolved": "https://registry.npmjs.org/normalize-range/-/normalize-range-0.1.2.tgz",
       "integrity": "sha1-LRDAa9/TEuqXd2laTShDlFa3WUI="
     },
+    "normalize-scroll-left": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/normalize-scroll-left/-/normalize-scroll-left-0.2.0.tgz",
+      "integrity": "sha512-t5oCENZJl8TGusJKoCJm7+asaSsPuNmK6+iEjrZ5TyBj2f02brCRsd4c83hwtu+e5d4LCSBZ0uoDlMjBo+A8yA=="
+    },
     "normalize-url": {
       "version": "1.9.1",
       "resolved": "https://registry.npmjs.org/normalize-url/-/normalize-url-1.9.1.tgz",
@@ -9717,6 +9919,11 @@
         "ts-pnp": "^1.1.2"
       }
     },
+    "popper.js": {
+      "version": "1.16.1",
+      "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.16.1.tgz",
+      "integrity": "sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ=="
+    },
     "portfinder": {
       "version": "1.0.25",
       "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.25.tgz",
@@ -11231,6 +11438,17 @@
         "workbox-webpack-plugin": "4.3.1"
       }
     },
+    "react-transition-group": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.3.0.tgz",
+      "integrity": "sha512-1qRV1ZuVSdxPlPf4O8t7inxUGpdyO5zG9IoNfJxSO0ImU2A1YWkEQvFPuIPZmMLkg5hYs7vv5mMOyfgSkvAwvw==",
+      "requires": {
+        "@babel/runtime": "^7.5.5",
+        "dom-helpers": "^5.0.1",
+        "loose-envify": "^1.4.0",
+        "prop-types": "^15.6.2"
+      }
+    },
     "read-pkg": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-3.0.0.tgz",
diff --git a/package.json b/package.json
index 920486e..21166d4 100644
--- a/package.json
+++ b/package.json
@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@material-ui/core": "^4.9.0",
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.4.0",
     "@testing-library/user-event": "^7.2.1",
diff --git a/public/index.html b/public/index.html
index 57a17d5..945f4ea 100644
--- a/public/index.html
+++ b/public/index.html
@@ -8,6 +8,23 @@
     <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" />
+
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"
+    />
+
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
+
+    <link
+      rel="stylesheet"
+      href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
+    />
+    <link
+      rel="stylesheet"
+      href="https://fonts.googleapis.com/icon?family=Material+Icons"
+    />
+
     <title>Chef's Meal Planner</title>
   </head>
   <body>
diff --git a/src/components/CopyrightText.js b/src/components/CopyrightText.js
index 4e1dd4f..b68a75d 100644
--- a/src/components/CopyrightText.js
+++ b/src/components/CopyrightText.js
@@ -1,7 +1,7 @@
 import React from "react";
 
 const CopyrightText = () => {
-  return <p>2020 - Meal's Planner - Made with love</p>;
+  return <span>© 2020 - Meal's Planner - Made with ❤️</span>;
 };
 
 export default CopyrightText;
diff --git a/src/components/Footer.js b/src/components/Footer.js
index 7a2c37f..5c5d8ed 100644
--- a/src/components/Footer.js
+++ b/src/components/Footer.js
@@ -4,10 +4,14 @@ import GitHubLink from "./GitHubLink";
 
 const Footer = () => {
   return (
-    <div className="Footer">
-      <CopyrightText />
-      <GitHubLink />
-    </div>
+    <footer class="page-footer">
+      <div class="footer-copyright">
+        <div class="container">
+          <CopyrightText />
+          <GitHubLink />
+        </div>
+      </div>
+    </footer>
   );
 };
 
diff --git a/src/components/GitHubLink.js b/src/components/GitHubLink.js
index 9de15fe..57d7282 100644
--- a/src/components/GitHubLink.js
+++ b/src/components/GitHubLink.js
@@ -2,7 +2,12 @@ import React from "react";
 
 const GitHubLink = () => {
   return (
-    <a href="https://github.com/rjNemo" target="blank">
+    <a
+      className="grey-text text-lighten-4 right"
+      href="https://github.com/rjNemo"
+      target="blank"
+      rel="noopener"
+    >
       GitHub
     </a>
   );
diff --git a/src/components/IngredientList.js b/src/components/IngredientList.js
index 115ecff..0da5f63 100644
--- a/src/components/IngredientList.js
+++ b/src/components/IngredientList.js
@@ -4,11 +4,11 @@ const IngredientList = props => {
   const { ingredients } = props;
   return (
     <div className="ingredientList">
-      <h2>Ingredient List</h2>
+      <h2>Ingredients</h2>
       <ul>
         {ingredients.map(ing => (
           <li>
-            {ing[0]}: {ing[1]}
+            <b>{ing[0]}:</b> {ing[1]}
           </li>
         ))}
       </ul>
diff --git a/src/components/Logo.js b/src/components/Logo.js
index 252f86f..be0e178 100644
--- a/src/components/Logo.js
+++ b/src/components/Logo.js
@@ -1,7 +1,14 @@
 import React from "react";
+import { Link } from "react-router-dom";
 
 const Logo = () => {
-  return <p>🍪</p>;
+  return (
+    <Link to="/" class="brand-logo">
+      <span role="img" aria-label="cookie">
+        🍪
+      </span>
+    </Link>
+  );
 };
 
 export default Logo;
diff --git a/src/components/MealPresentation.js b/src/components/MealPresentation.js
index 3501b56..f629ddc 100644
--- a/src/components/MealPresentation.js
+++ b/src/components/MealPresentation.js
@@ -9,17 +9,24 @@ const MealPresentation = props => {
     mealArea
   } = props.meal;
   return (
-    <div className="mealPresentation">
-      <h1>{mealName}</h1>
-      <img src={imgAddress} alt={mealName} />
-      <a href={videoAddress} target="blank">
-        See in video
-      </a>
-      {/* <video width="" height="" controls autoplay>
+    <div className="row">
+      <div className="col s12">
+        <h1>{mealName}</h1>
+        <div className="col s8">
+          <img src={imgAddress} alt={mealName} height="320" />
+        </div>
+        <div className="col s4">
+          <ul>
+            <li>
+              <a href={videoAddress} target="blank">
+                See in video
+              </a>
+            </li>
+            {/* <video width="" height="" controls autoplay>
         <source src={videoAddress} type="video/mp4" />
         Your browser does not support the video tag.
       </video> */}
-      {/* <iframe
+            {/* <iframe
         title="video"
         width="560"
         height="315"
@@ -28,10 +35,16 @@ const MealPresentation = props => {
         allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
         allowfullscreen
       ></iframe> */}
-      <ul>
-        <li>{mealCategory}</li>
-        <li>{mealArea}</li>
-      </ul>
+
+            <li>
+              <b>Category:</b> {mealCategory}
+            </li>
+            <li>
+              <b>Origin:</b> {mealArea}
+            </li>
+          </ul>
+        </div>
+      </div>
     </div>
   );
 };
diff --git a/src/components/Navbar.js b/src/components/Navbar.js
index 191fb11..b78e4a7 100644
--- a/src/components/Navbar.js
+++ b/src/components/Navbar.js
@@ -5,14 +5,26 @@ import RandomButton from "./RandomButton";
 
 const Navbar = props => {
   return (
-    <div className="Navbar">
-      <Logo />
-      <SearchBar
-        searchString={props.searchString}
-        handleChange={props.handleChange}
-      />
-      <RandomButton />
-    </div>
+    <nav>
+      <div className="nav-wrapper">
+        {/* <div className="container"> */}
+        <div className="row">
+          <div className="col s2">
+            <Logo />
+          </div>
+          <div className="col s6">
+            <SearchBar
+              searchString={props.searchString}
+              handleChange={props.handleChange}
+            />
+          </div>
+          <div className="col s4">
+            <RandomButton />
+          </div>
+        </div>
+      </div>
+      {/* </div>   */}
+    </nav>
   );
 };
 
diff --git a/src/components/RandomButton.js b/src/components/RandomButton.js
index 307fa99..49aebad 100644
--- a/src/components/RandomButton.js
+++ b/src/components/RandomButton.js
@@ -1,7 +1,12 @@
 import React from "react";
+import { Link } from "react-router-dom";
 
 const RandomButton = () => {
-  return <input type="submit" value="Random Recipe" />;
+  return (
+    <Link to="/meal">
+      <button class="waves-effect waves-light btn-large">Random Recipe</button>
+    </Link>
+  );
 };
 
 export default RandomButton;
diff --git a/src/pages/Home.js b/src/pages/Home.js
index 6f8c6c6..20dc4cc 100644
--- a/src/pages/Home.js
+++ b/src/pages/Home.js
@@ -9,9 +9,11 @@ export default class HomePage extends Component {
   }
   render() {
     return (
-      <div>
-        <h1>Get a daily suggestion from the Chef</h1>
-        <RandomButton />
+      <div className="section">
+        <div className="container center-align">
+          <h1>Get a daily suggestion from the Chef</h1>
+          <RandomButton />
+        </div>
       </div>
     );
   }
diff --git a/src/pages/Meal.js b/src/pages/Meal.js
index 217ced2..d258f81 100644
--- a/src/pages/Meal.js
+++ b/src/pages/Meal.js
@@ -33,13 +33,19 @@ const MealPage = props => {
   }
 
   return (
-    <div>
+    <div className="container">
       <MealPresentation meal={item} />
-      <IngredientList ingredients={ingredientList} />
-      {/* <p>
+      <div className="row">
+        <div className="col s6">
+          <IngredientList ingredients={ingredientList} />
+        </div>
+        {/* <p>
         {meal["strIngredient9"]}: {meal["strMeasure9"]}
       </p> */}
-      <Recipe recipe={strInstructions} />
+        <div className="col s6">
+          <Recipe recipe={strInstructions} />
+        </div>
+      </div>
     </div>
   );
 };