diff --git a/admin-spa/src/App.tsx b/admin-spa/src/App.tsx
index ba02008..7c0f42f 100644
--- a/admin-spa/src/App.tsx
+++ b/admin-spa/src/App.tsx
@@ -264,6 +264,8 @@ function AddonRoute({ config }: { config: any }) {
 
 function Header({ onFullscreen, fullscreen, showToggle = true }: { onFullscreen: () => void; fullscreen: boolean; showToggle?: boolean }) {
   const [siteTitle, setSiteTitle] = React.useState((window as any).wnw?.siteTitle || 'WooNooW');
+  const [isVisible, setIsVisible] = React.useState(true);
+  const [lastScrollY, setLastScrollY] = React.useState(0);
   const isStandalone = window.WNW_CONFIG?.standaloneMode ?? false;
   
   // Listen for store settings updates
@@ -278,6 +280,35 @@ function Header({ onFullscreen, fullscreen, showToggle = true }: { onFullscreen:
     return () => window.removeEventListener('woonoow:store:updated' as any, handleStoreUpdate);
   }, []);
   
+  // Hide/show header on scroll (mobile only)
+  React.useEffect(() => {
+    const handleScroll = () => {
+      const currentScrollY = window.scrollY;
+      
+      // Only apply on mobile (check window width)
+      if (window.innerWidth >= 768) {
+        setIsVisible(true);
+        return;
+      }
+      
+      if (currentScrollY > lastScrollY && currentScrollY > 50) {
+        // Scrolling down & past threshold
+        setIsVisible(false);
+      } else if (currentScrollY < lastScrollY) {
+        // Scrolling up
+        setIsVisible(true);
+      }
+      
+      setLastScrollY(currentScrollY);
+    };
+
+    window.addEventListener('scroll', handleScroll, { passive: true });
+    
+    return () => {
+      window.removeEventListener('scroll', handleScroll);
+    };
+  }, [lastScrollY]);
+  
   const handleLogout = async () => {
     try {
       await fetch((window.WNW_CONFIG?.restUrl || '') + '/auth/logout', {
@@ -291,7 +322,7 @@ function Header({ onFullscreen, fullscreen, showToggle = true }: { onFullscreen:
   };
   
   return (
-    <header className={`h-16 border-b border-border flex items-center px-4 justify-between sticky ${fullscreen ? `top-0` : `top-[32px]`} z-40 bg-background md:bg-background/95 md:backdrop-blur md:supports-[backdrop-filter]:bg-background/60`}>
+    <header className={`h-16 border-b border-border flex items-center px-4 justify-between sticky ${fullscreen ? `top-0` : `top-[32px]`} z-40 bg-background md:bg-background/95 md:backdrop-blur md:supports-[backdrop-filter]:bg-background/60 transition-transform duration-300 ${!isVisible ? '-translate-y-full md:translate-y-0' : 'translate-y-0'}`}>
       <div className="font-semibold">{siteTitle}</div>
       <div className="flex items-center gap-3">
         <div className="text-sm opacity-70 hidden sm:block">{window.WNW_API?.isDev ? 'Dev Server' : 'Production'}</div>
diff --git a/admin-spa/src/components/nav/BottomNav.tsx b/admin-spa/src/components/nav/BottomNav.tsx
index ebf31bd..d6978b8 100644
--- a/admin-spa/src/components/nav/BottomNav.tsx
+++ b/admin-spa/src/components/nav/BottomNav.tsx
@@ -63,7 +63,7 @@ export function BottomNav() {
             <NavLink
               key={item.to}
               to={item.to}
-              className={`flex flex-col items-center justify-center flex-1 h-full gap-0.5 transition-colors ${
+              className={`flex flex-col items-center justify-center flex-1 h-full gap-0.5 transition-colors focus:outline-none focus-visible:outline-none ${
                 active
                   ? 'text-primary'
                   : 'text-muted-foreground hover:text-foreground'
diff --git a/admin-spa/src/hooks/useFABConfig.tsx b/admin-spa/src/hooks/useFABConfig.tsx
new file mode 100644
index 0000000..1686659
--- /dev/null
+++ b/admin-spa/src/hooks/useFABConfig.tsx
@@ -0,0 +1,73 @@
+import { useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { Plus } from 'lucide-react';
+import { useFAB } from '@/contexts/FABContext';
+
+/**
+ * Hook to configure FAB for different pages
+ * Usage: useFABConfig('orders') in Orders page component
+ */
+export function useFABConfig(page: 'orders' | 'products' | 'customers' | 'coupons' | 'dashboard' | 'none') {
+  const { setFAB, clearFAB } = useFAB();
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    switch (page) {
+      case 'orders':
+        setFAB({
+          icon: <Plus className="w-6 h-6" />,
+          label: 'Create Order',
+          onClick: () => navigate('/orders/new'),
+          visible: true
+        });
+        break;
+
+      case 'products':
+        setFAB({
+          icon: <Plus className="w-6 h-6" />,
+          label: 'Add Product',
+          onClick: () => navigate('/products/new'),
+          visible: true
+        });
+        break;
+
+      case 'customers':
+        setFAB({
+          icon: <Plus className="w-6 h-6" />,
+          label: 'Add Customer',
+          onClick: () => navigate('/customers/new'),
+          visible: true
+        });
+        break;
+
+      case 'coupons':
+        setFAB({
+          icon: <Plus className="w-6 h-6" />,
+          label: 'Create Coupon',
+          onClick: () => navigate('/coupons/new'),
+          visible: true
+        });
+        break;
+
+      case 'dashboard':
+        // Dashboard could have a speed dial menu in the future
+        setFAB({
+          icon: <Plus className="w-6 h-6" />,
+          label: 'Quick Actions',
+          onClick: () => {
+            // TODO: Implement speed dial menu
+            console.log('Quick actions menu');
+          },
+          visible: true
+        });
+        break;
+
+      case 'none':
+      default:
+        clearFAB();
+        break;
+    }
+
+    return () => clearFAB();
+  }, [page, navigate, setFAB, clearFAB]);
+}