diff --git a/src/core/components/Header.tsx b/src/core/components/Header.tsx
index 11ab0b6937a7686ab6ed43ab54b8bf72f824ca90..ca7a2989588c256599da0d1e3758b84b46b9b9e2 100644
--- a/src/core/components/Header.tsx
+++ b/src/core/components/Header.tsx
@@ -1,5 +1,44 @@
-import React from 'react';
+import React, { useState } from 'react';
+import { useHistory } from 'react-router';
+import { Button, Menu } from 'semantic-ui-react';
+import styled from 'styled-components';
 
-const Header = () => <div>Header</div>;
+const StyledMenu = styled(Menu)`
+  padding: 0.5em;
+`;
 
+const Header = () => {
+  const [activeItem, setActiveItem] = useState('home');
+  const history = useHistory();
+  return (
+    <StyledMenu stackable size="large" secondary color="grey" inverted>
+      <Menu.Item
+        name="home"
+        active={activeItem === 'home'}
+        onClick={(e, { name }) => {
+          setActiveItem(name!);
+          history.push('/');
+        }}
+      >
+        Home
+      </Menu.Item>
+      <Menu.Item
+        name="news"
+        active={activeItem === 'news'}
+        onClick={(e, { name }) => {
+          setActiveItem(name!);
+          history.push('/news');
+        }}
+      >
+        News
+      </Menu.Item>
+
+      <Menu.Menu position="right">
+        <Menu.Item>
+          <Button color="orange" icon="lock" content="Log in" labelPosition="left" />
+        </Menu.Item>
+      </Menu.Menu>
+    </StyledMenu>
+  );
+};
 export default Header;