diff --git a/frontend/src/components/asset/AssetTableToolbar.vue b/frontend/src/components/asset/AssetTableToolbar.vue
index 59b5ad1..6fc9ef5 100644
--- a/frontend/src/components/asset/AssetTableToolbar.vue
+++ b/frontend/src/components/asset/AssetTableToolbar.vue
@@ -91,6 +91,7 @@
         <!-- Task Status Filter (only for list view) -->
         <TaskStatusFilter
           v-if="viewMode === 'list'"
+          :all-task-types="allTaskTypes"
           :project-id="projectId"
           @filter-changed="$emit('task-status-filter-changed', $event)"
         />
diff --git a/frontend/src/components/asset/TaskStatusFilter.vue b/frontend/src/components/asset/TaskStatusFilter.vue
index 80d806a..9c086d7 100644
--- a/frontend/src/components/asset/TaskStatusFilter.vue
+++ b/frontend/src/components/asset/TaskStatusFilter.vue
@@ -1,149 +1,136 @@
 <template>
-  <div class="flex items-center gap-2">
-    <Select v-model="selectedFilter" @update:model-value="handleFilterChange">
-      <SelectTrigger class="w-[200px]">
-        <SelectValue placeholder="Filter by task status" />
-      </SelectTrigger>
-      <SelectContent>
-        <SelectItem value="all">All Tasks</SelectItem>
-        <SelectGroup>
-          <SelectLabel>Modeling</SelectLabel>
-          <SelectItem 
-            v-for="status in allStatuses" 
-            :key="`modeling:${status.id}`"
-            :value="`modeling:${status.id}`"
-          >
-            <div class="flex items-center gap-2">
-              <TaskStatusBadge :status="status.id as any" />
-              <span>Modeling - {{ status.name }}</span>
+  <Popover>
+    <PopoverTrigger as-child>
+      <Button variant="outline" size="sm" class="h-8 border-dashed">
+        <ListFilter class="mr-2 h-4 w-4" />
+        Task Status
+        <Badge
+          v-if="selectedFilters.length > 0"
+          variant="secondary"
+          class="ml-2 rounded-sm px-1 font-normal"
+        >
+          {{ selectedFilters.length }}
+        </Badge>
+      </Button>
+    </PopoverTrigger>
+    <PopoverContent class="w-[220px] p-0" align="start">
+      <Command>
+        <CommandInput placeholder="Search task status..." />
+        <CommandList>
+          <CommandEmpty>No status found.</CommandEmpty>
+
+          <!-- All Tasks Option -->
+          <CommandGroup>
+            <CommandItem value="all" @select="clearAllFilters">
+              <div
+                :class="[
+                  'mr-2 flex h-4 w-4 items-center justify-center rounded-sm border border-primary',
+                  selectedFilters.length === 0
+                    ? 'bg-primary text-primary-foreground'
+                    : 'opacity-50 [&_svg]:invisible'
+                ]"
+              >
+                <Check class="h-4 w-4" />
+              </div>
+              <span>All Tasks</span>
+            </CommandItem>
+          </CommandGroup>
+
+          <!-- Task Type Groups -->
+          <CommandGroup v-for="taskType in allTaskTypes" :key="taskType">
+            <CommandSeparator />
+            <div class="px-2 py-1.5 text-xs font-medium text-muted-foreground">
+              {{ formatTaskType(taskType) }}
             </div>
