diff --git a/client/App.jsx b/client/App.jsx
index e90afbb..ac619ab 100644
--- a/client/App.jsx
+++ b/client/App.jsx
@@ -1,8 +1,15 @@
 import React from 'react';
+import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
+
+import Home from './Home';
 
 const App = () => {
     return (
-        <div>Test</div>
+        <Router>
+            <Switch>
+                <Route exact={true} path='/'><Home /></Route>
+            </Switch>
+        </Router>
     );
 };
 
diff --git a/client/Home.jsx b/client/Home.jsx
new file mode 100644
index 0000000..a3af568
--- /dev/null
+++ b/client/Home.jsx
@@ -0,0 +1,24 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+
+import CenterCover from './covers/CenterCover';
+import Layout from './Layout';
+
+const Home = () => {
+    return (
+        <Layout>
+            <h2 className="f2 lh-copy">Pattern</h2>
+
+            <div className="flex flex-wrap justify-between">
+                <div className="w-30">
+                    <Link to="/center" className="link flex flex-column items-center justify-center bg-black-05 br2 pa3">
+                        <CenterCover />
+                        <h4 className="f4 mv0 pv3">Center</h4>
+                    </Link>
+                </div>
+            </div>
+        </Layout>
+    );
+};
+
+export default Home;
diff --git a/client/Layout.jsx b/client/Layout.jsx
new file mode 100644
index 0000000..d8d4432
--- /dev/null
+++ b/client/Layout.jsx
@@ -0,0 +1,15 @@
+import React, { useEffect } from 'react';
+
+const Layout = ({ children }) => {
+    useEffect(() => {
+        window.scrollTo(0, 0);
+    }, []);
+
+    return (
+        <div className="mw8 center">
+            {children}
+        </div>
+    );
+};
+
+export default Layout;
diff --git a/client/covers/CenterCover.jsx b/client/covers/CenterCover.jsx
new file mode 100644
index 0000000..1801bc1
--- /dev/null
+++ b/client/covers/CenterCover.jsx
@@ -0,0 +1,23 @@
+import React from 'react';
+
+import Dot from '../placeholders/Dot';
+import Frame from '../placeholders/Frame';
+import Line from '../placeholders/Line';
+
+const CenterCover = () => {
+    return (
+        <Frame>
+            <div className="h-100 flex flex-column items-center justify-center">
+                <Dot />
+                <div className="w-50 mv1">
+                    <Line />
+                </div>
+                <div className="w-40 mv1">
+                    <Line />
+                </div>
+            </div>
+        </Frame>
+    );
+};
+
+export default CenterCover;