diff --git a/src/_includes/overview.njk b/src/_includes/overview.njk
index 6b17897..ecc4b72 100644
--- a/src/_includes/overview.njk
+++ b/src/_includes/overview.njk
@@ -11,7 +11,7 @@
   <body style="background-image: linear-gradient(rgba(0, 0, 0, 0.8), rgba(50, 50, 50, 0.9)), url('/assets/images/blog_mobile.jpg');">
     {% include "partials/header.njk" %}
 
-    <aside style="margin-top: 70px;">
+    <aside class="flex" style="margin-top: 70px;">
       <h1>{{title}}</h1>
     </aside>
 
diff --git a/src/_includes/post.njk b/src/_includes/post.njk
index 6b1e35a..9211983 100644
--- a/src/_includes/post.njk
+++ b/src/_includes/post.njk
@@ -10,29 +10,28 @@
   </head>
   <body>
     {% include "partials/header.njk" %}
+    <div class="post">
+      <aside>
+        <a class="button" onclick="history.back()">
+          <i class="fa fa-solid fa-angle-left"></i> Zurück
+        </a>
 
-    <aside>
+        {% if header %}
+          <div>
+            <img src="{{ header }}" alt="{{ title }}">
+          </div>
+        {% endif %}
 
-      <a class="button" 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>
-      <span>{{ page.date | formatDate }}</span>
-    </aside>
-
-    <main>
-      <article>
-        {{ content | safe }}
-      </article>
-    </main>
+        <h1 >{{ title }}</h1>
+        <span>{{ page.date | formatDate }}</span>
+      </aside>
 
+      <main class="flex container">
+        <article>
+          {{ content | safe }}
+        </article>
+      </main>
+    </div>
     {% include "partials/footer.njk" %}
   </body>
 </html>
diff --git a/src/css/header.css b/src/css/header.css
index 47ecaa4..c4e003b 100644
--- a/src/css/header.css
+++ b/src/css/header.css
@@ -96,7 +96,7 @@
   #navigation.open {
     padding: 0px;
     /*background-color: rgba(59, 66, 82, 1);*/
-    background: linear-gradient(rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.75)),
+    background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),
     url("/assets/images/hero_image2_mobile.jpg");
     background-position: top left;
     background-size: cover;
@@ -105,6 +105,7 @@
 
   #navigation.open nav ul {
     padding: 12px;
+    -webkit-backdrop-filter: blur(4px);
     backdrop-filter: blur(4px);
   }
 
diff --git a/src/css/hero.css b/src/css/hero.css
index b61c7c9..284bc5d 100644
--- a/src/css/hero.css
+++ b/src/css/hero.css
@@ -9,5 +9,4 @@
   background-size: cover;
   object-fit: cover;
   background-position: top left;
-
 }
diff --git a/src/css/post.css b/src/css/post.css
new file mode 100644
index 0000000..a2aeee1
--- /dev/null
+++ b/src/css/post.css
@@ -0,0 +1,8 @@
+.post {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    margin-top: 70px;
+    max-width: var(--breakpoint);
+}
diff --git a/src/css/sections.css b/src/css/sections.css
index b5c16e9..b6165b5 100644
--- a/src/css/sections.css
+++ b/src/css/sections.css
@@ -62,18 +62,14 @@ section h1 {
   backdrop-filter: blur(3px);
 }
 
