diff --git a/.vscode/launch.json b/.vscode/launch.json
index 147923c..f5af679 100644
--- a/.vscode/launch.json
+++ b/.vscode/launch.json
@@ -3,19 +3,17 @@
   "configurations": [
     {
       "name": "Launch Vite Dev Server",
-      "type": "pwa-chrome",
+      "type": "node-terminal",
       "request": "launch",
-      "url": "http://localhost:5173/",
-      "webRoot": "${workspaceFolder}/src",
-      "preLaunchTask": "npm: dev server"
+      "command": "npm run dev",
+      "cwd": "${workspaceFolder}"
     },
     {
       "name": "Launch Preview (Test) Server",
-      "type": "pwa-chrome",
+      "type": "node-terminal",
       "request": "launch",
-      "url": "http://localhost:4173/",
-      "webRoot": "${workspaceFolder}/src",
-      "preLaunchTask": "npm: preview server"
+      "command": "npm run preview",
+      "cwd": "${workspaceFolder}"
     }
   ]
 }
diff --git a/src/App.tsx b/src/App.tsx
index e4c2e33..5d2ee4e 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,6 +1,7 @@
 import { CssBaseline, ThemeProvider, createTheme } from '@mui/material';
 import { BrowserRouter, Route, Routes } from 'react-router-dom';
 import { DBProvider } from './context/DBProvider';
+import { AppLayout } from './components/AppLayout';
 import { HomeScreen } from './screens/HomeScreen';
 import { StartPickListScreen } from './screens/StartPickListScreen';
 import { PickListsScreen } from './screens/PickListsScreen';
@@ -24,14 +25,16 @@ const AppRoutes = () => {
   useServiceWorker();
   return (
     <Routes>
-      <Route path="/" element={<HomeScreen />} />
-      <Route path="/start" element={<StartPickListScreen />} />
-      <Route path="/pick-lists" element={<PickListsScreen />} />
-      <Route path="/pick-lists/:id" element={<ActivePickListScreen />} />
-      <Route path="/pick-lists/:id/add-item" element={<AddItemScreen />} />
-      <Route path="/products" element={<ManageProductsScreen />} />
-      <Route path="/areas" element={<ManageAreasScreen />} />
-      <Route path="/scan" element={<BarcodeScannerScreen />} />
+      <Route element={<AppLayout />}>
+        <Route path="/" element={<HomeScreen />} />
+        <Route path="/start" element={<StartPickListScreen />} />
+        <Route path="/pick-lists" element={<PickListsScreen />} />
+        <Route path="/pick-lists/:id" element={<ActivePickListScreen />} />
+        <Route path="/pick-lists/:id/add-item" element={<AddItemScreen />} />
+        <Route path="/products" element={<ManageProductsScreen />} />
+        <Route path="/areas" element={<ManageAreasScreen />} />
+        <Route path="/scan" element={<BarcodeScannerScreen />} />
+      </Route>
     </Routes>
   );
 };
