diff --git a/public/Warenkorb/warenkorb.html b/public/Warenkorb/warenkorb.html
index 0162c29..2e5f9e5 100644
--- a/public/Warenkorb/warenkorb.html
+++ b/public/Warenkorb/warenkorb.html
@@ -9,20 +9,22 @@
     <script src="/header_footer"></script>
 </head>
 <body>
-<!-- Header wird hier dynamisch geladen -->
-<div id="header"></div>
+<div class="wrapper">
+    <!-- Header wird hier dynamisch geladen -->
+    <div id="header"></div>
 
-<div class="warenkorb">
     <main>
-        <h2>Dein Warenkorb</h2>
-        <div id="warenkorb"></div>
-        <div id="gesamtpreis-container"></div>
-        <button id="zurKasseGehen">Zur Kasse gehen</button>
+        <section style="padding: 40px 20px;">
+            <h1>Dein Warenkorb</h1>
+            <div id="warenkorb"></div>
+            <div id="gesamtpreis-container" style="margin-top: 20px;"></div>
+            <button id="zurKasseGehen" class="btn" style="margin-top: 30px;">Zur Kasse gehen</button>
+        </section>
     </main>
-</div>
 
-<!-- Footer wird dynamisch geladen -->
-<div id="footer"></div>
+    <!-- Footer wird dynamisch geladen -->
+    <div id="footer"></div>
+</div>
 
 <script>
     document.addEventListener('DOMContentLoaded', function () {
diff --git a/static/Styles/styles-main.css b/static/Styles/styles-main.css
index 89d4b5e..05abb1f 100644
--- a/static/Styles/styles-main.css
+++ b/static/Styles/styles-main.css
@@ -403,7 +403,7 @@ main > h2 {
 
 #zurKasseGehen {
     margin-top: 30px;
-    background-color: #27ae60;
+    background-color: #e95b00;
     color: white;
     padding: 12px 25px;
     border: none;
@@ -660,7 +660,7 @@ h1 {
     line-height: 1.5;
 }
 
-/* Optional: weiche Animation beim Einblenden */
+/* weiche Animation beim Einblenden */
 @keyframes fadeIn {
     from {
         opacity: 0;
