diff --git a/generator.html b/generator.html
index 5471c71..2d4cd2b 100644
--- a/generator.html
+++ b/generator.html
@@ -10,24 +10,26 @@
       }
 
       * {
-        font-family: 'Noto Sans', sans-serif;
+        font-family: "Noto Sans", sans-serif;
       }
-  
+
       p {
         font-family: Poppins;
       }
 
       #container.overflow {
         display: grid !important;
-        grid-template-columns:
-          1fr calc(
-            (
-                var(--width) / var(--height) * var(--overflow-height) - 2 *
-                  var(--padding)
-              ) * var(--scale)
-          )
-          1fr;
-        width: calc(var(--scale) * var(--overflow-width)) !important;
+        --ratio: calc(var(--width-int) / var(--height-int));
+        --thumbnail-width: calc(
+          (var(--ratio) * var(--overflow-height)) * var(--scale)
+        );
+        --full-width: calc(var(--scale) * var(--overflow-width));
+        --margin: calc((var(--full-width) - var(--thumbnail-width)) / 2);
+        grid-template-columns: var(--margin) var(--thumbnail-width) var(
+            --margin
+          );
+        grid-template-areas: "margin-left thumbnail margin-right" "margin-left thumbnail margin-right";
+        width: var(--full-width) !important;
         height: calc(var(--scale) * var(--overflow-height)) !important;
         grid-template-rows: 1fr 10fr;
         background-color: var(--yellow);
@@ -35,24 +37,59 @@
 
       #container.overflow #text_box {
         grid-column: 2;
+        grid-row: 1;
       }
 
       #container.overflow #image_box {
         grid-column: 1/4;
+        grid-row: 2;
       }
 
       #text_box {
         background-color: var(--yellow);
         color: #fff;
         display: grid;
-        grid-template-columns: 1fr 1fr;
+        grid-template-columns: 1fr min-content;
       }
 
       #text_target {
         background-color: #000;
       }
 
+      .overlay {
+        border: 1px solid red;
+        z-index: 1;
+        text-align: center;
+        opacity: 60%;
+        display: none;
+      }
 
+      .guides .overlay {
+        display: block;
+      }
+
+      .overlay--margin {
+        background-image: repeating-linear-gradient(
+          45deg,
+          #ccc,
+          #ccc 30px,
+          #dbdbdb 30px,
+          #dbdbdb 60px
+        );
+      }
+
+      .overlay--margin-right {
+        grid-area: margin-right;
+      }
+
+      .overlay--margin-left {
+        grid-area: margin-left;
+      }
+
+      .overlay--thumbnail {
+        grid-area: thumbnail;
+        color: blue;
+      }
     </style>
   </head>
   <body
@@ -63,9 +100,10 @@
       --width: 100px;
       --height: 100px;
       --overflow-width: 150px;
-      --overflow--height: 150px;
+      --overflow-height: 150px;
       display: flex;
     "
+    class="guides"
   >
     <section style="margin-right: 20px">
       <h1>Generator kart na social media</h1>
@@ -86,6 +124,11 @@ Treść komunikatu</textarea
       >
         Tryb overflow
       </label>
+      <input type="checkbox" id="guides" onchange="reguides()" checked /><label
+        for="guides"
+      >
+        Pokaż prowadnice
+      </label>
     </section>
     <section>
       <h2>Twitter</h2>
@@ -93,8 +136,6 @@ Treść komunikatu</textarea
         id="container"
         style="
           box-sizing: border-box;
-          border: calc(var(--padding) * var(--scale)) solid var(--yellow);
-          border-top: calc(var(--padding) * var(--scale)/3) solid var(--yellow);
           display: flex;
           flex-flow: column;
           width: calc(var(--scale) * var(--width));
@@ -104,7 +145,10 @@ Treść komunikatu</textarea
         <div id="text_box">
           <p
             id="text_target"
-            style="font-size: calc(var(--scale) * 16px); padding: var(--padding);"
+            style="
+              font-size: calc(var(--scale) * 16px);
+              padding: var(--padding);
+            "
           >
             Treść komunikatu
           </p>
@@ -148,6 +192,13 @@ Treść komunikatu</textarea
             "
           ></div>
         </div>
+        <div class="overlay overlay--margin overlay--margin-left">
+          ucięte z lewej
+        </div>
+        <div class="overlay overlay--margin overlay--margin-right">
+          ucięte z prawej
+        </div>
+        <div class="overlay overlay--thumbnail">widoczne na miniaturce</div>
       </div>
     </section>
   </body>
@@ -205,6 +256,8 @@ Treść komunikatu</textarea
       const [overflow_width, overflow_height] = sizes[size.value].overflow_size;
       body.style.setProperty("--width", width + "px");
       body.style.setProperty("--height", height + "px");
+      body.style.setProperty("--width-int", width);
+      body.style.setProperty("--height-int", height);
       body.style.setProperty("--overflow-width", overflow_width + "px");
       body.style.setProperty("--overflow-height", overflow_height + "px");
     };
@@ -225,11 +278,21 @@ Treść komunikatu</textarea
       }
     }
 
+    function reguides() {
+      const should_guides = guides.checked;
+      if (should_guides) {
+        body.classList.add("guides");
+      } else {
+        body.classList.remove("guides");
+      }
+    }
+
     refreshText();
     refreshImage();
     resize();
     rescale();
     reoverflow();
+    reguides();
 
     text.oninput = refreshText;
     file.onchange = refreshImage;
