diff --git a/404.html b/404.html
index 322d80f..cd5bc3c 100644
--- a/404.html
+++ b/404.html
@@ -1,31 +1,37 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-  <title>Johannes Olzem</title>
-  <meta name="description" content="Johannes Olzem"s personal website">
+  <title>404 Not found - Johannes Olzem</title>
+  <meta name="description" content="Johannes Olzem's personal website">
   <meta charset="utf-8">
   <link rel="stylesheet" href="/css/style.css">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link rel="icon" href="/favico.ico">
 </head>
-<body class="body">
-  <header>
-    <a href="/">
-      <img src="/img/logo.png">
+<body>
+  <nav>
+    <a href="/" class="header-logo">
+      <img src="/img/header-logo.webp" alt="logo">
     </a>
-    <a href="/about/">About</a>
-    <a href="/blog/">Blog</a>
-    <a href="/contact/">Contact</a>
-  </header>
+    <span class="header-text">Johannes Olzem</span>
+    <ul>
+      <li>
+        <a href="/about/">About</a>
+      </li>
+      <li>
+        <a href="/blog/">Blog</a>
+      </li>
+      <li>
+        <a href="/contact/">Contact</a>
+      </li>
+    </ul>
+  </nav>
   <main>
-    <h1>Johannes Olzem</h1>
-    <blockquote>Less is more</blockquote>
-    <h2>404 Not Found</h2>
+    <h1>404 Not found</h1>
     <p>
-      The resource you requested was not found on this server. Click
-      <a href="/">here</a> to return home.
+     The page you want to reach was not found on this server.<br>
+      Click <a href="/">here</a> to return home.
     </p>
-
   </main>
   <footer>
     &copy; 2021 - <script>document.write(new Date().getFullYear())</script> Johannes Olzem
diff --git a/about/index.html b/about/index.html
index 4f37835..f0ff378 100644
--- a/about/index.html
+++ b/about/index.html
@@ -8,21 +8,28 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link rel="icon" href="/favico.ico">
 </head>
-<body class="body">
-  <header>
-    <a href="/">
-      <img src="/img/logo.png">
+<body>
+  <nav>
+    <a href="/" class="header-logo">
+      <img src="/img/header-logo.webp" alt="logo">
     </a>
-    <a href="/about/">About</a>
-    <a href="/blog/">Blog</a>
-    <a href="/contact/">Contact</a>
-  </header>
+    <span class="header-text">Johannes Olzem</span>
+    <ul>
+      <li>
+        <a href="/about/">About</a>
+      </li>
+      <li>
+        <a href="/blog/">Blog</a>
+      </li>
+      <li>
+        <a href="/contact/">Contact</a>
+      </li>
+    </ul>
+  </nav>
   <main>
-    <h1>Johannes Olzem</h1>
-    <blockquote>Less is more</blockquote>
-    <h2>About me</h2>
+    <h1>About me</h1>
     <p>
-      Hey there!
+      Hey there!<br>
       My name is Johannes, and I'm a computer enthusiast born and raised in
       Germany. Recently, I graduated from school, majoring in IT and English,
       and I am now training to become an IT specialist. I am passionate about
@@ -34,10 +41,14 @@
       from computers I enjoy making my own pourover coffee, I am a big fan of
       technical fashion and I like cars.
     </p>
-    <h2>My Skills</h2>
-    <p>I have at least basic knowledge in the following technologies:</p>
+    <h1>
+      My Skills
+    </h1>
+    <p>
+      I have at least basic knowledge in the following technologies:
+    </p>
     <div style="float:left" class="skills">
-      <h3>Languages</h3>
+      <h2>Languages</h2>
       <ul>
         <li>HTML &amp; CSS</li>
         <li>Java</li>
@@ -46,7 +57,7 @@
       </ul>
     </div>
     <div style="float:right" class="skills">
-      <h3>Other technologies</h3>
+      <h2>Other technologies</h2>
       <ul>
         <li>Linux</li>
         <li>Git</li>
@@ -55,26 +66,35 @@
         <li>Docker</li>
       </ul>
     </div>
-    <br>
-    <h2>About this website</h2>
+    <h1>About this website</h1>
     <p>
       While I might not have been using the internet much or at all during the
-      web 1.0 times (which this site is heavily modeled after) I do believe that
-      modern websites are unnecessarly bloated in many ways. They contain ads and
-      trackers (that's just how capitalism works, I can't really complain about
-      that) but also so much useless JavaScript. I agree that it is very useful
-      in certain areas but sometimes it is just not needed. Like in the case of a
-      news site, or a recipe site, which in my opinion could just be served
-      statically without much (or any) JavaScript. Because of this, I created
-      this website, to make a small contribution to the debloated minimal web.
-      Just pure HTML and CSS with some (useful) quality of life JavaScript.
-      No ads, trackers, or cookies.
+      web 1.0 times (which this site was originally modeled after) I do believe
+      that modern websites are unnecessarly bloated in many ways. They contain
+      ads and trackers (that's just how capitalism works, I can't really
+      complain about that) but also so much useless JavaScript. I agree that it
+      is very useful in certain areas but sometimes it is just not needed. Like
+      in the case of a news site, or a recipe site, which in my opinion could
+      just be served statically without much (or any) JavaScript. Because of
+      this, I created this website, to make a small contribution to the
+      debloated minimal web. Just pure HTML and CSS with some (useful) quality
+      of life JavaScript. No ads, trackers, or cookies.
       <br>
       It is also free and Open Source under the GNU General Public License V3,
       which you can find <a href="/LICENSE.txt">here.</a>
       <br>
       <a href="https://git.olzem.org/jolzem/olzem.org">Source code</a>
     </p>
+    <h1>What happened to this site?</h1>
+    <p>
+      I have recently taken an interest in a lot of different elements of
+      design. While I was previously already quite interested in interior
+      design, my recent deep dive into the design rabbit hole led me to learn
+      about a lot of different design languages, different designers, and
+      aspects of design like product design or, more importantly, graphic
+      design. After seeing a few different images online, I felt inspired and
+      decided to redesign my own website.
+    </p>
   </main>
   <footer>
     &copy; 2021 - <script>document.write(new Date().getFullYear())</script> Johannes Olzem
