diff --git a/assets/css/consent.css b/assets/css/consent.css
new file mode 100644
index 0000000..35f64b8
--- /dev/null
+++ b/assets/css/consent.css
@@ -0,0 +1,40 @@
+/* Banner container - default (desktop) */
+#cookie-consent-banner {
+  display: none;
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background: #333;
+  padding: 1rem;
+  text-align: center;
+  z-index: 9999;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 1rem;
+}
+
+.cookie-buttons {
+  margin-top: 0.75rem;
+}
+
+/* Mobile styles */
+@media screen and (max-width: 768px) {
+  #cookie-consent-banner {
+    flex-direction: column;
+    align-items: flex-start;
+    text-align: left;
+    padding: 0.75px;
+    gap: 1rem;
+  }
+
+  #cookie-consent-banner .cookie-text {
+    max-width: 70%;
+  }
+
+  .cookie-buttons {
+    margin-top: 0.5rem;
+  }
+}
+
diff --git a/layouts/partials/extended_head.html b/layouts/partials/extended_head.html
index a4c7d01..2deb6ad 100644
--- a/layouts/partials/extended_head.html
+++ b/layouts/partials/extended_head.html
@@ -1,8 +1,12 @@
 <!-- Cookie Consent Banner -->
-<div id="cookie-consent-banner" style="display:none; position:fixed; bottom:0; left:0; right:0; background:#333; color:#fff; padding:15px; text-align:center; z-index:9999;">
-  We use cookies and analytics to improve your experience. 
-  <button id="accept-cookies" style="margin-left:10px; padding:5px 10px;">Accept</button>
-  <button id="reject-cookies" style="margin-left:5px; padding:5px 10px;">Reject</button>
+<div id="cookie-consent-banner" style="display:none;">
+  <div class="cookie-text">
+    We use cookies and analytics to improve your experience.
+  </div>
+  <div class="cookie-buttons">
+    <button id="accept-cookies">Accept</button>
+    <button id="reject-cookies">Reject</button>
+  </div>
 </div>
 
 <script>