diff --git a/app/home/Home.tsx b/app/home/Home.tsx
index 8d4ab5a..af6747f 100644
--- a/app/home/Home.tsx
+++ b/app/home/Home.tsx
@@ -1,4 +1,5 @@
 import BannerSection from "./components/BannerSection";
+import CategorySection from "./components/CategorySection";
 import StepSection from "./components/StepSection";
 
 const Home = () => {
@@ -6,6 +7,7 @@ const Home = () => {
     <div>
       <BannerSection />
       <StepSection />
+      <CategorySection />
     </div>
   );
 };
diff --git a/app/home/components/CategorySection.tsx b/app/home/components/CategorySection.tsx
new file mode 100644
index 0000000..e9870c5
--- /dev/null
+++ b/app/home/components/CategorySection.tsx
@@ -0,0 +1,23 @@
+import { ArrowLeft, ArrowRight } from "iconsax-reactjs";
+
+const CategorySection = () => {
+  return (
+    <div className="mt-[120px] px-[120px]">
+      <div className="flex justify-between items-center">
+        <div className="font-bold text-2xl">دسته بندی های محصولات</div>
+        <div className="flex gap-2">
+          <div className="size-8 bg-primary rounded-full flex justify-center items-center">
+            <ArrowRight size={20} color="white" />
+          </div>
+          <div className="size-8 bg-primary rounded-full flex justify-center items-center">
+            <ArrowLeft size={20} color="white" />
+          </div>
+        </div>
+      </div>
+
+      <div className="mt-12"></div>
+    </div>
+  );
+};
+
+export default CategorySection;