diff --git a/src/components/table/FillerRows.tsx b/src/components/table/FillerRows.tsx
index e016b211..613c2278 100644
--- a/src/components/table/FillerRows.tsx
+++ b/src/components/table/FillerRows.tsx
@@ -1,9 +1,7 @@
 import type { Row } from '@tanstack/react-table'
 import type { VirtualItem } from '@tanstack/react-virtual'
 
-import type { FillLevel } from '../contexts/FillLevelContext'
-
-import { Td, Tr } from './Table'
+import { type TableFillLevel, Td, Tr } from './Table'
 
 function FillerRow({
   columns,
@@ -19,7 +17,7 @@ function FillerRow({
   index: number
   stickyColumn: boolean
   selectable?: boolean
-  fillLevel: FillLevel
+  fillLevel: TableFillLevel
 }) {
   return (
     <Tr
@@ -63,7 +61,7 @@ export function FillerRows({
   stickyColumn: boolean
   clickable?: boolean
   selectable?: boolean
-  fillLevel: FillLevel
+  fillLevel: TableFillLevel
 }) {
   return (
     <>
diff --git a/src/components/table/Table.tsx b/src/components/table/Table.tsx
index e996c012..12d13649 100644
--- a/src/components/table/Table.tsx
+++ b/src/components/table/Table.tsx
@@ -33,8 +33,7 @@ import { useVirtualizer } from '@tanstack/react-virtual'
 import styled, { useTheme } from 'styled-components'
 import { isEmpty, isNil } from 'lodash-es'
 
-import { InfoOutlineIcon, Tooltip } from '../../index'
-
+import { type FillLevel, InfoOutlineIcon, Tooltip } from '../../index'
 import Button from '../Button'
 import CaretUpIcon from '../icons/CaretUpIcon'
 import ArrowRightIcon from '../icons/ArrowRightIcon'
@@ -43,7 +42,6 @@ import EmptyState, { type EmptyStateProps } from '../EmptyState'
 import { Spinner } from '../Spinner'
 
 import {
-  type TableFillLevel,
   tableFillLevelToBg,
   tableFillLevelToBorder,
   tableFillLevelToBorderColor,
@@ -82,10 +80,14 @@ export type TableProps = DivProps & {
   hasNextPage?: boolean
   fetchNextPage?: () => void
   isFetchingNextPage?: boolean
-  onVirtualSliceChange?: (slice: {
-    start: VirtualItem | undefined
-    end: VirtualItem | undefined
-  }) => void
+  onVirtualSliceChange?: (slice: VirtualSlice) => void
+}
+
+export type TableFillLevel = Exclude<FillLevel, 3>
+
+export type VirtualSlice = {
+  start: VirtualItem | undefined
+  end: VirtualItem | undefined
 }
 
 function getGridTemplateCols(columnDefs: ColumnDef<unknown>[] = []): string {
@@ -242,7 +244,7 @@ const Th = styled.th<{
         right: 0,
         bottom: 0,
         width: 10000,
-        backgroundColor: theme.colors['fill-two'], // TODO
+        backgroundColor: theme.colors[tableFillLevelToHeaderBg[fillLevel]],
         borderBottom: hideHeader
           ? 'none'
           : theme.borders[tableFillLevelToBorder[fillLevel]],
diff --git a/src/components/table/colors.ts b/src/components/table/colors.ts
index e00beff1..902241ee 100644
--- a/src/components/table/colors.ts
+++ b/src/components/table/colors.ts
@@ -1,6 +1,4 @@
-import type { FillLevel } from '../contexts/FillLevelContext'
-
-export type TableFillLevel = Exclude<FillLevel, 3>
+import { type TableFillLevel } from './Table'
 
 export const tableFillLevelToBorder = {
   0: 'fill-two',
diff --git a/src/components/table/hooks.ts b/src/components/table/hooks.ts
index 3fe9847d..d6480215 100644
--- a/src/components/table/hooks.ts
+++ b/src/components/table/hooks.ts
@@ -3,41 +3,7 @@ import { type MutableRefObject, useEffect, useRef, useState } from 'react'
 
 import usePrevious from '../../hooks/usePrevious'
 
-type VirtualSlice = {
-  start: VirtualItem | undefined
-  end: VirtualItem | undefined
-}
-
-export function useOnVirtualSliceChange({
-  virtualRows,
-  virtualizeRows,
-  onVirtualSliceChange,
-}: {
-  virtualRows: VirtualItem[]
-  virtualizeRows: boolean
-  onVirtualSliceChange: (slice: VirtualSlice) => void
-}) {
-  const sliceStartRow = virtualRows[0]
-  const sliceEndRow: VirtualItem = virtualRows[virtualRows.length - 1]
-  const prevSliceStartRow = usePrevious(virtualRows[0])
-  const prevSliceEndRow = usePrevious(virtualRows[virtualRows.length - 1])
-
-  useEffect(() => {
-    if (
-      virtualizeRows &&
-      (prevSliceEndRow !== sliceEndRow || prevSliceStartRow !== sliceStartRow)
-    ) {
-      onVirtualSliceChange?.({ start: sliceStartRow, end: sliceEndRow })
-    }
-  }, [
-    sliceStartRow,
-    sliceEndRow,
-    virtualizeRows,
-    onVirtualSliceChange,
-    prevSliceEndRow,
-    prevSliceStartRow,
-  ])
-}
+import { type VirtualSlice } from './Table'
 
 export function useIsScrolling(
   ref: MutableRefObject<HTMLElement>,
@@ -73,3 +39,34 @@ export function useIsScrolling(
     }
   }, [ref, restDelay])
 }
+
+export function useOnVirtualSliceChange({
+  virtualRows,
+  virtualizeRows,
+  onVirtualSliceChange,
+}: {
+  virtualRows: VirtualItem[]
+  virtualizeRows: boolean
+  onVirtualSliceChange: (slice: VirtualSlice) => void
+}) {
+  const sliceStartRow = virtualRows[0]
+  const sliceEndRow: VirtualItem = virtualRows[virtualRows.length - 1]
+  const prevSliceStartRow = usePrevious(virtualRows[0])
+  const prevSliceEndRow = usePrevious(virtualRows[virtualRows.length - 1])
+
+  useEffect(() => {
+    if (
+      virtualizeRows &&
+      (prevSliceEndRow !== sliceEndRow || prevSliceStartRow !== sliceStartRow)
+    ) {
+      onVirtualSliceChange?.({ start: sliceStartRow, end: sliceEndRow })
+    }
+  }, [
+    sliceStartRow,
+    sliceEndRow,
+    virtualizeRows,
+    onVirtualSliceChange,
+    prevSliceEndRow,
+    prevSliceStartRow,
+  ])
+}