Index: components/ComponentDialog.tsx
===================================================================
--- components/ComponentDialog.tsx	(revision 87b79bc538e0365a7b1fa7e9903355b32304937e)
+++ components/ComponentDialog.tsx	(revision b348db42dc1705fafab4b01a17d5a88de7941467)
@@ -1,16 +1,17 @@
 import React, {useEffect, useState} from 'react';
 import {
-    Dialog, DialogContent, IconButton, Box, Typography, Chip,
+    Dialog, DialogContent, IconButton, Box, Typography,
     Slider, FormControl, InputLabel, Select, MenuItem, Checkbox, ListItemText,
     Card, CardContent, CardMedia, Button, CircularProgress, AppBar, Toolbar, InputAdornment, TextField,
-    TextField as MuiTextField, DialogTitle, DialogActions, Snackbar, Alert
+    TextField as MuiTextField, DialogTitle, DialogActions, Snackbar, Alert, Drawer, Badge
 } from '@mui/material';
 import CloseIcon from '@mui/icons-material/Close';
 import AddCircleIcon from '@mui/icons-material/AddCircle';
+import FilterListIcon from '@mui/icons-material/FilterList';
+import SearchIcon from "@mui/icons-material/Search";
 
 import {onGetAllComponents, onGetAuthState, onSuggestComponent} from '../pages/+Layout.telefunc'
 import {onGetCompatibleComponents} from '../pages/forge/forge.telefunc';
 import ComponentDetailsDialog from "./ComponentDetailsDialog";
-import SearchIcon from "@mui/icons-material/Search";
 
 const formatMoney = (amount: number) => `$${Number(amount).toFixed(2)}`;
@@ -38,4 +39,5 @@
     const [snackbarMessage, setSnackbarMessage] = useState("");
     const [userId, setUserId] = useState<number | null>(null);
