diff --git a/src/pages/docs.astro b/src/pages/docs.astro
index 7ac20fe..080e286 100644
--- a/src/pages/docs.astro
+++ b/src/pages/docs.astro
@@ -18,13 +18,6 @@ const docs = unsortedDocs.sort(
         docs.map((doc) => (
           <div
             class="second-content"
-            style={
-              doc.frontmatter.has_thumbnail
-                ? 'background-image: url("/img/docs/thumbnails/' +
-                  doc.frontmatter.repo +
-                  '.webp")'
-                : ""
-            }
           >
             <div style="text-align: left;" />
             <a href={doc.url}>
@@ -39,7 +32,9 @@ const docs = unsortedDocs.sort(
                 <li>{feature}</li>
               ))}
             </ul>
-          </div>
+            <img class="doc_thumbnail" style={doc.frontmatter.has_thumbnail ? "" : "display:none;"} src={"/img/docs/thumbnails/" + doc.frontmatter.repo + ".webp"} />
+            </div>
+
         ))
       }
     </div>
diff --git a/src/styles/main.scss b/src/styles/main.scss
index 1f6a1a2..c77c784 100644
--- a/src/styles/main.scss
+++ b/src/styles/main.scss
@@ -51,13 +51,19 @@ main {
   border-radius: 25px;
   border: 1px solid lighten($second-content-clr, 12%);
   min-width: 30vw;
-  padding: 2vh;
-  padding-bottom: 32%;
   margin-inline: 10vw;
-  margin-bottom: 11vh;
-  background-repeat: no-repeat;
-  background-position: center bottom;
-  background-size: 100% auto;
+  p, ul,h1,h2,h3{
+    padding-inline: 2vw;
+  }
+}
+.doc_thumbnail{
+  position: relative;
+  bottom: 0;
+  left: 0;
+  margin: -2vh;
+  width: 150%;
+  padding-top: 2vh;
+  border-radius: 0 0 25px 25px;
 }
 
 td {