diff --git a/docs/src/pages/components/DatePicker.svx b/docs/src/pages/components/DatePicker.svx
index 039f5054..30dd2a96 100644
--- a/docs/src/pages/components/DatePicker.svx
+++ b/docs/src/pages/components/DatePicker.svx
@@ -3,19 +3,10 @@ components: ["DatePicker", "DatePickerInput", "DatePickerSkeleton"]
 ---
 
 <script>
-  import { DatePicker, DatePickerSkeleton, DatePickerInput, InlineNotification, CodeSnippet } from "carbon-components-svelte";
+  import { DatePicker, DatePickerSkeleton, DatePickerInput } from "carbon-components-svelte";
   import Preview from "../../components/Preview.svelte";
-
-  const modalCodeSnippet = `<DatePicker datePickerType="single" flatpickrProps="{{ static: true }}">
-  <DatePickerInput />
-</DatePicker>"/>`
 </script>
 
-<InlineNotification svx-ignore title="Note:" kind="info" hideCloseButton>
-  <span class="body-short-01">If you are using the DatePicker inside of a Modal you might need to add <code>static</code> to the <code>flatpickrProps</code> as shown below to correct the positioning.</span>
-</InlineNotification>
-<CodeSnippet type="multi" code={modalCodeSnippet}/>
-
 ### Default (simple)
 
 <DatePicker>
@@ -78,6 +69,10 @@ components: ["DatePicker", "DatePickerInput", "DatePickerSkeleton"]
 
 <FileSource src="/framed/DatePicker/DatePickerRange" />
 
+### DatePicker in a modal
+
+<FileSource src="/framed/DatePicker/DatePickerModal" />
+
 ### Skeleton
 
 <DatePickerSkeleton />
diff --git a/docs/src/pages/framed/DatePicker/DatePickerModal.svelte b/docs/src/pages/framed/DatePicker/DatePickerModal.svelte
new file mode 100644
index 00000000..23a855b0
--- /dev/null
+++ b/docs/src/pages/framed/DatePicker/DatePickerModal.svelte
@@ -0,0 +1,9 @@
+<script>
+  import { Modal, DatePicker, DatePickerInput } from "carbon-components-svelte";
+</script>
+
+<Modal>
+  <DatePicker flatpickrProps="{{ static: true }}">
+    <DatePickerInput />
+  </DatePicker>"/>
+</Modal>