diff --git a/package-lock.json b/package-lock.json
index 7a01200..da0fde6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -18,6 +18,7 @@
         "next": "15.4.5",
         "react": "19.1.0",
         "react-dom": "19.1.0",
+        "swiper": "^11.2.10",
         "tailwind-merge": "^3.3.1",
         "zustand": "^5.0.7"
       },
@@ -5945,6 +5946,25 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/swiper": {
+      "version": "11.2.10",
+      "resolved": "https://registry.npmjs.org/swiper/-/swiper-11.2.10.tgz",
+      "integrity": "sha512-RMeVUUjTQH+6N3ckimK93oxz6Sn5la4aDlgPzB+rBrG/smPdCTicXyhxa+woIpopz+jewEloiEE3lKo1h9w2YQ==",
+      "funding": [
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/swiperjs"
+        },
+        {
+          "type": "open_collective",
+          "url": "http://opencollective.com/swiper"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">= 4.7.0"
+      }
+    },
     "node_modules/tailwind-merge": {
       "version": "3.3.1",
       "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-3.3.1.tgz",
diff --git a/package.json b/package.json
index eac2800..085f4e3 100644
--- a/package.json
+++ b/package.json
@@ -19,6 +19,7 @@
     "next": "15.4.5",
     "react": "19.1.0",
     "react-dom": "19.1.0",
+    "swiper": "^11.2.10",
     "tailwind-merge": "^3.3.1",
     "zustand": "^5.0.7"
   },
diff --git a/src/app/home/components/Carousel.tsx b/src/app/home/components/Carousel.tsx
new file mode 100644
index 0000000..3f30e4a
--- /dev/null
+++ b/src/app/home/components/Carousel.tsx
@@ -0,0 +1,25 @@
+'use client'
+import { FC } from 'react'
+import { Swiper, SwiperSlide } from 'swiper/react';
+import { Pagination } from 'swiper/modules';
+
+const Carousel: FC = () => {
+    return (
+        <div className='mt-5'>
+            <Swiper pagination={true} modules={[Pagination]} className="mySwiper pb-5">
+                <SwiperSlide>
+                    <div className='h-[400px] bg-red-50'>
+                        1
+                    </div>
+                </SwiperSlide>
+                <SwiperSlide>
+                    <div className='h-[400px] bg-red-50'>
+                        1
+                    </div>
+                </SwiperSlide>
+            </Swiper>
+        </div>
+    )
+}
+
+export default Carousel
\ No newline at end of file
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 4e4cc28..44d54b3 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,6 +1,7 @@
 import type { Metadata } from "next";
 import "./globals.css";
 import "../../public/css/fontiran.css";
+import 'swiper/css';
 import QueryProvider from "@/config/QueryProvider";
 
 export const metadata: Metadata = {
diff --git a/src/app/page.tsx b/src/app/page.tsx
index cd590a2..07976a2 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,9 +1,12 @@
 import { NextPage } from 'next'
 import withLayout from '@/hoc/withLayout'
+import Carousel from './home/components/Carousel'
 
 const Home: NextPage = () => {
   return (
-    <div></div>
+    <div>
+      <Carousel />
+    </div>
   )
 }
 
diff --git a/src/share/Header.tsx b/src/share/Header.tsx
index 2cdca32..a0c4bb7 100644
--- a/src/share/Header.tsx
+++ b/src/share/Header.tsx
@@ -1,45 +1,48 @@
 import Input from '@/components/Input'
 import { Separator } from '@/components/ui/separator'
 import { DocumentText, Home, Profile, ShoppingCart } from 'iconsax-react'
-import { FC } from 'react'
+import { FC, Fragment } from 'react'
 import Menu from './components/Menu'
 
 const Header: FC = () => {
     return (
-        <div className='fixed top-0 bg-white w-full'>
-            <div className='flex items-center justify-between px-6 py-[18px]'>
-                <div className='flex gap-[30px] items-center'>
-                    <div>LOGO</div>
-                    <Input className='w-[500px]' variant='search' placeholder='جستجو' />
-                </div>
-
-                <div className='flex items-center gap-6'>
-                    <div className='h-10 border border-border py-3 px-4 rounded-[12px] flex items-center gap-2.5'>
-                        <Profile size={20} color='#333333' />
-                        <div className='text-sm text-[#333333]'>حساب کاربری</div>
+        <Fragment>
+            <div className='fixed top-0 bg-white w-full'>
+                <div className='flex items-center justify-between px-6 py-[18px]'>
+                    <div className='flex gap-[30px] items-center'>
+                        <div>LOGO</div>
+                        <Input className='w-[500px]' variant='search' placeholder='جستجو' />
                     </div>
 
-                    <Separator style={{ height: 25 }} orientation='vertical' />
+                    <div className='flex items-center gap-6'>
+                        <div className='h-10 border border-border py-3 px-4 rounded-[12px] flex items-center gap-2.5'>
+                            <Profile size={20} color='#333333' />
+                            <div className='text-sm text-[#333333]'>حساب کاربری</div>
+                        </div>
 
-                    <div className='h-10 p-3 rounded-[12px] border border-border flex items-center gap-2.5'>
-                        <ShoppingCart size={20} color='#333333' />
+                        <Separator style={{ height: 25 }} orientation='vertical' />
+
+                        <div className='h-10 p-3 rounded-[12px] border border-border flex items-center gap-2.5'>
+                            <ShoppingCart size={20} color='#333333' />
+                        </div>
+                    </div>
+                </div>
+                <div className='mt-7 text-sm px-6 flex items-center gap-7'>
+                    <Menu />
+                    <Separator style={{ height: 20 }} orientation='vertical' />
+
+                    <div className='flex items-center gap-2.5'>
+                        <Home size={20} color='#333333' />
+                        <div className='text-[#333333]'>صفحه نخست</div>
+                    </div>
+                    <div className='flex items-center gap-2.5'>
+                        <DocumentText size={20} color='#333333' />
+                        <div className='text-[#333333]'>مجله</div>
                     </div>
                 </div>
             </div>
-            <div className='mt-7 text-sm px-6 flex items-center gap-7'>
-                <Menu />
-                <Separator style={{ height: 20 }} orientation='vertical' />
-
-                <div className='flex items-center gap-2.5'>
-                    <Home size={20} color='#333333' />
-                    <div className='text-[#333333]'>صفحه نخست</div>
-                </div>
-                <div className='flex items-center gap-2.5'>
-                    <DocumentText size={20} color='#333333' />
-                    <div className='text-[#333333]'>مجله</div>
-                </div>
-            </div>
-        </div>
+            <div className='h-[140px]'></div>
+        </Fragment>
     )
 }