diff --git a/apps/web/components/apps/layouts/AppsLayout.tsx b/apps/web/components/apps/layouts/AppsLayout.tsx
index 0a89da7710..68ab006cfa 100644
--- a/apps/web/components/apps/layouts/AppsLayout.tsx
+++ b/apps/web/components/apps/layouts/AppsLayout.tsx
@@ -19,7 +19,7 @@ export default function AppsLayout({ children, actions, emptyStore, isAdmin, ...
   const router = useRouter();
 
   return (
-    <Shell {...rest} actions={actions?.("block")}>
+    <Shell {...rest} disableSticky={true} actions={actions?.("block")}>
       <div className="flex flex-col xl:flex-row">
         <main className="w-full">
           {emptyStore ? (
diff --git a/apps/web/modules/shell/Shell.tsx b/apps/web/modules/shell/Shell.tsx
index f861cb3df7..eaf62deb40 100644
--- a/apps/web/modules/shell/Shell.tsx
+++ b/apps/web/modules/shell/Shell.tsx
@@ -127,15 +127,22 @@ export default function Shell(props: LayoutProps) {
 export function ShellMain(props: LayoutProps) {
   const router = useRouter();
   const { isLocaleReady } = useLocale();
+  const { bannersHeight } = useBanners();
+
+  const headerStyle =
+    !props.disableSticky && bannersHeight
+      ? { top: `${bannersHeight}px` as const }
+      : undefined;
 
   return (
     <>
       {(props.heading || !!props.backPath) && (
         <div
+          style={headerStyle}
           className={classNames(
             "bg-default mb-0 flex items-center md:mb-6 md:mt-0",
             props.smallHeading ? "lg:mb-7" : "lg:mb-8",
-            !props.disableSticky && "sticky top-0 z-10"
+            !props.disableSticky && "sticky top-0 z-10 md:fixed md:w-[calc(100%-3.5rem)] md:pt-3 md:pb-2 md:pl-5 md:left-14 lg:left-56 lg:w-[calc(100%-14rem)]"
           )}>
           {!!props.backPath && (
             <Button
@@ -189,6 +196,9 @@ export function ShellMain(props: LayoutProps) {
           )}
         </div>
       )}
+      {(props.heading || !!props.backPath) && !props.disableSticky && (
+        <div className="hidden md:block md:h-14" aria-hidden="true" />
+      )}
       {props.afterHeading && <>{props.afterHeading}</>}
       <div className={classNames(props.flexChildrenContainer && "flex flex-1 flex-col")}>
         {props.children}