diff --git a/.changeset/strong-bottles-swim.md b/.changeset/strong-bottles-swim.md
new file mode 100644
index 00000000000..9b76d2d1790
--- /dev/null
+++ b/.changeset/strong-bottles-swim.md
@@ -0,0 +1,7 @@
+---
+'@shopify/polaris': minor
+---
+
+Refactored `SkeletonPage` to use primitive Layout components
+Removed `max-width` on children in `AlphaStack`
+Added `narrowWidth` and `fullWidth` examples to `AlphaStack` stories
diff --git a/polaris-react/src/components/AlphaStack/AlphaStack.scss b/polaris-react/src/components/AlphaStack/AlphaStack.scss
index 0a212e1817d..11e29d82bc4 100644
--- a/polaris-react/src/components/AlphaStack/AlphaStack.scss
+++ b/polaris-react/src/components/AlphaStack/AlphaStack.scss
@@ -26,10 +26,6 @@
   @media #{$p-breakpoints-xl-up} {
     gap: var(--pc-stack-gap-xl);
   }
-
-  > * {
-    max-width: 100%;
-  }
 }
 
 .listReset {
diff --git a/polaris-react/src/components/SkeletonPage/SkeletonPage.scss b/polaris-react/src/components/SkeletonPage/SkeletonPage.scss
index 3ad8adb95e7..08b9841f4ec 100644
--- a/polaris-react/src/components/SkeletonPage/SkeletonPage.scss
+++ b/polaris-react/src/components/SkeletonPage/SkeletonPage.scss
@@ -2,62 +2,19 @@
 
 $primary-action-button-height: 36px;
 $primary-action-button-width: 100px;
-$skeleton-display-text-max-width: 120px;
 
-.Page {
-  @include page-layout;
-}
-
-.fullWidth {
-  max-width: none;
-}
-
-.narrowWidth {
-  max-width: $layout-width-primary-max;
-}
-
-.Content {
-  @include page-content-layout;
-}
-
-.Header {
-  @include page-header-layout;
-  padding-bottom: var(--p-space-2);
-}
-
-.BreadcrumbAction {
-  padding-top: var(--p-space-4);
-  padding-bottom: var(--p-space-4);
-  margin-top: calc(-1 * var(--p-space-1));
-  margin-bottom: calc(-1 * var(--p-space-1));
-}
-
-.TitleAndPrimaryAction {
-  display: flex;
-  align-items: flex-start;
-}
-
-.TitleWrapper {
-  flex: 1 1 0%;
+:root {
+  --pc-skeleton-page-max-width: 998px;
+  --pc-skeleton-page-max-width-narrow: 662px;
 }
 
 .Title {
   font-weight: var(--p-font-weight-semibold);
-  font-size: 24px;
-  line-height: 28px;
-
-  @media #{$p-breakpoints-md-up} {
-    font-size: 20px;
-  }
+  font-size: var(--p-font-size-300);
+  line-height: var(--p-font-line-height-4);
 }
 
 .SkeletonTitle {
-  display: flex;
-  background-color: var(--p-surface-neutral);
-  border-radius: var(--p-border-radius-base);
-  max-width: $skeleton-display-text-max-width;
-  height: 28px;
-
   @media screen and (-ms-high-contrast: active) {
     background-color: grayText;
   }
@@ -71,32 +28,3 @@ $skeleton-display-text-max-width: 120px;
     min-width: $primary-action-button-width;
   }
 }
-
-.Actions {
-  margin-top: var(--p-space-2);
-  display: flex;
-  flex-direction: row-reverse;
-  justify-content: flex-end;
-  align-items: center;
-}
-
-.Action {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  min-height: control-slim-height();
-  padding-right: var(--p-space-6);
-  margin-top: calc(-1 * var(--p-space-1));
-  margin-bottom: calc(-1 * var(--p-space-1));
-  padding-top: var(--p-space-4);
-
-  &:first-child {
-    padding-right: 0;
-  }
-
-  @media #{$p-breakpoints-lg-down} {
-    &:not(:last-child) {
-      display: none;
-    }
-  }
-}
diff --git a/polaris-react/src/components/SkeletonPage/SkeletonPage.stories.tsx b/polaris-react/src/components/SkeletonPage/SkeletonPage.stories.tsx
index 41216d5e316..4ffd288ba88 100644
--- a/polaris-react/src/components/SkeletonPage/SkeletonPage.stories.tsx
+++ b/polaris-react/src/components/SkeletonPage/SkeletonPage.stories.tsx
@@ -100,3 +100,103 @@ export function WithStaticContent() {
     </SkeletonPage>
   );
 }
