diff --git a/HTML/STICKERS/index.html b/HTML/STICKERS/index.html
index 50d816d..e389f40 100644
--- a/HTML/STICKERS/index.html
+++ b/HTML/STICKERS/index.html
@@ -3,16 +3,16 @@
 <head>
 <meta charset="utf-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1" />
-<title>4 cm Sticker Sheet – Hex Packed (Cutline Optional)</title>
+<title>4 cm Sticker Sheet – Hex vs Grid</title>
 <style>
   :root {
-    --sticker-diameter-cm: 4;     /* Sticker content diameter (cm) */
-    --gutter-cm: 0;               /* Spacing between sticker edges (cm) */
-    --margin-cm: 0;               /* Page margin/safety (cm) */
-    --outline-on: 0;              /* 1 = show cut outline, 0 = hide */
-    --outline-mm: 0.3;            /* Outline width in mm when enabled */
-    --fit-mode: cover;            /* cover|contain image fit */
-    --page-width-cm: 21;          /* Default A4 portrait */
+    --sticker-diameter-cm: 4;     /* Content circle diameter */
+    --gutter-cm: 0;               /* Space between outer edges */
+    --margin-cm: 0;               /* Safety/printer margin */
+    --outline-on: 0;              /* 1 show outline, 0 none */
+    --outline-mm: 0.3;            /* Outline width when enabled */
+    --fit-mode: cover;            /* cover|contain */
+    --page-width-cm: 21;          /* A4 by default */
     --page-height-cm: 29.7;
   }
 
@@ -73,14 +73,11 @@
     border-radius: 6px;
     cursor: pointer;
   }