+    const [mobileFiltersOpen, setMobileFiltersOpen] = useState(false);
 
     useEffect(() => {
@@ -108,6 +110,4 @@
     }
 
-
-
     const submitSuggestion = async () => {
         if (!userId) {
@@ -165,21 +165,154 @@
     };
 
+    const activeFiltersCount = selectedBrands.length + (sortOrder !== 'default' ? 1 : 0);
+
+    const FilterContent = React.useMemo(() => (
+        <Box sx={{width: {xs: 280, md: 300}, p: 3, bgcolor: 'transparent'}}>
+            <TextField
+                fullWidth
+                size="small"
+                placeholder="Search components..."
+                value={tempSearchQuery}
+                onChange={(e) => setTempSearchQuery(e.target.value)}
+                sx={{mb: 2}}
+                InputProps={{
+                    startAdornment: <InputAdornment position="start"><SearchIcon/></InputAdornment>,
+                }}
+            />
+
+            <FormControl fullWidth size="small" sx={{mb: 2}}>
+                <InputLabel>Sort By</InputLabel>
+                <Select
+                    value={sortOrder}
+                    label="Sort By"
+                    onChange={(e) => setSortOrder(e.target.value)}
+                    MenuProps={{
+                        container: typeof window !== 'undefined' ? document.body : undefined,
+                        disablePortal: false,
+                        sx: {
+                            zIndex: 1500
+                        }
+                    }}
+                >
+                    <MenuItem value="price_asc">Price: Low to High</MenuItem>
+                    <MenuItem value="price_desc">Price: High to Low</MenuItem>
+                </Select>
+            </FormControl>
+
+            <FormControl fullWidth size="small" sx={{mb: 2}}>
+                <InputLabel>Brands</InputLabel>
+                <Select
+                    multiple
+                    value={selectedBrands}
+                    onChange={handleBrandChange}
+                    label="Brands"
+                    renderValue={(s) => s.join(', ')}
+                    MenuProps={{
+                        container: typeof window !== 'undefined' ? document.body : undefined,
+                        disablePortal: false,
+                        sx: {
+                            zIndex: 1500
+                        },
+                        PaperProps: {
+                            sx: {
+                                maxHeight: 300
+                            }
+                        }
+                    }}
+                >
+                    {availableBrands.map((brand) => (
+                        <MenuItem key={brand} value={brand}>
+                            <Checkbox checked={selectedBrands.indexOf(brand) > -1}/>
+                            <ListItemText primary={brand}/>
+                        </MenuItem>
+                    ))}
+                </Select>
+            </FormControl>
+
+            <Typography gutterBottom fontWeight="bold">Price Range</Typography>
+            <Slider value={priceRange} onChange={(_, v) => setPriceRange(v as number[])} min={0} max={2000}
+                    sx={{color: '#ff8201'}}/>
+            <Box sx={{display: 'flex', justifyContent: 'space-between', mt: 1}}>
+                <Typography variant="caption">${priceRange[0]}</Typography>
+                <Typography variant="caption">${priceRange[1]}+</Typography>
+            </Box>
+
+            <Button
+                fullWidth
+                variant="contained"
+                startIcon={<AddCircleIcon/>}
+                onClick={() => setSuggestOpen(true)}
+                sx={{
+                    mt: 2,
+                    bgcolor: '#ff8201',
+                    fontWeight: 'bold',
+                    fontSize: '0.875rem',
+                    '&:hover': {bgcolor: '#e67300'}
+                }}
+            >
+                Suggest Component
+            </Button>
+        </Box>
+    ), [tempSearchQuery, sortOrder, selectedBrands, availableBrands, priceRange]);
+
     if (!open) return null;
 
     return (
         <>
-            <Dialog open={open} onClose={onClose} maxWidth="xl" fullWidth sx={{height: '90vh'}}>
+            <Dialog
+                open={open}
+                onClose={onClose}
+                maxWidth="xl"
+                fullWidth
+                fullScreen
+                sx={{
+                    '& .MuiDialog-paper': {
+                        height: {xs: '100%', md: '90vh'},
+                        m: {xs: 0, md: 2}
+                    }
+                }}
+            >
                 <AppBar position="relative" sx={{bgcolor: '#ff8201'}}>
                     <Toolbar>
-                        <Typography sx={{ml: 2, flex: 1, textTransform: 'capitalize'}} variant="h6" component="div">
-                            Browsing: <b>{category === 'gpu' ? 'Graphics Cards' : category?.toUpperCase()}</b>
+                        <IconButton
+                            edge="start"
+                            color="inherit"
+                            onClick={() => setMobileFiltersOpen(true)}
+                            sx={{
+                                display: {xs: 'flex', md: 'none'},
+                                mr: 2
+                            }}
+                        >
+                            <Badge badgeContent={activeFiltersCount} color="error">
+                                <FilterListIcon/>
+                            </Badge>
+                        </IconButton>
+
+                        <Typography
+                            sx={{ml: {xs: 0, md: 2}, flex: 1, fontSize: {xs: '1rem', sm: '1.25rem'}}}
+                            variant="h6"
+                            component="div"
+                        >
+                            <Box component="span" sx={{display: {xs: 'none', sm: 'inline'}}}>
+                                Browsing:
+                            </Box>
+                            <b> {category === 'gpu' ? 'Graphics Cards' : category?.toUpperCase()}</b>
                             {mode === 'forge' && currentBuildId && (
-                                <Typography variant="caption"
-                                            sx={{ml: 2, bgcolor: 'rgba(0,0,0,0.2)', px: 1, borderRadius: 1}}>
-                                    COMPATIBILITY MODE ON
+                                <Typography
+                                    variant="caption"
+                                    sx={{
+                                        ml: {xs: 1, sm: 2},
+                                        bgcolor: 'rgba(0,0,0,0.2)',
+                                        px: 1,
+                                        py: 0.5,
+                                        borderRadius: 1,
+                                        display: {xs: 'none', sm: 'inline-block'}
+                                    }}
+                                >
+                                    COMPATIBILITY MODE
                                 </Typography>
                             )}
                         </Typography>
-                        <IconButton edge="start" color="inherit" onClick={onClose}>
+                        <IconButton edge="end" color="inherit" onClick={onClose}>
                             <CloseIcon/>
                         </IconButton>
@@ -187,73 +320,14 @@
                 </AppBar>
 
-                <DialogContent sx={{p: 0, display: 'flex', height: '100%'}}>
+                <DialogContent sx={{p: 0, display: 'flex', height: '100%', overflow: 'hidden'}}>
                     <Box sx={{
-                        width: 300,
+                        display: {xs: 'none', md: 'block'},
                         borderRight: '1px solid #ddd',
-                        p: 3,
-                        bgcolor: '#1e1e1e',
-                        display: {xs: 'none', md: 'block'},
-                        overflowY: 'auto'
+                        overflowY: 'auto',
+                        bgcolor: '#1e1e1e'
                     }}>
-                        <TextField
-                            fullWidth
-                            size="small"
-                            placeholder="Search components..."
-                            value={tempSearchQuery}
-                            onChange={(e) => setTempSearchQuery(e.target.value)}
-                            sx={{mb: 2}}
-                            InputProps={{
-                                startAdornment: <InputAdornment position="start"><SearchIcon/></InputAdornment>,
-                            }}
-                        />
-
-
-                        <FormControl fullWidth size="small" sx={{mb: 2}}>
-                            <InputLabel>Sort By</InputLabel>
-                            <Select value={sortOrder} label="Sort By" onChange={(e) => setSortOrder(e.target.value)}>
-                                <MenuItem value="price_asc">Price: Low to High</MenuItem>
-                                <MenuItem value="price_desc">Price: High to Low</MenuItem>
-                            </Select>
-                        </FormControl>
-
-                        <FormControl fullWidth size="small" sx={{mb: 2}}>
-                            <InputLabel>Brands</InputLabel>
-                            <Select multiple value={selectedBrands} onChange={handleBrandChange} label="Brands"
-                                    renderValue={(s) => s.join(', ')}>
-                                {availableBrands.map((brand) => (
-                                    <MenuItem key={brand} value={brand}>
-                                        <Checkbox checked={selectedBrands.indexOf(brand) > -1}/>
-                                        <ListItemText primary={brand}/>
-                                    </MenuItem>
-                                ))}
-                            </Select>
-                        </FormControl>
-
-                        <Typography gutterBottom fontWeight="bold">Price Range</Typography>
-                        <Slider value={priceRange} onChange={(_, v) => setPriceRange(v as number[])} min={0} max={2000}
-                                sx={{color: '#ff8201'}}/>
-                        <Box sx={{display: 'flex', justifyContent: 'space-between', mt: 1}}>
-                            <Typography variant="caption">${priceRange[0]}</Typography>
-                            <Typography variant="caption">${priceRange[1]}+</Typography>
-                        </Box>
-                        {/*TO BE FINISHED*/}
-                        <Button
-                            fullWidth
-                            variant="contained"
-                            startIcon={<AddCircleIcon/>}
-                            onClick={() => setSuggestOpen(true)}
-                            sx={{
-                                mt: 2,
-                                bgcolor: '#ff8201',
-                                fontWeight: 'bold',
-                                fontSize: '0.875rem',
-                                '&:hover': {bgcolor: '#e67300'}
-                            }}
-                        >
-                            Suggest Component
-                        </Button>
+                        {FilterContent}
                     </Box>
-
-                    <Box sx={{flex: 1, p: 3, overflowY: 'auto', bgcolor: '#121212'}}>
+                    <Box sx={{flex: 1, p: {xs: 1.5, sm: 2, md: 3}, overflowY: 'auto', bgcolor: '#121212'}}>
                         {loading ? (
                             <Box sx={{display: 'flex', justifyContent: 'center', mt: 10}}>
@@ -266,9 +340,9 @@
                                     xs: '1fr',
                                     sm: 'repeat(2, 1fr)',
-                                    md: 'repeat(3, 1fr)',
-                                    lg: 'repeat(4, 1fr)',
-                                    xl: 'repeat(5, 1fr)'
+                                    md: 'repeat(2, 1fr)',
+                                    lg: 'repeat(3, 1fr)',
+                                    xl: 'repeat(4, 1fr)'
                                 },
-                                gap: 3,
+                                gap: {xs: 1.5, sm: 2, md: 3},
                                 width: '100%'
                             }}>
@@ -301,5 +375,5 @@
                                                         height: '100%',
                                                         objectFit: 'contain',
-                                                        p: 2
+                                                        p: {xs: 1, sm: 2}
                                                     }}
                                                 />