diff --git a/android-chrome-192x192.png b/android-chrome-192x192.png
new file mode 100644
index 0000000..5864b77
Binary files /dev/null and b/android-chrome-192x192.png differ
diff --git a/android-chrome-512x512.png b/android-chrome-512x512.png
new file mode 100644
index 0000000..c745a31
Binary files /dev/null and b/android-chrome-512x512.png differ
diff --git a/apple-touch-icon.png b/apple-touch-icon.png
new file mode 100644
index 0000000..fd8c369
Binary files /dev/null and b/apple-touch-icon.png differ
diff --git a/blog/how-to-create-a-rust-server-on-linux/index.html b/blog/how-to-create-a-rust-server-on-linux/index.html
index 540c318..e9c0332 100644
--- a/blog/how-to-create-a-rust-server-on-linux/index.html
+++ b/blog/how-to-create-a-rust-server-on-linux/index.html
@@ -8,33 +8,40 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link rel="icon" href="/favico.ico">
 </head>
-<body class="body">
-  <header>
-    <a href="/">
-      <img src="/img/logo.png">
+<body>
+  <nav>
+    <a href="/" class="header-logo">
+      <img src="/img/header-logo.webp" alt="logo">
     </a>
-    <a href="/about/">About</a>
-    <a href="/blog/">Blog</a>
-    <a href="/contact/">Contact</a>
-  </header>
-  <main class="blog-entry">
-    <h1>Johannes Olzem</h1>
-    <blockquote>Less is more</blockquote>
-    <h2>How to create a Rust server on Linux</h2>
+    <span class="header-text">Johannes Olzem</span>
+    <ul>
+      <li>
+        <a href="/about/">About</a>
+      </li>
+      <li>
+        <a href="/blog/">Blog</a>
+      </li>
+      <li>
+        <a href="/contact/">Contact</a>
+      </li>
+    </ul>
+  </nav>
+  <main>
+    <h1>How to create a Rust server on Linux</h1>
     <div class="author">Johannes Olzem</div>
     <div class="date">May 23, 2023</div>
     <h2>Table of Contents</h2>
     <ul>
       <li><a href="#Requirements">Requirements</a></li>
-      <li><a href="#SteamCMD">SteamCMD</a><br /></li>
-      <li><a href="#Installing">Installing</a><br /></li>
+      <li><a href="#SteamCMD">SteamCMD</a><br></li>
+      <li><a href="#Installing">Installing</a><br></li>
       <li><a href="#Running">Running</a></li>
     </ul>
     <h2 id="Requirements">Requirements</h2>
     <ul>
       <li>Debian Linux</li>
-      <li>&#62;5GB of RAM</li>
-      <li>&#62;4.5GB of free disc space</li>
+      <li>&gt;5GB of RAM</li>
+      <li>&gt;4.5GB of free disc space</li>
     </ul>
     <h2 id="SteamCMD">SteamCMD</h2>
     <h3>Configuring the envoirenment</h3>
@@ -47,9 +54,9 @@
     <p class="code cmd">
       sudo passwd steam
     </p>
-    <br />
+    <br>
     <p>
-      When prompted, enter a new password for the "steam" user. <br />
+      When prompted, enter a new password for the "steam" user. <br>
       Then switch to the "steam" user and go to its home folder.
     </p>
     <p class="code cmd">
@@ -58,19 +65,19 @@
     <p class="code cmd">
       cd
     </p>
-    <br />
+    <br>
     <p>
       Enable the contrib and non-free repositories by changing your <code>/etc/apt/sources.list</code> to resemble the following:
     </p>
-    <p class="code no-dollar" style="text-align:left;">
-      deb http://deb.debian.org/debian bullseye main contrib non-free<br />
-      deb-src http://deb.debian.org/debian bullseye main contrib non-free<br />
-      <br />
-      deb http://deb.debian.org/debian-security/ bullseye-security main contrib non-free<br />
-      deb-src http://deb.debian.org/debian-security/ bullseye-security main contrib non-free<br />
-      <br />
-      deb http://deb.debian.org/debian bullseye-updates main contrib non-free<br />
-      deb-src http://deb.debian.org/debian bullseye-updates main contrib non-free<br />
+    <p class="code" style="text-align:left;">
+      deb http://deb.debian.org/debian bullseye main contrib non-free<br>
+      deb-src http://deb.debian.org/debian bullseye main contrib non-free<br>
+      <br>
+      deb http://deb.debian.org/debian-security/ bullseye-security main contrib non-free<br>
+      deb-src http://deb.debian.org/debian-security/ bullseye-security main contrib non-free<br>
+      <br>
+      deb http://deb.debian.org/debian bullseye-updates main contrib non-free<br>
+      deb-src http://deb.debian.org/debian bullseye-updates main contrib non-free<br>
     </p>
     <h3>Installing SteamCMD</h3>
     <p>
@@ -79,7 +86,7 @@
     <p class="code cmd">
       sudo apt install steamcmd
     </p>
-    <br />
+    <br>
     <h2 id="Installing">Installing</h2>
     <p>
       Run SteamCMD
@@ -87,15 +94,15 @@
     <p class="code cmd">
       steamcmd
     </p>
-    <br />
+    <br>
     <p>
-    After a short update period, a prompt like <code>Steam&#62;</code> should appear.<br />
+    After a short update period, a prompt like <code>Steam&gt;</code> should appear.<br>
     To login anonymously type:
     </p>
     <p class="code">
      login anonymous
     </p>
-    <br />
+    <br>
     <p>
       Now install the Rust Dedicated Server application.
     </p>
@@ -103,15 +110,15 @@
       app_update 258550
     </p>
     <p>
-      This will install and verify the Rust server.<br />
-      On my ~100 Mbit/s connection this took around 15-20 Minutes. <br />
-      <br />
+      This will install and verify the Rust server.<br>
+      On my ~100 Mbit/s connection this took around 15-20 Minutes. <br>
+      <br>
       Afterwards you can quit the SteamCMD shell.
     </p>
     <p class="code">
       quit
     </p>
-    <br />
+    <br>
     <h2 id="Running">Running</h2>
     <p>
       First navigate to the Rust server directory.
@@ -119,18 +126,18 @@
     <p class="code cmd">
       cd ~/Steam/steamapps/common/rust_dedicated
     </p>
-    <br />
+    <br>
     <p>
       Finally, start up the Rust server by running:
     </p>
     <p class="code cmd">
       ./RustDedicated -batchmode
     </p>
-    <br />
+    <br>
     <p>
       There are several arguments you can pass to the server to change its behaviour.
     </p>
-    <br />
+    <br>
     <table>
       <tbody><tr>
       <th>Parameter
@@ -235,17 +242,19 @@
       </td>
       <td><code>gamelog.txt</code>
       </td>
-      <td>If you"re using a script, you"d better put the current date as a filename, otherwise, it"ll be erased on every start.
+      <td>If you're using a script, you'd better put the current date as a
+        filename, otherwise, it'll be erased on every start.
       </td></tr>
       <tr>
       <td><code>-silent-crashes</code>
       </td>
       <td><code> - </code>
       </td>
