diff --git a/srcs/requirements/svelte/api_front/public/global.css b/srcs/requirements/svelte/api_front/public/global.css
index 3383d87c..b07ffb9c 100644
--- a/srcs/requirements/svelte/api_front/public/global.css
+++ b/srcs/requirements/svelte/api_front/public/global.css
@@ -1,4 +1,5 @@
 
+
 html, body {
 	position: relative;
 	width: 100%;
@@ -12,11 +13,23 @@ body {
 	box-sizing: border-box;
 	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
 	/* tmp? */
-	background: bisque;
+	background-color: #333;
 	display: flex;
 	flex-direction: column;
 }
 
+@font-face {
+	font-family: "Bit5x3";
+	src:
+		url("./fonts/Bit5x3.woff2") format("woff2"),
+		local("Bit5x3"),
+		url("./fonts/Bit5x3.woff") format("woff");
+	font-weight: normal;
+	font-style: normal;
+	font-display: swap;
+}
+
+
 a {
 	color: rgb(0,100,200);
 	text-decoration: none;
@@ -30,6 +43,13 @@ a:visited {
 	color: rgb(0,80,160);
 }
 
+.background-pages {
+	background-color: #333;
+	font-family: "Bit5x3";
+	font-size: 2vw;
+	color: white;
+}
+
 label {
 	display: block;
 }
diff --git a/srcs/requirements/svelte/api_front/src/pages/NotFound.svelte b/srcs/requirements/svelte/api_front/src/pages/NotFound.svelte
index f34342e6..da6072d3 100644
--- a/srcs/requirements/svelte/api_front/src/pages/NotFound.svelte
+++ b/srcs/requirements/svelte/api_front/src/pages/NotFound.svelte
@@ -1,10 +1,26 @@
 <script>
   import { link } from "svelte-spa-router";
+  import Header from '../pieces/Header.svelte';
 </script>
 
-<h1>We are sorry!</h1>
-<p>This isn't a url that we use.</p>
-<p>Go home you're drunk.</p>
-<a href="/" use:link>
-    <h2>Take me home →</h2>
-</a>
\ No newline at end of file
+
+<div class="background-pages">
+  <div class="content">
+  <h1>We are sorry!</h1>
+  <p>This isn't a url that we use.</p>
+  <p>Go home you're drunk.</p>
+</div>
+</div>
+
+<style>
+
+
+.content {
+  left: 50%;
+  position: absolute;
+  -ms-transform: translateX(-50%);
+  transform: translateX(-50%);
+}
+
+
+</style>
\ No newline at end of file
diff --git a/srcs/requirements/svelte/api_front/src/pages/SplashPage.svelte b/srcs/requirements/svelte/api_front/src/pages/SplashPage.svelte
index 996728b8..f3dccddf 100644
--- a/srcs/requirements/svelte/api_front/src/pages/SplashPage.svelte
+++ b/srcs/requirements/svelte/api_front/src/pages/SplashPage.svelte
@@ -78,8 +78,8 @@
 
 .button-in {
   background-color: #8c0000;
-  border-color: black;
-  border-width: 4px;
+  border-color: #071013;
+  border-width: 2px;
   color: white;
   font-family: "Bit5x3";
   font-size: x-large;
@@ -88,8 +88,8 @@
 
 .button-out {
   background-color: #008c8c;
-  border-color: black;
-  border-width: 4px;
+  border-color: #071013;
+  border-width: 2px;
   color: white;
   font-family: "Bit5x3";
   font-size: x-large;
diff --git a/srcs/requirements/svelte/api_front/src/pages/game/Ranking.svelte b/srcs/requirements/svelte/api_front/src/pages/game/Ranking.svelte
index 5585b051..af39892f 100644
--- a/srcs/requirements/svelte/api_front/src/pages/game/Ranking.svelte
+++ b/srcs/requirements/svelte/api_front/src/pages/game/Ranking.svelte
@@ -28,7 +28,7 @@
 </script>
 <Header />
 <br />
-
+<div class="background-pages">
 <div class="principal-div">
 	<table class="stats-table">
 		<thead>
@@ -59,6 +59,7 @@
 		</tbody>
 	</table>
 </div>
+</div>
 
 <style>
 
@@ -71,7 +72,6 @@
 		margin-left: auto;
 		margin-right: auto;
 		font-size: 0.9em;
-		font-family: sans-serif;
 		min-width: 400px;
 	}
 
diff --git a/srcs/requirements/svelte/api_front/src/pages/profile/ProfileDisplay.svelte b/srcs/requirements/svelte/api_front/src/pages/profile/ProfileDisplay.svelte
index 59791b1b..d1b7c125 100644
--- a/srcs/requirements/svelte/api_front/src/pages/profile/ProfileDisplay.svelte
+++ b/srcs/requirements/svelte/api_front/src/pages/profile/ProfileDisplay.svelte
@@ -19,6 +19,7 @@
 
 <Chat color="bisque"/>
 
+<div class="background-pages">
 <div class="outer">
   {#if user !== undefined}
     <GenerateUserDisplay user={user}/>
@@ -28,13 +29,13 @@
     <div>Failed to load current</div>
   {/if}
 </div>
-
+</div>
 <style>
 
   div.outer{
-    max-width: 960px;
-    margin: 40px auto;
+    max-width: 100%;
     text-align: center;
+    padding-bottom: 10px;
   }
 
 </style>
diff --git a/srcs/requirements/svelte/api_front/src/pages/profile/ProfileFriends.svelte b/srcs/requirements/svelte/api_front/src/pages/profile/ProfileFriends.svelte
index 71c780c6..8dc48d37 100644
--- a/srcs/requirements/svelte/api_front/src/pages/profile/ProfileFriends.svelte
+++ b/srcs/requirements/svelte/api_front/src/pages/profile/ProfileFriends.svelte
@@ -24,22 +24,10 @@
 
   onMount( async() => {
 
-    // DO I ACTUALLY NEED TO ON MOUNT ALL THIS STUFF?
-      // ALSO I COULD JUST USE THE FUNCITONS I MADE...
-
-
-    // yea no idea what
-    // i mean do i fetch user? i will for now
     user = await fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/user`)
       .then( (x) => x.json() );
 
     fetchAll();
-    // ok this shit works!
-    // const interval = setInterval(() => {
-		// 	fetchAll();
-		// }, 1000);
-
-    // return () => clearInterval(interval);
   });
 
   const fetchAll = async() => {
@@ -234,6 +222,7 @@
 </script>
 
 
+<div class="background-pages">
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 <div class="top-grid">
 
@@ -353,7 +342,7 @@
 
   </div>
 </div>
-
+</div>
 <style>
 
 /* ok so i want a 12 column grid with a sidebar */
@@ -368,7 +357,14 @@
 
   div.sidebar-list{
     grid-column: 1 / span 2;
-    background: white;
+    background: #FB8B24;
+    padding: 1vw;
+    max-width: 100%;
+    max-height: 100%;
+    box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    border-right: 4px solid #071013;
   }
 
   div.sidebar-item{
@@ -393,7 +389,7 @@
   }
 
   div.placeholder{
-    color: darkgray;
+    color: white;
     text-align: center;
   }
 
@@ -402,7 +398,7 @@
   }
 
   div.tip{
-    color: darkgray;
+    color: white;
     font-size: 0.8em;
     font-weight: bold;
   }
diff --git a/srcs/requirements/svelte/api_front/src/pages/profile/ProfileSettings.svelte b/srcs/requirements/svelte/api_front/src/pages/profile/ProfileSettings.svelte
index e2bd0626..577fdc17 100644
--- a/srcs/requirements/svelte/api_front/src/pages/profile/ProfileSettings.svelte
+++ b/srcs/requirements/svelte/api_front/src/pages/profile/ProfileSettings.svelte
@@ -106,6 +106,7 @@
 
 
 <main>
+  <div class="background-pages">
   <h2>Look! You can change stuff</h2>
   <div class="cards">
     <Card>
@@ -114,7 +115,7 @@
           <div class="label">New Username</div>
           <!-- it really hates {user.username} and ${user.username} -->
           <!-- <input type="text" placeholder="current username: ${user.username}" bind:value={set.username}> -->
-          <input type="text" placeholder="current username: {nameTmp}" bind:value={set.username}>
+          <input type="text" placeholder="{nameTmp}" bind:value={set.username}>
 		      <div class="success">{success.username}</div>
           <div class="error">{errors.username}</div>
         </div>
@@ -144,7 +145,7 @@
       </form>
     </Card>
   </div>
-
+</div>
 </main>
 
 
@@ -158,6 +159,8 @@
     grid-gap: 20px; */
   }
 
+
+
   div.cards{
     display: grid;
     grid-template-columns: 1fr 1fr;
diff --git a/srcs/requirements/svelte/api_front/src/pieces/Header.svelte b/srcs/requirements/svelte/api_front/src/pieces/Header.svelte
index 51fa34ef..9dfb38f1 100644
--- a/srcs/requirements/svelte/api_front/src/pieces/Header.svelte
+++ b/srcs/requirements/svelte/api_front/src/pieces/Header.svelte
@@ -21,101 +21,84 @@
 
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
-<header>
-  <img src="/img/potato_logo.png" alt="Potato Pong Logo" on:click={() => (push('/'))}>
-  <h1>Potato Pong</h1>
-  <nav>
-	<button class:selected="{current === '/game'}" on:click={() => (push('/game'))}>Play</button>
-	<button class:selected="{current === '/spectator'}" on:click={() => (push('/spectator'))}>Spectate</button>
-	<button class:selected="{current === '/ranking'}" on:click={() => (push('/ranking'))}>Ranking</button>
-  <button class:selected="{current === '/profile'}" on:click={() => (push('/profile'))}>My Profile</button>
-  <!-- <button class:selected="{current === '/profile/settings'}" on:click={() => (push('/profile/settings'))}>Settings</button> -->
-  <button class:selected="{current === '/profile/friends'}" on:click={() => (push('/profile/friends'))}>Friends</button>
-  <button on:click={handleClickLogout}>Log Out</button>
-  </nav>
-</header>
-
-
-
-
-
+<div class="header">
+  <img src="/img/logo_potato.png" alt="Potato Pong Logo" on:click={() => (push('/'))}>
+  <div class="center">
+	  <button class:selected="{current === '/game'}" on:click={() => (push('/game'))}>Play</button>
+	  <button class:selected="{current === '/spectator'}" on:click={() => (push('/spectator'))}>Spectate</button>
+	  <button class:selected="{current === '/ranking'}" on:click={() => (push('/ranking'))}>Ranking</button>
+    <button class:selected="{current === '/profile'}" on:click={() => (push('/profile'))}>My Profile</button>
+    <button class:selected="{current === '/profile/friends'}" on:click={() => (push('/profile/friends'))}>Friends</button> 
+  </div>
+  <button class="logout" on:click={handleClickLogout}>Log Out</button>
+</div>
 
 <style>
-  /* See "possible_fonts.css" for more font options... */
   @font-face {
-    font-family: 'Bondi';
-    src:url('/fonts/Bondi.ttf.woff') format('woff'),
-        url('/fonts/Bondi.ttf.svg#Bondi') format('svg'),
-        url('/fonts/Bondi.ttf.eot'),
-        url('/fonts/Bondi.ttf.eot?#iefix') format('embedded-opentype');
+    font-family: "Bit5x3";
+    src:
+      url("/fonts/Bit5x3.woff2") format("woff2"),
+      local("Bit5x3"),
+      url("/fonts/Bit5x3.woff") format("woff");
     font-weight: normal;
     font-style: normal;
+    font-display: swap;
   }
 
-
-  .selected {
-    background-color: chocolate;
+  .header div.center button.selected {
     text-decoration: underline;
-    /* TMP so it's obvious but we need to pick good colors */
+    background-color: #2B3A67;
+  }
+
+  .header div.center button {
+    background-color: #8c0000;
+    border-color: #071013;
+    color: white;
+    font-family: "Bit5x3";
+    border-width: 2px;
+    font-size: 2vw;
   }
 
 
-/* There is a bunch of unncessary shit in here... why so many flex grids, why is everything the same class? just seemed easier but... */
-
-
-  header{
-    /* background: #f7f7f7; */
-    background: #618174;
-    /* padding: 20px; */
-    margin: 0;
-    /* does nothing so far... */
-    /* display: flex; */
+  .header button.logout {
+    background-color: #008c8c;
+    border-color: #071013;
+    color: white;
+    font-family: "Bit5x3";
+    border-width: 2px;
+    font-size: 2vw;
   }
 
-  header{
-    /* for some reason this doesn't do shit! */
-    position: sticky;
-    /* position: absolute; */
-    display: grid;
-    grid-template-columns: 1fr 1fr 1fr;
+  .header {
+    resize: vertical;
+    overflow: hidden;
+    background: #FB8B24;
+    box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    border-bottom: 4px solid #071013;
+    position: relative;
+    display: block;
+    padding: 10px;
   }
 
-/* Headers */
-  h1{
-    font-family: 'Bondi';
-  }
-
-  h1{
-    margin: 0;
-    text-align: left;
-    /* max-width: 40px; */
-    /* this helped with the weird extra space under the image... */
-    display: flex;
+  .header div.center {
+    width: fit-content;
     justify-self: center;
-    align-self: center;
+    position: absolute;
+    left: 50%;
+    display: inline-block;
+    -ms-transform: translateX(-50%); 
+    transform: translateX(-50%);
   }
 
-/* Images */
+  .header button.logout {
+    float: right;
+  }
 
-  img{
+  .header img{
     cursor: pointer;
-    max-width: 40px;
-    padding: 7px 20px;
-    justify-self: left;
+    max-width: 10%;
+    float: left;
   }
-
-  nav{
-    display: flex;
-    justify-content: right;
-  }
-
-  nav button{
-    margin: 7px 20px;
-    /* padding: 5px; */
-    border-radius: 4px;
-  }
-
-  /* .none{
-
-  } */
 </style>