diff --git a/src/lib/home/Portfolio.svelte b/src/lib/home/Portfolio.svelte
index 30918ce..0785304 100644
--- a/src/lib/home/Portfolio.svelte
+++ b/src/lib/home/Portfolio.svelte
@@ -7,9 +7,9 @@
     <div class="absolute top-0 -mt-40" id="portfolio"></div>
     <div class="@container container px-5 flex flex-col gap-10 justify-center">
         <div class="flex flex-col gap-5">
-            <h2 class="font-bold text-4xl">I do a lot of things</h2>
+            <h2 class="font-bold text-4xl">Portfolio</h2>
             <p class="text-lg">
-                Below are some of the things I currently keep myself busy with and links to places I worked on.
+                Explore some of my past works, experiences, skills and jobs
             </p>
         </div>
 
@@ -19,13 +19,16 @@
                 buttonText="🔥 Visit early website"
             >
                 <h3
-                    class="text-xl font-bold inline-flex items-center gap-3"
+                    class="text-xl font-bold inline-flex items-center gap-3 justify-between"
                 >
-                    <img
-                        src="/logo.png"
-                        class="h-8"
-                        alt="flame"
-                    /> Flame Software
+                    <div class="inline-flex gap-3">
+                        <img
+                            src="/logo.png"
+                            class="h-8"
+                            alt="flame"
+                        /> Flame Software
+                    </div>
+                    <span class="text-sm font-light">2022 and ongoing</span>
                 </h3>
                 <p class="text-sm text-gray-800 dark:text-gray-100">
                     Flame Software is a Software-as-a-Service company that is developing a new communications app
@@ -37,45 +40,60 @@
                 </p>
             </Card>
 
-            <Card
-                buttonHref="https://puppypride.social"
-                buttonText="🌐 Visit Puppy Pride"
-            >
-                <h3
-                    class="text-xl font-bold inline-flex items-center gap-3"
+            <span class="col-span-2 row-span-1 @container">
+                <Card
+                    buttonHref="https://puppypride.social"
+                    buttonText="🌐 Visit Puppy Pride"
                 >
-                    <img
-                        src="/puppypride.png"
-                        class="h-8"
-                        alt="puppypride"
-                    /> Puppy Pride
-                </h3>
-                <p class="text-sm text-gray-800 dark:text-gray-100">
-                    I am the core developer of the new Puppy Pride social
-                    network since January 2021, and continue to support and expand
-                    it to this day. The site was built from the ground up
-                    using the TALL stack in PHP (Tailwindcss, Alpine, Livewire and Laravel)
-                    and gave me a lot of experience working with not just PHP and every field inside Laravel,
-                    but also a very large array of different kinds of features and business processes at each step of development.
-                    <br /><br />
-                    Puppy Pride is an adult themed England based social network for people into petplay.
-                    The project is nearing its completion and will be released soon.
-                    You may find a beta release public at <a target="_blank" class="a" href="https://beta.puppypride.social">beta.puppypride.social</a>.
-                </p>
-            </Card>
+                    <div class="grid @xl:grid-cols-2 grid-cols-1 gap-5">
+                        <span>
+                            <h3
+                                class="text-xl font-bold inline-flex items-center gap-3 justify-between"
+                            >
+                                <div class="inline-flex gap-3">
+                                    <img
+                                        src="/puppypride.png"
+                                        class="h-8"
+                                        alt="puppypride"
+                                    /> Puppy Pride
+                                </div>
+                                <span class="text-sm font-light">2021 and ongoing</span>
+                            </h3>
+                            <p class="text-sm text-gray-800 dark:text-gray-100">
+                                I am the core developer of the new Puppy Pride social
+                                network since January 2021, and continue to support and expand
+                                it to this day. The site was built from the ground up
+                                using the TALL stack in PHP (Tailwindcss, Alpine, Livewire and Laravel)
+                                and gave me a lot of experience working with not just PHP and every field inside Laravel,
+                                but also a very large array of different kinds of features and business processes at each step of development.
+                                <br /><br />
+                                Puppy Pride is an adult themed England based social network for people into petplay.
+                                The project is nearing its completion and will be released soon.
+                                You may find a beta release public at <a target="_blank" class="a" href="https://beta.puppypride.social">beta.puppypride.social</a>.
+                            </p>
+                        </span>
+                        <span class="flex items-center">
+                            <img src="/homepage/pp.png" alt="puppypride profile page" />
+                        </span>
+                    </div>
+                </Card>
+            </span>
 
             <Card
                 buttonHref="https://saxion.nl"
                 buttonText="🎓 Open Website"
             >
                 <h3
