diff --git a/web/package.json b/web/package.json
index eae4b7e56..9646ebe58 100644
--- a/web/package.json
+++ b/web/package.json
@@ -20,6 +20,7 @@
 	"dependencies": {
 		"@hookform/resolvers": "^3.10.0",
 		"@radix-ui/react-alert-dialog": "^1.1.6",
+		"@radix-ui/react-aspect-ratio": "^1.1.7",
 		"@radix-ui/react-checkbox": "^1.1.4",
 		"@radix-ui/react-collapsible": "^1.1.3",
 		"@radix-ui/react-dialog": "^1.1.6",
diff --git a/web/pnpm-lock.yaml b/web/pnpm-lock.yaml
index d0d188254..06f39545a 100644
--- a/web/pnpm-lock.yaml
+++ b/web/pnpm-lock.yaml
@@ -14,6 +14,9 @@ importers:
       '@radix-ui/react-alert-dialog':
         specifier: ^1.1.6
         version: 1.1.6(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-aspect-ratio':
+        specifier: ^1.1.7
+        version: 1.1.7(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@radix-ui/react-checkbox':
         specifier: ^1.1.4
         version: 1.1.4(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@@ -1201,6 +1204,19 @@ packages:
       '@types/react-dom':
         optional: true
 
+  '@radix-ui/react-aspect-ratio@1.1.7':
+    resolution: {integrity: sha512-Yq6lvO9HQyPwev1onK1daHCHqXVLzPhSVjmsNjCa2Zcxy2f7uJD2itDtxknv6FzAKCwD1qQkeVDmX/cev13n/g==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/react-checkbox@1.1.4':
     resolution: {integrity: sha512-wP0CPAHq+P5I4INKe3hJrIa1WoNqqrejzW+zoU0rOvo1b9gDEJJFl2rYfO1PYJUQCc2H1WZxIJmyv9BS8i5fLw==}
     peerDependencies:
@@ -1249,6 +1265,15 @@ packages:
       '@types/react':
         optional: true
 
+  '@radix-ui/react-compose-refs@1.1.2':
+    resolution: {integrity: sha512-z4eqJvfiNnFMHIIvXP3CY57y2WJs5g2v3X0zm9mEJkrkNv4rDxu+sg9Jh8EkXyeqBkB7SOcboo9dMVqhyrACIg==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
   '@radix-ui/react-context@1.1.1':
     resolution: {integrity: sha512-UASk9zi+crv9WteK/NU4PLvOoL3OuE6BWVKNF6hPRBtYBDXQ2u5iu3O59zUlJiTVvkyuycnqrztsHVJwcK9K+Q==}
     peerDependencies:
@@ -1433,6 +1458,19 @@ packages:
       '@types/react-dom':
         optional: true
 
+  '@radix-ui/react-primitive@2.1.3':
+    resolution: {integrity: sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/react-progress@1.1.2':
     resolution: {integrity: sha512-u1IgJFQ4zNAUTjGdDL5dcl/U8ntOR6jsnhxKb5RKp5Ozwl88xKR9EqRZOe/Mk8tnx0x5tNUe2F+MzsyjqMg0MA==}
     peerDependencies:
@@ -1533,6 +1571,15 @@ packages:
       '@types/react':
         optional: true
 
+  '@radix-ui/react-slot@1.2.3':
+    resolution: {integrity: sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
   '@radix-ui/react-switch@1.1.3':
     resolution: {integrity: sha512-1nc+vjEOQkJVsJtWPSiISGT6OKm4SiOdjMo+/icLxo2G4vxz1GntC5MzfL4v8ey9OEfw787QCD1y3mUv0NiFEQ==}
     peerDependencies:
@@ -6157,6 +6204,15 @@ snapshots:
       '@types/react': 18.3.18
       '@types/react-dom': 18.3.5(@types/react@18.3.18)
 
+  '@radix-ui/react-aspect-ratio@1.1.7(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.18
+      '@types/react-dom': 18.3.5(@types/react@18.3.18)
+
   '@radix-ui/react-checkbox@1.1.4(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
       '@radix-ui/primitive': 1.1.1
@@ -6207,6 +6263,12 @@ snapshots:
     optionalDependencies:
       '@types/react': 18.3.18
 
+  '@radix-ui/react-compose-refs@1.1.2(@types/react@18.3.18)(react@18.3.1)':
+    dependencies:
+      react: 18.3.1
+    optionalDependencies:
+      '@types/react': 18.3.18
+
   '@radix-ui/react-context@1.1.1(@types/react@18.3.18)(react@18.3.1)':
     dependencies:
       react: 18.3.1
@@ -6402,6 +6464,15 @@ snapshots:
       '@types/react': 18.3.18
       '@types/react-dom': 18.3.5(@types/react@18.3.18)
 
+  '@radix-ui/react-primitive@2.1.3(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/react-slot': 1.2.3(@types/react@18.3.18)(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.18
+      '@types/react-dom': 18.3.5(@types/react@18.3.18)
+
   '@radix-ui/react-progress@1.1.2(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
       '@radix-ui/react-context': 1.1.1(@types/react@18.3.18)(react@18.3.1)
@@ -6528,6 +6599,13 @@ snapshots:
     optionalDependencies:
       '@types/react': 18.3.18
 
+  '@radix-ui/react-slot@1.2.3(@types/react@18.3.18)(react@18.3.1)':
+    dependencies:
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.3.18)(react@18.3.1)
+      react: 18.3.1
+    optionalDependencies:
+      '@types/react': 18.3.18
+
   '@radix-ui/react-switch@1.1.3(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
       '@radix-ui/primitive': 1.1.1
diff --git a/web/src/components/ui/aspect-ratio.tsx b/web/src/components/ui/aspect-ratio.tsx
new file mode 100644
index 000000000..c4abbf37f
--- /dev/null
+++ b/web/src/components/ui/aspect-ratio.tsx
@@ -0,0 +1,5 @@
+import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio"
+
+const AspectRatio = AspectRatioPrimitive.Root
+
+export { AspectRatio }
diff --git a/web/src/features/responses/components/MediaFilesCell/MediaFilesCell.tsx b/web/src/features/responses/components/MediaFilesCell/MediaFilesCell.tsx
index 1c8df2e4a..aaef00bac 100644
--- a/web/src/features/responses/components/MediaFilesCell/MediaFilesCell.tsx
+++ b/web/src/features/responses/components/MediaFilesCell/MediaFilesCell.tsx
@@ -1,39 +1,165 @@
-import type { FunctionComponent } from '@/common/types';
+import { AspectRatio } from '@/components/ui/aspect-ratio';
 import { Button } from '@/components/ui/button';
 import { Dialog, DialogContent, DialogTrigger } from '@/components/ui/dialog';
-import { FilmIcon, MusicalNoteIcon, PaperClipIcon, PhotoIcon } from '@heroicons/react/24/outline';
+import { cn, getFileCategory } from '@/lib/utils';
+import { ArrowDownTrayIcon, DocumentIcon, FilmIcon, MusicalNoteIcon, PhotoIcon } from '@heroicons/react/24/outline';
 import { useMemo } from 'react';
 import ReactPlayer from 'react-player';
 import { Attachment } from '../../models/common';
-import { getFileCategory } from '@/lib/utils';
 
 export interface MediaFilesCellProps {
   attachment: Attachment;
+  className?: string;
 }
 
-export function MediaFilesCell({ attachment }: MediaFilesCellProps): FunctionComponent {
+export default function MediaFilesCell({ attachment, className }: MediaFilesCellProps) {
   const attachmentType = useMemo(() => {
-    return getFileCategory(attachment.mimeType)
+    return getFileCategory(attachment.mimeType);
   }, [attachment.mimeType]);
 
+  // const handleDownload = async (e: React.MouseEvent) => {
+  //   e.stopPropagation();
+  //   try {
+  //     // throw new Error("uncomment this line to mock failure of API");
+  //     const response = await axios.get(attachment.presignedUrl, {
+  //       responseType: 'blob',
+  //       headers: {
+  //         'Access-Control-Allow-Origin': '*',
+  //       },
+  //     });
+
+  //     // Create download link
+  //     const url = window.URL.createObjectURL(new Blob([response.data]));
+  //     const link = document.createElement('a');
+  //     link.href = url;
+  //     link.download = attachment.fileName;
+  //     document.body.appendChild(link);
+  //     link.click();
+  //     document.body.removeChild(link);
+  //     window.URL.revokeObjectURL(url);
+  //   } catch (error) {
+  //     console.error('Download failed:', error);
+  //   }
+  // };
+
+  const renderPreview = (isInDialog = false) => {
+    const baseClasses = 'object-cover rounded-md transition-opacity duration-200';
+    const dialogClasses = isInDialog ? 'cursor-default' : 'cursor-zoom-in hover:opacity-90';
+
+    switch (attachmentType) {
+      case 'image':
+        return (
+          <img
+            alt={attachment.fileName}
+            src={attachment.presignedUrl}
+            className={cn(baseClasses, dialogClasses)}
+            loading='lazy'
+            style={{ height: '100%', width: '100%' }}
+          />
+        );
+
+      case 'video':
+        return (
+          <div className={cn('relative bg-black rounded-md overflow-hidden', dialogClasses)}>
+            <ReactPlayer
+              url={attachment.presignedUrl}
+              controls={true}
+              width='100%'
+              height='100%'
+              playing={isInDialog}
+            />
+            {!isInDialog && (
+              <div className='absolute inset-0 flex items-center justify-center bg-black bg-opacity-30'>
+                <FilmIcon className='w-8 h-8 text-white' />
+              </div>
+            )}
+          </div>
+        );
+
+      case 'audio':
+        return (
+          <div className={cn('flex items-center justify-center p-4 border rounded-md bg-gray-50', dialogClasses)}>
+            <MusicalNoteIcon className='w-8 h-8 mr-3 text-gray-600' />
+            <div className='flex-1'>
+              <ReactPlayer url={attachment.presignedUrl} controls={true} width='100%' height='50px' />
+            </div>
+          </div>
+        );
+
+      default:
+        return (
+          <div
+            className={cn(
+              'flex flex-col items-center justify-center p-6 border-2 border-dashed border-gray-300 rounded-md bg-gray-50 hover:bg-gray-100 transition-colors',
+              dialogClasses
+            )}>
+            <DocumentIcon className='w-12 h-12 mb-2 text-gray-500' />
+            <span className='text-sm font-medium text-gray-700 text-center break-all'>{attachment.fileName}</span>
+            <span className='text-xs text-gray-500 mt-1'>{attachment.mimeType}</span>
+          </div>
+        );
+    }
+  };
+
+  const getFileIcon = () => {
+    switch (attachmentType) {
+      case 'image':
+        return <PhotoIcon className='w-4 h-4' />;
+      case 'video':
+        return <FilmIcon className='w-4 h-4' />;
+      case 'audio':
+        return <MusicalNoteIcon className='w-4 h-4' />;
+      default:
+        return <DocumentIcon className='w-4 h-4' />;
+    }
+  };
+
   return (
-    <div className='flex flex-wrap gap-2'>
-      <Dialog>
-        <DialogTrigger asChild>
-          <Button type='button' variant='link' className='text-purple-900 hover:text-purple-600'>
-            {attachmentType === 'image' ? <PhotoIcon className='w-10 h-10' />
-              : attachmentType === 'video' ? <FilmIcon className='w-10 h-10' />
-                : attachmentType === 'audio' ? <MusicalNoteIcon className='w-10 h-10' /> : <PaperClipIcon className='w-10 h-10' />}
-          </Button>
-        </DialogTrigger>
-        <DialogContent className='max-w-5xl'>
-          <div className='flex justify-center'>
-            {attachmentType === 'image'
-              ? <img alt={attachment.fileName} src={attachment.presignedUrl} />
-              : <ReactPlayer alt={attachment.fileName} url={attachment.presignedUrl} controls={true}/>}
+    <Dialog>
+      <DialogTrigger asChild>
+        <div className={cn('group relative', className)}>
+          <AspectRatio ratio={16 / 9}>{renderPreview(false)}</AspectRatio>
+
+          {/* Overlay on hover for non-dialog state */}
+          {attachmentType !== 'audio' && (
+            <div className='absolute inset-0 flex items-center justify-center bg-black bg-opacity-0 group-hover:bg-opacity-10 transition-all rounded-md'>
+              <div className='opacity-0 group-hover:opacity-100 transition-opacity'>{getFileIcon()}</div>
+            </div>
+          )}
+        </div>
+      </DialogTrigger>
+
+      <DialogContent className='max-w-[90vw] max-h-[90vh] w-auto p-0 border-0 bg-transparent'>
+        <div className='flex flex-col items-center justify-center w-full h-full'>
+          <div className='relative bg-white rounded-lg overflow-hidden shadow-2xl w-full max-w-4xl'>
+            {/* Preview content */}
+            <div className='flex items-center justify-center w-full h-full bg-gray-100 p-8 max-h-[70vh] overflow-auto'>
+              {renderPreview(true)}
+            </div>
+
+            {/* Close button footer */}
+            <div className='flex items-center justify-center p-4 bg-white border-t'>
+              <div className='flex-1 min-w-0'>
+                <p className='text-lg font-semibold text-gray-900 truncate'>{attachment.fileName}</p>
+                <p className='text-sm text-gray-500 capitalize mt-1'>
+                  {attachmentType} • {attachment.mimeType}
+                </p>
+              </div>
+
+              <Button
+                // onClick={handleDownload}
+                variant='outline'
+                size='sm'
+                className='flex items-center gap-2 shrink-0 ml-4'>
+                <ArrowDownTrayIcon className='w-4 h-4' />
+                <a href={attachment.presignedUrl} target='_blank' rel='noopener noreferrer'>
+                  Download
+                </a>
+              </Button>
+            </div>
           </div>
-        </DialogContent>
-      </Dialog>
-    </div>
+        </div>
+      </DialogContent>
+    </Dialog>
   );
 }
diff --git a/web/src/features/responses/components/ResponseExtraDataTable/ResponseExtraDataTable.tsx b/web/src/features/responses/components/ResponseExtraDataTable/ResponseExtraDataTable.tsx
index 762a09f3d..482209972 100644
--- a/web/src/features/responses/components/ResponseExtraDataTable/ResponseExtraDataTable.tsx
+++ b/web/src/features/responses/components/ResponseExtraDataTable/ResponseExtraDataTable.tsx
@@ -26,7 +26,7 @@ export function ResponseExtraDataTable({ columns, data }: ResponseExtraDataTable
             <TableRow key={headerGroup.id}>
               {headerGroup.headers.map((header) => {
                 return (
-                  <TableHead key={header.id} style={{ width: header.getSize() }}>
+                  <TableHead key={header.id} style={{ width: `${header.getSize()}px` }}>
                     {header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}
                   </TableHead>
                 );
diff --git a/web/src/features/responses/utils/column-defs.tsx b/web/src/features/responses/utils/column-defs.tsx
index 13ea3d95c..5a4f44f4c 100644
--- a/web/src/features/responses/utils/column-defs.tsx
+++ b/web/src/features/responses/utils/column-defs.tsx
@@ -6,10 +6,13 @@ import { ArrowTopRightOnSquareIcon, ChevronRightIcon } from '@heroicons/react/24
 import { Link } from '@tanstack/react-router';
 import { format } from 'date-fns';
 
-import { MediaFilesCell } from '../components/MediaFilesCell/MediaFilesCell';
-
 import { DateTimeFormat } from '@/common/formats';
-import { CitizenReportFollowUpStatus, FormSubmissionFollowUpStatus, IncidentReportFollowUpStatus, QuickReportFollowUpStatus } from '@/common/types';
+import {
+  CitizenReportFollowUpStatus,
+  FormSubmissionFollowUpStatus,
+  IncidentReportFollowUpStatus,
+  QuickReportFollowUpStatus,
+} from '@/common/types';
 import { Button } from '@/components/ui/button';
 import type { RowData } from '@/components/ui/DataTable/DataTable';
 import type { ColumnDef } from '@tanstack/react-table';
@@ -24,18 +27,19 @@ import { IncidentReportByEntry, IncidentReportByForm, IncidentReportByObserver }
 import { type QuickReport } from '../models/quick-report';
 import type { QuestionExtraData } from '../types';
 import { mapIncidentCategory, mapIncidentReportLocationType, mapQuickReportLocationType } from './helpers';
+import MediaFilesCell from '../components/MediaFilesCell/MediaFilesCell';
 
 export const formSubmissionsByEntryColumnDefs: ColumnDef<FormSubmissionByEntry & RowData>[] = [
   {
     header: ({ column }) => <DataTableColumnHeader title='Entry ID' column={column} />,
-    accessorFn: (row)=> row.submissionId,
+    accessorFn: (row) => row.submissionId,
     id: 'submissionId',
     enableSorting: true,
     enableGlobalFilter: true,
   },
   {
     header: ({ column }) => <DataTableColumnHeader title='Time submitted' column={column} />,
-    accessorFn: (row)=> row.timeSubmitted,
+    accessorFn: (row) => row.timeSubmitted,
     id: 'timeSubmitted',
     enableSorting: true,
     enableGlobalFilter: true,
@@ -43,21 +47,21 @@ export const formSubmissionsByEntryColumnDefs: ColumnDef<FormSubmissionByEntry &
   },
   {
     header: ({ column }) => <DataTableColumnHeader title='Form code' column={column} />,
-    accessorFn: (row)=> row.formCode,
+    accessorFn: (row) => row.formCode,
     id: 'formCode',
     enableSorting: true,
     enableGlobalFilter: true,
   },
   {
     header: ({ column }) => <DataTableColumnHeader title='Form type' column={column} />,
-    accessorFn: (row)=> row.formType,
+    accessorFn: (row) => row.formType,
     id: 'formType',
     enableSorting: true,
     enableGlobalFilter: true,
   },
   {
     header: ({ column }) => <DataTableColumnHeader title='Form name' column={column} />,
-    accessorFn:(row)=> row.formName,
+    accessorFn: (row) => row.formName,
     id: 'formName',
     enableSorting: true,
     enableGlobalFilter: true,
@@ -65,7 +69,7 @@ export const formSubmissionsByEntryColumnDefs: ColumnDef<FormSubmissionByEntry &
   },
   {
     header: ({ column }) => <DataTableColumnHeader title='Location - L1' column={column} />,
-    accessorFn: (row)=> row.level1,
+    accessorFn: (row) => row.level1,
     id: 'level1',
     enableSorting: true,
     enableGlobalFilter: true,
@@ -73,7 +77,7 @@ export const formSubmissionsByEntryColumnDefs: ColumnDef<FormSubmissionByEntry &
   },
   {
     header: ({ column }) => <DataTableColumnHeader title='Location - L2' column={column} />,
-    accessorFn: (row)=> row.level2,
+    accessorFn: (row) => row.level2,
     id: 'level2',
     enableSorting: true,
     enableGlobalFilter: true,
@@ -81,7 +85,7 @@ export const formSubmissionsByEntryColumnDefs: ColumnDef<FormSubmissionByEntry &
   },
   {
     header: ({ column }) => <DataTableColumnHeader title='Location - L3' column={column} />,
-    accessorFn: (row)=> row.level3,
+    accessorFn: (row) => row.level3,
     id: 'level3',
     enableSorting: true,
     enableGlobalFilter: true,
@@ -89,7 +93,7 @@ export const formSubmissionsByEntryColumnDefs: ColumnDef<FormSubmissionByEntry &
   },
   {
     header: ({ column }) => <DataTableColumnHeader title='Location - L4' column={column} />,
-    accessorFn: (row)=> row.level4,
+    accessorFn: (row) => row.level4,
     id: 'level4',
     enableSorting: true,
     enableGlobalFilter: true,
@@ -97,7 +101,7 @@ export const formSubmissionsByEntryColumnDefs: ColumnDef<FormSubmissionByEntry &
   },
   {
     header: ({ column }) => <DataTableColumnHeader title='Location - L5' column={column} />,
-    accessorFn: (row)=> row.level5,
+    accessorFn: (row) => row.level5,
     id: 'level5',
     enableSorting: true,
     enableGlobalFilter: true,
@@ -105,14 +109,14 @@ export const formSubmissionsByEntryColumnDefs: ColumnDef<FormSubmissionByEntry &
   },
   {
     header: ({ column }) => <DataTableColumnHeader title='Station number' column={column} />,
-    accessorFn: (row)=> row.number,
+    accessorFn: (row) => row.number,
     id: 'number',
     enableSorting: true,
     enableGlobalFilter: true,
   },
   {
     header: ({ column }) => <DataTableColumnHeader title='Observer' column={column} />,
-    accessorFn: (row)=> row.observerName,
+    accessorFn: (row) => row.observerName,
     id: 'observerName',
     enableSorting: true,
     enableGlobalFilter: true,
@@ -120,7 +124,7 @@ export const formSubmissionsByEntryColumnDefs: ColumnDef<FormSubmissionByEntry &
   },
   {
     header: ({ column }) => <DataTableColumnHeader title='NGO' column={column} />,
-    accessorFn: (row)=> row.ngoName,
+    accessorFn: (row) => row.ngoName,
     id: 'ngoName',
     enableSorting: false,
     enableGlobalFilter: true,
@@ -128,7 +132,7 @@ export const formSubmissionsByEntryColumnDefs: ColumnDef<FormSubmissionByEntry &
   },
   {
     header: ({ column }) => <DataTableColumnHeader title='Observer tags' column={column} />,
-    accessorFn: (row)=> row.tags,
+    accessorFn: (row) => row.tags,
     id: 'tags',
     enableSorting: true,
     enableGlobalFilter: true,
@@ -140,35 +144,35 @@ export const formSubmissionsByEntryColumnDefs: ColumnDef<FormSubmissionByEntry &
   },
   {
     header: ({ column }) => <DataTableColumnHeader title='Questions answered' column={column} />,
-    accessorFn: (row)=> row.numberOfQuestionsAnswered,
+    accessorFn: (row) => row.numberOfQuestionsAnswered,
     id: 'numberOfQuestionsAnswered',
     enableSorting: true,
     enableGlobalFilter: true,
   },
   {
     header: ({ column }) => <DataTableColumnHeader title='Flagged answers' column={column} />,
-    accessorFn: (row)=> row.numberOfFlaggedAnswers,
+    accessorFn: (row) => row.numberOfFlaggedAnswers,
     id: 'numberOfFlaggedAnswers',
     enableSorting: true,
     enableGlobalFilter: true,
   },
   {
     header: ({ column }) => <DataTableColumnHeader title='Question notes' column={column} />,
-    accessorFn: (row)=> row.notesCount,
+    accessorFn: (row) => row.notesCount,
     id: 'notesCount',
     enableSorting: true,
     enableGlobalFilter: true,
   },
   {
     header: ({ column }) => <DataTableColumnHeader title='Media files' column={column} />,
-    accessorFn: (row)=> row.mediaFilesCount,
+    accessorFn: (row) => row.mediaFilesCount,
     id: 'mediaFilesCount',
     enableSorting: true,
     enableGlobalFilter: true,
   },
   {
     header: ({ column }) => <DataTableColumnHeader title='Follow-up status' column={column} />,
-    accessorFn: (row)=> row.followUpStatus,
+    accessorFn: (row) => row.followUpStatus,
     id: 'followUpStatus',
     enableSorting: false,
     enableGlobalFilter: true,
@@ -182,8 +186,8 @@ export const formSubmissionsByEntryColumnDefs: ColumnDef<FormSubmissionByEntry &
         {row.original.followUpStatus === FormSubmissionFollowUpStatus.NotApplicable
           ? 'Not Applicable'
           : row.original.followUpStatus === FormSubmissionFollowUpStatus.NeedsFollowUp
-          ? 'Needs follow-up'
-          : 'Resolved'}
+            ? 'Needs follow-up'
+            : 'Resolved'}
       </Badge>
     ),
   },
@@ -326,8 +330,8 @@ export const observerFormSubmissionsColumnDefs: ColumnDef<FormSubmissionByEntry
         {row.original.followUpStatus === FormSubmissionFollowUpStatus.NotApplicable
           ? 'Not Applicable'
           : row.original.followUpStatus === FormSubmissionFollowUpStatus.NeedsFollowUp
-          ? 'Needs follow-up'
-          : 'Resolved'}
+            ? 'Needs follow-up'
+            : 'Resolved'}
       </Badge>
     ),
   },
@@ -351,7 +355,7 @@ export const observerFormSubmissionsColumnDefs: ColumnDef<FormSubmissionByEntry
 export const formSubmissionsByObserverColumnDefs: ColumnDef<FormSubmissionByObserver & RowData>[] = [
   {
     header: ({ column }) => <DataTableColumnHeader title='Observer name' column={column} />,
-    accessorFn: (row)=> row.observerName,
+    accessorFn: (row) => row.observerName,
     id: 'observerName',
     enableSorting: true,
     enableGlobalFilter: true,
@@ -359,14 +363,14 @@ export const formSubmissionsByObserverColumnDefs: ColumnDef<FormSubmissionByObse
   },
   {
     header: ({ column }) => <DataTableColumnHeader title='Observer contact' column={column} />,
-    accessorFn: (row)=> row.phoneNumber,
+    accessorFn: (row) => row.phoneNumber,
     id: 'phoneNumber',
     enableSorting: true,
     enableGlobalFilter: true,
   },
   {
     header: ({ column }) => <DataTableColumnHeader title='NGO' column={column} />,
-    accessorFn: (row)=> row.ngoName,
+    accessorFn: (row) => row.ngoName,
     id: 'ngoName',
     enableSorting: false,
     enableGlobalFilter: true,
@@ -374,7 +378,7 @@ export const formSubmissionsByObserverColumnDefs: ColumnDef<FormSubmissionByObse
   },
   {
     header: ({ column }) => <DataTableColumnHeader title='Observer tags' column={column} />,
-    accessorFn: (row)=> row.tags,
+    accessorFn: (row) => row.tags,
     id: 'tags',
     enableSorting: true,
     enableGlobalFilter: true,
@@ -386,28 +390,28 @@ export const formSubmissionsByObserverColumnDefs: ColumnDef<FormSubmissionByObse
   },
   {
     header: ({ column }) => <DataTableColumnHeader title='Locations' column={column} />,
-    accessorFn: (row)=> row.numberOfLocations,
+    accessorFn: (row) => row.numberOfLocations,
     id: 'numberOfLocations',
     enableSorting: true,
     enableGlobalFilter: true,
   },
   {
     header: ({ column }) => <DataTableColumnHeader title='Forms' column={column} />,
-    accessorFn: (row)=> row.numberOfFormsSubmitted,
+    accessorFn: (row) => row.numberOfFormsSubmitted,
     id: 'numberOfFormsSubmitted',
     enableSorting: true,
     enableGlobalFilter: true,
   },
   {
     header: ({ column }) => <DataTableColumnHeader title='Flagged answers' column={column} />,
-    accessorFn: (row)=> row.numberOfFlaggedAnswers,
+    accessorFn: (row) => row.numberOfFlaggedAnswers,
     id: 'numberOfFlaggedAnswers',
     enableSorting: true,
     enableGlobalFilter: true,
   },
   {
     header: ({ column }) => <DataTableColumnHeader title='Follow-up status' column={column} />,
-    accessorFn: (row)=> row.followUpStatus,
+    accessorFn: (row) => row.followUpStatus,
     id: 'followUpStatus',
     enableSorting: false,
     enableGlobalFilter: true,
@@ -447,21 +451,21 @@ export const formSubmissionsByObserverColumnDefs: ColumnDef<FormSubmissionByObse
 export const formSubmissionsByFormColumnDefs: ColumnDef<FormSubmissionByForm & RowData>[] = [
   {
     header: ({ column }) => <DataTableColumnHeader title='Form code' column={column} />,
-    accessorFn: (row)=> row.formCode,
+    accessorFn: (row) => row.formCode,
     id: 'formCode',
     enableSorting: true,
     enableGlobalFilter: true,
   },
   {
     header: ({ column }) => <DataTableColumnHeader title='Form type' column={column} />,
-    accessorFn: (row)=> row.formType,
+    accessorFn: (row) => row.formType,
     id: 'formType',
     enableSorting: true,
     enableGlobalFilter: true,
   },
   {
     header: ({ column }) => <DataTableColumnHeader title='Form name' column={column} />,
-    accessorFn:(row)=> row.formName,
+    accessorFn: (row) => row.formName,
     id: 'formName',
     enableSorting: true,
     enableGlobalFilter: true,
@@ -469,28 +473,28 @@ export const formSubmissionsByFormColumnDefs: ColumnDef<FormSubmissionByForm & R
   },
   {
     header: ({ column }) => <DataTableColumnHeader title='Responses' column={column} />,
-    accessorFn: (row)=> row.numberOfSubmissions,
+    accessorFn: (row) => row.numberOfSubmissions,
     id: 'numberOfSubmissions',
     enableSorting: true,
     enableGlobalFilter: true,
   },
   {
     header: ({ column }) => <DataTableColumnHeader title='Flagged answers' column={column} />,
-    accessorFn: (row)=> row.numberOfFlaggedAnswers,
+    accessorFn: (row) => row.numberOfFlaggedAnswers,
     id: 'numberOfFlaggedAnswers',
     enableSorting: true,
     enableGlobalFilter: true,
   },
   {
     header: ({ column }) => <DataTableColumnHeader title='Question notes' column={column} />,
-    accessorFn: (row)=> row.numberOfNotes,
+    accessorFn: (row) => row.numberOfNotes,
     id: 'numberOfNotes',
     enableSorting: true,
     enableGlobalFilter: true,
   },
   {
     header: ({ column }) => <DataTableColumnHeader title='Media files' column={column} />,
-    accessorFn: (row)=> row.numberOfMediaFiles,
+    accessorFn: (row) => row.numberOfMediaFiles,
     id: 'numberOfMediaFiles',
     enableSorting: true,
     enableGlobalFilter: true,
@@ -514,20 +518,26 @@ export const formSubmissionsByFormColumnDefs: ColumnDef<FormSubmissionByForm & R
 
 export const answerExtraInfoColumnDefs: ColumnDef<QuestionExtraData>[] = [
   {
-    header: ({ column }) => <DataTableColumnHeader title='Type' column={column} />,
-    accessorFn: (row)=> row.type,
+    header: ({ column }) => <DataTableColumnHeader title='Type' column={column} className='w-[70px]' />,
+    accessorFn: (row) => row.type,
     id: 'type',
     enableSorting: true,
     enableGlobalFilter: true,
-    cell: ({ row }) => <div>{row.original.type}</div>,
+    cell: ({ row }) => <div className='w-[80px]'>{row.original.type}</div>,
+    size: 80, // fixed width in px
+    minSize: 60, // minimum allowed width
+    maxSize: 120, // optional max width
   },
   {
-    header: ({ column }) => <DataTableColumnHeader title='Time submitted' column={column} />,
-    accessorFn: (row)=> row.timeSubmitted,
+    header: ({ column }) => <DataTableColumnHeader title='Time submitted' className='w-[70px]' column={column} />,
+    accessorFn: (row) => row.timeSubmitted,
     id: 'timeSubmitted',
     enableSorting: true,
     enableGlobalFilter: true,
-    cell: ({ row }) => <div>{format(row.original.timeSubmitted, DateTimeFormat)}</div>,
+    cell: ({ row }) => <div className='w-[80px]'>{format(row.original.timeSubmitted, DateTimeFormat)}</div>,
+    size: 80, // fixed width in px
+    minSize: 60, // minimum allowed width
+    maxSize: 120, // optional max width
   },
   {
     header: ({ column }) => <DataTableColumnHeader title='Preview' column={column} />,
@@ -543,7 +553,7 @@ export const answerExtraInfoColumnDefs: ColumnDef<QuestionExtraData>[] = [
 export const aggregatedAnswerExtraInfoColumnDefs: ColumnDef<QuestionExtraData>[] = [
   {
     header: ({ column }) => <DataTableColumnHeader title='SubmissionID' column={column} className='w-[100px]' />,
-    accessorFn: (row)=> row.submissionId,
+    accessorFn: (row) => row.submissionId,
     id: 'submissionId',
     enableSorting: true,
     enableGlobalFilter: true,
@@ -577,7 +587,7 @@ export const aggregatedAnswerExtraInfoColumnDefs: ColumnDef<QuestionExtraData>[]
   },
   {
     header: ({ column }) => <DataTableColumnHeader title='Type' column={column} />,
-    accessorFn: (row)=> row.type,
+    accessorFn: (row) => row.type,
     id: 'type',
     enableSorting: true,
     enableGlobalFilter: true,
@@ -585,7 +595,7 @@ export const aggregatedAnswerExtraInfoColumnDefs: ColumnDef<QuestionExtraData>[]
   },
   {
     header: ({ column }) => <DataTableColumnHeader title='Time submitted' column={column} />,
-    accessorFn: (row)=> row.timeSubmitted,
+    accessorFn: (row) => row.timeSubmitted,
     id: 'timeSubmitted',
     enableSorting: true,
     enableGlobalFilter: true,
@@ -630,7 +640,7 @@ export const quickReportsColumnDefs: ColumnDef<QuickReport>[] = [
   },
   {
     header: ({ column }) => <DataTableColumnHeader title='NGO' column={column} />,
-    accessorFn: (row)=> row.ngoName,
+    accessorFn: (row) => row.ngoName,
     id: 'ngoName',
     enableSorting: false,
     enableGlobalFilter: true,
@@ -750,8 +760,8 @@ export const quickReportsColumnDefs: ColumnDef<QuickReport>[] = [
         {row.original.followUpStatus === QuickReportFollowUpStatus.NotApplicable
           ? 'Not Applicable'
           : row.original.followUpStatus === QuickReportFollowUpStatus.NeedsFollowUp
-          ? 'Needs follow-up'
-          : 'Resolved'}
+            ? 'Needs follow-up'
+            : 'Resolved'}
       </Badge>
     ),
   },
@@ -885,8 +895,8 @@ export const observerQuickReportsColumnDefs: ColumnDef<QuickReport>[] = [
         {row.original.followUpStatus === QuickReportFollowUpStatus.NotApplicable
           ? 'Not Applicable'
           : row.original.followUpStatus === QuickReportFollowUpStatus.NeedsFollowUp
-          ? 'Needs follow-up'
-          : 'Resolved'}
+            ? 'Needs follow-up'
+            : 'Resolved'}
       </Badge>
     ),
   },
@@ -910,7 +920,7 @@ export const observerQuickReportsColumnDefs: ColumnDef<QuickReport>[] = [
 export const citizenReportsByEntryColumnDefs: ColumnDef<CitizenReportByEntry & RowData>[] = [
   {
     header: ({ column }) => <DataTableColumnHeader title='Time submitted' column={column} />,
-    accessorFn:(row)=> row.timeSubmitted,
+    accessorFn: (row) => row.timeSubmitted,
     id: 'timeSubmitted',
     enableSorting: true,
     enableGlobalFilter: true,
@@ -918,85 +928,87 @@ export const citizenReportsByEntryColumnDefs: ColumnDef<CitizenReportByEntry & R
   },
   {
     header: ({ column }) => <DataTableColumnHeader title='Form code' column={column} />,
-    accessorFn:(row)=> row.formCode,
+    accessorFn: (row) => row.formCode,
     id: 'formCode',
     enableSorting: true,
     enableGlobalFilter: true,
   },
   {
     header: ({ column }) => <DataTableColumnHeader title='Form name' column={column} />,
-    accessorFn:(row)=> row.formName,
+    accessorFn: (row) => row.formName,
     id: 'formName',
     enableSorting: true,
     enableGlobalFilter: true,
-    cell: ({ row }) => <div className='break-words'>{row.original.formName[row.original.formDefaultLanguage] ?? '-'}</div>,
+    cell: ({ row }) => (
+      <div className='break-words'>{row.original.formName[row.original.formDefaultLanguage] ?? '-'}</div>
+    ),
   },
   {
     header: ({ column }) => <DataTableColumnHeader title='Questions answered' column={column} />,
-    accessorFn:(row)=> row.numberOfQuestionsAnswered,
+    accessorFn: (row) => row.numberOfQuestionsAnswered,
     id: 'numberOfQuestionsAnswered',
     enableSorting: true,
     enableGlobalFilter: true,
   },
   {
     header: ({ column }) => <DataTableColumnHeader title='Flagged answers' column={column} />,
-    accessorFn:(row)=> row.numberOfFlaggedAnswers,
+    accessorFn: (row) => row.numberOfFlaggedAnswers,
     id: 'numberOfFlaggedAnswers',
     enableSorting: true,
     enableGlobalFilter: true,
   },
   {
     header: ({ column }) => <DataTableColumnHeader title='Level 1' column={column} />,
-    accessorFn:(row)=> row.level1,
+    accessorFn: (row) => row.level1,
     id: 'level1',
     enableSorting: true,
     enableGlobalFilter: true,
   },
   {
     header: ({ column }) => <DataTableColumnHeader title='Level 2' column={column} />,
-    accessorFn:(row)=> row.level2,
+    accessorFn: (row) => row.level2,
     id: 'level2',
     enableSorting: true,
     enableGlobalFilter: true,
   },
   {
     header: ({ column }) => <DataTableColumnHeader title='Level 3' column={column} />,
-    accessorFn:(row)=> row.level3,
+    accessorFn: (row) => row.level3,
     id: 'level3',
     enableSorting: true,
     enableGlobalFilter: true,
   },
   {
     header: ({ column }) => <DataTableColumnHeader title='Level 4' column={column} />,
-    accessorFn:(row)=> row.level4,
+    accessorFn: (row) => row.level4,
     id: 'level4',
     enableSorting: true,
     enableGlobalFilter: true,
   },
   {
     header: ({ column }) => <DataTableColumnHeader title='Level 5' column={column} />,
-    accessorFn:(row)=> row.level5,
+    accessorFn: (row) => row.level5,
     id: 'level5',
     enableSorting: true,
     enableGlobalFilter: true,
   },
   {
     header: ({ column }) => <DataTableColumnHeader title='Question notes' column={column} />,
-    accessorFn:(row)=> row.notesCount,
+    accessorFn: (row) => row.notesCount,
     id: 'notesCount',
     enableSorting: true,
     enableGlobalFilter: true,
   },
   {
     header: ({ column }) => <DataTableColumnHeader title='Media files' column={column} />,
-    accessorFn:(row)=> row.mediaFilesCount,
+    accessorFn: (row) => row.mediaFilesCount,
     id: 'mediaFilesCount',
     enableSorting: true,
     enableGlobalFilter: true,
   },
   {
     header: ({ column }) => <DataTableColumnHeader title='Follow-up status' column={column} />,
-    accessorFn:(row)=> row.followUpStatus,
+    accessorFn: (row) => row.followUpStatus,
     id: 'followUpStatus',
     enableSorting: false,
     enableGlobalFilter: true,
@@ -1010,8 +1022,8 @@ export const citizenReportsByEntryColumnDefs: ColumnDef<CitizenReportByEntry & R
         {row.original.followUpStatus === CitizenReportFollowUpStatus.NotApplicable
           ? 'Not Applicable'
           : row.original.followUpStatus === CitizenReportFollowUpStatus.NeedsFollowUp
-          ? 'Needs follow-up'
-          : 'Resolved'}
+            ? 'Needs follow-up'
+            : 'Resolved'}
       </Badge>
     ),
   },
@@ -1035,14 +1047,14 @@ export const citizenReportsByEntryColumnDefs: ColumnDef<CitizenReportByEntry & R
 export const citizenReportsAggregatedByFormColumnDefs: ColumnDef<CitizenReportsAggregatedByForm & RowData>[] = [
   {
     header: ({ column }) => <DataTableColumnHeader title='Form code' column={column} />,
-    accessorFn:(row)=> row.formCode,
+    accessorFn: (row) => row.formCode,
     id: 'formCode',
     enableSorting: true,
     enableGlobalFilter: true,
   },
   {
     header: ({ column }) => <DataTableColumnHeader title='Form name' column={column} />,
-    accessorFn:(row)=> row.formName,
+    accessorFn: (row) => row.formName,
     id: 'formName',
     enableSorting: true,
     enableGlobalFilter: true,
@@ -1051,28 +1063,28 @@ export const citizenReportsAggregatedByFormColumnDefs: ColumnDef<CitizenReportsA
 
   {
     header: ({ column }) => <DataTableColumnHeader title='Responses' column={column} />,
-    accessorFn:(row)=> row.numberOfSubmissions,
+    accessorFn: (row) => row.numberOfSubmissions,
     id: 'numberOfSubmissions',
     enableSorting: true,
     enableGlobalFilter: true,
   },
   {
     header: ({ column }) => <DataTableColumnHeader title='Flagged answers' column={column} />,
-    accessorFn:(row)=> row.numberOfFlaggedAnswers,
+    accessorFn: (row) => row.numberOfFlaggedAnswers,
     id: 'numberOfFlaggedAnswers',
     enableSorting: true,
     enableGlobalFilter: true,
   },
   {
     header: ({ column }) => <DataTableColumnHeader title='Question notes' column={column} />,
-    accessorFn:(row)=> row.numberOfNotes,
+    accessorFn: (row) => row.numberOfNotes,
     id: 'numberOfNotes',
     enableSorting: true,
     enableGlobalFilter: true,
   },
   {
     header: ({ column }) => <DataTableColumnHeader title='Media files' column={column} />,
-    accessorFn:(row)=> row.numberOfMediaFiles,
+    accessorFn: (row) => row.numberOfMediaFiles,
     id: 'numberOfMediaFiles',
     enableSorting: true,
     enableGlobalFilter: true,
@@ -1097,14 +1109,14 @@ export const citizenReportsAggregatedByFormColumnDefs: ColumnDef<CitizenReportsA
 export const incidentReportsByEntryColumnDefs: ColumnDef<IncidentReportByEntry & RowData>[] = [
   {
     header: ({ column }) => <DataTableColumnHeader title='Entry ID' column={column} />,
-    accessorFn:(row)=> row.incidentReportId,
+    accessorFn: (row) => row.incidentReportId,
     id: 'incidentReportId',
     enableSorting: true,
     enableGlobalFilter: true,
   },
   {
     header: ({ column }) => <DataTableColumnHeader title='Time submitted' column={column} />,
-    accessorFn:(row)=> row.timeSubmitted,
+    accessorFn: (row) => row.timeSubmitted,
     id: 'timeSubmitted',
     enableSorting: true,
     enableGlobalFilter: true,
@@ -1113,22 +1125,24 @@ export const incidentReportsByEntryColumnDefs: ColumnDef<IncidentReportByEntry &
 
   {
     header: ({ column }) => <DataTableColumnHeader title='Form code' column={column} />,
-    accessorFn:(row)=> row.formCode,
+    accessorFn: (row) => row.formCode,
     id: 'formCode',
     enableSorting: true,
     enableGlobalFilter: true,
   },
   {
     header: ({ column }) => <DataTableColumnHeader title='Form name' column={column} />,
-    accessorFn:(row)=> row.formName,
+    accessorFn: (row) => row.formName,
     id: 'formName',
     enableSorting: true,
     enableGlobalFilter: true,
-    cell: ({ row }) => <div className='break-words'>{row.original.formName[row.original.formDefaultLanguage] ?? '-'}</div>,
+    cell: ({ row }) => (
+      <div className='break-words'>{row.original.formName[row.original.formDefaultLanguage] ?? '-'}</div>
+    ),
   },
   {
     header: ({ column }) => <DataTableColumnHeader title='Location - L1' column={column} />,
-    accessorFn:(row)=> row.pollingStationLevel1,
+    accessorFn: (row) => row.pollingStationLevel1,
     id: 'pollingStationLevel1',
     enableSorting: true,
     enableGlobalFilter: true,
@@ -1136,7 +1150,7 @@ export const incidentReportsByEntryColumnDefs: ColumnDef<IncidentReportByEntry &
   },
   {
     header: ({ column }) => <DataTableColumnHeader title='Location - L2' column={column} />,
-    accessorFn:(row)=> row.pollingStationLevel2,
+    accessorFn: (row) => row.pollingStationLevel2,
     id: 'pollingStationLevel2',
     enableSorting: true,
     enableGlobalFilter: true,
@@ -1144,7 +1158,7 @@ export const incidentReportsByEntryColumnDefs: ColumnDef<IncidentReportByEntry &
   },
   {
     header: ({ column }) => <DataTableColumnHeader title='Location - L3' column={column} />,
-    accessorFn:(row)=> row.pollingStationLevel3,
+    accessorFn: (row) => row.pollingStationLevel3,
     id: 'pollingStationLevel3',
     enableSorting: true,
     enableGlobalFilter: true,
@@ -1152,7 +1166,7 @@ export const incidentReportsByEntryColumnDefs: ColumnDef<IncidentReportByEntry &
   },
   {
     header: ({ column }) => <DataTableColumnHeader title='Location - L4' column={column} />,
-    accessorFn:(row)=> row.pollingStationLevel4,
+    accessorFn: (row) => row.pollingStationLevel4,
     id: 'pollingStationLevel4',
     enableSorting: true,
     enableGlobalFilter: true,
@@ -1160,7 +1174,7 @@ export const incidentReportsByEntryColumnDefs: ColumnDef<IncidentReportByEntry &
   },
   {
     header: ({ column }) => <DataTableColumnHeader title='Location - L5' column={column} />,
-    accessorFn:(row)=> row.pollingStationLevel5,
+    accessorFn: (row) => row.pollingStationLevel5,
     id: 'pollingStationLevel5',
     enableSorting: true,
     enableGlobalFilter: true,
@@ -1168,7 +1182,7 @@ export const incidentReportsByEntryColumnDefs: ColumnDef<IncidentReportByEntry &
   },
   {
     header: ({ column }) => <DataTableColumnHeader title='Number' column={column} />,
-    accessorFn:(row)=> row.pollingStationNumber,
+    accessorFn: (row) => row.pollingStationNumber,
     id: 'pollingStationNumber',
     enableSorting: true,
     enableGlobalFilter: true,
@@ -1176,7 +1190,7 @@ export const incidentReportsByEntryColumnDefs: ColumnDef<IncidentReportByEntry &
   },
   {
     header: ({ column }) => <DataTableColumnHeader title='Location description' column={column} />,
-    accessorFn:(row)=> row.locationDescription,
+    accessorFn: (row) => row.locationDescription,
     id: 'locationDescription',
     enableSorting: true,
     enableGlobalFilter: true,
@@ -1185,7 +1199,7 @@ export const incidentReportsByEntryColumnDefs: ColumnDef<IncidentReportByEntry &
 
   {
     header: ({ column }) => <DataTableColumnHeader title='Observer' column={column} />,
-    accessorFn:(row)=> row.observerName,
+    accessorFn: (row) => row.observerName,
     id: 'observerName',
     enableSorting: true,
     enableGlobalFilter: true,
@@ -1193,7 +1207,7 @@ export const incidentReportsByEntryColumnDefs: ColumnDef<IncidentReportByEntry &
   },
   {
     header: ({ column }) => <DataTableColumnHeader title='NGO' column={column} />,
-    accessorFn: (row)=> row.ngoName,
+    accessorFn: (row) => row.ngoName,
     id: 'ngoName',
     enableSorting: false,
     enableGlobalFilter: true,
@@ -1201,7 +1215,7 @@ export const incidentReportsByEntryColumnDefs: ColumnDef<IncidentReportByEntry &
   },
   {
     header: ({ column }) => <DataTableColumnHeader title='Observer tags' column={column} />,
-    accessorFn:(row)=> row.tags,
+    accessorFn: (row) => row.tags,
     id: 'tags',
     enableSorting: true,
     enableGlobalFilter: true,
@@ -1213,35 +1227,35 @@ export const incidentReportsByEntryColumnDefs: ColumnDef<IncidentReportByEntry &
   },
   {
     header: ({ column }) => <DataTableColumnHeader title='Questions answered' column={column} />,
-    accessorFn:(row)=> row.numberOfQuestionsAnswered,
+    accessorFn: (row) => row.numberOfQuestionsAnswered,
     id: 'numberOfQuestionsAnswered',
     enableSorting: true,
     enableGlobalFilter: true,
   },
   {
     header: ({ column }) => <DataTableColumnHeader title='Flagged answers' column={column} />,
-    accessorFn:(row)=> row.numberOfFlaggedAnswers,
+    accessorFn: (row) => row.numberOfFlaggedAnswers,
     id: 'numberOfFlaggedAnswers',
     enableSorting: true,
     enableGlobalFilter: true,
   },
   {
     header: ({ column }) => <DataTableColumnHeader title='Question notes' column={column} />,
-    accessorFn:(row)=> row.notesCount,
+    accessorFn: (row) => row.notesCount,
     id: 'notesCount',
     enableSorting: true,
     enableGlobalFilter: true,
   },
   {
     header: ({ column }) => <DataTableColumnHeader title='Media files' column={column} />,
-    accessorFn:(row)=> row.mediaFilesCount,
+    accessorFn: (row) => row.mediaFilesCount,
     id: 'mediaFilesCount',
     enableSorting: true,
     enableGlobalFilter: true,
   },
   {
     header: ({ column }) => <DataTableColumnHeader title='Follow-up status' column={column} />,
-    accessorFn:(row)=> row.followUpStatus,
+    accessorFn: (row) => row.followUpStatus,
     id: 'followUpStatus',
     enableSorting: false,
     enableGlobalFilter: true,
@@ -1255,8 +1269,8 @@ export const incidentReportsByEntryColumnDefs: ColumnDef<IncidentReportByEntry &
         {row.original.followUpStatus === IncidentReportFollowUpStatus.NotApplicable
           ? 'Not Applicable'
           : row.original.followUpStatus === IncidentReportFollowUpStatus.NeedsFollowUp
-          ? 'Needs follow-up'
-          : 'Resolved'}
+            ? 'Needs follow-up'
+            : 'Resolved'}
       </Badge>
     ),
   },
@@ -1280,7 +1294,7 @@ export const incidentReportsByEntryColumnDefs: ColumnDef<IncidentReportByEntry &
 export const observerIncidentReportsColumnDefs: ColumnDef<IncidentReportByEntry & RowData>[] = [
   {
     header: ({ column }) => <DataTableColumnHeader title='Time submitted' column={column} />,
-    accessorFn:(row)=> row.timeSubmitted,
+    accessorFn: (row) => row.timeSubmitted,
     id: 'timeSubmitted',
     enableSorting: true,
     enableGlobalFilter: true,
@@ -1288,22 +1302,24 @@ export const observerIncidentReportsColumnDefs: ColumnDef<IncidentReportByEntry
   },
   {
     header: ({ column }) => <DataTableColumnHeader title='Form code' column={column} />,
-    accessorFn:(row)=> row.formCode,
+    accessorFn: (row) => row.formCode,
     id: 'formCode',
     enableSorting: true,
     enableGlobalFilter: true,
   },
   {
     header: ({ column }) => <DataTableColumnHeader title='Form name' column={column} />,
-    accessorFn:(row)=> row.formName,
+    accessorFn: (row) => row.formName,
     id: 'formName',
     enableSorting: true,
     enableGlobalFilter: true,
-    cell: ({ row }) => <div className='break-words'>{row.original.formName[row.original.formDefaultLanguage] ?? '-'}</div>,
+    cell: ({ row }) => (
+      <div className='break-words'>{row.original.formName[row.original.formDefaultLanguage] ?? '-'}</div>
+    ),
   },
   {
     header: ({ column }) => <DataTableColumnHeader title='Location type' column={column} />,
-    accessorFn:(row)=> row.locationType,
+    accessorFn: (row) => row.locationType,
     id: 'locationType',
     enableSorting: true,
     enableGlobalFilter: true,
@@ -1311,7 +1327,7 @@ export const observerIncidentReportsColumnDefs: ColumnDef<IncidentReportByEntry
   },
   {
     header: ({ column }) => <DataTableColumnHeader title='Location description' column={column} />,
-    accessorFn:(row)=> row.locationDescription,
+    accessorFn: (row) => row.locationDescription,
     id: 'locationDescription',
     enableSorting: true,
     enableGlobalFilter: true,
@@ -1319,7 +1335,7 @@ export const observerIncidentReportsColumnDefs: ColumnDef<IncidentReportByEntry
   },
   {
     header: ({ column }) => <DataTableColumnHeader title='Location - L1' column={column} />,
-    accessorFn:(row)=> row.pollingStationLevel1,
+    accessorFn: (row) => row.pollingStationLevel1,
     id: 'pollingStationLevel1',
     enableSorting: true,
     enableGlobalFilter: true,
@@ -1327,7 +1343,7 @@ export const observerIncidentReportsColumnDefs: ColumnDef<IncidentReportByEntry
   },
   {
     header: ({ column }) => <DataTableColumnHeader title='Location - L2' column={column} />,
-    accessorFn:(row)=> row.pollingStationLevel2,
+    accessorFn: (row) => row.pollingStationLevel2,
     id: 'pollingStationLevel2',
     enableSorting: true,
     enableGlobalFilter: true,
@@ -1335,7 +1351,7 @@ export const observerIncidentReportsColumnDefs: ColumnDef<IncidentReportByEntry
   },
   {
     header: ({ column }) => <DataTableColumnHeader title='Location - L3' column={column} />,
-    accessorFn:(row)=> row.pollingStationLevel3,
+    accessorFn: (row) => row.pollingStationLevel3,
     id: 'pollingStationLevel3',
     enableSorting: true,
     enableGlobalFilter: true,
@@ -1343,7 +1359,7 @@ export const observerIncidentReportsColumnDefs: ColumnDef<IncidentReportByEntry
   },
   {
     header: ({ column }) => <DataTableColumnHeader title='Location - L4' column={column} />,
-    accessorFn:(row)=> row.pollingStationLevel4,
+    accessorFn: (row) => row.pollingStationLevel4,
     id: 'pollingStationLevel4',
     enableSorting: true,
     enableGlobalFilter: true,
@@ -1351,7 +1367,7 @@ export const observerIncidentReportsColumnDefs: ColumnDef<IncidentReportByEntry
   },
   {
     header: ({ column }) => <DataTableColumnHeader title='Location - L5' column={column} />,
-    accessorFn:(row)=> row.pollingStationLevel5,
+    accessorFn: (row) => row.pollingStationLevel5,
     id: 'pollingStationLevel5',
     enableSorting: true,
     enableGlobalFilter: true,
@@ -1359,7 +1375,7 @@ export const observerIncidentReportsColumnDefs: ColumnDef<IncidentReportByEntry
   },
   {
     header: ({ column }) => <DataTableColumnHeader title='Number' column={column} />,
-    accessorFn:(row)=> row.pollingStationLevel5,
+    accessorFn: (row) => row.pollingStationLevel5,
     id: 'pollingStationNumber',
     enableSorting: true,
     enableGlobalFilter: true,
@@ -1367,35 +1383,35 @@ export const observerIncidentReportsColumnDefs: ColumnDef<IncidentReportByEntry
   },
   {
     header: ({ column }) => <DataTableColumnHeader title='Questions answered' column={column} />,
-    accessorFn:(row)=> row.numberOfQuestionsAnswered,
+    accessorFn: (row) => row.numberOfQuestionsAnswered,
     id: 'numberOfQuestionsAnswered',
     enableSorting: true,
     enableGlobalFilter: true,
   },
   {
     header: ({ column }) => <DataTableColumnHeader title='Flagged answers' column={column} />,
-    accessorFn:(row)=> row.numberOfFlaggedAnswers,
+    accessorFn: (row) => row.numberOfFlaggedAnswers,
     id: 'numberOfFlaggedAnswers',
     enableSorting: true,
     enableGlobalFilter: true,
   },
   {
     header: ({ column }) => <DataTableColumnHeader title='Question notes' column={column} />,
-    accessorFn:(row)=> row.notesCount,
+    accessorFn: (row) => row.notesCount,
     id: 'notesCount',
     enableSorting: true,
     enableGlobalFilter: true,
   },
   {
     header: ({ column }) => <DataTableColumnHeader title='Media files' column={column} />,
-    accessorFn:(row)=> row.mediaFilesCount,
+    accessorFn: (row) => row.mediaFilesCount,
     id: 'mediaFilesCount',
     enableSorting: true,
     enableGlobalFilter: true,
   },
   {
     header: ({ column }) => <DataTableColumnHeader title='Follow-up status' column={column} />,
-    accessorFn:(row)=> row.followUpStatus,
+    accessorFn: (row) => row.followUpStatus,
     id: 'followUpStatus',
     enableSorting: false,
     enableGlobalFilter: true,
@@ -1409,8 +1425,8 @@ export const observerIncidentReportsColumnDefs: ColumnDef<IncidentReportByEntry
         {row.original.followUpStatus === IncidentReportFollowUpStatus.NotApplicable
           ? 'Not Applicable'
           : row.original.followUpStatus === IncidentReportFollowUpStatus.NeedsFollowUp
-          ? 'Needs follow-up'
-          : 'Resolved'}
+            ? 'Needs follow-up'
+            : 'Resolved'}
       </Badge>
     ),
   },
@@ -1434,7 +1450,7 @@ export const observerIncidentReportsColumnDefs: ColumnDef<IncidentReportByEntry
 export const incidentReportsByObserverColumnDefs: ColumnDef<IncidentReportByObserver & RowData>[] = [
   {
     header: ({ column }) => <DataTableColumnHeader title='Observer name' column={column} />,
-    accessorFn:(row)=> row.observerName,
+    accessorFn: (row) => row.observerName,
     id: 'observerName',
     enableSorting: true,
     enableGlobalFilter: true,
@@ -1442,14 +1458,14 @@ export const incidentReportsByObserverColumnDefs: ColumnDef<IncidentReportByObse
   },
   {
     header: ({ column }) => <DataTableColumnHeader title='Observer contact' column={column} />,
-    accessorFn:(row)=> row.phoneNumber,
+    accessorFn: (row) => row.phoneNumber,
     id: 'phoneNumber',
     enableSorting: true,
     enableGlobalFilter: true,
   },
   {
     header: ({ column }) => <DataTableColumnHeader title='NGO' column={column} />,
-    accessorFn: (row)=> row.ngoName,
+    accessorFn: (row) => row.ngoName,
     id: 'ngoName',
     enableSorting: false,
     enableGlobalFilter: true,
@@ -1457,7 +1473,7 @@ export const incidentReportsByObserverColumnDefs: ColumnDef<IncidentReportByObse
   },
   {
     header: ({ column }) => <DataTableColumnHeader title='Observer tags' column={column} />,
-    accessorFn:(row)=> row.tags,
+    accessorFn: (row) => row.tags,
     id: 'tags',
     enableSorting: true,
     enableGlobalFilter: true,
@@ -1469,21 +1485,21 @@ export const incidentReportsByObserverColumnDefs: ColumnDef<IncidentReportByObse
   },
   {
     header: ({ column }) => <DataTableColumnHeader title='Number of submissions' column={column} />,
-    accessorFn:(row)=> row.numberOfIncidentsSubmitted,
+    accessorFn: (row) => row.numberOfIncidentsSubmitted,
     id: 'numberOfIncidentsSubmitted',
     enableSorting: true,
     enableGlobalFilter: true,
   },
   {
     header: ({ column }) => <DataTableColumnHeader title='Flagged answers' column={column} />,
-    accessorFn:(row)=> row.numberOfFlaggedAnswers,
+    accessorFn: (row) => row.numberOfFlaggedAnswers,
     id: 'numberOfFlaggedAnswers',
     enableSorting: true,
     enableGlobalFilter: true,
   },
   {
     header: ({ column }) => <DataTableColumnHeader title='Follow-up status' column={column} />,
-    accessorFn:(row)=> row.followUpStatus,
+    accessorFn: (row) => row.followUpStatus,
     id: 'followUpStatus',
     enableSorting: false,
     enableGlobalFilter: true,
@@ -1579,4 +1595,4 @@ export const incidentReportsByFormColumnDefs: ColumnDef<IncidentReportByForm & R
       </div>
     ),
   },
-];
\ No newline at end of file
+];