diff --git a/src/core/components/Header.tsx b/src/core/components/Header.tsx
index 11ab0b6937a7686ab6ed43ab54b8bf72f824ca90..74e7470d84d090d9b98da45cf3a95bff0fde8bfe 100644
--- a/src/core/components/Header.tsx
+++ b/src/core/components/Header.tsx
@@ -1,5 +1,49 @@
-import React from 'react';
+import {
+  AppBar, Tab, Tabs, Toolbar,
+} from '@material-ui/core';
+import React, { useState } from 'react';
+import { useHistory } from 'react-router';
 
-const Header = () => <div>Header</div>;
+interface AppBarMenuItem {
+  title: string;
+  redirectTo: string;
+}
+
+const MENU_ITEMS: AppBarMenuItem[] = [
+  {
+    title: 'Home',
+    redirectTo: '/',
+  },
+  {
+    title: 'News',
+    redirectTo: '/news',
+  },
+];
+
+const Header: React.FC = () => {
+  const [value, setValue] = useState(0);
+  const history = useHistory();
+  return (
+    <AppBar position="static">
+      <Toolbar>
+        <Tabs
+          value={value}
+          onChange={(event, val) => {
+            setValue(val);
+          }}
+        >
+          {MENU_ITEMS.map((item) => (
+            <Tab
+              label={item.title}
+              onClick={() => {
+                history.push(item.redirectTo);
+              }}
+            />
+          ))}
+        </Tabs>
+      </Toolbar>
+    </AppBar>
+  );
+};
 
 export default Header;
diff --git a/src/index.css b/src/index.css
index 06f062d46be0e706e86ea5a8f8db1430a661d57f..03ca6df615575b3d885d8e0efd68c2556beecbea 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,5 +1,6 @@
 html,
 body,
 #root {
+  margin: 0;
   height: 100%;
 }