1 files changed, 26 insertions, 8 deletions
diff --git a/src/index.js b/src/index.js
index 869ec3d..49c66e7 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,17 +1,23 @@
 import React, { useState, useEffect } from 'react';
 import ReactDOM from 'react-dom';
 
-import CssBaseline from '@material-ui/core/CssBaseline';
-import { ThemeProvider } from '@material-ui/core/styles';
+import {
+  BenzinThemeProvider,
+  Header,
+} from 'react-benzin';
+
 import 'typeface-roboto';
 
-import theme from './theme';
-import Header from './components/Header/Header';
 import Timer from './pages/Timer/Timer';
 import Scoreboard from './pages/Scoreboard/Scoreboard';
 import Contribute from './pages/Contribute/Contribute';
 import Profile from './pages/Profile/Profile';
 
+import TimerIcon from '@material-ui/icons/Timer';
+import AccountCircleIcon from '@material-ui/icons/AccountCircle';
+import AssignmentIcon from '@material-ui/icons/Assignment';
+import GitHubIcon from '@material-ui/icons/GitHub';
+
 import { get } from './requests';
 
 
@@ -21,6 +27,13 @@ const App = () => {
   const [user, setUser] = useState({ username: 'anonymous', id: null });
   const [recentSolutions, setRecentSolutions] = useState([]);
 
+  const headerContents = {
+    app: (<TimerIcon />),
+    profile: (<AccountCircleIcon />),
+    scoreboard: (<AssignmentIcon />),
+    contribute: (<GitHubIcon />),
+  };
+
   useEffect(() => {
     const userId = +localStorage.getItem('userId');
     if (userId) {
@@ -57,11 +70,16 @@ const App = () => {
   };
 
   return (
-    <ThemeProvider theme={theme}>
-      <CssBaseline/>
-      <Header page={page} setPage={setPage}/>
+    <BenzinThemeProvider>
+      <Header
+        logo={{
+          title: 'ChronoCube'
+        }}
+        contents={headerContents}
+        page={page}
+        setPage={setPage}/>
       <Page page={page} />
-    </ThemeProvider>
+    </BenzinThemeProvider>
   );
 };