diff --git a/app/themes/laszlo/assets/css/00-setting/color.css b/app/themes/laszlo/assets/css/00-setting/color.css
index c697e1510..678e26de6 100644
--- a/app/themes/laszlo/assets/css/00-setting/color.css
+++ b/app/themes/laszlo/assets/css/00-setting/color.css
@@ -1,111 +1,111 @@
 /**
- * - Source color: #695F12
- * - [ ] Color match
+ * - Source color: #EFCD58
+ * - [x] Color match
  * - [x] Harmonize extended colors
- * - [ ] Check contrast
+ * - [x] Check contrast
  */
 @layer setting {
   :root {
-    --color-primary: rgb(105 95 18);
-    --color-surface-tint: rgb(105 95 18);
+    --color-primary: rgb(114 92 0);
+    --color-surface-tint: rgb(114 92 0);
     --color-on-primary: rgb(255 255 255);
-    --color-primary-container: rgb(243 228 138);
-    --color-on-primary-container: rgb(80 71 0);
-    --color-secondary: rgb(100 95 65);
+    --color-primary-container: rgb(239 205 88);
+    --color-on-primary-container: rgb(107 86 0);
+    --color-secondary: rgb(107 93 49);
     --color-on-secondary: rgb(255 255 255);
-    --color-secondary-container: rgb(235 227 189);
-    --color-on-secondary-container: rgb(76 71 43);
-    --color-tertiary: rgb(65 102 81);
+    --color-secondary-container: rgb(242 223 167);
+    --color-on-secondary-container: rgb(112 98 53);
+    --color-tertiary: rgb(77 103 15);
     --color-on-tertiary: rgb(255 255 255);
-    --color-tertiary-container: rgb(195 236 210);
-    --color-on-tertiary-container: rgb(41 78 59);
+    --color-tertiary-container: rgb(187 219 120);
+    --color-on-tertiary-container: rgb(71 96 7);
     --color-error: rgb(186 26 26);
     --color-on-error: rgb(255 255 255);
     --color-error-container: rgb(255 218 214);
     --color-on-error-container: rgb(147 0 10);
-    --color-background: rgb(255 249 235);
-    --color-on-background: rgb(29 28 19);
-    --color-surface: rgb(255 249 235);
-    --color-on-surface: rgb(29 28 19);
-    --color-surface-variant: rgb(232 226 208);
-    --color-on-surface-variant: rgb(74 71 57);
-    --color-outline: rgb(123 119 104);
-    --color-outline-variant: rgb(204 198 181);
+    --color-background: rgb(255 248 240);
+    --color-on-background: rgb(30 27 19);
+    --color-surface: rgb(255 248 240);
+    --color-on-surface: rgb(30 27 19);
+    --color-surface-variant: rgb(236 226 203);
+    --color-on-surface-variant: rgb(76 70 54);
+    --color-outline: rgb(126 119 100);
+    --color-outline-variant: rgb(207 198 176);
     --color-shadow: rgb(0 0 0);
     --color-scrim: rgb(0 0 0);
-    --color-inverse-surface: rgb(50 48 39);
-    --color-inverse-on-surface: rgb(246 240 226);
-    --color-inverse-primary: rgb(214 200 113);
-    --color-primary-fixed: rgb(243 228 138);
-    --color-on-primary-fixed: rgb(32 28 0);
-    --color-primary-fixed-dim: rgb(214 200 113);
-    --color-on-primary-fixed-variant: rgb(80 71 0);
-    --color-secondary-fixed: rgb(235 227 189);
-    --color-on-secondary-fixed: rgb(31 28 5);
-    --color-secondary-fixed-dim: rgb(207 199 162);
-    --color-on-secondary-fixed-variant: rgb(76 71 43);
-    --color-tertiary-fixed: rgb(195 236 210);
-    --color-on-tertiary-fixed: rgb(0 33 18);
-    --color-tertiary-fixed-dim: rgb(167 208 183);
-    --color-on-tertiary-fixed-variant: rgb(41 78 59);
-    --color-surface-dim: rgb(223 218 204);
-    --color-surface-bright: rgb(255 249 235);
+    --color-inverse-surface: rgb(52 48 39);
+    --color-inverse-on-surface: rgb(248 240 227);
+    --color-inverse-primary: rgb(229 196 80);
+    --color-primary-fixed: rgb(255 224 126);
+    --color-on-primary-fixed: rgb(35 27 0);
+    --color-primary-fixed-dim: rgb(229 196 80);
+    --color-on-primary-fixed-variant: rgb(86 69 0);
+    --color-secondary-fixed: rgb(245 225 169);
+    --color-on-secondary-fixed: rgb(35 27 0);
+    --color-secondary-fixed-dim: rgb(216 197 143);
+    --color-on-secondary-fixed-variant: rgb(82 70 28);
+    --color-tertiary-fixed: rgb(206 238 137);
+    --color-on-tertiary-fixed: rgb(20 31 0);
+    --color-tertiary-fixed-dim: rgb(178 210 112);
+    --color-on-tertiary-fixed-variant: rgb(56 78 0);
+    --color-surface-dim: rgb(224 217 204);
+    --color-surface-bright: rgb(255 248 240);
     --color-surface-container-lowest: rgb(255 255 255);
-    --color-surface-container-low: rgb(249 243 229);
-    --color-surface-container: rgb(243 237 224);
-    --color-surface-container-high: rgb(237 232 218);
-    --color-surface-container-highest: rgb(231 226 213);
+    --color-surface-container-low: rgb(250 243 229);
+    --color-surface-container: rgb(245 237 224);
+    --color-surface-container-high: rgb(239 231 218);
+    --color-surface-container-highest: rgb(233 226 213);
   }
 
   [data-theme="dark"] {
-    --color-primary: rgb(214 200 113);
-    --color-surface-tint: rgb(214 200 113);
-    --color-on-primary: rgb(55 49 0);
-    --color-primary-container: rgb(80 71 0);
-    --color-on-primary-container: rgb(243 228 138);
-    --color-secondary: rgb(207 199 162);
-    --color-on-secondary: rgb(53 49 23);
-    --color-secondary-container: rgb(76 71 43);
-    --color-on-secondary-container: rgb(235 227 189);
-    --color-tertiary: rgb(167 208 183);
-    --color-on-tertiary: rgb(17 55 37);
-    --color-tertiary-container: rgb(41 78 59);
-    --color-on-tertiary-container: rgb(195 236 210);
+    --color-primary: rgb(255 235 176);
+    --color-surface-tint: rgb(229 196 80);
+    --color-on-primary: rgb(59 47 0);
+    --color-primary-container: rgb(239 205 88);
+    --color-on-primary-container: rgb(107 86 0);
+    --color-secondary: rgb(216 197 143);
+    --color-on-secondary: rgb(58 47 7);
+    --color-secondary-container: rgb(85 72 30);
+    --color-on-secondary-container: rgb(201 183 130);
+    --color-tertiary: rgb(215 248 145);
+    --color-on-tertiary: rgb(37 54 0);
+    --color-tertiary-container: rgb(187 219 120);
+    --color-on-tertiary-container: rgb(71 96 7);
     --color-error: rgb(255 180 171);
     --color-on-error: rgb(105 0 5);
     --color-error-container: rgb(147 0 10);
     --color-on-error-container: rgb(255 218 214);
-    --color-background: rgb(21 19 12);
-    --color-on-background: rgb(231 226 213);
-    --color-surface: rgb(21 19 12);
-    --color-on-surface: rgb(231 226 213);
-    --color-surface-variant: rgb(74 71 57);
-    --color-on-surface-variant: rgb(204 198 181);
-    --color-outline: rgb(149 145 129);
-    --color-outline-variant: rgb(74 71 57);
+    --color-background: rgb(22 19 12);
+    --color-on-background: rgb(233 226 213);
+    --color-surface: rgb(22 19 12);
+    --color-on-surface: rgb(233 226 213);
+    --color-surface-variant: rgb(76 70 54);
+    --color-on-surface-variant: rgb(207 198 176);
+    --color-outline: rgb(152 144 124);
+    --color-outline-variant: rgb(76 70 54);
     --color-shadow: rgb(0 0 0);
     --color-scrim: rgb(0 0 0);
-    --color-inverse-surface: rgb(231 226 213);
-    --color-inverse-on-surface: rgb(50 48 39);
-    --color-inverse-primary: rgb(105 95 18);
-    --color-primary-fixed: rgb(243 228 138);
-    --color-on-primary-fixed: rgb(32 28 0);
-    --color-primary-fixed-dim: rgb(214 200 113);
-    --color-on-primary-fixed-variant: rgb(80 71 0);
-    --color-secondary-fixed: rgb(235 227 189);
-    --color-on-secondary-fixed: rgb(31 28 5);
-    --color-secondary-fixed-dim: rgb(207 199 162);
-    --color-on-secondary-fixed-variant: rgb(76 71 43);
-    --color-tertiary-fixed: rgb(195 236 210);
-    --color-on-tertiary-fixed: rgb(0 33 18);
-    --color-tertiary-fixed-dim: rgb(167 208 183);
-    --color-on-tertiary-fixed-variant: rgb(41 78 59);
-    --color-surface-dim: rgb(21 19 12);
-    --color-surface-bright: rgb(59 57 48);
+    --color-inverse-surface: rgb(233 226 213);
+    --color-inverse-on-surface: rgb(52 48 39);
+    --color-inverse-primary: rgb(114 92 0);
+    --color-primary-fixed: rgb(255 224 126);
+    --color-on-primary-fixed: rgb(35 27 0);
+    --color-primary-fixed-dim: rgb(229 196 80);
+    --color-on-primary-fixed-variant: rgb(86 69 0);
+    --color-secondary-fixed: rgb(245 225 169);
+    --color-on-secondary-fixed: rgb(35 27 0);
+    --color-secondary-fixed-dim: rgb(216 197 143);
+    --color-on-secondary-fixed-variant: rgb(82 70 28);
+    --color-tertiary-fixed: rgb(206 238 137);
+    --color-on-tertiary-fixed: rgb(20 31 0);
+    --color-tertiary-fixed-dim: rgb(178 210 112);
+    --color-on-tertiary-fixed-variant: rgb(56 78 0);
+    --color-surface-dim: rgb(22 19 12);
+    --color-surface-bright: rgb(61 57 48);
     --color-surface-container-lowest: rgb(16 14 7);
-    --color-surface-container-low: rgb(29 28 19);
-    --color-surface-container: rgb(33 32 23);
-    --color-surface-container-high: rgb(44 42 33);
-    --color-surface-container-highest: rgb(55 53 44);
+    --color-surface-container-low: rgb(30 27 19);
+    --color-surface-container: rgb(34 31 23);
+    --color-surface-container-high: rgb(45 42 33);
+    --color-surface-container-highest: rgb(56 52 44);
   }
 }
