diff --git a/portfolio/images/home-japan.webp b/portfolio/images/home-japan.webp
new file mode 100644
index 0000000..ec8716d
Binary files /dev/null and b/portfolio/images/home-japan.webp differ
diff --git a/portfolio/images/home-plamo.webp b/portfolio/images/home-plamo.webp
new file mode 100644
index 0000000..e659c1b
Binary files /dev/null and b/portfolio/images/home-plamo.webp differ
diff --git a/portfolio/images/home-radio.webp b/portfolio/images/home-radio.webp
new file mode 100644
index 0000000..e9cb373
Binary files /dev/null and b/portfolio/images/home-radio.webp differ
diff --git a/portfolio/images/home-software.webp b/portfolio/images/home-software.webp
new file mode 100644
index 0000000..12fc759
Binary files /dev/null and b/portfolio/images/home-software.webp differ
diff --git a/portfolio/templates/default.html b/portfolio/templates/default.html
index a9dc64b..2a94c55 100644
--- a/portfolio/templates/default.html
+++ b/portfolio/templates/default.html
@@ -13,18 +13,21 @@
 
         $partial("templates/navbar.html")$
 
-        <header>
-            <h1>$title$</h1>
-        </header>
+        <div class="container">
+            <header>
+                <h1>$title$</h1>
+            </header>
 
-        <main role="main">
-            $body$
-        </main>
+            <main role="main">
+                $body$
+            </main>
+        </div>
 
         <footer class="bg-body-tertiary">
             Site proudly generated by
-            <a href="http://jaspervdj.be/hakyll" target="_blank" rel="noopener noreferrer">Hakyll</a> and <a href="https://getbootstrap.com/" target="_blank" rel="noopener noreferrer">Bootstrap</a>, using <a href="https://www.docker.com/" target="_blank" rel="noopener noreferrer">Docker</a> containers with <a href="https://www.nginx.com/" target="_blank" rel="noopener noreferrer">Nginx</a> on a <a href="https://www.strato.nl/server/vps-linux/" target="_blank" rel="noopener noreferrer">Strato<la> VPS.
+            <a href="http://jaspervdj.be/hakyll" target="_blank" rel="noopener noreferrer">Hakyll</a> and <a href="https://getbootstrap.com/" target="_blank" rel="noopener noreferrer">Bootstrap</a>, using <a href="https://www.docker.com/" target="_blank" rel="noopener noreferrer">Docker</a> containers with <a href="https://www.nginx.com/" target="_blank" rel="noopener noreferrer">Nginx</a> on a <a href="https://www.strato.nl/server/vps-linux/" target="_blank" rel="noopener noreferrer">Strato VPS</a>.
         </footer>
+
     </body>
 
     <script src="/lib/bootstrap-5.3.8-dist/js/bootstrap.bundle.js"></script>
diff --git a/portfolio/templates/index.html b/portfolio/templates/index.html
index 9856dce..0d06628 100644
--- a/portfolio/templates/index.html
+++ b/portfolio/templates/index.html
@@ -1,5 +1,3 @@
-<img src="/images/haskell-logo.png" style="float: right; margin: 10px;" />
-
 <p>$welcome$</p>
 
 <p>This part of my website is still under construction, please excuse my mess.</p>
@@ -8,52 +6,54 @@
 
 <p class="text-center">$switcher$: <a href="/nl/index.html">Nederlands</a> | <a href="/jp/index.html">日本語</a> | <a href="/en/index.html">English</a></p>
 
-<div class="row row-cols-1 row-cols-md-2 row-cols-lg-4 g-4 p-1">
+<div class="container text-center">
+  <div class="row row-cols-1 row-cols-md-2 row-cols-lg-2 row-cols-xl-4">
 
-  <!-- Japan -->
-  <div class="col">
-    <div class="card mt-2" style="width: 128px;">
-      <a href="/japan.html">
-        <img src="/images/plamo/model-kits/gundam/hg/smc-2025-gundam/thumbnail.webp" alt="thumbnail" class="card-img-top img-fluid rounded-top" >
-      </a>
-      <div class="card-body">
-        <p class="card-text text-center">$title-japan$</p>
+    <!-- Japan -->
+    <div class="col d-flex justify-content-center">
+      <div class="card mt-2" style="width: 256px;">
+        <a href="/japan.html">
+          <img src="/images/home-japan.webp" alt="thumbnail" class="card-img-top img-fluid rounded-top" >
+        </a>
+        <div class="card-body">
+          <p class="card-text text-center">$title-japan$</p>
+        </div>
       </div>
     </div>