diff --git a/src/components/AppLayout.tsx b/src/components/AppLayout.tsx
new file mode 100644
index 0000000..da4fd0c
--- /dev/null
+++ b/src/components/AppLayout.tsx
@@ -0,0 +1,12 @@
+import { Box } from '@mui/material';
+import { Outlet } from 'react-router-dom';
+import { NavigationBar } from './NavigationBar';
+
+export const AppLayout = () => (
+  <Box sx={{ minHeight: '100vh', display: 'flex', flexDirection: 'column' }}>
+    <NavigationBar />
+    <Box component="main" sx={{ flexGrow: 1 }}>
+      <Outlet />
+    </Box>
+  </Box>
+);
diff --git a/src/components/NavigationBar.tsx b/src/components/NavigationBar.tsx
new file mode 100644
index 0000000..b7cc3fe
--- /dev/null
+++ b/src/components/NavigationBar.tsx
@@ -0,0 +1,54 @@
+import { AppBar, Box, Button, Toolbar, Typography } from '@mui/material';
+import { Link as RouterLink, useLocation } from 'react-router-dom';
+
+const navLinks = [
+  { to: '/', label: 'Home' },
+  { to: '/start', label: 'Start' },
+  { to: '/pick-lists', label: 'Pick Lists' },
+  { to: '/products', label: 'Products' },
+  { to: '/areas', label: 'Areas' },
+  { to: '/scan', label: 'Scan' },
+];
+
+const isActivePath = (currentPath: string, target: string) =>
+  currentPath === target || currentPath.startsWith(`${target}/`);
+
+export const NavigationBar = () => {
+  const location = useLocation();
+
+  return (
+    <AppBar position="static" color="default" elevation={1}>
+      <Toolbar sx={{ gap: 2, overflowX: 'auto' }}>
+        <Typography
+          variant="h6"
+          component={RouterLink}
+          to="/"
+          sx={{ color: 'inherit', textDecoration: 'none', fontWeight: 700 }}
+        >
+          StockFill
+        </Typography>
+        <Box sx={{ display: 'flex', gap: 1 }}>
+          {navLinks.map((link) => {
+            const active = isActivePath(location.pathname, link.to);
+            return (
+              <Button
+                key={link.to}
+                component={RouterLink}
+                to={link.to}
+                color="inherit"
+                sx={{
+                  minWidth: 'fit-content',
+                  opacity: active ? 1 : 0.8,
+                  textTransform: 'none',
+                  fontWeight: active ? 700 : 500,
+                }}
+              >
+                {link.label}
+              </Button>
+            );
+          })}
+        </Box>
+      </Toolbar>
+    </AppBar>
+  );
+};
diff --git a/src/components/ProductRow.tsx b/src/components/ProductRow.tsx
index 14cc8cb..d494209 100644
--- a/src/components/ProductRow.tsx
+++ b/src/components/ProductRow.tsx
@@ -1,26 +1,161 @@
-import { Card, CardContent, Stack, Typography } from '@mui/material';
+import {
+  Card,
+  CardActions,
+  CardContent,
+  IconButton,
+  MenuItem,
+  Stack,
+  TextField,
+  Typography,
+} from '@mui/material';
+import DeleteIcon from '@mui/icons-material/Delete';
+import EditIcon from '@mui/icons-material/Edit';
+import CheckIcon from '@mui/icons-material/Check';
+import CloseIcon from '@mui/icons-material/Close';
+import { ChangeEvent, useEffect, useState } from 'react';
 import { Product } from '../models/Product';
 
 interface ProductRowProps {
   product: Product;
+  categories: string[];
+  onSave: (
+    productId: string,
+    updates: {
+      name: string;
+      category: string;
+      unit_type: string;
+      bulk_name?: string;
+      units_per_bulk?: number;
+    },
+  ) => Promise<void> | void;
+  onDelete: (productId: string) => Promise<void> | void;
 }
 
