diff --git a/_redirects b/_redirects
new file mode 100644
index 0000000..d9ad21a
--- /dev/null
+++ b/_redirects
@@ -0,0 +1,2 @@
+/pages/*  /pages/:splat  404
+/*        /index.html    200
\ No newline at end of file
diff --git a/index.html b/index.html
index c988a5f..4ef8079 100644
--- a/index.html
+++ b/index.html
@@ -6,6 +6,7 @@
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Lusitana:wght@400;700&display=swap" rel="stylesheet">
+    <link rel="preload" href="cream-paper.png" as="image">
     <link rel="stylesheet" href="styles.css">
     <title>nikology.dev</title>
     <!-- <link rel="icon" href="birbFavicon.svg" type="image/svg+xml"> -->
@@ -13,21 +14,24 @@
 <body>
     <div class="ribbon">Work In Progress</div>
 
-    <h1>nikology.dev 
+    <!-- <h1>nikology.dev 
         <span class="bird-wrap">
             <button id="birdButton"><img src="birb.svg" alt=""></button>
             <svg id="barTemplate" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 8.47 8.47"><path fill="none" stroke="#3d2f1f" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.8" d="m1.5 4.23.23-.1a6 6 0 0 1 5.01 0l.23.1" style="paint-order:markers stroke fill"/></svg>
         </span>
-    </h1>
+    </h1> -->
+    
     <!-- Nav Bar -->
     <nav>
-        <a href="/">Home</a>
+        <a href="/" data-link>Home</a>
         <span>-</span>
-        <a href="">Test</a>
-        <span>-</span>
-        <a href="">Test</a>
+        <a href="/about" data-link>About</a>
+        <!-- <span>-</span>
+        <a href="">Test</a> -->
     </nav>
 
+    <div id="app"></div>
+
     <!-- <h2>About Me</h2>
     <p>Hi there! I am Niki and welcome to my website, I make stuff with computers. My current project is <a href="https://roplus.dev" target="_blank" rel="noopener">roplus.dev</a>!</p> -->
 
@@ -35,7 +39,8 @@
     <ul>
         <li><a href="https://gitlab.com/Nikology" target="_blank" rel="noopener">GitLab</a></li>
     </ul> -->
-    <footer>
+
+    <!-- <footer>
         <p>Bird recording by Petter Westberg via <a href="https://xeno-canto.org/1087467" target="_blank" rel="noopener">xeno-canto</a>, CC BY-NC-SA 4.0</p>
         <p>
             <a href="https://gitlab.com/Nikology/nikology.dev">
@@ -43,41 +48,91 @@
                 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 380 380"><path d="m282.83 170.73-.27-.69-26.14-68.22a6.8 6.8 0 0 0-2.69-3.24 7 7 0 0 0-8 .43 7 7 0 0 0-2.32 3.52l-17.65 54h-71.47l-17.65-54a6.86 6.86 0 0 0-2.32-3.53 7 7 0 0 0-8-.43 6.87 6.87 0 0 0-2.69 3.24L97.44 170l-.26.69a48.54 48.54 0 0 0 16.1 56.1l.09.07.24.17 39.82 29.82 19.7 14.91 12 9.06a8.07 8.07 0 0 0 9.76 0l12-9.06 19.7-14.91 40.06-30 .1-.08a48.56 48.56 0 0 0 16.08-56.04" transform="matrix(1.9787 0 0 2.0178 -185.94 -193.36)"/></svg>
             </a>
         </p>
-    </footer>
+    </footer> -->
+
     <!-- Scripts -->
     <script>
-        const DISTANCE = 25
-        const birdIcon = document.getElementById("birdButton");
-        const birdSound = new Audio("SnowBuntingSound.ogg");
-        const template = document.getElementById("barTemplate");
-        const wrap = document.querySelector(".bird-wrap");
-        
-        function spawnBar(distance, angle, delay = 0) {
-            const clone = template.cloneNode(true);
-            clone.removeAttribute("id");
-            clone.classList.add("bar");
-            clone.style.setProperty("--angle", `${angle}deg`);
-            clone.style.setProperty("--distance", `${-distance}px`);
-            clone.style.setProperty("--delay", `${delay}s`);
-            wrap.appendChild(clone);
+        const cache = new Map();
 
-            clone.addEventListener("animationend", () => clone.remove());
+        async function loadFragment(file) {
+            if (!cache.has(file)) {
+                const res = await fetch(file);
+                if (!res.ok) {
+                    return { status: res.status, content: null };
+                }
+                const text = await res.text();
+
+                if (text.includes('id="app"')) {
+                    return { status: 404, content: null};
+                }
+
+                cache.set(file, text);
+            }
+            return { status: 200, content: cache.get(file)};
         }
 
-        function birdSoundAnim() {
-            const leftRandom = (Math.random() * 40) + 40
-            const rightRandom = (Math.random() * 40) + 40
-            spawnBar(DISTANCE, -leftRandom, 0.2)
-            spawnBar(DISTANCE, -leftRandom, 0.4)
-            spawnBar(DISTANCE, rightRandom, 0.6)
-            spawnBar(DISTANCE, rightRandom, 0.8)
+        async function render() {
+            const path = location.pathname;
+            document.body.classList.toggle('home', path === '/');
+            const file = `/pages${path === '/' ? '/home' : path}.html`;
+            
+            const result = await loadFragment(file);
+
+            if (result.content) {
+                document.getElementById('app').innerHTML = result.content;
+            } else {
+                const errorResult = await loadFragment('/pages/error.html');
+                document.getElementById('app').innerHTML = errorResult.content;
+                document.getElementById('error-code').textContent = result.status;
+            }
         }
 
-        birdIcon.addEventListener("click", (e) => {
-            if (!birdSound.paused) return;
-            birdSound.play();
-            birdSoundAnim()
+        document.addEventListener('click', e => {
+            const link = e.target.closest('[data-link]');
+            if (link) {
+                e.preventDefault();
+                history.pushState(null, '', link.href);
+                render();
+            }
         });
+
+        window.addEventListener('popstate', render);
+        render().then(() => {
+             requestAnimationFrame(() => document.body.classList.add('ready'))
+        });
+       
+        // const DISTANCE = 25
+        // const birdIcon = document.getElementById("birdButton");
+        // const birdSound = new Audio("SnowBuntingSound.ogg");
+        // const template = document.getElementById("barTemplate");
+        // const wrap = document.querySelector(".bird-wrap");
+        
+        // function spawnBar(distance, angle, delay = 0) {
+        //     const clone = template.cloneNode(true);
+        //     clone.removeAttribute("id");
+        //     clone.classList.add("bar");
+        //     clone.style.setProperty("--angle", `${angle}deg`);
+        //     clone.style.setProperty("--distance", `${-distance}px`);
+        //     clone.style.setProperty("--delay", `${delay}s`);
+        //     wrap.appendChild(clone);
+
+        //     clone.addEventListener("animationend", () => clone.remove());
+        // }
+
+        // function birdSoundAnim() {
+        //     const leftRandom = (Math.random() * 40) + 40
+        //     const rightRandom = (Math.random() * 40) + 40
+        //     spawnBar(DISTANCE, -leftRandom, 0.2)
+        //     spawnBar(DISTANCE, -leftRandom, 0.4)
+        //     spawnBar(DISTANCE, rightRandom, 0.6)
+        //     spawnBar(DISTANCE, rightRandom, 0.8)
+        // }
+
+        // birdIcon.addEventListener("click", (e) => {
+        //     if (!birdSound.paused) return;
+        //     birdSound.play();
+        //     birdSoundAnim()
+        // });
     </script>
 </body>
 </html>
\ No newline at end of file
diff --git a/pages/about.html b/pages/about.html
new file mode 100644
index 0000000..916b96d
--- /dev/null
+++ b/pages/about.html
@@ -0,0 +1,10 @@
+<h1>About</h1>
+<p>Hi there! I am Niki and welcome to my website, I make stuff with computers. My current project is <a href="https://roplus.dev" target="_blank" rel="noopener">roplus.dev</a>!</p>
+<footer>
+    <p>
+        <a href="https://gitlab.com/Nikology/nikology.dev">
+            Page Source
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 380 380"><path d="m282.83 170.73-.27-.69-26.14-68.22a6.8 6.8 0 0 0-2.69-3.24 7 7 0 0 0-8 .43 7 7 0 0 0-2.32 3.52l-17.65 54h-71.47l-17.65-54a6.86 6.86 0 0 0-2.32-3.53 7 7 0 0 0-8-.43 6.87 6.87 0 0 0-2.69 3.24L97.44 170l-.26.69a48.54 48.54 0 0 0 16.1 56.1l.09.07.24.17 39.82 29.82 19.7 14.91 12 9.06a8.07 8.07 0 0 0 9.76 0l12-9.06 19.7-14.91 40.06-30 .1-.08a48.56 48.56 0 0 0 16.08-56.04" transform="matrix(1.9787 0 0 2.0178 -185.94 -193.36)"/></svg>
+        </a>
+    </p>
+</footer>
\ No newline at end of file
diff --git a/pages/error.html b/pages/error.html
new file mode 100644
index 0000000..a5b48f6
--- /dev/null
+++ b/pages/error.html
@@ -0,0 +1,2 @@
+<h2>Something went wrong</h2>
+<p>Error code: <span id="error-code">---</span></p>
\ No newline at end of file
diff --git a/pages/home.html b/pages/home.html
new file mode 100644
index 0000000..d4c811a
--- /dev/null
+++ b/pages/home.html
@@ -0,0 +1,16 @@
+<h1>nikology.dev 
+    <span class="bird-wrap">
+        <button id="birdButton"><img src="birb.svg" alt=""></button>
+        <svg id="barTemplate" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 8.47 8.47"><path fill="none" stroke="#3d2f1f" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.8" d="m1.5 4.23.23-.1a6 6 0 0 1 5.01 0l.23.1" style="paint-order:markers stroke fill"/></svg>
+    </span>
+</h1>
+
+<footer>
+    <p>Bird recording by Petter Westberg via <a href="https://xeno-canto.org/1087467" target="_blank" rel="noopener">xeno-canto</a>, CC BY-NC-SA 4.0</p>
+    <p>
+        <a href="https://gitlab.com/Nikology/nikology.dev">
+            Page Source
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 380 380"><path d="m282.83 170.73-.27-.69-26.14-68.22a6.8 6.8 0 0 0-2.69-3.24 7 7 0 0 0-8 .43 7 7 0 0 0-2.32 3.52l-17.65 54h-71.47l-17.65-54a6.86 6.86 0 0 0-2.32-3.53 7 7 0 0 0-8-.43 6.87 6.87 0 0 0-2.69 3.24L97.44 170l-.26.69a48.54 48.54 0 0 0 16.1 56.1l.09.07.24.17 39.82 29.82 19.7 14.91 12 9.06a8.07 8.07 0 0 0 9.76 0l12-9.06 19.7-14.91 40.06-30 .1-.08a48.56 48.56 0 0 0 16.08-56.04" transform="matrix(1.9787 0 0 2.0178 -185.94 -193.36)"/></svg>
+        </a>
+    </p>
+</footer>
\ No newline at end of file
diff --git a/serve.json b/serve.json
new file mode 100644
index 0000000..974418a
--- /dev/null
+++ b/serve.json
@@ -0,0 +1,7 @@
+{
+    "cleanUrls": false,
+    "rewrites": [
+        { "source": "/", "destination": "/index.html" },
+        { "source": "/!(pages)**", "destination": "/index.html" }
+    ]
+}
\ No newline at end of file
diff --git a/styles.css b/styles.css
index 68c8462..64ca6ec 100644
--- a/styles.css
+++ b/styles.css
@@ -9,12 +9,23 @@ body {
     margin: 0;
     display: flex;
     flex-direction: column;
-    justify-content: center;
-    align-items: flex-start;
-    padding: 2rem 20rem 2rem 20rem;
+    justify-content: flex-start;
+    padding: 4rem 20rem;
     box-sizing: border-box;
 }
 
+body.ready {
+    transition: padding-top 0.5s ease;
+}
+
+body.home {
+    padding-top: 35vh;
+}
+
+body.home h1 {
+    font-size: 4rem;
+}
+
 @media(max-width: 1024px) {
     body {
         padding: 2rem;
@@ -39,7 +50,6 @@ nav a:hover {
 }
 
 h1 {
-    font-size: 4rem;
     margin-bottom: 1rem;
 }
 
