diff --git a/docs/src/pages/framed/DatePicker/DatePickerModal.svelte b/docs/src/pages/framed/DatePicker/DatePickerModal.svelte
index 23a855b0..3940d610 100644
--- a/docs/src/pages/framed/DatePicker/DatePickerModal.svelte
+++ b/docs/src/pages/framed/DatePicker/DatePickerModal.svelte
@@ -2,8 +2,8 @@
   import { Modal, DatePicker, DatePickerInput } from "carbon-components-svelte";
 </script>
 
-<Modal>
-  <DatePicker flatpickrProps="{{ static: true }}">
-    <DatePickerInput />
-  </DatePicker>"/>
+<Modal open modalHeading="DatePicker">
+  <DatePicker datePickerType="single" flatpickrProps="{{ static: true }}">
+    <DatePickerInput labelText="Meeting date" placeholder="mm/dd/yyyy" />
+  </DatePicker>
 </Modal>