diff --git a/src/App.tsx b/src/App.tsx
index e2450e3..649fe52 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, {FC, useState} from "react";
 import { Router } from "./utils/router";
 
 import { PreLoader } from "./components/PreLoader";
@@ -11,7 +11,7 @@ import "./index.css";
 import MainLayout from "./layouts/MainLayout";
 import MainRouter from "./controllers/MainRouter";
 
-export const App = () => {
+export const App:FC = () => {
   const { loading } = useAuth0();
   const [searchString, setSearchString] = useState("");
   const [searchResults, setSearchResults] = useState({ meals: [] });
@@ -77,6 +77,7 @@ export const App = () => {
   };
 
   const [meal, setMeal] = useState(mealDef);
+  const buttonUrl = "/random";
 
   const getMeal = (id) => {
     getData(id, setMeal, "lookup");
@@ -95,23 +96,22 @@ export const App = () => {
   const handleChange = (e) => {
     const { value } = e.target;
     setSearchString(value);
-  };
 
-  const buttonUrl = "/random";
+  };
 
   return loading ? (
     <div className="container center-align valign-wrapper">
       <PreLoader />
     </div>
   ) : (
-    <Router history={history}>
+    <Router >
       <MainLayout
         buttonUrl={buttonUrl}
-        meal={meal}
-        getMeal={getMeal}
+        // meal={meal}
+        // getMeal={getMeal}
         getRandomMeal={getRandomMeal}
         searchString={searchString}
-        searchResults={searchResults}
+        // searchResults={searchResults}
         setSearchResults={setSearchResults}
         handleChange={handleChange}
         setSearchString={setSearchString}
diff --git a/src/components/CardEntry.tsx b/src/components/CardEntry.tsx
index ae53662..e8a7ab2 100644
--- a/src/components/CardEntry.tsx
+++ b/src/components/CardEntry.tsx
@@ -1,6 +1,8 @@
 import React from "react";
 import { Link } from "react-router-dom";
 
+
+
 export const CardEntry = ({ item, className = "col s12 m6" }) => {
   const { idMeal, strMeal, strMealThumb } = item;
   return (
diff --git a/src/components/ContactForm.tsx b/src/components/ContactForm.tsx
index a85fda0..0023d31 100644
--- a/src/components/ContactForm.tsx
+++ b/src/components/ContactForm.tsx
@@ -97,7 +97,7 @@ const ContactFormTextArea = ({ id, value, dispatch }) => {
       <label htmlFor={id}>{id}</label>
       <textarea
         className="materialize-textarea validate"
-        rows="12"
+        rows={12}
         name={id}
         value={value}
         onChange={handleChange}
diff --git a/src/components/SideNav.tsx b/src/components/SideNav.tsx
index 3e7fb97..de22271 100644
--- a/src/components/SideNav.tsx
+++ b/src/components/SideNav.tsx
@@ -37,7 +37,7 @@ export const SideNav = ({
                 backgroundColor:
                   "rgba(0,0,0,0.5)" /* Black background with opacity */,
                 zIndex:
-                  "2" /* Specify a stack order in case you're using a different order for other elements */,
+                  2 /* Specify a stack order in case you're using a different order for other elements */,
                 // cursor: "pointer" /* Add a pointer on hover */
               }}
               src={require("../images/special_event.svg")}
diff --git a/src/controllers/MealController.tsx b/src/controllers/MealController.tsx
index 1975db1..b8823d8 100644
--- a/src/controllers/MealController.tsx
+++ b/src/controllers/MealController.tsx
@@ -27,7 +27,7 @@ export const MealController = ({ meal, getMeal, getRandomMeal }) => {
     strInstructions,
   } = mealItem;
 
-  const [isFav, setIsFav] = useState();
+  const [isFav, setIsFav] = useState<boolean>();
 
   /**
    * Updates fav status in db
diff --git a/src/index.tsx b/src/index.jsx
similarity index 100%
rename from src/index.tsx
rename to src/index.jsx
diff --git a/src/layouts/MainLayout.tsx b/src/layouts/MainLayout.tsx
index 7e3a5f0..296b801 100644
--- a/src/layouts/MainLayout.tsx
+++ b/src/layouts/MainLayout.tsx
@@ -62,6 +62,7 @@ const MainLayout = ({
           closeNavClick={closeNavClick}
           links={links}
           buttonUrl={buttonUrl}
+          handleClick={()=>{}}
         />
       </header>
       {children}
diff --git a/src/pages/HomePage.tsx b/src/pages/HomePage.tsx
index 06049d1..f567e3d 100644
--- a/src/pages/HomePage.tsx
+++ b/src/pages/HomePage.tsx
@@ -7,7 +7,7 @@ export const HomePage = ({ buttonUrl }) => {
       <div className="row">
         <div className="col s12 m6">
           <h1 className="logo">Chef's Online Cookbook</h1>
-          <RandomButton url={buttonUrl} size="large" color="orange darken-2" />
+          <RandomButton url={buttonUrl} size="large" color="orange darken-2" handleClick={()=>{}}/>
         </div>
         <div className="col s12 m6">
           <img
diff --git a/src/pages/NotFoundPage.tsx b/src/pages/NotFoundPage.tsx
index a021208..af45640 100644
--- a/src/pages/NotFoundPage.tsx
+++ b/src/pages/NotFoundPage.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import { RandomButton } from "../components/RandomButton";
 
-export const NotFoundPage = () => {
+export const NotFoundPage = ({handleClick}) => {
   return (
     <div className="container center-align">
       <div className="row">
@@ -16,7 +16,7 @@ export const NotFoundPage = () => {
               />
             </div>
             <div className="card-content">
-              <RandomButton url="/random" />
+              <RandomButton url="/random" handleClick={handleClick} color={null}/>
             </div>
           </div>
         </div>