diff --git a/packages/react/src/components/Forms/DatePicker/index.scss b/packages/react/src/components/Forms/DatePicker/index.scss
index e22b5da..3a4e26e 100644
--- a/packages/react/src/components/Forms/DatePicker/index.scss
+++ b/packages/react/src/components/Forms/DatePicker/index.scss
@@ -213,6 +213,7 @@
 .c__calendar {
   display: block;
   transform: translate(2px, 0);
+  max-width: px-to-rem(340px);
 
   &__wrapper {
     display: block;
diff --git a/packages/react/src/components/Forms/DatePicker/index.stories.tsx b/packages/react/src/components/Forms/DatePicker/index.stories.tsx
index 059226c..7757545 100644
--- a/packages/react/src/components/Forms/DatePicker/index.stories.tsx
+++ b/packages/react/src/components/Forms/DatePicker/index.stories.tsx
@@ -87,6 +87,14 @@ export const WithText = {
   },
 };
 
+export const Fullwidth = {
+  render: Template,
+  args: {
+    defaultValue: "2023-05-24",
+    fullWidth: true,
+  },
+};
+
 export const Controlled = () => {
   const [value, setValue] = useState<StringOrDate | null>("2023-05-26");
   return (