diff --git a/src/app/components/request-password.tsx b/src/app/components/request-password.tsx
index e8f5eb4f54..a3a07e90af 100644
--- a/src/app/components/request-password.tsx
+++ b/src/app/components/request-password.tsx
@@ -243,7 +243,7 @@ export function RequestPassword({
             {/* </Box> */}
           </>
         }
-        /* </PageLayout> */
+        /* </DialogContent> */
       />
     </>
   );
diff --git a/src/app/pages/receive/components/receive-tokens.layout.tsx b/src/app/pages/receive/components/receive-tokens.layout.tsx
index 2cc237e6af..6446f50a30 100644
--- a/src/app/pages/receive/components/receive-tokens.layout.tsx
+++ b/src/app/pages/receive/components/receive-tokens.layout.tsx
@@ -7,7 +7,7 @@ import { useLocationState } from '@app/common/hooks/use-location-state';
 import { AddressDisplayer } from '@app/components/address-displayer/address-displayer';
 import { useBackgroundLocationRedirect } from '@app/routes/hooks/use-background-location-redirect';
 import { LeatherButton } from '@app/ui/components/button';
-import { DialogContent } from '@app/ui/components/containers/dialog/components/dialog-content.layout';
+import { DialogCard } from '@app/ui/components/containers/dialog/components/dialog-card.layout';
 import { Dialog } from '@app/ui/components/containers/dialog/dialog';
 
 import { QrCode } from './address-qr-code';
@@ -38,7 +38,7 @@ export function ReceiveTokensLayout(props: ReceiveTokensLayoutProps) {
       }
     >
       {warning && warning}
-      <DialogContent>
+      <DialogCard>
         <styled.h2 mt="space.05" textStyle="heading.03">
           {title}
         </styled.h2>
@@ -61,7 +61,7 @@ export function ReceiveTokensLayout(props: ReceiveTokensLayoutProps) {
             <AddressDisplayer address={address} />
           </Flex>
         </Flex>
-      </DialogContent>
+      </DialogCard>
     </Dialog>
   );
 }
diff --git a/src/app/pages/sign-out-confirm/sign-out-confirm.layout.tsx b/src/app/pages/sign-out-confirm/sign-out-confirm.layout.tsx
index 30f9959a86..1fd796ea2d 100644
--- a/src/app/pages/sign-out-confirm/sign-out-confirm.layout.tsx
+++ b/src/app/pages/sign-out-confirm/sign-out-confirm.layout.tsx
@@ -5,7 +5,7 @@ import { Box, styled } from 'leather-styles/jsx';
 import { useWalletType } from '@app/common/use-wallet-type';
 import { Flag } from '@app/components/layout/flag';
 import { LeatherButton } from '@app/ui/components/button';
-import { DialogContent } from '@app/ui/components/containers/dialog/components/dialog-content.layout';
+import { DialogCard } from '@app/ui/components/containers/dialog/components/dialog-card.layout';
 import { Dialog } from '@app/ui/components/containers/dialog/dialog';
 import { ErrorIcon } from '@app/ui/components/icons/error-icon';
 
@@ -62,7 +62,7 @@ export function SignOutConfirmLayout(props: SignOutConfirmLayoutProps) {
         </>
       }
     >
-      <DialogContent>
+      <DialogCard>
         <form onChange={form.handleChange} onSubmit={form.handleSubmit}>
           <styled.p textStyle="label.02">
             When you sign out,
@@ -116,7 +116,7 @@ export function SignOutConfirmLayout(props: SignOutConfirmLayoutProps) {
             </styled.p>
           </styled.label>
         </form>
-      </DialogContent>
+      </DialogCard>
     </Dialog>
   );
 }
diff --git a/src/app/ui/components/containers/container.layout.tsx b/src/app/ui/components/containers/container.layout.tsx
index 768692df0c..23f398f22e 100644
--- a/src/app/ui/components/containers/container.layout.tsx
+++ b/src/app/ui/components/containers/container.layout.tsx
@@ -6,9 +6,7 @@ interface ContainerLayoutProps {
   children: React.JSX.Element | React.JSX.Element[];
   header: React.JSX.Element | null;
 }
