diff --git a/src/components/Content.js b/src/components/Content.js
index 4888d5b..8c03e21 100644
--- a/src/components/Content.js
+++ b/src/components/Content.js
@@ -441,7 +441,7 @@ class Content extends Component {
     
 
     return (
-      <Container maxWidth="xl" sx={{ py: 2, flexGrow: 1, display: 'grid', gridTemplateRows: '1fr' }}>
+      <Container maxWidth="xl" sx={{ py: { xs: 0, sm: 2 }, px: { xs: 0, sm: 3 }, flexGrow: 1, display: 'grid', gridTemplateRows: '1fr' }}>
 
         {showCategoryBoxes ? (
           // Show category boxes layout when no products but have child categories
@@ -491,30 +491,20 @@ class Content extends Component {
                         </Box>
                         
                         {/* Subcategories Grid */}
-                        <Box sx={{ flex: 1, minWidth: 0 }}>
-                          <CategoryBoxGrid 
-                            categories={this.state.childCategories}
-                            showTitle={false}
-                            spacing={3}
-                          />
+                        <Box sx={{ flexGrow: 1 }}>
+                          <CategoryBoxGrid categories={this.state.childCategories} />
                         </Box>
                       </Box>
                     );
                   } else {
-                    // Just show subcategories without parent
-                    return (
-                      <CategoryBoxGrid 
-                        categories={this.state.childCategories}
-                        showTitle={false}
-                        spacing={3}
-                      />
-                    );
+                    // No parent category, just show subcategories
+                    return <CategoryBoxGrid categories={this.state.childCategories} />;
                   }
                 })()}
               </Box>
             )}
 