-      <td>Won"t display a crash dialog and will restart automatically if server is installed as service.
+      <td>Won't display a crash dialog and will restart automatically if server
+        is installed as service.
       </td></tr></tbody>
     </table>
-    <br />
+    <br>
     <h2>Sources</h2>
     <ul>
       <li>
@@ -262,6 +271,7 @@
       </li>
     </ul>
   </main>
+  </main>
   <footer>
     &copy; 2021 - <script>document.write(new Date().getFullYear())</script> Johannes Olzem
     <br>
diff --git a/blog/index.html b/blog/index.html
index f87d04f..33fd671 100644
--- a/blog/index.html
+++ b/blog/index.html
@@ -8,26 +8,36 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link rel="icon" href="/favico.ico">
 </head>
-<body class="body">
-  <header>
-    <a href="/">
-      <img src="/img/logo.png">
+<body>
+  <nav>
+    <a href="/" class="header-logo">
+      <img src="/img/header-logo.webp" alt="logo">
     </a>
-    <a href="/about/">About</a>
-    <a href="/blog/">Blog</a>
-    <a href="/contact/">Contact</a>
-  </header>
+    <span class="header-text">Johannes Olzem</span>
+    <ul>
+      <li>
+        <a href="/about/">About</a>
+      </li>
+      <li>
+        <a href="/blog/">Blog</a>
+      </li>
+      <li>
+        <a href="/contact/">Contact</a>
+      </li>
+    </ul>
+  </nav>
   <main>
-    <h1>Johannes Olzem</h1>
-    <blockquote>Less is more</blockquote>
-    <h2>Blog</h2>
+    <h1>Blog</h1>
+    <p>
+      Anything I write will go here:
+    </p>
     <ul>
       <li>
         <a href="/blog/quick-fixes/">Quick fixes</a>
       </li>
       <li>
         <a href="/blog/how-to-create-a-rust-server-on-linux/">
-          How to create a Rust server on linux.
+          23.05.23: How to create a Rust server on linux.
         </a>
       </li>
     </ul>
diff --git a/blog/quick-fixes/android-pihole-no-internet/index.html b/blog/quick-fixes/android-pihole-no-internet/index.html
index e42395d..42491b6 100644
--- a/blog/quick-fixes/android-pihole-no-internet/index.html
+++ b/blog/quick-fixes/android-pihole-no-internet/index.html
@@ -8,26 +8,31 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link rel="icon" href="/favico.ico">
 </head>
-<body class="body">
-  <header>
-    <a href="/">
-      <img src="/img/logo.png">
+<body>
+  <nav>
+    <a href="/" class="header-logo">
+      <img src="/img/header-logo.webp" alt="logo">
     </a>
-    <a href="/about/">About</a>
-    <a href="/blog/">Blog</a>
-    <a href="/contact/">Contact</a>
-  </header>
+    <span class="header-text">Johannes Olzem</span>
+    <ul>
+      <li>
+        <a href="/about/">About</a>
+      </li>
+      <li>
+        <a href="/blog/">Blog</a>
+      </li>
+      <li>
+        <a href="/contact/">Contact</a>
+      </li>
+    </ul>
+  </nav>
   <main>
-    <h1>Johannes Olzem</h1>
-    <blockquote>Less is more</blockquote>
-    <h2>
-      Connected without internet on Android after setting PiHole as DNS server.
-    </h2>
+    <h1>Quick fix</h1>
+    <h2>Connected without internet on Android after setting PiHole as DNS server.</h2>
     <p>
-      Make sure you forward both TCP and UDP of port 53 from your Docker
-      container.
+      Make sure you forward both TCP and UDP of port 53 from your Docker container.
     </p>
-  </main>
+   </main>
   <footer>
     &copy; 2021 - <script>document.write(new Date().getFullYear())</script> Johannes Olzem
     <br>
diff --git a/blog/quick-fixes/homeassistant-proxy/index.html b/blog/quick-fixes/homeassistant-proxy/index.html
index fab18a6..a978f32 100644
--- a/blog/quick-fixes/homeassistant-proxy/index.html
+++ b/blog/quick-fixes/homeassistant-proxy/index.html
@@ -8,39 +8,55 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link rel="icon" href="/favico.ico">
 </head>
-<body class="body">
-  <header>
-    <a href="/">
-      <img src="/img/logo.png">
+<body>
+  <nav>
+    <a href="/" class="header-logo">
+      <img src="/img/header-logo.webp" alt="logo">
     </a>
-    <a href="/about/">About</a>
-    <a href="/blog/">Blog</a>
-    <a href="/contact/">Contact</a>
-  </header>
+    <span class="header-text">Johannes Olzem</span>
+    <ul>
+      <li>
+        <a href="/about/">About</a>
+      </li>
+      <li>
+        <a href="/blog/">Blog</a>
+      </li>
+      <li>
+        <a href="/contact/">Contact</a>
+      </li>
+    </ul>
+  </nav>
   <main>
-    <h1>Johannes Olzem</h1>
-    <blockquote>Less is more</blockquote>
+    <h1>Quick fix</h1>
     <h2>HomeAssistant not connecting over reverse proxy</h2>
     <p>
-      Make sure you have enabled <em>Websockets Supports</em> or similar
-      functionality in your reverse proxy client.<br><br>
-      If you are getting a <em>400 Bad Request</em> error, find the
-      HomeAssistant log file and look for the following error message:<br>
-      <code>A request from a reverse proxy was received from 12.34.56.78, but
-      your HTTP integration is not set-up for reverse proxies</code><br><br>
-      In your <code>configuration.yaml</code> file, add the following lines:<br>
-      <pre>
-http:<br>
-  use_x_forwarded_for: true<br>
-  trusted_proxies:<br>
-    - 12.34.56.78 # The IP address from the error message
-      </pre>
+      Make sure you have enabled <em>Websockets Support</em> or similar
+      functionality in your reverse proxy client.
+    </p>
+    <p>
+      If you are getting a <code>400 Bad Request</code> error, find the
+      HomeAssistant log file and look for the following error message:
+    </p>
+    <p class="code">
+      A request from a reverse proxy was received from 12.34.56.78, but your
+      HTTP integration is not set-up for reverse proxies
+    </p>
+    <p>
+      In your <code>configuration.yaml</code> file, add the following lines:
+    </p>
+    <p class="code">
+    http:<br>
+    &emsp;use_x_forwarded_for: true<br>
+    &emsp;trusted_proxies:<br>
+    &emsp;&emsp;- 12.34.56.78 # The IP address from the error message
+    </p>
+    <h2>Explanation</h2>
+    <p>
+      HomeAssistant uses websockets to communicate with the browser.
     </p>
