diff --git a/.eleventy.js b/.eleventy.js
index bc848ba..98c2f18 100644
--- a/.eleventy.js
+++ b/.eleventy.js
@@ -23,7 +23,7 @@ module.exports = function (eleventyConfig) {
   eleventyConfig.addFilter("createExcerpt", (post) => {
     // This removes "<" and ">" from the output
     const content = post.replace(/(<([^>]+)>)/gi, "")
-    return content.substr(0, content.lastIndexOf(" ", 180)) + "..."
+    return content.substr(0, content.lastIndexOf(" ", 450)) + "..."
   })
 
   eleventyConfig.addFilter("stringify", (object) => {
diff --git a/package.json b/package.json
index 495ad7e..3812e10 100644
--- a/package.json
+++ b/package.json
@@ -7,7 +7,7 @@
     "start": "npm run dev",
     "dev": "npx @11ty/eleventy --serve",
     "build": "npx @11ty/eleventy",
-    "deploy": "scp -r build/ server:/tmp/ && ssh server 'sudo cp /tmp/build/* ~/www/luca-junge.de/"
+    "deploy": "scp -r build/ server:/tmp/ && ssh server 'sudo cp -r /tmp/build/* ~/www/luca-junge.de/"
   },
   "keywords": [],
   "author": "Luca Junge",
diff --git a/src/_assets/fonts/CaveatVariable.ttf b/src/_assets/fonts/CaveatVariable.ttf
deleted file mode 100644
index 0ae4d99..0000000
Binary files a/src/_assets/fonts/CaveatVariable.ttf and /dev/null differ
diff --git a/src/_assets/fonts/InterVariable.ttf b/src/_assets/fonts/InterVariable.ttf
deleted file mode 100644
index 2d4b470..0000000
Binary files a/src/_assets/fonts/InterVariable.ttf and /dev/null differ
diff --git a/src/_assets/fonts/QuicksandVariable.ttf b/src/_assets/fonts/QuicksandVariable.ttf
new file mode 100644
index 0000000..bd332b6
Binary files /dev/null and b/src/_assets/fonts/QuicksandVariable.ttf differ
diff --git a/src/_includes/post-list.njk b/src/_includes/overview.njk
similarity index 64%
rename from src/_includes/post-list.njk
rename to src/_includes/overview.njk
index b2e5251..10716ab 100644
--- a/src/_includes/post-list.njk
+++ b/src/_includes/overview.njk
@@ -12,23 +12,13 @@
     {% include "partials/header.njk" %}
 
     <aside>
-
-      <a onclick="history.back()">
-        <i class="fa fa-solid fa-angle-left"></i>Zurück
-      </a>
-
-      {% if header %}
-        <div>
-          <img src="{{ header }}" alt="{{ title }}">
-        </div>
-      {% endif %}
-
-      <h1>{{ title }}</h1>
+      <h1>{{title}}</h1>
     </aside>
 
-    <div id="content">
+    <main>
       {{ content | safe }}
-    </div>
+    </main>
+
     {% include "partials/footer.njk" %}
   </body>
 </html>
diff --git a/src/_includes/post.njk b/src/_includes/post.njk
index d2a0190..6b1e35a 100644
--- a/src/_includes/post.njk
+++ b/src/_includes/post.njk
@@ -13,8 +13,8 @@
 
     <aside>
 
-      <a onclick="history.back()">
-        <i class="fa fa-solid fa-angle-left"></i>Zurück
+      <a class="button" onclick="history.back()">
+        <i class="fa fa-solid fa-angle-left"></i> Zurück
       </a>
 
       {% if header %}
diff --git a/src/css/fonts.css b/src/css/fonts.css
index eace6e7..3048efe 100644
--- a/src/css/fonts.css
+++ b/src/css/fonts.css
@@ -1,9 +1,4 @@
 @font-face {
-  font-family: "Inter";
-  src: url("/assets/InterVariable.ttf");
-}
-
-@font-face {
-  font-family: "Caveat";
-  src: url("/assets/CaveatVariable.ttf");
+  font-family: "Quicksand";
+  src: url("/assets/fonts/QuicksandVariable.ttf");
 }
diff --git a/src/css/footer.css b/src/css/footer.css
index 5fb0c1d..c87ea42 100644
--- a/src/css/footer.css
+++ b/src/css/footer.css
@@ -1,5 +1,5 @@
 #main-footer {
-  font-family: "Caveat";
+  background-color: var(--dark-background-color);
   padding: 0.75rem 1rem 0.75rem 1rem;
   font-weight: bold;
   display: flex;
diff --git a/src/css/header.css b/src/css/header.css
index 8b83826..5de7fe0 100644
--- a/src/css/header.css
+++ b/src/css/header.css
@@ -1,5 +1,5 @@
 #main-header {
-  font-family: "Caveat";
+  background-color: var(--dark-background-color);
   font-size: 20pt;
   padding: 18px;
 }
@@ -11,7 +11,7 @@
 
 #main-header ul {
   display: flex;
-  gap: 10px;
+  gap: 20px;
   flex-direction: row;
   justify-content: center;
   align-items: baseline;
@@ -26,7 +26,9 @@
   padding: 0px;
   text-decoration-skip-ink: none;
   text-underline-offset: 8px;
-  text-decoration: var(--text-color) wavy underline;
+  text-decoration-thickness: 8px;
+  text-decoration: underline;
+  text-decoration-color: var(--accent);
 }
 
 /* Breakpoints */