-          </SelectItem>
-        </SelectGroup>
-        <SelectGroup>
-          <SelectLabel>Surfacing</SelectLabel>
-          <SelectItem 
-            v-for="status in allStatuses" 
-            :key="`surfacing:${status.id}`"
-            :value="`surfacing:${status.id}`"
-          >
-            <div class="flex items-center gap-2">
-              <TaskStatusBadge :status="status as any" />
-              <span>Surfacing - {{ status.name }}</span>
-            </div>
-          </SelectItem>
-        </SelectGroup>
-        <SelectGroup>
-          <SelectLabel>Rigging</SelectLabel>
-          <SelectItem 
-            v-for="status in allStatuses" 
-            :key="`rigging:${status.id}`"
-            :value="`rigging:${status.id}`"
-          >
-            <div class="flex items-center gap-2">
-              <TaskStatusBadge :status="status as any" />
-              <span>Rigging - {{ status.name }}</span>
-            </div>
-          </SelectItem>
-        </SelectGroup>
-      </SelectContent>
-    </Select>
-    
-    <Button 
-      v-if="selectedFilter && selectedFilter !== 'all'" 
-      variant="ghost" 
-      size="sm" 
-      @click="clearFilter"
-      class="h-8 px-2"
-    >
-      <X class="h-4 w-4" />
-    </Button>
-  </div>
+            <CommandItem
+              v-for="status in allStatuses"
+              :key="`${taskType}:${status.id}`"
+              :value="`${taskType}:${status.id}`"
+              @select="toggleFilter(`${taskType}:${status.id}`)"
+            >
+              <div
+                :class="[
+                  'mr-2 flex h-4 w-4 items-center justify-center rounded-sm border border-primary',
+                  selectedFilters.includes(`${taskType}:${status.id}`)
+                    ? 'bg-primary text-primary-foreground'
+                    : 'opacity-50 [&_svg]:invisible'
+                ]"
+              >
+                <Check class="h-4 w-4" />
+              </div>
+              <div class="flex items-center gap-2">
+                <TaskStatusBadge :status="status as any" />
+              </div>
+            </CommandItem>
+          </CommandGroup>
+        </CommandList>
+      </Command>
+    </PopoverContent>
+  </Popover>
 </template>
 
 <script setup lang="ts">
 import { ref, computed, onMounted, watch } from 'vue'
-import { X } from 'lucide-vue-next'
+import { ListFilter, Check } from 'lucide-vue-next'
 import { Button } from '@/components/ui/button'
+import { Badge } from '@/components/ui/badge'
 import {
-  Select,
-  SelectContent,
-  SelectGroup,
-  SelectItem,
-  SelectLabel,
-  SelectTrigger,
-  SelectValue,
-} from '@/components/ui/select'
-import TaskStatusBadge from '@/components/task/TaskStatusBadge.vue'
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@/components/ui/popover'
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandSeparator,
+} from '@/components/ui/command'
+import TaskStatusBadge from '@/components/status/TaskStatusBadge.vue'
 import { TaskStatus } from '@/services/asset'
-import { customTaskStatusService, type CustomTaskStatus, type SystemTaskStatus } from '@/services/customTaskStatus'
 import { useTaskStatusesStore } from '@/stores/taskStatuses'
 
 interface Props {
+  allTaskTypes: string[]
   projectId?: number
 }
 
-interface Emits {
-  (e: 'filter-changed', filter: string): void
-}
-
 const props = defineProps<Props>()
-const emit = defineEmits<Emits>()
 
-// Use the shared task statuses store
+const emit = defineEmits<{
+  'filter-changed': [filter: string]
+}>()
+
 const taskStatusesStore = useTaskStatusesStore()
+const selectedFilters = ref<string[]>([])
 
-const selectedFilter = ref('all')
-
-// Get loading state from store
-const isLoading = computed(() => {
-  return props.projectId ? taskStatusesStore.isLoading(props.projectId) : false
-})
-
-// System status options (fallback if no project ID)
 const defaultStatusOptions = [
   { id: TaskStatus.NOT_STARTED, name: 'Not Started', color: '', is_system: true },
   { id: TaskStatus.IN_PROGRESS, name: 'In Progress', color: '', is_system: true },
   { id: TaskStatus.SUBMITTED, name: 'Submitted', color: '', is_system: true },
   { id: TaskStatus.APPROVED, name: 'Approved', color: '', is_system: true },
-  { id: TaskStatus.RETAKE, name: 'Retake', color: '', is_system: true }
+  { id: TaskStatus.RETAKE, name: 'Retake', color: '', is_system: true },
 ]
 
