diff --git a/packages/web/src/scss/components/UNSTABLE_EmptyState/_theme.scss b/packages/web/src/scss/components/UNSTABLE_EmptyState/_theme.scss
index 23aa9073d2..2f3a879d3f 100644
--- a/packages/web/src/scss/components/UNSTABLE_EmptyState/_theme.scss
+++ b/packages/web/src/scss/components/UNSTABLE_EmptyState/_theme.scss
@@ -3,7 +3,6 @@
 $breakpoints: tokens.$breakpoints;
 $root-padding-block: tokens.$space-800;
 $root-padding-block-desktop: tokens.$space-900;
-$heading-margin-bottom: tokens.$space-500;
 $buttons-gap: tokens.$space-600;
 $wrapper-gap: tokens.$space-700;
 $content-gap: tokens.$space-500;
diff --git a/packages/web/src/scss/components/UNSTABLE_EmptyState/index.html b/packages/web/src/scss/components/UNSTABLE_EmptyState/index.html
index c03c96228e..f69f600d88 100644
--- a/packages/web/src/scss/components/UNSTABLE_EmptyState/index.html
+++ b/packages/web/src/scss/components/UNSTABLE_EmptyState/index.html
@@ -5,82 +5,74 @@ <h2 class="docs-Heading">Default</h2>
   <div class="docs-Stack docs-Stack--stretch">
 
     <div class="UNSTABLE_EmptyState">
-      <div class="UNSTABLE_EmptyState__wrapper">
-        <div class="UNSTABLE_EmptyState__icon">
+      <div class="UNSTABLE_EmptyState__content">
+        <div style="border: 1px solid #E9E9E9; border-radius: 10px; padding: 12px ">
           <svg width="24" height="24" fill="none" viewBox="0 0 24 24" aria-hidden="true"><use href="/assets/icons/svg/sprite.svg#search"></use></svg>
         </div>
-        <div>
-          <h2 data-test-empty-tile="h2" class="typography-heading-xsmall-text">Empty State Title</h2>
-          <p class="typography-body-medium-text-regular">Look somewhere else</p>
-        </div>
+        <span data-test-empty-tile="span" class="typography-heading-xsmall-text">Headline</span>
+        <p class="typography-body-medium-text-regular">In publishing and graphic design, lorem ipsum is common placeholder text used to demonstrate the graphic elements</p>
       </div>
-      <div class="UNSTABLE_EmptyState__content">Custom content</div>
+      <div style="display: flex; justify-content: center">I'm custom content</div>
     </div>
 
-
     <div class="UNSTABLE_EmptyState">
-      <div class="UNSTABLE_EmptyState__wrapper">
-        <div class="UNSTABLE_EmptyState__icon">
-          <svg width="24" height="24" fill="none" viewBox="0 0 24 24" aria-hidden="true"><use href="/assets/icons/svg/sprite.svg#search"></use></svg>
-        </div>
-        <div>
-          <h2 data-test-empty-tile="h2" class="typography-heading-xsmall-text">Empty State Title</h2>
-          <p class="typography-body-medium-text-regular">Look somewhere else</p>
-        </div>
+      <div style="display: flex; flex-direction: column; align-items: center">
+        <h2 class="typography-heading-xsmall-text">Custom content Headline</h2>
+        <p class="typography-body-medium-text-regular">Custom content description</p>
       </div>
-      <div class="UNSTABLE_EmptyState__buttons">
-        <a class="Button Button--primary Button--medium" href="#">Action</a>
-        <a class="Button Button--secondary Button--medium" href="#">Action</a>
-      </div>
-      <a href="#" class="link-primary">Link to something</a>
     </div>
 
     <div class="UNSTABLE_EmptyState">
-      <div class="UNSTABLE_EmptyState__wrapper">
-        <div class="UNSTABLE_EmptyState__icon">
+      <div class="UNSTABLE_EmptyState__content">
+        <div style="border: 1px solid #E9E9E9; border-radius: 10px; padding: 12px ">
           <svg width="24" height="24" fill="none" viewBox="0 0 24 24" aria-hidden="true"><use href="/assets/icons/svg/sprite.svg#search"></use></svg>
         </div>