diff --git a/app/themes/laszlo/assets/css/02-element/body.css b/app/themes/laszlo/assets/css/02-element/body.css
index 2ee2965d0..b9467dbbf 100644
--- a/app/themes/laszlo/assets/css/02-element/body.css
+++ b/app/themes/laszlo/assets/css/02-element/body.css
@@ -1,11 +1,21 @@
 @layer element {
   :root {
     --page-background-color: var(--color-surface-container);
+    --page-background-image:
+      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25'><filter id='noise'><feTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.1'/></svg%3E"),
+      radial-gradient(
+        at 50%,
+        var(--color-surface-bright) 20%,
+        var(--color-surface-dim) 120%
+      );
   }
 
   body {
     color: var(--color-on-surface);
     background: var(--page-background-color);
+    background-image: var(--page-background-image);
+    background-attachment: fixed;
+    background-position: center;
     font: var(--typography-body-large);
   }
 }
diff --git a/app/themes/laszlo/assets/css/02-element/code.css b/app/themes/laszlo/assets/css/02-element/code.css
index 87059b21d..c3824f484 100644
--- a/app/themes/laszlo/assets/css/02-element/code.css
+++ b/app/themes/laszlo/assets/css/02-element/code.css
@@ -1,13 +1,9 @@
 @layer element {
   code {
-    color: var(--color-on-surface-variant);
+    color: var(--color-on-surface);
     border: 1px solid var(--color-outline-variant);
     border-radius: var(--spacing-1);
-    background: color-mix(
-      in sRGB,
-      var(--color-surface-container-lowest),
-      transparent
-    );
+    background: var(--color-surface-container-low);
     box-decoration-break: clone;
     font: var(--typography-code);
   }
@@ -16,6 +12,8 @@
     display: block;
     overflow-x: auto;
     padding: var(--spacing-5);
+    border-radius: var(--spacing-2);
+    background: var(--color-surface-container-lowest);
   }
 
   :not(pre) > code {
diff --git a/app/themes/laszlo/assets/css/02-element/mark.css b/app/themes/laszlo/assets/css/02-element/mark.css
index 3aea68386..5a67ffa1c 100644
--- a/app/themes/laszlo/assets/css/02-element/mark.css
+++ b/app/themes/laszlo/assets/css/02-element/mark.css
@@ -1,8 +1,10 @@
 @layer element {
   mark {
     padding: 0.25ch 0.5ch;
-    color: var(--color-on-primary-container);
-    background-color: var(--color-primary-container);
+    color: var(--color-on-primary-fixed);
+    background-color: var(--color-tertiary-container);
+    box-decoration-break: clone;
+    box-shadow: 0 2px 0 var(--color-tertiary);
   }
 
   mark > * {
diff --git a/app/themes/laszlo/assets/css/03-component/form/comment-comment-node-blog-entry-form.css b/app/themes/laszlo/assets/css/03-component/form/comment-comment-node-blog-entry-form.css
index bcf569199..e25e4c8d5 100644
--- a/app/themes/laszlo/assets/css/03-component/form/comment-comment-node-blog-entry-form.css
+++ b/app/themes/laszlo/assets/css/03-component/form/comment-comment-node-blog-entry-form.css
@@ -5,7 +5,7 @@
     padding: var(--spacing-6);
     border: 1px solid var(--color-surface-dim);
     border-radius: var(--spacing-4);
-    background: var(--color-surface-container);
+    background: var(--color-surface-container-low);
     gap: var(--spacing-6);
   }
 
diff --git a/app/themes/laszlo/assets/css/03-component/ui/prose.css b/app/themes/laszlo/assets/css/03-component/ui/prose.css
index ca7cdf562..2fa4fc25d 100644
--- a/app/themes/laszlo/assets/css/03-component/ui/prose.css
+++ b/app/themes/laszlo/assets/css/03-component/ui/prose.css
@@ -1,12 +1,30 @@
 @layer component.ui {
   .prose {
-    --prose-list-vertical-spacing: 1ch;
-    --prose-list-horizontal-spacing: 3ch;
+    --prose-vertical-spacing: 2ch;
+    --prose-list-vertical-spacing: 0.5ch;
+    --prose-list-horizontal-spacing: 2ch;
+    --prose-color: var(--color-on-surface-variant);
+    --prose-secondary-color: var(--color-on-surface);
 
-    display: flex;
-    flex-direction: column;
-    gap: 2ch;
     width: 100%;
+    color: var(--prose-color);
+  }
+
+  .prose > * {
+    margin-block: var(--prose-vertical-spacing);
+
+    &:first-child {
+      margin-block-start: 0;
+    }
+
+    &:last-child {
+      margin-block-end: 0;
+    }
+  }
+
+  .prose h2 {
+    padding-bottom: 0.5ch;
+    border-bottom: 1px solid var(--color-surface-container-high);
   }
 
   .prose h2,
@@ -14,9 +32,9 @@
   .prose h4,
   .prose h5,
   .prose h6 {
-    margin-top: 1ch;
-    padding-bottom: 1ch;
-    border-bottom: 1px solid var(--color-surface-container-high);
+    margin-top: calc(var(--prose-vertical-spacing) + 1ch);
+    color: var(--prose-secondary-color);
+    font-weight: 500;
   }
 
   .prose h2:first-child,
@@ -53,7 +71,6 @@
   .prose ul,
   .prose ol {
     padding-inline-start: var(--prose-list-horizontal-spacing);
-    margin-block: calc(var(--prose-list-vertical-spacing) * -1);
   }
 
   .prose li > ul,
@@ -62,7 +79,7 @@
 
     &::before {
       position: absolute;
-      left: calc(var(--prose-list-horizontal-spacing) / -2);
+      left: calc(-1.5ch + 1px);
       height: 100%;
       content: "";
       border-left: 1px solid var(--color-outline-variant);
@@ -88,7 +105,7 @@
       var(--spacing-8)
     );
     border: 1px solid var(--color-outline-variant);
-    border-radius: var(--spacing-3);
+    border-radius: var(--spacing-4);
     background: var(--color-surface-container-low);
     gap: clamp(var(--spacing-2), calc(0.2727rem + 0.9697vw), var(--spacing-8));
   }
diff --git a/app/themes/laszlo/assets/css/03-component/ui/tooltip.css b/app/themes/laszlo/assets/css/03-component/ui/tooltip.css
index dcbcd71b2..62ebbfec6 100644
--- a/app/themes/laszlo/assets/css/03-component/ui/tooltip.css
+++ b/app/themes/laszlo/assets/css/03-component/ui/tooltip.css
@@ -10,10 +10,10 @@
   border-radius: var(--spacing-3);
   background: color-mix(in sRGB, var(--color-background), transparent);
   box-shadow:
-    rgb(0 0 0 / 0.08) 0 12px 24px -4px,
-    rgb(0 0 0 / 0.04) 0 8px 16px -4px;
+    color-mix(in sRGB, var(--color-shadow), transparent 95%) 0 4px 16px,
+    color-mix(in sRGB, var(--color-shadow), transparent 99%) 0 8px 32px;
   font: var(--typography-body-medium);
-  backdrop-filter: blur(20px);
+  backdrop-filter: blur(24px);
 }
 
 .tooltip .footnote-backref {
diff --git a/app/themes/laszlo/components/content/article-card/article-card.css b/app/themes/laszlo/components/content/article-card/article-card.css
index 69c935273..87546ddbc 100644
--- a/app/themes/laszlo/components/content/article-card/article-card.css
+++ b/app/themes/laszlo/components/content/article-card/article-card.css
@@ -10,15 +10,18 @@
     padding: var(--spacing-4);
     transition: all 0.25s cubic-bezier(0.39, 0.58, 0.57, 1);
     color: var(--color-on-surface);
-    border: 1px solid var(--color-surface-variant);
+    border: 1px solid var(--color-outline-variant);
     border-radius: var(--spacing-4);
     outline: var(--default-focus-outline-width) solid transparent;
-    background: var(--color-surface-bright);
+    background: var(--color-surface);
     gap: var(--spacing-6);
+    box-shadow: color-mix(in sRGB, var(--color-shadow), transparent 90%) 0 2px
+      8px 0;
 
     &:focus-within,
     &:hover,
     &:active {
+      border-color: transparent;
       outline: var(--default-focus-outline);
       background-color: var(--color-surface-container-highest);
     }
diff --git a/app/themes/laszlo/components/content/article/article.css b/app/themes/laszlo/components/content/article/article.css
index 019f5c09d..e717cab1b 100644
--- a/app/themes/laszlo/components/content/article/article.css
+++ b/app/themes/laszlo/components/content/article/article.css
@@ -9,12 +9,31 @@
       --article-main-background,
       var(--color-surface, transparent)
     );
+    --article-border: 1px solid var(--color-outline-variant);
+    --article-border-radius: var(--spacing-4);
+    --article-box-shadow:
+      color-mix(in sRGB, var(--color-shadow), transparent 95%) 0px 4px 16px,
+      color-mix(in sRGB, var(--color-shadow), transparent 99%) 0px 8px 32px;
 
     display: flex;
     flex-direction: column;
     gap: var(--_article-spacing);
   }
 
+  .article__main-pane {
+    overflow: clip;
+    border-top: var(--article-border);
+    border-bottom: var(--article-border);
+    border-radius: var(--article-border-radius);
+    box-shadow: var(--article-box-shadow);
+    margin-inline: calc(var(--page-side-gap) * -1);
+
+    @media screen and (min-width: 640px) {
+      margin-inline: initial;
+      border: var(--article-border);
+    }
+  }
+
   .article__header {
     position: relative;
     display: flex;
@@ -22,16 +41,14 @@
     flex-flow: column;
     align-items: flex-start;
     padding: var(--spacing-4);
-    border: 1px solid var(--color-surface-variant);
-    border-bottom: unset;
-    border-radius: var(--spacing-4) var(--spacing-4) 0 0;
+    border-bottom: var(--article-border);
     background-color: color-mix(
       in sRGB,
       var(--_article-header-background),
       transparent 20%
     );
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25'><filter id='noise'><feTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='1' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.1'/></svg%3E");
     gap: var(--spacing-6);
-    margin-inline: calc(var(--page-side-gap) * -1);
 
     &::before {
       position: absolute;
@@ -46,9 +63,9 @@
       content: "";
       animation: article-header-rgb-gamer-edition linear 60s infinite;
       filter: blur(var(--spacing-16)) saturate(280%);
-      background: var(--background-image);
+      background-image: var(--background-image);
       background-position: center;
-      background-size: cover;
+      aspect-ratio: 1/1;
     }
 
     @media screen and (min-width: 640px) {
@@ -102,13 +119,9 @@
     display: flex;
     flex-flow: wrap;
     align-items: flex-start;
-    margin-top: calc(var(--_article-spacing) * -1);
     padding: var(--spacing-4);
-    border: 1px solid var(--color-surface-variant);
-    border-radius: 0 0 var(--spacing-4) var(--spacing-4);
     background-color: var(--_article-main-background);
     gap: var(--spacing-6);
-    margin-inline: calc(var(--page-side-gap) * -1);
 
     @media screen and (min-width: 640px) {
       margin-inline: initial;
@@ -146,6 +159,7 @@
 
     @media screen and (min-width: 640px) {
       flex-flow: row;
+      align-items: center;
     }
   }
 
@@ -188,15 +202,18 @@
     flex-direction: column;
     align-items: center;
     padding: var(--spacing-4) var(--spacing-2);
-    border: 1px solid var(--color-surface-variant);
+    border-top: var(--article-border);
+    border-bottom: var(--article-border);
     border-radius: var(--spacing-4);
-    background-color: var(--color-surface-container-low);
+    background-color: var(--_article-main-background);
     gap: var(--spacing-6);
     margin-inline: calc(var(--page-side-gap) * -1);
+    box-shadow: var(--article-box-shadow);
 
     @media screen and (min-width: 640px) {
       padding: var(--spacing-4);
       margin-inline: initial;
+      border: var(--article-border);
     }
 
     @media screen and (min-width: 1200px) {
diff --git a/app/themes/laszlo/components/content/article/article.twig b/app/themes/laszlo/components/content/article/article.twig
index e3b12fd28..1a1ad3686 100644
--- a/app/themes/laszlo/components/content/article/article.twig
+++ b/app/themes/laszlo/components/content/article/article.twig
@@ -1,104 +1,106 @@
 <article{{ attributes.addClass('article') }}>
-  <header class="article__header" style="--background-image: url({{ poster_uri|image_style('200x264') }})">
-    {% include 'laszlo:image' with {
-      attributes: create_attribute({
-        class: ['article__poster'],
-      }),
-      src: poster_uri|image_style('200x264'),
-      width: 200,
-      height: 264,
-      alt: title,
-      loading: 'eager',
-      sizes: [
-        '200px',
-      ],
-      srcset: {
-        '200w': poster_uri|image_style('200x264'),
-        '400w': poster_uri|image_style('400x528'),
-      }
-    } only %}
-
-    <div class="article__info">
-      <div class="article__breadcrumbs">
-        {{ drupal_breadcrumb() }}
-      </div>
-      <h1 class="article__title">{{ title }}</h1>
-      <div class="article__summary">
-        {% block summary %}{% endblock %}
-      </div>
+  <div class="article__main-pane">
+    <header class="article__header" style="--background-image: url({{ poster_uri|image_style('200x264') }})">
+      {% include 'laszlo:image' with {
+        attributes: create_attribute({
+          class: ['article__poster'],
+        }),
+        src: poster_uri|image_style('200x264'),
+        width: 200,
+        height: 264,
+        alt: title,
+        loading: 'eager',
+        sizes: [
+          '200px',
+        ],
+        srcset: {
+          '200w': poster_uri|image_style('200x264'),
+          '400w': poster_uri|image_style('400x528'),
+        }
+      } only %}
 
-      {% if tags %}
-        <div class="article__tags">
-          {{ tags }}
+      <div class="article__info">
+        <div class="article__breadcrumbs">
+          {{ drupal_breadcrumb() }}
+        </div>
+        <h1 class="article__title">{{ title }}</h1>
+        <div class="article__summary">
+          {% block summary %}{% endblock %}
         </div>
-      {% endif %}
 
-      <div class="article__meta">
-        {% include 'laszlo:meta' with {
-          icon: 'calendar',
-          label: 'Published'|t,
-          value: published_timestamp|format_date('dmy'),
-        } only %}
-        <span class="article__meta-separator">•</span>
-        {% include 'laszlo:meta' with {
-          icon: 'read-time',
-          label: 'Time to read'|t,
-          value: '@minutes min.'|t({'@minutes': estimated_read_time}),
-        } only %}
+        {% if tags %}
+          <div class="article__tags">
+            {{ tags }}
+          </div>
+        {% endif %}
+
+        <div class="article__meta">
+          {% include 'laszlo:meta' with {
+            icon: 'calendar',
+            label: 'Published'|t,
+            value: published_timestamp|format_date('dmy'),
+          } only %}
+          <span class="article__meta-separator">•</span>
+          {% include 'laszlo:meta' with {
+            icon: 'read-time',
+            label: 'Time to read'|t,
+            value: '@minutes min.'|t({'@minutes': estimated_read_time}),
+          } only %}
+        </div>
       </div>
-    </div>
-  </header>
+    </header>
 
-  <div class="article__main">
-    <aside class="article__sidebar">
-      {% if toc_links %}
+    <div class="article__main">
+      <aside class="article__sidebar">
+        {% if toc_links %}
+          {% include 'laszlo:fab' with {
+            attributes: create_attribute({
+              'class': ['article__sidebar-fab'],
+              'x-data': '',
+              '@click.prevent': "$dispatch('show-toc')",
+            }),
+            label: 'Table of Contents'|t,
+            icon: 'notebook-bookmark-bold-duotone',
+          } only %}
+        {% endif %}
         {% include 'laszlo:fab' with {
           attributes: create_attribute({
             'class': ['article__sidebar-fab'],
             'x-data': '',
-            '@click.prevent': "$dispatch('show-toc')",
+            '@click.prevent': "$dispatch('show-share')",
           }),
-          label: 'Table of Contents'|t,
-          icon: 'notebook-bookmark-bold-duotone',
+          label: 'Share'|t,
+          icon: 'square-share-line-bold-duotone',
         } only %}
-      {% endif %}
-      {% include 'laszlo:fab' with {
-        attributes: create_attribute({
-          'class': ['article__sidebar-fab'],
-          'x-data': '',
-          '@click.prevent': "$dispatch('show-share')",
-        }),
-        label: 'Share'|t,
-        icon: 'square-share-line-bold-duotone',
-      } only %}
-      {% include 'laszlo:fab' with {
-        attributes: create_attribute({
-          'class': ['article__sidebar-fab'],
-        }),
-        label: 'Comments'|t,
-        icon: 'chat-round-dots-bold-duotone',
-        url: '#comments',
-        counter: comment_count,
-      } only %}
-    </aside>
+        {% include 'laszlo:fab' with {
+          attributes: create_attribute({
+            'class': ['article__sidebar-fab'],
+          }),
+          label: 'Comments'|t,
+          icon: 'chat-round-dots-bold-duotone',
+          url: '#comments',
+          counter: comment_count,
+        } only %}
+      </aside>
 
-    <section class="prose article__content">
-      {% block content %}{% endblock %}
+      <section class="prose article__content">
+        {% block content %}{% endblock %}
 
-      {% if attachments %}
-        <h2>{{ 'Files'|t }}</h2>
-        <div class="article__attachments">
-          {% for attachment in attachments %}
-            {% include 'laszlo:attachment-file' with {
-              label: attachment.media_label,
-              filename: attachment.filename,
-              file_uri: attachment.file_uri,
-              size: attachment.size,
-            } only %}
-          {% endfor %}
-        </div>
-      {% endif %}
-    </section>
+        {% if attachments %}
+          <h2>{{ 'Files'|t }}</h2>
+          <div class="article__attachments">
+            {% for attachment in attachments %}
+              {% include 'laszlo:attachment-file' with {
+                label: attachment.media_label,
+                filename: attachment.filename,
+                file_uri: attachment.file_uri,
+                size: attachment.size,
+              } only %}
+            {% endfor %}
+          </div>
+        {% endif %}
+      </section>
+    </div>
   </div>
 
   {% if next_link or previous_link %}
diff --git a/app/themes/laszlo/components/content/comment-card/comment-card.css b/app/themes/laszlo/components/content/comment-card/comment-card.css
index d8760da2f..baba443fa 100644
--- a/app/themes/laszlo/components/content/comment-card/comment-card.css
+++ b/app/themes/laszlo/components/content/comment-card/comment-card.css
@@ -10,11 +10,13 @@
     padding: var(--spacing-6);
     transition: all 0.25s cubic-bezier(0.39, 0.58, 0.57, 1);
     color: var(--color-on-surface);
-    border: 1px solid var(--color-surface-variant);
+    border: 1px solid var(--color-outline-variant);
     border-radius: var(--spacing-4);
     outline: var(--default-focus-outline-width) solid transparent;
     background: var(--color-surface);
     gap: var(--spacing-6);
+    box-shadow: color-mix(in sRGB, var(--color-shadow), transparent 90%) 0 2px
+      8px 0;
 
     &:focus-within,
     &:hover,
diff --git a/app/themes/laszlo/components/content/comment/comment.css b/app/themes/laszlo/components/content/comment/comment.css
index cb7559cc1..0f055650e 100644
--- a/app/themes/laszlo/components/content/comment/comment.css
+++ b/app/themes/laszlo/components/content/comment/comment.css
@@ -8,15 +8,12 @@
     color: var(--color-on-surface);
     border: 1px solid var(--color-surface-dim);
     border-radius: var(--spacing-2);
-    background: var(--color-surface-bright);
+    background: var(--color-surface-container-low);
     gap: var(--_comment-gap);
   }
 
   .comment__body {
-    display: flex;
-    flex-direction: column;
     font: var(--typography-body-medium);
-    gap: var(--spacing-4);
   }
 
   .comment__attribution {
diff --git a/app/themes/laszlo/components/content/home-cards/home-cards.css b/app/themes/laszlo/components/content/home-cards/home-cards.css
index 70ba06579..772e599ad 100644
--- a/app/themes/laszlo/components/content/home-cards/home-cards.css
+++ b/app/themes/laszlo/components/content/home-cards/home-cards.css
@@ -68,6 +68,8 @@
   }
 
   .home-cards__description {
+    --prose-color: var(--color-on-secondary);
+
     font: var(--typography-body-medium);
   }
 }
diff --git a/app/themes/laszlo/components/content/search-result/search-result.css b/app/themes/laszlo/components/content/search-result/search-result.css
index 598b20c17..ba52b3d31 100644
--- a/app/themes/laszlo/components/content/search-result/search-result.css
+++ b/app/themes/laszlo/components/content/search-result/search-result.css
@@ -4,10 +4,12 @@
     display: flex;
     flex-direction: column;
     padding: var(--spacing-4);
-    border: 1px solid var(--color-surface-variant);
+    border: 1px solid var(--color-outline-variant);
     border-radius: var(--spacing-4);
     background-color: var(--color-surface);
     gap: var(--spacing-2);
+    box-shadow: color-mix(in sRGB, var(--color-shadow), transparent 90%) 0 2px
+      8px 0;
 
     &:focus-within,
     &:hover,
diff --git a/app/themes/laszlo/components/content/tag-card/tag-card.css b/app/themes/laszlo/components/content/tag-card/tag-card.css
index 93d6ca1e6..8337f348e 100644
--- a/app/themes/laszlo/components/content/tag-card/tag-card.css
+++ b/app/themes/laszlo/components/content/tag-card/tag-card.css
@@ -6,6 +6,7 @@
     padding: var(--spacing-4);
     transition: background-color 0.25s linear;
     color: var(--color-on-surface);
+    border: 1px solid var(--color-outline-variant);
     border-radius: var(--spacing-2);
     background: var(--color-surface);
     gap: var(--spacing-2);
@@ -23,7 +24,7 @@
     right: 0;
     bottom: 0;
     left: 0;
-    border-radius: var(--spacing-4);
+    border-radius: var(--spacing-2);
 
     &:active {
       outline: var(--default-focus-outline);
diff --git a/app/themes/laszlo/components/layout/author-page/author-page.css b/app/themes/laszlo/components/layout/author-page/author-page.css
index 6ceb717a8..8bef3c26a 100644
--- a/app/themes/laszlo/components/layout/author-page/author-page.css
+++ b/app/themes/laszlo/components/layout/author-page/author-page.css
@@ -16,9 +16,12 @@
     flex-direction: column;
     order: 2;
     padding: var(--page-side-gap);
-    border: 1px solid var(--color-surface-variant);
+    border: 1px solid var(--color-outline-variant);
     border-radius: var(--spacing-4);
     background-color: var(--color-surface);
+    box-shadow:
+      color-mix(in sRGB, var(--color-shadow), transparent 95%) 0 4px 16px,
+      color-mix(in sRGB, var(--color-shadow), transparent 99%) 0 8px 32px;
     gap: var(--author-page-content-gap);
     margin-inline: calc(var(--page-side-gap) * -1);
 
diff --git a/app/themes/laszlo/components/layout/comment-reply-page/comment-reply-page.css b/app/themes/laszlo/components/layout/comment-reply-page/comment-reply-page.css
index ac9ecff29..a58d06fe4 100644
--- a/app/themes/laszlo/components/layout/comment-reply-page/comment-reply-page.css
+++ b/app/themes/laszlo/components/layout/comment-reply-page/comment-reply-page.css
@@ -5,7 +5,7 @@
     align-items: center;
     padding: var(--spacing-16) var(--spacing-12);
     border-radius: var(--spacing-4);
-    background-color: var(--color-surface-container, transparent);
+    background-color: var(--color-surface);
   }
 
   .comment-reply-page__inner {
diff --git a/app/themes/laszlo/components/ui/author-page-navigation-item/author-page-navigation-item.css b/app/themes/laszlo/components/ui/author-page-navigation-item/author-page-navigation-item.css
index 207b848ef..b3f04e503 100644
--- a/app/themes/laszlo/components/ui/author-page-navigation-item/author-page-navigation-item.css
+++ b/app/themes/laszlo/components/ui/author-page-navigation-item/author-page-navigation-item.css
@@ -6,6 +6,8 @@
     --button-color-hover: var(--color-surface);
     --button-height: var(--spacing-15);
     --button-gap: var(--spacing-4);
+    --button-border-color: var(--color-outline-variant);
+    --button-border-width: 1px;
   }
 
   .author-page-navigation-item__icon {
@@ -17,7 +19,7 @@
   }
 
   .author-page-navigation-item--active-trail {
-    color: var(--color-on-primary-container);
-    background-color: var(--button-background-color-hover);
+    --button-background-color: var(--color-primary-container);
+    --button-color: var(--color-on-primary-container);
   }
 }
diff --git a/app/themes/laszlo/components/ui/branding/branding.css b/app/themes/laszlo/components/ui/branding/branding.css
index dc16e596e..b4e822bdc 100644
--- a/app/themes/laszlo/components/ui/branding/branding.css
+++ b/app/themes/laszlo/components/ui/branding/branding.css
@@ -1,7 +1,7 @@
 @layer component.ui {
   .branding {
-    --logo-color-primary: var(--color-primary);
-    --logo-color-secondary: white;
+    --logo-color-primary: var(--color-surface-tint);
+    --logo-color-secondary: var(--color-surface-container-lowest);
     --logo-fill-1: color-mix(
       in sRGB,
       var(--logo-color-primary),
@@ -17,7 +17,7 @@
       var(--logo-color-primary),
       var(--logo-color-secondary) 90%
     );
-    --logo-fill-4: var(--logo-color-primary);
+    --logo-fill-4: var(--color-primary);
 
     display: flex;
     flex-shrink: 0;
@@ -26,12 +26,6 @@
     gap: var(--spacing-5);
   }
 
-  [data-theme="dark"] {
-    .branding {
-      --logo-color-secondary: black;
-    }
-  }
-
   .branding svg {
     width: 64px;
   }
@@ -51,7 +45,7 @@
   }
 
   .branding__slogan {
-    color: var(--color-on-surface);
+    color: var(--color-on-surface-variant);
     font: var(--typography-title-small);
   }
 }
diff --git a/app/themes/laszlo/components/ui/breadcrumb-item/breadcrumb-item.css b/app/themes/laszlo/components/ui/breadcrumb-item/breadcrumb-item.css
index 050a75c49..4621edabf 100644
--- a/app/themes/laszlo/components/ui/breadcrumb-item/breadcrumb-item.css
+++ b/app/themes/laszlo/components/ui/breadcrumb-item/breadcrumb-item.css
@@ -1,8 +1,10 @@
 @layer component.ui {
   .breadcrumb-item {
     --arrow-size: var(--spacing-3);
-    --arrow-background-color: var(--color-surface-bright);
+    --arrow-background-color: var(--color-surface-container-low);
+    --arrow-background-color-hover: var(--color-surface);
     --arrow-color: var(--color-on-surface);
+    --arrow-color-hover: var(--color-on-surface);
     --arrow-border-radius: var(--spacing-1);
     --arrow-padding: var(--spacing-2);
 
@@ -16,7 +18,12 @@
       background-color 150ms ease-in-out;
     text-decoration: none;
     color: var(--arrow-color);
-    background-color: var(--arrow-background-color);
+    background-color: color-mix(
+      in sRGB,
+      var(--arrow-background-color),
+      transparent 50%
+    );
+    backdrop-filter: blur(var(--spacing-4));
     font: var(--typography-label-large);
     clip-path: polygon(
       calc(100% - var(--arrow-size)) 0%,
@@ -29,9 +36,9 @@
 
     &:hover,
     &:focus {
-      color: var(--arrow-background-color);
+      color: var(--arrow-color-hover);
       outline: none;
-      background-color: var(--arrow-color);
+      background-color: var(--arrow-background-color-hover);
     }
   }
 
diff --git a/app/themes/laszlo/components/ui/button/button.css b/app/themes/laszlo/components/ui/button/button.css
index feab5d923..7b722f46b 100644
--- a/app/themes/laszlo/components/ui/button/button.css
+++ b/app/themes/laszlo/components/ui/button/button.css
@@ -8,6 +8,7 @@
       --button-background-color-hover,
       transparent
     );
+    --_button-border-width: var(--button-border-width, 2px);
     --_button-border-color: var(--button-border-color, transparent);
     --_button-border-color-hover: var(--button-border-color-hover, transparent);
     --_button-color: var(--button-color, black);
@@ -24,7 +25,7 @@
     transition: all 250ms cubic-bezier(0.39, 0.58, 0.57, 1);
     text-decoration: none;
     color: var(--_button-color);
-    border: 2px solid var(--_button-border-color);
+    border: var(--_button-border-width) solid var(--_button-border-color);
     border-radius: var(--_button-border-radius);
     background: var(--_button-background-color);
     font: var(--_button-font);
diff --git a/app/themes/laszlo/components/ui/callout/callout.css b/app/themes/laszlo/components/ui/callout/callout.css
index d81c9f4c8..6d167fd6f 100644
--- a/app/themes/laszlo/components/ui/callout/callout.css
+++ b/app/themes/laszlo/components/ui/callout/callout.css
@@ -2,25 +2,19 @@
   .callout {
     --_callout-expected-heading-height: 28px;
     --_callout-color: var(--callout-color, var(--color-scrim));
-    --_callout-border-color: color-mix(
-      in sRGB,
-      var(--_callout-color),
-      var(--color-surface) 30%
-    );
-    --icon-wrapper-width: 18px;
+    --icon-wrapper-width: 24px;
 
     display: flex;
     flex-direction: column;
-    margin-top: calc(var(--_callout-expected-heading-height) / 2);
-    padding: var(--spacing-4);
-    padding-top: 0;
+    padding: var(--spacing-6);
     color: var(--color-on-surface);
-    border: 1px solid var(--_callout-border-color);
-    border-radius: var(--spacing-1);
-    background-color: color-mix(
-      in sRGB,
-      var(--_callout-color),
-      var(--color-surface) 90%
+    border: 2px solid
+      color-mix(in sRGB, var(--_callout-color), var(--color-surface) 30%);
+    border-radius: var(--spacing-3);
+    background-image: linear-gradient(
+      to bottom,
+      color-mix(in sRGB, var(--_callout-color), var(--color-surface) 90%),
+      color-mix(in sRGB, var(--_callout-color), var(--color-surface) 85%)
     );
     gap: var(--spacing-4);
   }
@@ -30,16 +24,12 @@
     align-items: flex-start;
     align-self: flex-start;
     width: fit-content;
-    margin-top: calc(var(--_callout-expected-heading-height) / -2);
-    padding: var(--spacing-1) var(--spacing-2);
-    color: var(--color-on-surface);
-    border-radius: var(--spacing-1);
-    background-color: color-mix(
+    color: color-mix(
       in sRGB,
       var(--_callout-color),
-      var(--color-surface) 70%
+      var(--color-on-surface) 80%
     );
-    font: var(--typography-label-large);
+    font: var(--typography-title-medium);
     font-weight: bold;
     gap: var(--spacing-2);
   }
diff --git a/app/themes/laszlo/components/ui/chip/chip.css b/app/themes/laszlo/components/ui/chip/chip.css
index 3d9124cf4..311e8fe9e 100644
--- a/app/themes/laszlo/components/ui/chip/chip.css
+++ b/app/themes/laszlo/components/ui/chip/chip.css
@@ -5,17 +5,20 @@
     --_chip-gap: var(--chip-gap, var(--spacing-2));
     --_chip-background-color: var(
       --chip-background-color,
-      var(--color-surface-bright, transparent)
+      var(--color-secondary-container, transparent)
     );
     --_chip-background-color-hover: var(
       --chip-background-color-hover,
-      var(--color-surface-container-lowest, transparent)
+      var(--color-secondary, transparent)
     );
     --_chip-border-radius: var(--chip-border-radius, var(--spacing-5));
-    --_chip-color: var(--chip-color, var(--color-on-surface, black));
+    --_chip-color: var(
+      --chip-color,
+      var(--color-on-secondary-container, black)
+    );
     --_chip-color-hover: var(
       --chip-color-hover,
-      var(--color-on-surface, black)
+      var(--color-on-secondary, black)
     );
     --_chip-font: var(--chip-font, var(--typography-label-medium));
 
diff --git a/app/themes/laszlo/components/ui/code-block/code-block.css b/app/themes/laszlo/components/ui/code-block/code-block.css
index ed32fbde7..3d05a2df5 100644
--- a/app/themes/laszlo/components/ui/code-block/code-block.css
+++ b/app/themes/laszlo/components/ui/code-block/code-block.css
@@ -24,7 +24,7 @@
       pointer-events: none;
       opacity: 0;
       border-top: 1px solid var(--color-outline-variant);
-      border-radius: 0 0 var(--spacing-1) var(--spacing-1);
+      border-radius: 0 0 var(--spacing-2) var(--spacing-2);
       background: color-mix(
         in sRGB,
         var(--color-secondary-fixed),
diff --git a/app/themes/laszlo/components/ui/dialog/dialog.css b/app/themes/laszlo/components/ui/dialog/dialog.css
index 77c327d6c..3f7d53aad 100644
--- a/app/themes/laszlo/components/ui/dialog/dialog.css
+++ b/app/themes/laszlo/components/ui/dialog/dialog.css
@@ -16,7 +16,7 @@
   }
 
   .dialog::backdrop {
-    opacity: 0.7;
+    opacity: 0.3;
     background-color: var(--color-scrim);
   }
 
@@ -26,7 +26,8 @@
     width: 100%;
     color: var(--color-on-surface);
     border-radius: var(--dialog-radius, 8px);
-    background-color: var(--color-surface);
+    background-color: color-mix(in sRGB, var(--color-surface), transparent 30%);
+    backdrop-filter: blur(var(--spacing-6));
     box-shadow: var(--elevation-5);
     margin-inline: var(--page-side-gap);
     margin-block: var(--page-side-gap);
diff --git a/app/themes/laszlo/components/ui/fab/fab.css b/app/themes/laszlo/components/ui/fab/fab.css
index 8cda6b8bc..5ff24a3f5 100644
--- a/app/themes/laszlo/components/ui/fab/fab.css
+++ b/app/themes/laszlo/components/ui/fab/fab.css
@@ -1,12 +1,15 @@
 @layer component.ui {
   .fab {
-    --_background-color: var(--fab-background-color, var(--color-secondary));
+    --_background-color: var(
+      --fab-background-color,
+      var(--color-tertiary-container)
+    );
     --_background-color-hover: var(
       --fab-background-color-hover,
-      var(--color-secondary)
+      var(--color-tertiary)
     );
-    --_color: var(--fab-color, var(--color-on-secondary));
-    --_color-hover: var(--fab-color-hover, var(--color-on-secondary));
+    --_color: var(--fab-color, var(--color-on-tertiary-container));
+    --_color-hover: var(--fab-color-hover, var(--color-on-tertiary));
     --icon-wrapper-width: 32px;
     --_border-radius: var(--fab-border-radius, var(--spacing-4));
 
@@ -19,9 +22,7 @@
     margin: 0;
     padding: 0;
     cursor: pointer;
-    transition:
-      transform 0.15s linear,
-      box-shadow 0.15s linear;
+    transition: all 0.25s cubic-bezier(0.39, 0.58, 0.57, 1);
     color: var(--_color);
     border: none;
     border-radius: var(--_border-radius);
diff --git a/app/themes/laszlo/components/ui/lightbox/lightbox.css b/app/themes/laszlo/components/ui/lightbox/lightbox.css
index 04d13268a..22067f030 100644
--- a/app/themes/laszlo/components/ui/lightbox/lightbox.css
+++ b/app/themes/laszlo/components/ui/lightbox/lightbox.css
@@ -1,4 +1,9 @@
 @layer component.ui {
+  .lightbox {
+    display: flex;
+    justify-content: center;
+  }
+
   .lightbox__link {
     position: relative;
     display: flex;
@@ -17,13 +22,16 @@
 
     position: absolute;
     z-index: 5;
-    top: var(--spacing-8);
-    right: var(--spacing-8);
+    top: var(--spacing-2);
+    right: var(--spacing-2);
     transition: opacity 0.25s linear;
     opacity: 0;
+    border: 1px solid var(--color-outline-variant);
     border-radius: var(--spacing-2);
     background-color: var(--color-surface-container-low);
-    box-shadow: var(--elevation-5);
+    box-shadow:
+      color-mix(in sRGB, var(--color-scrim), transparent 90%) 0 10px 15px -3px,
+      color-mix(in sRGB, var(--color-scrim), transparent 95%) 0 4px 6px -2px;
   }
 
   .lightbox:hover .lightbox__icon {
diff --git a/app/themes/laszlo/components/ui/main-navigation/main-navigation.css b/app/themes/laszlo/components/ui/main-navigation/main-navigation.css
index bba02d61d..0781b0f94 100644
--- a/app/themes/laszlo/components/ui/main-navigation/main-navigation.css
+++ b/app/themes/laszlo/components/ui/main-navigation/main-navigation.css
@@ -17,7 +17,7 @@
     padding: var(--spacing-2);
     border-radius: var(--spacing-16);
     background: color-mix(in sRGB, var(--color-surface-tint), transparent 50%);
-    backdrop-filter: saturate(280%) blur(40px);
+    backdrop-filter: saturate(280%) blur(24px);
     gap: var(--spacing-4);
     box-shadow:
       rgb(17 17 26 / 0.1) 0 8px 24px,
diff --git a/app/themes/laszlo/components/ui/previous-next-link/previous-next-link.css b/app/themes/laszlo/components/ui/previous-next-link/previous-next-link.css
index 1ee6b36c9..82474f658 100644
--- a/app/themes/laszlo/components/ui/previous-next-link/previous-next-link.css
+++ b/app/themes/laszlo/components/ui/previous-next-link/previous-next-link.css
@@ -6,19 +6,18 @@
     align-items: center;
     padding: var(--spacing-6);
     text-decoration: none;
+    color: var(--color-on-surface);
+    border: 1px solid var(--color-outline-variant);
     border-radius: var(--spacing-4);
-    background: var(--color-surface-variant);
+    outline: var(--default-focus-outline-width) solid transparent;
+    background: var(--color-surface-container-high);
     gap: var(--spacing-4);
 
     &:hover,
     &:focus {
-      color: var(--color-on-surface);
+      color: var(--color-on-surface-variant);
       background-color: var(--color-surface-container-highest);
     }
-
-    &:active {
-      outline: var(--default-focus-outline);
-    }
   }
 
   .previous-next-link__icon {
@@ -37,12 +36,10 @@
   }
 
   .previous-next-link__label {
-    color: var(--color-on-surface);
     font: var(--typography-label-large);
   }
 
   .previous-next-link__text {
-    color: var(--color-on-surface);
     font: var(--typography-body-large);
   }
 }
diff --git a/app/themes/laszlo/components/ui/text-input/text-input.css b/app/themes/laszlo/components/ui/text-input/text-input.css
index 90777247b..29938cd39 100644
--- a/app/themes/laszlo/components/ui/text-input/text-input.css
+++ b/app/themes/laszlo/components/ui/text-input/text-input.css
@@ -12,7 +12,7 @@
     --_input-border-width: var(--input-border-width, 1px);
     --_input-background-color: var(
       --input-background-color,
-      var(--color-surface-bright)
+      var(--color-surface-container-lowest)
     );
     --_input-color: var(--input-color, var(--color-on-surface));
     --_input-placeholder-color: var(
diff --git a/app/themes/laszlo/components/ui/textarea/textarea.css b/app/themes/laszlo/components/ui/textarea/textarea.css
index c3625f649..da0582986 100644
--- a/app/themes/laszlo/components/ui/textarea/textarea.css
+++ b/app/themes/laszlo/components/ui/textarea/textarea.css
@@ -12,7 +12,7 @@
     --_textarea-border-width: var(--textarea-border-width, 1px);
     --_textarea-background-color: var(
       --textarea-background-color,
-      var(--color-surface-bright)
+      var(--color-surface-container-lowest)
     );
     --_textarea-color: var(--textarea-color, var(--color-on-surface));
     --_textarea-placeholder-color: var(
diff --git a/app/themes/laszlo/components/ui/toc-dialog/toc-dialog.css b/app/themes/laszlo/components/ui/toc-dialog/toc-dialog.css
index 2b3e08fde..1ee59adfa 100644
--- a/app/themes/laszlo/components/ui/toc-dialog/toc-dialog.css
+++ b/app/themes/laszlo/components/ui/toc-dialog/toc-dialog.css
@@ -21,6 +21,7 @@
     padding: var(--_link-padding-y) var(--_link-padding-x);
     text-decoration: none;
     color: var(--color-on-surface);
+    border: 1px solid var(--color-outline-variant);
     border-radius: var(--spacing-1);
     background: var(--color-surface-container);
     font: var(--typography-title-small);
diff --git a/app/themes/laszlo/components/ui/video/video.css b/app/themes/laszlo/components/ui/video/video.css
index 482a99ea3..0ff51dd0e 100644
--- a/app/themes/laszlo/components/ui/video/video.css
+++ b/app/themes/laszlo/components/ui/video/video.css
@@ -3,7 +3,7 @@
     position: relative;
     display: flex;
     justify-content: center;
-    border: 1px solid var(--color-surface-dim);
+    border: 1px solid var(--color-outline-variant);
     border-radius: var(--spacing-2);
   }
 }