diff --git a/assets/css/catbar.css b/assets/css/catbar.css
index da7c338..8718408 100644
--- a/assets/css/catbar.css
+++ b/assets/css/catbar.css
@@ -3,7 +3,7 @@
     display: flex;
     align-items: center;
     background-color: #2d3b50;
-    padding: 1px 0; /* nur minimal größer als Buttons */
+    padding: 1px 0;
 }
 
 /* Inner zentriert */
@@ -15,7 +15,7 @@
     align-items: center;
 }
 
-/* List: 5 gleich große Bereiche */
+/* List */
 .home-nav__list {
     width: 100%;
     display: flex;
@@ -24,7 +24,7 @@
     padding: 0;
 }
 
-/* LI nur als Container – KEINE Höhe hier */
+/* LI nur als Container */
 .home-nav__list li {
     flex: 1;
     position: relative;
@@ -36,36 +36,38 @@
 
 .home-nav__list li button[type="categorybutton"] {
     width: 100%;
-    padding: 8px 0;          /* <-- HIER steuerst du die Höhe */
+    padding: 8px 0;
 
-    background-color: #2d3b50;
+    background-color: rgba(255,255,255,0.08);
     color: #ffffff;
-    font-weight: bold;
+    font-weight: 600;
     font-size: 0.9rem;
 
     border: none;
+    border-radius: 0; /* 🔥 ECKIG */
     cursor: pointer;
 
     display: flex;
     align-items: center;
     justify-content: center;
 
-    transition: background-color 0.2s ease, box-shadow 0.2s ease;
+    transition: background-color 0.2s ease;
 }
 
 /* Hover */
 .home-nav__list li button[type="categorybutton"]:hover {
-    background-color: #3b4f6b;
+    background-color: rgba(255,255,255,0.18);
 }
 
 /* Active */
 .home-nav__list li button[type="categorybutton"]:active {
-    background-color: #1f2a3a;
+    background-color: rgba(255,255,255,0.28);
 }
 
-/* Fokus sichtbar aber clean */
+/* Fokus */
 .home-nav__list li button[type="categorybutton"]:focus-visible {
-    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.6);
+    outline: none;
+    box-shadow: inset 0 0 0 2px rgba(255,255,255,0.5);
 }
 
 /* Trennstriche */
@@ -73,8 +75,29 @@
     content: "";
     position: absolute;
     right: 0;
-    top: 0%;
+    top: 0;
     height: 100%;
     width: 2px;
-    background-color: rgba(255, 255, 255, 0.4);
+    background-color: rgba(255,255,255,0.3);
+}
+
+/* =============================== */
+/* OPTIONAL: FALLS .cat-btn VERWENDET */
+/* =============================== */
+
+.cat-btn {
+    display: block;
+    padding: 8px 0;
+    text-align: center;
+
+    border-radius: 0; /* 🔥 ECKIG */
+    color: white;
+    text-decoration: none;
+    font-weight: 600;
+
+    background: rgba(255,255,255,0.08);
+}
+
+.cat-btn.active {
+    background: rgba(255,255,255,0.25);
 }