@@ -310,38 +384,64 @@
                                                 display: 'flex',
                                                 flexDirection: 'column',
-                                                justifyContent: 'space-between'
+                                                justifyContent: 'space-between',
+                                                p: {xs: 1.5, sm: 2}
                                             }}>
                                                 <Box>
-                                                    <Typography variant="caption" color="text.secondary"
-                                                                sx={{textTransform: 'uppercase', letterSpacing: 0.5}}>
+                                                    <Typography
+                                                        variant="caption"
+                                                        color="text.secondary"
+                                                        sx={{
+                                                            textTransform: 'uppercase',
+                                                            letterSpacing: 0.5,
+                                                            fontSize: {xs: '0.65rem', sm: '0.75rem'}
+                                                        }}
+                                                    >
                                                         {comp.brand}
                                                     </Typography>
-                                                    <Typography variant="subtitle1" fontWeight="bold" sx={{
-                                                        lineHeight: 1.2,
-                                                        mt: 0.5,
-                                                        mb: 1,
-                                                        overflow: 'hidden',
-                                                        textOverflow: 'ellipsis',
-                                                        display: '-webkit-box',
-                                                        WebkitLineClamp: 2,
-                                                        WebkitBoxOrient: 'vertical',
-                                                        minHeight: '2.4em'
-                                                    }}>
+                                                    <Typography
+                                                        variant="subtitle1"
+                                                        fontWeight="bold"
+                                                        sx={{
+                                                            lineHeight: 1.2,
+                                                            mt: 0.5,
+                                                            mb: 1,
+                                                            overflow: 'hidden',
+                                                            textOverflow: 'ellipsis',
+                                                            display: '-webkit-box',
+                                                            WebkitLineClamp: 2,
+                                                            WebkitBoxOrient: 'vertical',
+                                                            minHeight: '2.4em',
+                                                            fontSize: {xs: '0.875rem', sm: '1rem'}
+                                                        }}
+                                                    >
                                                         {comp.name}
                                                     </Typography>
                                                 </Box>
