Index: components/AddComponentDialog.tsx
===================================================================
--- components/AddComponentDialog.tsx	(revision 41a2f81c85a6b12ebd6aff2f621dce1c8af277da)
+++ components/AddComponentDialog.tsx	(revision 87b79bc538e0365a7b1fa7e9903355b32304937e)
@@ -20,8 +20,13 @@
 ];
 
-export default function AddComponentDialog({ open, onClose, onSuccess }: {
+export default function AddComponentDialog({ open, onClose, onSuccess, prefillData }: {
     open: boolean;
     onClose: () => void;
     onSuccess: () => void;
+    prefillData?: {
+        type?: string;
+        suggestionLink?: string;
+        suggestionDescription?: string;
+    };
 }) {
     const [name, setName] = useState('');
@@ -68,4 +73,10 @@
         }
     }, [type]);
+
+    useEffect(() => {
+        if (open && prefillData) {
+            if (prefillData.type) setType(prefillData.type);
+        }
+    }, [open, prefillData]);
 
     const handleFieldChange = (fieldName: string, value: any) => {
Index: components/ComponentDialog.tsx
===================================================================
--- components/ComponentDialog.tsx	(revision 41a2f81c85a6b12ebd6aff2f621dce1c8af277da)
+++ components/ComponentDialog.tsx	(revision 87b79bc538e0365a7b1fa7e9903355b32304937e)
@@ -40,4 +40,14 @@
 
     useEffect(() => {
+        if (open && category) {
+            setSuggestForm({
+                link: '',
+                description: '',
+                componentType: category
+            });
+        }
+    }, [open, category]);
+
+    useEffect(() => {
         const timeoutId = setTimeout(() => {
             setSearchQuery(tempSearchQuery);
@@ -46,5 +56,4 @@
     }, [tempSearchQuery]);
 
-    // Load user auth
     useEffect(() => {
         if (open) {
@@ -97,5 +106,7 @@
             [e.target.name]: e.target.value
         });
-    };
+    }
+
+
 
     const submitSuggestion = async () => {
Index: components/Navbar.tsx
===================================================================
--- components/Navbar.tsx	(revision 41a2f81c85a6b12ebd6aff2f621dce1c8af277da)
+++ components/Navbar.tsx	(revision 87b79bc538e0365a7b1fa7e9903355b32304937e)
@@ -7,7 +7,28 @@
 import Menu from "@mui/material/Menu";
 import MenuItem from "@mui/material/MenuItem";
+import IconButton from "@mui/material/IconButton";
+import Drawer from "@mui/material/Drawer";
+import List from "@mui/material/List";
+import ListItem from "@mui/material/ListItem";
+import ListItemButton from "@mui/material/ListItemButton";
+import ListItemIcon from "@mui/material/ListItemIcon";
+import ListItemText from "@mui/material/ListItemText";
+import Divider from "@mui/material/Divider";
+import Collapse from "@mui/material/Collapse";
+
 import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
+import MenuIcon from '@mui/icons-material/Menu';
+import CloseIcon from '@mui/icons-material/Close';
+import BuildIcon from '@mui/icons-material/Build';
+import ViewListIcon from '@mui/icons-material/ViewList';
+import ExpandLess from '@mui/icons-material/ExpandLess';
+import ExpandMore from '@mui/icons-material/ExpandMore';
+import PersonIcon from '@mui/icons-material/Person';
+import LogoutIcon from '@mui/icons-material/Logout';
+import LoginIcon from '@mui/icons-material/Login';
+import PersonAddIcon from '@mui/icons-material/PersonAdd';
+
 import {
-    Dialog, DialogTitle, DialogContent, DialogContentText, DialogActions, ListItemText
+    Dialog, DialogTitle, DialogContent, DialogContentText, DialogActions
 } from "@mui/material";
 
@@ -39,6 +60,4 @@
     { id: 'power_supply', label: 'Power Supplies', icon: <StorageIcon fontSize="small" /> },
     { id: 'cooler', label: 'Cooling', icon: <StorageIcon fontSize="small" /> },
-
-    // Peripherals / Accessories (Missing ones)
     { id: 'network_adapter', label: 'Network Adapters (WiFi)', icon: <RouterIcon fontSize="small" /> },
     { id: 'network_card', label: 'Network Cards (Ethernet)', icon: <LanIcon fontSize="small" /> },
@@ -49,8 +68,9 @@
 ];
 
-
 export default function Navbar() {
     const [auth, setAuth] = useState<AuthState | null>(null);
     const [openLogoutDialog, setOpenLogoutDialog] = useState(false);
+    const [mobileDrawerOpen, setMobileDrawerOpen] = useState(false);
+    const [mobileComponentsOpen, setMobileComponentsOpen] = useState(false);
 
     const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
@@ -72,4 +92,6 @@
         setBrowserOpen(true);
         handleMenuClose();
+        setMobileDrawerOpen(false);
+        setMobileComponentsOpen(false);
     };
 
@@ -77,4 +99,5 @@
         e.preventDefault();
         setOpenLogoutDialog(true);
+        setMobileDrawerOpen(false);
     };
 
@@ -114,7 +137,23 @@
             <AppBar position="static" color="default" enableColorOnDark>
                 <Toolbar>
-                    <Box sx={{ display: 'flex', alignItems: 'center', mr: 4 }}>
-                        <Box component="img" src={LogoUrl} alt="PC Forge Logo" sx={{ height: 40, mr: 2, cursor: 'pointer' }} onClick={() => window.location.href='/'} />
-                        <Typography variant="h6" component="a" href="/" sx={{ textDecoration: "none", color: "inherit", fontWeight: "bold" }}>
+                    <Box sx={{ display: 'flex', alignItems: 'center', mr: { xs: 1, md: 4 } }}>
+                        <Box
+                            component="img"
+                            src={LogoUrl}
+                            alt="PC Forge Logo"
+                            sx={{ height: 40, mr: { xs: 1, md: 2 }, cursor: 'pointer' }}
+                            onClick={() => window.location.href='/'}
+                        />
+                        <Typography
+                            variant="h6"
+                            component="a"
+                            href="/"
+                            sx={{
+                                textDecoration: "none",
+                                color: "inherit",
+                                fontWeight: "bold",
+                                display: { xs: 'none', sm: 'block' }
+                            }}
+                        >
                             PC Forge
                         </Typography>
@@ -140,5 +179,5 @@
                             {COMPONENT_CATEGORIES.map((cat) => (
                                 <MenuItem key={cat.id} onClick={() => handleCategorySelect(cat.id)}>
-                                    {/*<ListItemIcon>{cat.icon}</ListItemIcon>*/}
+                                    <ListItemIcon>{cat.icon}</ListItemIcon>
                                     <ListItemText>{cat.label}</ListItemText>
                                 </MenuItem>
@@ -151,5 +190,5 @@
                     <Box sx={{ flexGrow: 1 }} />
 
-                    <Box sx={{ display: 'flex', gap: 1 }}>
+                    <Box sx={{ display: { xs: 'none', md: 'flex' }, gap: 1 }}>
                         {auth?.isLoggedIn ? (
                             <>
@@ -159,11 +198,110 @@
                         ) : (
                             <>
-                                <Button color="inherit" href="/auth/login">Login</Button>
-                                <Button color="inherit" href="/auth/register">Register</Button>
+                                <Button color="inherit" href="/auth/login" sx={onHoverNav}>Login</Button>
+                                <Button color="inherit" href="/auth/register" sx={onHoverNav}>Register</Button>
                             </>
                         )}
                     </Box>
+
+                    <IconButton
+                        color="inherit"
+                        edge="end"
+                        onClick={() => setMobileDrawerOpen(true)}
+                        sx={{ display: { xs: 'block', md: 'none' } }}
+                    >
+                        <MenuIcon />
+                    </IconButton>
                 </Toolbar>
             </AppBar>
+
+            <Drawer
+                anchor="right"
+                open={mobileDrawerOpen}
+                onClose={() => setMobileDrawerOpen(false)}
+                sx={{
+                    display: { xs: 'block', md: 'none' },
+                    '& .MuiDrawer-paper': { width: 280 , height: '60%'}
+                }}
+            >
+                <Box sx={{ p: 2, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+                    <Typography variant="h6" fontWeight="bold">Menu</Typography>
+                    <IconButton onClick={() => setMobileDrawerOpen(false)}>
+                        <CloseIcon />
+                    </IconButton>
+                </Box>
+                <Divider />
+
+                <List>
+                    <ListItem disablePadding>
+                        <ListItemButton onClick={() => { window.location.href = '/forge'; }}>
+                            <ListItemIcon><BuildIcon /></ListItemIcon>
+                            <ListItemText primary="Forge" />
+                        </ListItemButton>
+                    </ListItem>
+
+                    <ListItem disablePadding>
+                        <ListItemButton onClick={() => setMobileComponentsOpen(!mobileComponentsOpen)}>
+                            <ListItemIcon><ViewListIcon /></ListItemIcon>
+                            <ListItemText primary="Components" />
+                            {mobileComponentsOpen ? <ExpandLess /> : <ExpandMore />}
+                        </ListItemButton>
+                    </ListItem>
+                    <Collapse in={mobileComponentsOpen} timeout="auto" unmountOnExit>
+                        <List component="div" disablePadding>
+                            {COMPONENT_CATEGORIES.map((cat) => (
+                                <ListItemButton
+                                    key={cat.id}
+                                    sx={{ pl: 4 }}
+                                    onClick={() => handleCategorySelect(cat.id)}
+                                >
+                                    <ListItemIcon>{cat.icon}</ListItemIcon>
+                                    <ListItemText primary={cat.label} />
+                                </ListItemButton>
+                            ))}
+                        </List>
+                    </Collapse>
+
+                    <ListItem disablePadding>
+                        <ListItemButton onClick={() => { window.location.href = '/completed-builds'; }}>
+                            <ListItemIcon><ViewListIcon /></ListItemIcon>
+                            <ListItemText primary="Completed Builds" />
+                        </ListItemButton>
+                    </ListItem>
+
+                    <Divider sx={{ my: 1 }} />
+
+                    {auth?.isLoggedIn ? (
+                        <>
+                            <ListItem disablePadding>
+                                <ListItemButton onClick={() => { window.location.href = checkDashboardUrl; }}>
+                                    <ListItemIcon><PersonIcon /></ListItemIcon>
+                                    <ListItemText primary={"My Profile"} />
+                                </ListItemButton>
+                            </ListItem>
+                            <ListItem disablePadding>
+                                <ListItemButton onClick={handleLogoutClick}>
+                                    <ListItemIcon><LogoutIcon /></ListItemIcon>
+                                    <ListItemText primary="Logout" />
+                                </ListItemButton>
+                            </ListItem>
+                        </>
+                    ) : (
+                        <>
+                            <ListItem disablePadding>
+                                <ListItemButton onClick={() => { window.location.href = '/auth/login'; }}>
+                                    <ListItemIcon><LoginIcon /></ListItemIcon>
+                                    <ListItemText primary="Login" />
+                                </ListItemButton>
+                            </ListItem>
+                            <ListItem disablePadding>
+                                <ListItemButton onClick={() => { window.location.href = '/auth/register'; }}>
+                                    <ListItemIcon><PersonAddIcon /></ListItemIcon>
+                                    <ListItemText primary="Register" />
+                                </ListItemButton>
+                            </ListItem>
+                        </>
+                    )}
+                </List>
+            </Drawer>
 
             <Dialog open={openLogoutDialog} onClose={() => setOpenLogoutDialog(false)}>