diff --git a/docker-compose.yml b/docker-compose.yml
index 317f3c7..683b262 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -1,4 +1,3 @@
-version: '3.9'
 services:
   stockfill:
     build: .
diff --git a/package-lock.json b/package-lock.json
index 792a2fa..2f5d474 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -29,6 +29,7 @@
         "@testing-library/react": "^16.3.0",
         "@testing-library/user-event": "^14.6.1",
         "@types/node": "^24.10.1",
+        "@types/papaparse": "^5.5.0",
         "@types/react": "^19.2.7",
         "@types/react-dom": "^19.2.3",
         "@typescript-eslint/eslint-plugin": "^8.47.0",
@@ -2386,6 +2387,16 @@
         "undici-types": "~7.16.0"
       }
     },
+    "node_modules/@types/papaparse": {
+      "version": "5.5.0",
+      "resolved": "https://registry.npmjs.org/@types/papaparse/-/papaparse-5.5.0.tgz",
+      "integrity": "sha512-GVs5iMQmUr54BAZYYkByv8zPofFxmyxUpISPb2oh8sayR3+1zbxasrOvoKiHJ/nnoq/uULuPsu1Lze1EkagVFg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
     "node_modules/@types/parse-json": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.2.tgz",
diff --git a/package.json b/package.json
index cf24282..cba30c4 100644
--- a/package.json
+++ b/package.json
@@ -33,6 +33,7 @@
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",
     "@types/node": "^24.10.1",
+    "@types/papaparse": "^5.5.0",
     "@types/react": "^19.2.7",
     "@types/react-dom": "^19.2.3",
     "@typescript-eslint/eslint-plugin": "^8.47.0",
diff --git a/src/screens/ImportExportScreen.tsx b/src/screens/ImportExportScreen.tsx
index 6f9a40b..7c2f744 100644
--- a/src/screens/ImportExportScreen.tsx
+++ b/src/screens/ImportExportScreen.tsx
@@ -6,7 +6,6 @@ import {
   Checkbox,
   Divider,
   FormControlLabel,
-  Grid,
   List,
   ListItem,
   ListItemText,
@@ -107,8 +106,14 @@ export const ImportExportScreen = () => {
       <Typography variant="h4" gutterBottom>
         Import / Export Data
       </Typography>
-      <Grid container spacing={2}>
-        <Grid item xs={12} md={3}>
+      <Box
+        sx={{
+          display: 'grid',
+          gap: 2,
+          gridTemplateColumns: { xs: '1fr', md: 'repeat(12, 1fr)' },
+        }}
+      >
+        <Box sx={{ gridColumn: { xs: '1 / -1', md: 'span 3' } }}>
           <Card>
             <CardContent>
               <Typography variant="h6" gutterBottom>
@@ -123,8 +128,9 @@ export const ImportExportScreen = () => {
               </Stack>
             </CardContent>
           </Card>
-        </Grid>
-        <Grid item xs={12} md={5}>
+        </Box>
+
+        <Box sx={{ gridColumn: { xs: '1 / -1', md: 'span 5' } }}>
           <Card>
             <CardContent>
               <Typography variant="h6" gutterBottom>
@@ -146,8 +152,9 @@ export const ImportExportScreen = () => {
               </Stack>
             </CardContent>
           </Card>
-        </Grid>
-        <Grid item xs={12} md={4}>
+        </Box>
+
+        <Box sx={{ gridColumn: { xs: '1 / -1', md: 'span 4' } }}>
           <Card>
             <CardContent>
               <Typography variant="h6" gutterBottom>
@@ -176,8 +183,8 @@ export const ImportExportScreen = () => {
               </Stack>
             </CardContent>
           </Card>
-        </Grid>
-      </Grid>
+        </Box>
+      </Box>
       <Box mt={3}>
         <Card>
           <CardContent>
diff --git a/src/screens/ManageProductsScreen.tsx b/src/screens/ManageProductsScreen.tsx
index 92a38c5..827e532 100644
--- a/src/screens/ManageProductsScreen.tsx
+++ b/src/screens/ManageProductsScreen.tsx
@@ -308,7 +308,7 @@ export const ManageProductsScreen = () => {
           onClose={() => setFeedback(null)}
           anchorOrigin={{ vertical: 'top', horizontal: 'center' }}
         >
-          {feedback ? <Alert severity={feedback.severity}>{feedback.text}</Alert> : null}
+          {feedback ? <Alert severity={feedback.severity}>{feedback.text}</Alert> : undefined}
         </Snackbar>
         <Button component={RouterLink} to="/categories" variant="outlined" sx={{ alignSelf: 'flex-start' }}>
           Edit Categories
diff --git a/src/services/importExportService.test.ts b/src/services/importExportService.test.ts
index 5916a1e..d750541 100644
--- a/src/services/importExportService.test.ts
+++ b/src/services/importExportService.test.ts
@@ -43,7 +43,7 @@ const createMockDb = (data?: {
       const callback = args[args.length - 1];
       return callback();
     },
-  } as unknown as StockFillDB;
+  } as unknown as any;
 
   return db;
 };
@@ -52,9 +52,9 @@ const stubDownloads = () => {
   const anchor = { href: '', download: '', click: vi.fn() } as unknown as HTMLAnchorElement;
   const createObjectURL = vi.fn(() => 'blob:url');
   const revokeObjectURL = vi.fn();
-  // @ts-expect-error jsdom stub
+  // @ts-ignore jsdom stub
   vi.stubGlobal('document', { createElement: () => anchor });
-  // @ts-expect-error jsdom stub
+  // @ts-ignore jsdom stub
   vi.stubGlobal('URL', { createObjectURL, revokeObjectURL });
   return { anchor, createObjectURL, revokeObjectURL };
 };
@@ -118,7 +118,7 @@ describe('import/export service', () => {
 
     expect(productCsv).toContain('Clothing');
     expect(pickItemsCsv).toContain('Shirt');
-    expect(db.importExportLogs.items).toHaveLength(1);
+    expect((db.importExportLogs as any).items).toHaveLength(1);
   });
 
   it('imports products while deduplicating by name and auto-creating categories', async () => {
@@ -155,8 +155,9 @@ describe('import/export service', () => {
     );
 
     expect(result.log.summary.inserted).toBeGreaterThanOrEqual(1);
-    expect(db.products.items.find((p) => p.name === 'Existing')).toBeTruthy();
-    expect(db.products.items.find((p) => p.name === 'New Shirt')).toBeTruthy();
-    expect(db.categories.items.find((c) => c.name === 'New Category')).toBeTruthy();
+    expect((db.products as any).items.find((p: any) => p.name === 'Existing')).toBeTruthy();
+    expect((db.products as any).items.find((p: any) => p.name === 'New Shirt')).toBeTruthy();
+    expect((db.categories as any).items.find((c: any) => c.name === 'New Category')).toBeTruthy();
+
   });
 });
diff --git a/src/services/importExportService.ts b/src/services/importExportService.ts
index 47f1f70..c336ee8 100644
--- a/src/services/importExportService.ts
+++ b/src/services/importExportService.ts
@@ -50,10 +50,11 @@ const inferTypeFromName = (name: string): DataType | undefined => {
 
 const parseCsv = async (content: string) => {
   const result = Papa.parse<Record<string, string>>(content, {
-    header: true,
-    skipEmptyLines: true,
-    transformHeader: (header) => header.trim().toLowerCase(),
-  });
+  header: true,
+  skipEmptyLines: true,
+  transformHeader: (header: string) => header.trim().toLowerCase(),
+});
+
 
   if (result.errors.length > 0) {
     throw new Error(result.errors[0].message);
@@ -329,13 +330,9 @@ export const importFiles = async (
 
   try {
     await db.transaction(
-      'rw',
-      db.areas,
-      db.categories,
-      db.products,
-      db.pickLists,
-      db.pickItems,
-      async () => {
+  'rw',
+  [db.areas, db.categories, db.products, db.pickLists, db.pickItems],
+  async () => {
         const parseTimestamp = (value?: string) =>
           value && value.trim() !== '' ? Number(value) || now : now;