diff --git a/srcs/requirements/svelte/api_front/src/SplashPage.svelte b/srcs/requirements/svelte/api_front/src/SplashPage.svelte
index d9c5f6ad..b943b6aa 100644
--- a/srcs/requirements/svelte/api_front/src/SplashPage.svelte
+++ b/srcs/requirements/svelte/api_front/src/SplashPage.svelte
@@ -5,6 +5,7 @@
   import { loginStatus } from './stores/loginStatusStore.js';
 
   // go over agian in detail to make sure this actually does what you want
+  // it needs some work, seems confused a lot of the time...
 	onMount(async () => {
     console.log('SplashPage testing if logged in')
     let user = await fetch('http://transcendance:8080/api/v2/user')
diff --git a/srcs/requirements/svelte/api_front/src/components/Header.svelte b/srcs/requirements/svelte/api_front/src/components/Header.svelte
index 08079ff0..dee36e33 100644
--- a/srcs/requirements/svelte/api_front/src/components/Header.svelte
+++ b/srcs/requirements/svelte/api_front/src/components/Header.svelte
@@ -1,23 +1,12 @@
 <script lang="ts">
-
-  // import { primaryRoutes } from "../routes.js";
   import { push } from "svelte-spa-router";
+  import { location } from 'svelte-spa-router';
   import { loginStatus } from "../stores/loginStatusStore.js";
 
-  import {location} from 'svelte-spa-router';
-  // this could be how i change the header based on which Route it's in
   import active from 'svelte-spa-router/active'
   // or i could leave them all and not display if they're active?
 
 
-
-  let handleClickHome = () => {
-    // dispatch('clickedHome');
-    // profile?
-    console.log('clicked home')
-    push('/profile');
-  };
-
   let handleClickLogout = async () => {
     // dispatch('clickedLogout');
     await fetch('http://transcendance:8080/api/v2/auth/logout', {
@@ -29,70 +18,28 @@
     push('/');
   };
 
-  // TMP for testing Fetch
-
-  // let response;
-  let promise;
-
-  let handleClickFetch = async () => {
-    // await fetch('http://transcendance:8080/api/v2/user')
-    //   .then((res) => {response = res})
-    // let {data} = await fetch('http://transcendance:8080/api/v2/user');
-    promise = await fetch('http://transcendance:8080/api/v2/user')
-      .then( (x) => x.json() );
-    // there's a () after the .json, duh!!!!
-
-  };
-
 </script>
 
-<!-- What if i could query what the current URL is and based on that change the button names in the NAV! -->
 
 <header>
   <!-- svelte-ignore a11y-click-events-have-key-events -->
-  <img src="/img/potato_logo.png" alt="Potato Pong Logo" on:click={handleClickHome}>
-  <!-- {#if currentType === 'home'} -->
-    <h1>Potato Pong</h1>
-  <!-- {/if} -->
+  <img src="/img/potato_logo.png" alt="Potato Pong Logo" on:click={() => (push('/'))}>
+  <!-- /profile or / ? not sure -->
+  <h1>Potato Pong</h1>
+
   <nav>
-    <!-- TMP for testing Fetch -->
-    {#if $location === '/profile/fetch'}
-      <button on:click={handleClickFetch}>Do a Fetch</button>
+    {#if $location !== '/profile'}
+      <button on:click={() => (push('/profile'))}>My Profile</button>
+    {:else if $location === '/profile'}
+      <button on:click={() => (push('/profile/settings'))}>Settings</button>
     {/if}
 
-    <!-- <a href=""></a> -->
-    <!-- i might change these to links rather than buttons, i kinda hate the buttons -->
-    <!-- maybe just p or div actually idk -->
-    <!-- {#if userpage === 'display'} -->
-    <button>My Stats</button>
-    <!-- {:else if userpage === 'settings'} -->
-    <!-- {:else} -->
-    <!-- button idk something about  -->
-    <button>Stream</button>
+    <!-- <button on:click={() => (push('/stream'))}>Stream</button> -->
+    <!-- <button on:click={() => (push('/chat'))}>Chat</button> -->
     <button on:click={handleClickLogout}>Log Out</button>
   </nav>
 </header>
 
-<!-- TMP for testing fetch -->
-
-{#if $location === '/profile/fetch'}
-  <p>Made it to /fetch</p>
-  <!-- {#if response != undefined} -->
-    <!-- <p>{response}</p> -->
-    <!-- <p>{response.json.username}</p> -->
-    <!-- <p>{response.json}</p> -->
-  <!-- {/if} -->
-  {#if promise !== undefined}
-    <!-- <p>{promise}}</p> -->
-    <!-- <p>{JSON.stringify(promise, null, 2)}</p> -->
-    <p>{promise.username}</p>
-  {/if}
-{/if}
-
-
-
-
-
 
 
 
diff --git a/srcs/requirements/svelte/api_front/src/routes/primaryRoutes.js b/srcs/requirements/svelte/api_front/src/routes/primaryRoutes.js
index cdde6640..c662b26d 100644
--- a/srcs/requirements/svelte/api_front/src/routes/primaryRoutes.js
+++ b/srcs/requirements/svelte/api_front/src/routes/primaryRoutes.js
@@ -11,55 +11,85 @@ import { get } from 'svelte/store';
 //   "/article/:title": Article, // this is how you would do parameters!
 // "/": LoginPage,
 
+// TMP not using this cuz need to work out how to authentical both 42 and 2FA from the backend
+
+// export const primaryRoutes = {
+//   '/': SplashPage,
+//   // '/2fa': TwoFactorAuthentication,
+//   '/2fa': wrap({
+//     component: TwoFactorAuthentication,
+//     conditions: [
+//       (detail) => {
+//         // let loggedIn;
+//         // loginStatus.subscribe(value => {
+//        //   loggedIn = value;
+//        // });
+
+//         const { fortyTwo, tfa } = get(loginStatus);
+
+//         console.log('condition in /2fa');
+//         // return (loginStatus.fortyTwo && loginStatus.tfa);
+//         // console.log($loginStatus.fortyTwo)
+//         console.log(fortyTwo);
+//         console.log(tfa);
+//         return true;
+//       }
+//     ]
+//   }),
+//   '/profile': wrap({
+//     component: ProfilePage,
+//     conditions: [
+//       (detail) => {
+//         const { fortyTwo, tfa } = get(loginStatus);
+//         // console.log(fortyTwo);
+//         // console.log(tfa);
+//         // return true;
+//         return (fortyTwo && tfa);
+//       }
+//     ]
+//   }),
+//   '/profile/*': wrap({
+//     component: ProfilePage,
+//     conditions: [
+//       (detail) => {
+//         const { fortyTwo, tfa } = get(loginStatus);
+//         // console.log(fortyTwo);
+//         // console.log(tfa);
+//         // return true;
+//         return (fortyTwo && tfa);
+//       }
+//     ]
+//   }),
+  // and example
+//   '/profile': wrap({
+      //   // Use a dynamically-loaded component for this
+      //   asyncComponent: () => import('./ProfilePage.svelte'),
+      //   // Adding one pre-condition that's an async function
+      //   conditions: [
+      //       async (detail) => {
+      //           // Make a network request, which are async operations
+      //           const response = await fetch('http://transcendance:8080/api/v2/user')
+      //           const data = await response.json()
+      //           // Return true to continue loading the component, or false otherwise
+      //           if (data.isAdmin) {
+      //               return true
+      //           }
+      //           else {
+      //               return false
+      //           }
+      //       }
+      //   ]
+      // }),
+//   '/unauthorized-access': UnauthorizedAccessPage,
+//   '*': NotFound
+// };
+
 export const primaryRoutes = {
-  '/': SplashPage,
-  // '/2fa': TwoFactorAuthentication,
-  '/2fa': wrap({
-    component: TwoFactorAuthentication,
-    conditions: [
-      (detail) => {
-        // let loggedIn;
-        // loginStatus.subscribe(value => {
-		    //   loggedIn = value;
-      	// });
-
-        const { fortyTwo, tfa } = get(loginStatus);
-
-        console.log('condition in /2fa');
-        // return (loginStatus.fortyTwo && loginStatus.tfa);
-        // console.log($loginStatus.fortyTwo)
-        console.log(fortyTwo);
-        console.log(tfa);
-        return true;
-      }
-    ]
-  }),
-  '/profile': wrap({
-    component: ProfilePage,
-    conditions: [
-      (detail) => {
-        const { fortyTwo, tfa } = get(loginStatus);
-        // console.log(fortyTwo);
-        // console.log(tfa);
-        // return true;
-        return (fortyTwo && tfa);
-      }
-    ]
-  }),
-  '/profile/*': wrap({
-    component: ProfilePage,
-    conditions: [
-      (detail) => {
-        const { fortyTwo, tfa } = get(loginStatus);
-        // console.log(fortyTwo);
-        // console.log(tfa);
-        // return true;
-        return (fortyTwo && tfa);
-      }
-    ]
-  }),
+  "/": SplashPage,
+  "/profile": ProfilePage,
+  "/profile/*": ProfilePage,
   '/unauthorized-access': UnauthorizedAccessPage,
-  '*': NotFound
+  "*": NotFound
 };
 
 // export const primaryRoutes = {
@@ -70,6 +100,7 @@ export const primaryRoutes = {
 //   "*": NotFound
 // };
 
+
 // i might need to add /profile/* and such to make the nested routers work
 
 // ok maybe these need to be in their own files?