+
+export function WithNarrowWidth() {
+  return (
+    <SkeletonPage primaryAction narrowWidth>
+      <Layout>
+        <Layout.Section>
+          <Card sectioned>
+            <SkeletonBodyText />
+          </Card>
+          <Card sectioned>
+            <TextContainer>
+              <SkeletonDisplayText size="small" />
+              <SkeletonBodyText />
+            </TextContainer>
+          </Card>
+          <Card sectioned>
+            <TextContainer>
+              <SkeletonDisplayText size="small" />
+              <SkeletonBodyText />
+            </TextContainer>
+          </Card>
+        </Layout.Section>
+        <Layout.Section secondary>
+          <Card>
+            <Card.Section>
+              <TextContainer>
+                <SkeletonDisplayText size="small" />
+                <SkeletonBodyText lines={2} />
+              </TextContainer>
+            </Card.Section>
+            <Card.Section>
+              <SkeletonBodyText lines={1} />
+            </Card.Section>
+          </Card>
+          <Card subdued>
+            <Card.Section>
+              <TextContainer>
+                <SkeletonDisplayText size="small" />
+                <SkeletonBodyText lines={2} />
+              </TextContainer>
+            </Card.Section>
+            <Card.Section>
+              <SkeletonBodyText lines={2} />
+            </Card.Section>
+          </Card>
+        </Layout.Section>
+      </Layout>
+    </SkeletonPage>
+  );
+}
+
+export function WithFullWidth() {
+  return (
+    <SkeletonPage primaryAction fullWidth>
+      <Layout>
+        <Layout.Section>
+          <Card sectioned>
+            <SkeletonBodyText />
+          </Card>
+          <Card sectioned>
+            <TextContainer>
+              <SkeletonDisplayText size="small" />
+              <SkeletonBodyText />
+            </TextContainer>
+          </Card>
+          <Card sectioned>
+            <TextContainer>
+              <SkeletonDisplayText size="small" />
+              <SkeletonBodyText />
+            </TextContainer>
+          </Card>
+        </Layout.Section>
+        <Layout.Section secondary>
+          <Card>
+            <Card.Section>
+              <TextContainer>
+                <SkeletonDisplayText size="small" />
+                <SkeletonBodyText lines={2} />
+              </TextContainer>
+            </Card.Section>
+            <Card.Section>
+              <SkeletonBodyText lines={1} />
+            </Card.Section>
+          </Card>
+          <Card subdued>
+            <Card.Section>
+              <TextContainer>
+                <SkeletonDisplayText size="small" />
+                <SkeletonBodyText lines={2} />
+              </TextContainer>
+            </Card.Section>
+            <Card.Section>
+              <SkeletonBodyText lines={2} />
+            </Card.Section>
+          </Card>
+        </Layout.Section>
+      </Layout>
+    </SkeletonPage>
+  );
+}
diff --git a/polaris-react/src/components/SkeletonPage/SkeletonPage.tsx b/polaris-react/src/components/SkeletonPage/SkeletonPage.tsx
index 8cd1588ac1f..e692822ef56 100644
--- a/polaris-react/src/components/SkeletonPage/SkeletonPage.tsx
+++ b/polaris-react/src/components/SkeletonPage/SkeletonPage.tsx
@@ -1,9 +1,11 @@
 import React from 'react';
 
-import {classNames} from '../../utilities/css';
 import {useI18n} from '../../utilities/i18n';
 import {SkeletonDisplayText} from '../SkeletonDisplayText';
 import {SkeletonBodyText} from '../SkeletonBodyText';
+import {Box} from '../Box';
+import {Inline} from '../Inline';
+import {AlphaStack} from '../AlphaStack';
 
 import styles from './SkeletonPage.scss';
 
