diff --git a/docs/.vuepress/styles/palette.scss b/docs/.vuepress/styles/palette.scss
index 71e6bec..ab9014d 100644
--- a/docs/.vuepress/styles/palette.scss
+++ b/docs/.vuepress/styles/palette.scss
@@ -41,7 +41,7 @@ h1, h2, h3, h4 {
 };
 
 .vp-project-home .theme-hope-content:not(.custom) {
-  max-width: max-content;
+  max-width: 100%;
   padding: 0;
   margin: 0 auto;
 }
@@ -83,6 +83,7 @@ h1, h2, h3, h4 {
   transition: 0.3s;
   border-style: solid;
   border-radius: 5px;
+  margin: 40px;
   padding: 12px 16px;
 }
 
@@ -124,13 +125,15 @@ h1, h2, h3, h4 {
 }
 
 .hero-container-content {
-  width: 90%;
-  margin: 2.8em auto;
+  width: 100%;
+  // margin: 2.8em auto;
+  margin: 0;
   text-align: center;
 }
 
 #logo {
   width: 150px;
+  margin-top: 40px;
 }
 
 .slogan {
diff --git a/docs/de/README.md b/docs/de/README.md
index 5d2cd9a..9012ec6 100644
--- a/docs/de/README.md
+++ b/docs/de/README.md
@@ -31,7 +31,7 @@ tagLine:
 
 <h2 id="benefits" class="large-header">Warum Ocelot.Social?</h2>
 
-<div class="benefits-grid">
+<div class="benefits-grid center">
   <figure>
     <HopeIcon icon="fa-solid fa-face-smile" />
     <figcapture>
@@ -99,7 +99,7 @@ tagLine:
 
 <h2 id="feature-headline" class="large-header">Wichtigste Funktionen</h2>
 
-<div class="image-grid">
+<div class="image-grid center">
   <figure>
     <img src="./assets/login.png" />
     <figcapture>