diff --git a/patterns/page-layout-public.html b/patterns/page-layout-public.html
index 3703e4a..1124c3f 100644
--- a/patterns/page-layout-public.html
+++ b/patterns/page-layout-public.html
@@ -44,12 +44,8 @@
         </p>
       </div>
 
-      <article class="sg-group-card sg-page-layout-public__footer-group" data-component="group-card" aria-label="Fusszeile">
-        <div class="sg-group-card__header-row">
-          <h2 class="sg-heading-h2 sg-text-on-dark sg-group-card__heading">Fusszeile</h2>
-        </div>
-
-        <div class="sg-group-card__body">
+      <article class="sg-card sg-card--content-card sg-page-layout-public__footer-card" data-component="content-card" aria-label="Fusszeile">
+        <div class="sg-card-segment sg-card-segment--body" data-component-part="card-body">
           <div class="sg-text-layout-pattern" data-pattern="text-layout-zweispaltig" aria-label="Text Layout zweispaltig mobil zweispaltig">
             <div class="sg-text-layout-pattern__preview-surface">
               <div class="sg-text-layout-pattern__sample sg-text-layout-pattern__two-column" data-pattern-part="text-block-two-column">
diff --git a/styles/37-layouts-page-layout-public.css b/styles/37-layouts-page-layout-public.css
index 2aa38d0..0985dfb 100644
--- a/styles/37-layouts-page-layout-public.css
+++ b/styles/37-layouts-page-layout-public.css
@@ -28,6 +28,8 @@ main {
   flex: 1;
 }
 
-.sg-page-layout-public__footer-group {
+.sg-page-layout-public__footer-card {
   margin-top: auto;
+  --surface-card: var(--surface-card-group);
+  --surface-card-body: var(--surface-card-group);
 }