-export const ProductRow = ({ product }: ProductRowProps) => (
-  <Card variant="outlined" sx={{ mb: 1 }}>
-    <CardContent>
-      <Stack direction="row" justifyContent="space-between" alignItems="center">
-        <div>
-          <Typography variant="subtitle1">{product.name}</Typography>
-          <Typography variant="caption" color="text.secondary">
-            {product.category} • {product.unit_type}
-          </Typography>
-        </div>
-        {product.bulk_name && product.units_per_bulk ? (
-          <Typography variant="caption" color="text.secondary">
-            {product.units_per_bulk} per {product.bulk_name}
-          </Typography>
-        ) : null}
-      </Stack>
-    </CardContent>
-  </Card>
-);
+interface ProductFormState {
+  name: string;
+  category: string;
+  unitType: string;
+  bulkName: string;
+  unitsPerBulk: string;
+}
+
+const getInitialFormState = (product: Product): ProductFormState => ({
+  name: product.name,
+  category: product.category,
+  unitType: product.unit_type,
+  bulkName: product.bulk_name ?? '',
+  unitsPerBulk: product.units_per_bulk?.toString() ?? '',
+});
+
+export const ProductRow = ({ product, categories, onSave, onDelete }: ProductRowProps) => {
+  const [isEditing, setIsEditing] = useState(false);
+  const [formState, setFormState] = useState<ProductFormState>(() => getInitialFormState(product));
+
+  useEffect(() => {
+    setFormState(getInitialFormState(product));
+  }, [product]);
+
+  const handleChange = (field: keyof ProductFormState) => (event: ChangeEvent<HTMLInputElement>) => {
+    setFormState((prev) => ({ ...prev, [field]: event.target.value }));
+  };
+
+  const handleSave = async () => {
+    if (!formState.name) return;
+    await onSave(product.id, {
+      name: formState.name,
+      category: formState.category,
+      unit_type: formState.unitType,
+      bulk_name: formState.bulkName || undefined,
+      units_per_bulk: formState.unitsPerBulk ? Number(formState.unitsPerBulk) : undefined,
+    });
+    setIsEditing(false);
+  };
+
+  const handleCancel = () => {
+    setIsEditing(false);
+    setFormState(getInitialFormState(product));
+  };
+
+  return (
+    <Card variant="outlined" sx={{ mb: 1 }}>
+      <CardContent>
+        {isEditing ? (
+          <Stack spacing={1}>
+            <TextField label="Name" value={formState.name} onChange={handleChange('name')} size="small" />
+            <TextField
+              select
+              label="Category"
+              value={formState.category}
+              onChange={handleChange('category')}
+              size="small"
+            >
+              {categories.map((cat) => (
+                <MenuItem key={cat} value={cat}>
+                  {cat}
+                </MenuItem>
+              ))}
+            </TextField>
+            <Stack direction="row" spacing={1}>
+              <TextField
+                label="Unit Type"
+                value={formState.unitType}
+                onChange={handleChange('unitType')}
+                size="small"
+                fullWidth
+              />
+              <TextField
+                label="Units per Bulk"
+                type="number"
+                value={formState.unitsPerBulk}
+                onChange={handleChange('unitsPerBulk')}
+                size="small"
+                fullWidth
+              />
+            </Stack>
+            <TextField
+              label="Bulk Name"
+              value={formState.bulkName}
+              onChange={handleChange('bulkName')}
+              size="small"
+            />
+          </Stack>
+        ) : (
+          <Stack direction="row" justifyContent="space-between" alignItems="center">
+            <div>
+              <Typography variant="subtitle1">{product.name}</Typography>
+              <Typography variant="caption" color="text.secondary">
+                {product.category} • {product.unit_type}
+              </Typography>
+            </div>
+            {product.bulk_name && product.units_per_bulk ? (
+              <Typography variant="caption" color="text.secondary">
+                {product.units_per_bulk} per {product.bulk_name}
+              </Typography>
+            ) : null}
+          </Stack>
+        )}
+      </CardContent>
+      <CardActions sx={{ justifyContent: 'flex-end', pt: 0 }}>
+        {isEditing ? (
+          <>
+            <IconButton aria-label="Save product" onClick={handleSave} disabled={!formState.name} color="primary">
+              <CheckIcon />
+            </IconButton>
+            <IconButton aria-label="Cancel edit" onClick={handleCancel}>
+              <CloseIcon />
+            </IconButton>
+          </>
+        ) : (
+          <>
+            <IconButton aria-label={`Edit ${product.name}`} onClick={() => setIsEditing(true)}>
+              <EditIcon />
+            </IconButton>
+            <IconButton aria-label={`Delete ${product.name}`} onClick={() => onDelete(product.id)}>
+              <DeleteIcon />
+            </IconButton>
+          </>
+        )}
+      </CardActions>
+    </Card>
+  );
+};
diff --git a/src/screens/ManageAreasScreen.tsx b/src/screens/ManageAreasScreen.tsx
index c565550..61cd5db 100644
--- a/src/screens/ManageAreasScreen.tsx
+++ b/src/screens/ManageAreasScreen.tsx
@@ -1,4 +1,18 @@
-import { Button, Container, List, ListItem, ListItemText, Stack, TextField, Typography } from '@mui/material';
+import {
+  Button,
+  Container,
+  IconButton,
+  List,
+  ListItem,
+  ListItemText,
+  Stack,
+  TextField,
+  Typography,
+} from '@mui/material';
+import DeleteIcon from '@mui/icons-material/Delete';
+import EditIcon from '@mui/icons-material/Edit';
+import CheckIcon from '@mui/icons-material/Check';
+import CloseIcon from '@mui/icons-material/Close';
 import { useState } from 'react';
 import { v4 as uuidv4 } from 'uuid';
 import { useAreas } from '../hooks/dataHooks';
