diff --git a/pages/bluedialog/bluedialog.page.tsx b/pages/bluedialog/bluedialog.page.tsx
index c9bdf87884..9c4f2f5363 100644
--- a/pages/bluedialog/bluedialog.page.tsx
+++ b/pages/bluedialog/bluedialog.page.tsx
@@ -1,127 +1,21 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
-import React, { useEffect, useRef } from 'react';
+import React from 'react';
 
-import {
-  Box,
-  Button,
-  DatePicker,
-  ExpandableSection,
-  Form,
-  FormField,
-  Header,
-  Input,
-  Select,
-  SpaceBetween,
-  Textarea,
-} from '~components';
+import { Box } from '~components';
 
-import styles from './styles.scss';
-
-export default function Bluedialogbox() {
-  const dialogRef = useRef<HTMLDivElement>(null);
-  const triggerRef = useRef<HTMLElement | null>(null);
-  // Inputs (these following can be clubbed into one state object)
-  const [dateValue, setDateValue] = React.useState('');
-  const [amountValue, setAmountValue] = React.useState('0');
-  const [descriptionValue, setDescriptionValue] = React.useState('');
-  const [selectedService, setSelectedService] = React.useState({ label: 'Cloudwatch', value: 'Cloudwatch' });
-
-  useEffect(() => {
-    // Store the element that had focus before dialog opened
-    triggerRef.current = document.activeElement as HTMLElement;
-
-    // Focus the dialog container when it opens
-    if (dialogRef.current) {
-      dialogRef.current.focus();
-    }
-    // Cleanup: Return focus to the trigger element when dialog closes
-    return () => {
-      if (triggerRef.current) {
-        triggerRef.current.focus();
-      }
-    };
-  }, []);
-  function submitData() {
-    console.log({ dateValue, amountValue, descriptionValue, selectedService }); // submit the form with these values to determine next action
-  }
-  function skipDialog() {
-    console.log('skip dialog'); // can be used by the parent component to dismiss/ hide this dialog box
-  }
+import Bluedialog from './dialog';
 
+export default function BluedialogPage() {
+  const submitData = (data: any) => {
+    console.log(data); // submit the form with these values to determine next action
+  };
+  const skipDialog = () => {
+    console.log('skip dialog');
+  };
   return (
-    <div
-      className={styles['blue-dialog-box']}
-      role={'dialog'}
-      aria-labelledby="dialog-title"
-      aria-modal="false" // Maintains natural focus flow since it's an inline dialog
-      tabIndex={-1} // This allows the dialog to receive focus
-    >
-      <Form
-        header={
-          <div className={styles['blue-dialog-box__header']} id={'dialog-title'}>
-            <Header variant="h1">Dialog header</Header>
-            <Button iconName="close" variant="icon" onClick={skipDialog} aria-label="Close dialog" />
-          </div>
-        }
-      >
-        <div className={styles['blue-dialog-box__content']}>
-          <SpaceBetween direction="vertical" size="l">
-            <FormField label="When did the increase occur?">
-              <DatePicker
-                onChange={({ detail }) => setDateValue(detail.value)}
-                value={dateValue}
-                openCalendarAriaLabel={selectedDate =>
-                  'Choose certificate expiry date' + (selectedDate ? `, selected date is ${selectedDate}` : '')
-                }
-                placeholder="YYYY/MM/DD"
-                ariaLabel="Select date of increase"
-              />
-            </FormField>
-            <FormField constraintText="Enter a dollar amount in USD" label="What is the increase amount?">
-              <Input
-                value={amountValue}
-                onChange={({ detail }) => setAmountValue(detail.value)}
-                ariaLabel="Enter increase amount in USD"
-              />
-            </FormField>
-
-            <ExpandableSection
-              defaultExpanded={true}
-              headerText={
-                <Box color="text-status-inactive" fontWeight="bold" fontSize="heading-xs">
-                  Provide more details to enhance troubleshooting
-                </Box>
-              }
-              aria-expanded={true}
-            >
-              <SpaceBetween size={'l'}>
-                <FormField label="Which service is this related to ? - optional">
-                  <Select
-                    selectedOption={selectedService}
-                    onChange={({ detail }: any) => setSelectedService(detail.selectedOption)}
-                    options={[
-                      { label: 'Cloudwatch', value: 'Cloudwatch' },
-                      { label: 'Dynamodb', value: 'Dynamodb' },
-                      { label: 'Route 53', value: 'Route 53' },
-                      { label: 'S3', value: 'S3' },
-                    ]}
-                    ariaLabel="Select related service"
-                  />
-                </FormField>
-                <FormField label="Describe the issue in few words. - optional">
-                  <Textarea onChange={({ detail }) => setDescriptionValue(detail.value)} value={descriptionValue} />
-                </FormField>
-              </SpaceBetween>
-            </ExpandableSection>
-          </SpaceBetween>
-        </div>
-        <div className={styles['blue-dialog-box__footer']}>
-          <Button onClick={submitData} ariaLabel="Submit form">
-            Submit
-          </Button>
-        </div>
-      </Form>
-    </div>
+    <Box padding="xxl">
+      <Bluedialog onSubmit={submitData} onSkip={skipDialog} />
+    </Box>
   );
 }
diff --git a/pages/bluedialog/dialog.tsx b/pages/bluedialog/dialog.tsx
new file mode 100644
index 0000000000..9e9a6cded6
--- /dev/null
+++ b/pages/bluedialog/dialog.tsx
@@ -0,0 +1,127 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React, { useEffect, useRef } from 'react';
+
+import {
+  Box,
+  Button,
+  DatePicker,
+  ExpandableSection,
+  Form,
+  FormField,
+  Header,
+  Input,
+  Select,
+  SpaceBetween,
+  Textarea,
+} from '~components';
+
+import styles from './styles.scss';
+
+export default function Bluedialog({ onSubmit, onSkip }: any) {
+  const dialogRef = useRef<HTMLDivElement>(null);
+  const triggerRef = useRef<HTMLElement | null>(null);
+  // Inputs (these following can be clubbed into one state object)
+  const [dateValue, setDateValue] = React.useState('');
+  const [amountValue, setAmountValue] = React.useState('0');
+  const [descriptionValue, setDescriptionValue] = React.useState('');
+  const [selectedService, setSelectedService] = React.useState({ label: 'Cloudwatch', value: 'Cloudwatch' });
+
+  useEffect(() => {
+    // Store the element that had focus before dialog opened
+    triggerRef.current = document.activeElement as HTMLElement;
+
+    // Focus the dialog container when it opens
+    if (dialogRef.current) {
+      dialogRef.current.focus();
+    }
+    // Cleanup: Return focus to the trigger element when dialog closes
+    return () => {
+      if (triggerRef.current) {
+        triggerRef.current.focus();
+      }
+    };
+  }, []);
+  function submitData() {
+    onSubmit({ dateValue, amountValue, descriptionValue, selectedService });
+  }
+  function skipDialog() {
+    onSkip(); // can be used by the parent component to dismiss/ hide this dialog box
+  }
+
+  return (
+    <div
+      className={styles['blue-dialog-box']}
+      role={'dialog'}
+      aria-labelledby="dialog-title"
+      aria-modal="false" // Maintains natural focus flow since it's an inline dialog
+      tabIndex={-1} // This allows the dialog to receive focus
+    >
+      <Form
+        header={
+          <div className={styles['blue-dialog-box__header']} id={'dialog-title'}>
+            <Header variant="h1">Dialog header</Header>
+            <Button iconName="close" variant="icon" onClick={skipDialog} aria-label="Close dialog" />
+          </div>
+        }
+      >
+        <div className={styles['blue-dialog-box__content']}>
+          <SpaceBetween direction="vertical" size="l">
+            <FormField label="When did the increase occur?">
+              <DatePicker
+                onChange={({ detail }) => setDateValue(detail.value)}
+                value={dateValue}
+                openCalendarAriaLabel={selectedDate =>
+                  'Choose certificate expiry date' + (selectedDate ? `, selected date is ${selectedDate}` : '')
+                }
+                placeholder="YYYY/MM/DD"
+                ariaLabel="Select date of increase"
+              />
+            </FormField>
+            <FormField constraintText="Enter a dollar amount in USD" label="What is the increase amount?">
+              <Input
+                value={amountValue}
+                onChange={({ detail }) => setAmountValue(detail.value)}
+                ariaLabel="Enter increase amount in USD"
+              />
+            </FormField>
+
+            <ExpandableSection
+              defaultExpanded={true}
+              headerText={
+                <Box color="text-status-inactive" fontWeight="bold" fontSize="heading-xs">
+                  Provide more details to enhance troubleshooting
+                </Box>
+              }
+              aria-expanded={true}
+            >
+              <SpaceBetween size={'l'}>
+                <FormField label="Which service is this related to ? - optional">
+                  <Select
+                    selectedOption={selectedService}
+                    onChange={({ detail }: any) => setSelectedService(detail.selectedOption)}
+                    options={[
+                      { label: 'Cloudwatch', value: 'Cloudwatch' },
+                      { label: 'Dynamodb', value: 'Dynamodb' },
+                      { label: 'Route 53', value: 'Route 53' },
+                      { label: 'S3', value: 'S3' },
+                    ]}
+                    ariaLabel="Select related service"
+                  />
+                </FormField>
+                <FormField label="Describe the issue in few words. - optional">
+                  <Textarea onChange={({ detail }) => setDescriptionValue(detail.value)} value={descriptionValue} />
+                </FormField>
+              </SpaceBetween>
+            </ExpandableSection>
+          </SpaceBetween>
+        </div>
+        <div className={styles['blue-dialog-box__footer']}>
+          <Button onClick={submitData} ariaLabel="Submit form">
+            Submit
+          </Button>
+        </div>
+      </Form>
+    </div>
+  );
+}
diff --git a/pages/bluedialog/styles.scss b/pages/bluedialog/styles.scss
index c526670051..7f02ce8191 100644
--- a/pages/bluedialog/styles.scss
+++ b/pages/bluedialog/styles.scss
@@ -5,8 +5,6 @@
 @use '~design-tokens' as awsui;
 
 .blue-dialog-box {
-  margin-block: 20px;
-  margin-inline: 20px;
   border-block: 1px solid awsui.$color-border-status-info;
   border-inline: 1px solid awsui.$color-border-status-info;
   background-color: awsui.$color-background-status-info;