diff --git a/src/pages/Products.tsx b/src/pages/Products.tsx
index 42596f3..c7f0711 100644
--- a/src/pages/Products.tsx
+++ b/src/pages/Products.tsx
@@ -6,12 +6,14 @@ import { products } from '@/data/products';
 import { Button } from '@/components/ui/button';
 import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from '@/components/ui/sheet';
 import { Filter } from 'lucide-react';
+import { useIsMobile } from '@/hooks/use-mobile';
 import Fuse from 'fuse.js';
 
 const Products = () => {
   const [selectedCategory, setSelectedCategory] = useState<string | null>(null);
   const [searchQuery, setSearchQuery] = useState('');
   const [filterOpen, setFilterOpen] = useState(false);
+  const isMobile = useIsMobile();
 
   const fuse = useMemo(() => new Fuse(products, {
     keys: [
@@ -49,40 +51,42 @@ const Products = () => {
   return (
     <div className="min-h-screen bg-background">
       {/* Mobile Header with Search and Filter */}
-      <section className="bg-card border-b py-4 md:py-6">
+      <section className="bg-card border-b py-4 lg:py-6">
         <div className="container mx-auto px-4">
-          <h1 className="font-display text-xl md:text-3xl font-bold text-foreground mb-3 md:mb-4">
+          <h1 className="font-display text-xl lg:text-3xl font-bold text-foreground mb-3 lg:mb-4">
             All Products
           </h1>
           
-          {/* Mobile: Search + Filter Button Row */}
-          <div className="flex gap-2 md:hidden">
-            <div className="flex-1">
-              <SearchBar value={searchQuery} onChange={setSearchQuery} />
+          {/* Mobile/Tablet Portrait: Search + Filter Button Row */}
+          {isMobile && (
+            <div className="flex gap-2">
+              <div className="flex-1">
+                <SearchBar value={searchQuery} onChange={setSearchQuery} />
+              </div>
+              <Sheet open={filterOpen} onOpenChange={setFilterOpen}>
+                <SheetTrigger asChild>
+                  <Button variant="outline" size="icon" className="shrink-0">
+                    <Filter className="h-4 w-4" />
+                  </Button>
+                </SheetTrigger>
+                <SheetContent side="bottom" className="h-[70vh]">
+                  <SheetHeader>
+                    <SheetTitle>Filter by Category</SheetTitle>
+                  </SheetHeader>
+                  <div className="mt-4">
+                    <CategorySidebar
+                      selectedCategory={selectedCategory}
+                      onSelectCategory={handleCategorySelect}
+                    />
+                  </div>
+                </SheetContent>
+              </Sheet>
             </div>
-            <Sheet open={filterOpen} onOpenChange={setFilterOpen}>
-              <SheetTrigger asChild>
-                <Button variant="outline" size="icon" className="shrink-0">
-                  <Filter className="h-4 w-4" />
-                </Button>
-              </SheetTrigger>
-              <SheetContent side="bottom" className="h-[70vh]">
-                <SheetHeader>
-                  <SheetTitle>Filter by Category</SheetTitle>
-                </SheetHeader>
-                <div className="mt-4">
-                  <CategorySidebar
-                    selectedCategory={selectedCategory}
-                    onSelectCategory={handleCategorySelect}
-                  />
-                </div>
-              </SheetContent>
-            </Sheet>
-          </div>
+          )}
 
           {/* Active filter badge on mobile */}
-          {selectedCategory && (
-            <div className="mt-2 md:hidden">
+          {selectedCategory && isMobile && (
+            <div className="mt-2">
               <Button
                 variant="secondary"
                 size="sm"
@@ -97,34 +101,38 @@ const Products = () => {
       </section>
 
       {/* Main Content */}
-      <section className="container mx-auto px-4 py-4 md:py-8">
+      <section className="container mx-auto px-4 py-4 lg:py-8">
         <div className="flex flex-col lg:flex-row gap-6">
           {/* Category Sidebar - Desktop Only */}
-          <div className="hidden lg:block lg:sticky lg:top-4 lg:self-start">
-            <CategorySidebar
-              selectedCategory={selectedCategory}
-              onSelectCategory={setSelectedCategory}
-            />
-          </div>
+          {!isMobile && (
+            <div className="lg:sticky lg:top-4 lg:self-start">
+              <CategorySidebar
+                selectedCategory={selectedCategory}
+                onSelectCategory={setSelectedCategory}
+              />
+            </div>
+          )}
 
           {/* Products Section */}
           <div className="flex-1">
             {/* Desktop Search Bar */}
-            <div className="hidden md:block mb-6">
-              <SearchBar value={searchQuery} onChange={setSearchQuery} />
-            </div>
+            {!isMobile && (
+              <div className="mb-6">
+                <SearchBar value={searchQuery} onChange={setSearchQuery} />
+              </div>
+            )}
 
             {/* Results Info */}
-            <div className="mb-3 md:mb-4">
-              <p className="text-muted-foreground text-xs md:text-sm">
+            <div className="mb-3 lg:mb-4">
+              <p className="text-muted-foreground text-xs lg:text-sm">
                 {displayProducts.length} products found
                 {searchQuery.length >= 2 && ` for "${searchQuery}"`}
               </p>
             </div>
 
-            {/* Products Grid - Full screen on mobile */}
-            <div className="md:max-h-[70vh] md:overflow-y-auto md:pr-2 scrollbar-thin">
-              <div className="grid grid-cols-2 lg:grid-cols-3 gap-3 md:gap-4">
+            {/* Products Grid */}
+            <div className="lg:max-h-[70vh] lg:overflow-y-auto lg:pr-2 scrollbar-thin">
+              <div className="grid grid-cols-2 lg:grid-cols-3 gap-3 lg:gap-4">
                 {displayProducts.map((product) => (
                   <ProductCard key={product.id} product={product} />
                 ))}