diff --git a/src/core/components/Header.tsx b/src/core/components/Header.tsx
index 74e7470d84d090d9b98da45cf3a95bff0fde8bfe..fef7cc09770da760fa21d9477d1a207269712d44 100644
--- a/src/core/components/Header.tsx
+++ b/src/core/components/Header.tsx
@@ -1,46 +1,102 @@
 import {
-  AppBar, Tab, Tabs, Toolbar,
+  AppBar,
+  Button,
+  Grid,
+  makeStyles,
+  Tab,
+  Tabs,
+  Toolbar,
+  Typography,
 } from '@material-ui/core';
 import React, { useState } from 'react';
 import { useHistory } from 'react-router';
 
 interface AppBarMenuItem {
+  id: number;
   title: string;
   redirectTo: string;
 }
 
 const MENU_ITEMS: AppBarMenuItem[] = [
   {
-    title: 'Home',
-    redirectTo: '/',
-  },
-  {
+    id: 0,
     title: 'News',
     redirectTo: '/news',
   },
+  {
+    id: 1,
+    title: 'About',
+    redirectTo: '/about',
+  },
+  {
+    id: 2,
+    title: 'FAQ',
+    redirectTo: '/faq',
+  },
 ];
 
+const useStyles = makeStyles((theme) => ({
+  appBar: {
+    backgroundColor: '#E5BD2F',
+    padding: theme.spacing(1),
+  },
+  tab: {
+    fontWeight: 600,
+    padding: '0px',
+  },
+  indicator: {
+    backgroundColor: 'white',
+  },
+  navItem: {
+    flex: 1,
+    alignItems: 'center',
+    '&:first-child': {
+      marginRight: 'auto;',
+    },
+    '&:last-child': {
+      marginRight: 'auto;',
+    },
+  },
+}));
+
 const Header: React.FC = () => {
-  const [value, setValue] = useState(0);
+  const classes = useStyles();
   const history = useHistory();
+  const [value, setValue] = useState(
+    MENU_ITEMS.find((item) => history.location.pathname === item.redirectTo)?.id ?? 0,
+  );
+
   return (
-    <AppBar position="static">
+    <AppBar className={classes.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);
+        <Grid container>
+          <Grid className={classes.navItem} item container justify="flex-start">
+            <Tabs
+              value={value}
+              onChange={(event, val) => {
+                setValue(val);
               }}
-            />
-          ))}
-        </Tabs>
+              TabIndicatorProps={{ className: classes.indicator }}
+            >
+              {MENU_ITEMS.map((item) => (
+                <Tab
+                  key={item.id}
+                  className={classes.tab}
+                  label={item.title}
+                  onClick={() => {
+                    history.push(item.redirectTo);
+                  }}
+                />
+              ))}
+            </Tabs>
+          </Grid>
+          <Grid className={classes.navItem} item container justify="center">
+            <Typography variant="h4">SCH-BODY</Typography>
+          </Grid>
+          <Grid className={classes.navItem} item container justify="flex-end">
+            <Button>Login</Button>
+          </Grid>
+        </Grid>
       </Toolbar>
     </AppBar>
   );
diff --git a/src/core/components/MainRouting.tsx b/src/core/components/MainRouting.tsx
index 882d03dd31c84c881e1648e00a21f0bc8d991c06..215bf9a5f041c3d0b482a62b964f916dc1ae099b 100644
--- a/src/core/components/MainRouting.tsx
+++ b/src/core/components/MainRouting.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { Route, Switch } from 'react-router';
 
-const Main = () => (
+const MainRouting: React.FC = () => (
   <Switch>
     <Route path="/" exact>
       Hello
@@ -10,4 +10,4 @@ const Main = () => (
   </Switch>
 );
 
-export default Main;
+export default MainRouting;