diff --git a/src/App.tsx b/src/App.tsx
index 5c8df8ee6..b0c825026 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,3 +1,9 @@
-const App = () => <div>Hello, React Payments</div>;
+import { AppLayout } from 'src/components/AppLayout';
+
+const App = () => (
+  <AppLayout>
+    <div>Hello, React Payments</div>
+  </AppLayout>
+);
 
 export default App;
diff --git a/src/components/AppLayout/AppLayout.stories.tsx b/src/components/AppLayout/AppLayout.stories.tsx
new file mode 100644
index 000000000..1d63080da
--- /dev/null
+++ b/src/components/AppLayout/AppLayout.stories.tsx
@@ -0,0 +1,35 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { AppLayout } from '@/components/AppLayout/AppLayout.tsx';
+import { HStack, VStack } from '@/shared/components';
+import { styleToken } from '@/shared/styles';
+
+const meta = {
+  title: 'Components/AppLayout',
+  component: AppLayout,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof AppLayout>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Primary: Story = {
+  args: {
+    children: (
+      <VStack gap="20px" alignItems="center" justifyContent="center">
+        <HStack backgroundColor={styleToken.color.gray100} width="100%" justifyContent="space-between" padding="10px">
+          <div>Left</div>
+          <div>Right</div>
+        </HStack>
+        <VStack backgroundColor={styleToken.color.gray200} width="100%" padding="10px">
+          <div>App Item 1</div>
+          <div>App Item 2</div>
+          <div>App Item 3</div>
+        </VStack>
+      </VStack>
+    ),
+  },
+};
diff --git a/src/components/AppLayout/AppLayout.tsx b/src/components/AppLayout/AppLayout.tsx
new file mode 100644
index 000000000..61c68fe2c
--- /dev/null
+++ b/src/components/AppLayout/AppLayout.tsx
@@ -0,0 +1,26 @@
+import { PropsWithChildren } from 'react';
+import { Box, VStack } from '@/shared/components';
+import { styleToken } from '@/shared/styles';
+
+export const AppLayout = ({ children }: PropsWithChildren) => (
+  <Box
+    as="section"
+    backgroundColor={styleToken.color.white}
+    width="375px"
+    minWidth="375px"
+    height="700px"
+    position="relative"
+    borderRadius="15px"
+    border={`1px solid ${styleToken.color.body}`}
+  >
+    <AppLayoutDisplay>{children}</AppLayoutDisplay>
+  </Box>
+);
+
+const AppLayoutDisplay = ({ children }: PropsWithChildren) => (
+  <VStack as="section" height="100%" padding="16px 24px">
+    {children}
+  </VStack>
+);
+
+AppLayout.displayName = 'AppLayout';
diff --git a/src/components/AppLayout/index.ts b/src/components/AppLayout/index.ts
new file mode 100644
index 000000000..9476423f2
--- /dev/null
+++ b/src/components/AppLayout/index.ts
@@ -0,0 +1 @@
+export * from './AppLayout.tsx';
diff --git a/src/components/index.ts b/src/components/index.ts
new file mode 100644
index 000000000..8c74dcbcb
--- /dev/null
+++ b/src/components/index.ts
@@ -0,0 +1 @@
+export * from './AppLayout';
diff --git a/src/main.tsx b/src/main.tsx
index c018515cd..65d5d8f71 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -1,9 +1,11 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
-import App from './App';
+import App from '@/App.tsx';
+import { GlobalStyles } from '@/shared/styles';
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
+    <GlobalStyles />
     <App />
   </React.StrictMode>,
 );