diff --git a/src/components/SimpleDatePicker/index.js b/src/components/SimpleDatePicker/index.js
new file mode 100644
index 0000000..37ab4cc
--- /dev/null
+++ b/src/components/SimpleDatePicker/index.js
@@ -0,0 +1,19 @@
+import React, { useState } from 'react';
+import DatePicker from "react-modern-calendar-datepicker";
+import '../Calendar/index.css';
+const SimpleDatePicker = () =>{
+    const [selectedDay, setSelectedDay] = useState(null);
+    return(
+        <div className='flex items-center justify-center w-full my-2'>
+            <DatePicker
+                value={selectedDay}
+                onChange={setSelectedDay}
+                inputPlaceholder="Select a day"
+                shouldHighlightWeekends
+                locale='fa'
+            />
+        </div>
+    )
+}
+
+export default SimpleDatePicker;
\ No newline at end of file
diff --git a/src/redux/data.js b/src/redux/data.js
index 247bce0..a1d772c 100644
--- a/src/redux/data.js
+++ b/src/redux/data.js
@@ -23,6 +23,7 @@ import Product from "../components/Product";
 import Navbar from "../components/Navbar";
 import SimpleCalendar from '../components/Calendar';
 import Footer from "../components/Footer";
+import SimpleDatePicker from "../components/SimpleDatePicker";
 const components = [
   {
     name: "Button",
@@ -475,6 +476,16 @@ const components = [
       code: null,
     },
   },
+  {
+    name: "SimpleDatePicker",
+    author: "Keshavarzi",
+    props: [],
+    content: {
+      name: "SimpleDatePicker",
+      component: <SimpleDatePicker />,
+      code: null,
+    },
+  },
 ];
 
 export default components;