-                    class="text-xl font-bold inline-flex items-center gap-3"
+                    class="text-xl font-bold inline-flex items-center gap-3 justify-between"
                 >
-                    <img
-                        src="/saxion.png"
-                        class="h-8 rounded-full"
-                        alt="puppypride"
-                    /> Saxion University
+                    <div class="inline-flex gap-3">
+                        <img
+                            src="/saxion.png"
+                            class="h-8 rounded-full"
+                            alt="puppypride"
+                        /> Saxion University
+                    </div>
+                    <span class="text-sm font-light">2020 to 2024</span>
                 </h3>
                 <p class="text-sm text-gray-800 dark:text-gray-100">
                     I am a year 3 student at the Saxion University of Applied Sciences in The Netherlands majoring in Software Engineering. The study keeps me plenty busy, but now I am combining the study with a Minor Entrepeneurship to build a SaaS product at my new company Flame Software.
@@ -84,21 +102,22 @@
                 </p>
             </Card>
 
-            <span></span>
-
             <span class="col-span-1 row-span-1">
                 <Card
                     buttonHref="https://dubbelnull.com/showcase"
                     buttonText="➡️ View DubbelNull showcase"
                 >
                     <h3
-                        class="text-xl font-bold inline-flex items-center gap-3"
+                        class="text-xl font-bold inline-flex items-center gap-3 justify-between"
                     >
-                        <img
-                            src="/dubbelnull.png"
-                            class="h-10 -my-1 -ml-1"
-                            alt="dubbelnull"
-                        /> More websites at DubbelNull
+                        <div class="inline-flex gap-3">
+                            <img
+                                src="/dubbelnull.png"
+                                class="h-10 -my-1 -ml-1"
+                                alt="dubbelnull"
+                            /> DubbelNull
+                        </div>
+                        <span class="text-sm font-light">2020 and ongoing</span>
                     </h3>
                     <p class="text-sm text-gray-800 dark:text-gray-100">
                         DubbelNull is a family business that does internet based development for small and medium sized companies,
@@ -112,17 +131,78 @@
                 <Card
                 >
                     <h3
-                        class="text-xl font-bold inline-flex items-center gap-3"
+                        class="text-xl font-bold inline-flex items-center gap-3 justify-between"
                     >
-                        🧑‍💻
-                        Player Stats
+                        <div class="inline-flex gap-3">
+                            🧑‍💻
+                            Player Stats
+                        </div>
                     </h3>
                     <p class="text-sm text-gray-800 dark:text-gray-100">
                         Beyond practical knowledge, I also am a teamplayer. I love discovering new ways and technologies and like to share ideas and find new solutions to problems together.
                         <br/><br/>
                         In my study at Saxion I have done many projects, including ones for large companies such as AgroVision and Witteveen+Bos, where we worked in teams of people with different backgrounds to create a complete product.
                     </p>