-aside {
-  padding: 12px 0px 16px 12px;
-}
-
-aside h1 {
-  margin-top: 0px;
-  margin-bottom: 0px;
-  text-align: center;
-}
-
 @media screen and (max-width: 512px) {
     /* Make the left-to-right sections top-to-bottom */
+
+
+    .section-content {
+      align-items: flex-start;
+    }
+    
     .section-content div {
       max-width: 100%;
     }
diff --git a/src/css/style.css b/src/css/style.css
index 8370456..0da8832 100644
--- a/src/css/style.css
+++ b/src/css/style.css
@@ -6,6 +6,7 @@
 @import url("./footer.css");
 @import url("./sections.css");
 @import url("./hero.css");
+@import url("./post.css");
 
 html,
 body {
@@ -23,21 +24,22 @@ button,
   color: inherit;
   text-decoration: none;
   padding: 12px 16px;
-  transition: background-color 0.25s ease-in-out;
+  transition: background-color 0.25s ease-in-out, border 0.25s ease-in-out;
   border-radius: 8px;
   font-weight: bold;
   cursor: pointer;
+  -webkit-backdrop-filter: blur(4px);
   backdrop-filter: blur(4px);
-  background-color: rgba(163, 190, 140, 0.5);
-  border: 3px solid rgba(163, 190, 140, 0.5);
+  background-color: rgba(0, 0, 0, 0.7);
+  border: 3px solid rgba(0, 0, 0, 0.7);
 }
 
 button:hover,
 .button:hover,
 button:focus-visible,
 .button:focus-visible {
-  background-color: rgba(163, 190, 140, 0.3);
-  border: 3px solid rgba(163, 190, 140, 0.3);
+  background-color: rgba(60, 60, 60, 0.7);
+  border: 3px solid rgba(60, 60, 60, 0.7);
 }
 
 .inline-button {
diff --git a/src/css/utilities.css b/src/css/utilities.css
index e6a65f6..9585f3e 100644
--- a/src/css/utilities.css
+++ b/src/css/utilities.css
@@ -12,6 +12,8 @@
 
 .container {
     max-width: var(--breakpoint);
+    margin-left: 32px;
+    margin-right: 32px;
 }
 
 .flex {
diff --git a/src/index/index.njk b/src/index/index.njk
index d086d9d..50d8082 100644
--- a/src/index/index.njk
+++ b/src/index/index.njk
@@ -8,13 +8,10 @@ permalink: /index.html
   <div class="section-content">
     <div>
       <h1>Welcome to my website!</h1>
-      <a class="button" href="/contact/" class="bg-primary">Contact me</a>
     </div>
     <div>
-      <p>My name is Luca Junge.</p>
       <p>
-        I'm a web developer, specializing on interactive web apps and 3D content.</p>
-    </p>
+        I'm Luca Junge, a web developer specializing on interactive progressive web apps and 3D content.</p>
   </div>
 </div>
 </section>
@@ -25,7 +22,19 @@ permalink: /index.html
     <h1>Interactive Applications & Games</h1>
   </div>
   <div>
-    <p>I specialize in 3D interactive content on the web. Built with three.js or the Godot Engine.</p>
+    <p>Most of my work is created using standard web technologies in combination with open source libraries like three.js.</p>
+    <p>For more demanding projects I am using the Godot Engine.</p>
+  </div>
+</div>
+</section>
+
+<section class="section-background" style="display: none; background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('./assets/images/portfolio_mobile.jpg');">
+<div class="section-content">
+  <div>
+    <h1>Open Source Workflow</h1>
+  </div>
+  <div>
+    <p>My projects rely on various open source projects like Meshlab, Blender, Meshroom, Godot Engine and more.</p>
   </div>
 </div>
 </section>
@@ -36,7 +45,8 @@ permalink: /index.html
     <h1>My Portfolio</h1>
   </div>
   <div>
-    <p>This is currently work in progress.</p>
+    <p>I want to publish and show some of my demo projects here. Feel free to check them out and look at the source code.</p>
+    <a class="button" href="/portfolio/">Take a look at my projects</a>
   </div>
 </div>
 </section>
@@ -45,11 +55,11 @@ permalink: /index.html
 <div class="section-content">
   <div>
     <h1>My Workflows</h1>
-    <a class="button" href="/workflows/">Explore</a>
   </div>
   <div>
-    <p>I am using many technologies and devices for my work. Over the years I have developed workflows and techniques to get the most out of my hardware and software.</p>
-    <p>To see how I create my applications and software, see my documented workflows.</p>
+    <p>Over the years I have developed workflows and techniques to get the most out of my tools I use which I want to share here.</p>
+    <p>To see how I create my applications, see my documented workflows.</p>
+    <a class="button" href="/workflows/">Explore my Workflows</a>
   </div>
 </div>
 </section>
@@ -58,10 +68,10 @@ permalink: /index.html
 <div class="section-content">
   <div>
     <h1>My Blog</h1>
-    <a class="button" href="/blog/">Visit</a>
   </div>
   <div>
-    <p>Whenever I see or discover something not easily found online, I'm writing a blog post about it!</p>
+    <p>Whenever I see a new technique or discover something useful, I'm writing a blog post about it!</p>
+    <a class="button" href="/blog/">Visit</a>
   </div>
 </div>
 </section>
diff --git a/src/workflows/index.njk b/src/workflows/index.njk
index 7beaa29..2d5ea3a 100644
--- a/src/workflows/index.njk
+++ b/src/workflows/index.njk
@@ -1,11 +1,23 @@
 ---
 title: "My Workflows"
-layout: base.njk
+layout: overview.njk
+eleventyExcludeFromCollections: true
 ---
 
-<section class="section-background" style="background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('/assets/images/under-construction_mobile.jpg');">
-  <div class="section-content">
-    <p>My Workflows are currently under construction</p>
-  </div>
+{%- for post in collections.workflow -%}
+  <article>
+    <header>
+      <h1>
+        <a href="{{post.url}}">{{post.data.title}}</a>
+      </h1>
 
-</section>
+      <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/workflows/web-app/index.md b/src/workflows/web-app/index.md
new file mode 100644
index 0000000..11edf0b
--- /dev/null
+++ b/src/workflows/web-app/index.md
@@ -0,0 +1,7 @@
+---
+title: Creating a Web App
+layout: post.njk
+tags: "workflow"
+---
+
+Test
\ No newline at end of file
