diff --git a/README.md b/README.md
index 8c11a8a..bd79e8f 100644
--- a/README.md
+++ b/README.md
@@ -1,2 +1,2 @@
-# jonasjones.me
- My website at https://jonasjones.me
+# alpha.jonasjones.dev
+ alpha repo
diff --git a/package.json b/package.json
index 209c0b3..b73295a 100644
--- a/package.json
+++ b/package.json
@@ -3,7 +3,7 @@
 	"version": "0.0.1",
 	"private": true,
 	"scripts": {
-		"dev": "vite dev",
+		"dev": "vite dev --host",
 		"build": "vite build",
 		"preview": "vite preview",
 		"check": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json",
diff --git a/src/app.html b/src/app.html
index effe0d0..7def3ad 100644
--- a/src/app.html
+++ b/src/app.html
@@ -1,5 +1,6 @@
 <!DOCTYPE html>
 <html lang="en">
+	<link rel="stylesheet" href="/src/routes/+page.css">
 	<head>
 		<meta charset="utf-8" />
 		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
diff --git a/src/components/Footer.svelte b/src/components/Footer.svelte
new file mode 100644
index 0000000..8d0f496
--- /dev/null
+++ b/src/components/Footer.svelte
@@ -0,0 +1,22 @@
+<div class="footer">
+    <p>Website by Jonas_Jones @ jonasjones.dev. 2021 - 2023</p>
+</div>
+<style>
+
+
+.footer {
+  height: 1rem;
+  background-color: #000;
+  color: #fff;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: fixed;
+  bottom: 0px;
+  left: 0px;
+  right: 0px;
+  padding-top: 0.25rem;
+  padding-bottom: 0.5rem;
+  font-size: 20px;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/NavBar.svelte b/src/components/NavBar.svelte
new file mode 100644
index 0000000..63a0dab
--- /dev/null
+++ b/src/components/NavBar.svelte
@@ -0,0 +1,212 @@
+<div class="navbar">
+  <div class="logo">
+    <a href="/">
+      <img src="/icon_80x80.webp" alt="Logo" class="logo">
+    </a>
+  </div>
+  <div class="nav-links">
+    <nav>
+      <ul>
+        {#each navLinks as link}
+          <li><a href={link.url}>{link.name}</a></li>
+        {/each}
+      </ul>
+    </nav>
+  </div>
+  <div class="lastfm">
+    <a href="https://fm.jonasjones.dev">
+      <span class="link"></span>
+    </a>
+    <div class="lastfmlogoclass" id="lastfm_logo">
+      <img src="" alt=" " class="lastfmlogooverlay" id="lastfm_logo_overlay">
+    </div>
+    
+    <div class="lastfm-text">
+      <p id="lastfm_title"></p>
+      <p id="lastfm_artist"></p>
+    </div>
+  </div>
+</div>
+
+
+<script>
+    let navLinks = [
+      { name: 'Home', url: '/' },
+      { name: 'Projects', url: '/projects'},
+      { name: 'For The Based™', url: '/based'},
+      { name: 'Status', url: '/status'},
+      { name: 'About', url: '/about' }
+    ];
+
+    // @ts-ignore
+    let miscLinks = [
+        { name: 'For The Based&trade;', url: '/based'}
+    ]
+  const fetch_url = "https://ws.audioscrobbler.com/2.0/?method=user.getrecenttracks&user=Jonas_Jones&api_key=57c0ca64285c7ca676bb8c2acf320f41&format=json&limit=1"
+
+  async function fetchLastFmData() {
+  let response = await fetch(fetch_url);
+  let data = await response.json();
+  let album_cover = data.recenttracks.track[0].image[1]['\#text'];
+  let song_title = data.recenttracks.track[0].name;
+  let artist = data.recenttracks.track[0].artist['\#text'];
+   console.log(data);
+
+    try {
+      // @ts-ignore
+      document.getElementById("lastfm_title").innerHTML = song_title;
+      // @ts-ignore
+      document.getElementById("lastfm_artist").innerHTML = artist;
+      // @ts-ignore
+      document.getElementById("lastfm_logo").style.backgroundImage = `url(${album_cover})`;
+      
+    } catch (error) {
+      console.log(error);
+    }
+
+    try {
+        let is_playing = data.recenttracks.track[0]['\@attr'].nowplaying;
+        if (is_playing == "true") {
+        // @ts-ignore
+        document.getElementById("lastfm_logo_overlay").src="/equalizer.gif";
+      } else {
+        // @ts-ignore
+        document.getElementById("lastfm_logo_overlay").src="/pause-icon-256.png";
+      }
+      } catch (error) {
+        try {
+          // @ts-ignore
+          document.getElementById("lastfm_logo_overlay").src="/pause-icon-256.png";
+        } catch (error) {
+          console.log(error);
+        }
+      }
+  }
+  fetchLastFmData();
+  setInterval(fetchLastFmData, 15000);
+  </script>
+
+  
+  <style>
+    .navbar {
+      background-color: #2023247c;
+      padding: 10px;
+      padding-top: 0;
+      padding-bottom: 0;
+      text-align: center;
+      width: 100%;
+      display: flex;
+    }
+
+    .logo {
+      height: 45px;
+      border-radius: 10px;
+      margin-top: 2px;
+    }
+
+    .nav-links {
+      display: flex;
+      justify-content: center;
+      flex-grow: 1;
+    }
+
+    @media (max-width: 768px) {
+    .navbar {
+      flex-direction: column;
+    }
+
+    .nav-links {
+      margin-top: 10px;
+    }
+  }
+    nav {
+      padding: 10px;
+      justify-content: center;
+      width: 100%;
+      display: table;
+    }
+    
+    ul {
+      list-style-type: none;
+      margin: 0;
+      padding: 0;
+    }
+    
+    li {
+      display: inline;
+      margin-right: 10px;
+    }
+    
+    a {
+      text-decoration: none;
+      color: #ffffff;
+      padding: 5px;
+      font-size: 23px;
+    }
+    
+    a:hover {
+      color: #ddd;
+    }
+
+    .lastfm {
+      padding: 3px;
+      padding-right: 10px;
+      margin: 0;
+      justify-content: right;
+      justify-self: right;
+      align-items: right;
+      float: right;
+      display: flex;
+      position: relative;
+      right: 3px;
+      top: 3px;
+      border-radius: 5px;
+    }
+    .lastfm:hover {
+      background-color: #202324;
+    }
+    .lastfm img {
+      width: 30px;
+      height: 30px;
+      border-radius: 10%;
+      margin-right: 10px;
+    }
+    .lastfm #lastfm_logo {
+      width: 40px;
+      height: 40px;
+      margin-right: 10px;
+      background-size: cover;
+      background-position: center;
+      background-repeat: no-repeat;
+      border-radius: 10%;
+      align-items: center;
+    }
+    .lastfm #lastfm_artist {
+      font-size: 13px;
+      text-align: left;
+      padding: 0;
+      margin: 0;
+    }
+    .lastfm #lastfm_title {
+      font-size: 19px;
+      text-align: left;
+      padding: 0;
+      margin: 0;
+    }
+    .lastfm #lastfm_logo_overlay {
+      width: 40px;
+      height: 40px;
+      margin-right: 10px;
+      opacity: 0.5;
+      align-self: center;
+    }
+    .link {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      top: 0;
+      left: 0;
+      z-index: 1;
+    }
+  </style>
+  
\ No newline at end of file
diff --git a/src/components/ParallaxBg.svelte b/src/components/ParallaxBg.svelte
new file mode 100644
index 0000000..be77325
--- /dev/null
+++ b/src/components/ParallaxBg.svelte
@@ -0,0 +1,47 @@
+<script>
+    let mouseX = 0;
+    let mouseY = 0;
+  
+    /**
+     * @param {{ clientX: number; clientY: number; }} event
+     */
+    function handleMouseMove(event) {
+      mouseX = event.clientX;
+      mouseY = event.clientY;
+    }
+  </script>
+  
+  <style>
+    @import '../routes/+page.css';
+    .container {
+      min-height: 100vh;
+      position: relative;
+      overflow: hidden; /* Ensure the background image does not overflow */
+    }
+  
+    .parallax-background {
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background-image: url('/ricky.webp');
+      background-repeat: no-repeat;
+      background-size: cover;
+      background-position: center center;
+      @media only screen and (min-width: 768px) {
+        transform: translateX(calc(-1 * var(--mouse-x) / 50)) translateY(calc(-1 * var(--mouse-y) / 50));
+    }
+      z-index: -1; /* Place the background behind other content */
+    }
+  </style>
+  
+  <main class="container" on:mousemove={handleMouseMove}>
+    <div class="parallax-background" style="--mouse-x: {mouseX}px; --mouse-y: {mouseY}px;">
+        <img src="/ricky.webp" width="102%" height="101%" alt="Parallax Background" class="parallax-image">
+        
+    </div>
+    <!-- Your main content goes here -->
+    <slot></slot>
+  </main>
+  
\ No newline at end of file
diff --git a/src/routes/+error.svelte b/src/routes/+error.svelte
new file mode 100644
index 0000000..5fffe99
--- /dev/null
+++ b/src/routes/+error.svelte
@@ -0,0 +1,34 @@
+<script>
+    import NavBar from "../components/NavBar.svelte";
+    import Footer from "../components/Footer.svelte";
+    import ParallaxBg from "../components/ParallaxBg.svelte";
+</script>
+<ParallaxBg>
+    <NavBar />
+    <title>404 - Page not found</title>
+    <center>
+        <h1>ERROR 404</h1>
+        <h2>Page not found</h2>
+        <div style="height:300px;width:600px">
+            <img src="http://cdn.jonasjones.me/uploads/homepage/slime-teal.gif" alt="Teal Slime" class="picture">
+        </div>
+    </center>
+    <style>
+        @import '+page.css';
+    </style>
+    <Footer />
+</ParallaxBg>
+
+<style>
+    @import '+page.css';
+    h1 {
+        font-size: 50px;
+        color: rgb(0, 255, 0);
+        margin: 0;
+        margin-top: 20px;
+    }
+    h2 {
+        font-size: 35px;
+        color: rgb(0, 255, 0);
+    }
+</style>
diff --git a/src/routes/+page.css b/src/routes/+page.css
index 4bcd53a..cf7ce2c 100644
--- a/src/routes/+page.css
+++ b/src/routes/+page.css
@@ -1,20 +1,51 @@
 /* Import Font Awesome for social media icons */
 @import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css');
 
