Update

src/Client/src/app/app.css

@@ -27,7 +27,7 @@
     height: 15px;
     width: 150px;
     border-radius: 5px;
-    margin: 20px;
+    margin: 10px;
     text-align: center;
     padding: 15px 0;
     transition: 0.5s;
@@ -38,22 +38,46 @@
 }
 
     .nav-button:hover {
-        background-color: var(--Mistox-Black);
+        background-color: #00000044;
+        color: var(--Mistox-Bright);
     }
 
+.nav-button-login {
+    width: 100px;
+    padding: 10px 0;
+}
+
 .content {
     width: 100%;
-    min-height: calc(100vh - 400px);
+    min-height: calc(100vh - 300px);
 }
 
 .bottom-bar {
     display: flex;
     width: 100%;
-    height: 200px;
+    height: 100px;
     background: linear-gradient(180deg,#99999988, #000000FF);
     backdrop-filter: blur(2px);
 }
 
+.bottom-bar-logo {
+    width: 80px;
+    height: 80px;
+    margin: 10px 50px;
+}
+
+.bottom-bar-logo img {
+    width: 80px;
+    height: 80px;
+}
+
+.bottom-bar-buttons {
+    display: flex;
+    width: calc(50% - 110px);
+    height: 80px;
+    margin: 10px;
+}
+
 .nav-button-bottom {
     height: 15px;
     width: 150px;
@@ -65,17 +89,6 @@
     text-decoration: none;
 }
 
-    .nav-button:hover {
-        color: var(--Mistox-Bright);
-    }
-
-.bottom-bar-logo {
-    width: 80px;
-    height: 80px;
-    padding: 0 50px;
-    padding-top: 100px;
-}
-
 .bottom-bar-float {
     align-items: end;
     color: var(--Mistox-White);

src/Client/src/app/app.html

@@ -5,29 +5,29 @@
     <a #mistLink class="nav-button" href="/jobs">JOB BOARD</a>
   </div>
   <a class="top-bar-logo" href="">
-    <img class="top-bar-logo" style="margin: 0;" src="img/logo.png" />
+    <img class="top-bar-logo" style="margin: 0;" src="img/site-logo.jpg" />
   </a>
   <div *ngIf="auth.isLoggedIn" class="top-bar-buttons flex-right">
-      <a class="nav-button" href="/account/settings"><span>{{ auth.loggedInUser.userName.toUpperCase() }}</span></a>
-      <a class="nav-button" href="/account/logout"><span>LOGOUT</span></a>
+      <a class="nav-button nav-button-login" href="/account/settings"><span>{{ auth.loggedInUser.userName.toUpperCase() }}</span></a>
+      <a class="nav-button nav-button-login" href="/account/logout"><span>LOGOUT</span></a>
   </div>
   <div *ngIf="!auth.isLoggedIn" class="top-bar-buttons flex-right">
-      <a class="nav-button" href="/account/login"><span>LOGIN</span></a>
-      <a class="nav-button" href="/account/register"><span>REGISTER</span></a>
+      <a class="nav-button nav-button-login" href="/account/login"><span>LOGIN</span></a>
+      <a class="nav-button nav-button-login" href="/account/register"><span>REGISTER</span></a>
   </div>
 </div>
 <div class="content">
   <router-outlet></router-outlet>
 </div>
 <div class="bottom-bar">
-  <div class="top-bar-buttons bottom-bar-float">
+  <div class="bottom-bar-buttons bottom-bar-float">
     <a class="nav-button-bottom bottom-bar-padding" href="/contact">CONTACT</a>
     <a class="nav-button-bottom bottom-bar-padding" href="/privacy">PRIVACY</a>
   </div>
-  <a class="top-bar-logo" href="https://mistox.com">
-    <img class="bottom-bar-logo" src="img/mistox-logo.png" />
+  <a class="bottom-bar-logo" href="https://mistox.com">
+    <img src="img/mistox-logo.png" />
   </a>
-  <div class="top-bar-buttons flex-right bottom-bar-float">
+  <div class="bottom-bar-buttons flex-right bottom-bar-float">
     <div class="bottom-bar-padding">
       <span>Mistox LLC</span>
     </div>

src/Client/src/styles.css

@@ -13,7 +13,11 @@
     font-family: Arial, Helvetica, sans-serif;
 }
 
+html {
+    background-color: #000;
+}
+
 body {
-    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='hexagons' fill='%23999999' fill-opacity='1' fill-rule='nonzero'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='hexagons' fill='%23999999' fill-opacity='0.2' fill-rule='nonzero'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
     background-color: #fff;
 }