diff --git a/src/components/ButtonDesign/ButtonNextToEachOther/index.js b/src/components/ButtonDesign/ButtonNextToEachOther/index.js
deleted file mode 100644
index ad47d8f..0000000
--- a/src/components/ButtonDesign/ButtonNextToEachOther/index.js
+++ /dev/null
@@ -1,46 +0,0 @@
-import React from "react";
-import Button from "../Button";
-
-const ButtonNextToEachOther = ({ buttons }) => {
-  return (
-    <div className="flex flex-row">
-      <div className="flex flex-row">
-        {buttons.map((button, i) => (
-          <Button
-            text={button.title}
-            className={`${button.className} w-16 text-primaryText text-lg  border border-primary px-4 py-2`}
-          />
-        ))}
-      </div>
-      <div className="flex flex-row mr-5">
-        <Button
-          text={"امروز"}
-          className="text-primaryText text-lg border border-primary rounded-sm px-4 py-2"
-        />
-      </div>
-    </div>
-  );
-};
-
-export default ButtonNextToEachOther;
-
-ButtonNextToEachOther.defaultProps = {
-  buttons: [
-    {
-      title: "روز",
-      className: "rounded-tr-lg rounded-br-lg",
-    },
-    {
-      title: "هفته",
-      className: "",
-    },
-    {
-      title: "ماه",
-      className: "",
-    },
-    {
-      title: "سال",
-      className: "rounded-tl-lg rounded-bl-lg",
-    },
-  ],
-};
diff --git a/src/components/ButtonDesign/index.js b/src/components/ButtonDesign/index.js
index 5f07818..101a27a 100644
--- a/src/components/ButtonDesign/index.js
+++ b/src/components/ButtonDesign/index.js
@@ -2,13 +2,11 @@ import React, { useState } from "react";
 
 import Button from "./Button";
 import ButtonDivTag from "./ButtonDivTag";
-import ButtonNextToEachOther from "./ButtonNextToEachOther";
 
 function ButtonDesign() {
   const list = {
     1: <Button />,
     2: <ButtonDivTag />,
-    3: <ButtonNextToEachOther />,
   };
   const [type, setType] = useState(1);
 
diff --git a/src/components/Datepicker/CalenderList/index.js b/src/components/Datepicker/CalenderList/index.js
index b6e8e53..3dd2811 100644
--- a/src/components/Datepicker/CalenderList/index.js
+++ b/src/components/Datepicker/CalenderList/index.js
@@ -1,26 +1,69 @@
 import React from "react";
 
 import Calender from "../Calender";
+import Button from "../../ButtonDesign/Button/";
 
-const CalenderList = () => {
+const CalenderList = ({ buttons }) => {
   return (
-    <div className="bg-surface rounded p-4 w-full flex flex-wrap space-between gap-5">
-      <Calender />
-      <Calender />
-      <Calender />
-      <Calender />
-      <Calender />
-      <Calender />
-      <Calender />
-      <Calender />
-      <Calender />
-      <Calender />
-      <Calender />
-      <Calender />
+    <div className="flex flex-col bg-white">
+      <div className="w-[96%] mx-auto flex flex-row ">
+        {/* right side */}
+        <div className="flex flex-row items-center bg-red-400">
+          {/* right side */}
+          <div className="flex flex-row text-primaryText">
+            <span className="text-sm">خرداد</span>
+          </div>
+          {/* left side */}
+          <div className="flex flex-row">
+            {buttons.map((button, i) => (
+              <Button
+                key={i}
+                text={button.title}
+                className={`${button.className} w-14 text-sm text-primaryText border border-primary p-2`}
+              />
+            ))}
+          </div>
+        </div>
+      </div>
+
+      {/* ? calender list */}
+      <div className="flex flex-wrap space-between gap-5">
+        <Calender />
+        <Calender />
+        <Calender />
+        <Calender />
+        <Calender />
+        <Calender />
+        <Calender />
+        <Calender />
+        <Calender />
+        <Calender />
+        <Calender />
+        <Calender />
+      </div>
     </div>
   );
 };
 
 export default CalenderList;
 
-CalenderList.defaultProps = {};
+CalenderList.defaultProps = {
+  buttons: [
+    {
+      title: "روز",
+      className: "rounded-tr-lg rounded-br-lg",
+    },
+    {
+      title: "هفته",
+      className: "",
+    },
+    {
+      title: "ماه",
+      className: "",
+    },
+    {
+      title: "سال",
+      className: "rounded-tl-lg rounded-bl-lg",
+    },
+  ],
+};