diff --git a/src/css/post.css b/src/css/post.css
deleted file mode 100644
index 52de351..0000000
--- a/src/css/post.css
+++ /dev/null
@@ -1,63 +0,0 @@
-article header h1 {
-  font-weight: bold;
-  font-size: 1.5rem;
-  margin: 0px;
-}
-
-article header h1 a {
-  display: block;
-  text-decoration: none;
-}
-
-article header time {
-  display: block;
-  padding: 4px 1px;
-}
-
-article > p {
-  margin: 0px;
-  padding: 0px;
-}
-
-article > a {
-  display: inline-block;
-  color: var(--accent-red);
-  text-decoration-thickness: 3px;
-  margin-bottom: 3px;
-  padding-top: 8px;
-}
-
-ul > li:not(:last-child) {
-  margin-bottom: 20px;
-}
-
-/* Aside Header */
-
-aside a {
-  background-color: var(--accent-yellow);
-  color: var(--accent-red);
-  cursor: pointer;
-  display: inline-block;
-  padding: 8px;
-  font-weight: bold;
-  border-radius: 8px;
-  margin-bottom: 8px;
-}
-
-aside a i {
-  margin-right: 4px;
-}
-
-aside {
-  padding: 0px 16px;
-}
-
-aside div > img {
-  display: block;
-  width: 100%;
-  border-radius: 8px;
-}
-
-aside h1 {
-  margin: 0em 0px 0.2em 0px;
-}
diff --git a/src/css/style.css b/src/css/style.css
index 9066fab..a9492d7 100644
--- a/src/css/style.css
+++ b/src/css/style.css
@@ -1,3 +1,4 @@
+@import url("./fonts.css");
 @import url("./normalize.css");
 @import url("./variables.css");
 @import url("./header.css");
@@ -5,17 +6,17 @@
 
 html,
 body {
-  font-family: "Inter", sans-serif;
-  background-color: antiquewhite;
+  font-family: "Quicksand", sans-serif;
+  background-color: var(--background-color);
   color: var(--text-color);
 }
 
 h1,
 h2,
 h3 {
-  font-family: "Caveat", sans-serif;
+  font-family: "Quicksand", sans-serif;
   font-weight: bold;
-  margin-bottom: 4px;
+  margin-bottom: 8px;
 }
 
 h1 > a,
@@ -26,6 +27,35 @@ article > a {
   color: var(--text-color);
 }
 
