diff --git a/ui/src/components/filtering/default-filter-control.tsx b/ui/src/components/filtering/default-filter-control.tsx
index 888d71efa..ef8673c5e 100644
--- a/ui/src/components/filtering/default-filter-control.tsx
+++ b/ui/src/components/filtering/default-filter-control.tsx
@@ -49,20 +49,13 @@ export const DefaultFiltersControl = ({ field }: { field: string }) => {
 }
 
 export const DefaultFiltersTooltip = ({
-  className,
   project,
 }: {
-  className?: string
   project: ProjectDetails
 }) => (
   <Popover.Root>
     <Popover.Trigger asChild>
-      <Button
-        aria-label={translate(STRING.INFO)}
-        className={className}
-        size="icon"
-        variant="ghost"
-      >
+      <Button aria-label={translate(STRING.INFO)} size="icon" variant="ghost">
         <InfoIcon className="w-4 h-4" />
       </Button>
     </Popover.Trigger>
diff --git a/ui/src/nova-ui-kit/components/checkbox/checkbox.module.scss b/ui/src/nova-ui-kit/components/checkbox/checkbox.module.scss
index c63648fcd..d72cddbeb 100644
--- a/ui/src/nova-ui-kit/components/checkbox/checkbox.module.scss
+++ b/ui/src/nova-ui-kit/components/checkbox/checkbox.module.scss
@@ -14,10 +14,6 @@
   border: 1px solid var(--color-border);
   flex-shrink: 0;
 
-  &.neutral {
-    border-color: var(--color-neutral-400);
-  }
-
   &:focus-visible {
     box-shadow: 0 0 0 2px var(--color-generic-black);
   }
@@ -50,18 +46,6 @@
   color: var(--color-muted-foreground);
   margin-left: 6px;
 
-  &.success {
-    color: var(--color-success);
-  }
-
-  &.alert {
-    color: var(--color-accent);
-  }
-
-  &.neutral {
-    color: var(--color-generic-white);
-  }
-
   &.disabled {
     opacity: 0.5;
   }
diff --git a/ui/src/nova-ui-kit/components/checkbox/checkbox.tsx b/ui/src/nova-ui-kit/components/checkbox/checkbox.tsx
index 4d8ca6961..5a5276e54 100644
--- a/ui/src/nova-ui-kit/components/checkbox/checkbox.tsx
+++ b/ui/src/nova-ui-kit/components/checkbox/checkbox.tsx
@@ -3,19 +3,11 @@ import classNames from 'classnames'
 import { CheckIcon, MinusIcon } from 'lucide-react'
 import styles from './checkbox.module.scss'
 
-export enum CheckboxTheme {
-  Default = 'default',
-  Success = 'success',
-  Alert = 'alert',
-  Neutral = 'neutral',
-}
-
 interface CheckboxProps {
   checked: boolean | 'indeterminate'
   disabled?: boolean
   id?: string
   label?: string
-  theme?: CheckboxTheme
   onCheckedChange?: (checked: boolean) => void
 }
 
@@ -24,15 +16,12 @@ export const Checkbox = ({
   disabled,
   id,
   label,
-  theme = CheckboxTheme.Default,
   onCheckedChange,
 }: CheckboxProps) => (
   <div className={styles.wrapper}>
     <_Checkbox.Root
       checked={checked}
-      className={classNames(styles.checkboxRoot, {
-        [styles.neutral]: theme === CheckboxTheme.Neutral,
-      })}
+      className={styles.checkboxRoot}
       disabled={disabled}
       id={id}
       onCheckedChange={onCheckedChange}
@@ -48,9 +37,6 @@ export const Checkbox = ({
       <label
         htmlFor={id}
         className={classNames(styles.label, {
-          [styles.success]: theme === CheckboxTheme.Success,
-          [styles.alert]: theme === CheckboxTheme.Alert,
-          [styles.neutral]: theme === CheckboxTheme.Neutral,
           [styles.disabled]: disabled,
         })}
       >
diff --git a/ui/src/nova-ui-kit/components/info-block/info-block.tsx b/ui/src/nova-ui-kit/components/info-block/info-block.tsx
index 3ae84f52e..b08162e48 100644
--- a/ui/src/nova-ui-kit/components/info-block/info-block.tsx
+++ b/ui/src/nova-ui-kit/components/info-block/info-block.tsx
@@ -62,7 +62,7 @@ export const InfoBlockFieldValue = ({
           </span>
         </Link>
       ) : (
-        <span className="body-base">{valueLabel}</span>
+        <span className="body-base break-all">{valueLabel}</span>
       )}
     </>
   )
diff --git a/ui/src/nova-ui-kit/components/slider/dial.svg b/ui/src/nova-ui-kit/components/slider/dial.svg
deleted file mode 100644
index 69dacc0d0..000000000
--- a/ui/src/nova-ui-kit/components/slider/dial.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="28" height="22" viewBox="0 0 28 22" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M11.4861 1.74566C12.6726 -0.0362191 15.2899 -0.0377217 16.4784 1.7428L26.8858 17.3345C28.2165 19.328 26.7875 22 24.3906 22H3.60169C1.20638 22 -0.22295 19.3311 1.10458 17.3373L11.4861 1.74566Z" fill="#DEDEDF"/>
-</svg>
diff --git a/ui/src/nova-ui-kit/components/slider/timestamp-slider.tsx b/ui/src/nova-ui-kit/components/slider/timestamp-slider.tsx
deleted file mode 100644
index 4529fde61..000000000
--- a/ui/src/nova-ui-kit/components/slider/timestamp-slider.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-import * as _Slider from '@radix-ui/react-slider'
-import Dial from './dial.svg?react'
-import styles from './styles.module.scss'
-
-interface TimestampSliderProps {
-  labels: string[]
-  value: number
-  valueLabel?: string
-  onValueChange: (value: number) => void
-  onValueCommit: (value: number) => void
-}
-
-export const TimestampSlider = ({
-  labels,
-  value,
-  valueLabel,
-  onValueChange,
-  onValueCommit,
-}: TimestampSliderProps) => (
-  <div className={styles.timestampSlider}>
-    <_Slider.Root
-      className={styles.sliderRoot}
-      min={0}
-      max={100}
-      step={0.01}
-      value={[value]}
-      onValueChange={(values) => onValueChange(values[0])}
-      onValueCommit={(values) => onValueCommit(values[0])}
-    >
-      <_Slider.Track className={styles.sliderTrack}>
-        <_Slider.Range className={styles.sliderRange} />
-      </_Slider.Track>
-      <_Slider.Thumb className={styles.sliderThumb}>
-        {valueLabel && <span className={styles.label}>{valueLabel}</span>}
-        <Dial />
-      </_Slider.Thumb>
-    </_Slider.Root>
-    <div className={styles.labels}>
-      {labels.map((label, index) => (
-        <span key={index} className={styles.label}>
-          {label}
-        </span>
-      ))}
-    </div>
-  </div>
-)
diff --git a/ui/src/nova-ui-kit/components/status/status-marker/status-marker.module.scss b/ui/src/nova-ui-kit/components/status/status-marker/status-marker.module.scss
index 3860f5e00..069a75dbf 100644
--- a/ui/src/nova-ui-kit/components/status/status-marker/status-marker.module.scss
+++ b/ui/src/nova-ui-kit/components/status/status-marker/status-marker.module.scss
@@ -1,6 +1,6 @@
 .statusMarker {
-  width: 12px;
-  height: 12px;
+  width: 8px;
+  height: 8px;
   border-radius: 50%;
   background-color: var(--color-border);
 }
diff --git a/ui/src/nova-ui-kit/components/table/column-settings/column-settings.module.scss b/ui/src/nova-ui-kit/components/table/column-settings/column-settings.module.scss
deleted file mode 100644
index d5bca332e..000000000
--- a/ui/src/nova-ui-kit/components/table/column-settings/column-settings.module.scss
+++ /dev/null
@@ -1,20 +0,0 @@
-.wrapper {
-  width: auto !important;
-  min-width: 180px;
-  padding: 24px;
-  box-sizing: border-box;
-}
-
-.description {
-  display: block;
-  @include body-small();
-  font-weight: 600;
-  color: var(--color-muted-foreground);
-  margin-bottom: 16px;
-}
-
-.settings {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-}
diff --git a/ui/src/nova-ui-kit/components/table/column-settings/column-settings.tsx b/ui/src/nova-ui-kit/components/table/column-settings/column-settings.tsx
index 03c061b1d..1d79f6925 100644
--- a/ui/src/nova-ui-kit/components/table/column-settings/column-settings.tsx
+++ b/ui/src/nova-ui-kit/components/table/column-settings/column-settings.tsx
@@ -1,7 +1,6 @@
 import { Columns3CogIcon } from 'lucide-react'
 import { BasicTooltip, Button, Checkbox, Popover } from 'nova-ui-kit'
 import { STRING, translate } from 'utils/language'
-import styles from './column-settings.module.scss'
 
 interface ColumnSettingsProps {
   columns: { id: string; name: string }[]
@@ -27,29 +26,27 @@ export const ColumnSettings = ({
         </Button>
       </Popover.Trigger>
     </BasicTooltip>
-    <Popover.Content className={styles.wrapper} align="end" side="bottom">
-      <div>
-        <span className={styles.description}>
-          {translate(STRING.TABLE_COLUMNS)}
-        </span>
-        <div className={styles.settings}>
-          {columns.map((column) =>
-            column.name.length ? (
-              <Checkbox
-                key={column.id}
-                checked={columnSettings[column.id]}
-                id={column.id}
-                label={column.name}
-                onCheckedChange={(checked) => {
-                  onColumnSettingsChange({
-                    ...columnSettings,
-                    [column.id]: checked,
-                  })
-                }}
-              />
-            ) : null
-          )}
-        </div>
+    <Popover.Content className="grid gap-4" align="end" side="bottom">
+      <span className="body-base font-semibold text-muted-foreground">
+        {translate(STRING.TABLE_COLUMNS)}
+      </span>
+      <div className="grid gap-2">
+        {columns.map((column) =>
+          column.name.length ? (
+            <Checkbox
+              key={column.id}
+              checked={columnSettings[column.id]}
+              id={column.id}
+              label={column.name}
+              onCheckedChange={(checked) => {
+                onColumnSettingsChange({
+                  ...columnSettings,
+                  [column.id]: checked,
+                })
+              }}
+            />
+          ) : null
+        )}
       </div>
     </Popover.Content>
   </Popover.Root>
diff --git a/ui/src/nova-ui-kit/components/tabs/tabs.tsx b/ui/src/nova-ui-kit/components/tabs/tabs.tsx
index d8b3f971d..1b03e56b4 100644
--- a/ui/src/nova-ui-kit/components/tabs/tabs.tsx
+++ b/ui/src/nova-ui-kit/components/tabs/tabs.tsx
@@ -43,13 +43,15 @@ const Trigger = ({ value, label }: { value: string; label: string }) => (
 )
 
 const Content = ({
-  value,
   children,
+  className,
+  value,
 }: {
-  value: string
   children: ReactNode
+  className?: string
+  value: string
 }) => (
-  <Tabs.Content value={value} tabIndex={-1}>
+  <Tabs.Content className={className} tabIndex={-1} value={value}>
     {children}
   </Tabs.Content>
 )
diff --git a/ui/src/nova-ui-kit/global.scss b/ui/src/nova-ui-kit/global.scss
index ded841ea7..3f974a894 100644
--- a/ui/src/nova-ui-kit/global.scss
+++ b/ui/src/nova-ui-kit/global.scss
@@ -41,53 +41,53 @@
 }
 
 .heading-large {
-  @include heading-large();
+  @include heading-large;
 }
 
 .heading-medium {
-  @include heading-medium();
+  @include heading-medium;
 }
 
 .heading-small {
-  @include heading-small();
+  @include heading-small;
 }
 
 .body-xlarge {
-  @include body-xlarge();
+  @include body-xlarge;
 }
 
 .body-large {
-  @include body-large();
+  @include body-large;
 }
 
 .body-base {
-  @include body-base();
+  @include body-base;
 }
 
 .body-small {
-  @include body-small();
+  @include body-small;
 }
 
 .body-overline {
-  @include body-overline();
+  @include body-overline;
 }
 
 .body-overline-small {
-  @include body-overline-small();
+  @include body-overline-small;
 }
 
 .body-overline-xsmall {
-  @include body-overline-xsmall();
+  @include body-overline-xsmall;
 }
 
 .body-number {
-  @include body-number();
+  @include body-number;
 }
 
 .body-number-small {
-  @include body-number-small();
+  @include body-number-small;
 }
 
 .bubble-label {
-  @include body-number-small();
+  @include bubble-label;
 }
diff --git a/ui/src/nova-ui-kit/index.ts b/ui/src/nova-ui-kit/index.ts
index 82f52bb1b..0e60f3ce8 100644
--- a/ui/src/nova-ui-kit/index.ts
+++ b/ui/src/nova-ui-kit/index.ts
@@ -9,7 +9,7 @@ export { Button } from './components/button/index'
 export { SaveButton } from './components/button/save-button'
 export { Calendar } from './components/calendar'
 export { Card, CardSize } from './components/card/card'
-export { Checkbox, CheckboxTheme } from './components/checkbox/checkbox'
+export { Checkbox } from './components/checkbox/checkbox'
 export { CodeBlock } from './components/code-block'
 export * as Collapsible from './components/collapsible'
 export { ComboBox } from './components/combo-box/combo-box'
diff --git a/ui/src/pages/deployments/deployment-columns.tsx b/ui/src/pages/deployments/deployment-columns.tsx
index f29cb2ab1..95fb1a9f4 100644
--- a/ui/src/pages/deployments/deployment-columns.tsx
+++ b/ui/src/pages/deployments/deployment-columns.tsx
@@ -80,7 +80,7 @@ export const columns = ({
   },
   {
     id: 'status',
-    name: 'Latest job status',
+    name: translate(STRING.FIELD_LABEL_LATEST_JOB_STATUS),
     tooltip: translate(STRING.TOOLTIP_LATEST_JOB_STATUS, {
       type: translate(STRING.ENTITY_TYPE_DEPLOYMENT),
     }),
diff --git a/ui/src/pages/project/capture-sets/capture-set-columns.tsx b/ui/src/pages/project/capture-sets/capture-set-columns.tsx
index 1da9b5d9a..9ca6381c0 100644
--- a/ui/src/pages/project/capture-sets/capture-set-columns.tsx
+++ b/ui/src/pages/project/capture-sets/capture-set-columns.tsx
@@ -48,7 +48,7 @@ export const columns = ({
   },
   {
     id: 'status',
-    name: 'Latest job status',
+    name: translate(STRING.FIELD_LABEL_LATEST_JOB_STATUS),
     tooltip: translate(STRING.TOOLTIP_LATEST_JOB_STATUS, {
       type: translate(STRING.ENTITY_TYPE_CAPTURE_SET),
     }),
diff --git a/ui/src/pages/session-details/playback/activity-plot/activity-plot.tsx b/ui/src/pages/session-details/activity-plot/activity-plot.tsx
similarity index 86%
rename from ui/src/pages/session-details/playback/activity-plot/activity-plot.tsx
rename to ui/src/pages/session-details/activity-plot/activity-plot.tsx
index c0cd3aae7..9c61728dd 100644
--- a/ui/src/pages/session-details/playback/activity-plot/activity-plot.tsx
+++ b/ui/src/pages/session-details/activity-plot/activity-plot.tsx
@@ -1,20 +1,29 @@
+import { SessionDetails } from 'data-services/models/session-details'
+import { TimelineTick } from 'data-services/models/timeline-tick'
 import { CONSTANTS } from 'nova-ui-kit'
 import { useRef } from 'react'
 import Plot from 'react-plotly.js'
 import { getCompactTimespanString } from 'utils/date/getCompactTimespanString/getCompactTimespanString'
 import { findClosestCaptureId } from '../utils'
-import { ActivityPlotProps } from './types'
 import { useDynamicPlotWidth } from './useDynamicPlotWidth'
 
-const fontFamily = 'Mazzard, sans-serif'
-const lineColorCaptures = CONSTANTS.COLORS.neutral[500]
-const lineColorDetections = CONSTANTS.COLORS.secondary[500]
-const spikeColor = CONSTANTS.COLORS.generic.white
-const textColor = CONSTANTS.COLOR_THEME.muted.foreground
-const tooltipBgColor = CONSTANTS.COLORS.generic.white
-const tooltipBorderColor = CONSTANTS.COLOR_THEME.muted.foreground
+const fontFamily = 'Mazzard'
+const fontSize = 14
+const lineColorCaptures = CONSTANTS.COLORS.neutral[300]
+const lineColorDetections = CONSTANTS.COLOR_THEME.secondary.DEFAULT
+const spikeColor = CONSTANTS.COLOR_THEME.foreground
+const textColor = CONSTANTS.COLOR_THEME.foreground
+const tooltipBgColor = CONSTANTS.COLOR_THEME.background
+const tooltipBorderColor = CONSTANTS.COLOR_THEME.border
 
-const ActivityPlot = ({
+export interface ActivityPlotProps {
+  session: SessionDetails
+  setActiveCaptureId: (captureId: string) => void
+  snapToDetections?: boolean
+  timeline: TimelineTick[]
+}
+
+export const ActivityPlot = ({
   session,
   snapToDetections,
   timeline,
@@ -130,7 +139,7 @@ const ActivityPlot = ({
               bordercolor: tooltipBorderColor,
               font: {
                 family: fontFamily,
-                size: 12,
+                size: fontSize,
                 color: textColor,
               },
             },
diff --git a/ui/src/pages/session-details/playback/activity-plot/lazy-activity-plot.tsx b/ui/src/pages/session-details/activity-plot/lazy-activity-plot.tsx
similarity index 76%
rename from ui/src/pages/session-details/playback/activity-plot/lazy-activity-plot.tsx
rename to ui/src/pages/session-details/activity-plot/lazy-activity-plot.tsx
index 267a2b5a8..f0de0a6d8 100644
--- a/ui/src/pages/session-details/playback/activity-plot/lazy-activity-plot.tsx
+++ b/ui/src/pages/session-details/activity-plot/lazy-activity-plot.tsx
@@ -1,15 +1,14 @@
 import { ErrorBoundary } from 'components/error-boundary/error-boundary'
 import { LoadingSpinner } from 'nova-ui-kit'
 import React, { Suspense } from 'react'
-import styles from './lazy-activity-plot.module.scss'
-import { ActivityPlotProps } from './types'
+import { ActivityPlotProps } from './activity-plot'
 
 const _ActivityPlot = React.lazy(() => import('./activity-plot'))
 
 export const ActivityPlot = (props: ActivityPlotProps) => (
   <Suspense
     fallback={
-      <div className={styles.loadingWrapper}>
+      <div>
         <LoadingSpinner size={32} />
       </div>
     }
diff --git a/ui/src/pages/session-details/playback/activity-plot/useDynamicPlotWidth.ts b/ui/src/pages/session-details/activity-plot/useDynamicPlotWidth.ts
similarity index 100%
rename from ui/src/pages/session-details/playback/activity-plot/useDynamicPlotWidth.ts
rename to ui/src/pages/session-details/activity-plot/useDynamicPlotWidth.ts
diff --git a/ui/src/pages/session-details/capture-info.tsx b/ui/src/pages/session-details/capture-info.tsx
new file mode 100644
index 000000000..30638bd65
--- /dev/null
+++ b/ui/src/pages/session-details/capture-info.tsx
@@ -0,0 +1,47 @@
+import { CaptureDetails } from 'data-services/models/capture-details'
+import { InfoBlock } from 'nova-ui-kit'
+import { useParams } from 'react-router-dom'
+import { APP_ROUTES } from 'utils/constants'
+import { getAppRoute } from 'utils/getAppRoute'
+import { STRING, translate } from 'utils/language'
+
+export const CaptureInfo = ({ capture }: { capture: CaptureDetails }) => {
+  const { projectId } = useParams()
+
+  const fields = [
+    {
+      label: translate(STRING.FIELD_LABEL_ID),
+      value: capture.id,
+    },
+    {
+      label: translate(STRING.FIELD_LABEL_FILE_SIZE),
+      value: capture.fileSize,
+    },
+    {
+      label: translate(STRING.FIELD_LABEL_RESOLUTION),
+      value: capture.dimensionsLabel,
+    },
+    {
+      label: translate(STRING.FIELD_LABEL_FILENAME),
+      value: capture.filename,
+    },
+    {
+      label: translate(STRING.FIELD_LABEL_PATH),
+      value: capture.path,
+    },
+    {
+      label: translate(STRING.FIELD_LABEL_OCCURRENCES),
+      value: capture.numOccurrences,
+      to: getAppRoute({
+        to: APP_ROUTES.OCCURRENCES({ projectId: projectId as string }),
+        filters: { detections__source_image: capture.id },
+      }),
+    },
+    {
+      label: translate(STRING.FIELD_LABEL_TAXA),
+      value: capture.numTaxa,
+    },
+  ]
+
+  return <InfoBlock fields={fields} />
+}
diff --git a/ui/src/pages/session-details/playback/capture-navigation/capture-navigation.tsx b/ui/src/pages/session-details/capture-navigation.tsx
similarity index 50%
rename from ui/src/pages/session-details/playback/capture-navigation/capture-navigation.tsx
rename to ui/src/pages/session-details/capture-navigation.tsx
index 7827ad613..d918d628a 100644
--- a/ui/src/pages/session-details/playback/capture-navigation/capture-navigation.tsx
+++ b/ui/src/pages/session-details/capture-navigation.tsx
@@ -1,20 +1,22 @@
 import { CaptureDetails } from 'data-services/models/capture-details'
 import { TimelineTick } from 'data-services/models/timeline-tick'
-import { ChevronLeftIcon, ChevronRightIcon } from 'lucide-react'
-import { Button } from 'nova-ui-kit'
+import {
+  ChevronLeftIcon,
+  ChevronRightIcon,
+  ChevronsLeftIcon,
+  ChevronsRightIcon,
+} from 'lucide-react'
+import { BasicTooltip, Button } from 'nova-ui-kit'
 import { useEffect, useState } from 'react'
 import { STRING, translate } from 'utils/language'
-import { findClosestCaptureId } from '../utils'
-import styles from './capture-navigation.module.scss'
+import { findClosestCaptureId } from './utils'
 
 export const CaptureNavigation = ({
   activeCapture,
-  snapToDetections,
   timeline,
   setActiveCaptureId,
 }: {
   activeCapture?: CaptureDetails
-  snapToDetections?: boolean
   timeline: TimelineTick[]
   setActiveCaptureId: (captureId: string) => void
 }) => {
@@ -31,18 +33,25 @@ export const CaptureNavigation = ({
   }, [activeCapture])
 
   const goToPrev = () => {
+    if (!activeCapture?.prevCaptureId) {
+      return
+    }
+
+    setActiveCaptureId(activeCapture.prevCaptureId)
+  }
+
+  const goToPrevWithDetections = () => {
     if (!activeCapture) {
       return
     }
 
-    const prevCaptureId = snapToDetections
-      ? findClosestCaptureId({
-          maxDate: activeCapture.date,
-          snapToDetections: true,
-          targetDate: activeCapture.date,
-          timeline,
-        })
-      : activeCapture.prevCaptureId
+    const prevCaptureId =
+      findClosestCaptureId({
+        maxDate: activeCapture.date,
+        snapToDetections: true,
+        targetDate: activeCapture.date,
+        timeline,
+      }) ?? activeCapture.prevCaptureId
 
     if (prevCaptureId) {
       setActiveCaptureId(prevCaptureId)
@@ -50,18 +59,25 @@ export const CaptureNavigation = ({
   }
 
   const goToNext = () => {
+    if (!activeCapture?.nextCaptureId) {
+      return
+    }
+
+    setActiveCaptureId(activeCapture.nextCaptureId)
+  }
+
+  const goToNextWithDetections = () => {
     if (!activeCapture) {
       return
     }
 
-    const nextCaptureId = snapToDetections
-      ? findClosestCaptureId({
-          minDate: activeCapture.date,
-          snapToDetections: true,
-          targetDate: activeCapture.date,
-          timeline,
-        })
-      : activeCapture.nextCaptureId
+    const nextCaptureId =
+      findClosestCaptureId({
+        minDate: activeCapture.date,
+        snapToDetections: true,
+        targetDate: activeCapture.date,
+        timeline,
+      }) ?? activeCapture.nextCaptureId
 
     if (nextCaptureId) {
       setActiveCaptureId(nextCaptureId)
@@ -86,30 +102,50 @@ export const CaptureNavigation = ({
   }, [goToPrev, goToNext])
 
   return (
-    <div className={styles.wrapper}>
+    <div className="flex items-center justify-center gap-1">
+      <BasicTooltip asChild content={translate(STRING.SNAP_TO_DETECTIONS)}>
+        <Button
+          aria-label={translate(STRING.SNAP_TO_DETECTIONS)}
+          disabled={!activeCapture?.prevCaptureId}
+          onClick={goToPrevWithDetections}
+          size="icon"
+          variant="outline"
+        >
+          <ChevronsLeftIcon className="w-4 h-4" />
+        </Button>
+      </BasicTooltip>
       <Button
         aria-label={translate(STRING.PREVIOUS)}
-        className="!bg-neutral-700 text-neutral-200"
         disabled={!activeCapture?.prevCaptureId}
         onClick={goToPrev}
         size="icon"
+        variant="outline"
       >
         <ChevronLeftIcon className="w-4 h-4" />
       </Button>
-      {totalCaptures && (
-        <span>
-          {currentIndex?.toLocaleString()} / {totalCaptures.toLocaleString()}
-        </span>
-      )}
+      <span className="pt-0.5 px-3">
+        {currentIndex?.toLocaleString()} / {totalCaptures?.toLocaleString()}
+      </span>
       <Button
         aria-label={translate(STRING.NEXT)}
-        className="!bg-neutral-700 text-neutral-200"
         disabled={!activeCapture?.nextCaptureId}
         onClick={goToNext}
         size="icon"
+        variant="outline"
       >
         <ChevronRightIcon className="w-4 h-4" />
       </Button>
+      <BasicTooltip asChild content={translate(STRING.SNAP_TO_DETECTIONS)}>
+        <Button
+          aria-label={translate(STRING.SNAP_TO_DETECTIONS)}
+          disabled={!activeCapture?.nextCaptureId}
+          onClick={goToNextWithDetections}
+          size="icon"
+          variant="outline"
+        >
+          <ChevronsRightIcon className="w-4 h-4" />
+        </Button>
+      </BasicTooltip>
     </div>
   )
 }
diff --git a/ui/src/pages/session-details/playback/frame/frame.module.scss b/ui/src/pages/session-details/capture/capture.module.scss
similarity index 100%
rename from ui/src/pages/session-details/playback/frame/frame.module.scss
rename to ui/src/pages/session-details/capture/capture.module.scss
diff --git a/ui/src/pages/session-details/playback/frame/frame.tsx b/ui/src/pages/session-details/capture/capture.tsx
similarity index 94%
rename from ui/src/pages/session-details/playback/frame/frame.tsx
rename to ui/src/pages/session-details/capture/capture.tsx
index e5e9ab5b6..f9da38228 100644
--- a/ui/src/pages/session-details/playback/frame/frame.tsx
+++ b/ui/src/pages/session-details/capture/capture.tsx
@@ -10,13 +10,19 @@ import {
 import { useLayoutEffect, useMemo, useRef, useState } from 'react'
 import { SCORE_THRESHOLDS } from 'utils/constants'
 import { STRING, translate } from 'utils/language'
-import { useActiveOccurrences } from '../useActiveOccurrences'
-import styles from './frame.module.scss'
-import { BoxStyle } from './types'
+import { useActiveOccurrences } from '../hooks/useActiveOccurrences'
+import styles from './capture.module.scss'
 
 const FALLBACK_RATIO = 16 / 9
 
-interface FrameProps {
+interface BoxStyle {
+  width: string
+  height: string
+  top: string
+  left: string
+}
+
+interface CaptureProps {
   defaultFilters: boolean
   detections: CaptureDetection[]
   height: number | null
@@ -25,14 +31,14 @@ interface FrameProps {
   width: number | null
 }
 
-export const Frame = ({
+export const Capture = ({
   defaultFilters,
   detections,
   height,
   showDetections,
   src,
   width,
-}: FrameProps) => {
+}: CaptureProps) => {
   const [naturalSize, setNaturalSize] = useState<{
     width: number
     height: number
@@ -121,11 +127,11 @@ export const Frame = ({
       <img ref={imageRef} className={styles.image} />
       <div
         className={classNames(styles.details, {
-          [styles.showOverlay]: showDetections,
+          [styles.showOverlay]: showDetections && detections.length,
         })}
       >
-        {renderOverlay && <FrameOverlay boxStyles={boxStyles} />}
-        <FrameDetections
+        {renderOverlay && <CaptureOverlay boxStyles={boxStyles} />}
+        <CaptureDetections
           boxStyles={boxStyles}
           defaultFilters={defaultFilters}
           detections={detections}
@@ -141,7 +147,7 @@ export const Frame = ({
   )
 }
 
-const FrameOverlay = ({
+const CaptureOverlay = ({
   boxStyles,
 }: {
   boxStyles: { [key: number]: BoxStyle }
@@ -172,7 +178,7 @@ const FrameOverlay = ({
   </svg>
 )
 
-const FrameDetections = ({
+const CaptureDetections = ({
   boxStyles,
   defaultFilters,
   detections,
@@ -273,7 +279,7 @@ const FrameDetections = ({
   )
 }
 
-export const OccurrenceDetailsDialog = ({
+const OccurrenceDetailsDialog = ({
   id,
   onClose,
 }: {
diff --git a/ui/src/pages/session-details/playback/useActiveCapture.ts b/ui/src/pages/session-details/hooks/useActiveCapture.ts
similarity index 100%
rename from ui/src/pages/session-details/playback/useActiveCapture.ts
rename to ui/src/pages/session-details/hooks/useActiveCapture.ts
diff --git a/ui/src/pages/session-details/playback/useActiveOccurrences.ts b/ui/src/pages/session-details/hooks/useActiveOccurrences.ts
similarity index 100%
rename from ui/src/pages/session-details/playback/useActiveOccurrences.ts
rename to ui/src/pages/session-details/hooks/useActiveOccurrences.ts
diff --git a/ui/src/pages/session-details/playback/activity-plot/lazy-activity-plot.module.scss b/ui/src/pages/session-details/playback/activity-plot/lazy-activity-plot.module.scss
deleted file mode 100644
index fbd54d943..000000000
--- a/ui/src/pages/session-details/playback/activity-plot/lazy-activity-plot.module.scss
+++ /dev/null
@@ -1,6 +0,0 @@
-.loadingWrapper {
-  height: 100px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
diff --git a/ui/src/pages/session-details/playback/activity-plot/types.ts b/ui/src/pages/session-details/playback/activity-plot/types.ts
deleted file mode 100644
index f96e2663e..000000000
--- a/ui/src/pages/session-details/playback/activity-plot/types.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import { SessionDetails } from 'data-services/models/session-details'
-import { TimelineTick } from 'data-services/models/timeline-tick'
-
-export interface ActivityPlotProps {
-  session: SessionDetails
-  snapToDetections?: boolean
-  timeline: TimelineTick[]
-  setActiveCaptureId: (captureId: string) => void
-}
diff --git a/ui/src/pages/session-details/playback/capture-details/capture-details.module.scss b/ui/src/pages/session-details/playback/capture-details/capture-details.module.scss
deleted file mode 100644
index 0dedcb269..000000000
--- a/ui/src/pages/session-details/playback/capture-details/capture-details.module.scss
+++ /dev/null
@@ -1,50 +0,0 @@
-.starButtonWrapper {
-  position: absolute;
-  top: 8px;
-  right: 8px;
-  display: flex;
-  gap: 8px;
-}
-
-.infoWrapper {
-  display: flex;
-  flex-direction: column;
-  gap: 24px;
-  overflow: hidden;
-}
-
-.jobControls {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 16px;
-  margin-top: 4px;
-}
-
-.label {
-  display: block;
-  @include body-overline();
-  font-weight: 600;
-  color: var(--color-neutral-500);
-  margin-bottom: 4px;
-}
-
-.value {
-  display: block;
-  @include body-base();
-  color: var(--color-generic-white);
-
-  &.bubble {
-    height: auto;
-    padding: 6px 8px 4px;
-    border-radius: 4px;
-    border: 1px solid var(--color-neutral-600);
-    background-color: var(--color-neutral-600);
-    font-weight: 600;
-  }
-}
-
-@media only screen and (max-width: $breakpoint-md) {
-  .infoWrapper {
-    display: none;
-  }
-}
diff --git a/ui/src/pages/session-details/playback/capture-details/capture-details.tsx b/ui/src/pages/session-details/playback/capture-details/capture-details.tsx
deleted file mode 100644
index 9f28e5653..000000000
--- a/ui/src/pages/session-details/playback/capture-details/capture-details.tsx
+++ /dev/null
@@ -1,276 +0,0 @@
-import classNames from 'classnames'
-import { useStarCapture } from 'data-services/hooks/captures/useStarCapture'
-import { usePipelines } from 'data-services/hooks/pipelines/usePipelines'
-import { useProjectDetails } from 'data-services/hooks/projects/useProjectDetails'
-import { CaptureDetails as Capture } from 'data-services/models/capture-details'
-import { Job } from 'data-services/models/job'
-import { ProcessingService } from 'data-services/models/processing-service'
-import { ExternalLinkIcon, Loader2Icon, StarIcon } from 'lucide-react'
-import { BasicTooltip, Button, buttonVariants, Select } from 'nova-ui-kit'
-import { useState } from 'react'
-import { Link, useParams } from 'react-router-dom'
-import { APP_ROUTES } from 'utils/constants'
-import { getAppRoute } from 'utils/getAppRoute'
-import { STRING, translate } from 'utils/language'
-import { useUser } from 'utils/user/userContext'
-import styles from './capture-details.module.scss'
-import { CaptureJobDialog } from './capture-job/capture-job-dialog'
-import { ProcessNow } from './capture-job/process-now'
-
-export const CaptureDetails = ({
-  capture,
-  captureId,
-  defaultFilters,
-}: {
-  capture?: Capture
-  captureId: string
-  defaultFilters: boolean
-}) => {
-  const { user } = useUser()
-  const { projectId } = useParams()
-
-  if (!capture) {
-    return null
-  }
-
-  return (
-    <>
-      <div className={styles.starButtonWrapper}>
-        {user.loggedIn && (
-          <StarButton
-            capture={capture}
-            captureId={captureId}
-            canStar={capture.canStar}
-          />
-        )}
-        <a
-          href={capture.url}
-          className={classNames(
-            buttonVariants({ size: 'icon' }),
-            'rounded-md !bg-neutral-700 text-neutral-200'
-          )}
-          rel="noreferrer"
-          target="_blank"
-        >
-          <ExternalLinkIcon className="w-4 h-4" />
-        </a>
-      </div>
-      <div className={styles.infoWrapper}>
-        <div className="flex items-start gap-8">
-          <div>
-            <span className={styles.label}>
-              {translate(STRING.FIELD_LABEL_TIMESTAMP)}
-            </span>
-            <span className={styles.value}>{capture.dateTimeLabel}</span>
-          </div>
-          <div>
-            <span className={styles.label}>
-              {translate(STRING.FIELD_LABEL_SIZE)}
-            </span>
-            <span className={styles.value}>{capture.sizeLabel}</span>
-          </div>
-        </div>
-        {user.loggedIn ? (
-          <div>
-            <span className={styles.label}>
-              {translate(STRING.FIELD_LABEL_PROCESS)}
-            </span>
-            <JobControls capture={capture} />
-          </div>
-        ) : null}
-        {user.loggedIn && capture.currentJob ? (
-          <div>
-            <span className={styles.label}>Latest job status</span>
-            <JobDetails job={capture.currentJob} />
-          </div>
-        ) : null}
-        <div className="flex items-start gap-8">
-          <div>
-            <span className={styles.label}>
-              {translate(STRING.FIELD_LABEL_JOBS)}
-            </span>
-            <Link
-              to={getAppRoute({
-                to: APP_ROUTES.JOBS({
-                  projectId: projectId as string,
-                }),
-                filters: {
-                  source_image_single: capture.id,
-                },
-              })}
-            >
-              <span className={classNames(styles.value, styles.bubble)}>
-                {capture.numJobs}
-              </span>
-            </Link>
-          </div>
-          <div>
-            <span className={styles.label}>
-              {translate(STRING.FIELD_LABEL_OCCURRENCES)}
-            </span>
-            <Link
-              to={getAppRoute({
-                to: APP_ROUTES.OCCURRENCES({
-                  projectId: projectId as string,
-                }),
-                filters: defaultFilters
-                  ? {
-                      detections__source_image: capture.id,
-                    }
-                  : {
-                      detections__source_image: capture.id,
-                      apply_defaults: 'false',
-                    },
-              })}
-            >
-              <span className={classNames(styles.value, styles.bubble)}>
-                {defaultFilters
-                  ? capture.numOccurrences
-                  : capture.numDetections}
-              </span>
-            </Link>
-          </div>
-          <div>
-            <span className={styles.label}>
-              {translate(STRING.FIELD_LABEL_TAXA)}
-            </span>
-            <span
-              className={classNames(styles.value, styles.bubble)}
-              style={{ backgroundColor: 'transparent', border: 'none' }}
-            >
-              {capture.numTaxa}
-            </span>
-          </div>
-        </div>
-      </div>
-    </>
-  )
-}
-
-const StarButton = ({
-  capture,
-  captureFetching,
-  captureId,
-  canStar,
-}: {
-  capture?: Capture
-  captureFetching?: boolean
-  captureId: string
-  canStar: boolean
-}) => {
-  const isStarred = capture?.isStarred ?? false
-  const { starCapture, isLoading } = useStarCapture(captureId, isStarred)
-  const tooltipContent = canStar
-    ? isStarred
-      ? translate(STRING.STARRED)
-      : translate(STRING.STAR)
-    : translate(STRING.MESSAGE_PERMISSIONS_MISSING)
-
-  return (
-    <BasicTooltip asChild content={tooltipContent}>
-      <Button
-        aria-label={
-          isStarred ? translate(STRING.STARRED) : translate(STRING.STAR)
-        }
-        className="rounded-md !bg-neutral-700 text-neutral-200"
-        disabled={!canStar}
-        size="icon"
-        onClick={() => starCapture()}
-      >
-        {isLoading || captureFetching ? (
-          <Loader2Icon className="w-4 h-4 animate-spin" />
-        ) : (
-          <StarIcon
-            className="w-4 h-4 transition-colors"
-            fill={isStarred ? 'currentColor' : 'transparent'}
-          />
-        )}
-      </Button>
-    </BasicTooltip>
-  )
-}
-
-const JobControls = ({ capture }: { capture?: Capture }) => {
-  const { projectId } = useParams()
-  const { project } = useProjectDetails(projectId as string, true)
-  const [selectedPipelineId, setSelectedPipelineId] = useState(
-    project?.settings.defaultProcessingPipeline?.id
-  )
-
-  return (
-    <div className={styles.jobControls}>
-      <PipelinesPicker
-        value={selectedPipelineId}
-        onValueChange={setSelectedPipelineId}
-      />
-      <ProcessNow capture={capture} pipelineId={selectedPipelineId} />
-    </div>
-  )
-}
-
-const JobDetails = ({ job }: { job: Job }) => (
-  <div className="flex items-center justify-between gap-4">
-    <div className="flex items-center gap-2">
-      <div
-        className="w-2 h-2 rounded-full"
-        style={{ backgroundColor: job.status.color }}
-      />
-      <span className={classNames(styles.value, 'pt-0.5')}>
-        {job.status.label}
-      </span>
-    </div>
-    <CaptureJobDialog id={job.id} />
-  </div>
-)
-
-const PipelinesPicker = ({
-  value,
-  onValueChange,
-}: {
-  value?: string
-  onValueChange: (value?: string) => void
-}) => {
-  const { projectId } = useParams()
-  const { pipelines = [], isLoading } = usePipelines({
-    projectId: projectId as string,
-  })
-
-  return (
-    <Select.Root
-      disabled={pipelines.length === 0}
-      onValueChange={onValueChange}
-      value={value ?? ''}
-    >
-      <Select.Trigger
-        className="w-auto max-w-full h-8 grow !bg-neutral-700 border-none text-neutral-200 body-small focus:ring-0 focus:ring-offset-0"
-        loading={isLoading}
-      >
-        <Select.Value className="truncate" placeholder="Select a pipeline" />
-      </Select.Trigger>
-      <Select.Content>
-        {pipelines.map((p) => (
-          <Select.Item
-            className="h-8 body-small"
-            key={p.name}
-            value={String(p.id)}
-            disabled={!p.currentProcessingService.online}
-          >
-            <div className="flex items-center gap-4">
-              <div
-                className="w-2 h-2 rounded-full mb-0.5 shrink-0"
-                style={{
-                  backgroundColor: p.currentProcessingService.service
-                    ? p.currentProcessingService.service?.status.color
-                    : ProcessingService.getStatusInfo('OFFLINE').color,
-                }}
-              />
-              <span className="whitespace-nowrap text-ellipsis overflow-hidden">
-                {p.name}
-              </span>
-            </div>
-          </Select.Item>
-        ))}
-      </Select.Content>
-    </Select.Root>
-  )
-}
diff --git a/ui/src/pages/session-details/playback/capture-details/capture-job/capture-job-dialog.tsx b/ui/src/pages/session-details/playback/capture-details/capture-job/capture-job-dialog.tsx
deleted file mode 100644
index f7e962a2a..000000000
--- a/ui/src/pages/session-details/playback/capture-details/capture-job/capture-job-dialog.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-import { useJobDetails } from 'data-services/hooks/jobs/useJobDetails'
-import _ from 'lodash'
-import { EyeIcon } from 'lucide-react'
-import { BasicTooltip, Button, Dialog } from 'nova-ui-kit'
-import { JobDetails } from 'pages/job-details/job-details'
-import { useState } from 'react'
-import { STRING, translate } from 'utils/language'
-
-export const CaptureJobDialog = ({ id }: { id: string }) => {
-  const [isOpen, setIsOpen] = useState(false)
-  const { job, isLoading, isFetching, error } = useJobDetails(id, isOpen)
-  const title = translate(STRING.ENTITY_DETAILS, {
-    type: _.capitalize(translate(STRING.ENTITY_TYPE_JOB)),
-  })
-
-  return (
-    <Dialog.Root open={isOpen} onOpenChange={setIsOpen}>
-      <BasicTooltip asChild content={title}>
-        <Dialog.Trigger asChild>
-          <Button
-            aria-label={title}
-            size="icon"
-            className="rounded-md !bg-neutral-700 text-neutral-200"
-          >
-            <EyeIcon className="w-4 h-4" />
-          </Button>
-        </Dialog.Trigger>
-      </BasicTooltip>
-      <Dialog.Content
-        ariaCloselabel={translate(STRING.CLOSE)}
-        isLoading={isLoading}
-        error={error}
-      >
-        {job ? (
-          <JobDetails job={job} title={title} isFetching={isFetching} />
-        ) : null}
-      </Dialog.Content>
-    </Dialog.Root>
-  )
-}
diff --git a/ui/src/pages/session-details/playback/capture-details/capture-job/capture-job.tsx b/ui/src/pages/session-details/playback/capture-details/capture-job/capture-job.tsx
deleted file mode 100644
index 7f7ebf451..000000000
--- a/ui/src/pages/session-details/playback/capture-details/capture-job/capture-job.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import { CaptureDetails } from 'data-services/models/capture-details'
-import { CaptureJobDialog } from './capture-job-dialog'
-import { ProcessNow } from './process-now'
-
-export const CaptureJob = ({
-  capture,
-  pipelineId,
-}: {
-  capture?: CaptureDetails
-  pipelineId?: string
-}) => (
-  <>
-    <div style={capture?.jobs.length ? undefined : { gridColumn: 'span 2' }}>
-      <ProcessNow capture={capture} pipelineId={pipelineId} />
-    </div>
-    {capture?.jobs.length ? <CaptureJobDialog id={capture.jobs[0].id} /> : null}
-  </>
-)
diff --git a/ui/src/pages/session-details/playback/capture-details/capture-job/process-now.tsx b/ui/src/pages/session-details/playback/capture-details/capture-job/process-now.tsx
deleted file mode 100644
index b8416e89e..000000000
--- a/ui/src/pages/session-details/playback/capture-details/capture-job/process-now.tsx
+++ /dev/null
@@ -1,60 +0,0 @@
-import { useCreateJob } from 'data-services/hooks/jobs/useCreateJob'
-import { CaptureDetails } from 'data-services/models/capture-details'
-import { CheckIcon, Loader2Icon } from 'lucide-react'
-import { BasicTooltip, Button } from 'nova-ui-kit'
-import { useParams } from 'react-router-dom'
-import { STRING, translate } from 'utils/language'
-import { UserPermission } from 'utils/user/types'
-
-export const ProcessNow = ({
-  capture,
-  pipelineId,
-}: {
-  capture?: CaptureDetails
-  pipelineId?: string
-}) => {
-  const { projectId } = useParams()
-  const { createJob, isLoading, isSuccess } = useCreateJob()
-  const canProcess = capture?.userPermissions.includes(
-    UserPermission.RunSingleImage
-  )
-  const disabled =
-    !capture || capture.hasJobInProgress || !pipelineId || !canProcess
-
-  // @TODO: hasJobInProgress, replace with if pipeline is healthy/available
-
-  const tooltipContent = canProcess
-    ? translate(STRING.MESSAGE_PROCESS_NOW_TOOLTIP)
-    : translate(STRING.MESSAGE_PERMISSIONS_MISSING)
-
-  return (
-    <BasicTooltip asChild content={tooltipContent}>
-      <Button
-        className="rounded-md !bg-neutral-700 text-neutral-200"
-        disabled={disabled}
-        onClick={() => {
-          if (!capture) {
-            return
-          }
-
-          createJob({
-            delay: 0,
-            name: `Capture #${capture.id}`,
-            sourceImage: capture.id,
-            pipeline: pipelineId,
-            projectId: projectId as string,
-            startNow: true,
-          })
-        }}
-        size="small"
-      >
-        <span>{translate(STRING.PROCESS_NOW)}</span>
-        {isSuccess ? (
-          <CheckIcon className="w-4 h-4 ml-2" />
-        ) : isLoading ? (
-          <Loader2Icon className="w-4 h-4 ml-2 animate-spin" />
-        ) : null}
-      </Button>
-    </BasicTooltip>
-  )
-}
diff --git a/ui/src/pages/session-details/playback/capture-navigation/capture-navigation.module.scss b/ui/src/pages/session-details/playback/capture-navigation/capture-navigation.module.scss
deleted file mode 100644
index e63422273..000000000
--- a/ui/src/pages/session-details/playback/capture-navigation/capture-navigation.module.scss
+++ /dev/null
@@ -1,18 +0,0 @@
-.wrapper {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  align-self: flex-start;
-  height: 48px;
-  gap: 32px;
-  padding: 0 8px;
-  border: 1px solid var(--color-neutral-600);
-  border-radius: 24px;
-  box-sizing: border-box;
-
-  span {
-    @include body-overline-small();
-    font-weight: 600;
-    color: var(--color-generic-white);
-  }
-}
diff --git a/ui/src/pages/session-details/playback/frame/types.ts b/ui/src/pages/session-details/playback/frame/types.ts
deleted file mode 100644
index 464eb6e47..000000000
--- a/ui/src/pages/session-details/playback/frame/types.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-export interface BoxStyle {
-  width: string
-  height: string
-  top: string
-  left: string
-}
diff --git a/ui/src/pages/session-details/playback/playback.module.scss b/ui/src/pages/session-details/playback/playback.module.scss
deleted file mode 100644
index 41528d1dc..000000000
--- a/ui/src/pages/session-details/playback/playback.module.scss
+++ /dev/null
@@ -1,103 +0,0 @@
-.wrapper {
-  display: grid;
-  grid-template-columns: 1fr 2fr;
-  border-radius: 8px;
-  overflow: hidden;
-}
-
-.sidebar {
-  background-color: var(--color-neutral-800);
-  border-bottom: 1px solid var(--color-neutral-600);
-  position: relative;
-}
-
-.sidebarContent {
-  width: 100%;
-  height: 100%;
-  position: absolute;
-  top: 0;
-  left: 0;
-  padding: 16px;
-  display: flex;
-  flex-direction: column;
-  gap: 64px;
-  box-sizing: border-box;
-  overflow-y: auto;
-  overflow-x: hidden;
-}
-
-.sidebarSection {
-  display: grid;
-  grid-template-columns: 1fr;
-  gap: 16px;
-
-  .title {
-    display: block;
-    @include body-large();
-    font-weight: 600;
-    color: var(--color-generic-white);
-  }
-
-  .label {
-    display: block;
-    @include body-overline();
-    font-weight: 600;
-    color: var(--color-neutral-500);
-  }
-}
-
-.captureNavigationWrapper {
-  display: flex;
-  align-items: flex-start;
-  margin-bottom: 16px;
-}
-
-.licenseInfoWrapper {
-  flex: 1;
-  text-align: right;
-
-  p {
-    color: var(--color-neutral-500);
-  }
-
-  p a {
-    color: var(--color-generic-white);
-  }
-}
-
-.bottomBar {
-  grid-column: span 2;
-  background-color: var(--color-neutral-800);
-  padding: 32px;
-}
-
-@media only screen and (max-width: $breakpoint-md) {
-  .sidebar {
-    grid-column: span 2;
-  }
-
-  .sidebarContent {
-    position: static;
-  }
-
-  .sidebarSection:last-child {
-    display: none;
-  }
-
-  .bottomBar {
-    display: flex;
-    flex-direction: column;
-    padding: 16px;
-  }
-
-  .captureNavigationWrapper {
-    margin-bottom: 32px;
-    gap: 32px;
-    flex-direction: column-reverse;
-    justify-content: flex-start;
-  }
-
-  .licenseInfoWrapper {
-    text-align: left;
-  }
-}
diff --git a/ui/src/pages/session-details/playback/playback.tsx b/ui/src/pages/session-details/playback/playback.tsx
deleted file mode 100644
index 71c80bc83..000000000
--- a/ui/src/pages/session-details/playback/playback.tsx
+++ /dev/null
@@ -1,145 +0,0 @@
-import { DefaultFiltersTooltip } from 'components/filtering/default-filter-control'
-import { LicenseInfo } from 'components/license-info/license-info'
-import { useCaptureDetails } from 'data-services/hooks/captures/useCaptureDetails'
-import { useProjectDetails } from 'data-services/hooks/projects/useProjectDetails'
-import { useSessionTimeline } from 'data-services/hooks/sessions/useSessionTimeline'
-import { SessionDetails } from 'data-services/models/session-details'
-import { Checkbox, CheckboxTheme } from 'nova-ui-kit'
-import { useEffect, useState } from 'react'
-import { ActivityPlot } from './activity-plot/lazy-activity-plot'
-import { CaptureDetails } from './capture-details/capture-details'
-import { CaptureNavigation } from './capture-navigation/capture-navigation'
-import { Frame } from './frame/frame'
-import styles from './playback.module.scss'
-import { SessionCapturesSlider } from './session-captures-slider/session-captures-slider'
-import { useActiveCaptureId } from './useActiveCapture'
-
-export const Playback = ({
-  session,
-  projectId,
-}: {
-  session: SessionDetails
-  projectId?: string
-}) => {
-  const { project } = useProjectDetails(projectId as string, true)
-  const { timeline = [] } = useSessionTimeline(session.id)
-  const [poll, setPoll] = useState(false)
-  const [showDetections, setShowDetections] = useState(true)
-  const [defaultFilters, setDefaultFilters] = useState(true)
-  const [snapToDetections, setSnapToDetections] = useState(
-    session.numDetections ? true : false
-  )
-  const { activeCaptureId, setActiveCaptureId } = useActiveCaptureId(
-    session.firstCapture?.id
-  )
-  const { capture: activeCapture } = useCaptureDetails({
-    id: activeCaptureId as string,
-    poll,
-    projectId: projectId as string,
-  })
-
-  useEffect(() => {
-    // If the active capture has a job in progress, we want to poll the endpoint so we can show job updates
-    if (activeCapture?.hasJobInProgress) {
-      setPoll(true)
-    } else {
-      setPoll(false)
-    }
-  }, [activeCapture])
-
-  const detections = activeCapture?.detections ?? []
-
-  if (!session.firstCapture) {
-    return null
-  }
-
-  return (
-    <div className={styles.wrapper}>
-      <div className={styles.sidebar}>
-        <div className={styles.sidebarContent}>
-          {activeCaptureId && (
-            <div className={styles.sidebarSection}>
-              <span className={styles.title}>Capture #{activeCaptureId}</span>
-              <CaptureDetails
-                capture={activeCapture}
-                captureId={activeCaptureId}
-                defaultFilters={defaultFilters}
-              />
-            </div>
-          )}
-          <div className={styles.sidebarSection}>
-            <span className={styles.title}>View settings</span>
-            <Checkbox
-              id="show-detections"
-              label="Show detections"
-              checked={showDetections}
-              onCheckedChange={setShowDetections}
-              theme={CheckboxTheme.Neutral}
-            />
-            <div className="flex items-center gap-1">
-              <Checkbox
-                id="default-filters"
-                label="Default filters"
-                checked={defaultFilters}
-                onCheckedChange={setDefaultFilters}
-                theme={CheckboxTheme.Neutral}
-              />
-              {project ? (
-                <DefaultFiltersTooltip
-                  className="text-neutral-200 hover:bg-transparent"
-                  project={project}
-                />
-              ) : null}
-            </div>
-            <Checkbox
-              id="snap-to-detections"
-              label="Snap to images with detections"
-              checked={snapToDetections}
-              onCheckedChange={setSnapToDetections}
-              theme={CheckboxTheme.Neutral}
-              disabled={session.numDetections ? false : true}
-            />
-          </div>
-        </div>
-      </div>
-      <Frame
-        defaultFilters={defaultFilters}
-        detections={detections}
-        height={activeCapture?.height ?? session.firstCapture.height}
-        showDetections={showDetections}
-        src={activeCapture?.src}
-        width={activeCapture?.width ?? session.firstCapture.width}
-      />
-      <div className={styles.bottomBar}>
-        <div className={styles.captureNavigationWrapper}>
-          <CaptureNavigation
-            activeCapture={activeCapture}
-            snapToDetections={snapToDetections}
-            timeline={timeline}
-            setActiveCaptureId={setActiveCaptureId}
-          />
-          <div className={styles.licenseInfoWrapper}>
-            <LicenseInfo />
-          </div>
-        </div>
-        <div>
-          <ActivityPlot
-            session={session}
-            snapToDetections={snapToDetections}
-            timeline={timeline}
-            setActiveCaptureId={setActiveCaptureId}
-          />
-          {timeline.length > 0 && (
-            <SessionCapturesSlider
-              session={session}
-              snapToDetections={snapToDetections}
-              timeline={timeline}
-              activeCapture={activeCapture}
-              setActiveCaptureId={setActiveCaptureId}
-            />
-          )}
-        </div>
-      </div>
-    </div>
-  )
-}
diff --git a/ui/src/pages/session-details/playback/session-captures-slider/session-captures-slider.tsx b/ui/src/pages/session-details/playback/session-captures-slider/session-captures-slider.tsx
deleted file mode 100644
index 334d83b34..000000000
--- a/ui/src/pages/session-details/playback/session-captures-slider/session-captures-slider.tsx
+++ /dev/null
@@ -1,72 +0,0 @@
-import { Capture } from 'data-services/models/capture'
-import { SessionDetails } from 'data-services/models/session-details'
-import { TimelineTick } from 'data-services/models/timeline-tick'
-import { TimestampSlider } from 'nova-ui-kit/components/slider/timestamp-slider'
-import { useEffect, useState } from 'react'
-import { getFormatedTimeString } from 'utils/date/getFormatedTimeString/getFormatedTimeString'
-import { dateToValue, findClosestCaptureId, valueToDate } from '../utils'
-
-export const SessionCapturesSlider = ({
-  snapToDetections,
-  session,
-  timeline,
-  activeCapture,
-  setActiveCaptureId,
-}: {
-  snapToDetections?: boolean
-  session: SessionDetails
-  timeline: TimelineTick[]
-  activeCapture?: Capture
-  setActiveCaptureId: (captireId: string) => void
-}) => {
-  const [value, setValue] = useState(0)
-  const startDate = session.startDate
-  const endDate = session.endDate
-  const showLabels = session.startDate.getTime() !== session.endDate.getTime()
-
-  useEffect(() => {
-    if (activeCapture) {
-      setValue(dateToValue({ date: activeCapture.date, startDate, endDate }))
-    }
-  }, [activeCapture])
-
-  return (
-    <div>
-      <TimestampSlider
-        labels={
-          showLabels
-            ? [
-                getFormatedTimeString({ date: startDate }),
-                getFormatedTimeString({ date: endDate }),
-              ]
-            : []
-        }
-        value={value}
-        valueLabel={getFormatedTimeString({
-          date: valueToDate({ value, startDate, endDate }),
-          options: { second: true },
-        })}
-        onValueChange={(value) => {
-          setValue(value)
-        }}
-        onValueCommit={(value) => {
-          // Update active capture based on date
-          const targetDate = valueToDate({ value, startDate, endDate })
-          const captureId = findClosestCaptureId({
-            snapToDetections,
-            targetDate,
-            timeline,
-          })
-
-          if (captureId && activeCapture?.id !== captureId) {
-            setActiveCaptureId(captureId)
-          } else if (activeCapture) {
-            setValue(
-              dateToValue({ date: activeCapture.date, startDate, endDate })
-            )
-          }
-        }}
-      />
-    </div>
-  )
-}
diff --git a/ui/src/pages/session-details/process/process-now.tsx b/ui/src/pages/session-details/process/process-now.tsx
new file mode 100644
index 000000000..6fa53d63e
--- /dev/null
+++ b/ui/src/pages/session-details/process/process-now.tsx
@@ -0,0 +1,53 @@
+import { useCreateJob } from 'data-services/hooks/jobs/useCreateJob'
+import { CaptureDetails } from 'data-services/models/capture-details'
+import { CheckIcon, Loader2Icon } from 'lucide-react'
+import { Button } from 'nova-ui-kit'
+import { useParams } from 'react-router-dom'
+import { STRING, translate } from 'utils/language'
+import { UserPermission } from 'utils/user/types'
+
+export const ProcessNow = ({
+  capture,
+  pipelineId,
+}: {
+  capture: CaptureDetails
+  pipelineId?: string
+}) => {
+  const { projectId } = useParams()
+  const { createJob, isLoading, isSuccess } = useCreateJob()
+  const canProcess = capture.userPermissions.includes(
+    UserPermission.RunSingleImage
+  )
+  const disabled =
+    isLoading || capture.hasJobInProgress || !pipelineId || !canProcess
+  // @TODO: also check if pipeline is healthy/available
+
+  return (
+    <Button
+      disabled={disabled}
+      onClick={() => {
+        if (!capture) {
+          return
+        }
+
+        createJob({
+          delay: 0,
+          name: `Capture #${capture.id}`,
+          sourceImage: capture.id,
+          pipeline: pipelineId,
+          projectId: projectId as string,
+          startNow: true,
+        })
+      }}
+      size="small"
+      variant="success"
+    >
+      <span>{translate(STRING.PROCESS_NOW)}</span>
+      {isSuccess ? (
+        <CheckIcon className="w-4 h-4 ml-2" />
+      ) : isLoading ? (
+        <Loader2Icon className="w-4 h-4 ml-2 animate-spin" />
+      ) : null}
+    </Button>
+  )
+}
diff --git a/ui/src/pages/session-details/process/process.tsx b/ui/src/pages/session-details/process/process.tsx
new file mode 100644
index 000000000..f32779685
--- /dev/null
+++ b/ui/src/pages/session-details/process/process.tsx
@@ -0,0 +1,94 @@
+import { FormRow, FormSection } from 'components/form/layout/layout'
+import { API_ROUTES } from 'data-services/constants'
+import { useProjectDetails } from 'data-services/hooks/projects/useProjectDetails'
+import { CaptureDetails } from 'data-services/models/capture-details'
+import { ChevronDownIcon } from 'lucide-react'
+import {
+  Button,
+  EntityPicker,
+  InputContent,
+  Popover,
+  StatusMarker,
+} from 'nova-ui-kit'
+import { useState } from 'react'
+import { Link, useParams } from 'react-router-dom'
+import { APP_ROUTES } from 'utils/constants'
+import { getAppRoute } from 'utils/getAppRoute'
+import { STRING, translate } from 'utils/language'
+import { UserPermission } from 'utils/user/types'
+import { ProcessNow } from './process-now'
+
+export const Process = ({ capture }: { capture: CaptureDetails }) => {
+  const { projectId } = useParams()
+  const { project } = useProjectDetails(projectId as string, true)
+  const [pipelineId, setPipelineId] = useState(
+    project?.settings.defaultProcessingPipeline?.id
+  )
+
+  return (
+    <Popover.Root>
+      <Popover.Trigger asChild>
+        <Button size="small" variant="outline">
+          {capture.currentJob &&
+          capture.currentJob.status.code !== 'SUCCESS' ? (
+            <StatusMarker color={capture.currentJob.status.color} />
+          ) : null}
+          <span>{translate(STRING.PROCESS)}</span>
+          <ChevronDownIcon className="w-4 h-4" />
+        </Button>
+      </Popover.Trigger>
+      <Popover.Content className="p-0 w-96" align="end">
+        <FormSection
+          title={translate(STRING.PROCESS)}
+          description={
+            capture.userPermissions.includes(UserPermission.RunSingleImage)
+              ? translate(STRING.MESSAGE_PROCESS_NOW_TOOLTIP)
+              : translate(STRING.MESSAGE_PERMISSIONS_MISSING)
+          }
+        >
+          <div className="flex flex-col items-end gap-4">
+            <EntityPicker
+              collection={API_ROUTES.PIPELINES}
+              onValueChange={setPipelineId}
+              value={pipelineId}
+            />
+            <ProcessNow capture={capture} pipelineId={pipelineId} />
+          </div>
+        </FormSection>
+        {capture.currentJob ?? capture.numJobs ? (
+          <FormSection>
+            <FormRow>
+              {capture.currentJob ? (
+                <InputContent
+                  label={translate(STRING.FIELD_LABEL_LATEST_JOB_STATUS)}
+                >
+                  <div className="flex items-center gap-2">
+                    <StatusMarker color={capture.currentJob.status.color} />
+                    <span className="pt-0.5 body-base">
+                      {capture.currentJob.status.label}
+                    </span>
+                  </div>
+                </InputContent>
+              ) : null}
+              <InputContent label={translate(STRING.FIELD_LABEL_JOBS)}>
+                <Link
+                  className="bubble-label"
+                  to={getAppRoute({
+                    to: APP_ROUTES.JOBS({
+                      projectId: projectId as string,
+                    }),
+                    filters: {
+                      source_image_single: capture.id,
+                    },
+                  })}
+                >
+                  <span>{capture.numJobs}</span>
+                </Link>
+              </InputContent>
+            </FormRow>
+          </FormSection>
+        ) : null}
+      </Popover.Content>
+    </Popover.Root>
+  )
+}
diff --git a/ui/src/pages/session-details/session-details.module.scss b/ui/src/pages/session-details/session-details.module.scss
deleted file mode 100644
index 0f54db522..000000000
--- a/ui/src/pages/session-details/session-details.module.scss
+++ /dev/null
@@ -1,47 +0,0 @@
-.loadingWrapper {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  min-height: 320px;
-}
-
-.main {
-  position: relative;
-}
-
-.fetchInfoWrapper {
-  position: absolute;
-  height: 50px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  top: 0;
-  right: 0;
-  transform: translateY(-100%);
-}
-
-.playbackWrapper {
-  display: flex;
-  align-items: stretch;
-  justify-content: space-between;
-  margin-bottom: 32px;
-
-  > * {
-    width: 100%;
-  }
-}
-
-.sessionInfo {
-  width: 100%;
-}
-
-.text {
-  @include body-base();
-  color: var(--color-foreground);
-}
-
-@media only screen and (max-width: $breakpoint-md) {
-  .playbackWrapper {
-    margin-bottom: 16px;
-  }
-}
diff --git a/ui/src/pages/session-details/session-details.tsx b/ui/src/pages/session-details/session-details.tsx
index 6f3396564..cf7d9bbfa 100644
--- a/ui/src/pages/session-details/session-details.tsx
+++ b/ui/src/pages/session-details/session-details.tsx
@@ -1,20 +1,45 @@
 import { ErrorState } from 'components/error-state/error-state'
-import { PlotGrid } from 'components/plot-grid/plot-grid'
-import { Plot } from 'components/plot/lazy-plot'
+import { useCaptureDetails } from 'data-services/hooks/captures/useCaptureDetails'
 import { useSessionDetails } from 'data-services/hooks/sessions/useSessionDetails'
-import { Box, LoadingSpinner } from 'nova-ui-kit'
-import { useContext, useEffect } from 'react'
+import { useSessionTimeline } from 'data-services/hooks/sessions/useSessionTimeline'
+import { SessionDetails } from 'data-services/models/session-details'
+import { ExternalLinkIcon } from 'lucide-react'
+import {
+  BasicTooltip,
+  Box,
+  buttonVariants,
+  LoadingSpinner,
+  PageHeader,
+  Tabs,
+} from 'nova-ui-kit'
+import { cn } from 'nova-ui-kit/utils'
+import { useContext, useEffect, useState } from 'react'
 import { Helmet } from 'react-helmet-async'
 import { useParams } from 'react-router-dom'
 import { BreadcrumbContext } from 'utils/breadcrumbContext'
-import { Playback } from './playback/playback'
-import { useActiveCaptureId } from './playback/useActiveCapture'
-import { useActiveOccurrences } from './playback/useActiveOccurrences'
-import styles from './session-details.module.scss'
-import { SessionInfo } from './session-info/session-info'
+import { STRING, translate } from 'utils/language'
+import { useUser } from 'utils/user/userContext'
+import { ActivityPlot } from './activity-plot/lazy-activity-plot'
+import { CaptureInfo } from './capture-info'
+import { CaptureNavigation } from './capture-navigation'
+import { Capture } from './capture/capture'
+import { useActiveCaptureId } from './hooks/useActiveCapture'
+import { useActiveOccurrences } from './hooks/useActiveOccurrences'
+import { Process } from './process/process'
+import { SessionInfo } from './session-info'
+import { SessionPlots } from './session-plots'
+import { StarButton } from './star-button'
+import { TimelineSlider } from './timeline-slider/timeline-slider'
+import { ViewSettings } from './view-settings'
 
-export const SessionDetails = () => {
-  const { id, projectId } = useParams()
+const TABS = {
+  SESSION: 'session',
+  CAPTURE: 'capture',
+  CHARTS: 'charts',
+}
+
+export const SessionDetailsPage = () => {
+  const { id } = useParams()
   const { setDetailBreadcrumb } = useContext(BreadcrumbContext)
   const { activeOccurrences } = useActiveOccurrences()
   const { activeCaptureId } = useActiveCaptureId()
@@ -33,7 +58,7 @@ export const SessionDetails = () => {
 
   if (isLoading) {
     return (
-      <div className={styles.loadingWrapper}>
+      <div className="flex items-center justify-center min-h-[320px]">
         <LoadingSpinner />
       </div>
     )
@@ -44,41 +69,174 @@ export const SessionDetails = () => {
   }
 
   return (
-    <div className={styles.main}>
-      <Helmet>
-        <meta name="og:image" content={session.exampleCaptures[0]?.src} />
-      </Helmet>
-      <div className={styles.playbackWrapper}>
-        <Playback session={session} projectId={projectId} />
-      </div>
-      <PlotGrid>
-        <Box className="bg-background">
-          <div className={styles.sessionInfo}>
-            <SessionInfo session={session} />
-          </div>
-        </Box>
-        {session.summaryData.map((summary, index) => {
-          if (summary.data.x.length <= 1) {
-            return null
-          }
+    <>
+      {session.exampleCaptures[0] ? (
+        <Helmet>
+          <meta name="og:image" content={session.exampleCaptures[0]?.src} />
+        </Helmet>
+      ) : null}
+      <Content session={session} />
+    </>
+  )
+}
 
-          return (
-            <Box
-              key={index}
-              className="bg-background flex items-center justify-center"
-            >
-              <Plot
-                title={summary.title}
-                data={summary.data}
-                orientation={summary.orientation}
-                type={summary.type}
-              />
-            </Box>
-          )
+const Content = ({ session }: { session: SessionDetails }) => {
+  // Settings
+  const [poll, setPoll] = useState(false)
+  const [settings, setSettings] = useState({
+    defaultFilters: true,
+    showDetections: true,
+    snapToDetections: session.numDetections ? true : false,
+  })
+
+  // Data
+  const { projectId } = useParams()
+  const { user } = useUser()
+  const { activeCaptureId, setActiveCaptureId } = useActiveCaptureId(
+    session.firstCapture?.id
+  )
+  const { capture: activeCapture } = useCaptureDetails({
+    id: activeCaptureId as string,
+    poll,
+    projectId: projectId as string,
+  })
+  const { timeline = [] } = useSessionTimeline(session.id)
+
+  useEffect(() => {
+    // If the active capture has a job in progress, we want to poll the endpoint so we can show job updates
+    if (activeCapture?.hasJobInProgress) {
+      setPoll(true)
+    } else {
+      setPoll(false)
+    }
+  }, [activeCapture])
+
+  if (!session.firstCapture) {
+    return null
+  }
+
+  return (
+    <>
+      <PageHeader
+        title={session.label}
+        subTitle={translate(STRING.RESULTS_CAPTURES, {
+          total: session?.numImages ?? 0,
         })}
-      </PlotGrid>
-    </div>
+        tooltip={translate(STRING.TOOLTIP_SESSION)}
+      >
+        {activeCapture ? <Process capture={activeCapture} /> : null}
+      </PageHeader>
+      <div className="flex flex-col gap-4 md:gap-6">
+        <div className="flex flex-col gap-4 mt-6 md:flex-row md:gap-6">
+          <Box className="p-2 bg-background rounded-lg md:p-4 md:rounded-xl">
+            <Tabs.Root defaultValue={TABS.SESSION}>
+              <Tabs.List>
+                <Tabs.Trigger
+                  value={TABS.SESSION}
+                  label={translate(STRING.TAB_ITEM_SESSION)}
+                />
+                <Tabs.Trigger
+                  value={TABS.CAPTURE}
+                  label={translate(STRING.TAB_ITEM_CAPTURE)}
+                />
+                <Tabs.Trigger
+                  value={TABS.CHARTS}
+                  label={translate(STRING.TAB_ITEM_CHARTS)}
+                />
+              </Tabs.List>
+              <Tabs.Content value={TABS.SESSION}>
+                <div className="w-72">
+                  <SessionInfo session={session} />
+                </div>
+              </Tabs.Content>
+              <Tabs.Content value={TABS.CAPTURE}>
+                <div className="w-72">
+                  {activeCapture ? (
+                    <CaptureInfo capture={activeCapture} />
+                  ) : null}
+                </div>
+              </Tabs.Content>
+              <Tabs.Content className="overflow-x-auto" value={TABS.CHARTS}>
+                <div className="w-96 space-y-4">
+                  <SessionPlots session={session} />
+                </div>
+              </Tabs.Content>
+            </Tabs.Root>
+          </Box>
+          <div className="grow flex flex-col bg-background rounded-lg border border-border overflow-hidden md:rounded-xl">
+            <div className="grow flex items-center justify-center bg-foreground">
+              <Capture
+                defaultFilters={settings.defaultFilters}
+                detections={activeCapture?.detections ?? []}
+                height={activeCapture?.height ?? session.firstCapture.height}
+                showDetections={settings.showDetections}
+                src={activeCapture?.src}
+                width={activeCapture?.width ?? session.firstCapture.width}
+              />
+            </div>
+            <div className="flex flex-wrap justify-between gap-x-8 gap-y-2 p-2 border-t border-border md:p-6">
+              <div className="flex-1 flex items-center gap-2">
+                {activeCapture ? (
+                  <>
+                    <span className="pt-0.5 text-muted-foreground truncate">
+                      {activeCapture.dateTimeLabel}
+                    </span>
+                    <StarButton
+                      capture={activeCapture}
+                      canStar={user.loggedIn && activeCapture.canStar}
+                    />
+                    <BasicTooltip
+                      asChild
+                      content={translate(STRING.TOOLTIP_VIEW_SOURCE_FILE)}
+                    >
+                      <a
+                        href={activeCapture.url}
+                        className={cn(
+                          buttonVariants({ size: 'icon', variant: 'ghost' })
+                        )}
+                        rel="noreferrer"
+                        target="_blank"
+                      >
+                        <ExternalLinkIcon className="w-4 h-4" />
+                      </a>
+                    </BasicTooltip>
+                  </>
+                ) : null}
+              </div>
+              <div className="flex items-center justify-center">
+                <CaptureNavigation
+                  activeCapture={activeCapture}
+                  timeline={timeline}
+                  setActiveCaptureId={setActiveCaptureId}
+                />
+              </div>
+              <div className="flex-1 flex items-center justify-end">
+                <ViewSettings
+                  session={session}
+                  onSettingsChange={setSettings}
+                  settings={settings}
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+        <div className="bg-background rounded-lg border border-border p-2 md:p-4">
+          <ActivityPlot
+            session={session}
+            setActiveCaptureId={setActiveCaptureId}
+            snapToDetections={settings.snapToDetections}
+            timeline={timeline}
+          />
+          <TimelineSlider
+            activeCapture={activeCapture}
+            session={session}
+            setActiveCaptureId={setActiveCaptureId}
+            timeline={timeline}
+          />
+        </div>
+      </div>
+    </>
   )
 }
 
-export default SessionDetails
+export default SessionDetailsPage
diff --git a/ui/src/pages/session-details/session-info/session-info.tsx b/ui/src/pages/session-details/session-info.tsx
similarity index 80%
rename from ui/src/pages/session-details/session-info/session-info.tsx
rename to ui/src/pages/session-details/session-info.tsx
index 3aec2140b..325ae8831 100644
--- a/ui/src/pages/session-details/session-info/session-info.tsx
+++ b/ui/src/pages/session-details/session-info.tsx
@@ -1,12 +1,11 @@
-import { Session } from 'data-services/models/session'
+import { SessionDetails } from 'data-services/models/session-details'
 import { InfoBlock } from 'nova-ui-kit'
 import { useParams } from 'react-router-dom'
 import { APP_ROUTES } from 'utils/constants'
 import { getAppRoute } from 'utils/getAppRoute'
 import { STRING, translate } from 'utils/language'
-import styles from './session-info.module.scss'
 
-export const SessionInfo = ({ session }: { session: Session }) => {
+export const SessionInfo = ({ session }: { session: SessionDetails }) => {
   const { projectId } = useParams()
 
   const fields = [
@@ -60,12 +59,5 @@ export const SessionInfo = ({ session }: { session: Session }) => {
       : []),
   ]
 
-  return (
-    <div className={styles.container}>
-      <h1 className={styles.title}>{session.label}</h1>
-      <div className={styles.content}>
-        <InfoBlock fields={fields} />
-      </div>
-    </div>
-  )
+  return <InfoBlock fields={fields} />
 }
diff --git a/ui/src/pages/session-details/session-info/session-info.module.scss b/ui/src/pages/session-details/session-info/session-info.module.scss
deleted file mode 100644
index 75fc61f9a..000000000
--- a/ui/src/pages/session-details/session-info/session-info.module.scss
+++ /dev/null
@@ -1,13 +0,0 @@
-.content {
-  width: 100%;
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  column-gap: 16px;
-}
-
-.title {
-  @include body-large();
-  font-weight: 600;
-  color: var(--color-foreground);
-  margin: 0 0 16px 0;
-}
diff --git a/ui/src/pages/session-details/session-plots.tsx b/ui/src/pages/session-details/session-plots.tsx
new file mode 100644
index 000000000..e601cd119
--- /dev/null
+++ b/ui/src/pages/session-details/session-plots.tsx
@@ -0,0 +1,22 @@
+import { Plot } from 'components/plot/lazy-plot'
+import { SessionDetails } from 'data-services/models/session-details'
+
+export const SessionPlots = ({ session }: { session: SessionDetails }) => (
+  <>
+    {session.summaryData.map((summary, index) => {
+      if (summary.data.x.length <= 1) {
+        return null
+      }
+
+      return (
+        <Plot
+          key={index}
+          data={summary.data}
+          orientation={summary.orientation}
+          title={summary.title}
+          type={summary.type}
+        />
+      )
+    })}
+  </>
+)
diff --git a/ui/src/pages/session-details/star-button.tsx b/ui/src/pages/session-details/star-button.tsx
new file mode 100644
index 000000000..b6f7ab029
--- /dev/null
+++ b/ui/src/pages/session-details/star-button.tsx
@@ -0,0 +1,46 @@
+import { useStarCapture } from 'data-services/hooks/captures/useStarCapture'
+import { CaptureDetails as Capture } from 'data-services/models/capture-details'
+import { Loader2Icon, StarIcon } from 'lucide-react'
+import { BasicTooltip, Button } from 'nova-ui-kit'
+import { STRING, translate } from 'utils/language'
+
+export const StarButton = ({
+  capture,
+  canStar,
+}: {
+  capture: Capture
+  canStar: boolean
+}) => {
+  const isStarred = capture.isStarred ?? false
+  const { starCapture, isLoading } = useStarCapture(capture.id, isStarred)
+
+  if (!canStar) {
+    return null
+  }
+
+  return (
+    <BasicTooltip
+      asChild
+      content={isStarred ? translate(STRING.STARRED) : translate(STRING.STAR)}
+    >
+      <Button
+        disabled={isLoading}
+        aria-label={
+          isStarred ? translate(STRING.STARRED) : translate(STRING.STAR)
+        }
+        onClick={() => starCapture()}
+        size="icon"
+        variant="ghost"
+      >
+        {isLoading ? (
+          <Loader2Icon className="w-4 h-4 animate-spin" />
+        ) : (
+          <StarIcon
+            className="w-4 h-4 transition-colors"
+            fill={isStarred ? 'currentColor' : 'transparent'}
+          />
+        )}
+      </Button>
+    </BasicTooltip>
+  )
+}
diff --git a/ui/src/nova-ui-kit/components/slider/styles.module.scss b/ui/src/pages/session-details/timeline-slider/styles.module.scss
similarity index 81%
rename from ui/src/nova-ui-kit/components/slider/styles.module.scss
rename to ui/src/pages/session-details/timeline-slider/styles.module.scss
index 64abd5025..09eb99aa6 100644
--- a/ui/src/nova-ui-kit/components/slider/styles.module.scss
+++ b/ui/src/pages/session-details/timeline-slider/styles.module.scss
@@ -5,9 +5,9 @@
 
   .label {
     display: block;
-    @include body-small();
+    @include body-overline;
     font-weight: 600;
-    color: var(--color-generic-white);
+    color: var(--color-primary);
     text-transform: uppercase;
     white-space: nowrap;
   }
@@ -17,7 +17,8 @@
     justify-content: space-between;
 
     .label {
-      color: var(--color-neutral-500);
+      @include body-overline-small;
+      color: var(--color-muted-foreground);
     }
   }
 
@@ -36,7 +37,7 @@
 
   .sliderTrack {
     position: relative;
-    background-color: var(--color-neutral-400);
+    background-color: var(--color-neutral-300);
     flex-grow: 1;
     border-radius: 2px;
     height: 4px;
@@ -44,7 +45,7 @@
 
   .sliderRange {
     position: absolute;
-    background-color: var(--color-neutral-400);
+    background-color: var(--color-neutral-300);
     border-radius: 2px;
     height: 100%;
   }
diff --git a/ui/src/pages/session-details/timeline-slider/timeline-slider.tsx b/ui/src/pages/session-details/timeline-slider/timeline-slider.tsx
new file mode 100644
index 000000000..8be496ab7
--- /dev/null
+++ b/ui/src/pages/session-details/timeline-slider/timeline-slider.tsx
@@ -0,0 +1,107 @@
+import * as _Slider from '@radix-ui/react-slider'
+import { Capture } from 'data-services/models/capture'
+import { SessionDetails } from 'data-services/models/session-details'
+import { TimelineTick } from 'data-services/models/timeline-tick'
+import { TriangleIcon } from 'lucide-react'
+import { useEffect, useState } from 'react'
+import { getFormatedTimeString } from 'utils/date/getFormatedTimeString/getFormatedTimeString'
+import { dateToValue, findClosestCaptureId, valueToDate } from '../utils'
+import styles from './styles.module.scss'
+
+export const TimelineSlider = ({
+  activeCapture,
+  session,
+  setActiveCaptureId,
+  snapToDetections,
+  timeline,
+}: {
+  activeCapture?: Capture
+  session: SessionDetails
+  setActiveCaptureId: (captireId: string) => void
+  snapToDetections?: boolean
+  timeline: TimelineTick[]
+}) => {
+  const [value, setValue] = useState(0)
+  const startDate = session.startDate
+  const endDate = session.endDate
+  const showLabels = session.startDate.getTime() !== session.endDate.getTime()
+
+  useEffect(() => {
+    if (activeCapture) {
+      setValue(dateToValue({ date: activeCapture.date, startDate, endDate }))
+    }
+  }, [activeCapture])
+
+  return (
+    <Slider
+      labels={
+        showLabels
+          ? [
+              getFormatedTimeString({ date: startDate }),
+              getFormatedTimeString({ date: endDate }),
+            ]
+          : []
+      }
+      value={value}
+      onValueChange={(value) => setValue(value)}
+      onValueCommit={(value) => {
+        // Update active capture based on date
+        const targetDate = valueToDate({ value, startDate, endDate })
+        const captureId = findClosestCaptureId({
+          snapToDetections,
+          targetDate,
+          timeline,
+        })
+
+        if (captureId && activeCapture?.id !== captureId) {
+          setActiveCaptureId(captureId)
+        } else if (activeCapture) {
+          setValue(
+            dateToValue({ date: activeCapture.date, startDate, endDate })
+          )
+        }
+      }}
+    />
+  )
+}
+
+const Slider = ({
+  labels,
+  value,
+  valueLabel,
+  onValueChange,
+  onValueCommit,
+}: {
+  labels: string[]
+  value: number
+  valueLabel?: string
+  onValueChange: (value: number) => void
+  onValueCommit: (value: number) => void
+}) => (
+  <div className={styles.timestampSlider}>
+    <_Slider.Root
+      className={styles.sliderRoot}
+      min={0}
+      max={100}
+      step={0.01}
+      value={[value]}
+      onValueChange={(values) => onValueChange(values[0])}
+      onValueCommit={(values) => onValueCommit(values[0])}
+    >
+      <_Slider.Track className={styles.sliderTrack}>
+        <_Slider.Range className={styles.sliderRange} />
+      </_Slider.Track>
+      <_Slider.Thumb className={styles.sliderThumb}>
+        {valueLabel && <span className={styles.label}>{valueLabel}</span>}
+        <TriangleIcon className="text-primary bg-background" />
+      </_Slider.Thumb>
+    </_Slider.Root>
+    <div className={styles.labels}>
+      {labels.map((label, index) => (
+        <span key={index} className={styles.label}>
+          {label}
+        </span>
+      ))}
+    </div>
+  </div>
+)
diff --git a/ui/src/pages/session-details/playback/utils.tsx b/ui/src/pages/session-details/utils.tsx
similarity index 100%
rename from ui/src/pages/session-details/playback/utils.tsx
rename to ui/src/pages/session-details/utils.tsx
diff --git a/ui/src/pages/session-details/view-settings.tsx b/ui/src/pages/session-details/view-settings.tsx
new file mode 100644
index 000000000..7c93d889c
--- /dev/null
+++ b/ui/src/pages/session-details/view-settings.tsx
@@ -0,0 +1,89 @@
+import { DefaultFiltersTooltip } from 'components/filtering/default-filter-control'
+import { useProjectDetails } from 'data-services/hooks/projects/useProjectDetails'
+import { SessionDetails } from 'data-services/models/session-details'
+import { SettingsIcon } from 'lucide-react'
+import { BasicTooltip, Button, Checkbox, Popover } from 'nova-ui-kit'
+import { useParams } from 'react-router-dom'
+import { STRING, translate } from 'utils/language'
+
+export const ViewSettings = ({
+  onSettingsChange,
+  session,
+  settings,
+}: {
+  onSettingsChange: (settings: {
+    defaultFilters: boolean
+    showDetections: boolean
+    snapToDetections: boolean
+  }) => void
+  session: SessionDetails
+  settings: {
+    defaultFilters: boolean
+    showDetections: boolean
+    snapToDetections: boolean
+  }
+}) => {
+  const { projectId } = useParams()
+  const { project } = useProjectDetails(projectId as string, true)
+
+  return (
+    <Popover.Root>
+      <BasicTooltip asChild content={translate(STRING.VIEW_SETTINGS)}>
+        <Popover.Trigger asChild>
+          <Button
+            aria-label={translate(STRING.VIEW_SETTINGS)}
+            size="icon"
+            variant="ghost"
+          >
+            <SettingsIcon className="w-4 h-4" />
+          </Button>
+        </Popover.Trigger>
+      </BasicTooltip>
+      <Popover.Content className="grid gap-4" align="end" side="bottom">
+        <span className="body-base font-semibold text-muted-foreground">
+          {translate(STRING.VIEW_SETTINGS)}
+        </span>
+        <div className="grid gap-2">
+          <Checkbox
+            id="show-detections"
+            label={translate(STRING.SHOW_DETECTIONS)}
+            checked={settings.showDetections}
+            onCheckedChange={() =>
+              onSettingsChange({
+                ...settings,
+                showDetections: !settings.showDetections,
+              })
+            }
+          />
+          <div className="flex items-center gap-1">
+            <Checkbox
+              id="default-filters"
+              label={translate(STRING.NAV_ITEM_DEFAULT_FILTERS)}
+              checked={settings.defaultFilters}
+              onCheckedChange={() =>
+                onSettingsChange({
+                  ...settings,
+                  defaultFilters: !settings.defaultFilters,
+                })
+              }
+              disabled // If enabled we should refetch session data based on this setting
+            />
+            {project ? <DefaultFiltersTooltip project={project} /> : null}
+          </div>
+          <Checkbox
+            id="snap-to-detections"
+            label={translate(STRING.SNAP_TO_DETECTIONS)}
+            checked={settings.snapToDetections}
+            onCheckedChange={() =>
+              onSettingsChange({
+                ...settings,
+                snapToDetections: !settings.snapToDetections,
+              })
+            }
+            disabled={session.numDetections ? false : true}
+          />
+        </div>
+      </Popover.Content>
+    </Popover.Root>
+  )
+}
diff --git a/ui/src/utils/language.ts b/ui/src/utils/language.ts
index e432a04d7..5d46189aa 100644
--- a/ui/src/utils/language.ts
+++ b/ui/src/utils/language.ts
@@ -101,8 +101,8 @@ export enum STRING {
   FIELD_LABEL_EMAIL,
   FIELD_LABEL_ENDPOINT,
   FIELD_LABEL_ERRORS,
-  FIELD_LABEL_FILENAME,
   FIELD_LABEL_FILE_SIZE,
+  FIELD_LABEL_FILENAME,
   FIELD_LABEL_FINISHED_AT,
   FIELD_LABEL_FIRST_DATE,
   FIELD_LABEL_FORMAT,
@@ -114,9 +114,10 @@ export enum STRING {
   FIELD_LABEL_JOB,
   FIELD_LABEL_JOBS,
   FIELD_LABEL_KEY,
-  FIELD_LABEL_LAST_SEEN,
   FIELD_LABEL_LAST_DATE,
+  FIELD_LABEL_LAST_SEEN,
   FIELD_LABEL_LAST_SYNCED,
+  FIELD_LABEL_LATEST_JOB_STATUS,
   FIELD_LABEL_LATITUDE,
   FIELD_LABEL_LOCATION,
   FIELD_LABEL_LOGS,
@@ -240,11 +241,13 @@ export enum STRING {
 
   /* TAB_ITEM */
   TAB_ITEM_ALL_PROJECTS,
+  TAB_ITEM_CAPTURE,
   TAB_ITEM_CHARTS,
   TAB_ITEM_FIELDS,
   TAB_ITEM_GALLERY,
   TAB_ITEM_IDENTIFICATION,
   TAB_ITEM_MY_PROJECTS,
+  TAB_ITEM_SESSION,
   TAB_ITEM_TABLE,
 
   /* JOB STATUS */
@@ -270,8 +273,8 @@ export enum STRING {
   TOOLTIP_SCORE,
   TOOLTIP_SESSION,
   TOOLTIP_SITE,
-
   TOOLTIP_STORAGE,
+  TOOLTIP_VIEW_SOURCE_FILE,
 
   /* OTHER */
   ABOUT_ROLE,
@@ -309,11 +312,13 @@ export enum STRING {
   OR,
   OVERVIEW,
   PIPELINES,
+  PROCESS,
   RECENT,
   REJECT_ID_SHORT,
   REJECT_ID,
   REMOVE_MEMBER,
   REMOVE_TAXA_LIST_TAXON,
+  RESULTS_CAPTURES,
   RESULTS_MEMBERS,
   RESULTS,
   SELECT_COLUMNS,
@@ -323,6 +328,8 @@ export enum STRING {
   SET_PASSWORD_DETAILS,
   SET_PASSWORD,
   SETTINGS,
+  SHOW_DETECTIONS,
+  SNAP_TO_DETECTIONS,
   SORT_BY,
   SORT_JOBS_ACTIVITY,
   SORT_OCCURRENCE_UPDATES,
@@ -341,6 +348,7 @@ export enum STRING {
   VERIFIED_BY,
   VERIFIED,
   VIEW_IN_SESSION,
+  VIEW_SETTINGS,
   YOU,
 }
 
@@ -368,12 +376,13 @@ const ENGLISH_STRINGS: { [key in STRING]: string } = {
   [STRING.EXPAND]: 'Expand',
   [STRING.LOGIN]: 'Login',
   [STRING.LOGOUT]: 'Logout',
-  [STRING.MORE]: 'More',
   [STRING.MANAGE_ACCESS]: 'Manage access',
+  [STRING.MORE]: 'More',
   [STRING.NEXT]: 'Next',
   [STRING.POPULATE]: 'Populate',
   [STRING.PREVIOUS]: 'Previous',
   [STRING.PROCESS_NOW]: 'Process now',
+  [STRING.PROCESS]: 'Process',
   [STRING.QUEUED]: 'Queued',
   [STRING.REFRESH]: 'Refresh',
   [STRING.REGISTER_PIPELINES]: 'Register pipelines',
@@ -425,8 +434,8 @@ const ENGLISH_STRINGS: { [key in STRING]: string } = {
   [STRING.FIELD_LABEL_EMAIL]: 'Email',
   [STRING.FIELD_LABEL_ENDPOINT]: 'Endpoint URL',
   [STRING.FIELD_LABEL_ERRORS]: 'Errors',
-  [STRING.FIELD_LABEL_FILENAME]: 'Filename',
   [STRING.FIELD_LABEL_FILE_SIZE]: 'File size',
+  [STRING.FIELD_LABEL_FILENAME]: 'Filename',
   [STRING.FIELD_LABEL_FINISHED_AT]: 'Finished at',
   [STRING.FIELD_LABEL_FIRST_DATE]: 'First date',
   [STRING.FIELD_LABEL_FORMAT]: 'Format',
@@ -438,9 +447,10 @@ const ENGLISH_STRINGS: { [key in STRING]: string } = {
   [STRING.FIELD_LABEL_JOB]: 'Job',
   [STRING.FIELD_LABEL_JOBS]: 'Jobs',
   [STRING.FIELD_LABEL_KEY]: 'Key',
-  [STRING.FIELD_LABEL_LAST_SEEN]: 'Last seen',
   [STRING.FIELD_LABEL_LAST_DATE]: 'Last date',
+  [STRING.FIELD_LABEL_LAST_SEEN]: 'Last seen',
   [STRING.FIELD_LABEL_LAST_SYNCED]: 'Last synced with data source',
+  [STRING.FIELD_LABEL_LATEST_JOB_STATUS]: 'Latest job status',
   [STRING.FIELD_LABEL_LATITUDE]: 'Latitude',
   [STRING.FIELD_LABEL_LOCATION]: 'Location',
   [STRING.FIELD_LABEL_LOGS]: 'Logs',
@@ -567,7 +577,7 @@ const ENGLISH_STRINGS: { [key in STRING]: string } = {
   [STRING.MESSAGE_PERMISSIONS_MISSING]:
     'Permissions missing to perform the action',
   [STRING.MESSAGE_PROCESS_NOW_TOOLTIP]:
-    'Process this single image with presets',
+    'Process this single capture with presets',
   [STRING.MESSAGE_REMOVE_MEMBER_CONFIRM]:
     'Are you sure you want to remove {{user}} from the team?',
   [STRING.MESSAGE_REMOVE_TAXA_LIST_TAXON_CONFIRM]:
@@ -611,11 +621,13 @@ const ENGLISH_STRINGS: { [key in STRING]: string } = {
 
   /* TAB_ITEM */
   [STRING.TAB_ITEM_ALL_PROJECTS]: 'All projects',
+  [STRING.TAB_ITEM_CAPTURE]: 'Capture',
   [STRING.TAB_ITEM_CHARTS]: 'Charts',
   [STRING.TAB_ITEM_FIELDS]: 'Fields',
   [STRING.TAB_ITEM_GALLERY]: 'Gallery view',
   [STRING.TAB_ITEM_IDENTIFICATION]: 'Identification',
   [STRING.TAB_ITEM_MY_PROJECTS]: 'My projects',
+  [STRING.TAB_ITEM_SESSION]: 'Session',
   [STRING.TAB_ITEM_TABLE]: 'Table view',
 
   /* JOB STATUS */
@@ -656,6 +668,7 @@ const ENGLISH_STRINGS: { [key in STRING]: string } = {
     'A site is a physical location where monitoring is taking place. One or many stations can be connected to a site.',
   [STRING.TOOLTIP_STORAGE]:
     'A storage is a place where captures are kept, for example a S3 bucket. One or many stations can be connected to a storage.',
+  [STRING.TOOLTIP_VIEW_SOURCE_FILE]: 'View source file',
 
   /* OTHER */
   [STRING.ABOUT_ROLE]: 'About role',
@@ -698,6 +711,7 @@ const ENGLISH_STRINGS: { [key in STRING]: string } = {
   [STRING.REJECT_ID]: 'Reject ID',
   [STRING.REMOVE_MEMBER]: 'Remove member',
   [STRING.REMOVE_TAXA_LIST_TAXON]: 'Remove taxon',
+  [STRING.RESULTS_CAPTURES]: '{{total}} capture(s)',
   [STRING.RESULTS_MEMBERS]: '{{total}} member(s)',
   [STRING.RESULTS]: '{{total}} result(s)',
   [STRING.SELECT_COLUMNS]: 'Select columns',
@@ -707,6 +721,8 @@ const ENGLISH_STRINGS: { [key in STRING]: string } = {
   [STRING.SET_PASSWORD_DETAILS]: 'Please set a new password for your acccount.',
   [STRING.SET_PASSWORD]: 'Set password',
   [STRING.SETTINGS]: 'Settings',
+  [STRING.SHOW_DETECTIONS]: 'Show detections',
+  [STRING.SNAP_TO_DETECTIONS]: 'Snap to captures with detections',
   [STRING.SORT_BY]: 'Sort by',
   [STRING.SORT_JOBS_ACTIVITY]: 'Jobs activity',
   [STRING.SORT_OCCURRENCE_UPDATES]: 'Occurrence updates',
@@ -725,6 +741,7 @@ const ENGLISH_STRINGS: { [key in STRING]: string } = {
   [STRING.VERIFIED_BY]: 'Verified by\n{{name}}',
   [STRING.VERIFIED]: 'Verified',
   [STRING.VIEW_IN_SESSION]: 'View in session',
+  [STRING.VIEW_SETTINGS]: 'View settings',
   [STRING.YOU]: 'You',
 }