-    <h3>Explanation</h3>
     <p>
-      HomeAssistant uses websockets to communicate with the browser.<br><br>
       If you are using a reverse proxy, the IP address of the incoming
-      connection is not trusted and gets rejected by HomeAssistant.<br>
+      connection is not trusted and gets rejected by HomeAssistant.
     </p>
   </main>
   <footer>
diff --git a/blog/quick-fixes/index.html b/blog/quick-fixes/index.html
index 42103a5..13169bd 100644
--- a/blog/quick-fixes/index.html
+++ b/blog/quick-fixes/index.html
@@ -1,59 +1,61 @@
 <!DOCTYPE html>
-<html lang='en'>
+<html lang="en">
 <head>
   <title>Quick fixes - Johannes Olzem</title>
-  <meta name='description' content='Johannes Olzem's personal website'>
-  <meta charset='utf-8'>
-  <link rel='stylesheet' href='/css/style.css'>
-  <meta name='viewport' content='width=device-width, initial-scale=1.0'>
-  <link rel='icon' href='/favico.ico'>
+  <meta name="description" content="Johannes Olzem's personal website">
+  <meta charset="utf-8">
+  <link rel="stylesheet" href="/css/style.css">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link rel="icon" href="/favico.ico">
 </head>
-<body class='body'>
-  <header>
-    <a href='/'>
-      <img src='/img/logo.png'>
+<body>
+  <nav>
+    <a href="/" class="header-logo">
+      <img src="/img/header-logo.webp" alt="logo">
     </a>
-    <a href='/about/'>About</a>
-    <a href='/blog/'>Blog</a>
-    <a href='/contact/'>Contact</a>
-  </header>
+    <span class="header-text">Johannes Olzem</span>
+    <ul>
+      <li>
+        <a href="/about/">About</a>
+      </li>
+      <li>
+        <a href="/blog/">Blog</a>
+      </li>
+      <li>
+        <a href="/contact/">Contact</a>
+      </li>
+    </ul>
+  </nav>
   <main>
-    <h1>Johannes Olzem</h1>
-    <blockquote>Less is more</blockquote>
-    <h2>Quick fixes</h2>
+    <h1>Quick fixes</h1>
     <p>
-      This is a page with small problems, to which I have found easy
-      solutions, so as to not litter the blog page.
+      This is a page with small problems, to which I have found easy solutions,
+      so as to not litter the blog page.
     </p>
     <ul>
       <li>
-        <a href='/blog/quick-fixes/android-pihole-no-internet/'>
+        <a href="/blog/quick-fixes/android-pihole-no-internet/">
           Connected without internet on Android after setting PiHole as DNS
           server
         </a>
       </li>
       <li>
-        <a href='/blog/quick-fixes/homeassistant-proxy/'>
+        <a href="/blog/quick-fixes/homeassistant-proxy/">
           HomeAssistant not connecting over reverse proxy
         </a>
       </li>
       <li>
-        <a href='/blog/quick-fixes/nextcloud-file-not-supported/'>
+        <a href="/blog/quick-fixes/nextcloud-file-not-supported/">
           Nextcloud file not supported error
         </a>
       </li>
       <li>
-        <a href='/blog/quick-fixes/pacman-404/'>
-          Pacman install fails with 404
-        </a>
-      </li>
-      <li>
-        <a href='/blog/quick-fixes/proton-audio-stuttering/'>
+        <a href="/blog/quick-fixes/proton-audio-stuttering/">
           Proton / Wine audio stuttering when using qpaeq equalizer
         </a>
       </li>
       <li>
-        <a href='/blog/quick-fixes/thinkpad-r61-beep/'>
+        <a href="/blog/quick-fixes/thinkpad-r61-beep/">
           Thinkpad R61 repeated beep on startup
         </a>
       </li>
diff --git a/blog/quick-fixes/nextcloud-file-not-supported/index.html b/blog/quick-fixes/nextcloud-file-not-supported/index.html
index 942c6f9..dde22ed 100644
--- a/blog/quick-fixes/nextcloud-file-not-supported/index.html
+++ b/blog/quick-fixes/nextcloud-file-not-supported/index.html
@@ -8,27 +8,35 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link rel="icon" href="/favico.ico">
 </head>
-<body class="body">
-  <header>
-    <a href="/">
-      <img src="/img/logo.png">
+<body>
+  <nav>
+    <a href="/" class="header-logo">
+      <img src="/img/header-logo.webp" alt="logo">
     </a>
-    <a href="/about/">About</a>
-    <a href="/blog/">Blog</a>
-    <a href="/contact/">Contact</a>
-  </header>
+    <span class="header-text">Johannes Olzem</span>
+    <ul>
+      <li>
+        <a href="/about/">About</a>
+      </li>
+      <li>
+        <a href="/blog/">Blog</a>
+      </li>
+      <li>
+        <a href="/contact/">Contact</a>
+      </li>
+    </ul>
+  </nav>
   <main>
-    <h1>Johannes Olzem</h1>
-    <blockquote>Less is more</blockquote>
+    <h1>Quick fix</h1>
     <h2>Nextcloud file not supported error</h2>
-    <h3>
-      <code>
-        exif_read_data(): File not supported at
-        /var/www/html/lib/private/Metadata/Provider/ExifProvider.php#59
-      </code>
-    </h3>
-    <p>Upload over IP and port rather than over nginx proxy.</p>
-    <h3>Explanation</h3>
+    <p class="code">
+      exif_read_data(): File not supported at
+      /var/www/html/lib/private/Metadata/Provider/ExifProvider.php#59
+    </p>
+    <p>
+      Upload over IP and port rather than over nginx proxy.
+    </p>
+    <h2>Explanation</h2>
     <p>
       The request payload (the data your are trying to upload) is too large for
       nginx.