-export function ContainerLayout(props: ContainerLayoutProps) {
-  const { children, header } = props;
-
+export function ContainerLayout({ children, header }: ContainerLayoutProps) {
   return (
     <Flex
       flexDirection="column"
diff --git a/src/app/ui/components/containers/dialog/components/dialog-card.layout.tsx b/src/app/ui/components/containers/dialog/components/dialog-card.layout.tsx
new file mode 100644
index 0000000000..682b628c40
--- /dev/null
+++ b/src/app/ui/components/containers/dialog/components/dialog-card.layout.tsx
@@ -0,0 +1,13 @@
+import { Flex } from 'leather-styles/jsx';
+
+import { HasChildren } from '@app/common/has-children';
+
+//  TODO name this better / merge with dialog-content.layout
+/** deprecated */
+export function DialogCard({ children }: HasChildren) {
+  return (
+    <Flex alignItems="center" flexDirection="column" pb={['space.05', 'space.08']} px="space.05">
+      {children}
+    </Flex>
+  );
+}
diff --git a/src/app/ui/components/containers/dialog/components/dialog-content.layout.tsx b/src/app/ui/components/containers/dialog/components/dialog-content.layout.tsx
index 2ada98f005..3ad3c2384b 100644
--- a/src/app/ui/components/containers/dialog/components/dialog-content.layout.tsx
+++ b/src/app/ui/components/containers/dialog/components/dialog-content.layout.tsx
@@ -1,11 +1,49 @@
-import { Flex } from 'leather-styles/jsx';
+import { ReactNode } from 'react';
 
-import { HasChildren } from '@app/common/has-children';
+import { css } from 'leather-styles/css';
+import { Box } from 'leather-styles/jsx';
 
-export function DialogContent({ children }: HasChildren) {
+import { Footer } from '../../footers/footer';
+
+interface DialogContentProps {
+  children: ReactNode;
+  footer: ReactNode;
+  header: ReactNode;
+}
+//  TODO - move this up a level into Dialog
+
+/** @deprecated */
+export function DialogContent({ children, header, footer }: DialogContentProps) {
+  //  TODO re-test this app wide - getting rid of offets and adding new header variant 'big-title'
+  // need to make sure this doesnt introduce weird scrolling
   return (
-    <Flex alignItems="center" flexDirection="column" pb={['space.05', 'space.08']} px="space.05">
-      {children}
-    </Flex>
+    // maxHeight + overflow hidden to stop header being able to move on scroll
+    <Box maxHeight="100vh" overflowY="hidden">
+      {/* standard header height is 68px */}
+      {/* <Box
+        className={css({
+          position: 'fixed',
+          width: '100%',
+          height: '68px',
+          padding: '16px',
+        })}
+      > */}
+      {header}
+      {/* </Box> */}
+      <Box
+        className={css({
+          // paddingTop: '68px', // offset based on height of header - make this smarter
+
+          // allow scroll on small heights
+          overflowY: 'scroll',
+          '&::-webkit-scrollbar': {
+            display: 'none',
+          },
+        })}
+      >
+        {children}
+      </Box>
+      {footer && <Footer>{footer}</Footer>}
+    </Box>
   );
 }
diff --git a/src/app/ui/components/containers/dialog/dialog.stories.tsx b/src/app/ui/components/containers/dialog/dialog.stories.tsx
new file mode 100644
index 0000000000..98141da2ce
--- /dev/null
+++ b/src/app/ui/components/containers/dialog/dialog.stories.tsx
@@ -0,0 +1,15 @@
+import type { Meta } from '@storybook/react';
+
+import { Dialog as Component, DialogProps } from './dialog';
+
+const meta: Meta<typeof Component> = {
+  component: Component,
+  tags: ['autodocs'],
+  title: 'Design System/Containers/Dialog',
+};
+
+export default meta;
+
+export function Dialog(args: DialogProps) {
+  return <Component {...args} />;
+}
diff --git a/src/app/ui/components/containers/dialog/dialog.tsx b/src/app/ui/components/containers/dialog/dialog.tsx
index f9883f4963..d952c74325 100644
--- a/src/app/ui/components/containers/dialog/dialog.tsx
+++ b/src/app/ui/components/containers/dialog/dialog.tsx
@@ -1,13 +1,14 @@
 import { ReactNode, memo } from 'react';
+// FIXME - refactor navigate OUT of here so it will work with storybook
 import { useNavigate } from 'react-router-dom';
 
 import * as RadixDialog from '@radix-ui/react-dialog';
 import { css } from 'leather-styles/css';
 
 import { DialogHeader } from '../headers/dialog-header';
-import { PageLayout } from '../page.layout';
+import { DialogContent } from './components/dialog-content.layout';
 
-interface DialogProps {
+export interface DialogProps {
   children?: ReactNode;
   enableGoBack?: boolean;
   header?: ReactNode;
@@ -67,7 +68,7 @@ export const Dialog = memo(
                 animation: 'contentShow 150ms cubic-bezier(0.16, 1, 0.3, 1)',
               })}
             >
-              <PageLayout
+              <DialogContent
                 header={
                   header ? (
                     header
@@ -86,7 +87,7 @@ export const Dialog = memo(
                 footer={footer}
               >
                 {children}
-              </PageLayout>
+              </DialogContent>
             </RadixDialog.Content>
           </RadixDialog.Overlay>
         </RadixDialog.Portal>
diff --git a/src/app/ui/components/containers/footers/footer.stories.tsx b/src/app/ui/components/containers/footers/footer.stories.tsx
new file mode 100644
index 0000000000..e9f98f55f1
--- /dev/null
+++ b/src/app/ui/components/containers/footers/footer.stories.tsx
@@ -0,0 +1,15 @@
+import type { Meta } from '@storybook/react';
+
+import { Footer as Component, FooterProps } from './footer';
+
+const meta: Meta<typeof Component> = {
+  component: Component,
+  tags: ['autodocs'],
+  title: 'Design System/Containers/Footer',
+};
+
+export default meta;
+
+export function Footer(args: FooterProps) {
+  return <Component {...args} />;
+}
diff --git a/src/app/ui/components/containers/footers/footer.tsx b/src/app/ui/components/containers/footers/footer.tsx
index b568d297be..f6e12528f2 100644
--- a/src/app/ui/components/containers/footers/footer.tsx
+++ b/src/app/ui/components/containers/footers/footer.tsx
@@ -2,7 +2,7 @@ import { ReactNode } from 'react';
 
 import { Flex, FlexProps } from 'leather-styles/jsx';
 
-interface FooterProps extends FlexProps {
+export interface FooterProps extends FlexProps {
   children: ReactNode;
 }
 
diff --git a/src/app/ui/components/containers/headers/header.stories.tsx b/src/app/ui/components/containers/headers/header.stories.tsx
index 6edbc49018..bb2af042de 100644
--- a/src/app/ui/components/containers/headers/header.stories.tsx
+++ b/src/app/ui/components/containers/headers/header.stories.tsx
@@ -5,7 +5,7 @@ import { Header as Component, HeaderProps } from './header';
 const meta: Meta<typeof Component> = {
   component: Component,
   tags: ['autodocs'],
-  title: 'Header',
+  title: 'Design System/Containers/Header',
   args: {
     variant: 'home',
   },
@@ -21,7 +21,7 @@ const meta: Meta<typeof Component> = {
  *
  * ALL seem very similar but with slight variants. Probably even the same component but with different BG colours / options
  *
- *
+ * Approval / PSBT have unanswered Qs and may need more work
  *
  */
 
@@ -31,10 +31,6 @@ export function Header(args: HeaderProps) {
   return <Component {...args} onClose={() => null} onGoBack={() => null} />;
 }
 
-// TODO investigate proper storybook breakpoints for this
-// https://storybook.js.org/addons/storybook-addon-breakpoints
-
-// so we can test UI in extension size properly
 export function BigTitleHeader() {
   return <Component variant="big-title" title="Choose asset to receive" onClose={() => null} />;
 }
@@ -52,9 +48,6 @@ export function LedgerHeader(args: HeaderProps) {
   );
 }
 
-// WORK on this to get a responsive page going then move onto footers
 export function PageHeader(args: HeaderProps) {
   return <Component {...args} title="Some page" onGoBack={() => null} />;
 }
-
-// NOTE - Approval / PSBT have unanswered Qs and may need more work
diff --git a/src/app/ui/components/containers/page.layout.tsx b/src/app/ui/components/containers/page.layout.tsx
deleted file mode 100644
index 1f49b660f9..0000000000
--- a/src/app/ui/components/containers/page.layout.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-import { ReactNode } from 'react';
-
-import { css } from 'leather-styles/css';
-import { Box } from 'leather-styles/jsx';
-
-import { Footer } from './footers/footer';
-
-interface PageLayoutProps {
-  children: ReactNode;
-  footer: ReactNode;
-  header: ReactNode;
-}
-export function PageLayout(props: PageLayoutProps) {
-  const { children, header, footer } = props;
-
-  //  TODO re-test this app wide - getting rid of offets and adding new header variant 'big-title'
-  // need to make sure this doesnt introduce weird scrolling
-  return (
-    // maxHeight + overflow hidden to stop header being able to move on scroll
-    <Box maxHeight="100vh" overflowY="hidden">
-      {/* standard header height is 68px */}
-      {/* <Box
-        className={css({
-          position: 'fixed',
-          width: '100%',
-          height: '68px',
-          padding: '16px',
-        })}
-      > */}
-      {header}
-      {/* </Box> */}
-      <Box
-        className={css({
-          // paddingTop: '68px', // offset based on height of header - make this smarter
-
-          // allow scroll on small heights
-          overflowY: 'scroll',
-          '&::-webkit-scrollbar': {
-            display: 'none',
-          },
-        })}
-      >
-        {children}
-      </Box>
-      {footer && <Footer>{footer}</Footer>}
-    </Box>
-  );
-}