-// Combine system and custom statuses
 const allStatuses = computed(() => {
-  if (!props.projectId) {
-    return defaultStatusOptions
-  }
-  
+  if (!props.projectId) return defaultStatusOptions
+
   const statusData = taskStatusesStore.getProjectStatuses(props.projectId)
-  if (!statusData) {
-    return defaultStatusOptions
-  }
-  
-  // Convert system statuses to the format expected by TaskStatusBadge
-  const systemStatusList = statusData.system_statuses.map(status => ({
-    id: status.id,
-    name: status.name,
-    color: status.color,
-    is_system: status.is_system
+  if (!statusData) return defaultStatusOptions
+
+  const systemStatusList = statusData.system_statuses.map(s => ({
+    id: s.id, name: s.name, color: s.color, is_system: s.is_system,
   }))
-  
-  // Convert custom statuses to the format expected by TaskStatusBadge
-  const customStatusList = statusData.statuses.map(status => ({
-    id: status.id,
-    name: status.name,
-    color: status.color,
-    is_system: false
+  const customStatusList = statusData.statuses.map(s => ({
+    id: s.id, name: s.name, color: s.color, is_system: false,
   }))
-  
   return [...systemStatusList, ...customStatusList]
 })
 
-// Load custom statuses when component mounts or projectId changes
 const loadStatuses = async () => {
-  if (!props.projectId) {
-    return
-  }
-  
+  if (!props.projectId) return
   try {
     await taskStatusesStore.fetchProjectStatuses(props.projectId)
   } catch (error) {
@@ -151,25 +138,25 @@ const loadStatuses = async () => {
   }
 }
 
-onMounted(() => {
-  loadStatuses()
-})
+onMounted(loadStatuses)
+watch(() => props.projectId, loadStatuses)
 
-watch(() => props.projectId, () => {
-  loadStatuses()
-})
-
-const handleFilterChange = (filter: any) => {
-  if (!filter) return
-  const filterStr = String(filter)
-  selectedFilter.value = filterStr
-  // Convert "all" to empty string for the API
-  const apiFilter = filterStr === 'all' ? '' : filterStr
+const toggleFilter = (filter: string) => {
+  const index = selectedFilters.value.indexOf(filter)
+  if (index > -1) {
+    selectedFilters.value.splice(index, 1)
+  } else {
+    selectedFilters.value.push(filter)
+  }
+  const apiFilter = selectedFilters.value.length > 0 ? selectedFilters.value.join(',') : ''
   emit('filter-changed', apiFilter)
 }
 
-const clearFilter = () => {
-  selectedFilter.value = 'all'
+const clearAllFilters = () => {
+  selectedFilters.value = []
   emit('filter-changed', '')
 }
-</script>
\ No newline at end of file
+
+const formatTaskType = (taskType: string) =>
+  taskType.charAt(0).toUpperCase() + taskType.slice(1)
+</script>
diff --git a/frontend/src/components/layout/AppLayout.vue b/frontend/src/components/layout/AppLayout.vue
index 140fab0..7035fe2 100644
--- a/frontend/src/components/layout/AppLayout.vue
+++ b/frontend/src/components/layout/AppLayout.vue
@@ -5,7 +5,7 @@
       <AppSidebar />
       
       <!-- Main Content Area -->
-      <SidebarInset class="flex-1 flex flex-col">
+      <SidebarInset class="flex-1 flex flex-col min-w-0">
         <!-- Header -->
         <AppHeader />
         
diff --git a/frontend/src/components/shot/ShotBrowser.vue b/frontend/src/components/shot/ShotBrowser.vue
index f6a9570..1e34366 100644
--- a/frontend/src/components/shot/ShotBrowser.vue
+++ b/frontend/src/components/shot/ShotBrowser.vue
@@ -1,9 +1,9 @@
 <template>
-  <div class="relative h-full">
+  <div class="relative h-full flex flex-col">
     <!-- Main Content -->
-    <div class="space-y-4">
-      <!-- Toolbar - Sticky -->
-      <div class="sticky top-0 z-10 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60 border-b pb-4 px-4 sm:px-6 pt-4 sm:pt-6 mb-4">
+    <div class="flex flex-col flex-1 min-h-0">
+      <!-- Toolbar -->
+      <div class="flex-shrink-0 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60 border-b pb-4 px-4 sm:px-6 pt-4 sm:pt-6 mb-4">
         <ShotTableToolbar
           :view-mode="viewMode"
           :episode-filter="episodeFilter"
@@ -14,12 +14,14 @@
           :project-id="projectId"
           :selected-shot="selectedShot"
           :is-detail-panel-enabled="isDetailPanelEnabled"
+          :is-columns-locked="lockColumns"
           @update:view-mode="viewMode = $event"
           @update:episode-filter="handleEpisodeFilterChange"
           @update:search="searchQuery = $event"
           @update:column-visibility="handleColumnVisibilityChange"
           @task-status-filter-changed="handleTaskStatusFilter"
           @toggle-detail-panel="toggleDetailPanelEnabled"
+          @toggle-column-lock="toggleColumnLock"
           @bulk-create="showBulkCreateDialog = true"
           @create-shot="showCreateDialog = true"
         />
@@ -76,11 +78,11 @@
     </div>
 
     <!-- Shots Grid/List/Table -->
-    <div v-else>
+    <div v-else class="flex-1 min-h-0">
       <!-- Grid View -->
       <div 
-        v-if="viewMode === 'grid'" 
-        class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 px-4 sm:px-6"
+        v-if="viewMode === 'grid'"
+        class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 px-4 sm:px-6 h-full overflow-auto"
       >
         <ShotCard
           v-for="shot in filteredShots"
@@ -93,7 +95,7 @@
       </div>
 
       <!-- List View -->
-      <div v-else-if="viewMode === 'list'" class="space-y-2 px-4 sm:px-6">
+      <div v-else-if="viewMode === 'list'" class="space-y-2 px-4 sm:px-6 h-full overflow-auto">
         <div 
           v-for="shot in filteredShots"
           :key="shot.id"
@@ -148,6 +150,7 @@
         :sorting="sorting"
         :column-visibility="columnVisibility"
         :all-task-types="allTaskTypes"
+        :lock-columns="lockColumns"
         @update:sorting="sorting = $event"
         @update:column-visibility="handleColumnVisibilityChange"
         @update:rowSelection="handleRowSelectionChange"
@@ -395,6 +398,13 @@ const columnVisibilityStore = useColumnVisibilityStore()
 const columnVisibility = ref<VisibilityState>({})
 const rowSelection = ref<Record<string, boolean>>({})
 
+// Lock (freeze) the first columns (select/thumbnail/name) for horizontal scroll
+const lockColumns = ref(localStorage.getItem('shot-columns-locked') === 'true')
+const toggleColumnLock = () => {
+  lockColumns.value = !lockColumns.value
+  localStorage.setItem('shot-columns-locked', String(lockColumns.value))
+}
+
 // Computed for selected count
 const selectedCount = computed(() => {
   return Object.keys(rowSelection.value).length
diff --git a/frontend/src/components/shot/ShotTableToolbar.vue b/frontend/src/components/shot/ShotTableToolbar.vue
index 29ec7e2..3170d60 100644
--- a/frontend/src/components/shot/ShotTableToolbar.vue
+++ b/frontend/src/components/shot/ShotTableToolbar.vue
@@ -208,6 +208,19 @@
           <PanelRightOpen v-else class="h-4 w-4" />
         </Button>
 
+        <!-- Lock First Columns Toggle Button (only for table view) -->
+        <Button
+          v-if="viewMode === 'table'"
+          @click="$emit('toggle-column-lock')"
+          :variant="isColumnsLocked ? 'default' : 'outline'"
+          size="sm"
+          :class="['h-8 w-8 p-0', isColumnsLocked ? 'bg-primary text-primary-foreground hover:bg-primary/90' : '']"
+          :title="isColumnsLocked ? 'Unlock columns' : 'Lock first columns'"
+        >
+          <Lock v-if="isColumnsLocked" class="h-4 w-4" />
+          <Unlock v-else class="h-4 w-4" />
+        </Button>
+
         <!-- Clear Filters -->
         <Button
           v-if="hasFilters"
@@ -250,7 +263,7 @@
 import { computed } from 'vue'
 import { 
   LayoutGrid, List, Table2, Search, Film, Plus, Layers,
-  PanelRightClose, PanelRightOpen, Check, X, Settings2, ListTodo, ListX
+  PanelRightClose, PanelRightOpen, Check, X, Settings2, ListTodo, ListX, Lock, Unlock
 } from 'lucide-vue-next'
 import { Button } from '@/components/ui/button'
 import { Input } from '@/components/ui/input'
@@ -284,6 +297,7 @@ interface Props {
   projectId: number
   selectedShot: Shot | null
   isDetailPanelEnabled: boolean
+  isColumnsLocked: boolean
 }
 
 const props = defineProps<Props>()
@@ -295,6 +309,7 @@ const emit = defineEmits<{
   'update:column-visibility': [value: VisibilityState]
   'task-status-filter-changed': [value: string]
   'toggle-detail-panel': []
+  'toggle-column-lock': []
   'toggle-task-columns': []
   'bulk-create': []
   'create-shot': []
diff --git a/frontend/src/components/shot/ShotsDataTable.vue b/frontend/src/components/shot/ShotsDataTable.vue
index 4ddf607..468cb8b 100644
--- a/frontend/src/components/shot/ShotsDataTable.vue
+++ b/frontend/src/components/shot/ShotsDataTable.vue
@@ -1,7 +1,107 @@
 <template>
-  <div class="space-y-2 px-4">
-    <div class="rounded-md border">
-      <Table>
+  <div class="px-4 h-full flex flex-col">
+    <div class="rounded-md border flex-1 min-h-0 overflow-hidden">
+      <!-- Locked: two-pane layout (fixed left pane + horizontally scrollable right pane) -->
+      <template v-if="lockColumns">
+        <div v-if="hasRows" class="flex h-full">
+          <!-- Left pane: frozen columns (no horizontal scroll, vertical scroll hidden + synced) -->
+          <div ref="leftPane" class="flex-shrink-0 h-full overflow-y-auto scrollbar-hide border-r" @scroll="onLeftScroll">
+            <table class="caption-bottom text-sm">
+              <TableHeader>
+                <TableRow v-for="headerGroup in table.getHeaderGroups()" :key="headerGroup.id">
+                  <TableHead
+                    v-for="header in frozenHeaders(headerGroup)"
+                    :key="header.id"
+                    :style="frozenWidth(header.column.id)"
+                    :class="header.column.getCanSort() ? 'cursor-pointer select-none hover:bg-muted/50' : ''"
+                    @click="header.column.getCanSort() ? header.column.toggleSorting() : null"
+                  >
+                    <FlexRender
+                      v-if="!header.isPlaceholder"
+                      :render="header.column.columnDef.header"
+                      :props="header.getContext()"
+                    />
+                  </TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                <TableRow
+                  v-for="row in table.getRowModel().rows"
+                  :key="row.id"
+                  :data-state="row.getIsSelected() ? 'selected' : undefined"
+                  class="cursor-pointer hover:bg-muted/50 h-12"
+                  :class="{ 'bg-muted/30': row.getIsSelected(), 'table-row-selectable': true, 'selecting': isRangeSelecting }"
+                  @click="handleRowClick(row.original, $event, row)"
+                  @dblclick="emit('row-dblclick', row.original)"
+                  @mousedown="handleMouseDown"
+                  @mouseup="handleMouseUp"
+                >
+                  <TableCell
+                    v-for="cell in frozenCells(row)"
+                    :key="cell.id"
+                    :style="frozenWidth(cell.column.id)"
+                  >
+                    <FlexRender :render="cell.column.columnDef.cell" :props="cell.getContext()" />
+                  </TableCell>
+                </TableRow>
+              </TableBody>
+            </table>
+          </div>
+
+          <!-- Right pane: movable columns (own horizontal scrollbar, only shown when needed) -->
+          <div ref="rightPane" class="flex-1 min-w-0 h-full overflow-auto" @scroll="onRightScroll">
+            <table class="min-w-full caption-bottom text-sm">
+              <TableHeader>
+                <TableRow v-for="headerGroup in table.getHeaderGroups()" :key="headerGroup.id">
+                  <TableHead
+                    v-for="header in movableHeaders(headerGroup)"
+                    :key="header.id"
+                    :class="[
+                      header.column.getCanSort() ? 'cursor-pointer select-none hover:bg-muted/50' : '',
+                      header.column.id === 'actions' ? 'w-12' : '',
+                      allTaskTypes.includes(header.column.id) ? 'w-[140px]' : '',
+                    ]"
+                    @click="header.column.getCanSort() ? header.column.toggleSorting() : null"
+                  >
+                    <FlexRender
+                      v-if="!header.isPlaceholder"
+                      :render="header.column.columnDef.header"
+                      :props="header.getContext()"
+                    />
+                  </TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                <TableRow
+                  v-for="row in table.getRowModel().rows"
+                  :key="row.id"
+                  :data-state="row.getIsSelected() ? 'selected' : undefined"
+                  class="cursor-pointer hover:bg-muted/50 h-12"
+                  :class="{ 'bg-muted/30': row.getIsSelected(), 'table-row-selectable': true, 'selecting': isRangeSelecting }"
+                  @click="handleRowClick(row.original, $event, row)"
+                  @dblclick="emit('row-dblclick', row.original)"
+                  @mousedown="handleMouseDown"
+                  @mouseup="handleMouseUp"
+                >
+                  <TableCell
+                    v-for="cell in movableCells(row)"
+                    :key="cell.id"
+                    v-memo="[cell.getValue(), cell.column.getIsVisible()]"
+                  >
+                    <FlexRender :render="cell.column.columnDef.cell" :props="cell.getContext()" />
+                  </TableCell>
+                </TableRow>
+              </TableBody>
+            </table>
+          </div>
+        </div>
+        <div v-else class="h-24 flex items-center justify-center text-sm text-muted-foreground">
+          No results.
+        </div>
+      </template>
+
+      <!-- Unlocked: standard single table -->
+      <Table v-else>
         <TableHeader>
           <TableRow v-for="headerGroup in table.getHeaderGroups()" :key="headerGroup.id">
             <TableHead
@@ -31,7 +131,7 @@
               :key="row.id"
               :data-state="row.getIsSelected() ? 'selected' : undefined"
               class="cursor-pointer hover:bg-muted/50"
-              :class="{ 
+              :class="{
                 'bg-muted/30': row.getIsSelected(),
                 'table-row-selectable': true,
                 'selecting': isRangeSelecting
@@ -69,13 +169,15 @@
 
 <script setup lang="ts">
 
-import { ref, watch } from 'vue'
+import { ref, computed, watch } from 'vue'
 import {
   FlexRender,
   getCoreRowModel,
   getSortedRowModel,
   useVueTable,
   type ColumnDef,
+  type HeaderGroup,
+  type Row,
   type SortingState,
   type VisibilityState,
 } from '@tanstack/vue-table'
@@ -95,10 +197,51 @@ interface Props {
   sorting: SortingState
   columnVisibility: VisibilityState
   allTaskTypes: string[]
+  lockColumns?: boolean
 }
 
 const props = defineProps<Props>()
 
+// Frozen (locked) columns and their fixed widths (px), in column order.
+const FROZEN: Record<string, number> = {
+  select: 48,
+  thumbnail: 96,
+  name: 200,
+}
+
+const isFrozen = (id: string) => id in FROZEN
+
+const frozenWidth = (id: string) => {
+  const w = FROZEN[id]
+  return w ? { width: `${w}px`, minWidth: `${w}px` } : undefined
+}
+
+// Column partitioning for the two-pane (locked) layout. Movable headers/cells
+// respect column visibility; frozen ones are always shown.
+const frozenHeaders = (group: HeaderGroup<Shot>) =>
+  group.headers.filter((h) => isFrozen(h.column.id) && h.column.getIsVisible())
+const movableHeaders = (group: HeaderGroup<Shot>) =>
+  group.headers.filter((h) => !isFrozen(h.column.id) && h.column.getIsVisible())
+const frozenCells = (row: Row<Shot>) =>
+  row.getVisibleCells().filter((c) => isFrozen(c.column.id))
+const movableCells = (row: Row<Shot>) =>
+  row.getVisibleCells().filter((c) => !isFrozen(c.column.id))
+
+const hasRows = computed(() => table.getRowModel().rows.length > 0)
+
+// Sync vertical scroll between the two panes (right pane owns the scrollbars).
+const leftPane = ref<HTMLElement>()
+const rightPane = ref<HTMLElement>()
+let syncing = false
+const syncScroll = (from?: HTMLElement, to?: HTMLElement) => {
+  if (syncing || !from || !to) return
+  syncing = true
+  to.scrollTop = from.scrollTop
+  requestAnimationFrame(() => { syncing = false })
+}
+const onRightScroll = () => syncScroll(rightPane.value, leftPane.value)
+const onLeftScroll = () => syncScroll(leftPane.value, rightPane.value)
+
 const emit = defineEmits<{
   'update:sorting': [sorting: SortingState]
   'update:columnVisibility': [visibility: VisibilityState]
@@ -280,4 +423,13 @@ watch(
   -ms-user-select: text;
   user-select: text;
 }
+
+/* Hide the left pane's vertical scrollbar (its scroll is synced from the right pane) */
+.scrollbar-hide {
+  scrollbar-width: none; /* Firefox */
+  -ms-overflow-style: none; /* IE/Edge */
+}
+.scrollbar-hide::-webkit-scrollbar {
+  display: none; /* Chrome/Safari */
+}
 </style>
diff --git a/frontend/src/components/ui/table/Table.vue b/frontend/src/components/ui/table/Table.vue
index 26c7c45..ab3cdd8 100644
--- a/frontend/src/components/ui/table/Table.vue
+++ b/frontend/src/components/ui/table/Table.vue
@@ -8,7 +8,7 @@ const props = defineProps<{
 </script>
 
 <template>
-  <div class="relative w-full overflow-auto">
+  <div class="relative w-full h-full overflow-auto">
     <table :class="cn('w-full caption-bottom text-sm', props.class)">
       <slot />
     </table>
diff --git a/frontend/src/views/project/ProjectShotsView.vue b/frontend/src/views/project/ProjectShotsView.vue
index f49f491..9ad785d 100644
--- a/frontend/src/views/project/ProjectShotsView.vue
+++ b/frontend/src/views/project/ProjectShotsView.vue
@@ -13,9 +13,9 @@
     </div>
 
     <!-- Content -->
-    <div class="flex-1 overflow-auto">
+    <div class="flex-1 overflow-hidden flex flex-col min-h-0">
       <!-- Shot Browser -->
-      <div v-if="projectId">
+      <div v-if="projectId" class="flex-1 min-h-0 flex flex-col">
         <ShotBrowser 
           :project-id="projectId" 
           :selected-episode-id="selectedEpisodeId ?? undefined"