diff --git a/assets/css/compcard.css b/assets/css/compcard.css
new file mode 100644
index 0000000..1b6947f
--- /dev/null
+++ b/assets/css/compcard.css
@@ -0,0 +1,113 @@
+/* =============================== */
+/* PRODUCT GRID                    */
+/* =============================== */
+
+.product-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
+    gap: 2rem;
+    padding: 2rem;
+}
+
+/* =============================== */
+/* PRODUCT CARD – Apple Style      */
+/* =============================== */
+
+.product-card {
+    background-color: #ffffff;
+    border-radius: 18px;
+    overflow: hidden;
+
+    box-shadow:
+            0 10px 30px rgba(0, 0, 0, 0.08);
+
+    transition:
+            transform 0.25s ease,
+            box-shadow 0.25s ease;
+}
+
+/* Hover – Apple-like Lift */
+.product-card:hover {
+    transform: translateY(-6px);
+    box-shadow:
+            0 20px 50px rgba(0, 0, 0, 0.12);
+}
+
+/* Bild */
+.product-card img {
+    width: 100%;
+    height: 180px;
+    object-fit: cover;
+    display: block;
+}
+
+/* Content */
+.product-card__content {
+    padding: 1.25rem 1.5rem;
+}
+
+/* Titel */
+.product-card__content h3 {
+    font-size: 1rem;
+    font-weight: 600;
+    margin-bottom: 0.4rem;
+    color: #1d1d1f; /* Apple Schwarz */
+}
+
+/* Beschreibung */
+.product-card__content p {
+    font-size: 0.85rem;
+    color: #6e6e73;
+    margin-bottom: 0.75rem;
+}
+
+/* Preis */
+.product-card__content .price {
+    font-size: 0.95rem;
+    font-weight: 600;
+    color: #0071e3; /* Apple Blau */
+}
+
+
+
+
+/* =============================== */
+/* PRODUCT SECTIONS (Vertical)     */
+/* =============================== */
+
+.product-section {
+    padding: 1.5rem 0;
+}
+
+/* Überschrift */
+.product-section h2 {
+    margin-left: 2rem;
+    margin-bottom: 0.75rem;
+
+    font-size: 1.2rem;
+    font-weight: 600;
+    color: #d8d8ee;
+}
+
+/* =============================== */
+/* HORIZONTAL PRODUCT SCROLL       */
+/* =============================== */
+
+.product-scroll {
+    display: flex;
+    gap: 1.5rem;
+    padding: 0 2rem 1.5rem;
+
+    overflow-x: auto;
+    overflow-y: hidden;
+
+    scroll-snap-type: x mandatory;
+    -webkit-overflow-scrolling: touch;
+
+    scrollbar-width: none;
+}
+
+.product-scroll::-webkit-scrollbar {
+    display: none;
+}
+
diff --git a/catbar.php b/catbar.php
index 0cc418e..62890dd 100644
--- a/catbar.php
+++ b/catbar.php
@@ -12,29 +12,29 @@
         <ul class="home-nav__list">
 
             <li class="home-nav__item">
-                <button type="categorybutton">IPhone</button>
+                <a href="?category=iphone" class="cat-btn">iPhone</a>
             </li>
 
             <li class="home-nav__item">
-                <button type="categorybutton">IPad</button>
+                <a href="?category=ipad" class="cat-btn">iPad</a>
             </li>
 
             <li class="home-nav__item">
-                <button type="categorybutton">MacBook</button>
+                <a href="?category=macbook" class="cat-btn">MacBook</a>
             </li>
 
             <li class="home-nav__item">
-                <button type="categorybutton">AirPods</button>
+                <a href="?category=airpods" class="cat-btn">AirPods</a>
             </li>
 
             <li class="home-nav__item">
-                <button type="categorybutton">Watch</button>
+                <a href="?category=watch" class="cat-btn">Watch</a>
             </li>
+
+            <li class="home-nav__item">
+                <a href="?category=others" class="cat-btn">Others</a>
+            </li>
+
         </ul>
     </div>
 </nav>
-
-
-
-
-<?php echo "Test123" ?>
diff --git a/compcards.php b/compcards.php
new file mode 100644
index 0000000..52f0506
--- /dev/null
+++ b/compcards.php
@@ -0,0 +1,44 @@
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+    <link rel="stylesheet" href="assets/css/compcard.css">
+</head>
+
+<?php
+$activeCategory = $_GET['category'] ?? 'all';
+?>
+
+
+<?php if ($activeCategory === 'iphone' || $activeCategory === 'all'): ?>
+    <section class="product-section">
+        <h2>iPhone</h2>
+        <div class="product-scroll">
+            <div class="product-card">...</div>
+            <div class="product-card">...</div>
+            <div class="product-card">...</div>
+        </div>
+    </section>
+<?php endif; ?>
+
+<?php if ($activeCategory === 'ipad' || $activeCategory === 'all'): ?>
+    <section class="product-section">
+        <h2>iPad</h2>
+        <div class="product-scroll">
+            <div class="product-card">...</div>
+            <div class="product-card">...</div>
+            <div class="product-card">...</div>
+        </div>
+    </section>
+<?php endif; ?>
+
+<?php if ($activeCategory === 'macbook' || $activeCategory === 'all'): ?>
+    <section class="product-section">
+        <h2>MacBook</h2>
+        <div class="product-scroll">
+            <div class="product-card">...</div>
+            <div class="product-card">...</div>
+            <div class="product-card">...</div>
+        </div>
+    </section>
+<?php endif; ?>
diff --git a/index.php b/index.php
index 4026a20..3a74650 100644
--- a/index.php
+++ b/index.php
@@ -7,4 +7,6 @@ error_reporting(E_ALL);
 
 <?php include 'catbar.php'; ?>
 
+<?php include 'compcards.php'; ?>
+
 <?php include 'footer.php'; ?>
\ No newline at end of file