@@ -8,6 +22,8 @@ export const ManageAreasScreen = () => {
   const db = useDatabase();
   const areas = useAreas();
   const [name, setName] = useState('');
+  const [editingAreaId, setEditingAreaId] = useState<string | null>(null);
+  const [editName, setEditName] = useState('');
 
   const addArea = async () => {
     if (!name) return;
@@ -15,6 +31,30 @@ export const ManageAreasScreen = () => {
     setName('');
   };
 
+  const startEditing = (areaId: string, currentName: string) => {
+    setEditingAreaId(areaId);
+    setEditName(currentName);
+  };
+
+  const saveArea = async () => {
+    if (!editingAreaId || !editName) return;
+    await db.areas.update(editingAreaId, { name: editName, updated_at: Date.now() });
+    setEditingAreaId(null);
+    setEditName('');
+  };
+
+  const cancelEditing = () => {
+    setEditingAreaId(null);
+    setEditName('');
+  };
+
+  const deleteArea = async (areaId: string) => {
+    await db.areas.delete(areaId);
+    if (editingAreaId === areaId) {
+      cancelEditing();
+    }
+  };
+
   return (
     <Container sx={{ py: 4 }}>
       <Typography variant="h5" gutterBottom>
@@ -30,7 +70,42 @@ export const ManageAreasScreen = () => {
         <List>
           {areas.map((area) => (
             <ListItem key={area.id} divider>
-              <ListItemText primary={area.name} />
+              {editingAreaId === area.id ? (
+                <Stack direction="row" alignItems="center" spacing={1} sx={{ width: '100%' }}>
+                  <TextField
+                    size="small"
+                    fullWidth
+                    value={editName}
+                    onChange={(event) => setEditName(event.target.value)}
+                  />
+                  <IconButton color="primary" onClick={saveArea} disabled={!editName} aria-label="Save area">
+                    <CheckIcon />
+                  </IconButton>
+                  <IconButton onClick={cancelEditing} aria-label="Cancel editing">
+                    <CloseIcon />
+                  </IconButton>
+                </Stack>
+              ) : (
+                <Stack direction="row" alignItems="center" spacing={1} sx={{ width: '100%' }}>
+                  <ListItemText primary={area.name} />
+                  <Stack direction="row" spacing={0.5}>
+                    <IconButton
+                      onClick={() => startEditing(area.id, area.name)}
+                      aria-label={`Edit ${area.name}`}
+                      size="small"
+                    >
+                      <EditIcon fontSize="small" />
+                    </IconButton>
+                    <IconButton
+                      onClick={() => deleteArea(area.id)}
+                      aria-label={`Delete ${area.name}`}
+                      size="small"
+                    >
+                      <DeleteIcon fontSize="small" />
+                    </IconButton>
+                  </Stack>
+                </Stack>
+              )}
             </ListItem>
           ))}
         </List>
diff --git a/src/screens/ManageProductsScreen.tsx b/src/screens/ManageProductsScreen.tsx
index 9a4eaa4..451fd15 100644
--- a/src/screens/ManageProductsScreen.tsx
+++ b/src/screens/ManageProductsScreen.tsx
@@ -50,6 +50,23 @@ export const ManageProductsScreen = () => {
     setName('');
   };
 
+  const updateProduct = async (
+    productId: string,
+    updates: {
+      name: string;
+      category: string;
+      unit_type: string;
+      bulk_name?: string;
+      units_per_bulk?: number;
+    },
+  ) => {
+    await db.products.update(productId, { ...updates, updated_at: Date.now() });
+  };
+
+  const deleteProduct = async (productId: string) => {
+    await db.products.delete(productId);
+  };
+
   return (
     <Container sx={{ py: 4 }}>
       <Typography variant="h5" gutterBottom>
@@ -85,7 +102,13 @@ export const ManageProductsScreen = () => {
           </Button>
         </Stack>
         {filtered.map((product) => (
-          <ProductRow key={product.id} product={product} />
+          <ProductRow
+            key={product.id}
+            product={product}
+            categories={categories}
+            onSave={updateProduct}
+            onDelete={deleteProduct}
+          />
         ))}
       </Stack>
     </Container>