diff --git a/frontend/public/index.html b/frontend/public/index.html
index ed0ebaf..7ae9403 100644
--- a/frontend/public/index.html
+++ b/frontend/public/index.html
@@ -19,7 +19,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
+    <title>Sutask io</title>
   </head>
   <body>
     <noscript>
diff --git a/frontend/public/manifest.json b/frontend/public/manifest.json
index ef19ec2..33dfc4f 100644
--- a/frontend/public/manifest.json
+++ b/frontend/public/manifest.json
@@ -1,6 +1,6 @@
 {
-  "short_name": "React App",
-  "name": "Create React App Sample",
+  "short_name": "Subtask IO",
+  "name": "Subtask",
   "icons": [
     {
       "src": "favicon.ico",
diff --git a/frontend/src/components/App/App.test.js b/frontend/src/components/App/App.test.js
index 68c9e34..2c54284 100644
--- a/frontend/src/components/App/App.test.js
+++ b/frontend/src/components/App/App.test.js
@@ -1,9 +1,10 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
+import {MemoryRouter as Router} from 'react-router-dom'
 import App from './index';
 
 it('renders without crashing', () => {
   const div = document.createElement('div');
-  ReactDOM.render(<App />, div);
+  ReactDOM.render(<Router><App/></Router>, div);
   ReactDOM.unmountComponentAtNode(div);
 });
diff --git a/frontend/src/components/App/Dashboard/__snapshots__/dashboard.test.js.snap b/frontend/src/components/App/Dashboard/__snapshots__/dashboard.test.js.snap
new file mode 100644
index 0000000..9f5e9f8
--- /dev/null
+++ b/frontend/src/components/App/Dashboard/__snapshots__/dashboard.test.js.snap
@@ -0,0 +1,41 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Dummy renders correctly 1`] = `
+<div
+  className={undefined}
+>
+  <div
+    className={undefined}
+  >
+    <h1>
+      SUBTASK
+    </h1>
+    <div
+      className={undefined}
+    >
+      <a
+        className={undefined}
+        href="/mytask"
+        onClick={[Function]}
+      >
+        My Task
+      </a>
+      <a
+        className={undefined}
+        href="/inbox"
+        onClick={[Function]}
+      >
+        Inbox
+      </a>
+      <a
+        className={undefined}
+        href="/dashboard"
+        onClick={[Function]}
+      >
+        Dashboard
+      </a>
+    </div>
+  </div>
+  Dashboard
+</div>
+`;
diff --git a/frontend/src/components/App/Dashboard/dashboard.test.js b/frontend/src/components/App/Dashboard/dashboard.test.js
index ad14387..3fb06c3 100644
--- a/frontend/src/components/App/Dashboard/dashboard.test.js
+++ b/frontend/src/components/App/Dashboard/dashboard.test.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import {BrowserRouter as Router} from 'react-router-dom'
+import {MemoryRouter as Router} from 'react-router-dom'
 import Dashboard from './index';
 import renderer from 'react-test-renderer';
 
diff --git a/frontend/src/components/App/Header/__snapshots__/header.test.js.snap b/frontend/src/components/App/Header/__snapshots__/header.test.js.snap
new file mode 100644
index 0000000..177aa56
--- /dev/null
+++ b/frontend/src/components/App/Header/__snapshots__/header.test.js.snap
@@ -0,0 +1,36 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Dummy renders correctly 1`] = `
+<div
+  className={undefined}
+>
+  <h1>
+    SUBTASK
+  </h1>
+  <div
+    className={undefined}
+  >
+    <a
+      className={undefined}
+      href="/mytask"
+      onClick={[Function]}
+    >
+      My Task
+    </a>
+    <a
+      className={undefined}
+      href="/inbox"
+      onClick={[Function]}
+    >
+      Inbox
+    </a>
+    <a
+      className={undefined}
+      href="/dashboard"
+      onClick={[Function]}
+    >
+      Dashboard
+    </a>
+  </div>
+</div>
+`;
diff --git a/frontend/src/components/App/Header/header.test.js b/frontend/src/components/App/Header/header.test.js
index e69de29..bc812bf 100644
--- a/frontend/src/components/App/Header/header.test.js
+++ b/frontend/src/components/App/Header/header.test.js
@@ -0,0 +1,12 @@
+import React from 'react';
+import {MemoryRouter as Router} from 'react-router-dom'
+import Header from './index';
+import renderer from 'react-test-renderer';
+
+test('Dummy renders correctly', () => {
+	const component = renderer.create(
+		<Router><Header/></Router>,
+	);
+	let tree = component.toJSON();
+	expect(tree).toMatchSnapshot();
+});
\ No newline at end of file
diff --git a/frontend/src/components/App/Header/index.js b/frontend/src/components/App/Header/index.js
index e314479..7f4c4e9 100644
--- a/frontend/src/components/App/Header/index.js
+++ b/frontend/src/components/App/Header/index.js
@@ -1,11 +1,15 @@
 import React from 'react';
-import {Link } from 'react-router-dom'
+import { Link } from 'react-router-dom'
+import styles from './styles.scss';
 
 const Header = () => {
-    return <div>
-        <Link to="/mytask">My Task</Link>
-        <Link to="/inbox">Inbox</Link>
-        <Link to="/dashboard">Dashboard</Link>
+    return <div className={styles.Header}>
+        <h1>SUBTASK</h1>
+        <div className={styles.HeaderContainer}>
+        <Link className={styles.HeaderContainer} to="/mytask">My Task</Link>
+        <Link className={styles.HeaderContainer} to="/inbox">Inbox</Link>
+        <Link className={styles.HeaderContainer} to="/dashboard">Dashboard</Link>
+        </div>
     </div>;
 };
 
diff --git a/frontend/src/components/App/Header/styles.scss b/frontend/src/components/App/Header/styles.scss
index e69de29..d842e29 100644
--- a/frontend/src/components/App/Header/styles.scss
+++ b/frontend/src/components/App/Header/styles.scss
@@ -0,0 +1,14 @@
+.Header {
+    padding-top : 12px; 
+    padding-bottom : 12px; 
+    display: flex;
+    justify-content: space-between;
+    align-items:center;
+    display: flex;
+    margin-left: 8px;
+    margin-right: 8px;
+}
+
+.HeaderContainer {
+    padding: 10px;
+}
\ No newline at end of file
diff --git a/frontend/src/components/App/Inbox/__snapshots__/inbox.test.js.snap b/frontend/src/components/App/Inbox/__snapshots__/inbox.test.js.snap
new file mode 100644
index 0000000..deadfdf
--- /dev/null
+++ b/frontend/src/components/App/Inbox/__snapshots__/inbox.test.js.snap
@@ -0,0 +1,41 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Dummy renders correctly 1`] = `
+<div
+  className={undefined}
+>
+  <div
+    className={undefined}
+  >
+    <h1>
+      SUBTASK
+    </h1>
+    <div
+      className={undefined}
+    >
+      <a
+        className={undefined}
+        href="/mytask"
+        onClick={[Function]}
+      >
+        My Task
+      </a>
+      <a
+        className={undefined}
+        href="/inbox"
+        onClick={[Function]}
+      >
+        Inbox
+      </a>
+      <a
+        className={undefined}
+        href="/dashboard"
+        onClick={[Function]}
+      >
+        Dashboard
+      </a>
+    </div>
+  </div>
+  Inbox
+</div>
+`;
diff --git a/frontend/src/components/App/Inbox/inbox.test.js b/frontend/src/components/App/Inbox/inbox.test.js
index e69de29..a616ad9 100644
--- a/frontend/src/components/App/Inbox/inbox.test.js
+++ b/frontend/src/components/App/Inbox/inbox.test.js
@@ -0,0 +1,12 @@
+import React from 'react';
+import {MemoryRouter as Router} from 'react-router-dom'
+import Inbox from './index';
+import renderer from 'react-test-renderer';
+
+test('Dummy renders correctly', () => {
+	const component = renderer.create(
+		<Router><Inbox/></Router>,
+	);
+	let tree = component.toJSON();
+	expect(tree).toMatchSnapshot();
+});
\ No newline at end of file
diff --git a/frontend/src/components/App/Mytask/__snapshots__/mytask.test.js.snap b/frontend/src/components/App/Mytask/__snapshots__/mytask.test.js.snap
new file mode 100644
index 0000000..416ee81
--- /dev/null
+++ b/frontend/src/components/App/Mytask/__snapshots__/mytask.test.js.snap
@@ -0,0 +1,41 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Dummy renders correctly 1`] = `
+<div
+  className={undefined}
+>
+  <div
+    className={undefined}
+  >
+    <h1>
+      SUBTASK
+    </h1>
+    <div
+      className={undefined}
+    >
+      <a
+        className={undefined}
+        href="/mytask"
+        onClick={[Function]}
+      >
+        My Task
+      </a>
+      <a
+        className={undefined}
+        href="/inbox"
+        onClick={[Function]}
+      >
+        Inbox
+      </a>
+      <a
+        className={undefined}
+        href="/dashboard"
+        onClick={[Function]}
+      >
+        Dashboard
+      </a>
+    </div>
+  </div>
+  My Task
+</div>
+`;
diff --git a/frontend/src/components/App/Mytask/mytask.test.js b/frontend/src/components/App/Mytask/mytask.test.js
index e69de29..570432c 100644
--- a/frontend/src/components/App/Mytask/mytask.test.js
+++ b/frontend/src/components/App/Mytask/mytask.test.js
@@ -0,0 +1,12 @@
+import React from 'react';
+import {MemoryRouter as Router} from 'react-router-dom'
+import MyTask from './index';
+import renderer from 'react-test-renderer';
+
+test('Dummy renders correctly', () => {
+	const component = renderer.create(
+		<Router><MyTask/></Router>,
+	);
+	let tree = component.toJSON();
+	expect(tree).toMatchSnapshot();
+});
\ No newline at end of file