-                    <img src="/banner4.png" class="w-full -mb-10"/>
+                    <img src="/banner4.png" class="w-full -mb-10" alt="mid"/>
+                </Card>
+            </span>
+
+            <span class="col-span-1 row-span-2">
+                <Card
+                >
+                    <h3
+                        class="text-xl font-bold inline-flex items-center gap-3 justify-between"
+                    >
+                        <div class="inline-flex gap-3">
+                            🏢
+                            Internships
+                        </div>
+                    </h3>
+
+                    <div class="flex flex-col gap-2">
+                        <span class="flex justify-between items-end"><b class="text-lg">Witteveen+Bos</b><p class="text-sm">2022</p></span>
+                        <p class="text-sm">Witteveen+Bos is a major worldwide agricultural software company. During my internship me and my team developed a generic authentication system in Django that would be used as a customized plug-in template for new projects at the company.</p>
+                    </div>
+
+                    <div class="flex flex-col gap-2">
+                        <span class="flex justify-between items-end"><b class="text-lg">AgroVision</b><p class="text-sm">2021</p></span>
+                        <p class="text-sm">AgroVision is a Dutch software company for farmers. During my internship I worked on an app that generates reports about CO2 usage on farms and informs the farmer on how to reduce thecir emmissions.</p>
+                    </div>
+
+                    <div class="flex flex-col gap-2">
+                        <span class="flex justify-between items-end"><b class="text-lg">SuiteSeven</b><p class="text-sm">2019</p></span>
+                        <p class="text-sm">SuitSeven is a local webdevelopment studio. During my internship I worked on the design for a client's website.</p>
+                    </div>
+
+                    <div class="flex flex-col gap-2">
+                        <span class="flex justify-between items-end"><b class="text-lg">Profity</b><p class="text-sm">2018</p></span>
+                        <p class="text-sm">Profity is a software ccompany creating ERP suites for the Dutch steel industry. During my internship I learned the dynamics of a team and the different processes involved in software development.</p>
+                    </div>
+                </Card>
+            </span>
+
+            <span class="col-span-1 row-span-2">
+                <Card
+                    buttonHref="https://dubbelnull.com/showcase"
+                    buttonText="➡️ View DubbelNull showcase"
+                >
+                    <h3
+                        class="text-xl font-bold inline-flex items-center gap-3 justify-between"
+                    >
+                        <div class="inline-flex gap-3">
+                            <img
+                                src="/dubbelnull.png"
+                                class="h-10 -my-1 -ml-1"
+                                alt="dubbelnull"
+                            /> Skills
+                        </div>
+                        <span class="text-sm font-light">2020 and ongoing</span>
+                    </h3>
+                    <p class="text-sm text-gray-800 dark:text-gray-100">
+                        DubbelNull is a family business that does internet based development for small and medium sized companies,
+                        such as creating websites, manage hosting, advice and other similar things.
+                        I have made several websites for clients under this name, and you can find more of my works on the DubbelNull website.
+                    </p>
                 </Card>
             </span>
         </div>
diff --git a/src/lib/home/Sona.svelte b/src/lib/home/Sona.svelte
index 8a5cfa6..48c9adf 100644
--- a/src/lib/home/Sona.svelte
+++ b/src/lib/home/Sona.svelte
@@ -1,4 +1,6 @@
 <script>
+	import Card from "./Card.svelte";
+
 	function calculateAge(birthday) { // birthday is a date
 		var ageDifMs = Date.now() - birthday;
 		var ageDate = new Date(ageDifMs); // miliseconds from epoch
@@ -9,113 +11,58 @@
 <main class="@container container flex flex-col gap-20 relative">
 	<div class="absolute top-0 -mt-40" id="about"></div>
 
-	<section class="flex flex-col px-5 justify-between gap-10 lg:gap-20">
-		<article class="flex w-1/2 items-center text-center mx-auto flex-col col-span-2 gap-10">
+	<section class="grid grid-cols-4 px-5 gap-5">
+		<span class="col-span-2 p-5 flex flex-col gap-10">
 			<h3 class="whitepigeon text-blue-600 font-bold text-6xl">About me</h3>
 			<h4 class="font-normal text-lg">
 				Hello, I'm Pascal, but my internet name is Mid. Nice to have you here on my website! I'm a {calculateAge(new Date("2001-10-30"))} year old programmer and tech enthusiast from The Netherlands.
 				If you want to know a little more about me, here are some details. :)
 			</h4>
