diff --git a/.changeset/little-plums-try.md b/.changeset/little-plums-try.md
new file mode 100644
index 00000000000..a4b40304ab8
--- /dev/null
+++ b/.changeset/little-plums-try.md
@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': patch
+---
+
+Added offset width to reframe `Frame` and passed reframe scroll container to sticky manager in `AppProvider`
diff --git a/polaris-react/src/components/AppProvider/AppProvider.tsx b/polaris-react/src/components/AppProvider/AppProvider.tsx
index dbed43729fe..5a39b9aa780 100644
--- a/polaris-react/src/components/AppProvider/AppProvider.tsx
+++ b/polaris-react/src/components/AppProvider/AppProvider.tsx
@@ -35,6 +35,7 @@ const MAX_SCROLLBAR_WIDTH = 20;
 const SCROLLBAR_TEST_ELEMENT_PARENT_SIZE = 30;
 const SCROLLBAR_TEST_ELEMENT_CHILD_SIZE =
   SCROLLBAR_TEST_ELEMENT_PARENT_SIZE + 10;
+const APP_FRAME_SCROLLABLE = 'AppFrameScollable';
 
 function measureScrollbars() {
   const parentEl = document.createElement('div');
@@ -105,7 +106,15 @@ export class AppProvider extends Component<AppProviderProps, State> {
 
   componentDidMount() {
     if (document != null) {
-      this.stickyManager.setContainer(document);
+      if (!this.props.features?.dynamicTopBarAndReframe) {
+        this.stickyManager.setContainer(document);
+      } else {
+        const scrollContainerElement =
+          document.getElementById(APP_FRAME_SCROLLABLE);
+
+        this.stickyManager.setContainer(scrollContainerElement ?? document);
+      }
+
       this.setBodyStyles();
       this.setRootAttributes();
 
diff --git a/polaris-react/src/components/Frame/Frame.module.css b/polaris-react/src/components/Frame/Frame.module.css
index 3fd19ff4685..bb601673c79 100644
--- a/polaris-react/src/components/Frame/Frame.module.css
+++ b/polaris-react/src/components/Frame/Frame.module.css
@@ -28,7 +28,7 @@
   /* stylelint-disable-next-line polaris/media-queries/polaris/media-query-allowed-list -- custom breakpoint */
   @media screen and (min-width: 1200px) {
     /* stylelint-disable-next-line polaris/conventions/polaris/custom-property-allowed-list -- private token from component */
-    width: calc(100% - var(--pc-sidebar-width));
+    width: calc(100% - var(--pc-frame-offset, 0px));
   }
 
   @media (prefers-reduced-motion) {
@@ -290,10 +290,7 @@
 }
 
 .Content-TopBarAndReframe {
-  overflow-y: auto;
-  /* stylelint-disable-next-line polaris/conventions/polaris/custom-property-allowed-list -- top bar global space */
-  margin-bottom: var(--pg-top-bar-height);
-  margin-right: var(--p-space-050);
+  height: 100%;
 
   .hasSidebar & {
     /* Sidebar breakpoint is 1200px */
@@ -310,7 +307,7 @@
     /* stylelint-disable -- polaris/conventions/polaris/custom-property-allowed-list -- Polaris component custom properties */
     width: calc(
       100vw - var(--pg-navigation-width) -
-        var(--pc-app-provider-scrollbar-width) - var(--p-space-150)
+        var(--pc-app-provider-scrollbar-width) - var(--pc-frame-offset, 0px)
     );
     /* stylelint-enable -- polaris/conventions/polaris/custom-property-allowed-list */
 
@@ -328,9 +325,10 @@
       /* stylelint-disable-next-line polaris/conventions/polaris/custom-property-allowed-list -- private token from component */
       width: calc(
         100vw - var(--pg-navigation-width) -
-          var(--pc-app-provider-scrollbar-width) - var(--p-space-150) -
-          var(--pc-sidebar-width)
+          var(--pc-app-provider-scrollbar-width) - var(--pc-sidebar-width) -
+          var(--pc-frame-offset, 0px)
       );
+      margin-right: unset;
     }
 
     @media (prefers-reduced-motion) {
@@ -425,8 +423,6 @@
 }
 
 .ShadowBevel {
-  width: 100%;
-
   @mixin shadow-bevel var(--p-shadow-100), var(--p-border-radius-300),
     var(--p-z-index-1);
 
@@ -435,4 +431,37 @@
     top: var(--pg-top-bar-height);
     background-color: var(--p-color-bg);
   }
+  position: fixed;
+  width: 100%;
+  transition: width var(--p-motion-duration-250) var(--p-motion-ease);
+
+  @media (prefers-reduced-motion) {
+    transition: none;
+  }
+
+  @media (--p-breakpoints-md-up) {
+    /* stylelint-disable-next-line polaris/conventions/polaris/custom-property-allowed-list -- private token from component */
+    width: calc(100% - var(--pc-frame-offset, 0px));
+  }
+
+  .hasSidebar & {
+    transition: width var(--p-motion-duration-250) var(--p-motion-ease);
+
+    /* Sidebar breakpoint is 1200px */
+    /* stylelint-disable-next-line polaris/media-queries/polaris/media-query-allowed-list -- custom breakpoint */
+    @media screen and (min-width: 1200px) {
+      /* stylelint-disable-next-line polaris/conventions/polaris/custom-property-allowed-list -- private token from component */
+      width: calc(100% - var(--pc-sidebar-width) - var(--pc-frame-offset, 0px));
+    }
+
+    @media (prefers-reduced-motion) {
+      transition: none;
+    }
+  }
+}
+
+.Scrollable {
+  width: 100%;
+  /* stylelint-disable-next-line polaris/conventions/polaris/custom-property-allowed-list -- top bar global space */
+  height: calc(100% - var(--pg-top-bar-height));
 }
diff --git a/polaris-react/src/components/Frame/Frame.tsx b/polaris-react/src/components/Frame/Frame.tsx
index 800ec755fc7..135e8b58ca5 100644
--- a/polaris-react/src/components/Frame/Frame.tsx
+++ b/polaris-react/src/components/Frame/Frame.tsx
@@ -13,6 +13,7 @@ import {EventListener} from '../EventListener';
 import {Backdrop} from '../Backdrop';
 import {Text} from '../Text';
 import {TrapFocus} from '../TrapFocus';
+import {Scrollable} from '../Scrollable';
 import {dataPolarisTopBar, layer} from '../shared';
 import {setRootProperty} from '../../utilities/set-root-property';
 import {FrameContext} from '../../utilities/frame';
@@ -74,6 +75,8 @@ interface State {
 }
 
 const APP_FRAME_MAIN = 'AppFrameMain';
+const APP_FRAME_SCROLLABLE = 'AppFrameScrollable';
+const APP_FRAME_BEVEL = 'AppFrameBevel';
 const APP_FRAME_NAV = 'AppFrameNav';
 const APP_FRAME_TOP_BAR = 'AppFrameTopBar';
 const APP_FRAME_LOADING_BAR = 'AppFrameLoadingBar';
@@ -305,7 +308,7 @@ class FrameInner extends PureComponent<CombinedProps, State> {
           {loadingMarkup}
           {navigationOverlayMarkup}
           {hasDynamicTopBar ? (
-            <div className={styles.ShadowBevel}>
+            <div className={styles.ShadowBevel} id={APP_FRAME_BEVEL}>
               {navigationMarkup}
               <main
                 className={classNames(
@@ -315,22 +318,29 @@ class FrameInner extends PureComponent<CombinedProps, State> {
                 id={APP_FRAME_MAIN}
                 data-has-global-ribbon={Boolean(globalRibbon)}
               >
-                <div
-                  className={classNames(
-                    styles.Content,
-                    hasDynamicTopBar && styles['Content-TopBarAndReframe'],
-                  )}
-                >
-                  {hasDynamicTopBar ? (
+                {hasDynamicTopBar ? (
+                  <Scrollable
+                    scrollbarWidth="thin"
+                    horizontal={false}
+                    className={styles.Scrollable}
+                    id={APP_FRAME_SCROLLABLE}
+                  >
                     <div
-                      className={styles['ScrollbarSafeArea-TopBarAndReframe']}
+                      className={classNames(
+                        styles.Content,
+                        styles['Content-TopBarAndReframe'],
+                      )}
                     >
-                      {children}
+                      <div
+                        className={styles['ScrollbarSafeArea-TopBarAndReframe']}
+                      >
+                        {children}
+                      </div>
                     </div>
-                  ) : (
-                    children
-                  )}
-                </div>
+                  </Scrollable>
+                ) : (
+                  <div className={styles.Content}>{children}</div>
+                )}
               </main>
             </div>
           ) : (
diff --git a/polaris-react/src/components/Navigation/Navigation.module.css b/polaris-react/src/components/Navigation/Navigation.module.css
index 3901a91bd32..82582486295 100644
--- a/polaris-react/src/components/Navigation/Navigation.module.css
+++ b/polaris-react/src/components/Navigation/Navigation.module.css
@@ -115,6 +115,7 @@
 
   @media (--p-breakpoints-md-up) {
     border-top-right-radius: 0;
+    padding-top: var(--p-space-400);
   }
 }