diff --git a/web/src/components/features/modal/AddToDashboardModal.stories.tsx b/web/src/components/features/modal/AddToDashboardModal.stories.tsx
new file mode 100644
index 000000000..de32d1de7
--- /dev/null
+++ b/web/src/components/features/modal/AddToDashboardModal.stories.tsx
@@ -0,0 +1,54 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { AddToDashboardModal } from './AddToDashboardModal';
+import { http, HttpResponse } from 'msw';
+import { fn } from '@storybook/test';
+import { BASE_URL } from '@/api/buster_rest/config';
+import { BusterMetricListItem, VerificationStatus } from '@/api/asset_interfaces';
+import { createMockListMetric } from '@/mocks/metric';
+
+const mockMetrics: BusterMetricListItem[] = Array.from({ length: 100 }, (_, index) =>
+  createMockListMetric(`${index + 1}`)
+);
+
+const meta = {
+  title: 'Features/Modal/AddToDashboardModal',
+  component: AddToDashboardModal,
+  parameters: {
+    layout: 'centered',
+    msw: {
+      handlers: [
+        http.get(`${BASE_URL}/metrics`, () => {
+          return HttpResponse.json(mockMetrics);
+        })
+      ]
+    }
+  }
+} satisfies Meta<typeof AddToDashboardModal>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    open: true,
+    onClose: fn(),
+    dashboardId: 'dashboard-1'
+  }
+};
+
+export const EmptyState: Story = {
+  args: {
+    open: true,
+    onClose: fn(),
+    dashboardId: 'dashboard-1'
+  },
+  parameters: {
+    msw: {
+      handlers: [
+        http.get(`${BASE_URL}/metrics`, () => {
+          return HttpResponse.json([]);
+        })
+      ]
+    }
+  }
+};
diff --git a/web/src/components/ui/modal/AppModal.tsx b/web/src/components/ui/modal/AppModal.tsx
index b4f83c007..31e9df489 100644
--- a/web/src/components/ui/modal/AppModal.tsx
+++ b/web/src/components/ui/modal/AppModal.tsx
@@ -72,15 +72,15 @@ export const AppModal: React.FC<ModalProps> = React.memo(
     return (
       <Dialog open={open} onOpenChange={onOpenChange}>
         <DialogContent className={className} style={memoizedStyle}>
-          <div className="flex flex-col gap-4 overflow-hidden p-6">
+          <div className="flex flex-col gap-4 overflow-hidden">
             {header && (
-              <DialogHeader>
+              <DialogHeader className="px-6 pt-6">
                 {header.title && <DialogTitle>{header.title}</DialogTitle>}
                 {header.description && <DialogDescription>{header.description}</DialogDescription>}
               </DialogHeader>
             )}
 
-            {children}
+            <div className="px-6"> {children}</div>
           </div>
 
           {footer && (
diff --git a/web/src/mocks/metric.ts b/web/src/mocks/metric.ts
index ddd35c060..7e5fb452a 100644
--- a/web/src/mocks/metric.ts
+++ b/web/src/mocks/metric.ts
@@ -3,7 +3,8 @@ import {
   type DataMetadata,
   DEFAULT_CHART_CONFIG,
   type IBusterMetricChartConfig,
-  type IBusterMetric
+  type IBusterMetric,
+  BusterMetricListItem
 } from '@/api/asset_interfaces/metric';
 import { ShareRole, VerificationStatus } from '@/api/asset_interfaces/share';
 import { faker } from '@faker-js/faker';
@@ -196,3 +197,17 @@ export const mockMetric27 = createMockMetric('number27');
 export const mockMetric28 = createMockMetric('number28');
 export const mockMetric29 = createMockMetric('number29');
 export const mockMetric30 = createMockMetric('number30');
+
+export const createMockListMetric = (id: string): BusterMetricListItem => ({
+  id,
+  title: faker.lorem.words({ min: 2, max: 6 }),
+  last_edited: faker.date.recent().toISOString(),
+  dataset_name: faker.lorem.words({ min: 2, max: 6 }),
+  dataset_uuid: faker.string.uuid(),
+  created_by_id: faker.string.uuid(),
+  created_by_name: faker.person.fullName(),
+  created_by_email: faker.internet.email(),
+  created_by_avatar: faker.image.avatar(),
+  status: VerificationStatus.VERIFIED,
+  is_shared: true
+});