-		</article>
-
-		<article class="grid grid-cols-3 bg-black bg-opacity-10 gap-[3px]">
-			<div class="bg-gray-100 dark:bg-gray-900 p-5 flex flex-col gap-10">
-				<h4 class="whitepigeon text-blue-600 font-bold text-2xl text-center">Experience</h4>
-
-				<div class="h-[3px] bg-black bg-opacity-10"></div>
-
-				<div class="flex flex-col gap-2">
-					<span class="flex justify-between items-end"><b class="text-xl">Saxion University</b><p class="text-sm">2020 to 2024</p></span>
-					<p>HBO-ICT / Bachelor Computer Science</p>
-				</div>
-
-				<div class="flex flex-col gap-2">
-					<span class="flex justify-between items-end"><b class="text-xl">Self taught</b><p class="text-sm">2016 and ongoing</p></span>
-					<p>Self taught</p>
-				</div>
-
-				<div class="flex flex-col gap-2">
-					<span class="flex justify-between items-end"><b class="text-xl">PuppyPride Developer</b><p class="text-sm">2020 and ongoing</p></span>
-					<p>Self taught</p>
-				</div>
-
-				<div class="flex flex-col gap-2">
-					<span class="flex justify-between items-end"><b class="text-xl">Internship Witteveen+Bos</b><p class="text-sm">2022</p></span>
-					<p>Witteveen+Bos is a major worldwide agricultural software company. During my internship me and my team developed a generic authentication system in Django that would be used as a customized plug-in template for new projects at the company.</p>
-				</div>
-
-				<div class="flex flex-col gap-2">
-					<span class="flex justify-between items-end"><b class="text-xl">Internship AgroVision</b><p class="text-sm">2021</p></span>
-					<p>AgroVision is a Dutch software company for farmers. During my internship I worked on an app that generates reports about CO2 usage on farms and informs the farmer on how to reduce their emmissions.</p>
-				</div>
-
-				<div class="flex flex-col gap-2">
-					<span class="flex justify-between items-end"><b class="text-xl">Internship SuiteSeven</b><p class="text-sm">2019</p></span>
-					<p>SuitSeven is a local webdevelopment studio. During my internship I worked on the design for a client's website.</p>
-				</div>
-
-				<div class="flex flex-col gap-2">
-					<span class="flex justify-between items-end"><b class="text-xl">Internship Profity</b><p class="text-sm">2018</p></span>
-					<p>Profity is a software ccompany creating ERP suites for the Dutch steel industry. During my internship I learned the dynamics of a team and the different processes involved in software development.</p>
-				</div>
-			</div>
-
-			<div class="bg-gray-100 dark:bg-gray-900 p-5 flex flex-col gap-10">
-				<h4 class="whitepigeon text-blue-600 font-bold text-2xl text-center">Hobbies</h4>
+		</span>
 
-				<div class="h-[3px] bg-black bg-opacity-10"></div>
+		<img src="/homepage/sona/blue.png" class="rounded-xl shadow-lg object-cover aspect-square" alt="fursona" />
 
-				<div class="flex flex-col gap-2">
-					<b class="text-xl">Computer tech</b>
-					<p>
-						I love everything tech, as was probably obvious. But it goes beyond creating software.
-						I also built my own computer, and like to maintain hardware. At home I run a server rack equipped with a few Dell processing servers, doing my own research and hosting webservers, bots, multiplayer games and more using software like TrueNAS, Proxmox and Linux.
-					</p>
-					<img src="/homepage/proxmox.png" class="rounded shadow-lg" alt="proxmox environment" />
-				</div>
+		<img src="/homepage/sona/MidFingers.jpg" class="rounded-xl shadow-lg object-cover aspect-square" alt="fursona"/>
 
-				<div class="flex flex-col gap-2">
-					<b class="text-xl">Drones</b>
-					<p>
-						I like to go out there and make drone videos and pictures with my DJI drones, enjoying nature outdoors and capturing its beauty.
-					</p>
-				</div>
+		<img src="/homepage/proxmox.png" class="rounded-xl shadow-lg col-span-2" alt="proxmox environment" />
 
-				<div class="flex flex-col gap-2">
-					<b class="text-xl">Furry fandom</b>
+		<span class="col-span-2 flex flex-col gap-2">
+			<Card>
+				<b class="text-xl">Computer tech</b>
+				<p>
+					I love everything tech, as was probably obvious. But it goes beyond creating software.
+					I also built my own computer, and like to maintain hardware. At home I run a server rack equipped with a few Dell processing servers, doing my own research and hosting webservers, bots, multiplayer games and more using software like TrueNAS, Proxmox and Linux.
+				</p>
+			</Card>
+		</span>
 
-					<p>
-						Being a furry is an important hobby for me. Mid is my primary fursona out of the many that I have created over the years. He is a fictional anthropomorphic cat with black fur and blue hair and some unusually large whiskers. I use Mid to represent myself with online, an image I have grown comfortable with. I commission artists to create depictions of him to bring him to life, showing and using him on places like this website.
-					</p>
+		<span class="row-span-2">
+			<Card>
+				<b class="text-xl">Furry fandom</b>
 
