diff --git a/packages/frontend/src/pages/components/index.tsx b/packages/frontend/src/pages/components/index.tsx
index 67e68e0b..28378064 100644
--- a/packages/frontend/src/pages/components/index.tsx
+++ b/packages/frontend/src/pages/components/index.tsx
@@ -23,6 +23,7 @@ import {
   renderInlineNotifications,
 } from './renders/inlineNotifications';
 import { renderInputs } from './renders/input';
+import { DatePicker } from 'components/shared/DatePicker';
 
 const Page = () => {
   const [singleDate, setSingleDate] = useState<Value>();
@@ -123,6 +124,16 @@ const Page = () => {
                 />
               </div>
             </div>
+
+            <h1 className="text-2xl font-bold">Date Picker</h1>
+            <div className="flex flex-col gap-10 items-center justify-center">
+              <DatePicker value={singleDate} onChange={setSingleDate} />
+              <DatePicker
+                selectRange
+                value={dateRange}
+                onChange={setDateRange}
+              />
+            </div>
           </div>
 
           <div className="w-full h border border-gray-200 px-20 my-10" />