-  .hint {
+  .hint, .stats {
     font-size: 12px;
-    color: #6b7280;
-  }
-  .stats {
-    font-size: 13px;
-    color: #334155;
+    color: #475569;
   }
+  .stats strong { color: #0f172a; }
 
   .pages {
     padding: 12px;
@@ -94,7 +91,7 @@
     position: relative;
     box-shadow: 0 1px 4px rgba(0,0,0,0.08);
     outline: 1px dashed #e5e7eb;
-    width: calc(var(--page-width-cm) * 37.8px);
+    width: calc(var(--page-width-cm) * 37.8px);   /* screen preview only */
     height: calc(var(--page-height-cm) * 37.8px);
   }
 
@@ -109,34 +106,26 @@
 
   .sticker {
     position: absolute;
-    width: calc(var(--sticker-diameter-cm) * 1cm);
+    width: calc(var(--sticker-diameter-cm) * 1cm);   /* content circle */
     height: calc(var(--sticker-diameter-cm) * 1cm);
     border-radius: 50%;
     overflow: hidden;
-
-    /* Important: content-box so outline adds to outer size.
-       If outline is OFF, no extra thickness; if ON, increases
-       outer diameter by 2 * outline width. */
-    box-sizing: content-box;
-
-    /* Optional cut outline (hairline). */
+    box-sizing: content-box;                          /* outline adds to outer size */
     border: calc(var(--outline-on) * var(--outline-mm) * 1mm) solid rgba(0,0,0,0.28);
-
     background: #f8fafc center/var(--fit-mode) no-repeat;
   }
-
   .sticker img {
-    display: block;
     width: 100%;
     height: 100%;
     object-fit: var(--fit-mode);
+    display: block;
     pointer-events: none;
     user-select: none;
   }
 
   @media print {
     body { background: white; }
-    .controls, .hint-bar { display: none !important; }
+    .controls { display: none !important; }
     .pages { padding: 0; }
     .page {
       width: auto !important;
@@ -157,6 +146,13 @@
 
 <div class="controls">
   <div class="row">
+    <label>
+      Layout
+      <select id="layout">
+        <option value="hex" selected>Hex (max)</option>
+        <option value="grid">Grid (rows & columns)</option>
+      </select>
+    </label>
     <label>
       Sticker Ø (cm)
       <input id="diameter" type="number" step="0.1" min="1" value="4">
@@ -169,6 +165,15 @@
       Printer margin (cm)
       <input id="margin" type="number" step="0.1" min="0" value="0">
     </label>
+    <label>
+      Cut outline
+      <select id="outline">
+        <option value="0" selected>None (best fit)</option>
+        <option value="1">Hairline (≈0.3 mm)</option>
+      </select>
+    </label>
+  </div>
+  <div class="row">
     <label>
       Paper
       <select id="paper">
@@ -190,44 +195,39 @@
         <option value="contain">Contain (no crop)</option>
       </select>
     </label>
-    <label>
-      Cut outline
-      <select id="outline">
-        <option value="0" selected>None (best fit)</option>
-        <option value="1">Hairline (≈0.3 mm)</option>
-      </select>
-    </label>
-  </div>
-  <div class="row">
     <label>
       Sticker image
       <input id="file" type="file" accept="image/*">
     </label>
     <button class="secondary" id="generate">Generate layout</button>
     <button class="primary" id="print">Print…</button>
+  </div>
+  <div class="row">
     <span class="stats" id="stats">–</span>
   </div>
   <div class="row">
-    <span class="hint">Print tips: Set Scale 100%, enable “Print backgrounds/graphics,” and choose the same paper size/orientation here and in the dialog. If edges clip, increase Printer margin slightly.</span>
+    <span class="hint">Print at 100% scale with “Print backgrounds/graphics” enabled. If edges clip, increase Printer margin slightly (e.g., 0.3–0.5 cm).</span>
   </div>
 </div>
 
 <div class="pages" id="pages"></div>
 
 <script>
+  // Paper sizes in cm
   const PAPER = {
     A4: { w: 21.0, h: 29.7 },
     LETTER: { w: 21.59, h: 27.94 }
   };
 
   const el = {
+    layout: document.getElementById('layout'),
     diameter: document.getElementById('diameter'),
     gutter: document.getElementById('gutter'),
     margin: document.getElementById('margin'),
+    outline: document.getElementById('outline'),
     paper: document.getElementById('paper'),
     orientation: document.getElementById('orientation'),
     fit: document.getElementById('fit'),
-    outline: document.getElementById('outline'),
     file: document.getElementById('file'),
     pages: document.getElementById('pages'),
     generate: document.getElementById('generate'),
@@ -237,10 +237,10 @@
 
   let imageDataURL = null;
 
-  // React to changes immediately
+  // Update on any change
   ['change','input'].forEach(evt => {
-    [el.diameter, el.gutter, el.margin, el.paper, el.orientation, el.fit, el.outline].forEach(ctrl => {
-      ctrl.addEventListener(evt, () => render());
+    [el.layout, el.diameter, el.gutter, el.margin, el.outline, el.paper, el.orientation, el.fit].forEach(ctrl => {
+      ctrl.addEventListener(evt, render);
     });
   });
 
@@ -251,91 +251,88 @@
     render();
   });
 
-  el.generate.addEventListener('click', () => render());
+  el.generate.addEventListener('click', render);
 
   el.print.addEventListener('click', () => {
     if (!document.querySelector('.page')) render();
     setTimeout(() => window.print(), 50);
   });
 
-  render(); // Initial
+  // Initial render
+  render();
 
   function render() {
-    const d = clampNum(parseFloat(el.diameter.value), 1, 100);   // sticker diameter (cm) content
-    const g = clampNum(parseFloat(el.gutter.value), 0, 5);       // gutter (cm)
-    const m = clampNum(parseFloat(el.margin.value), 0, 5);       // margin (cm)
-    const fit = el.fit.value === 'contain' ? 'contain' : 'cover';
+    const layout = el.layout.value; // 'hex' or 'grid'
+    const d = clampNum(parseFloat(el.diameter.value), 1, 100); // content diameter (cm)
+    const g = clampNum(parseFloat(el.gutter.value), 0, 5);     // gutter (cm)
+    const m = clampNum(parseFloat(el.margin.value), 0, 5);     // margin (cm)
     const outlineOn = el.outline.value === '1' ? 1 : 0;
+    const fit = el.fit.value === 'contain' ? 'contain' : 'cover';
 
     let { w, h } = PAPER[el.paper.value] || PAPER.A4;
     const isLandscape = el.orientation.value === 'landscape';
     if (isLandscape) [w, h] = [h, w];
 
+    // Push CSS variables for preview
     document.documentElement.style.setProperty('--sticker-diameter-cm', d);
     document.documentElement.style.setProperty('--gutter-cm', g);
     document.documentElement.style.setProperty('--margin-cm', m);
     document.documentElement.style.setProperty('--page-width-cm', w);
     document.documentElement.style.setProperty('--page-height-cm', h);
-    document.documentElement.style.setProperty('--fit-mode', fit);
     document.documentElement.style.setProperty('--outline-on', outlineOn);
+    document.documentElement.style.setProperty('--fit-mode', fit);
 
+    // Build one page (duplicate in print dialog for more)
     el.pages.innerHTML = '';
-    const page = buildPage(w, h, m, d, g, outlineOn);
-    el.pages.appendChild(page);
-  }
-
-  function buildPage(w, h, margin, diameter, gutter, outlineOn) {
     const page = document.createElement('div');
     page.className = 'page';
-
     const canvas = document.createElement('div');
     canvas.className = 'canvas';
     page.appendChild(canvas);
+    el.pages.appendChild(page);
 
-    // Usable area inside margins (cm)
-    const W = w - 2 * margin;
-    const H = h - 2 * margin;
+    // Dimensions inside margins
+    const W = w - 2*m;
+    const H = h - 2*m;
 
-    // If outline is on, it increases the outer diameter.
+    // Outer diameter (content + outline on both sides)
     const outlineWidthCm = outlineOn ? (getCssNumber('--outline-mm') / 10) : 0; // mm -> cm
-    const outerD = diameter + 2 * outlineWidthCm;
+    const outerD = d + 2*outlineWidthCm;
 
-    // Hex packing
-    const pitchX = outerD + gutter;
-    const pitchY = (Math.sqrt(3) / 2) * outerD + gutter;
-    const offsetX = 0.5 * (outerD + gutter);
+    // Generate placements for selected layout
+    const placements = layout === 'grid'
+      ? packGrid(W, H, outerD, g)
+      : packHex(W, H, outerD, g);
 
-    let y = 0;
-    let row = 0;
-    let placed = 0;
+    // Render stickers
+    placements.forEach(p => {
+      const s = createSticker(imageDataURL);
+      // Offset by outline so the content circle sits at p.x..p.x+outerD
+      s.style.left = cm(p.x + outlineWidthCm);
+      s.style.top  = cm(p.y + outlineWidthCm);
+      canvas.appendChild(s);
+    });
 
-    while (y + outerD <= H + 1e-6) {
-      const isOddRow = row % 2 === 1;
-      const startX = isOddRow ? offsetX : 0;
-      let x = startX;
+    // Compute comparison stats for both layouts
+    const hexCount = packHex(W, H, outerD, g).length;
+    const gridCount = packGrid(W, H, outerD, g).length;
+    const used = placements.length;
+    const areaCanvas = W * H;
+    const areaCircle = Math.PI * Math.pow(outerD/2, 2); // using outer diameter for sheet usage
+    const coverage = areaCanvas > 0 ? (used * areaCircle / areaCanvas) : 0;
 
-      while (x + outerD <= W + 1e-6) {
-        const s = createSticker(imageDataURL);
-        // Positioning uses the content diameter; outline is handled by CSS border on .sticker.
-        s.style.left = cm(x + outlineWidthCm);
-        s.style.top  = cm(y + outlineWidthCm);
-        canvas.appendChild(s);
-        placed++;
-        x += pitchX;
-      }
-      row++;
-      y += pitchY;
-      if (row > 2000) break;
-    }
+    const gain = hexCount - gridCount;
+    const gainText = gain === 0 ? 'same' : (gain > 0 ? `+${gain} with Hex` : `+${-gain} with Grid`);
 
-    // Update stats
-    const perRow = Math.max(0, Math.floor((W + 1e-6 - (row > 1 ? 0 : 0)) / pitchX) + Math.floor((W + 1e-6 - offsetX) / pitchX));
-    document.getElementById('stats').textContent =
-      `This page: ${placed} stickers • Ø ${diameter.toFixed(1)} cm` +
-      (outlineOn ? ` + ${Math.round(getCssNumber('--outline-mm')*10)/10} mm outline` : ` (no outline)`) +
-      (gutter > 0 ? ` • Gutter ${g.toFixed?.(1) ?? gutter} cm` : '');
+    el.stats.innerHTML =
+      `<strong>${layout.toUpperCase()}</strong> layout: ${used} stickers • ` +
+      `Ø ${d.toFixed(1)} cm${outlineOn ? ` + ${Math.round(outlineWidthCm*10)} mm outline` : ''}` +
+      (g > 0 ? ` • Gutter ${g.toFixed(1)} cm` : ' • No gutter') +
+      ` • Coverage ${(coverage*100).toFixed(1)}%` +
+      ` — Compare ⇒ Hex: ${hexCount}, Grid: ${gridCount} (${gainText})`;
 
-    if (placed === 0) {
+    // If none fit, show a helpful message
+    if (placements.length === 0) {
       const msg = document.createElement('div');
       msg.style.position = 'absolute';
       msg.style.inset = '0';
@@ -343,11 +340,52 @@
       msg.style.placeItems = 'center';
       msg.style.color = '#6b7280';
       msg.style.fontSize = '14px';
-      msg.textContent = 'No stickers fit with current settings. Reduce margins/gutter or rotate orientation.';
+      msg.textContent = 'No stickers fit with current settings. Reduce margins/gutter or switch orientation.';
       canvas.appendChild(msg);
     }
+  }
 
-    return page;
+  // Hexagonal packing (odd rows offset by half pitch)
+  function packHex(W, H, outerD, gutter) {
+    const res = [];
+    const pitchX = outerD + gutter;
+    const pitchY = (Math.sqrt(3) / 2) * outerD + gutter;
+    const halfStep = 0.5 * (outerD + gutter);
+
+    let y = 0;
+    let row = 0;
+    while (y + outerD <= H + 1e-6) {
+      const startX = (row % 2 === 1) ? halfStep : 0;
+      let x = startX;
+      while (x + outerD <= W + 1e-6) {
+        res.push({ x, y });
+        x += pitchX;
+      }
+      row++;
+      y += pitchY;
+      if (row > 5000) break;
+    }
+    return res;
+    // Note: This is edge-to-edge packing using the outer diameter (includes outline if enabled).
+  }
+
+  // Simple rows & columns grid
+  function packGrid(W, H, outerD, gutter) {
+    const res = [];
+    const pitchX = outerD + gutter;
+    const pitchY = outerD + gutter;
+
+    let y = 0;
+    while (y + outerD <= H + 1e-6) {
+      let x = 0;
+      while (x + outerD <= W + 1e-6) {
+        res.push({ x, y });
+        x += pitchX;
+      }
+      y += pitchY;
+      if (res.length > 100000) break;
+    }
+    return res;
   }
 
   function createSticker(dataUrl) {