diff --git a/blog/quick-fixes/pacman-404/index.html b/blog/quick-fixes/pacman-404/index.html
deleted file mode 100644
index c27407b..0000000
--- a/blog/quick-fixes/pacman-404/index.html
+++ /dev/null
@@ -1,50 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <title>Quick fix - Johannes Olzem</title>
-  <meta name="description" content="Johannes Olzem's personal website">
-  <meta charset="utf-8">
-  <link rel="stylesheet" href="/css/style.css">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <link rel="icon" href="/favico.ico">
-</head>
-<body class="body">
-  <header>
-    <a href="/">
-      <img src="/img/logo.png">
-    </a>
-    <a href="/about/">About</a>
-    <a href="/blog/">Blog</a>
-    <a href="/contact/">Contact</a>
-  </header>
-  <main>
-    <h1>Johannes Olzem</h1>
-    <blockquote>Less is more</blockquote>
-    <h2>Pacman install fails with 404</h2>
-    <h3><code>error: failed retrieving file 'X' from Y : The requested URL
-        returned error: 404</code></h3>
-    <p>
-      Replace <code>/etc/pacman.d/mirrorlist</code> with a new file generated
-      at
-      <a href='https://archlinux.org/mirrorlist/'>
-        https://archlinux.org/mirrorlist/
-      </a>.
-      <br>
-      Then run <code>sudo pacman -Syyu</code> to update the package database
-      with the new mirrorlist. Make sure to use 2 y's, to force the new changes.
-    </p>
-    <h3>Explanation</h3>
-    <p>
-      Your mirrorlist is outdated, possibly due to the recent
-      <a href='https://archlinux.org/news/git-migration-completed/'>
-        pacman git migration
-      </a>.
-    </p>
-  </main>
-  <footer>
-    &copy; 2021 - <script>document.write(new Date().getFullYear())</script> Johannes Olzem
-    <br>
-    <small>This website is free software. You can redistribute and modify it under the terms of the GNU General Public License V3.</small>
-  </footer>
-</body>
-
diff --git a/blog/quick-fixes/proton-audio-stuttering/index.html b/blog/quick-fixes/proton-audio-stuttering/index.html
index 0a6d3ea..010a50d 100644
--- a/blog/quick-fixes/proton-audio-stuttering/index.html
+++ b/blog/quick-fixes/proton-audio-stuttering/index.html
@@ -8,20 +8,30 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link rel="icon" href="/favico.ico">
 </head>
-<body class="body">
-  <header>
-    <a href="/">
-      <img src="/img/logo.png">
+<body>
+  <nav>
+    <a href="/" class="header-logo">
+      <img src="/img/header-logo.webp" alt="logo">
     </a>
-    <a href="/about/">About</a>
-    <a href="/blog/">Blog</a>
-    <a href="/contact/">Contact</a>
-  </header>
+    <span class="header-text">Johannes Olzem</span>
+    <ul>
+      <li>
+        <a href="/about/">About</a>
+      </li>
+      <li>
+        <a href="/blog/">Blog</a>
+      </li>
+      <li>
+        <a href="/contact/">Contact</a>
+      </li>
+    </ul>
+  </nav>
   <main>
-    <h1>Johannes Olzem</h1>
-    <blockquote>Less is more</blockquote>
+    <h1>Quick fix</h1>
     <h2>Proton / Wine audio stuttering when using qpaeq equalizer</h2>
-    <p>Switch to normal audio device.</p>
+    <p>
+      Switch to normal audio device.
+    </p>
   </main>
   <footer>
     &copy; 2021 - <script>document.write(new Date().getFullYear())</script> Johannes Olzem
diff --git a/blog/quick-fixes/template.html b/blog/quick-fixes/template.html
index 07005a1..f42be1e 100644
--- a/blog/quick-fixes/template.html
+++ b/blog/quick-fixes/template.html
@@ -8,24 +8,33 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link rel="icon" href="/favico.ico">
 </head>
-<body class="body">
-  <header>
-    <a href="/">
-      <img src="/img/logo.png">
+<body>
+  <nav>
+    <a href="/" class="header-logo">
+      <img src="/img/header-logo.webp" alt="logo">
     </a>
-    <a href="/about/">About</a>
-    <a href="/blog/">Blog</a>
-    <a href="/contact/">Contact</a>
-  </header>
+    <span class="header-text">Johannes Olzem</span>
+    <ul>
+      <li>
+        <a href="/about/">About</a>
+      </li>
+      <li>
+        <a href="/blog/">Blog</a>
+      </li>
+      <li>
+        <a href="/contact/">Contact</a>
+      </li>
+    </ul>
+  </nav>
   <main>
-    <h1>Johannes Olzem</h1>
-    <blockquote>Less is more</blockquote>
-    <h2>Title</h2>
-    <h3>Problem</h3>
-    <p>Fix</p>
-    <h3>Explanation</h3>
+    <h1>Quick fix</h1>
+    <h2>::Title::</h2>
     <p>
-      Explanation
+      ::Solution
+    </p>
+    <h2>Explanation</h2>
+    <p>
+      ::Explanation
     </p>
   </main>
   <footer>
diff --git a/blog/quick-fixes/thinkpad-r61-beep/index.html b/blog/quick-fixes/thinkpad-r61-beep/index.html
index 9a479d0..e9baa1a 100644
--- a/blog/quick-fixes/thinkpad-r61-beep/index.html
+++ b/blog/quick-fixes/thinkpad-r61-beep/index.html
@@ -8,22 +8,34 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link rel="icon" href="/favico.ico">
 </head>
-<body class="body">
-  <header>
-    <a href="/">
-      <img src="/img/logo.png">
+<body>
+  <nav>
+    <a href="/" class="header-logo">
+      <img src="/img/header-logo.webp" alt="logo">
     </a>
-    <a href="/about/">About</a>
-    <a href="/blog/">Blog</a>
-    <a href="/contact/">Contact</a>
-  </header>
+    <span class="header-text">Johannes Olzem</span>
+    <ul>
+      <li>
+        <a href="/about/">About</a>
+      </li>
+      <li>
+        <a href="/blog/">Blog</a>
+      </li>
+      <li>
+        <a href="/contact/">Contact</a>
+      </li>
+    </ul>
+  </nav>
   <main>
-    <h1>Johannes Olzem</h1>
-    <blockquote>Less is more</blockquote>
+    <h1>Quick fix</h1>
     <h2>Thinkpad R61 repeated beep on startup</h2>
-    <h3>(or any older ThinkPad model, I believe)</h3>
-    <p>Check keyboard connector / swap out keyboard.</p>
-    <h3>Explanation</h3>
+    <p>
+      (or any older ThinkPad model, I believe)
+    </p>
+    <p>
+      Check keyboard connector / swap out keyboard.
+    </p>
+    <h2>Explanation</h2>
     <p>
       No keyboard detected on bootup.
     </p>