-  </div>
 
-  <!-- Plamo -->
-  <div class="col">
-    <div class="card mt-2" style="width: 128px;">
-      <a href="/plamo.html">
-        <img src="/images/plamo/model-kits/gundam/hg/smc-2025-gundam/thumbnail.webp" alt="thumbnail" class="card-img-top img-fluid rounded-top" >
-      </a>
-      <div class="card-body">
-        <p class="card-text text-center">$title-plamo$</p>
+    <!-- Plamo -->
+    <div class="col d-flex justify-content-center">
+      <div class="card mt-2" style="width: 256px;">
+        <a href="/plamo.html">
+          <img src="/images/home-plamo.webp" alt="thumbnail" class="card-img-top img-fluid rounded-top" >
+        </a>
+        <div class="card-body">
+          <p class="card-text text-center">$title-plamo$</p>
+        </div>
       </div>
     </div>
-  </div>
 
-  <!-- Radio  -->
-  <div class="col">
-    <div class="card mt-2" style="width: 128px;">
-      <a href="/radio.html">
-        <img src="/images/plamo/model-kits/gundam/hg/smc-2025-gundam/thumbnail.webp" alt="thumbnail" class="card-img-top img-fluid rounded-top" >
-      </a>
-      <div class="card-body">
-        <p class="card-text text-center">$title-radio$</p>
+    <!-- Radio  -->
+    <div class="col d-flex justify-content-center">
+      <div class="card mt-2" style="width: 256px;">
+        <a href="/radio.html">
+          <img src="/images/home-radio.webp" alt="thumbnail" class="card-img-top img-fluid rounded-top" >
+        </a>
+        <div class="card-body">
+          <p class="card-text text-center">$title-radio$</p>
+        </div>
       </div>
     </div>
-  </div>
 
-  <!-- Software -->
-  <div class="col">
-    <div class="card mt-2" style="width: 128px;">
-      <a href="/software.html">
-        <img src="/images/plamo/model-kits/gundam/hg/smc-2025-gundam/thumbnail.webp" alt="thumbnail" class="card-img-top img-fluid rounded-top" >
-      </a>
-      <div class="card-body">
-        <p class="card-text text-center">$title-software$</p>
+    <!-- Software -->
+    <div class="col d-flex justify-content-center">
+      <div class="card mt-2" style="width: 256px;">
+        <a href="/software.html">
+          <img src="/images/home-software.webp" alt="thumbnail" class="card-img-top img-fluid rounded-top" >
+        </a>
+        <div class="card-body">
+          <p class="card-text text-center">$title-software$</p>
+        </div>
       </div>
     </div>
   </div>
@@ -61,22 +61,24 @@
 
 <hr/>
 
-<div class="row row-cols-1 row-cols-md-2 g-4 p-1">
+<div class="container">
+  <div class="row row-cols-1 row-cols-md-2">
 
-  <div class="col">
-    <h4>Recent posts</h4>
-    $partial("templates/recent-posts.html")$
+    <div class="col">
+      <h4>Recent posts</h4>
+      $partial("templates/recent-posts.html")$
+
+      <p>…or you can find more posts in the <a href="/archive.html">archives</a>.</p>
+    </div>
+
+    <div class="col">
+      <h4>Upcoming events</h4>
+      $partial("templates/events.html")$
+
+      <p>Here you can find more events I attended: <a href="/events.html">events</a>.</p>
+    </div>
 
-    <p>…or you can find more posts in the <a href="/archive.html">archives</a>.</p>
   </div>
-
-  <div class="col">
-    <h4>Upcoming events</h4>
-    $partial("templates/events.html")$
-
-    <p>Here you can find more events I attended: <a href="/events.html">events</a>.</p>
-  </div>
-
 </div>