diff --git a/src/containers/Home/index.tsx b/src/containers/Home/index.tsx
new file mode 100644
index 0000000..6e9b01e
--- /dev/null
+++ b/src/containers/Home/index.tsx
@@ -0,0 +1,25 @@
+import React from "react";
+import { RandomButton } from "../../components/RandomButton";
+import HeroImage from "../../images/chef.svg";
+
+export const Home = () => {
+  const buttonUrl = "/random";
+  return (
+    <section className="container ">
+      <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"
+            handleClick={() => {}}
+          />
+        </div>
+        <picture className="col s12 m6">
+          <img src={HeroImage} alt="hero_image" width="100%" />
+        </picture>
+      </div>
+    </section>
+  );
+};
diff --git a/src/containers/HomeController.tsx b/src/containers/HomeController.tsx
deleted file mode 100644
index 320cc63..0000000
--- a/src/containers/HomeController.tsx
+++ /dev/null
@@ -1,6 +0,0 @@
-import React from "react";
-import { HomePage } from "../pages/HomePage";
-
-export const HomeController = ({ buttonUrl }) => {
-  return <HomePage buttonUrl={buttonUrl} />;
-};
diff --git a/src/pages/HomePage.tsx b/src/pages/HomePage.tsx
deleted file mode 100644
index f567e3d..0000000
--- a/src/pages/HomePage.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import React from "react";
-import { RandomButton } from "../components/RandomButton";
-
-export const HomePage = ({ buttonUrl }) => {
-  return (
-    <div className="container ">
-      <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" handleClick={()=>{}}/>
-        </div>
-        <div className="col s12 m6">
-          <img
-            src={require("../images/chef.svg")}
-            alt="hero_image"
-            width="100%"
-          />
-        </div>
-      </div>
-    </div>
-  );
-};
diff --git a/src/router/AppRouter.tsx b/src/router/AppRouter.tsx
index 5b3cc46..282600d 100644
--- a/src/router/AppRouter.tsx
+++ b/src/router/AppRouter.tsx
@@ -1,6 +1,6 @@
 import { Switch, Route, Redirect } from "react-router-dom";
 import { SearchController } from "../containers/SearchController";
-import { HomeController } from "../containers/HomeController";
+import { Home } from "../containers/Home";
 import { MealController } from "../containers/MealController";
 import { CategoryController } from "../containers/CategoryController";
 import { CategoryListController } from "../containers/CategoryListController";
@@ -21,7 +21,7 @@ const AppRouter = ({
 }) => (
   <Switch>
     <Route exact path="/">
-      <HomeController buttonUrl={buttonUrl} />
+      <Home />
     </Route>
 
     <PrivateRoute exact path="/profile" component={ProfileController} />