diff --git a/packages/bbui/src/Layout/Layout.svelte b/packages/bbui/src/Layout/Layout.svelte
index ce37850811..6a01d9bece 100644
--- a/packages/bbui/src/Layout/Layout.svelte
+++ b/packages/bbui/src/Layout/Layout.svelte
@@ -41,8 +41,8 @@
     padding-right: var(--spacing-xl);
   }
   .paddingX-XXL {
-    padding-left: calc(var(--spacing-xl) * 2);
-    padding-right: calc(var(--spacing-xl) * 2);
+    padding-left: var(--spectrum-alias-grid-gutter-large);
+    padding-right: var(--spectrum-alias-grid-gutter-large);
   }
   .paddingY-S {
     padding-top: var(--spacing-s);
@@ -61,8 +61,8 @@
     padding-bottom: var(--spacing-xl);
   }
   .paddingY-XXL {
-    padding-top: calc(var(--spacing-xl) * 2);
-    padding-bottom: calc(var(--spacing-xl) * 2);
+    padding-top: var(--spectrum-alias-grid-gutter-large);
+    padding-bottom: var(--spectrum-alias-grid-gutter-large);
   }
   .gap-XXS {
     grid-gap: var(--spacing-xs);
diff --git a/packages/builder/src/components/common/DashCard.svelte b/packages/builder/src/components/common/DashCard.svelte
index 800001a614..d5d9d2ff37 100644
--- a/packages/builder/src/components/common/DashCard.svelte
+++ b/packages/builder/src/components/common/DashCard.svelte
@@ -33,7 +33,7 @@
     min-height: 150px;
   }
   .dash-card-header {
-    padding: var(--spacing-xl) calc(var(--spacing-xl) * 2);
+    padding: var(--spacing-xl) var(--spectrum-global-dimension-static-size-400);
     border-bottom: 1px solid var(--spectrum-global-color-gray-300);
     display: flex;
     justify-content: space-between;
diff --git a/packages/builder/src/pages/builder/portal/overview/_components/OverviewTab.svelte b/packages/builder/src/pages/builder/portal/overview/_components/OverviewTab.svelte
index aa2a55ad02..ae5189543c 100644
--- a/packages/builder/src/pages/builder/portal/overview/_components/OverviewTab.svelte
+++ b/packages/builder/src/pages/builder/portal/overview/_components/OverviewTab.svelte
@@ -48,7 +48,7 @@
 </script>
 
 <div class="overview-tab">
-  <Layout paddingX="XXL" paddingY="XXL">
+  <Layout paddingX="XXL" paddingY="XXL" gap="XL">
     <div class="top">
       <DashCard title={"App Status"} dataCy={"app-status"}>
         <div class="status-content">
@@ -183,33 +183,37 @@
 <style>
   .overview-tab {
     display: grid;
-    grid-gap: var(--spacing-xl);
   }
 
   .overview-tab .top {
     display: grid;
-    grid-gap: calc(var(--spacing-xl) * 2);
+    grid-gap: var(--spectrum-alias-grid-gutter-medium);
     grid-template-columns: repeat(auto-fill, minmax(30%, 1fr));
   }
 
+  .overview-tab .bottom,
+  .automation-metrics {
+    display: grid;
+    grid-gap: var(--spectrum-alias-grid-gutter-large);
+    grid-template-columns: 1fr 1fr;
+  }
+
   @media (max-width: 1000px) {
     .overview-tab .top {
       grid-template-columns: 1fr 1fr;
     }
-  }
-
-  @media (max-width: 800px) {
-    .overview-tab .top {
+    .overview-tab .bottom {
       grid-template-columns: 1fr;
     }
   }
 
-  .overview-tab .bottom,
-  .automation-metrics {
-    display: grid;
-    grid-gap: var(--spacing-xl);
-    grid-template-columns: 1fr 1fr;
+  @media (max-width: 800px) {
+    .overview-tab .top,
+    .overview-tab .bottom {
+      grid-template-columns: 1fr;
+    }
   }
+
   .status-display {
     display: flex;
     align-items: center;