-					<span class="grid grid-cols-3 gap-1">
-						<img src="/homepage/sona/blue.png" class="rounded shadow-lg object-cover aspect-square" alt="fursona" />
-						<img src="/homepage/sona/pink.png" class="rounded shadow-lg object-cover aspect-square" alt="fursona"/>
-						<img src="/homepage/sona/MidFingers.jpg" class="rounded shadow-lg object-cover aspect-square" alt="fursona"/>
-					</span>
-				</div>
-			</div>
+				<p>
+					Being a furry is an important hobby for me.
+					<br/><br/>
+					Mid is my primary fursona out of the many that I have created over the years. He is a fictional anthropomorphic cat with black fur and blue hair and some unusually large whiskers. I use Mid to represent myself with online, an image I have grown comfortable with. I commission artists to create depictions of him to bring him to life, showing and using him on places like this website.
+					<br/><br/>
+					On the right is also depicted Martin the Pine Marten, and on some pictures further down the website you'll find a few more sonas: Rexouium named Koffie and a protogen called Seffy.
+				</p>
+			</Card>
+		</span>
 
-			<div class="bg-gray-100 dark:bg-gray-900 p-5 flex flex-col gap-10">
-				<h4 class="whitepigeon text-blue-600 font-bold text-2xl text-center">Details</h4>
+		<img src="/homepage/sona/martin.png" class="rounded-xl shadow-lg object-cover aspect-square" alt="fursona" />
 
-				<div class="h-[3px] bg-black bg-opacity-10"></div>
+		<img src="/homepage/sona/vr.png" class="col-span-2 row-span-2 rounded-xl shadow-lg object-cover aspect-square" alt="fursona" />
 
-				<div class="flex flex-col gap-2">
-					<b class="text-xl">Find my details</b>
-					<p>
-						If you want to visit my social profiles or want to reach out to me, you can do so via the links in my <a href="#contact" class="a">contact form</a> or by emailing me directly at <a class="a" href="mailto:pascalvanginkel@outlook.com">pascalvanginkel@outlook.com</a>.
-					</p>
-				</div>
+		<img src="/homepage/sona/oldmid.png" class="rounded-xl shadow-lg object-cover aspect-square" alt="fursona" />
 
-				<div class="flex flex-col gap-2">
-					<b class="text-xl">Interested in my skills?</b>
-					<p>
-						I am open for work opportunities and love to work in teams as well as alone. I can do any kind of web related development. Just shoot me an email or contact me on any of my socials.
-					</p>
-				</div>
-			</div>
+		<img src="/homepage/drone.jpeg" class="rounded-xl shadow-lg object-cover aspect-[3/2] col-span-3 row-span-2" alt="drone shot" />
 
-		</article>
+		<Card>
+			<b class="text-xl">Drones</b>
+			<p>
+				I like to go out there and make drone videos and pictures with my DJI drones, enjoying nature outdoors and capturing its beauty.
+			</p>
+		</Card>
 	</section>
 </main>
\ No newline at end of file
diff --git a/static/homepage/drone.jpeg b/static/homepage/drone.jpeg
new file mode 100644
index 0000000..85a9356
Binary files /dev/null and b/static/homepage/drone.jpeg differ
diff --git a/static/homepage/pp.png b/static/homepage/pp.png
new file mode 100644
index 0000000..65e1515
Binary files /dev/null and b/static/homepage/pp.png differ
diff --git a/static/homepage/sona/martin.png b/static/homepage/sona/martin.png
new file mode 100644
index 0000000..ec849d3
Binary files /dev/null and b/static/homepage/sona/martin.png differ
diff --git a/static/homepage/sona/oldmid.png b/static/homepage/sona/oldmid.png
new file mode 100644
index 0000000..32ff8a9
Binary files /dev/null and b/static/homepage/sona/oldmid.png differ
diff --git a/static/homepage/sona/vr.png b/static/homepage/sona/vr.png
new file mode 100644
index 0000000..79cc79c
Binary files /dev/null and b/static/homepage/sona/vr.png differ