diff --git a/src/app.css b/src/app.css
index 0e2b4b2..6ac3a0f 100644
--- a/src/app.css
+++ b/src/app.css
@@ -1,9 +1,14 @@
 @import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,600;0,900;1,100;1,500&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@300;700&display=swap');
 
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
 
+.fira {
+	font-family: 'Fira Code', monospace;
+}
+
 @font-face {
 	font-family: 'Calderious';
 	src: url('/fonts/CALDERIOUS.ttf');
diff --git a/src/lib/header/Nav.svelte b/src/lib/header/Nav.svelte
index 53917fb..e67cb5c 100644
--- a/src/lib/header/Nav.svelte
+++ b/src/lib/header/Nav.svelte
@@ -19,7 +19,8 @@
 			<NavButton url="/#blog" text="Blog" />
 			<NavButton url="/#portfolio" text="Portfolio" />
 			<NavButton url="/#about" text="About" />
-			<NavButton url="/#vr" text="Virtual Reality" />
+			<NavButton url="/#vr" text="VR" />
+			<NavButton url="/#furry" text="Furry" />
 			<NavButton url="/#contact" text="Contact" />
 		</div>
 	</div>
@@ -32,7 +33,8 @@
 			<NavButton url="/#blog" text="Blog" />
 			<NavButton url="/#portfolio" text="Portfolio" />
 			<NavButton url="/#about" text="About" />
-			<NavButton url="/#vr" text="Virtual Reality" />
+			<NavButton url="/#vr" text="VR" />
+			<NavButton url="/#furry" text="Furry" />
 			<NavButton url="/#contact" text="Contact" />
 			<hr class="bg-white" />
 			<ThemeSwitcher />
diff --git a/src/lib/home/Blog.svelte b/src/lib/home/Blog.svelte
index 0f18101..a9e6f7d 100644
--- a/src/lib/home/Blog.svelte
+++ b/src/lib/home/Blog.svelte
@@ -40,10 +40,11 @@
 
     onMount(() => {
         if(browser) {
-            const slider: HTMLElement = document.querySelector('.items');
+            const slider: HTMLElement = document.querySelector('.items-blog');
             let isDown = false;
             let startX;
             let scrollLeft;
+            let lastKnownScrollLeft;
 
             slider.addEventListener('mousedown', (e) => {
                 isDown = true;
@@ -68,8 +69,9 @@
                 console.log(walk);
             });
             slider.addEventListener('wheel', (evt) => {
-                evt.preventDefault();
                 slider.scrollLeft += evt.deltaY;
+                if(slider.scrollLeft != lastKnownScrollLeft) evt.preventDefault();
+                lastKnownScrollLeft = slider.scrollLeft;
             });
         }
     });
@@ -90,7 +92,7 @@
             {#if posts.length == 1}
                 <p class="p-10 text-sm opacity-50">No more posts to show...</p>
             {:else}
-                <div class="grid grid-flow-col grid-rows-2 grid-cols-[repeat(12, 400px)] w-full gap-5 overflow-x-scroll pb-5 scrollbar scrollbar-thumb-white dark:scrollbar-thumb-black scrollbar-h-3 scrollbar-track-transparent scrollbar-thumb-rounded-full items">
+                <div class="grid grid-flow-col grid-rows-2 grid-cols-[repeat(12, 400px)] w-full gap-5 overflow-x-scroll pb-5 scrollbar scrollbar-thumb-white dark:scrollbar-thumb-black scrollbar-h-3 scrollbar-track-transparent scrollbar-thumb-rounded-full items-blog">
                     {#each posts as post, key}
                         {#if key != 0}
                             <Preview url={post.url} title={post.title} date={post.date} image={post.image} featured={false} isNew={post.isNew} />
diff --git a/src/lib/home/Furry.svelte b/src/lib/home/Furry.svelte
new file mode 100644
index 0000000..2cbfcbd
--- /dev/null
+++ b/src/lib/home/Furry.svelte
@@ -0,0 +1,80 @@
+<script lang="ts">
+	import { browser } from "$app/env";
+	import { onMount } from "svelte";
+
+    onMount(() => {
+        if(browser) {
+            const slider: HTMLElement = document.querySelector('.items');
+            let isDown = false;
+            let startX;
+            let scrollLeft;
+            let lastKnownScrollLeft;
+
+            slider.addEventListener('mousedown', (e) => {
+                isDown = true;
+                slider.classList.add('active');
+                startX = e.pageX - slider.offsetLeft;
+                scrollLeft = slider.scrollLeft;
+            });
+            slider.addEventListener('mouseleave', () => {
+                isDown = false;
+                slider.classList.remove('active');
+            });
+            slider.addEventListener('mouseup', () => {
+                isDown = false;
+                slider.classList.remove('active');
+            });
+            slider.addEventListener('mousemove', (e) => {
+                if(!isDown) return;
+                e.preventDefault();
+                const x = e.pageX - slider.offsetLeft;
+                const walk = (x - startX) * 1; //scroll-fast
+                slider.scrollLeft = scrollLeft - walk;
+                console.log(walk);
+            });
+            slider.addEventListener('wheel', (evt) => {
+                slider.scrollLeft += evt.deltaY;
+                if(slider.scrollLeft != lastKnownScrollLeft) evt.preventDefault();
+                lastKnownScrollLeft = slider.scrollLeft;
+            });
+        }
+    });
+</script>
+
+<main class="flex flex-col gap-20 relative @container">
+    <div class="absolute top-0 -mt-40" id="furry"></div>
+
+	<div class="flex flex-col gap-10">
+        <h3 class="whitepigeon text-blue-600 text-center -rotate-3 font-bold text-4xl @2xl:text-8xl">Party animal</h3>
+
+        <p class="text-center opacity-80 text-xl max-w-6xl mx-auto">
+            Being a furry is a big part of my life, and my most expensive hobby.
+            Furries are people who really like the cartoon animals from shows and movies, and come together to celebrate the creativity of human individuals.
+            I created several characters that I use to express myself, one of which is the black cat on this website called Mid.
+            Below are some of my adventures as a furry with the people I love being around.
+        </p>
+
+        <div class="flex gap-5 overflow-x-auto p-10 scrollbar scrollbar-thumb-white dark:scrollbar-thumb-black scrollbar-h-3 scrollbar-track-transparent scrollbar-thumb-rounded-full items">
+            <img src="/homepage/furry/2.jpg" class="rounded-xl shadow-xl h-[60vh]" alt="ended" />
+            <img src="/homepage/furry/3.jpg" class="rounded-xl shadow-xl h-[60vh]" alt="ended" />
+            <video class="rounded-xl shadow-xl h-[60vh]" controls autoplay muted loop height="60vh" width="auto">
+                <source src="/homepage/furry/4.mp4" type="video/mp4">
+                    Your browser does not support the video tag.
+            </video>
+            <img src="/homepage/furry/6.jpg" class="rounded-xl shadow-xl h-[60vh]" alt="ended" />
+            <video class="rounded-xl shadow-xl h-[60vh]" controls autoplay muted loop height="60vh" width="auto">
+                <source src="/homepage/furry/5.mp4" type="video/mp4">
+                    Your browser does not support the video tag.
+            </video>
+            <video class="rounded-xl shadow-xl h-[60vh]" controls autoplay muted loop height="60vh" width="auto">
+                <source src="/homepage/furry/7.mp4" type="video/mp4">
+                    Your browser does not support the video tag.
+            </video>
+        </div>
+    </div>
+
+    <div class="container grid grid-cols-2 gap-10">
+        <div>Sona</div>
+        <img src="" alt="Sona name" />
+    </div>
+</main>
\ No newline at end of file
diff --git a/src/lib/home/Portfolio.svelte b/src/lib/home/Portfolio.svelte
index 3c9ce8c..e473120 100644
--- a/src/lib/home/Portfolio.svelte
+++ b/src/lib/home/Portfolio.svelte
@@ -301,9 +301,6 @@
                         {/each}
                     </div>
                 </div>
-                <i class="text-gray-800 dark:text-gray-100 text-sm">
-                    Specialties marked in bold.
-                </i>
             </Card>
         </div>
     </div>
diff --git a/src/lib/home/Sona.svelte b/src/lib/home/Sona.svelte
index 9cc523f..bff81e2 100644
--- a/src/lib/home/Sona.svelte
+++ b/src/lib/home/Sona.svelte
@@ -1,4 +1,4 @@
-<script>
+<script lang="ts">
 	import Card from "./Card.svelte";
 
 	function calculateAge(birthday) { // birthday is a date
@@ -8,6 +8,42 @@
 	}
 </script>
 
+<main class="flex flex-col gap-5 container fira">
+    <h3 class="flex gap-5 items-end">
+        <span class="text-3xl font-bold">#</span>
+        <span class="text-4xl">About me</span>
+		<span class="text-base font-extrabold">//</span>
+		<span class="text-3xl">over mij</span>
+    </h3>
+    <div class="grid grid-cols-5 gap-5">
+		<div class="col-span-3 flex flex-wrap gap-2 bg-gray-200 dark:bg-gray-700 bg-opacity-50 dark:bg-opacity-50 p-5">
+			<span>&lt;age&gt;21&lt;/age&gt;</span>
+			<span>&lt;profession&gt;student software engineer&lt;/profession&gt;</span>
+		</div>
+
+		<div class="col-span-2 flex flex-col gap-5">
+			<div class="flex flex-col gap-1 text-sm p-5 border-gray-200 dark:border-gray-700 border-opacity-50 border-4 ">
+				<span>&lt;age&gt; <bold class="font-bold text-base">21</bold> &lt;/age&gt;</span>
+				<span>&lt;profession&gt; <bold class="font-bold text-base">software engineer</bold> &lt;/profession&gt;</span>
+				<span>&lt;nationality&gt; <bold class="font-bold text-base">dutch 🇳🇱</bold> &lt;/nationality&gt;</span>
+				<span class="h-5"></span>
+				<span>&lt;hobby&gt; <bold class="font-bold text-base">coding</bold> &lt;/hobby&gt;</span>
+				<span>&lt;hobby&gt; <bold class="font-bold text-base">computers</bold> &lt;/hobby&gt;</span>
+				<span>&lt;hobby&gt; <bold class="font-bold text-base">furry</bold> &lt;/hobby&gt;</span>
+			</div>
+
+			<div class="grid grid-cols-2 text-sm border-gray-200 dark:border-gray-700 border-opacity-50 border-4">
+				<img src="/homepage/sona/pink.png" class="object-cover @6xl:aspect-square opacity-80 hover:opacity-100 duration-150" alt="fursona" />
+				<img src="/homepage/sona/MidFingers.jpg" class="object-cover @6xl:aspect-square opacity-80 hover:opacity-100 duration-150" alt="fursona"/>
+			</div>
+
+			<div class="flex flex-col gap-1 text-sm border-gray-200 dark:border-gray-700 border-opacity-50 border-4">
+				<button class="w-full p-5 hover:bg-gray-200 dark:hover:bg-gray-700 duration-300 dark:bg-opacity-50 bg-opacity-50">Socials</button>
+			</div>
+		</div>
+    </div>
+</main>
+
 <main class="@container container flex flex-col gap-20 relative">
 	<div class="absolute top-0 -mt-40" id="about"></div>
 
diff --git a/src/routes/index.svelte b/src/routes/index.svelte
index 8863c87..63fb427 100644
--- a/src/routes/index.svelte
+++ b/src/routes/index.svelte
@@ -1,12 +1,10 @@
 <script>
 	import Banner from "$lib/home/Banner.svelte";
 	import Blog from "$lib/home/Blog.svelte";
-	import Card from "$lib/home/Card.svelte";
-	import Form from "$lib/home/Form.svelte";
 	import Portfolio from "$lib/home/Portfolio.svelte";
-	import Quote from "$lib/home/Quote.svelte";
 	import Sona from "$lib/home/Sona.svelte";
 	import Virtual from "$lib/home/Virtual.svelte";
+	import Furry from "$lib/home/Furry.svelte";
 </script>
 
 <svelte:head>
@@ -35,5 +33,9 @@
 		<hr class="container opacity-10 mx-auto w-1/2"/>
 
 		<Virtual/>
+
+		<hr class="container opacity-10 mx-auto w-1/2"/>
+
+		<Furry/>
 	</div>
 </main>
\ No newline at end of file
diff --git a/static/homepage/furry/2.jpg b/static/homepage/furry/2.jpg
new file mode 100644
index 0000000..9265391
Binary files /dev/null and b/static/homepage/furry/2.jpg differ
diff --git a/static/homepage/furry/3.jpg b/static/homepage/furry/3.jpg
new file mode 100644
index 0000000..50bf9aa
Binary files /dev/null and b/static/homepage/furry/3.jpg differ
diff --git a/static/homepage/furry/4.mp4 b/static/homepage/furry/4.mp4
new file mode 100644
index 0000000..d811cb5
Binary files /dev/null and b/static/homepage/furry/4.mp4 differ
diff --git a/static/homepage/furry/5.mp4 b/static/homepage/furry/5.mp4
new file mode 100644
index 0000000..1656e0b
Binary files /dev/null and b/static/homepage/furry/5.mp4 differ
diff --git a/static/homepage/furry/6.jpg b/static/homepage/furry/6.jpg
new file mode 100644
index 0000000..d9cb314
Binary files /dev/null and b/static/homepage/furry/6.jpg differ
diff --git a/static/homepage/furry/7.mp4 b/static/homepage/furry/7.mp4
new file mode 100644
index 0000000..28f14b7
Binary files /dev/null and b/static/homepage/furry/7.mp4 differ
diff --git a/static/homepage/vr/vr.png b/static/homepage/vr/vr.png
index 984d8c6..86bcc3b 100644
Binary files a/static/homepage/vr/vr.png and b/static/homepage/vr/vr.png differ