diff --git a/src/components/UserProfile/UserInfoCard.tsx b/src/components/UserProfile/UserInfoCard.tsx
index a133c132..acb583ce 100644
--- a/src/components/UserProfile/UserInfoCard.tsx
+++ b/src/components/UserProfile/UserInfoCard.tsx
@@ -107,7 +107,7 @@ export default function UserInfoCard() {
                   Social Links
                 </h5>
 
-                <div className="grid grid-cols-1 gap-x-6 gap-y-5 lg:grid-cols-2">
+                <div className="grid grid-cols-1 gap-x-6 gap-y-5 md:grid-cols-2">
                   <div>
                     <Label>Facebook</Label>
                     <Input
@@ -140,7 +140,7 @@ export default function UserInfoCard() {
                   Personal Information
                 </h5>
 
-                <div className="grid grid-cols-1 gap-x-6 gap-y-5 lg:grid-cols-2">
+                <div className="grid grid-cols-1 gap-x-6 gap-y-5 md:grid-cols-2">
                   <div className="col-span-2 lg:col-span-1">
                     <Label>First Name</Label>
                     <Input type="text" value="Musharof" />
diff --git a/src/components/ecommerce/RecentOrders.tsx b/src/components/ecommerce/RecentOrders.tsx
index 903d8f5d..6f80629e 100644
--- a/src/components/ecommerce/RecentOrders.tsx
+++ b/src/components/ecommerce/RecentOrders.tsx
@@ -78,7 +78,7 @@ export default function RecentOrders() {
           </h3>
         </div>
 
-        <div className="flex items-center gap-3">
+        <div className="flex flex-col sm:flex-row items-center gap-3">
           <button className="inline-flex items-center gap-2 rounded-lg border border-gray-300 bg-white px-4 py-2.5 text-theme-sm font-medium text-gray-700 shadow-theme-xs hover:bg-gray-50 hover:text-gray-800 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-white/[0.03] dark:hover:text-gray-200">
             <svg
               className="stroke-current fill-white dark:fill-gray-800"
diff --git a/src/index.css b/src/index.css
index f37c56d1..18ed5540 100644
--- a/src/index.css
+++ b/src/index.css
@@ -545,7 +545,7 @@ span.flatpickr-weekday,
   @apply max-w-full overflow-x-auto custom-scrollbar;
 }
 .fc-dayGridMonth-view.fc-view.fc-daygrid {
-  @apply min-w-[718px];
+  @apply min-w-full sm:min-w-[718px];
 }
 .fc .fc-scrollgrid-section > * {
   border-right-width: 0;
diff --git a/src/layout/AppHeader.tsx b/src/layout/AppHeader.tsx
index 6cd4cfb2..3b6c0b59 100644
--- a/src/layout/AppHeader.tsx
+++ b/src/layout/AppHeader.tsx
@@ -12,7 +12,8 @@ const AppHeader: React.FC = () => {
   const { isMobileOpen, toggleSidebar, toggleMobileSidebar } = useSidebar();
 
   const handleToggle = () => {
-    if (window.innerWidth >= 1024) {
+    const lgBreakpoint = 1024;
+    if (window.matchMedia(`(min-width: ${lgBreakpoint}px)`).matches) {
       toggleSidebar();
     } else {
       toggleMobileSidebar();
@@ -98,7 +99,7 @@ const AppHeader: React.FC = () => {
 
           <button
             onClick={toggleApplicationMenu}
-            className="flex items-center justify-center w-10 h-10 text-gray-700 rounded-lg z-99999 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-800 lg:hidden"
+            className="flex items-center justify-center w-11 h-11 text-gray-700 rounded-lg z-99999 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-800 lg:hidden"
           >
             <svg
               width="24"
diff --git a/tests/e2e/test_playwright.py b/tests/e2e/test_playwright.py
index cd76dec8..289e02f3 100644
--- a/tests/e2e/test_playwright.py
+++ b/tests/e2e/test_playwright.py
@@ -95,12 +95,37 @@ async def test_dashboard_with_playwright():
 
             # Test responsive design by changing viewport
             print("📱 Testing responsive design...")
+            
+            # Test tablet viewport (768x1024)
             await page.set_viewport_size({"width": 768, "height": 1024})
             await asyncio.sleep(1)
-
             mobile_screenshot_path = "tests/screenshots/playwright_mobile_screenshot.png"
             await page.screenshot(path=mobile_screenshot_path)
-            print(f"📸 Mobile screenshot saved to: {mobile_screenshot_path}")
+            print(f"📸 Tablet screenshot saved to: {mobile_screenshot_path}")
+
+            # Test small phones (375x667 - iPhone SE/8 size)
+            print("📱 Testing small phone viewport (375x667)...")
+            await page.set_viewport_size({"width": 375, "height": 667})
+            await asyncio.sleep(1)
+            small_phone_screenshot_path = "tests/screenshots/playwright_small_phone_screenshot.png"
+            await page.screenshot(path=small_phone_screenshot_path)
+            print(f"📸 Small phone screenshot saved to: {small_phone_screenshot_path}")
+
+            # Test large phones (414x896 - iPhone XR/11 size)
+            print("📱 Testing large phone viewport (414x896)...")
+            await page.set_viewport_size({"width": 414, "height": 896})
+            await asyncio.sleep(1)
+            large_phone_screenshot_path = "tests/screenshots/playwright_large_phone_screenshot.png"
+            await page.screenshot(path=large_phone_screenshot_path)
+            print(f"📸 Large phone screenshot saved to: {large_phone_screenshot_path}")
+
+            # Test tablets landscape (1024x768)
+            print("📱 Testing tablet landscape viewport (1024x768)...")
+            await page.set_viewport_size({"width": 1024, "height": 768})
+            await asyncio.sleep(1)
+            tablet_landscape_screenshot_path = "tests/screenshots/playwright_tablet_landscape_screenshot.png"
+            await page.screenshot(path=tablet_landscape_screenshot_path)
+            print(f"📸 Tablet landscape screenshot saved to: {tablet_landscape_screenshot_path}")
 
             # Test dark mode toggle if available
             try: