diff --git a/resources/views/showcase/sections/pages.blade.php b/resources/views/showcase/sections/pages.blade.php
index 7a2159ee..275f2a2f 100644
--- a/resources/views/showcase/sections/pages.blade.php
+++ b/resources/views/showcase/sections/pages.blade.php
@@ -1,16 +1,16 @@
-<section id="pages" class="scroll-mt-24 space-y-6">
-    <h2 class="type-headline-md">Pages</h2>
+<x-livewire-material::stack as="section" id="pages" gap="space300">
+    <h2 class="md-type-headline-md">Pages</h2>
 
-    <p class="max-w-3xl type-body-md text-on-surface-variant">
+    <p class="md-type-body-md md-ink-variant">
         The error pages, raised for real so an app's own <code>resources/views/errors</code> still wins, and the Markdown mail theme
         (<code>livewire-material::mail.theme</code>) on a sample mail, both in this application's scheme.
     </p>
 
-    <div class="flex flex-wrap items-center gap-2">
+    <x-livewire-material::row wrap align="center" gap="space100">
         @foreach (['401', '402', '403', '404', '419', '429', '500', '503'] as $code)
             <x-livewire-material::button :link="route('livewire-material.error', $code)" :label="$code" variant="tonal" no-wire-navigate />
         @endforeach
 
         <x-livewire-material::button :link="route('livewire-material.mail')" label="Sample mail" icon="mail" variant="outlined" no-wire-navigate />
-    </div>
-</section>
+    </x-livewire-material::row>
+</x-livewire-material::stack>