Index: components/BuildDetailsDialog.tsx
===================================================================
--- components/BuildDetailsDialog.tsx	(revision b348db42dc1705fafab4b01a17d5a88de7941467)
+++ components/BuildDetailsDialog.tsx	(revision f72725276adbe73846f24a98b24485847de7ecd6)
@@ -1,5 +1,5 @@
 import React, {useEffect, useState} from 'react';
 import {
-    Dialog, DialogTitle, DialogContent, DialogActions, Button, Grid, Box, Typography,
+    Dialog, DialogTitle, DialogContent, DialogActions, Button, Box, Typography,
     IconButton, Tab, Tabs, Table, TableBody, TableCell, TableRow, Rating, TextField, Avatar, Chip, Alert
 } from '@mui/material';
@@ -34,7 +34,6 @@
     const [ratingVal, setRatingVal] = useState(5);
 
-    // Main details fetch
     useEffect(() => {
-        if (open && buildId !== null && typeof buildId === 'number') {
+        if (open && buildId !== null) {
             setLoading(true);
             setReviewText("");
@@ -52,5 +51,5 @@
 
     useEffect(() => {
-        if (open && buildId !== null && typeof buildId === 'number') {
+        if (open && buildId !== null) {
             onGetBuildState({buildId})
                 .then(state => {
@@ -63,4 +62,11 @@
     }, [open, buildId]);
 
+    useEffect(() => {
+        if (open) {
+            setTabIndex(0);
+        }
+    }, [open, buildId]);
+
+
     const handleFavorite = async () => {
         if (!currentUser || buildId === null) return alert("Please login to favorite builds.");
@@ -103,5 +109,5 @@
     return (
         <>
-            <Dialog open={open} onClose={onClose} maxWidth="md" fullWidth scroll="paper">
+            <Dialog open={open} onClose={onClose} maxWidth="md" fullWidth scroll="body">
                 {loading || !details ? (
                     <Box sx={{p: 5, textAlign: 'center'}}>Loading Forge Schematics...</Box>
@@ -146,6 +152,16 @@
                             <Box sx={{p: 3}}>
                                 {tabIndex === 0 && (
-                                    <Grid container spacing={2}>
-                                        <Grid item xs={12} md={8}>
+                                    <Box
+                                        sx={{
+                                            display: 'grid',
+                                            gridTemplateColumns: {
+                                                xs: '1fr',
+                                                md: '2fr 1fr'
+                                            },
+                                            gap: 2,
+                                            width: '100%'
+                                        }}
+                                    >
+                                        <Box>
                                             <Table size="small">
                                                 <TableBody>
@@ -193,10 +209,11 @@
                                                 </TableBody>
                                             </Table>
-                                        </Grid>
-
-                                        <Grid item xs={12} md={4}>
+                                        </Box>
+
+                                        <Box>
                                             <Box sx={{bgcolor: '#424343', p: 2, borderRadius: 2, mb: 2}}>
-                                                <Typography color="primary.main" gutterBottom fontWeight="bold">Builder's
-                                                    Notes</Typography>
+                                                <Typography color="primary.main" gutterBottom fontWeight="bold">
+                                                    Builder's Notes
+                                                </Typography>
                                                 <Typography color="primary.main" variant="body2"
                                                             sx={{fontStyle: 'italic'}}>
@@ -243,6 +260,6 @@
                                                 </Button>
                                             </Box>
-                                        </Grid>
-                                    </Grid>
+                                        </Box>
+                                    </Box>
                                 )}
 
@@ -313,6 +330,7 @@
                                             ))}
                                             {details.reviews.length === 0 && (
-                                                <Typography color="text.secondary" align="center">No reviews yet. Be the
-                                                    first!</Typography>
+                                                <Typography color="text.secondary" align="center">
+                                                    No reviews yet. Be the first!
+                                                </Typography>
                                             )}
                                         </Box>
Index: components/ComponentDetailsDialog.tsx
===================================================================
--- components/ComponentDetailsDialog.tsx	(revision b348db42dc1705fafab4b01a17d5a88de7941467)
+++ components/ComponentDetailsDialog.tsx	(revision f72725276adbe73846f24a98b24485847de7ecd6)
@@ -2,5 +2,5 @@
 import {
     Dialog, DialogTitle, DialogContent, DialogActions, Button,
-    Typography, Box, Grid, Chip, CircularProgress, IconButton,
+    Typography, Box, Chip, CircularProgress, IconButton,
     Table, TableBody, TableCell, TableContainer, TableRow, Paper
 } from '@mui/material';
@@ -92,6 +92,7 @@
             open={open}
             onClose={onClose}
-            maxWidth="lg"
-            // fullWidth
+            maxWidth="md"
+            fullWidth
+            scroll="body"
             sx={{zIndex: 1400}}
         >
@@ -116,5 +117,10 @@
             </DialogTitle>
 
-            <DialogContent dividers>
+            <DialogContent
+                sx={{
+                    p: 1,
+                    overflow: 'visible'
+                }}
+            >
                 {loading ? (
                     <Box sx={{display: 'flex', justifyContent: 'center', p: 5}}>
@@ -122,9 +128,18 @@
                     </Box>
                 ) : (
-                    <Grid container spacing={4}>
-                        <Grid item xs={12} md={4} sx={{display: 'flex', flexDirection: 'column', alignItems: 'center'}}>
+                    <Box
+                        sx={{
+                            display: 'grid',
+                            gridTemplateColumns: {
+                                xs: '1fr',
+                                md: '1fr 1fr'
+                            },
+                            gap: 4,
+                            width: '100%'
+                        }}
+                    >
+                        <Box sx={{display: 'flex', flexDirection: 'column', alignItems: 'center'}}>
                             <Box
                                 component="img"
-                                // src={`https://placehold.co/400x400?text=${encodeURIComponent(displayData.name)}`}
                                 src={displayData.imgUrl}
                                 alt={displayData.name}
@@ -133,8 +148,7 @@
                                     maxHeight: 300,
                                     objectFit: 'contain',
-                                    mb: 2,
-                                    // border: '1px solid #eee',
-                                    // borderRadius: 2,
-                                    p: 2
+                                    mb: 1,
+                                    mt: 7,
+                                    p: 1
                                 }}
                             />
@@ -144,21 +158,58 @@
                                 sx={{fontWeight: 'bold'}}
                             />
-                        </Grid>
-
-                        <Grid item xs={12} md={8}>
-                            <Typography variant="subtitle1" fontWeight="bold" gutterBottom
-                                        sx={{borderBottom: '2px solid #ff8201', display: 'inline-block', mb: 0.5}}>
+                        </Box>
+
+                        <Box sx={{
+                            display: 'flex',
+                            flexDirection: 'column',
+                            alignItems: 'center',
+                            width: '70%'
+                        }}>
+                            <Typography
+                                variant="subtitle1"
+                                fontWeight="bold"
+                                gutterBottom
+                                sx={{
+                                    borderBottom: '2px solid #ff8201',
+                                    mb: 1,
+                                    mt: 1,
+                                    textAlign: 'center',
+                                    width: '100%'
+                                }}
+                            >
                                 Technical Specifications
                             </Typography>
 
-                            <TableContainer component={Paper} variant="outlined">
-                                <Table size="small">
+                            <TableContainer
+                                component={Paper}
+                                variant="outlined"
+                                sx={{
+                                    maxWidth: '100%',
+                                    width: '100%'
+                                }}
+                            >
+                                <Table size="medium">
                                     <TableBody>
                                         <TableRow>
-                                            <TableCell component="th" scope="row"
-                                                       sx={{fontWeight: 'bold', width: '30%', bgcolor: '#1e1e1e'}}>
+                                            <TableCell
+                                                component="th"
+                                                scope="row"
+                                                sx={{
+                                                    fontWeight: 'bold',
+                                                    width: '50%',
+                                                    bgcolor: '#1e1e1e',
+                                                    textAlign: 'center',
+                                                    px: 2
+                                                }}
+                                            >
                                                 Brand
                                             </TableCell>
-                                            <TableCell>{displayData.brand}</TableCell>
+                                            <TableCell sx={{
+                                                textAlign: 'center',
+                                                px: 2,
+                                                width: '50%'
+                                            }}>
+                                                {displayData.brand}
+                                            </TableCell>
                                         </TableRow>
 
@@ -168,12 +219,24 @@
                                             return (
                                                 <TableRow key={key}>
-                                                    <TableCell component="th" scope="row" sx={{
-                                                        fontWeight: 'bold',
-                                                        width: '30%',
-                                                        bgcolor: '#1e1e1e'
-                                                    }}>
+                                                    <TableCell
+                                                        component="th"
+                                                        scope="row"
+                                                        sx={{
+                                                            fontWeight: 'bold',
+                                                            width: '50%',
+                                                            bgcolor: '#1e1e1e',
+                                                            textAlign: 'center',
+                                                            px: 2
+                                                        }}
+                                                    >
                                                         {formatKey(key)}
                                                     </TableCell>
-                                                    <TableCell>{renderValue(key, val)}</TableCell>
+                                                    <TableCell sx={{
+                                                        textAlign: 'center',
+                                                        px: 2,
+                                                        width: '50%'
+                                                    }}>
+                                                        {renderValue(key, val)}
+                                                    </TableCell>
                                                 </TableRow>
                                             );
@@ -182,11 +245,18 @@
                                 </Table>
                             </TableContainer>
-                            <Box sx={{display: 'flex', justifyContent: 'space-between', alignItems: 'center', mt: 0.5}}>
+
+                            <Box sx={{
+                                display: 'flex',
+                                justifyContent: 'center',
+                                alignItems: 'center',
+                                mt: 1,
+                                width: '100%'
+                            }}>
                                 <Typography variant="h4" color="primary.main" fontWeight="bold">
                                     {formatMoney(displayData.price)}
                                 </Typography>
                             </Box>
-                        </Grid>
-                    </Grid>
+                        </Box>
+                    </Box>
                 )}
             </DialogContent>
@@ -198,5 +268,5 @@
                             color: 'white',
                             borderColor: '#ff8201',
-                            onHover: {backgroundColor: '#ba5d02', borderColor: '#ba5d02'}
+                            '&:hover': {backgroundColor: '#ba5d02', borderColor: '#ba5d02'}
                         }}
                 >Close</Button>
Index: components/ComponentDialog.tsx
===================================================================
--- components/ComponentDialog.tsx	(revision b348db42dc1705fafab4b01a17d5a88de7941467)
+++ components/ComponentDialog.tsx	(revision f72725276adbe73846f24a98b24485847de7ecd6)
@@ -57,4 +57,15 @@
         return () => clearTimeout(timeoutId);
     }, [tempSearchQuery]);
+
+    useEffect(() => {
+        if (open && category) {
+            setSelectedBrands([]);
+            setSortOrder('price_desc');
+            setTempSearchQuery('');
+            setSearchQuery('');
+            setPriceRange([0, 2000]);
+        }
+    }, [open, category]);
+
 
     useEffect(() => {
@@ -297,5 +308,5 @@
                                 Browsing:
                             </Box>
-                            <b> {category === 'gpu' ? 'Graphics Cards' : category?.toUpperCase()}</b>
+                            <b> {category === 'gpu' ? 'GRAPHICS CARDS' : category === 'memory_card' ? 'STORAGE EXPANSION CARDS' : category?.toUpperCase()}</b>
                             {mode === 'forge' && currentBuildId && (
                                 <Typography
Index: components/Navbar.tsx
===================================================================
--- components/Navbar.tsx	(revision b348db42dc1705fafab4b01a17d5a88de7941467)
+++ components/Navbar.tsx	(revision f72725276adbe73846f24a98b24485847de7ecd6)
@@ -64,5 +64,5 @@
     { id: 'sound_card', label: 'Sound Cards', icon: <SpeakerIcon fontSize="small" /> },
     { id: 'optical_drive', label: 'Optical Drives', icon: <AlbumIcon fontSize="small" /> },
-    { id: 'memory_card', label: 'Memory Cards', icon: <SdCardIcon fontSize="small" /> },
+    { id: 'memory_card', label: 'Storage Cards', icon: <SdCardIcon fontSize="small" /> },
     { id: 'cables', label: 'Cables', icon: <CableIcon fontSize="small" /> },
 ];
Index: pages/index/+Page.tsx
===================================================================
--- pages/index/+Page.tsx	(revision b348db42dc1705fafab4b01a17d5a88de7941467)
+++ pages/index/+Page.tsx	(revision f72725276adbe73846f24a98b24485847de7ecd6)
@@ -10,5 +10,5 @@
 import BuildCard from '../../components/BuildCard';
 
-import {onGetApprovedBuilds, onGetAuthState, onCloneBuild} from '../+Layout.telefunc';
+import {onGetApprovedBuilds, onGetAuthState} from '../+Layout.telefunc';
 
 export default function HomePage() {
@@ -46,15 +46,6 @@
         }
 
-        loadSite();
+        void loadSite();
     }, []);
-
-    const handleCloneWrapper = async (buildId: number) => {
-        if (!data?.isLoggedIn) return alert("Please login to clone builds!");
-        if (confirm(`Clone this build to your dashboard?`)) {
-            await onCloneBuild({buildId});
-            alert("Build cloned! Check your dashboard.");
-            setSelectedBuildId(null);
-        }
-    };
 
     if (!data) return <Box sx={{p: 10, textAlign: 'center'}}>Loading Forge...</Box>;
@@ -160,5 +151,4 @@
                 currentUser={data.userId}
                 onClose={() => setSelectedBuildId(null)}
-                onClone={handleCloneWrapper}
             />