diff --git a/pages/skeleton/components-examples.page.tsx b/pages/skeleton/components-examples.page.tsx
index 0bd776d845..3cf20657cd 100644
--- a/pages/skeleton/components-examples.page.tsx
+++ b/pages/skeleton/components-examples.page.tsx
@@ -15,6 +15,8 @@ import List from '~components/list';
 import Skeleton from '~components/skeleton';
 import SpaceBetween from '~components/space-between';
 
+import { SimplePage } from '../app/templates';
+
 interface DataItem {
   id: string;
   name: string;
@@ -58,22 +60,16 @@ export default function SkeletonComponentsExamples() {
   const [isLoading, setIsLoading] = useState(true);
 
   return (
-    <Box padding="l">
-      <div style={{ position: 'sticky', top: 0, zIndex: 1000, marginBottom: '2em' }}>
-        <Container>
-          <SpaceBetween size="m">
-            <Header
-              variant="h1"
-              description="Demonstrates skeleton loading patterns across different components to minimize layout shift"
-            >
-              Skeleton Component Examples
-            </Header>
-            <Checkbox checked={isLoading} onChange={({ detail }) => setIsLoading(detail.checked)}>
-              Show loading state (Skeleton)
-            </Checkbox>
-          </SpaceBetween>
-        </Container>
-      </div>
+    <SimplePage
+      title="Skeleton Component Examples"
+      subtitle="Demonstrates skeleton loading patterns across different components to minimize layout shift"
+      settings={
+        <Checkbox checked={isLoading} onChange={({ detail }) => setIsLoading(detail.checked)}>
+          Show loading state (Skeleton)
+        </Checkbox>
+      }
+      screenshotArea={{ disableAnimations: true }}
+    >
       <SpaceBetween size="l">
         {/* Cards Example */}
         <Container header={<Header variant="h2">Cards with Skeleton</Header>}>
@@ -333,6 +329,6 @@ export default function SkeletonComponentsExamples() {
           </>
         </Container>
       </SpaceBetween>
-    </Box>
+    </SimplePage>
   );
 }
diff --git a/pages/skeleton/permutations.page.tsx b/pages/skeleton/permutations.page.tsx
index 689b334413..759f8ad7f8 100644
--- a/pages/skeleton/permutations.page.tsx
+++ b/pages/skeleton/permutations.page.tsx
@@ -4,9 +4,9 @@ import React from 'react';
 
 import Skeleton, { SkeletonProps } from '~components/skeleton';
 
+import { SimplePage } from '../app/templates';
 import createPermutations from '../utils/permutations';
 import PermutationsView from '../utils/permutations-view';
-import ScreenshotArea from '../utils/screenshot-area';
 
 const permutations = createPermutations<SkeletonProps>([
   // Test all variants with default display and reasonable width
@@ -46,18 +46,15 @@ const permutations = createPermutations<SkeletonProps>([
 
 export default function SkeletonPermutations() {
   return (
-    <>
-      <h1>Skeleton permutations</h1>
-      <ScreenshotArea disableAnimations={true}>
-        <PermutationsView
-          permutations={permutations}
-          render={permutation => (
-            <div style={{ marginBottom: '16px' }}>
-              <Skeleton {...permutation} />
-            </div>
-          )}
-        />
-      </ScreenshotArea>
-    </>
+    <SimplePage title="Skeleton permutations" screenshotArea={{ disableAnimations: true }}>
+      <PermutationsView
+        permutations={permutations}
+        render={permutation => (
+          <div style={{ marginBottom: '16px' }}>
+            <Skeleton {...permutation} />
+          </div>
+        )}
+      />
+    </SimplePage>
   );
 }