update src/components/Datepicker/CalenderList/index.js

public/images/CalenderListGroup2495.svg

@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="54" height="54" viewBox="0 0 54 54">
+  <g id="Group_2495" data-name="Group 2495" transform="translate(-975 -14)">
+    <rect id="Rectangle_941" data-name="Rectangle 941" width="54" height="54" rx="6" transform="translate(1029 68) rotate(180)" fill="#f8f8f8"/>
+    <g id="vuesax_linear_arrow-left" data-name="vuesax/linear/arrow-left" transform="translate(1378 305) rotate(180)">
+      <g id="arrow-left">
+        <path id="Vector" d="M7.1,15.84.577,9.32a1.986,1.986,0,0,1,0-2.8L7.1,0" transform="translate(371.902 256.08)" fill="none" stroke="#4878e6" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+        <path id="Vector-2" data-name="Vector" d="M0,0H24V24H0Z" transform="translate(388 276) rotate(180)" fill="none" opacity="0"/>
+      </g>
+    </g>
+  </g>
+</svg>

public/images/CalenderListGroup2496.svg

@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="54" height="54" viewBox="0 0 54 54">
+  <g id="Group_2496" data-name="Group 2496" transform="translate(-906 -14)">
+    <rect id="Rectangle_940" data-name="Rectangle 940" width="54" height="54" rx="6" transform="translate(906 14)" fill="#f8f8f8"/>
+    <g id="vuesax_linear_arrow-left" data-name="vuesax/linear/arrow-left" transform="translate(557 -223)">
+      <g id="arrow-left">
+        <path id="Vector" d="M7.1,15.84.577,9.32a1.986,1.986,0,0,1,0-2.8L7.1,0" transform="translate(371.902 256.08)" fill="none" stroke="#4878e6" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+        <path id="Vector-2" data-name="Vector" d="M0,0H24V24H0Z" transform="translate(388 276) rotate(180)" fill="none" opacity="0"/>
+      </g>
+    </g>
+  </g>
+</svg>

src/components/Datepicker/CalenderList/index.js

@@ -3,18 +3,20 @@ import React from "react";
 import Calender from "../Calender";
 import Button from "../../ButtonDesign/Button/";
 
-const CalenderList = ({ buttons }) => {
+const CalenderList = ({ buttons, leftArrow, rightArrow }) => {
   return (
-    <div className="flex flex-col bg-white">
-      <div className="w-[96%] mx-auto flex flex-row ">
+    <div className="flex flex-col bg-white mx-auto">
+      <div className="w-[96%] mx-auto flex flex-row items-center">
         {/* right side */}
         <div className=" flex flex-row items-center divide-x-2 divide-surfaceBorder divide-x-reverse">
           {/* right side */}
-          <div className="flex px-4 flex-row text-primaryText">
-            <span className="text-sm">خرداد</span>
+          <div className="flex flex-row items-center px-4 text-primaryText">
+            <img src={rightArrow} class="w-8" alt="right-arrow" />
+            <span className="text-sm mx-2">خرداد</span>
+            <img src={leftArrow} class="w-8" alt="left-arrow" />
           </div>
           {/* left side */}
-          <div className="flex px-4 flex-row">
+          <div className="flex px-4 flex-row items-center">
             {buttons.map((button, i) => (
               <Button
                 key={i}
@@ -47,6 +49,9 @@ const CalenderList = ({ buttons }) => {
 export default CalenderList;
 
 CalenderList.defaultProps = {
+  leftArrow: "images/CalenderListGroup2496.svg",
+  rightArrow: "images/CalenderListGroup2495.svg",
+
   buttons: [
     {
       title: "روز",