@@ -31,20 +33,20 @@ export function SkeletonPage({
   breadcrumbs,
 }: SkeletonPageProps) {
   const i18n = useI18n();
-  const className = classNames(
-    styles.Page,
-    fullWidth && styles.fullWidth,
-    narrowWidth && styles.narrowWidth,
-  );
 
   const titleContent = title ? (
     <h1 className={styles.Title}>{title}</h1>
   ) : (
-    <div className={styles.SkeletonTitle} />
+    <div className={styles.SkeletonTitle}>
+      <Box
+        background="surface-neutral"
+        minWidth="120px"
+        minHeight="28px"
+        borderRadius="base"
+      />
+    </div>
   );
 
-  const titleMarkup = <div className={styles.TitleWrapper}>{titleContent}</div>;
-
   const primaryActionMarkup = primaryAction ? (
     <div className={styles.PrimaryAction}>
       <SkeletonDisplayText size="large" />
@@ -52,25 +54,50 @@ export function SkeletonPage({
   ) : null;
 
   const breadcrumbMarkup = breadcrumbs ? (
-    <div className={styles.BreadcrumbAction} style={{width: 60}}>
+    <Box maxWidth="60px" paddingBlockStart="4" paddingBlockEnd="4">
       <SkeletonBodyText lines={1} />
-    </div>
+    </Box>
   ) : null;
 
   return (
-    <div
-      className={className}
-      role="status"
-      aria-label={i18n.translate('Polaris.SkeletonPage.loadingLabel')}
-    >
-      <div className={styles.Header}>
-        {breadcrumbMarkup}
-        <div className={styles.TitleAndPrimaryAction}>
-          {titleMarkup}
-          {primaryActionMarkup}
-        </div>
-      </div>
-      <div className={styles.Content}>{children}</div>
-    </div>
+    <AlphaStack align="center" fullWidth>
+      <Box
+        padding="0"
+        paddingInlineStart={{sm: '6'}}
+        paddingInlineEnd={{sm: '6'}}
+        maxWidth="var(--pc-skeleton-page-max-width)"
+        aria-label={i18n.translate('Polaris.SkeletonPage.loadingLabel')}
+        role="status"
+        {...(narrowWidth && {
+          maxWidth: 'var(--pc-skeleton-page-max-width-narrow)',
+        })}
+        {...(fullWidth && {
+          maxWidth: 'none',
+        })}
+      >
+        <AlphaStack gap="0" fullWidth>
+          <Box
+            padding={{xs: '4', md: '5'}}
+            paddingBlockEnd={{xs: '2', md: '5'}}
+            paddingInlineStart={{sm: '0'}}
+            paddingInlineEnd={{sm: '0'}}
+          >
+            {breadcrumbMarkup}
+            <Inline align="space-between" blockAlign="start">
+              {titleContent}
+              {primaryActionMarkup}
+            </Inline>
+          </Box>
+          <Box
+            paddingBlockStart={{xs: '2', md: '5'}}
+            paddingBlockEnd="2"
+            paddingInlineStart="0"
+            paddingInlineEnd="0"
+          >
+            {children}
+          </Box>
+        </AlphaStack>
+      </Box>
+    </AlphaStack>
   );
 }
diff --git a/polaris-react/src/components/SkeletonPage/tests/SkeletonPage.test.tsx b/polaris-react/src/components/SkeletonPage/tests/SkeletonPage.test.tsx
index 1bef933df19..20688bd794d 100644
--- a/polaris-react/src/components/SkeletonPage/tests/SkeletonPage.test.tsx
+++ b/polaris-react/src/components/SkeletonPage/tests/SkeletonPage.test.tsx
@@ -2,11 +2,11 @@ import React from 'react';
 import {mountWithApp} from 'tests/utilities';
 
 import {Card} from '../../Card';
-import {Text} from '../../Text';
 import {Layout} from '../../Layout';
 import {SkeletonBodyText} from '../../SkeletonBodyText';
 import {SkeletonDisplayText} from '../../SkeletonDisplayText';
 import {SkeletonPage} from '../SkeletonPage';
+import {Box} from '../../Box';
 
 describe('<SkeletonPage />', () => {
   it('renders its children', () => {
@@ -38,7 +38,9 @@ describe('<SkeletonPage />', () => {
       const skeletonPage = mountWithApp(<SkeletonPage title="Products" />);
 
       expect(skeletonPage).toContainReactComponent('h1', {className: 'Title'});
-      expect(skeletonPage).not.toContainReactComponent(Text);
+      expect(skeletonPage).not.toContainReactComponent(Box, {
+        background: 'surface-neutral',
+      });
     });
 
     it('renders SkeletonTitle when a title not defined', () => {
@@ -47,8 +49,8 @@ describe('<SkeletonPage />', () => {
       expect(skeletonPage).not.toContainReactComponent('h1', {
         className: 'Title',
       });
-      expect(skeletonPage).toContainReactComponent('div', {
-        className: 'SkeletonTitle',
+      expect(skeletonPage).toContainReactComponent(Box, {
+        background: 'surface-neutral',
       });
     });
 
@@ -58,8 +60,8 @@ describe('<SkeletonPage />', () => {
       expect(skeletonPage).not.toContainReactComponent('h1', {
         className: 'Title',
       });
-      expect(skeletonPage).toContainReactComponent('div', {
-        className: 'SkeletonTitle',
+      expect(skeletonPage).toContainReactComponent(Box, {
+        background: 'surface-neutral',
       });
     });
   });