+h1::after,
+h2::after,
+h3::after {
+  display: block;
+  width: 100px;
+  height: 8px;
+  margin-top: 6px;
+  margin-bottom: 0px;
+  content: "";
+  border-radius: var(--border-radius);
+  background-color: var(--accent);
+}
+
+aside {
+  padding: 16px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+aside > :not(a) {
+  flex: 1;
+  width: 768px;
+}
+
+aside a {
+  align-self: center;
+}
+
 main {
   padding: 16px;
   display: flex;
@@ -38,8 +68,19 @@ main > * {
   width: 768px;
 }
 
+.button {
+  cursor: pointer;
+  display: inline-block;
+  font-weight: bold;
+  border-radius: var(--border-radius);
+  padding: 8px;
+  color: var(--text-color);
+  background-color: var(--accent);
+}
+
 @media (max-width: 400px) {
-  main > * {
+  main > *,
+  aside {
     width: 100%;
   }
 }
diff --git a/src/css/variables.css b/src/css/variables.css
index ffde615..a64f3b0 100644
--- a/src/css/variables.css
+++ b/src/css/variables.css
@@ -2,9 +2,10 @@
   --white: #ffffff;
   --black: #000000;
 
-  --background-color: #e0e2db;
-  --text-color: #191716;
-  --accent-yellow: #e6af2e;
-  --accent-blue: #3d348b;
-  --accent-red: #b31e57;
+  --background-color: #393e46;
+  --dark-background-color: #2d3138;
+  --text-color: #eeeeee;
+  --accent: #00adb5;
+
+  --border-radius: 8px;
 }
diff --git a/src/examples/examples.json b/src/examples/examples.json
new file mode 100644
index 0000000..85eaf9a
--- /dev/null
+++ b/src/examples/examples.json
@@ -0,0 +1,7 @@
+{
+  "layout": "post.njk",
+  "title": "Unnamed",
+  "tags": "example",
+  "author": "Luca Junge",
+  "date": "Created"
+}
diff --git a/src/examples/examples.njk b/src/examples/examples.njk
new file mode 100644
index 0000000..25a0aa6
--- /dev/null
+++ b/src/examples/examples.njk
@@ -0,0 +1,23 @@
+---
+title: Alle Beispiele
+layout: overview.njk
+eleventyExcludeFromCollections: true
+---
+
+{%- for post in collections.example -%}
+  <article>
+    <header>
+      <h1>
+        <a href="{{post.url}}">{{post.data.title}}</a>
+      </h1>
+
+      <time>{{post.date | formatDate }}</time>
+    </header>
+
+    <p>{{post.templateContent | createExcerpt}}</p>
+
+    <a class="button" href="{{post.url}}">
+        Weiterlesen
+    </a>
+  </article>
+{%- endfor -%}
diff --git a/src/examples/test-example/index.md b/src/examples/test-example/index.md
new file mode 100644
index 0000000..682eee4
--- /dev/null
+++ b/src/examples/test-example/index.md
@@ -0,0 +1,7 @@
+---
+title: Test Example
+---
+
+# Hello World
+
+This is a test
diff --git a/src/index/index.njk b/src/index/index.njk
index 40865a8..88c2381 100644
--- a/src/index/index.njk
+++ b/src/index/index.njk
@@ -16,7 +16,7 @@ permalink: /index.html
 
     <p>{{post.templateContent | createExcerpt}}</p>
 
-    <a href="{{post.url}}">
+    <a class="button" href="{{post.url}}">
         Weiterlesen
     </a>
   </article>
diff --git a/src/posts/posts.njk b/src/posts/posts.njk
index 3cf125c..69b29b5 100644
--- a/src/posts/posts.njk
+++ b/src/posts/posts.njk
@@ -1,26 +1,23 @@
 ---
 title: Alle Posts
-layout: post-list.njk
+layout: overview.njk
 eleventyExcludeFromCollections: true
 ---
 
-<ul>
-  {%- for post in collections.post -%}
-    <li>
-      <article>
-        <header>
-          <h1>
-            <a href="{{post.url}}">{{post.data.title}}</a>
-          </h1>
+{%- for post in collections.post -%}
+  <article>
+    <header>
+      <h1>
+        <a href="{{post.url}}">{{post.data.title}}</a>
+      </h1>
 
-          <time>{{post.date | formatDate }}</time>
-        </header>
+      <time>{{post.date | formatDate }}</time>
+    </header>
 
-        <p>{{post.templateContent | createExcerpt}}</p>
+    <p>{{post.templateContent | createExcerpt}}</p>
 
-        <a href="{{post.url}}">
-        Weiterlesen</a>
-      </article>
-    </li>
-  {%- endfor -%}
-</ul>
+    <a class="button" href="{{post.url}}">
+        Weiterlesen
+    </a>
+  </article>
+{%- endfor -%}
diff --git a/src/posts/test/index.md b/src/posts/test/index.md
index b35f897..4535e21 100644
--- a/src/posts/test/index.md
+++ b/src/posts/test/index.md
@@ -1,4 +1,4 @@
 ---
 title: This is a test post with a very long title lorem ipsum dolor sit amet
-draft: false
+draft: true
 ---
diff --git a/src/tutorials/test-tutorial/index.md b/src/tutorials/test-tutorial/index.md
new file mode 100644
index 0000000..83e5fbe
--- /dev/null
+++ b/src/tutorials/test-tutorial/index.md
@@ -0,0 +1,7 @@
+---
+title: Test Tutorial
+---
+
+# Hello World
+
+This is a test
diff --git a/src/tutorials/tutorials.json b/src/tutorials/tutorials.json
new file mode 100644
index 0000000..cb7c5e9
--- /dev/null
+++ b/src/tutorials/tutorials.json
@@ -0,0 +1,7 @@
+{
+  "layout": "post.njk",
+  "title": "Unnamed",
+  "tags": "tutorial",
+  "author": "Luca Junge",
+  "date": "Created"
+}
diff --git a/src/tutorials/tutorials.njk b/src/tutorials/tutorials.njk
new file mode 100644
index 0000000..af9ff44
--- /dev/null
+++ b/src/tutorials/tutorials.njk
@@ -0,0 +1,23 @@
+---
+title: Alle Tutorials
+layout: overview.njk
+eleventyExcludeFromCollections: true
+---
+
+{%- for post in collections.tutorial -%}
+  <article>
+    <header>
+      <h1>
+        <a href="{{post.url}}">{{post.data.title}}</a>
+      </h1>
+
+      <time>{{post.date | formatDate }}</time>
+    </header>
+
+    <p>{{post.templateContent | createExcerpt}}</p>
+
+    <a class="button" href="{{post.url}}">
+        Weiterlesen
+    </a>
+  </article>
+{%- endfor -%}