diff --git a/components/kit/components/form/dateTimePicker/DatePicker.tsx b/components/kit/components/form/dateTimePicker/DatePicker.tsx
new file mode 100644
index 0000000..8c95a21
--- /dev/null
+++ b/components/kit/components/form/dateTimePicker/DatePicker.tsx
@@ -0,0 +1,12 @@
+import React from 'react';
+
+export const DatePicker = () => {
+    return (
+        <label className="text-gray-700" htmlFor="date">
+            <input
+                className="border border-gray-300 w-full py-2 px-4 bg-white text-gray-700 rounded-lg text-base focus:outline-none focus:ring-2 focus:ring-purple-600 focus:border-transparent flex-1 dark:bg-gray-800 dark:text-white dark:border-none"
+                type="date"
+            />
+        </label>
+    );
+};
diff --git a/components/kit/components/form/dateTimePicker/DateTimePicker.tsx b/components/kit/components/form/dateTimePicker/DateTimePicker.tsx
new file mode 100644
index 0000000..9bbec7e
--- /dev/null
+++ b/components/kit/components/form/dateTimePicker/DateTimePicker.tsx
@@ -0,0 +1,12 @@
+import React from 'react';
+
+export const DateTimePicker = () => {
+    return (
+        <label className="text-gray-700" htmlFor="datetime">
+            <input
+                className="border border-gray-300 w-full py-2 px-4 bg-white text-gray-700 rounded-lg text-base focus:outline-none focus:ring-2 focus:ring-purple-600 focus:border-transparent flex-1 dark:bg-gray-800 dark:text-white dark:border-none"
+                type="datetime-local"
+            />
+        </label>
+    );
+};
diff --git a/components/kit/components/form/dateTimePicker/TimePicker.tsx b/components/kit/components/form/dateTimePicker/TimePicker.tsx
index f2b34d7..0ba5d24 100644
--- a/components/kit/components/form/dateTimePicker/TimePicker.tsx
+++ b/components/kit/components/form/dateTimePicker/TimePicker.tsx
@@ -4,7 +4,7 @@ export const TimePicker = () => {
     return (
         <label className="text-gray-700" htmlFor="time">
             <input
-                className="appearance-none border border-gray-300 w-full py-2 px-4 bg-white text-gray-700 placeholder-gray-400 rounded-lg text-base focus:outline-none focus:ring-2 focus:ring-purple-600 focus:border-transparent flex-1"
+                className="appearance-none border border-gray-300 w-full py-2 px-4 bg-white text-gray-700 rounded-lg text-base focus:outline-none focus:ring-2 focus:ring-purple-600 focus:border-transparent flex-1"
                 type="time"
             />
         </label>
diff --git a/components/kit/components/form/index.tsx b/components/kit/components/form/index.tsx
index 0d901f7..0f9b377 100644
--- a/components/kit/components/form/index.tsx
+++ b/components/kit/components/form/index.tsx
@@ -5,7 +5,7 @@ const Forms: FC = () => {
     const formSections = [
         {
             title: 'Inputs',
-            items: 10,
+            items: 14,
             img: 'images/sections/input.png',
             link: '/components/inputtext',
         },
diff --git a/pages/components/inputtext/index.tsx b/pages/components/inputtext/index.tsx
index dad54be..af6423d 100644
--- a/pages/components/inputtext/index.tsx
+++ b/pages/components/inputtext/index.tsx
@@ -6,6 +6,8 @@ import InputText from '../../../components/kit/components/form/inputtext/InputTe
 import InputArea from '../../../components/kit/components/form/inputtext/InputArea';
 import InputGroup from '../../../components/kit/components/form/inputtext/InputGroup';
 import { TimePicker } from '../../../components/kit/components/form/dateTimePicker/TimePicker';
+import { DatePicker } from '../../../components/kit/components/form/dateTimePicker/DatePicker';
+import { DateTimePicker } from '../../../components/kit/components/form/dateTimePicker/DateTimePicker';
 
 const InputTextPage: FC = () => {
     return (
@@ -103,6 +105,13 @@ const InputTextPage: FC = () => {
             <ComponentLayout title="Group" element={<InputGroup />} component={InputText} />
             <ComponentLayout title="textarea" element={<InputArea />} component={InputArea} />
             <ComponentLayout title="Time Picker" element={<TimePicker />} component={TimePicker} />
+            <ComponentLayout title="Date Picker" element={<DatePicker />} component={DatePicker} showSwitchMode />
+            <ComponentLayout
+                title="DateTime Picker"
+                element={<DateTimePicker />}
+                component={DateTimePicker}
+                showSwitchMode
+            />
         </AppLayout>
     );
 };