-            {/* Show parent category navigation when in 2nd or 3rd level but no subcategories */}
+            {/* Show standalone parent category navigation when there are only products */}
             {this.state.loaded && 
              this.props.params.categoryId && 
              !(this.state.unfilteredProducts.length > 0 && this.state.childCategories.length > 0) && (() => {
@@ -558,7 +548,7 @@ class Content extends Component {
             <Box sx={{ 
               display: 'grid', 
               gridTemplateColumns: { xs: '1fr', sm: '1fr 2fr', md: '1fr 3fr', lg: '1fr 4fr', xl: '1fr 4fr' }, 
-              gap: 3
+              gap: { xs: 0, sm: 3 }
             }}>
 
             <Stack direction="row" spacing={0} sx={{ 
diff --git a/src/components/Header.js b/src/components/Header.js
index 0d5392e..5ad6fa0 100644
--- a/src/components/Header.js
+++ b/src/components/Header.js
@@ -42,8 +42,12 @@ class Header extends Component {
 
     return (
       <AppBar position="sticky" color="primary" elevation={0} sx={{ zIndex: 1100 }}>
-        <Toolbar sx={{ minHeight: 64 }}>
-          <Container maxWidth="lg" sx={{ display: 'flex', alignItems: 'center' }}>
+        <Toolbar sx={{ minHeight: 64, py: { xs: 0.5, sm: 0 } }}>
+          <Container maxWidth="lg" sx={{ 
+            display: 'flex', 
+            alignItems: 'center',
+            px: { xs: 0, sm: 3 }
+          }}>
             {/* First row: Logo and ButtonGroup on xs, all items on larger screens */}
             <Box sx={{ 
               display: 'flex', 
@@ -56,23 +60,36 @@ class Header extends Component {
                 display: 'flex', 
                 alignItems: 'center', 
                 width: '100%',
-                justifyContent: { xs: 'space-between', sm: 'flex-start' }
+                justifyContent: { xs: 'space-between', sm: 'flex-start' },
+                minHeight: { xs: 52, sm: 'auto' },
+                px: { xs: 0, sm: 0 }
               }}>
                 <Logo />
                 {/* SearchBar visible on sm and up */}
                 <Box sx={{ display: { xs: 'none', sm: 'block' }, flexGrow: 1 }}>
                   <SearchBar />
                 </Box>
-                <ButtonGroupWithRouter socket={socket}/>
+                <Box sx={{ 
+                  display: 'flex',
+                  alignItems: { xs: 'flex-end', sm: 'center' },
+                  transform: { xs: 'translateY(4px) translateX(9px)', sm: 'none' },
+                  ml: { xs: 0, sm: 0 }
+                }}>
+                  <ButtonGroupWithRouter socket={socket}/>
+                </Box>
               </Box>
               
-              {/* Second row: SearchBar only on xs */}
+              {/* Second row: SearchBar only on xs - make it wider */}
               <Box sx={{ 
                 display: { xs: 'block', sm: 'none' }, 
                 width: '100%',
-                mt: 1,mb: 1
+                mt: { xs: 1, sm: 0 },
+                mb: { xs: 0.5, sm: 0 },
+                px: { xs: 0, sm: 0 }
               }}>
-                <SearchBar />
+                <Box sx={{ width: '100%' }}>
+                  <SearchBar />
+                </Box>
               </Box>
             </Box>
           </Container>
diff --git a/src/components/Product.js b/src/components/Product.js
index c72386e..5fee10e 100644
--- a/src/components/Product.js
+++ b/src/components/Product.js
@@ -180,18 +180,21 @@ class Product extends Component {
         
         <Card 
           sx={{ 
-            width: { xs: 'calc(100vw - 48px)', sm: '250px' },
-            minWidth: { xs: 'calc(100vw - 48px)', sm: '250px' },
+            width: { xs: '100vw', sm: '250px' },
+            minWidth: { xs: '100vw', sm: '250px' },
             height: '100%',
             display: 'flex',
             flexDirection: 'column',
             transition: 'transform 0.3s ease, box-shadow 0.3s ease',
             position: 'relative',
             overflow: 'hidden',
-            borderRadius: '8px',
+            borderRadius: { xs: 0, sm: '8px' },
+            border: { xs: 'none', sm: 'inherit' },
+            boxShadow: { xs: 'none', sm: 'inherit' },
+            mx: { xs: 0, sm: 'auto' },
             '&:hover': {
-              transform: 'translateY(-5px)',
-              boxShadow: '0px 10px 20px rgba(0,0,0,0.1)'
+              transform: { xs: 'none', sm: 'translateY(-5px)' },
+              boxShadow: { xs: 'none', sm: '0px 10px 20px rgba(0,0,0,0.1)' }
             }
           }}
         >
diff --git a/src/components/ProductFilters.js b/src/components/ProductFilters.js
index 4c26e61..9be4dd2 100644
--- a/src/components/ProductFilters.js
+++ b/src/components/ProductFilters.js
@@ -162,13 +162,17 @@ class ProductFilters extends Component {
     return (
       <Paper 
         id="filters-paper"
-        elevation={1} 
+        elevation={window.innerWidth < 600 ? 0 : 1} 
         sx={{ 
-          p: 2, 
-          borderRadius: 2, 
+          p: { xs: 1, sm: 2 }, 
+          borderRadius: { xs: 0, sm: 2 }, 
           bgcolor: 'background.paper',
           display: 'flex',
-          flexDirection: 'column'
+          flexDirection: 'column',
+          border: { xs: 'none', sm: 'inherit' },
+          boxShadow: { xs: 'none', sm: 'inherit' },
+          mx: { xs: 0, sm: 'auto' },
+          width: { xs: '100%', sm: 'auto' }
         }}
       >
 
diff --git a/src/components/ProductList.js b/src/components/ProductList.js
index d4d6f39..cccd469 100644
--- a/src/components/ProductList.js
+++ b/src/components/ProductList.js
@@ -123,8 +123,14 @@ class ProductList extends Component {
 
   renderPagination = (pages, page) => {
     return (
-      <Box sx={{ height: 64, display: 'flex', alignItems: 'center', justifyContent: 'left' }}>
-        {((this.state.itemsPerPage==='all')||(this.props.products.length<this.state.itemsPerPage))?null:
+      <Box sx={{ 
+        height: 64, 
+        display: 'flex', 
+        alignItems: 'center', 
+        justifyContent: 'left',
+        width: '100%'
+      }}>
+        {(this.state.itemsPerPage==='all')?null:
           <Pagination 
             count={pages} 
             page={page} 
@@ -164,15 +170,28 @@ class ProductList extends Component {
     const products = this.state.itemsPerPage==='all'?[...filteredProducts]:filteredProducts.slice((this.state.page - 1) * this.state.itemsPerPage , this.state.page * this.state.itemsPerPage);
 
     return (
-      <Box sx={{ height: '100%' }}>
+      <Box sx={{ height: '100%', px: { xs: 0, sm: 0 } }}>
         <Box sx={{ 
           display: 'flex', 
           justifyContent: 'space-between', 
-          alignItems: 'center'
+          alignItems: 'center',
+          flexDirection: { xs: 'column', sm: 'row' },
+          gap: { xs: 1, sm: 0 },
+          px: { xs: 0, sm: 0 },
+          py: { xs: 1, sm: 0 },
+          bgcolor: { xs: '#e8f5e8', sm: 'transparent' },
+          mb: { xs: 0, sm: 0 }
         }}>
 
 
-            <Box sx={{ display: 'flex', gap: 1, alignItems: 'center', flexWrap: 'wrap' }}>
+            <Box sx={{ 
+              display: 'flex', 
+              gap: { xs: 0.5, sm: 1 }, 
+              alignItems: 'center', 
+              flexWrap: 'wrap',
+              order: { xs: 2, sm: 1 },
+              px: { xs: 1, sm: 0 }
+            }}>
               {this.props.activeAttributeFilters.map((filter,index) => (
                 <Chip 
                   size="medium"                
@@ -207,9 +226,23 @@ class ProductList extends Component {
               ))}
             </Box>
 
-            <Box sx={{ display: 'flex', gap: 2, alignItems: 'center' }}>
+            <Box sx={{ 
+              display: 'flex', 
+              gap: { xs: 1, sm: 2 }, 
+              alignItems: 'center',
+              order: { xs: 1, sm: 2 },
+              width: { xs: '100%', sm: 'auto' },
+              justifyContent: { xs: 'space-between', sm: 'flex-end' },
+              px: { xs: 1, sm: 0 }
+            }}>
               {/* Sort Dropdown */}
-              <FormControl variant="outlined" size="small" sx={{ minWidth: 140 }}>
+              <FormControl 
+                variant={window.innerWidth < 600 ? 'standard' : 'outlined'} 
+                size="small" 
+                sx={{ 
+                  minWidth: { xs: 120, sm: 140 }
+                }}
+              >
                 <InputLabel id="sort-by-label">Sortierung</InputLabel>
                 <Select
                   size="small"
@@ -244,7 +277,13 @@ class ProductList extends Component {
               </FormControl>
               
               {/* Per Page Dropdown */}
-              <FormControl variant="outlined" size="small" sx={{ minWidth: 100 }}>
+              <FormControl 
+                variant={window.innerWidth < 600 ? 'standard' : 'outlined'} 
+                size="small" 
+                sx={{ 
+                  minWidth: { xs: 80, sm: 100 }
+                }}
+              >
                 <InputLabel id="products-per-page-label">pro Seite</InputLabel>
                 <Select
                   labelId="products-per-page-label"
@@ -278,16 +317,37 @@ class ProductList extends Component {
                   <MenuItem value="all">Alle</MenuItem>
                 </Select>
               </FormControl>
+              
+              {/* Product count info - mobile only */}
+              <Box sx={{ 
+                display: { xs: 'block', sm: 'none' },
+                ml: 1
+              }}>
+                <Typography variant="body2" color="text.secondary" sx={{ fontSize: '0.75rem' }}>
+                  {
+                    this.props.totalProductCount==this.props.products.length && this.props.totalProductCount>0 ?
+                    `${this.props.totalProductCount} Produkte`
+                    :
+                    `${this.props.products.length} von ${this.props.totalProductCount} Produkte`
+                  }
+                </Typography>
+              </Box>
             </Box>
         </Box>
  
         <Box sx={{ 
           display: 'flex', 
           justifyContent: 'space-between', 
-          alignItems: 'center'
+          alignItems: 'center',
+          px: { xs: 0, sm: 0 },
+          py: { xs: 1, sm: 0 },
+          bgcolor: { xs: '#e8f5e8', sm: 'transparent' },
+          mt: { xs: 0, sm: 0 }
         }}>
-        { this.renderPagination(Math.ceil(filteredProducts.length / this.state.itemsPerPage), this.state.page) }
-        <Stack direction="row" spacing={2}>
+        <Box sx={{ px: { xs: 1, sm: 0 }, width: '100%' }}>
+          { this.renderPagination(Math.ceil(filteredProducts.length / this.state.itemsPerPage), this.state.page) }
+        </Box>
+        <Stack direction="row" spacing={2} sx={{ display: { xs: 'none', sm: 'flex' }, px: { xs: 1, sm: 0 } }}>
           <Typography variant="body2" color="text.secondary">
                 {/*this.props.dataType == 'category' && (<>Kategorie: {this.props.dataParam}</>)}*/}
                 {this.props.dataType == 'search' && (<>Suchergebnisse für: "{this.props.dataParam}"</>)}
@@ -303,14 +363,19 @@ class ProductList extends Component {
         </Stack>
         </Box>
 
-        <Grid container spacing={2}>
-          {products.map((product) => (
+        <Grid container spacing={{ xs: 0, sm: 2 }}>
+          {products.map((product, index) => (
             <Grid 
-              key={product.id} 
+              key={product.id}
               sx={{
                 display: 'flex', 
                 justifyContent: { xs: 'stretch', sm: 'center' },
-                mb: 1
+                mb: { xs: 0, sm: 1 },
+                width: { xs: '100%', sm: 'auto' },
+                borderBottom: { 
+                  xs: index < products.length - 1 ? '16px solid #e8f5e8' : 'none', 
+                  sm: 'none' 
+                }
               }}
             > 
               <Product 
@@ -338,8 +403,18 @@ class ProductList extends Component {
             </Grid>
           ))}
         </Grid>
-
-        {this.renderPagination(Math.ceil(filteredProducts.length / this.state.itemsPerPage), this.state.page)}
+        
+        {/* Bottom pagination */}
+        <Box sx={{ 
+          px: { xs: 0, sm: 0 },
+          py: { xs: 1, sm: 1 },
+          bgcolor: { xs: '#e8f5e8', sm: 'transparent' },
+          mt: { xs: 0, sm: 2 }
+        }}>
+          <Box sx={{ px: { xs: 1, sm: 0 } }}>
+            {this.renderPagination(Math.ceil(filteredProducts.length / this.state.itemsPerPage), this.state.page)}
+          </Box>
+        </Box>
       </Box>
     );
   }
diff --git a/src/components/header/SearchBar.js b/src/components/header/SearchBar.js
index 92c131e..d52891e 100644
--- a/src/components/header/SearchBar.js
+++ b/src/components/header/SearchBar.js
@@ -219,7 +219,7 @@ const SearchBar = () => {
       onSubmit={handleSearch}
       sx={{
         flexGrow: 1,
-        mx: { xs: 1, sm: 2, md: 4 },
+        mx: { xs: 0, sm: 2, md: 4 },
         position: "relative",
       }}
     >