diff --git a/blog/template.html b/blog/template.html
deleted file mode 100644
index 175a81e..0000000
--- a/blog/template.html
+++ /dev/null
@@ -1,36 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <title>{{ Title }} - Johannes Olzem</title>
-  <meta name="description" content="Johannes Olzem's personal website">
-  <meta charset="utf-8">
-  <link rel="stylesheet" href="/css/style.css">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <link rel="icon" href="/favico.ico">
-</head>
-<body class="body">
-  <header>
-    <a href="/">
-      <img src="/img/logo.png">
-    </a>
-    <a href="/about/">About</a>
-    <a href="/blog/">Blog</a>
-    <a href="/contact/">Contact</a>
-  </header>
-  <main class="blog-entry">
-    <h1>Johannes Olzem</h1>
-    <blockquote>Less is more</blockquote>
-    <h2>Title</h2>
-    <div class="author">Johannes Olzem</div>
-    <div class="date"></div>
-    <p>
-
-    </p>
-  </main>
-  <footer>
-    &copy; 2021 - <script>document.write(new Date().getFullYear())</script> Johannes Olzem
-    <br>
-    <small>This website is free software. You can redistribute and modify it under the terms of the GNU General Public License V3.</small>
-  </footer>
-</body>
-
diff --git a/contact/index.html b/contact/index.html
index c3f3924..0e9e89e 100644
--- a/contact/index.html
+++ b/contact/index.html
@@ -2,29 +2,45 @@
 <html lang="en">
 <head>
   <title>Contact - Johannes Olzem</title>
-  <meta name="description" content="Johannes Olzem"s personal website">
+  <meta name="description" content="Johannes Olzem's personal website">
   <meta charset="utf-8">
   <link rel="stylesheet" href="/css/style.css">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link rel="icon" href="/favico.ico">
 </head>
-<body class="body">
-  <header>
-    <a href="/">
-      <img src="/img/logo.png">
+<body>
+  <nav>
+    <a href="/" class="header-logo">
+      <img src="/img/header-logo.webp" alt="logo">
     </a>
-    <a href="/about/">About</a>
-    <a href="/blog/">Blog</a>
-    <a href="/contact/">Contact</a>
-  </header>
+    <span class="header-text">Johannes Olzem</span>
+    <ul>
+      <li>
+        <a href="/about/">About</a>
+      </li>
+      <li>
+        <a href="/blog/">Blog</a>
+      </li>
+      <li>
+        <a href="/contact/">Contact</a>
+      </li>
+    </ul>
+  </nav>
   <main>
-    <h1>Johannes Olzem</h1>
-    <blockquote>Less is more</blockquote>
-    <h2>Contact</h2>
+    <h1>Contact</h1>
     <p>
-      Email me: <a href="mailto:johannes@olzem.org">johannes@olzem.org</a>
-      <br>
-      Find me on <a href="https://github.com/jolzem">Github</a>
+      If you want to get in touch with me you can do so via e-mail at:
+      <a href="mailto:johannes@olzem.org">johannes@olzem.org</a>
+    </p>
+    <p>
+      Additionally we can also connect via
+      <a href="https://github.com/jolzem">GitHub</a>.
+    </p>
+    <p>
+      Also feel free to visit my other site
+      <a href="https://keebparts.eu/">keepbarts.eu</a> where I listed a few
+      keyboard part stores within the EU to safely shop without worrying about
+      customs or import taxes.
     </p>
   </main>
   <footer>
diff --git a/css/fonts/DM_Mono/DMMono-Regular.ttf b/css/fonts/DM_Mono/DMMono-Regular.ttf
new file mode 100644
index 0000000..7efe813
Binary files /dev/null and b/css/fonts/DM_Mono/DMMono-Regular.ttf differ
diff --git a/css/fonts/DM_Sans/DMSans-Italic.ttf b/css/fonts/DM_Sans/DMSans-Italic.ttf
new file mode 100644
index 0000000..b57690a
Binary files /dev/null and b/css/fonts/DM_Sans/DMSans-Italic.ttf differ
diff --git a/css/fonts/DM_Sans/DMSans-Regular.ttf b/css/fonts/DM_Sans/DMSans-Regular.ttf
new file mode 100644
index 0000000..94c9e1c
Binary files /dev/null and b/css/fonts/DM_Sans/DMSans-Regular.ttf differ
diff --git a/css/style.css b/css/style.css
index 9f74d01..356dfc2 100644
--- a/css/style.css
+++ b/css/style.css
@@ -1,95 +1,239 @@
+@font-face {
+  font-family: "DM Sans";
+  src: url("/css/fonts/DM_Sans/DMSans-Regular.ttf");
+}
+
+@font-face {
+  font-family: "DM Sans";
+  src: url("/css/fonts/DM_Sans/DMSans-Italic.ttf");
+  font-style: italic;
+}
+
+@font-face {
+  font-family: "DM Mono";
+  src: url("/css/fonts/DM_Mono/DMMono-Regular.ttf");
+}
+
 :root {
-  --bg: #152528;
-  --dark-bg: #0f1c1e;
-  --txt: #e6eaea;
-  --header-txt: #e85c51;
-  --sec-header-txt: #ff8349;
-  --link-txt: #5a93aa;
+  --black: #14110F;
+  --white: #D5DCF9;
+
+  --green-bg: #AABD8C;
+  --beige-bg: #E9E3B4;
+  --orange-bg: #F39B6D;
+  --gray-bg: #788896;
+
+  --beige-fg: #654236;
+}
+
+::selection {
+  background-color: var(--orange-bg);
+  color: var(--black);
 }
 
 body {
-  background: var(--bg);
-  color: var(--txt);
-  font-family: 'Consolas', 'Courier', monospace;
-  font-size: 130%
+  background-color: var(--beige-bg);
+  font-family: "DM Sans", "Helvetica", "Arial", sans-serif;
+  margin: 0 auto;
+  font-size: 130%;
 }
 
-header {
-  min-height: 52pt;
+nav {
+  padding: 2rem;
+  width: calc(100% - 4rem);
+  height: 5rem;
   display: flex;
   align-items: center;
-  max-width: 95vw;
+  justify-content: space-between;
+  background: var(--gray-bg);
+}
+
+.landing nav {
+  position: fixed;
+  background: none;
+}
+
+nav li {
+  display: inline;
+  white-space: nowrap;
+  margin: 0 .5rem;
+  padding: .5rem;
+}
+
+@media (max-width: 465px) {
+  nav li {
+    padding: .5rem;
+    display: block;
+  }
+}
+
+.header-text {
+  display: inline-block;
+  opacity: 0;
+  white-space: nowrap;
+  font-size: 1.75rem;
+  margin: 0 1.75rem;
+  overflow: hidden;
+  transition: opacity calc(.8s * 1.5);
+}
+
+.header-logo:hover + .header-text {
+  opacity: 1;
+}
+
+/* Don't display header text to avoid nav collapsing */
+@media (max-width: 740px) {
+  .header-text {
+    display: none;
+  }
+}
+
+nav a {
+  text-decoration-color: rgba(0,0,0,0);
+  color: var(--black);
+  transition: .4s;
+  user-select: none;
+}
+
+nav a:hover {
+  text-decoration: underline;
+  text-decoration-color: var(--black);
+}
+
+.landing nav .header-text {
+  display: none;
+}
+
+body:not(.landing) main {
+  min-height: calc(100vh - 11rem);
+  max-width: 60vw;
   margin: 0 auto;
 }
 
-header a {
-  display: inline-block;
-  padding: 4pt 12pt;
+.landing-grid {
+  display: grid;
+  width: 100%;
+  min-height: 100vh;
+
+  grid-template-columns: 1fr 1fr;
+  grid-template-rows: 1fr 1fr;
 }
 
-header img {
-  height: 24pt;
+
+.tl {
+  background: var(--beige-bg);
 }
 
-blockquote {
+.tr {
+  background: var(--green-bg);
+  display: flex;
+  align-items: flex-end;
+  font-size: 3rem;
+  user-select: none;
+}
+
+.bl {
+  background: var(--orange-bg);
+  padding: .5rem;
+  font-size: 1.5rem;
+  display: flex;
+  justify-content: flex-end;
+  user-select: none;
+}
+
+.br {
+  background: var(--gray-bg);
+  display: flex;
+  align-items: flex-end;
+}
+
+@keyframes floatChev {
+  0%   { transform: translate(-23px, -5px); }
+  50%  { transform: translate(-23px, 5px); }
+  100% { transform: translate(-23px, -5px); }
+}
+
+.br span {
+  font-size: 46px;
+  animation: floatChev 3s ease-in-out infinite;
+  user-select: none;
+}
+
+.landing-lower {
+  width: 100%;
+  min-height: 56vh;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+}
+
+.ll {
+  background: var(--green-bg);
+  text-align: justify;
+  padding: 0 2rem;
+}
+
+@media (min-width: 790px) {
+  .ll {
+    padding-left: 20vw;
+  }
+}
+
+.ll h2 {
+  text-align: right;
+}
+
+.landing h2 {
+  font-size: 3rem;
+  font-weight: 400;
   font-style: italic;
-  padding-bottom: 24pt;
+  margin: 0;
 }
 
-main {
-  max-width: min(800px, 80vw);
-  margin: 0 auto;
-  padding-bottom: 24pt;
-}
-
-.cowsay-wrapper {
-  min-width: 100%;
-  display: flex;
-  justify-content: center;
-}
-
-.cowsay {
-  font-family: monospace;
-  text-align: left;
-  white-space: pre;
-  max-width: fit-content;
-  display: inline-block;
-}
-
-.cards {
-  display: flex;
-  justify-content: space-evenly;
-  margin-bottom:48pt;
-}
-
-.portrait {
-  max-width: min(220px, 60vw);
+.lr {
+  background: var(--beige-bg);
+  padding-left: 2rem;
+  padding-right: 10vw;
 }
 
 .skills {
-  float: left !important;
-  width: 100%;
-  margin-bottom: 24pt;
+  width: 50%;
+  height: 17rem;
 }
 
-/* float right when on desktop */
-@media (min-width: 500px) {
-  .portrait {
-    float: right;
-    height: 300px;
-    margin-left: 2rem;
+
+
+@media (max-width: 580px) {
+  .landing-grid {
+    display: block;
+    width: 100%;
+    height: 100vh;
+  }
+
+  .landing {
+    min-height: calc(100vh/4);
+  }
+
+  .br {
+    justify-content: center;
+  }
+
+  .br span {
+    transform: translate(0, -2rem) !important;
+  }
+
+  .landing-lower {
+    display: block;
+  }
+
+  .ll {
+    padding: 0 1rem;
   }
 
   .skills {
-    width: 50%;
-    height: 14rem;
+    width: 100%;
   }
 }
 
-.blog-entry p {
-  margin: 0;
-}
-
 .author {
   float: left;
   max-width: 400px;
@@ -103,41 +247,28 @@ main {
 }
 
 .code {
-  background: var(--dark-bg);
+  background: var(--green-bg);
+  font-family: "DM Mono", monospace;
   padding: 1rem;
   border-radius: 1rem;
 }
 
+code {
+  font-family: "DM Mono", monospace;
+  font-size: 90%;
+}
+
 .cmd::before {
   content: '$ ';
 }
 
 footer {
   width: 100%;
+  height: 4rem;
   text-align: center;
-}
-
-h1 {
-  color: var(--header-txt);
-}
-
-h2, h3, h4, h5, h6 {
-  color: var(--sec-header-txt);
-}
-
-p {
-  margin: 16pt;
-  display: block;
-  text-align: justify;
-  line-height: 1.25;
+  background: var(--green-bg);
 }
 
 a {
-  color: var(--link-txt);
-  text-decoration-color: rgba(0,0,0,0);
-  transition: text-decoration .3s;
-}
-
-a:hover, a:active {
-  text-decoration-color: var(--link-txt);
+  color: var(--beige-fg);
 }
diff --git a/empty.html b/empty.html
deleted file mode 100644
index dacbc9b..0000000
--- a/empty.html
+++ /dev/null
@@ -1,32 +0,0 @@
-<!DOCTYPE html>
-<html lang='en'>
-<head>
-  <title> - Johannes Olzem</title>
-  <meta name='description' content='Johannes Olzem's personal website'>
-  <meta charset='utf-8'>
-  <link rel='stylesheet' href='/css/style.css'>
-  <meta name='viewport' content='width=device-width, initial-scale=1.0'>
-  <link rel='icon' href='/favico.ico'>
-</head>
-<body class='body'>
-  <header>
-    <a href='/'>
-      <img src='/img/logo.png'>
-    </a>
-    <a href='/about/'>About</a>
-    <a href='/blog/'>Blog</a>
-    <a href='/contact/'>Contact</a>
-  </header>
-  <main>
-    <h1>Johannes Olzem</h1>
-    <blockquote>Less is more</blockquote>
-    <h2></h2>
-
-  </main>
-  <footer>
-    &copy; 2021 - <script>document.write(new Date().getFullYear())</script> Johannes Olzem
-    <br>
-    <small>This website is free software. You can redistribute and modify it under the terms of the GNU General Public License V3.</small>
-  </footer>
-</body>
-
diff --git a/favico.ico b/favico.ico
index 591f8f1..ed1e942 100644
Binary files a/favico.ico and b/favico.ico differ
diff --git a/favicon-16x16.png b/favicon-16x16.png
new file mode 100644
index 0000000..a8d9416
Binary files /dev/null and b/favicon-16x16.png differ
diff --git a/favicon-32x32.png b/favicon-32x32.png
new file mode 100644
index 0000000..0b4b556
Binary files /dev/null and b/favicon-32x32.png differ
diff --git a/img/bestvieweddesktop.gif b/img/bestvieweddesktop.gif
deleted file mode 100644
index 06620c0..0000000
Binary files a/img/bestvieweddesktop.gif and /dev/null differ
diff --git a/img/header-logo.webp b/img/header-logo.webp
new file mode 100644
index 0000000..5f87ee1
Binary files /dev/null and b/img/header-logo.webp differ
diff --git a/img/internetprivacy.gif b/img/internetprivacy.gif
deleted file mode 100644
index 4f371b8..0000000
Binary files a/img/internetprivacy.gif and /dev/null differ
diff --git a/img/linux_powered.gif b/img/linux_powered.gif
deleted file mode 100644
index 2dbe456..0000000
Binary files a/img/linux_powered.gif and /dev/null differ
diff --git a/img/logo-trans.png b/img/logo-trans.png
new file mode 100644
index 0000000..f45685d
Binary files /dev/null and b/img/logo-trans.png differ
diff --git a/img/logo.png b/img/logo.png
index 9938463..f621c08 100644
Binary files a/img/logo.png and b/img/logo.png differ
diff --git a/img/nocookie.gif b/img/nocookie.gif
deleted file mode 100644
index c0dd092..0000000
Binary files a/img/nocookie.gif and /dev/null differ
diff --git a/img/smile.gif b/img/smile.gif
deleted file mode 100644
index cf7f928..0000000
Binary files a/img/smile.gif and /dev/null differ
diff --git a/img/vim.gif b/img/vim.gif
deleted file mode 100644
index 7a00d7f..0000000
Binary files a/img/vim.gif and /dev/null differ
diff --git a/index.html b/index.html
index 9b3e1a8..900ae77 100644
--- a/index.html
+++ b/index.html
@@ -2,65 +2,70 @@
 <html lang="en">
 <head>
   <title>Johannes Olzem</title>
-  <meta name="description" content="Johannes Olzem"s personal website">
+  <meta name="description" content="Johannes Olzem's personal website">
   <meta charset="utf-8">
   <link rel="stylesheet" href="/css/style.css">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link rel="icon" href="/favico.ico">
+  <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
+  <link rel="manifest" href="/site.webmanifest">
 </head>
-<body class="body">
-  <header>
-    <a href="/">
-      <img src="/img/logo.png">
+<body class="landing">
+  <nav>
+    <a href="/" class="header-logo">
+      <img src="/img/header-logo.webp" alt="logo">
     </a>
-    <a href="/about/">About</a>
-    <a href="/blog/">Blog</a>
-    <a href="/contact/">Contact</a>
-  </header>
+    <span class="header-text">Johannes Olzem</span>
+    <ul>
+      <li>
+        <a href="/about/">About</a>
+      </li>
+      <li>
+        <a href="/blog/">Blog</a>
+      </li>
+      <li>
+        <a href="/contact/">Contact</a>
+      </li>
+    </ul>
+  </nav>
   <main>
-    <h1>Johannes Olzem</h1>
-    <blockquote>Less is more</blockquote>
-    <h2>Welcome to my webspace</h2>
-    <p>
-      I'm Johannes, a computer enthusiast from Germany. On this website I
-      maintain my <a href="blog">blog</a> about various topics and you can
-      learn more about me <a href="/about/">here.</a> If you want to get in
-      touch with me, you can do that <a href="/contact/">here</a>.
-    </p>
-    <h2>Why run this website?</h2>
-    <p>
-      The internet used to be a place of personal expression, not just
-      corporate dominance. I believe in keeping that spirit alive.
-      <br>
-      This site is a small step towards a more independent web.
-      It also allows me to share my experiences, how I do things, and other
-      stuff that I want to put out into the world.
-      <br>
-      Please feel free to explore every crevasse of this site! Don't know where
-      to start? Try the <a href="/about/">about</a> page, to learn more about
-      who I am.
-    </p>
-    <br>
-    <div class="cowsay-wrapper">
-      <p class="cowsay">
-_____________________________
-&#60; Have fun on this website! &#62;
------------------------------
-    \   ^__^
-     \  (oo)\_______
-        (__)\       )\/\
-            ||----w |
-            ||     ||
-      </p>
+    <div class="landing-grid">
+      <div class="landing tl"></div>
+      <div class="landing tr">Johannes Olzem</div>
+      <div class="landing bl">less is more</div>
+      <div class="landing br"><span>&#8964;</span></div>
     </div>
-    <br>
-    <div class="cards">
-      <img src="/img/linux_powered.gif" alt="Linux powered">
-      <img src="/img/vim.gif" alt="vim">
-      <img src="/img/nocookie.gif" alt="No Cookies">
-      <img src="/img/bestvieweddesktop.gif" alt="Best viewed with desktop">
-      <img src="/img/internetprivacy.gif" alt="Internet privacy now!">
-      <img src="/img/smile.gif" alt="Have a smile">
+    <div class="landing-lower">
+      <div class="landing ll">
+        <h2>Welcome</h2>
+        <p>
+          Welcome to my Webspace!
+          I'm Johannes, a computer enthusiast from Germany. On this website I
+          maintain my
+          <a href="/blog/">blog</a> about various topics and you can learn more
+          about me
+          <a href="/about">here.</a> If you want to get in touch with me, feel
+          free to do that
+          <a href="/contact/">here.</a>
+        </p>
+
+      </div>
+      <div class="landing lr">
+        <h2>Why run this website?</h2>
+        <p>
+          The internet used to be a place of personal expression, not just
+          corporate dominance. I believe in keeping that spirit alive.<br>
+          This site is a small step towards a more independent web. It also
+          allows me to share my experiences, how I do things, and other stuff
+          that I want to put out into the world.<br>
+          Please feel free to explore every crevasse of this site! Don't know
+          where to start? Try the
+          <a href="/about/">about</a> page, to learn more about who I am.
+
+        </p>
+      </div>
     </div>
   </main>
   <footer>
diff --git a/site.webmanifest b/site.webmanifest
new file mode 100644
index 0000000..c3bd35d
--- /dev/null
+++ b/site.webmanifest
@@ -0,0 +1 @@
+{"name":"Johannes Olzem's personal website","short_name":"Johannes Olzem","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#AABD8C","background_color":"#AABD8C","display":"standalone"}
