diff --git a/src/components/ButtonDesign/ButtonNextToEachOther/index.js b/src/components/ButtonDesign/ButtonNextToEachOther/index.js
new file mode 100644
index 0000000..f574d07
--- /dev/null
+++ b/src/components/ButtonDesign/ButtonNextToEachOther/index.js
@@ -0,0 +1,35 @@
+import React from "react";
+import Button from "../Button";
+
+const ButtonNextToEachOther = () => {
+  return (
+    <div className="flex flex-row">
+      <div className="flex flex-row">
+        <Button
+          text={"روز"}
+          className="w-16 text-primaryText text-lg  border border-primary px-4 py-2 rounded-tr-lg rounded-br-lg"
+        />
+        <Button
+          text={"هفته"}
+          className="w-16 text-primaryText text-lg  border border-primary px-4 py-2"
+        />
+        <Button
+          text={"ماه"}
+          className="w-16 text-primaryText text-lg  border border-primary px-4 py-2"
+        />
+        <Button
+          text={"سال"}
+          className="w-16 text-primaryText text-lg  border border-primary px-4 py-2 rounded-tl-lg rounded-bl-lg"
+        />
+      </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;
diff --git a/src/components/ButtonDesign/index.js b/src/components/ButtonDesign/index.js
index 101a27a..5f07818 100644
--- a/src/components/ButtonDesign/index.js
+++ b/src/components/ButtonDesign/index.js
@@ -2,11 +2,13 @@ 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);