diff --git a/src/Pages/Home/Home.tsx b/src/Pages/Home/Home.tsx
index e0d658f..9319c8b 100644
--- a/src/Pages/Home/Home.tsx
+++ b/src/Pages/Home/Home.tsx
@@ -49,7 +49,7 @@ const Home: FC = () => {
         <div className='p-8 flex gap-8'>
             <Sidebar guides={guides} service={service} />
 
-            <div className='w-[280px]'></div>
+            <div className='w-[280px] hidden lg:block'></div>
 
             <div className='flex-1'>
                 <div className='flex gap-3 items-center mb-8'>
diff --git a/src/Pages/Home/components/Sidebar.tsx b/src/Pages/Home/components/Sidebar.tsx
index 36639d8..187c172 100644
--- a/src/Pages/Home/components/Sidebar.tsx
+++ b/src/Pages/Home/components/Sidebar.tsx
@@ -1,4 +1,5 @@
 import { type FC, useState, useEffect } from 'react'
+import { Menu, CloseSquare } from 'iconsax-reactjs'
 
 interface Service {
     id: string;
@@ -24,6 +25,7 @@ interface SidebarProps {
 
 const Sidebar: FC<SidebarProps> = ({ guides }) => {
     const [activeGuideId, setActiveGuideId] = useState<string>('')
+    const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false)
 
     useEffect(() => {
         const handleScroll = () => {
@@ -80,37 +82,109 @@ const Sidebar: FC<SidebarProps> = ({ guides }) => {
 
             // تنظیم active state
             setActiveGuideId(guideId)
+
+            // بستن منوی موبایل
+            setIsMobileMenuOpen(false)
         }
     }
 
+    const toggleMobileMenu = () => {
+        setIsMobileMenuOpen(!isMobileMenuOpen)
+    }
+
     return (
-        <div className='bg-white top-8 bottom-8 fixed p-8 w-[280px] rounded-4xl right-8 flex flex-col'>
-            <div className='font-bold'>
-                لیست محتوا
+        <>
+            {/* دسکتاپ Sidebar */}
+            <div className='hidden lg:block bg-white top-8 bottom-8 fixed p-8 w-[280px] rounded-4xl right-8 flex flex-col'>
+                <div className='font-bold'>
+                    لیست محتوا
+                </div>
+
+                <div className='mt-10 flex flex-col gap-8 overflow-y-auto flex-1 pr-2'>
+                    {guides.length > 0 ? (
+                        guides.map((guide) => (
+                            <div
+                                key={guide.id}
+                                className={`border-r-[3px] pr-4 cursor-pointer transition-all duration-300 ${activeGuideId === guide.id
+                                    ? 'border-black'
+                                    : 'border-[#A8ABBF]'
+                                    }`}
+                                onClick={() => handleGuideClick(guide.id)}
+                            >
+                                <div className='text-sm font-bold'>
+                                    {guide.title}
+                                </div>
+                                <div className='mt-3 text-[#616474] text-sm'>
+                                    {guide.description}
+                                </div>
+                            </div>
+                        ))
+                    ) : null}
+                </div>
             </div>
 
-            <div className='mt-10 flex flex-col gap-8 overflow-y-auto flex-1 pr-2'>
-                {guides.length > 0 ? (
-                    guides.map((guide) => (
-                        <div
-                            key={guide.id}
-                            className={`border-r-[3px] pr-4 cursor-pointer transition-all duration-300 ${activeGuideId === guide.id
-                                ? 'border-black'
-                                : 'border-[#A8ABBF]'
-                                }`}
-                            onClick={() => handleGuideClick(guide.id)}
-                        >
-                            <div className='text-sm font-bold'>
-                                {guide.title}
-                            </div>
-                            <div className='mt-3 text-[#616474] text-sm'>
-                                {guide.description}
-                            </div>
-                        </div>
-                    ))
-                ) : null}
+            {/* موبایل Floating Button */}
+            <div className='lg:hidden fixed bottom-6 left-6 z-50'>
+                <button
+                    onClick={toggleMobileMenu}
+                    className='bg-black text-white p-4 rounded-full shadow-lg hover:bg-gray-800 transition-colors duration-200'
+                >
+                    <Menu size={24} />
+                </button>
             </div>
-        </div>
+
+            {/* موبایل Drawer */}
+            {isMobileMenuOpen && (
+                <div className='lg:hidden fixed inset-0 z-40'>
+                    {/* Backdrop */}
+                    <div
+                        className='absolute inset-0 bg-black bg-opacity-50'
+                        onClick={toggleMobileMenu}
+                    />
+
+                    {/* Drawer */}
+                    <div className='absolute bottom-0 left-0 right-0 bg-white rounded-t-3xl p-6 max-h-[80vh] overflow-hidden'>
+                        {/* Header */}
+                        <div className='flex items-center justify-between mb-6'>
+                            <h3 className='text-lg font-bold'>لیست محتوا</h3>
+                            <button
+                                onClick={toggleMobileMenu}
+                                className='p-2 hover:bg-gray-100 rounded-full transition-colors duration-200'
+                            >
+                                <CloseSquare size={20} />
+                            </button>
+                        </div>
+
+                        {/* Content */}
+                        <div className='overflow-y-auto max-h-[60vh] pr-2'>
+                            {guides.length > 0 ? (
+                                guides.map((guide) => (
+                                    <div
+                                        key={guide.id}
+                                        className={`border-r-[3px] pr-4 py-4 cursor-pointer transition-all duration-300 ${activeGuideId === guide.id
+                                            ? 'border-black'
+                                            : 'border-[#A8ABBF]'
+                                            }`}
+                                        onClick={() => handleGuideClick(guide.id)}
+                                    >
+                                        <div className='text-sm font-bold'>
+                                            {guide.title}
+                                        </div>
+                                        <div className='mt-2 text-[#616474] text-sm'>
+                                            {guide.description}
+                                        </div>
+                                    </div>
+                                ))
+                            ) : (
+                                <div className='text-center text-gray-500 py-8'>
+                                    محتوایی برای نمایش وجود ندارد
+                                </div>
+                            )}
+                        </div>
+                    </div>
+                </div>
+            )}
+        </>
     )
 }
 
diff --git a/src/index.css b/src/index.css
index 9caad10..5175bbe 100644
--- a/src/index.css
+++ b/src/index.css
@@ -2,7 +2,6 @@
 
 html {
   direction: rtl;
-  overflow: hidden;
   max-width: 100%;
 }
 
@@ -12,10 +11,8 @@ body {
   padding: 0;
   width: 100%;
   direction: rtl;
-  overflow: hidden !important;
   background: #eceef6;
   font-weight: 300;
-  overflow: hidden;
   font-feature-settings: "lnum"; /* اطمینان از نمایش اعداد انگلیسی */
   user-select: none;
   -webkit-user-select: none;