diff --git a/base.css b/base.css
index 4abd6b2..96b9d32 100644
--- a/base.css
+++ b/base.css
@@ -8,9 +8,12 @@
     --on-background: #363227;
     --nav-height: 4rem;
     --border-radius: 48px;
+    --small-border-radius: 8px;
     --max-content-width: 80rem;
     --secondary-container: #e0f5cb;
     --on-secondary-container: #4c5e3e;
+    --on-surface: #363227;
+    --outline-variant: #b9b1a3;
 }
 
 body {
@@ -33,6 +36,7 @@ h1, h2, h3, h4{
 h1{
     font-size: 4rem;
     line-height: 3.5rem;
+    margin: 1.5rem 0;
 }
 
 h2{
@@ -66,6 +70,10 @@ section, nav, footer {
     }
 }
 
+nav {
+    padding: 1rem;
+}
+
 svg {
     height: 1em;
     width: 1em;
@@ -77,3 +85,6 @@ ul {
     margin: 0;
 }
 
+header {
+    margin-bottom: 5rem;
+}
diff --git a/images/wyroby/001.jpg b/images/wyroby/001.jpg
new file mode 100644
index 0000000..9a76008
Binary files /dev/null and b/images/wyroby/001.jpg differ
diff --git a/images/wyroby/002.jpg b/images/wyroby/002.jpg
new file mode 100644
index 0000000..321fa95
Binary files /dev/null and b/images/wyroby/002.jpg differ
diff --git a/images/wyroby/003.jpg b/images/wyroby/003.jpg
new file mode 100644
index 0000000..3ab22a1
Binary files /dev/null and b/images/wyroby/003.jpg differ
diff --git a/images/wyroby/004.jpg b/images/wyroby/004.jpg
new file mode 100644
index 0000000..9a76008
Binary files /dev/null and b/images/wyroby/004.jpg differ
diff --git a/images/wyroby/005.jpg b/images/wyroby/005.jpg
new file mode 100644
index 0000000..321fa95
Binary files /dev/null and b/images/wyroby/005.jpg differ
diff --git a/images/wyroby/006.jpg b/images/wyroby/006.jpg
new file mode 100644
index 0000000..3ab22a1
Binary files /dev/null and b/images/wyroby/006.jpg differ
diff --git a/images/wyroby/007.jpg b/images/wyroby/007.jpg
new file mode 100644
index 0000000..9a76008
Binary files /dev/null and b/images/wyroby/007.jpg differ
diff --git a/images/wyroby/008.jpg b/images/wyroby/008.jpg
new file mode 100644
index 0000000..321fa95
Binary files /dev/null and b/images/wyroby/008.jpg differ
diff --git a/images/wyroby/009.jpg b/images/wyroby/009.jpg
new file mode 100644
index 0000000..3ab22a1
Binary files /dev/null and b/images/wyroby/009.jpg differ
diff --git a/images/wyroby/010.jpg b/images/wyroby/010.jpg
new file mode 100644
index 0000000..9a76008
Binary files /dev/null and b/images/wyroby/010.jpg differ
diff --git a/images/wyroby/011.jpg b/images/wyroby/011.jpg
new file mode 100644
index 0000000..321fa95
Binary files /dev/null and b/images/wyroby/011.jpg differ
diff --git a/images/wyroby/012.jpg b/images/wyroby/012.jpg
new file mode 100644
index 0000000..3ab22a1
Binary files /dev/null and b/images/wyroby/012.jpg differ
diff --git a/images/wyroby/013.jpg b/images/wyroby/013.jpg
new file mode 100644
index 0000000..9a76008
Binary files /dev/null and b/images/wyroby/013.jpg differ
diff --git a/images/wyroby/014.jpg b/images/wyroby/014.jpg
new file mode 100644
index 0000000..321fa95
Binary files /dev/null and b/images/wyroby/014.jpg differ
diff --git a/images/wyroby/015.jpg b/images/wyroby/015.jpg
new file mode 100644
index 0000000..3ab22a1
Binary files /dev/null and b/images/wyroby/015.jpg differ
diff --git a/wyroby.css b/wyroby.css
index b4febd7..ba10c71 100644
--- a/wyroby.css
+++ b/wyroby.css
@@ -1,8 +1,62 @@
 @import "base.css";
 
 .wyroby {
-    & > :last-child {
+    padding-top: 2rem;
+
+    & > div:nth-child(2) {
         display: grid;
-        grid-template-columns: 1fr 1fr 1fr;
+        grid-template-columns: auto 1fr auto auto auto auto;
+        align-items: center;
+        gap: 1rem;
+        & > div {
+            height: 0;
+            border: 1px solid var(--outline-variant);
+            margin: 0 1rem;
+        }
+        &> h2 {
+            font-size: 2.25rem;
+        }
+        & > a {
+            padding: 0.5rem 1rem;
+            text-decoration: none;
+            background-color: var(--secondary-container);
+            border-radius: var(--small-border-radius);
+            color: var(--on-secondary-container);
+
+            &[href] {
+                background-color: var(--surface-container-highest);
+                color: var(--on-background);
+            }
+        }
+    }
+
+    & > :last-child {
+        padding-top: 2rem;
+        display: grid;
+        grid-template-columns: repeat(3, 1fr);
+        gap: 2rem;
+
+        & > .card {
+            & > div:last-child {
+                display: grid;
+                grid-template-columns: auto auto;
+                grid-template-rows: auto auto;
+
+                & > span {
+                    color: var(--primary);
+                    font-size: 1.5rem;
+                    font-weight: bold;
+                    justify-self: end;
+                }
+
+                & > p {
+                    grid-row: 2;
+                    grid-column: 1/span 2;
+                    text-color: var(--on-surface);
+                    font-size: 0.875em;
+                }
+
+            }
+        }
     }
 }
\ No newline at end of file
diff --git a/wyroby.html b/wyroby.html
index dbe61cc..0d8faaa 100644
--- a/wyroby.html
+++ b/wyroby.html
@@ -15,7 +15,7 @@
         <img alt="logo" src="scraped/pobrane-1.png" style="width: 14rem"/>
         <div>
             <a href="index.html">Strona Główna</a>
-            <a href="wyroby.html">Wyroby</a>
+            <a>Wyroby</a>
             <a href="portfolio.html">Portfolio</a>
             <a href="kawiarnia.html">Kawiarnia</a>
         </div>
@@ -23,38 +23,167 @@
     </div>
 </nav>
 <main>
-<section class="wyroby">
-    <h1>Nasze słodkości</h1>
-    <p>Poznaj nasze tradycyjne receptury przekute w nowoczesne formy. Każdy wypiek to jistoria pasji, a kade lody to powiew naturalnej świeżości</p>
-    <div>
-        <h2>Ciasta</h2>
-        <div/>
-            <a href="wyroby.html">Ciasta</a>
+    <section class="wyroby">
+        <header>
+            <h1>Nasze słodkości</h1>
+            <p>Poznaj nasze tradycyjne receptury przekute w nowoczesne formy. Każdy wypiek to historia pasji, a każde lody to
+                powiew naturalnej świeżości</p>
+        </header>
+        <div>
+            <h2>Ciasta</h2>
+            <div></div>
+            <a>Ciasta</a>
             <a href="wyroby_torty.html">Torty</a>
             <a href="wyroby_slodkie_stoly.html">Slodkie stoły</a>
             <a href="wyroby_lody.html">Lody</a>
         </div>
-    </div>
-    <div>
-        <div class="card">
-            <div>
-                <img alt="tort" src="images/004.jpg"/>
+        </div>
+        <div>
+            <div class="card">
+                <div>
+                    <img alt="Malinowa chmurka" src="images/wyroby/001.jpg"/>
+                </div>
+                <div>
+                    <h3>Malinowa chmurka</h3>
+                    <span>150zł</span>
+                    <p>kruchy spód, warstwa malin w galaretce, krem śmietankowy, beza</p>
+                </div>
             </div>
-            <div>
-                <h3>Torty Okazjonalne</h3>
-                <p>Weselne, urodzinowe i te bez okazji – od klasyki po nowoczesne musy.</p>
-                <a>Przeglądaj Torty
-                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
-                         fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
-                         stroke-linejoin="round" class="lucide lucide-arrow-right-icon lucide-arrow-right">
-                        <path d="M5 12h14"/>
-                        <path d="m12 5 7 7-7 7"/>
-                    </svg>
-                </a>
+            <div class="card">
+                <div>
+                    <img alt="Sernik ulubiony" src="images/wyroby/002.jpg"/>
+                </div>
+                <div>
+                    <h3>Sernik ulubiony</h3>
+                    <span>150zł</span>
+                    <p>kruchy spód, aksamitna masa serowa, beza z kruszonką</p>
+                </div>
+            </div>
+            <div class="card">
+                <div>
+                    <img alt="Sernik klasyczny" src="images/wyroby/003.jpg"/>
+                </div>
+                <div>
+                    <h3>Sernik klasyczny</h3>
+                    <span>150zł</span>
+                    <p>wykończony czekoladowym ganache lub oprószony cukrem pudrem</p>
+                </div>
+            </div>
+            <div class="card">
+                <div>
+                    <img alt="Jabłecznik z kruszonką" src="images/wyroby/004.jpg"/>
+                </div>
+                <div>
+                    <h3>Jabłecznik z kruszonką</h3>
+                    <span>130zł</span>
+                    <p>ciasto ucierane, jabłka, kruszonka</p>
+                </div>
+            </div>
+            <div class="card">
+                <div>
+                    <img alt="Sernik królewski" src="images/wyroby/005.jpg"/>
+                </div>
+                <div>
+                    <h3>Sernik królewski</h3>
+                    <span>150zł</span>
+                    <p>kakaowy spód i kruszonka, wilgotna masa serowa</p>
+                </div>
+            </div>
+            <div class="card">
+                <div>
+                    <img alt="Pleśniak" src="images/wyroby/006.jpg"/>
+                </div>
+                <div>
+                    <h3>Pleśniak</h3>
+                    <span>120zł</span>
+                    <p>kruche ciasto waniliowe, powidła owocowe, kruche ciasto kakaowe, beza i kruszonka</p>
+                </div>
+            </div>
+            <div class="card">
+                <div>
+                    <img alt="Leśny mech z musem truskawkowym" src="images/wyroby/007.jpg"/>
+                </div>
+                <div>
+                    <h3>Leśny mech z musem truskawkowym</h3>
+                    <span>110zł</span>
+                    <p>biszkoptowe ciasto z dodatkiem szpinaku, mus truskawkowy</p>
+                </div>
+            </div>
+            <div class="card">
+                <div>
+                    <img alt="Snickers" src="images/wyroby/008.jpg"/>
+                </div>
+                <div>
+                    <h3>Snickers</h3>
+                    <span>150zł</span>
+                    <p>dwie warstwy kakaowego biszkoptu a pomiędzy bezowy blat orzechowy , krem budyniowy , toffi i
+                        orzeszki ziemne</p>
+                </div>
+            </div>
+            <div class="card">
+                <div>
+                    <img alt="Mleczna kanapka" src="images/wyroby/009.jpg"/>
+                </div>
+                <div>
+                    <h3>Mleczna kanapka</h3>
+                    <span>120zł</span>
+                    <p>dwa blaty czekoladowego ciasta, a pomiędzy krem waniliowy z dodatkiem cienkiej warstwy
+                        czekoladowej</p>
+                </div>
+            </div>
+            <div class="card">
+                <div>
+                    <img alt="3Bit" src="images/wyroby/010.jpg"/>
+                </div>
+                <div>
+                    <h3>3Bit</h3>
+                    <span>120zł</span>
+                    <p>herbatniki, krem budyniowy, toffi i śmietana</p>
+                </div>
+            </div>
+            <div class="card">
+                <div>
+                    <img alt="Biszkoptowe z kremem i owocami w galaretce" src="images/wyroby/011.jpg"/>
+                </div>
+                <div>
+                    <h3>Biszkoptowe z kremem i owocami w galaretce</h3>
+                    <span>120zł</span>
+                    <p>biszkopt, krem budyniowy, owoce</p>
+                </div>
+            </div>
+            <div class="card">
+                <div>
+                    <img alt="Kora orzechowa" src="images/wyroby/012.jpg"/>
+                </div>
+                <div>
+                    <h3>Kora orzechowa</h3>
+                    <span>150zł</span>
+                    <p>dwa blaty bezy orzechowej a pomiędzy krem budyniowy na bazie soku z brzoskwiń, delicje
+                        pomarańczowe, owoce brzoskwiń i galaretka</p>
+                </div>
+            </div>
+            <div class="card">
+                <div>
+                    <img alt="Nutelowiec z wiśniami" src="images/wyroby/013.jpg"/>
+                </div>
+                <div>
+                    <h3>Nutelowiec z wiśniami</h3>
+                    <span>120zł</span>
+                    <p>nutelowy spód , krem śmietankowy z dodatkiem twarożku, wiśnie i galaretka</p>
+                </div>
+            </div>
+            <div class="card">
+                <div>
+                    <img alt="Karpatka" src="images/wyroby/014.jpg">
+                </div>
+                <div>
+                    <h3>Karpatka</h3>
+                    <span>120zł</span>
+                    <p></p>
+                </div>
             </div>
         </div>
-    </div>
-</section>
+    </section>
 </main>
 <footer>
     <div>