+@font-face {
+  font-family: 'sary_soft_semiboldregular';
+  src: url('/font/sary-soft.soft-semibold-webfont.woff2') format('woff2'),
+       url('/font/sary-soft.soft-semibold-webfont.woff') format('woff');
+  font-weight: normal;
+  font-style: normal;
+
+}
+
+html {
+  font-family: 'sary_soft_semiboldregular';
+  margin: 0px;
+  background-color: #202324;
+}
+
 body {
   margin: 0;
   padding: 0;
-  font-family: 'Roboto', sans-serif;
-  background-color: #333;
+  font-family: 'sary_soft_semiboldregular';
   color: rgb(0, 255, 0)
 }
 
+.parallax-background {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-image: url('/ricky.png');
+  background-repeat: no-repeat;
+  background-size: 90%;
+  background-position: center center;
+  transform: translateX(calc(-1 * (var(--mouse-x)) / 50)) translateY(calc(-1 * var(--mouse-y) / 50));
+  z-index: -1; /* Place the background behind other content */
+}
+
 /* Set container styles */
 .container {
   display: flex;
   flex-direction: column;
   align-items: center;
   height: 100%;
+  min-height: 100vh;
+  position: relative;
+  overflow: hidden;
 }
 
 .image-wrapper {
@@ -70,7 +101,7 @@ body {
     color: rgb(0, 255, 0);
     text-decoration: underline;
     transition: all 0.2s ease-in-out;
-    font-family: 'Fira Code', monospace;
+    font-family: 'sary_soft_semiboldregular';
     font-style: italic;
   }
 
@@ -85,6 +116,7 @@ body {
 .social-media {
   margin-top: 1rem;
   color: white;
+  margin-bottom: 30px;
 }
 
 .row {
@@ -106,21 +138,6 @@ body {
   transform: scale(1.3); /* make icon 20% bigger on hover */
 }
 
-.footer {
-  height: 1rem;
-  background-color: #000;
-  color: #fff;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  position: fixed;
-  bottom: 0px;
-  left: 0px;
-  right: 0px;
-  padding-top: 0.25rem;
-  padding-bottom: 0.125rem;
-}
-
 .line {
   padding: 10px;
 }
@@ -136,16 +153,3 @@ body {
   transform: scale(100);
   color: gray;
 }
-
-
-.alpha-test {
-  background-color: orange;
-  border-radius: 0px 0px 0px 25px;
-  padding-right: 15px;
-  color: #fff;
-  width: 500px;
-  position: fixed;
-  top: 0;
-  right: 0;
-  text-align: right;
-}
\ No newline at end of file
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 677cbfe..50c6c24 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,23 +1,18 @@
+<ParallaxBg>
+<Navbar />
+<title>Jonas_Jones</title>
 
-<div class="container">
   <div class="image-wrapper">
     <div class="card-front">
       <!-- svelte-ignore a11y-img-redundant-alt -->
-      <img src="/icon_800x800_transparent.png" alt="My Picture" class="picture">
+      <img src="/icon_800x800_transparent.webp" alt="My Picture" class="picture">
     </div>
     <div class="card-back">
       <!-- svelte-ignore a11y-img-redundant-alt -->
-      <img src="/root_logo.png" alt="My Picture" class="picture">
+      <img src="/root_logo.webp" alt="My Picture" class="picture">
     </div>
   </div>
-  <div class="alpha-test">
-    <h3>Alpha Site</h3>
-    <p>Click <a href="https://alpha.jonasjones.dev/">here</a> to get to the alpha website and check out the latest progress towards the upcoming release</p>
-  </div>
-  <div class="links">
-    <a href="https://old.jonasjones.me" class="home-link">Home</a>
-    <a href="based/" class="for-the-based-link">For The Based&trade;</a>
-    </div>
+  
     <div class="line">
       <hr>
     </div>
@@ -27,7 +22,7 @@
     <div class="social-media">
     <div class="row">
         <a href="https://github.com/J-onasJones"><i class="fab fa-github"></i></a>
-        <a href="https://www.youtube.com/@JonasJones"><i class="fab fa-youtube"></i></a>
+        <a href="https://www.youtube.com/channel/UCVIxvKBIMSMgurYS8pK7fSg"><i class="fab fa-youtube"></i></a>
         <a href="https://discord.gg/V2EsuUVmWh"><i class="fab fa-discord"></i></a>
     </div>
     <div class="row">
@@ -36,15 +31,16 @@
         <a href="https://www.instagram.com/_jonas_jones_"><i class="fab fa-instagram"></i></a>
     </div>
   </div>
-</div>
-<div class="footer">
-  <p>Website by Jonas_Jones @ jonasjones.me. 2021 - 2023</p>
-</div>
+</ParallaxBg>
+<Footer />
   
   <script>
-    // Add script here if needed
+    import Navbar from '../components/NavBar.svelte';
+    import Footer from '../components/Footer.svelte';
+    import ParallaxBg from '../components/ParallaxBg.svelte';
   </script>
   
+
   <style>
     @import '+page.css';
   </style>
\ No newline at end of file
diff --git a/src/routes/based/+page.css b/src/routes/based/+page.css
new file mode 100644
index 0000000..cb15b2a
--- /dev/null
+++ b/src/routes/based/+page.css
@@ -0,0 +1,29 @@
+html {
+    background-color: #141414;
+    color: #fff;
+    font-family: 'Fira Code', monospace;
+}
+
+.terminal_user__name__text {
+    color: #FF9D00;
+}
+
+.terminal_user__host__text {
+    color: #05CE91;
+}
+
+.terminal_user {
+    display: flex;
+}
+
+#terminal-input {
+    color: #fff;
+    background-color: #1D2A35;
+    border: none;
+    outline: none;
+    font-size: 1rem;
+    font-family: 'Fira Code', monospace;
+    width: 100%;
+    /* debug */
+    border: 1px solid red;
+}
\ No newline at end of file
diff --git a/src/routes/based/+page.svelte b/src/routes/based/+page.svelte
index fcaee83..b0de62a 100644
--- a/src/routes/based/+page.svelte
+++ b/src/routes/based/+page.svelte
@@ -1 +1,28 @@
-<h1>Coming Soon&trade;</h1>
\ No newline at end of file
+<script>
+    import NavBar from "../../components/NavBar.svelte";
+    import Footer from "../../components/Footer.svelte";
+    import ParallaxBg from "../../components/ParallaxBg.svelte";
+</script>
+<ParallaxBg>
+    <NavBar />
+    <title>For the Based</title>
+    <div class="container">
+        <div class="terminal_user">
+                <span class="terminal_user__name__text">based</span>
+                <span class="terminal_user__at__text">@</span>
+                <span class="terminal_user__host__text">jonasjones.dev</span>
+                <span class="terminal_user__colon__text">:</span>
+                <span class="terminal_user__path__text">/home/jonasjones</span>
+                <span class="terminal_user__dollar__text">$</span>
+            <input title="terminal-input" type="text" id="terminal-input" autocomplete="off" spellcheck="false" autocapitalize="none" class="sc-ilhmMj iNZnsg" value="">
+        </div>
+        
+    </div>
+    <Footer />
+</ParallaxBg>
+
+
+
+<style>
+    @import '+page.css';
+</style>
\ No newline at end of file
diff --git a/static/equalizer.gif b/static/equalizer.gif
new file mode 100644
index 0000000..dcd180f
Binary files /dev/null and b/static/equalizer.gif differ
diff --git a/static/favicon.png b/static/favicon.png
index 17c8e18..c730aad 100644
Binary files a/static/favicon.png and b/static/favicon.png differ
diff --git a/static/favicon.webp b/static/favicon.webp
new file mode 100644
index 0000000..9f06ed1
Binary files /dev/null and b/static/favicon.webp differ
diff --git a/static/font/sary-soft.soft-regular-webfont.css b/static/font/sary-soft.soft-regular-webfont.css
new file mode 100755
index 0000000..4e0e0a5
--- /dev/null
+++ b/static/font/sary-soft.soft-regular-webfont.css
@@ -0,0 +1,12 @@
+/*! Generated by Font Squirrel (https://www.fontsquirrel.com) on November 9, 2022 */
+
+
+
+@font-face {
+    font-family: 'sary_softregular';
+    src: url('sary-soft.soft-regular-webfont.woff2') format('woff2'),
+         url('sary-soft.soft-regular-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+
+}
\ No newline at end of file
diff --git a/static/font/sary-soft.soft-regular-webfont.woff b/static/font/sary-soft.soft-regular-webfont.woff
new file mode 100755
index 0000000..49d7e6e
Binary files /dev/null and b/static/font/sary-soft.soft-regular-webfont.woff differ
diff --git a/static/font/sary-soft.soft-regular-webfont.woff2 b/static/font/sary-soft.soft-regular-webfont.woff2
new file mode 100755
index 0000000..a0704e6
Binary files /dev/null and b/static/font/sary-soft.soft-regular-webfont.woff2 differ
diff --git a/static/font/sary-soft.soft-semibold-webfont.css b/static/font/sary-soft.soft-semibold-webfont.css
new file mode 100755
index 0000000..1555ee2
--- /dev/null
+++ b/static/font/sary-soft.soft-semibold-webfont.css
@@ -0,0 +1,12 @@
+/*! Generated by Font Squirrel (https://www.fontsquirrel.com) on November 9, 2022 */
+
+
+
+@font-face {
+    font-family: 'sary_soft_semiboldregular';
+    src: url('sary-soft.soft-semibold-webfont.woff2') format('woff2'),
+         url('sary-soft.soft-semibold-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+
+}
\ No newline at end of file
diff --git a/static/font/sary-soft.soft-semibold-webfont.woff b/static/font/sary-soft.soft-semibold-webfont.woff
new file mode 100755
index 0000000..1fd0247
Binary files /dev/null and b/static/font/sary-soft.soft-semibold-webfont.woff differ
diff --git a/static/font/sary-soft.soft-semibold-webfont.woff2 b/static/font/sary-soft.soft-semibold-webfont.woff2
new file mode 100755
index 0000000..0bf548e
Binary files /dev/null and b/static/font/sary-soft.soft-semibold-webfont.woff2 differ
diff --git a/static/icon_800x800.png b/static/icon_800x800.png
index 0d388e9..d925538 100644
Binary files a/static/icon_800x800.png and b/static/icon_800x800.png differ
diff --git a/static/icon_800x800.webp b/static/icon_800x800.webp
new file mode 100644
index 0000000..2fdc88a
Binary files /dev/null and b/static/icon_800x800.webp differ
diff --git a/static/icon_800x800_transparent.png b/static/icon_800x800_transparent.png
index 59b8736..1db3a53 100644
Binary files a/static/icon_800x800_transparent.png and b/static/icon_800x800_transparent.png differ
diff --git a/static/icon_800x800_transparent.webp b/static/icon_800x800_transparent.webp
new file mode 100644
index 0000000..5dee5f6
Binary files /dev/null and b/static/icon_800x800_transparent.webp differ
diff --git a/static/icon_80x80.png b/static/icon_80x80.png
index 17c8e18..bed1c39 100644
Binary files a/static/icon_80x80.png and b/static/icon_80x80.png differ
diff --git a/static/icon_80x80.webp b/static/icon_80x80.webp
new file mode 100644
index 0000000..34b8384
Binary files /dev/null and b/static/icon_80x80.webp differ
diff --git a/static/logo_colored.png b/static/logo_colored.png
old mode 100755
new mode 100644
index a0298a2..8c21a48
Binary files a/static/logo_colored.png and b/static/logo_colored.png differ
diff --git a/static/logo_colored.webp b/static/logo_colored.webp
new file mode 100644
index 0000000..29232df
Binary files /dev/null and b/static/logo_colored.webp differ
diff --git a/static/pause-icon-256.png b/static/pause-icon-256.png
new file mode 100644
index 0000000..8db779e
Binary files /dev/null and b/static/pause-icon-256.png differ
diff --git a/static/pause-icon-256.webp b/static/pause-icon-256.webp
new file mode 100644
index 0000000..8171494
Binary files /dev/null and b/static/pause-icon-256.webp differ
diff --git a/static/ricky.png b/static/ricky.png
new file mode 100644
index 0000000..2371558
Binary files /dev/null and b/static/ricky.png differ
diff --git a/static/ricky.webp b/static/ricky.webp
new file mode 100644
index 0000000..b064955
Binary files /dev/null and b/static/ricky.webp differ
diff --git a/static/root_logo.png b/static/root_logo.png
old mode 100755
new mode 100644
index c83a24b..0ad73c1
Binary files a/static/root_logo.png and b/static/root_logo.png differ
diff --git a/static/root_logo.webp b/static/root_logo.webp
new file mode 100644
index 0000000..e69e1ea
Binary files /dev/null and b/static/root_logo.webp differ
diff --git a/static/taeyong-blackwhite.png b/static/taeyong-blackwhite.png
new file mode 100644
index 0000000..097cc30
Binary files /dev/null and b/static/taeyong-blackwhite.png differ
diff --git a/static/taeyong-blackwhite.webp b/static/taeyong-blackwhite.webp
new file mode 100644
index 0000000..3c87509
Binary files /dev/null and b/static/taeyong-blackwhite.webp differ
diff --git a/static/taeyong.png b/static/taeyong.png
new file mode 100644
index 0000000..a678793
Binary files /dev/null and b/static/taeyong.png differ
diff --git a/static/taeyong.webp b/static/taeyong.webp
new file mode 100644
index 0000000..c4edbaf
Binary files /dev/null and b/static/taeyong.webp differ
