diff --git a/src/app.css b/src/app.css
index d21b0d4..8a8e6a2 100644
--- a/src/app.css
+++ b/src/app.css
@@ -198,7 +198,7 @@
   /* === LEATHER COMPONENTS === */
   .leather,
   .publication-leather {
-    @apply bg-primary-50 dark:bg-primary-1000 text-gray-900 dark:text-gray-100;
+    @apply text-gray-900 dark:text-gray-100;
   }
 
   .btn-leather.text-xs {
@@ -242,13 +242,13 @@
 
   main.main-leather,
   article.article-leather {
-    @apply bg-primary-50 dark:bg-primary-1000 text-gray-900 dark:text-gray-100;
+    @apply text-gray-900 dark:text-gray-100;
   }
 
   div.note-leather,
   p.note-leather,
   section.note-leather {
-    @apply bg-primary-50 dark:bg-primary-1000 text-gray-900 dark:text-gray-100
+    @apply text-gray-900 dark:text-gray-100
       p-2 rounded;
   }
 
@@ -287,7 +287,7 @@
   }
 
   nav.navbar-leather {
-    @apply bg-primary-50 dark:bg-primary-1000 z-10;
+    @apply bg-primary-0 dark:bg-primary-1000 z-10;
   }
 
   nav.navbar-leather svg {
diff --git a/src/lib/a/nav/ANavbar.svelte b/src/lib/a/nav/ANavbar.svelte
index baa6e26..2f30d34 100644
--- a/src/lib/a/nav/ANavbar.svelte
+++ b/src/lib/a/nav/ANavbar.svelte
@@ -107,7 +107,7 @@
 
 <Navbar
   id="navi"
-  class="fixed start-0 top-0 z-50 flex flex-row bg-primary-50 dark:bg-primary-1000"
+  class="fixed start-0 top-0 z-50 flex flex-row bg-primary-0 dark:bg-primary-1000"
   navContainerClass="flex-row items-center !p-0"
 >
   <NavBrand href="/" >
diff --git a/src/lib/components/publications/PublicationHeader.svelte b/src/lib/components/publications/PublicationHeader.svelte
index e04a4cc..583b5de 100644
--- a/src/lib/components/publications/PublicationHeader.svelte
+++ b/src/lib/components/publications/PublicationHeader.svelte
@@ -51,7 +51,7 @@
 {#if title != null && href != null}
   <Card class="ArticleBox card-leather w-full relative flex flex-col sm:flex-row sm:space-x-2 overflow-hidden">
     <!-- Image block: full width on mobile, fixed side on md+ -->
-    <div class="w-full h-48 sm:min-w-40 sm:w-40 sm:h-40 overflow-hidden flex items-center justify-center sm:rounded-l rounded-t sm:rounded-t-none">
+    <div class="w-full sm:min-w-40 sm:w-40 overflow-hidden flex items-center justify-center sm:rounded-l rounded-t sm:rounded-t-none">
       {#if image}
         <LazyImage
           src={image}
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index b60c8d0..ad037b0 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -61,7 +61,7 @@
   </div>
   
   {#if eventCount.total > 0}
-    <div class="flex items-center justify-center gap-4 text-sm text-gray-600 dark:text-gray-400">
+    <div class="flex flex-col sm:flex-row items-center justify-center gap-4 text-sm text-gray-600 dark:text-gray-400">
       <span>Showing {eventCount.displayed} of {eventCount.total} events.</span>
       
       <!-- AI-NOTE: Show filter checkbox only when user is logged in -->
diff --git a/src/styles/base.css b/src/styles/base.css
index b26638f..33c34b0 100644
--- a/src/styles/base.css
+++ b/src/styles/base.css
@@ -2,6 +2,6 @@
 
 @layer components {
   body {
-    @apply bg-primary-50 dark:bg-primary-1000;
+    @apply bg-primary-0 dark:bg-primary-1000;
   }
 }