diff --git a/packages/play-node-go/public/reset.css b/packages/play-node-go/public/reset.css
index e91c47f..170a2f5 100644
--- a/packages/play-node-go/public/reset.css
+++ b/packages/play-node-go/public/reset.css
@@ -51,3 +51,8 @@ table {
 	border-collapse: collapse;
 	border-spacing: 0;
 }
+
+button {
+  background: none;
+  border: none;
+}
\ No newline at end of file
diff --git a/packages/play-node-go/src/pages/Layout/MainWrapper/MainWrapper.scss b/packages/play-node-go/src/pages/Layout/MainWrapper/MainWrapper.scss
index 6dbe9e0..b31fc93 100644
--- a/packages/play-node-go/src/pages/Layout/MainWrapper/MainWrapper.scss
+++ b/packages/play-node-go/src/pages/Layout/MainWrapper/MainWrapper.scss
@@ -1,4 +1,5 @@
 @import '../../../../public/stylesheets/partials/mixins';
+@import '../../../../public/stylesheets/partials/variables';
 
 div.main-wrapper {
   display: flex;
@@ -33,4 +34,15 @@ div.main-wrapper {
       height: 100%;
     }
   }
+}
+
+button {
+  color:map-get($colors, 'sidebar_link');
+  cursor: pointer;
+  font-family: inherit;
+  font-size: 110%;
+  font-weight: bold;
+  margin-bottom: .5em;
+  padding: 0;
+  text-decoration: none;
 }
\ No newline at end of file
diff --git a/packages/play-node-go/src/pages/Layout/NavBar/NavBar.js b/packages/play-node-go/src/pages/Layout/NavBar/NavBar.js
index 02da86e..c3e0f82 100644
--- a/packages/play-node-go/src/pages/Layout/NavBar/NavBar.js
+++ b/packages/play-node-go/src/pages/Layout/NavBar/NavBar.js
@@ -1,29 +1,36 @@
-import React from 'react';
-import { Link } from 'react-router-dom';
-import './NavBar.scss';
-import Logo from '../../../components/Display/Logo/Logo';
-
-const NavBar = (props) => {
+import React from "react";
+import { Link } from "react-router-dom";
+import "./NavBar.scss";
+import Logo from "../../../components/Display/Logo/Logo";
 
+const NavBar = ({ state }) => {
   return (
     <div className="NavBar" data-testid="NavBar">
-      <Link to="/home" >
-        <div className="NavBar__logo"><Logo /></div>
+      <Link to="/home">
+        <div className="NavBar__logo">
+          <Logo />
+        </div>
       </Link>
 
-      <Link to="/home" >
-        <div className="NavBar__menu-item NavBar__home"><p className="--link">Find a Game</p></div>
+      <Link to="/home">
+        <div className="NavBar__menu-item NavBar__home">
+          <p className="--link">Find a Game</p>
+        </div>
       </Link>
-      
+
       <Link to="/news">
-        <div className="NavBar__menu-item NavBar__news"><p className="--link">News</p></div>
+        <div className="NavBar__menu-item NavBar__news">
+          <p className="--link">News</p>
+        </div>
       </Link>
 
       <Link to="/account">
-        <div className="NavBar__menu-item NavBar__account">{props.user ? props.user.username : <></>}</div>
+        <div className="NavBar__menu-item NavBar__account">
+          {state.user.username ? state.user.username : <></>}
+        </div>
       </Link>
     </div>
   );
-}
+};
 
-export default NavBar;
\ No newline at end of file
+export default NavBar;