diff --git a/gs/frontend/aro/src/common/navbar.tsx b/gs/frontend/aro/src/common/navbar.tsx
index a23fac2ec..cbc70eb44 100644
--- a/gs/frontend/aro/src/common/navbar.tsx
+++ b/gs/frontend/aro/src/common/navbar.tsx
@@ -4,21 +4,19 @@ import profile from "../assets/profile.png";
 
 function Navbar() {
   return (
-    <div>
-      <div className="nav">
-        <Link to="/">
-          <img src={logo} alt="orbital logo"></img>
+    <div className="nav">
+      <Link to="/">
+        <img src={logo} alt="orbital logo"></img>
+      </Link>
+      <div className="navmenu">
+        <Link to="/">Home</Link>
+        <Link to="/new-request">New</Link>
+        <Link to="/requests">Requests</Link>
+        <Link to="/profile">
+          <div className="profile">
+            <img src={profile} alt="profile"></img>
+          </div>
         </Link>
-        <div className="navmenu">
-          <Link to="/">Home</Link>
-          <Link to="/new-request">New</Link>
-          <Link to="/requests">Requests</Link>
-          <Link to="/profile">
-            <div className="profile">
-              <img src={profile} alt="profile"></img>
-            </div>
-          </Link>
-        </div>
       </div>
     </div>
   );
diff --git a/gs/frontend/mcc/src/common/header.css b/gs/frontend/mcc/src/common/header.css
new file mode 100644
index 000000000..36ea66fba
--- /dev/null
+++ b/gs/frontend/mcc/src/common/header.css
@@ -0,0 +1,32 @@
+.nav img {
+  height: 75px;
+  margin: 0;
+}
+
+.nav {
+  background: black;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0.5rem 0 0 0;
+  width: 100%;
+  overflow: hidden;
+}
+
+.navmenu {
+  display: flex;
+  align-items: center;
+}
+
+.navmenu a {
+  display: block;
+  color: #f2f2f2;
+  text-align: center;
+  padding: 0 16px;
+  text-decoration: none;
+  font-size: 18px;
+}
+
+.navmenu a:hover {
+  color: rgb(67, 146, 196);
+}
diff --git a/gs/frontend/mcc/src/common/header.tsx b/gs/frontend/mcc/src/common/header.tsx
index 1b4f4da48..76dac211d 100644
--- a/gs/frontend/mcc/src/common/header.tsx
+++ b/gs/frontend/mcc/src/common/header.tsx
@@ -1,30 +1,20 @@
-import Nav from "react-bootstrap/Nav";
 import { Link } from "react-router-dom";
+import logo from "../assets/logo.png";
+import "./header.css";
 
 function Header() {
   return (
-    <Nav className="header">
-      <Nav.Item className="item">
-        <Nav.Link eventKey="link-1">
-          <Link to="/">Dashboard</Link>
-        </Nav.Link>
-      </Nav.Item>
-      <Nav.Item className="item">
-        <Nav.Link eventKey="link-2">
-          <Link to="/mission-commands">Mission Commands</Link>
-        </Nav.Link>
-      </Nav.Item>
-      <Nav.Item className="item">
-        <Nav.Link eventKey="link-3">
-          <Link to="/telemetry-data">Telemetry Data</Link>
-        </Nav.Link>
-      </Nav.Item>
-      <Nav.Item className="item">
-        <Nav.Link eventKey="link-4">
-          <Link to="/aro-requests">ARO Requests</Link>
-        </Nav.Link>
-      </Nav.Item>
-    </Nav>
+    <div className="nav">
+      <Link to="/">
+        <img src={logo} alt="orbital logo"></img>
+      </Link>
+      <div className="navmenu">
+        <Link to="/">Dashboard</Link>
+        <Link to="/mission-commands">Mission Commands</Link>
+        <Link to="/telemetry-data">Telemetry Data</Link>
+        <Link to="/aro-requests">ARO Requests</Link>
+      </div>
+    </div>
   );
 }
 
diff --git a/gs/frontend/mcc/src/index.css b/gs/frontend/mcc/src/index.css
index 21c3ebfec..a4b0a430b 100644
--- a/gs/frontend/mcc/src/index.css
+++ b/gs/frontend/mcc/src/index.css
@@ -25,16 +25,6 @@ code {
     monospace;
 }
 
-.header {
-  background-image: url("./assets/banner.png");
-  border-bottom: 1px solid darkblue;
-}
-
-.header a {
-  text-decoration: none;
-  color: white;
-}
-
 .layout {
   display: flex;
   flex-direction: column;