diff --git a/web/src/features/responses/components/MediaFilesCell/MediaFilesCell.tsx b/web/src/features/responses/components/MediaFilesCell/MediaFilesCell.tsx
index aaef00bac..3434654b1 100644
--- a/web/src/features/responses/components/MediaFilesCell/MediaFilesCell.tsx
+++ b/web/src/features/responses/components/MediaFilesCell/MediaFilesCell.tsx
@@ -3,6 +3,7 @@ import { Button } from '@/components/ui/button';
 import { Dialog, DialogContent, DialogTrigger } from '@/components/ui/dialog';
 import { cn, getFileCategory } from '@/lib/utils';
 import { ArrowDownTrayIcon, DocumentIcon, FilmIcon, MusicalNoteIcon, PhotoIcon } from '@heroicons/react/24/outline';
+import axios from 'axios';
 import { useMemo } from 'react';
 import ReactPlayer from 'react-player';
 import { Attachment } from '../../models/common';
@@ -17,30 +18,27 @@ export default function MediaFilesCell({ attachment, className }: MediaFilesCell
     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': '*',
-  //       },
-  //     });
+  const handleDownload = async (e: React.MouseEvent) => {
+    e.stopPropagation();
+    try {
+      const response = await axios.get(attachment.presignedUrl, {
+        responseType: 'blob',
+        headers: {},
+      });
 
-  //     // 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);
-  //   }
-  // };
+      // 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';
@@ -116,7 +114,7 @@ export default function MediaFilesCell({ attachment, className }: MediaFilesCell
 
   return (
     <Dialog>
-      <DialogTrigger asChild>
+      <DialogTrigger asChild className='w-full'>
         <div className={cn('group relative', className)}>
           <AspectRatio ratio={16 / 9}>{renderPreview(false)}</AspectRatio>
 
@@ -147,14 +145,12 @@ export default function MediaFilesCell({ attachment, className }: MediaFilesCell
               </div>
 
               <Button
-                // onClick={handleDownload}
+                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>
+                Download
               </Button>
             </div>
           </div>
diff --git a/web/src/features/responses/components/ResponseExtraDataTable/ResponseExtraDataTable.tsx b/web/src/features/responses/components/ResponseExtraDataTable/ResponseExtraDataTable.tsx
index 482209972..2cdd16f12 100644
--- a/web/src/features/responses/components/ResponseExtraDataTable/ResponseExtraDataTable.tsx
+++ b/web/src/features/responses/components/ResponseExtraDataTable/ResponseExtraDataTable.tsx
@@ -8,51 +8,60 @@ type ResponseExtraDataTableProps = {
   data: QuestionExtraData[];
 };
 
+import { getFilteredRowModel, SortingState } from '@tanstack/react-table';
+import * as React from 'react';
+
 export function ResponseExtraDataTable({ columns, data }: ResponseExtraDataTableProps): FunctionComponent {
+  const [sorting, setSorting] = React.useState<SortingState>([]);
+
   const table = useReactTable({
-    columns,
     data,
+    columns,
+    onSortingChange: setSorting,
     getCoreRowModel: getCoreRowModel(),
     getSortedRowModel: getSortedRowModel(),
+    getFilteredRowModel: getFilteredRowModel(),
+    state: {
+      sorting,
+    },
   });
 
-  const rows = table.getRowModel().rows;
-
   return (
-    <>
-      <Table>
-        <TableHeader>
-          {table.getHeaderGroups().map((headerGroup) => (
-            <TableRow key={headerGroup.id}>
-              {headerGroup.headers.map((header) => {
-                return (
-                  <TableHead key={header.id} style={{ width: `${header.getSize()}px` }}>
-                    {header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}
-                  </TableHead>
-                );
-              })}
-            </TableRow>
-          ))}
-        </TableHeader>
-
-        <TableBody>
-          {rows.length > 0 ? (
-            table.getRowModel().rows.map((row) => (
-              <TableRow key={row.id}>
-                {row.getVisibleCells().map((cell) => (
-                  <TableCell key={cell.id}>{flexRender(cell.column.columnDef.cell, cell.getContext())}</TableCell>
-                ))}
+    <div className='w-full'>
+      <div className='overflow-hidden rounded-md border'>
+        <Table>
+          <TableHeader>
+            {table.getHeaderGroups().map((headerGroup) => (
+              <TableRow key={headerGroup.id}>
+                {headerGroup.headers.map((header) => {
+                  return (
+                    <TableHead key={header.id} style={{ width: `${header.getSize()}px` }}>
+                      {header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}
+                    </TableHead>
+                  );
+                })}
+              </TableRow>
+            ))}
+          </TableHeader>
+          <TableBody>
+            {table.getRowModel().rows?.length ? (
+              table.getRowModel().rows.map((row) => (
+                <TableRow key={row.id} data-state={row.getIsSelected() && 'selected'}>
+                  {row.getVisibleCells().map((cell) => (
+                    <TableCell key={cell.id}>{flexRender(cell.column.columnDef.cell, cell.getContext())}</TableCell>
+                  ))}
+                </TableRow>
+              ))
+            ) : (
+              <TableRow>
+                <TableCell colSpan={columns.length} className='h-24 text-center'>
+                  No results.
+                </TableCell>
               </TableRow>
-            ))
-          ) : (
-            <TableRow>
-              <TableCell className='h-24 text-center' colSpan={columns.length}>
-                No results.
-              </TableCell>
-            </TableRow>
-          )}
-        </TableBody>
-      </Table>
-    </>
+            )}
+          </TableBody>
+        </Table>
+      </div>
+    </div>
   );
 }
diff --git a/web/src/features/responses/utils/column-defs.tsx b/web/src/features/responses/utils/column-defs.tsx
index 5a4f44f4c..5f31c8851 100644
--- a/web/src/features/responses/utils/column-defs.tsx
+++ b/web/src/features/responses/utils/column-defs.tsx
@@ -1,11 +1,3 @@
-import TableTagList from '@/components/table-tag-list/TableTagList';
-import { Badge } from '@/components/ui/badge';
-import { DataTableColumnHeader } from '@/components/ui/DataTable/DataTableColumnHeader';
-import { cn } from '@/lib/utils';
-import { ArrowTopRightOnSquareIcon, ChevronRightIcon } from '@heroicons/react/24/outline';
-import { Link } from '@tanstack/react-router';
-import { format } from 'date-fns';
-
 import { DateTimeFormat } from '@/common/formats';
 import {
   CitizenReportFollowUpStatus,
@@ -13,9 +5,18 @@ import {
   IncidentReportFollowUpStatus,
   QuickReportFollowUpStatus,
 } from '@/common/types';
+import TableTagList from '@/components/table-tag-list/TableTagList';
+import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
 import type { RowData } from '@/components/ui/DataTable/DataTable';
+import { DataTableColumnHeader } from '@/components/ui/DataTable/DataTableColumnHeader';
+import { cn } from '@/lib/utils';
+import { ArrowTopRightOnSquareIcon, ChevronRightIcon } from '@heroicons/react/24/outline';
+import { Link } from '@tanstack/react-router';
 import type { ColumnDef } from '@tanstack/react-table';
+import { format } from 'date-fns';
+import { ArrowDown, ArrowUp, ArrowUpDown } from 'lucide-react';
+import MediaFilesCell from '../components/MediaFilesCell/MediaFilesCell';
 import { CitizenReportsAggregatedByForm, type CitizenReportByEntry } from '../models/citizen-report';
 import { SubmissionType } from '../models/common';
 import {
@@ -27,7 +28,6 @@ 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>[] = [
   {
@@ -518,35 +518,49 @@ export const formSubmissionsByFormColumnDefs: ColumnDef<FormSubmissionByForm & R
 
 export const answerExtraInfoColumnDefs: ColumnDef<QuestionExtraData>[] = [
   {
-    header: ({ column }) => <DataTableColumnHeader title='Type' column={column} className='w-[70px]' />,
-    accessorFn: (row) => row.type,
-    id: 'type',
-    enableSorting: true,
-    enableGlobalFilter: true,
-    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
+    accessorKey: 'type',
+    header: () => <div className='w-[90px]'>Type</div>,
+    cell: ({ row }) => <div className='w-[80px]'>{row.getValue('type')}</div>,
+    size: 80,
+    enableResizing: false,
   },
   {
-    header: ({ column }) => <DataTableColumnHeader title='Time submitted' className='w-[70px]' column={column} />,
-    accessorFn: (row) => row.timeSubmitted,
-    id: 'timeSubmitted',
-    enableSorting: true,
-    enableGlobalFilter: true,
-    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
+    accessorKey: 'timeSubmitted',
+    header: ({ column }) => {
+      const isSorted = column.getIsSorted();
+
+      return (
+        <Button variant='ghost' onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}>
+          Time submitted
+          {isSorted === 'asc' ? (
+            <ArrowUp className='w-4 h-4' />
+          ) : isSorted === 'desc' ? (
+            <ArrowDown className='w-4 h-4' />
+          ) : (
+            <ArrowUpDown className='w-4 h-4' />
+          )}
+        </Button>
+      );
+    },
+    cell: ({ row }) => {
+      const formatted = format(row.original.timeSubmitted, DateTimeFormat);
+
+      return <div className=''>{formatted}</div>;
+    },
+    size: 80,
+    enableResizing: false,
   },
+
   {
-    header: ({ column }) => <DataTableColumnHeader title='Preview' column={column} />,
     id: 'preview',
     enableSorting: false,
     enableGlobalFilter: false,
     cell: ({ row }) => (
-      <div>{row.original.type === 'Note' ? row.original.text : <MediaFilesCell attachment={row.original} />}</div>
+      <div className='w-full'>
+        {row.original.type === 'Note' ? row.original.text : <MediaFilesCell attachment={row.original} />}
+      </div>
     ),
+    size: 300,
   },
 ];