diff --git a/srcs/requirements/svelte/api_front/public/global.css b/srcs/requirements/svelte/api_front/public/global.css
index 440eb9e6..1390d18f 100644
--- a/srcs/requirements/svelte/api_front/public/global.css
+++ b/srcs/requirements/svelte/api_front/public/global.css
@@ -13,11 +13,6 @@ body {
 	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
 	/* tmp? */
 	background: bisque;
-
-	/* overflow-x: hidden; */
-	/* This seems to have fixed my pages that are too long */
-	/* but now i can't scroll anywhere ... */
-	/* overflow-y: hidden; */
 }
 
 a {
diff --git a/srcs/requirements/svelte/api_front/public/img/BACKGROUND.png b/srcs/requirements/svelte/api_front/public/img/BACKGROUND.png
new file mode 100644
index 00000000..7f39521f
Binary files /dev/null and b/srcs/requirements/svelte/api_front/public/img/BACKGROUND.png differ
diff --git a/srcs/requirements/svelte/api_front/public/img/SPLASH_PAGE_BACKGROUND.png b/srcs/requirements/svelte/api_front/public/img/SPLASH_PAGE_BACKGROUND.png
new file mode 100644
index 00000000..90136036
Binary files /dev/null and b/srcs/requirements/svelte/api_front/public/img/SPLASH_PAGE_BACKGROUND.png differ
diff --git a/srcs/requirements/svelte/api_front/public/img/cartoon_potato1.png b/srcs/requirements/svelte/api_front/public/img/cartoon_potato1.png
deleted file mode 100644
index 2db693d7..00000000
Binary files a/srcs/requirements/svelte/api_front/public/img/cartoon_potato1.png and /dev/null differ
diff --git a/srcs/requirements/svelte/api_front/public/img/cartoon_potato2.jpg b/srcs/requirements/svelte/api_front/public/img/cartoon_potato2.jpg
deleted file mode 100644
index 41ba6dba..00000000
Binary files a/srcs/requirements/svelte/api_front/public/img/cartoon_potato2.jpg and /dev/null differ
diff --git a/srcs/requirements/svelte/api_front/public/img/logo_potato.png b/srcs/requirements/svelte/api_front/public/img/logo_potato.png
new file mode 100644
index 00000000..3a02aebc
Binary files /dev/null and b/srcs/requirements/svelte/api_front/public/img/logo_potato.png differ
diff --git a/srcs/requirements/svelte/api_front/public/img/potato_only.png b/srcs/requirements/svelte/api_front/public/img/potato_only.png
new file mode 100644
index 00000000..b2f1bb12
Binary files /dev/null and b/srcs/requirements/svelte/api_front/public/img/potato_only.png differ
diff --git a/srcs/requirements/svelte/api_front/public/img/tmp_mario_banner.png b/srcs/requirements/svelte/api_front/public/img/tmp_mario_banner.png
deleted file mode 100644
index af7cf499..00000000
Binary files a/srcs/requirements/svelte/api_front/public/img/tmp_mario_banner.png and /dev/null differ
diff --git a/srcs/requirements/svelte/api_front/public/img/wave-haikei.svg b/srcs/requirements/svelte/api_front/public/img/wave-haikei.svg
deleted file mode 100644
index 4a002190..00000000
--- a/srcs/requirements/svelte/api_front/public/img/wave-haikei.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg id="visual" viewBox="0 0 900 150" width="900" height="150" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"><path d="M0 36L21.5 33.7C43 31.3 86 26.7 128.8 32.5C171.7 38.3 214.3 54.7 257.2 63.5C300 72.3 343 73.7 385.8 65.7C428.7 57.7 471.3 40.3 514.2 30.5C557 20.7 600 18.3 642.8 25.8C685.7 33.3 728.3 50.7 771.2 59.5C814 68.3 857 68.7 878.5 68.8L900 69L900 0L878.5 0C857 0 814 0 771.2 0C728.3 0 685.7 0 642.8 0C600 0 557 0 514.2 0C471.3 0 428.7 0 385.8 0C343 0 300 0 257.2 0C214.3 0 171.7 0 128.8 0C86 0 43 0 21.5 0L0 0Z" fill="#618174" stroke-linecap="round" stroke-linejoin="miter"></path></svg>
\ 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 d2497cb5..996728b8 100644
--- a/srcs/requirements/svelte/api_front/src/pages/SplashPage.svelte
+++ b/srcs/requirements/svelte/api_front/src/pages/SplashPage.svelte
@@ -9,22 +9,8 @@
     user = await fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/user`)
       .then((resp) => resp.json())
 
-    // i mean i could do a failed to load user or some shit, maybe with a .catch or something? but atm why bother
-
-      console.log('User var');
-      console.log(user);
-      // if (user && user.statusCode && user.statusCode === 403) {
-      //   console.log('user not logged in')
-      // }
-      // if (user && user.username) {
-      //   console.log('we have a user');
-      // }
-
-    // user === undefined doesn't work cuz we declared user in the scope of onMount
-    // if (user === undefined) {
     if (user && user.statusCode && user.statusCode === 403) {
       console.log('on mount no user, returned status code 403 so logging out of userStore')
-      // userLogout(); // which i think should delete any previous local storage
     }
 
 	});
@@ -34,8 +20,6 @@
     console.log('you are now logged in');
   }
 
-// i could prolly put this in it's own compoent, i seem to use it in several places... or maybe just some JS? like no need for html
-// we could .then( () => replace('/') ) need the func so TS compatible...
   const logout = async() => {
 		await fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/auth/logout`, {
         method: 'POST',
@@ -46,108 +30,71 @@
 </script>
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
-<header class="grid-container">
-  <h1>Potato Pong</h1>
-  <nav>
-    <!-- {#if user !== undefined} -->
-    {#if user && user.username}
-      <div on:click={ () => (push('/profile')) }>Profile</div>
-      <div on:click={logout}>Logout</div>
-    {:else}
-      <div on:click={login}>Login</div>
-    {/if}
-  </nav>
-  <h2>
-    <div>Welcome to</div>
-    <div>Potato Pong</div>
-  </h2>
-</header>
-
-<Canvas/>
-
-<!-- doesn't work :( -->
-<!-- <svelte:body style="overflow-y: hidden"/> -->
+<div class="container">
+  <div class="splash-page">
+      {#if user && user.username}
+        <button class="button-in" on:click={ () => (push('/profile')) }>Profile</button>
+        <button class="button-out"  on:click={logout}>Logout</button>
+      {:else}
+        <button class="button-in" on:click={login}>Login</button>
+      {/if}
+  </div>
+</div>
 
 <style>
+@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;
+}
 
-  /* :global(body) {
-    overflow-y: hidden;
-  } */
-
-  header {
-    /* didn't work... */
-    overflow-y: hidden;
-  }
+.container {
+  height: 100%;
+  width: 100%;
+  position: relative;
+  background-image: url('/img/SPLASH_PAGE_BACKGROUND.png');
+  background-position: center center;
+  background-repeat: no-repeat;
+  background-attachment: fixed;
+  background-size: cover;
+}
 
 
-  /* The actually important stuff */
+.splash-page {
+  margin: 0;
+  position: absolute;
+  top: 80%;
+  -ms-transform: translateY(-80%);
+  transform: translateY(-80%);
+  left: 50%;
+  -ms-transform: translateX(-50%);
+  transform: translateX(-50%);
+}
 
-  .grid-container{
-    position: absolute;
-    left: 0;
-    top: 0;
+.button-in {
+  background-color: #8c0000;
+  border-color: black;
+  border-width: 4px;
+  color: white;
+  font-family: "Bit5x3";
+  font-size: x-large;
+	padding: 10px;
+}
 
-    box-sizing: border-box;
-    width: 100%;
-    height: 100%;
-    /* max-height: 100%; */
-    white-space: nowrap;
-    /* padding-bottom: 0; */
-    margin-bottom: 0px;
-    overflow: hidden;
-    padding: 20px 40px;
-    margin: 0px;
+.button-out {
+  background-color: #008c8c;
+  border-color: black;
+  border-width: 4px;
+  color: white;
+  font-family: "Bit5x3";
+  font-size: x-large;
+	padding: 10px;
+}
 
-    display: grid;
-    grid-template-columns: repeat(12, 1fr);
-    grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
-    align-items: center;
-  }
-
-  header h1{
-    grid-column: 1 / 7;
-    grid-row: 1;
-    /* grid-column: span 6; */
-    /* tmp? */
-    padding: 20px;
-    border: 1px solid bisque;
-  }
-  header nav{
-    /* make it a flexbox? */
-    grid-column: 7 / 13;
-    grid-row: 1;
-    justify-self: end;
-    /* tmp? */
-    padding: 20px;
-    border: 1px solid bisque;
-  }
-
-  header h2{
-    grid-row: 3;
-    grid-column: 5 / span 4;
-    justify-self: center;
-    /* tmp */
-    border: 1px solid black;
-    z-index: 3;
-  }
-  header h2 div{
-    font-size: 2em;
-    /* color: red; */
-  }
-
-  nav div {
-    display: inline;
-    color: bisque;
-    font-weight: bold;
-  }
-  nav > div {
-    padding-left: 1em;
-    /* didn't quite work, applies to both for some reason */
-    /* nav:first-child doesn't work either*/
-  }
-  nav div:hover{
-    text-decoration: underline;
-    cursor: pointer;
-  }
 
 </style>