diff --git a/CSS/Element/card.css b/CSS/Element/card.css
index 2a41193..3e856e7 100644
--- a/CSS/Element/card.css
+++ b/CSS/Element/card.css
@@ -24,18 +24,23 @@ body {
     color: white;
     text-align: left;
     max-width: 1000px;
-    margin: 0 auto;
-    padding-left: 230px;
     margin-bottom: 30px;
 }
 
 .course-grid {
     display: flex;
     flex-wrap: wrap;
-    gap: 30px;
-    margin: 0 auto;
+    gap: 40px;
+    margin-left: 20px;
 }
 
+@media screen and (max-width: 765px) {
+    .course-grid{
+        margin-left: 0;
+    }
+}
+
+
 .course-card {
     background: var(--brand-white);
     border-radius: 12px;
diff --git a/CSS/Element/filter_box.css b/CSS/Element/filter_box.css
index 007cfc0..b9fea33 100644
--- a/CSS/Element/filter_box.css
+++ b/CSS/Element/filter_box.css
@@ -2,7 +2,6 @@
     background: #EB8202;
     color: #fff;
     padding: 1em;
-    max-width: 300px;
     border-radius: 8px;
     font-family: sans-serif;
     margin-bottom: 1em;
diff --git a/CSS/Element/form.css b/CSS/Element/form.css
index 60af6c5..df13a2a 100644
--- a/CSS/Element/form.css
+++ b/CSS/Element/form.css
@@ -51,6 +51,12 @@ textarea {
   margin: auto;
 }
 
+@media screen and (max-width: 1024px) {
+  .form-grid {
+    grid-template-columns: repeat(1, 1fr);
+  }
+}
+
 .form-grid-3 {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
@@ -113,3 +119,9 @@ form .error {
   background: transparent!important;
   border: transparent!important;
 }
+
+@media only screen and (max-width: 500px) {
+ .input-transparent{
+   display: none;
+ }
+}
\ No newline at end of file
diff --git a/CSS/style.css b/CSS/style.css
index b431a18..19a3fbe 100644
--- a/CSS/style.css
+++ b/CSS/style.css
@@ -24,6 +24,7 @@ body {
   color: var(--brand-white);
   font-size: 15px;
   margin: 0;
+  overflow-x: hidden;
 }
 
 h1 {
@@ -48,6 +49,13 @@ main {
   margin-top: 190px;
 }
 
+@media screen and (max-width: 1024px) {
+  main{
+    margin-top: 50px;
+  }
+}
+
+
 .msg {
   text-align: center;
   font-size: 17px;
@@ -110,6 +118,14 @@ main {
   align-items: center;
 }
 
+@media only screen and (max-width: 500px) {
+  .d-flex-between{
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 20px;
+  }
+}
+
 .hover:hover {
   opacity: 0.75;
   text-decoration: none;
diff --git a/CSS/style_columns.css b/CSS/style_columns.css
index 21a3dd6..9dab512 100644
--- a/CSS/style_columns.css
+++ b/CSS/style_columns.css
@@ -7,25 +7,37 @@
 
 /*** Container ***/
 
-.container{
+.container {
     max-width: 90%;
-    padding: 24px 42px 24px 42px;
+  /*  padding: 24px 42px 24px 42px; */
     margin: 0 auto;
     color: var(--brand-white);
 }
 
+@media only screen and (max-width: 500px) {
+    .container {
+        padding: 5px;
+    }
+}
+
 .row {
     display: flex;
     flex-flow: row;
     flex-wrap: wrap;
 }
 
+@media (max-width: 800px) {
+    .row {
+        display: block;
+    }
+}
+
 /*** Spaltendefinitionen Smartphone Ansicht ***/
 @media (max-width: 529px) {
     .col-s-12 {
         flex: 0 0 100%;
     }
-    
+
     /*** Loesung Workshop-Seite ***/
     .textContent {
         padding: 15px 0 0 0;
@@ -33,19 +45,22 @@
 }
 
 /*** Spaltendefinitionen Tablet Ansicht ***/
-@media (min-width: 530px) {
+@media (min-width: 750px) {
     .col-m-1 {
         flex: 0 0 100%;
     }
+
     .col-m-4 {
         flex: 0 0 33.3333333%;
     }
+
     .col-m-6 {
         flex: 0 0 50%;
     }
+
     .col-m-12 {
         flex: 0 0 100%;
-    }  
+    }
 }
 
 /*** Spaltendefinitionen Desktop Ansicht ***/
@@ -53,21 +68,35 @@
     .col-1 {
         flex: 0 0 8.3333333%;
     }
+
     .col-3 {
         flex: 0 0 25%;
     }
+
     .col-4 {
         flex: 0 0 33.3333333%;
     }
+
+    .col-card-4{
+        flex: 1 1 calc((100% - (3 - 1) * 40px) / 3);
+    }
+
     .col-5 {
         flex: 0 0 41.6666667%;
     }
+
     .col-6 {
         flex: 0 0 50%;
     }
+
     .col-8 {
         flex: 0 0 66.66666667%;
     }
+
+    .col-9{
+        flex: 0 0 75%;
+    }
+
     .col-12 {
         flex: 0 0 100%;
     }
diff --git a/Views/Welcome/showWelcome.phtml b/Views/Welcome/showWelcome.phtml
index ca7d4dd..9a9a277 100644
--- a/Views/Welcome/showWelcome.phtml
+++ b/Views/Welcome/showWelcome.phtml
@@ -2,10 +2,10 @@
 include dirname(__DIR__) . '/header.phtml';
 
 // Filter auslesen
-$rating   = $_GET['rating'] ?? '';
-$price    = $_GET['price'] ?? '';
+$rating = $_GET['rating'] ?? '';
+$price = $_GET['price'] ?? '';
 $location = $_GET['location'] ?? '';
-?>    
+?>
 
 <div class="container">
     <div class="row">
@@ -13,114 +13,112 @@ $location = $_GET['location'] ?? '';
             <h1 class="welcome-heading">KURSE & ERLEBNISSE JEDER ART</h1>
             <p class="welcome-subheading">Alle Kurse in deiner Nähe – auf einen Blick</p>
 
-        <div class="row">
-        <div class="col-4">
-                <div class="filter-box">
-                    <form method="get">
-                        <label for="rating">Bewertung:</label>
-                        <select name="rating" id="rating">
-                            <option value="">Alle</option>
-                            <option value="5" <?= $rating == '5' ? 'selected' : '' ?>>5 Sterne</option>
-                            <option value="4" <?= $rating == '4' ? 'selected' : '' ?>>4 Sterne+</option>
-                            <option value="3" <?= $rating == '3' ? 'selected' : '' ?>>3 Sterne+</option>
-                        </select>
+            <div class="row">
+                <div class="col-3 col-m-12">
+                    <div class="filter-box">
+                        <form method="get">
+                            <label for="rating">Bewertung:</label>
+                            <select name="rating" id="rating">
+                                <option value="">Alle</option>
+                                <option value="5" <?= $rating == '5' ? 'selected' : '' ?>>5 Sterne</option>
+                                <option value="4" <?= $rating == '4' ? 'selected' : '' ?>>4 Sterne+</option>
+                                <option value="3" <?= $rating == '3' ? 'selected' : '' ?>>3 Sterne+</option>
+                            </select>
 
-                        <label for="price">Preis:</label>
-                        <select name="price" id="price">
-                            <option value="">Alle</option>
-                            <option value="asc" <?= $price == 'asc' ? 'selected' : '' ?>>Aufsteigend</option>
-                            <option value="desc" <?= $price == 'desc' ? 'selected' : '' ?>>Absteigend</option>
-                        </select>
-                        <button type="submit">Anwenden</button>
-                    </form>
+                            <label for="price">Preis:</label>
+                            <select name="price" id="price">
+                                <option value="">Alle</option>
+                                <option value="asc" <?= $price == 'asc' ? 'selected' : '' ?>>Aufsteigend</option>
+                                <option value="desc" <?= $price == 'desc' ? 'selected' : '' ?>>Absteigend</option>
+                            </select>
+                            <button type="submit">Anwenden</button>
+                        </form>
+                    </div>
                 </div>
-            </div>
 
-            <div class="col-8">
-                <!-- KURSLISTE -->
-                <div class="course-grid row">
-                    <?php
-                    $kurse = [
-                        [
-                            'bewertung' => 5,
-                            'titel' => 'Marketing Pro',
-                            'adresse' => 'Bulu ulu Straße 17',
-                            'preis' => '59,99€',
-                            'ort' => '33333 Frankfurt',
-                            'leiter' => 'Max Mustermann'
-                        ],
-                        [
-                            'bewertung' => 4,
-                            'titel' => 'Design Basics',
-                            'adresse' => 'Musterstraße 10',
-                            'preis' => '39,99€',
-                            'ort' => '10115 Berlin',
-                            'leiter' => 'Lisa Beispiel'
-                        ],
-                        [
-                            'bewertung' => 5,
-                            'titel' => 'Excel Masterclass',
-                            'adresse' => 'Tabellenweg 5',
-                            'preis' => '49,99€',
-                            'ort' => '20457 Hamburg',
-                            'leiter' => 'Thomas Tabelle'
-                        ],
-                        [
-                            'bewertung' => 5,
-                            'titel' => 'Excel Masterclass',
-                            'adresse' => 'Tabellenweg 5',
-                            'preis' => '49,99€',
-                            'ort' => '20457 Hamburg',
-                            'leiter' => 'Thomas Tabelle'
-                        ],
-                        [
-                            'bewertung' => 5,
-                            'titel' => 'Excel Masterclass',
-                            'adresse' => 'Tabellenweg 5',
-                            'preis' => '49,99€',
-                            'ort' => '20457 Hamburg',
-                            'leiter' => 'Thomas Tabelle'
-                        ],
-                    ];
+                <div class="col-9">
+                    <!-- KURSLISTE -->
+                    <div class="course-grid row">
+                        <?php
+                        $kurse = [
+                            [
+                                'bewertung' => 5,
+                                'titel' => 'Marketing Pro',
+                                'adresse' => 'Bulu ulu Straße 17',
+                                'preis' => '59,99€',
+                                'ort' => '33333 Frankfurt',
+                                'leiter' => 'Max Mustermann'
+                            ],
+                            [
+                                'bewertung' => 4,
+                                'titel' => 'Design Basics',
+                                'adresse' => 'Musterstraße 10',
+                                'preis' => '39,99€',
+                                'ort' => '10115 Berlin',
+                                'leiter' => 'Lisa Beispiel'
+                            ],
+                            [
+                                'bewertung' => 5,
+                                'titel' => 'Excel Masterclass',
+                                'adresse' => 'Tabellenweg 5',
+                                'preis' => '49,99€',
+                                'ort' => '20457 Hamburg',
+                                'leiter' => 'Thomas Tabelle'
+                            ],
+                            [
+                                'bewertung' => 5,
+                                'titel' => 'Excel Masterclass',
+                                'adresse' => 'Tabellenweg 5',
+                                'preis' => '49,99€',
+                                'ort' => '20457 Hamburg',
+                                'leiter' => 'Thomas Tabelle'
+                            ],
+                            [
+                                'bewertung' => 5,
+                                'titel' => 'Excel Masterclass',
+                                'adresse' => 'Tabellenweg 5',
+                                'preis' => '49,99€',
+                                'ort' => '20457 Hamburg',
+                                'leiter' => 'Thomas Tabelle'
+                            ],
+                        ];
 
-                    // Filter anwenden
-                    $filteredKurse = array_filter($kurse, function($kurs) use ($rating, $location) {
-                        if ($rating && $kurs['bewertung'] < $rating) return false;
-                        if ($location && stripos($kurs['ort'], $location) === false) return false;
-                        return true;
-                    });
-
-                    // Preise in Float umwandeln für Sortierung
-                    if ($price) {
-                        usort($filteredKurse, function($a, $b) use ($price) {
-                            $priceA = floatval(str_replace(',', '.', str_replace('€', '', $a['preis'])));
-                            $priceB = floatval(str_replace(',', '.', str_replace('€', '', $b['preis'])));
-                            return $price === 'asc' ? $priceA <=> $priceB : $priceB <=> $priceA;
+                        // Filter anwenden
+                        $filteredKurse = array_filter($kurse, function ($kurs) use ($rating, $location) {
+                            if ($rating && $kurs['bewertung'] < $rating) return false;
+                            if ($location && stripos($kurs['ort'], $location) === false) return false;
+                            return true;
                         });
-                    }
 
-                    foreach ($filteredKurse as $kurs): ?>
-                        <div class="course-card col-4">
-                            <div class="course-image"></div>
-                            <div class="course-content">
-                                <div class="course-left">
-                                    <div><?= $kurs['bewertung'] ?> ★</div>
-                                    <div><?= $kurs['titel'] ?></div>
-                                    <div>Kursleiter: <?= $kurs['leiter'] ?></div>
-                                    <div><?= $kurs['adresse'] ?></div>
-                                </div>
-                                <div class="course-right">
-                                    <div><?= $kurs['preis'] ?></div>
-                                    <div><?= $kurs['ort'] ?></div>
+                        // Preise in Float umwandeln für Sortierung
+                        if ($price) {
+                            usort($filteredKurse, function ($a, $b) use ($price) {
+                                $priceA = floatval(str_replace(',', '.', str_replace('€', '', $a['preis'])));
+                                $priceB = floatval(str_replace(',', '.', str_replace('€', '', $b['preis'])));
+                                return $price === 'asc' ? $priceA <=> $priceB : $priceB <=> $priceA;
+                            });
+                        }
+
+                        foreach ($filteredKurse as $kurs): ?>
+                            <div class="course-card col-card-4 col-m-6">
+                                <div class="course-image"></div>
+                                <div class="course-content">
+                                    <div class="course-left">
+                                        <div><?= $kurs['bewertung'] ?> ★</div>
+                                        <div><?= $kurs['titel'] ?></div>
+                                        <div>Kursleiter: <?= $kurs['leiter'] ?></div>
+                                        <div><?= $kurs['adresse'] ?></div>
+                                    </div>
+                                    <div class="course-right">
+                                        <div><?= $kurs['preis'] ?></div>
+                                        <div><?= $kurs['ort'] ?></div>
+                                    </div>
                                 </div>
                             </div>
-                        </div>
-                    <?php endforeach; ?>
+                        <?php endforeach; ?>
+                    </div>
                 </div>
             </div>
-        </div>
-
-           
 
 
         </div>
diff --git a/Views/header.phtml b/Views/header.phtml
index 4ef8ad2..5344df2 100644
--- a/Views/header.phtml
+++ b/Views/header.phtml
@@ -14,25 +14,31 @@
 </head>
 
 <body>
-    <header>
-        <nav class="d-flex-between">
-            <a id="logo" href="index.php">bib<span>course</span></a>
-            <div style="column-gap: 8px;" class="d-flex-between">
-                <div style="column-gap: 8px;" class="d-flex-between">
-                    <?php if (isset($_SESSION['user_id']) && $_SESSION['user_id'] !== null): ?>
-                        <a style="column-gap: 16px;" class="btn" href="?controller=User&do=showUserAccountPage">
-                            <?php echo ($_SESSION['vorname'] ?? "") . " " . ($_SESSION['name'] ?? "") . ", " . ($_SESSION['user_role']) ?>
-                            <span class="btn btn-user">
+    <div class="container">
+        <div class="row">
+            <div class="col-12">
+                <header>
+                    <nav class="d-flex-between">
+                        <a id="logo" href="index.php">bib<span>course</span></a>
+                        <div style="column-gap: 8px;" class="d-flex-between">
+                            <div style="column-gap: 8px;" class="d-flex-between">
+                                <?php if (isset($_SESSION['user_id']) && $_SESSION['user_id'] !== null): ?>
+                                    <a style="column-gap: 16px;" class="btn" href="?controller=User&do=showUserAccountPage">
+                                        <?php echo ($_SESSION['vorname'] ?? "") . " " . ($_SESSION['name'] ?? "") . ", " . ($_SESSION['user_role']) ?>
+                                        <span class="btn btn-user">
                                 <span class="material-icons">person</span>
                             </span>
-                        </a>
-                    <?php else: ?>
-                        <a class="btn" href="?controller=User&do=showUserLoginForm">Anmeldung</a>
-                        <a class="btn btn-primary" href="?controller=User&do=showUserRegisterForm">Registration</a>
-                    <?php endif; ?>
-                </div>
+                                    </a>
+                                <?php else: ?>
+                                    <a class="btn" href="?controller=User&do=showUserLoginForm">Anmeldung</a>
+                                    <a class="btn btn-primary" href="?controller=User&do=showUserRegisterForm">Registration</a>
+                                <?php endif; ?>
+                            </div>
+                        </div>
+                    </nav>
+                </header>
             </div>
-        </nav>
-    </header>
+        </div>
+    </div>
     <!-- TODO Transparent mit Fehleranzeige bei der Anmeldung -->
     <main>
\ No newline at end of file