-                                                <Typography variant="h6" color="primary.main" fontWeight="bold">
+                                                <Typography
+                                                    variant="h6"
+                                                    color="primary.main"
+                                                    fontWeight="bold"
+                                                    sx={{fontSize: {xs: '1rem', sm: '1.25rem'}}}
+                                                >
                                                     {formatMoney(comp.price)}
                                                 </Typography>
                                             </CardContent>
 
-                                            <Box sx={{p: 2, pt: 0, display: 'flex', flexDirection: 'column', gap: 1}}>
+                                            <Box sx={{
+                                                p: {xs: 1.5, sm: 2},
+                                                pt: 0,
+                                                display: 'flex',
+                                                flexDirection: 'column',
+                                                gap: 1
+                                            }}>
                                                 <Button
                                                     fullWidth
                                                     variant="contained"
                                                     onClick={() => setSelectedComponent(comp)}
+                                                    size="small"
                                                     sx={{
                                                         bgcolor: '#ff8201',
                                                         fontWeight: 'bold',
+                                                        fontSize: {xs: '0.75rem', sm: '0.875rem'},
                                                         '&:hover': {bgcolor: '#e67300'}
                                                     }}
@@ -354,7 +454,9 @@
                                                         variant="contained"
                                                         onClick={() => onSelect(comp)}
+                                                        size="small"
                                                         sx={{
                                                             bgcolor: '#4caf50',
                                                             fontWeight: 'bold',
+                                                            fontSize: {xs: '0.75rem', sm: '0.875rem'},
                                                             '&:hover': {bgcolor: '#388e3c'}
                                                         }}
@@ -369,5 +471,6 @@
                                 {processedComponents.length === 0 && (
                                     <Box sx={{gridColumn: '1 / -1', width: '100%', textAlign: 'center', mt: 5}}>
-                                        <Typography variant="h6" color="text.secondary">
+                                        <Typography variant="h6" color="text.secondary"
+                                                    sx={{fontSize: {xs: '1rem', sm: '1.25rem'}}}>
                                             No compatible components found.
                                         </Typography>
@@ -390,4 +493,33 @@
                 />
             </Dialog>
+
+            <Drawer
+                anchor="left"
+                open={mobileFiltersOpen && open}
+                onClose={() => setMobileFiltersOpen(false)}
+                sx={{zIndex: 1400}}
+                PaperProps={{
+                    sx: {
+                        bgcolor: '#1e1e1e'
+                    }
+                }}
+                disableScrollLock={true}
+            >
+                <Box sx={{pt: 2, width: 280}}>
+                    <Box sx={{
+                        display: 'flex',
+                        justifyContent: 'space-between',
+                        alignItems: 'center',
+                        px: 3,
+                        pb: 2
+                    }}>
+                        <Typography variant="h6" fontWeight="bold">Filters</Typography>
+                        <IconButton onClick={() => setMobileFiltersOpen(false)}>
+                            <CloseIcon/>
+                        </IconButton>
+                    </Box>
+                    {FilterContent}
+                </Box>
+            </Drawer>
 
             <Dialog open={suggestOpen} onClose={() => setSuggestOpen(false)} maxWidth="sm" fullWidth>