diff --git a/src/App.js b/src/App.js
index bd268fd..d3f1461 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,4 +1,10 @@
+import RestaurantScreen from './components/RestaurantScreen';
 export default function App()
 {
-  return <div>Hello, World</div>
+  return 
+  (
+    <div>
+      <RestaurantScreen />
+    </div>
+  )
 }
\ No newline at end of file
diff --git a/src/components/RestaurantList.js b/src/components/RestaurantList.js
new file mode 100644
index 0000000..7aa954f
--- /dev/null
+++ b/src/components/RestaurantList.js
@@ -0,0 +1,11 @@
+import { useEffect } from "react";
+
+export default function RestaurantList({ loadRestaurants })
+{
+    useEffect(() => { loadRestaurants(); }, [loadRestaurants]);
+    return 
+    (
+
+        <div>RestaurantList</div>
+    )
+}
\ No newline at end of file
diff --git a/src/components/RestaurantList.spec.js b/src/components/RestaurantList.spec.js
new file mode 100644
index 0000000..c3c29df
--- /dev/null
+++ b/src/components/RestaurantList.spec.js
@@ -0,0 +1,12 @@
+import { render } from '@testing-library/react';
+import RestaurantList from './RestaurantList';
+
+describe('RestaurantList', () =>
+{
+    it('loads restaurants on first render', () =>
+    {
+        const loadRestaurants = jest.fn().mockName('loadRestaurnats');
+        render(<RestaurantList loadRestaurants={loadRestaurants} />);
+        expect(loadRestaurants).toHaveBeenCalled();
+    });
+});
\ No newline at end of file
diff --git a/src/components/RestaurantScreen.js b/src/components/RestaurantScreen.js
new file mode 100644
index 0000000..bba4e94
--- /dev/null
+++ b/src/components/RestaurantScreen.js
@@ -0,0 +1,13 @@
+import RestaurantList from "./RestaurantList";
+
+export default function RestaurantScreen()
+{
+    return 
+    (
+        <div>
+            <h1>Restaurants</h1>
+            <RestaurantList />
+        </div>
+        
+    )
+}
\ No newline at end of file