Convert side bar to a header with title

1 files changed, 13 insertions, 13 deletions

diff --git a/src/components/Header.js b/src/components/Header.js
index a0cdae8..ccb8e87 100644
--- a/src/components/Header.js
+++ b/src/components/Header.js
@@ -1,6 +1,7 @@
 import React from "react";
 import PropTypes from "prop-types";
 import { Link } from "react-router-dom";
+import Button from "@mui/material/Button";
 
 class Header extends React.Component {
     static propTypes = {
@@ -10,19 +11,18 @@ class Header extends React.Component {
     render() {
         return (
             <div id="header">
-                <ul>
-                    <li>
-                        <Link to="/">Home</Link>
-                    </li>
-                </ul>
-                <hr />
-                <ul>
-                    <li>
-                        <Link to="/" onClick={this.props.clearToken}>
-                            Sign out
-                        </Link>
-                    </li>
-                </ul>
+                <div id="title">
+                    <Link to="/">✨ SOC Dashboard</Link>
+                </div>
+                <div id="right">
+                    <Button
+                        variant="contained"
+                        color="error"
+                        onClick={this.props.clearToken}
+                    >
+                        Sign out
+                    </Button>
+                </div>
             </div>
         );
     }