-        <div>
-          <h2 data-test-empty-tile="h2" class="typography-heading-xsmall-text">Empty State Title</h2>
-          <p class="typography-body-medium-text-regular">Look somewhere else</p>
-        </div>
+        <h2 data-test-empty-tile="h2" class="typography-heading-xsmall-text">Headline</h2>
+        <p class="typography-body-medium-text-regular">In publishing and graphic design, lorem ipsum is common placeholder text used to demonstrate the graphic elements</p>
       </div>
-      <div class="UNSTABLE_EmptyState__content">
-        <a class="Button Button--primary Button--medium" href="#">Action</a>
+
+      <div class="UNSTABLE_EmptyState__wrapper">
+        <div class="UNSTABLE_EmptyState__buttons">
+          <a class="Button Button--primary Button--medium" href="#">Action</a>
+          <a class="Button Button--secondary Button--medium" href="#">Action</a>
+        </div>
+        <a href="#" class="link-primary">Link to something</a>
       </div>
     </div>
 
     <div class="UNSTABLE_EmptyState">
-      <div class="UNSTABLE_EmptyState__wrapper">
-        <div class="UNSTABLE_EmptyState__icon">
+      <div class="UNSTABLE_EmptyState__content">
+        <div style="border: 1px solid #E9E9E9; border-radius: 10px; padding: 12px ">
           <svg width="24" height="24" fill="none" viewBox="0 0 24 24" aria-hidden="true"><use href="/assets/icons/svg/sprite.svg#search"></use></svg>
         </div>
-        <div>
-          <h2 data-test-empty-tile="h2" class="typography-heading-xsmall-text">Empty State Title</h2>
-          <p class="typography-body-medium-text-regular">Look somewhere else</p>
+        <h2 data-test-empty-tile="h2" class="typography-heading-xsmall-text">Headline</h2>
+        <p class="typography-body-medium-text-regular">In publishing and graphic design, lorem ipsum is common placeholder text used to demonstrate the graphic elements</p>
+      </div>
+
+      <div class="UNSTABLE_EmptyState__wrapper">
+        <div class="UNSTABLE_EmptyState__buttons">
+          <a class="Button Button--primary Button--medium" href="#">Action</a>
         </div>
       </div>
-      <a href="#" class="link-primary">Link to something</a>
     </div>
 
     <div class="UNSTABLE_EmptyState">
-      <div class="UNSTABLE_EmptyState__wrapper">
-        <div class="UNSTABLE_EmptyState__icon">
+      <div class="UNSTABLE_EmptyState__content">
+        <div style="border: 1px solid #E9E9E9; border-radius: 10px; padding: 12px ">
           <svg width="24" height="24" fill="none" viewBox="0 0 24 24" aria-hidden="true"><use href="/assets/icons/svg/sprite.svg#search"></use></svg>
         </div>
-        <div>
-          <h2 data-test-empty-tile="h2" class="typography-heading-xsmall-text">Empty State Title</h2>
-          <p class="typography-body-medium-text-regular">Look somewhere else</p>
-        </div>
+        <h2 data-test-empty-tile="h2" class="typography-heading-xsmall-text">Headline</h2>
+        <p class="typography-body-medium-text-regular">In publishing and graphic design, lorem ipsum is common placeholder text used to demonstrate the graphic elements</p>
+      </div>
+      <div class="UNSTABLE_EmptyState__wrapper">
+        <a href="#" class="link-primary">Link to something</a>
       </div>
     </div>
 
     <div class="UNSTABLE_EmptyState">
-      <div class="UNSTABLE_EmptyState__wrapper">
-        <div>
-          <h2 data-test-empty-tile="h2" class="typography-heading-xsmall-text">Empty State Title</h2>
-          <p class="typography-body-medium-text-regular">Look somewhere else</p>
-        </div>
+      <div class="UNSTABLE_EmptyState__content">
+        <h2 data-test-empty-tile="h2" class="typography-heading-xsmall-text">Headline</h2>
+        <p class="typography-body-medium-text-regular">In publishing and graphic design, lorem ipsum is common placeholder text used to demonstrate the graphic elements</p>
       </div>
     </div>