diff --git a/src/lib/ui/core/Checkbox/Checkbox.svelte b/src/lib/ui/core/Checkbox/Checkbox.svelte
index a39bbd61b..45f2201e1 100644
--- a/src/lib/ui/core/Checkbox/Checkbox.svelte
+++ b/src/lib/ui/core/Checkbox/Checkbox.svelte
@@ -35,7 +35,7 @@
   bind:checked={isActive}
   bind:indeterminate
   class={cn(
-    'flex size-4 min-w-4 items-center justify-center rounded border border-mystic bg-[inherit] fill-athens-day transition-colors',
+    'flex size-4 min-w-4 items-center justify-center rounded border border-mystic bg-[inherit] fill-athens-day',
     'hover:border-casper hover:bg-athens group-hover/label:border-casper group-hover/label:bg-[inherit]',
     error && 'relative border-red hover:border-red-hover group-hover/label:border-red-hover',
     selected &&
diff --git a/src/lib/ui/core/Table/DataTable/DataTable.svelte b/src/lib/ui/core/Table/DataTable/DataTable.svelte
index e29c7142f..9615ab3b9 100644
--- a/src/lib/ui/core/Table/DataTable/DataTable.svelte
+++ b/src/lib/ui/core/Table/DataTable/DataTable.svelte
@@ -1,8 +1,8 @@
-<script
-  lang="ts"
-  generics="GItem extends Record<string, unknown>, GColumn extends BaseTableColumn<GItem>"
->
-  import type { BaseTableColumn } from './types.js'
+<script lang="ts" generics="GItem extends any, GColumn extends ColumnDef<any, any, any>">
+  import type { ComponentProps } from 'svelte'
+  import type { ColumnDef, SortDirection } from './types.js'
+
+  import { cn } from '$ui/utils/index.js'
 
   import Table from '../Table.svelte'
   import TableBody from '../TableBody.svelte'
@@ -10,54 +10,163 @@
   import TableHead from '../TableHead.svelte'
   import TableHeader from '../TableHeader.svelte'
   import TableRow from '../TableRow.svelte'
+  import Pagination from '../Pagination.svelte'
 
   type TProps = {
     items: GItem[]
     columns: GColumn[]
 
+    minRows?: number
+
+    wrapperClass?: string
     class?: string
     headerClass?: string
     bodyClass?: string
     headerRowClass?: string
     bodyRowClass?: string
+
+    pagination?: ComponentProps<typeof Pagination>
+
+    sortColumn?: GColumn
+    sortDirection?: SortDirection
+    preValidateSort?: (column: GColumn) => boolean
+    onSort?: (column: GColumn, direction: SortDirection) => void
   }
 
   const {
     items,
     columns,
+    wrapperClass,
     class: className,
     headerClass,
     bodyClass,
     headerRowClass,
     bodyRowClass,
+    pagination,
+    minRows = pagination?.pageSize,
+    preValidateSort,
+    onSort,
   }: TProps = $props()
+
+  let sortColumn = $state<GColumn | null>(null)
+  let sortDirection = $state<SortDirection>('DESC')
+
+  let rowHeight = $state(0)
+
+  const sortedItems = $derived.by(() => {
+    if (!sortColumn) return items
+    const { sortAccessor } = sortColumn
+    if (!sortAccessor) return items
+
+    return items.toSorted((a, b) =>
+      sortDirection === 'ASC'
+        ? sortAccessor(a) - sortAccessor(b)
+        : sortAccessor(b) - sortAccessor(a),
+    )
+  })
+
+  const itemsCount = $derived(pagination?.totalItems ?? items.length)
+
+  const pagedItems = $derived.by(() => {
+    if (!pagination) return sortedItems
+
+    const { totalItems, page, pageSize } = pagination
+
+    const hasMoreItems = items.length !== totalItems
+    const pageOffset = (page - 1) * pageSize
+    const pageEndOffset = pageOffset + pageSize
+
+    if (hasMoreItems) return sortedItems.slice(0, pageSize)
+
+    return sortedItems.slice(pageOffset, pageEndOffset)
+  })
+
+  const padRowsAmount = $derived(minRows ? minRows - pagedItems.length : 0)
+
+  function setSort(column: GColumn) {
+    if (!column.isSortable) return
+    applySort(column)
+    onSort?.(column, sortDirection)
+  }
+
+  function applySort(column: GColumn) {
+    const isValid = preValidateSort?.(column) ?? true
+    if (!isValid) return
+
+    if (column.id !== sortColumn?.id) {
+      sortDirection = 'DESC'
+      sortColumn = column
+    } else {
+      sortDirection = sortDirection === 'DESC' ? 'ASC' : 'DESC'
+    }
+  }
 </script>
 
-<Table class={className}>
-  <TableHeader class={headerClass}>
-    <TableRow class={headerRowClass}>
-      {#each columns as { title, Head, class: className }}
-        {#if Head}
-          <Head />
-        {:else}
-          <TableHead class={className}>{title}</TableHead>
-        {/if}
-      {/each}
-    </TableRow>
-  </TableHeader>
-  <TableBody class={bodyClass}>
-    {#each items as item, i}
-      <TableRow class={bodyRowClass}>
+<article class={cn('flex w-full flex-col gap-4', wrapperClass)}>
+  <Table class={className}>
+    <TableHeader class={headerClass}>
+      <TableRow class={headerRowClass}>
         {#each columns as column}
-          {#if column.Cell}
-            <column.Cell {item} />
+          {@const { id, title, Head, class: className, getHeadProps, isSortable } = column}
+          {@const isSorted = sortColumn?.id === column.id}
+
+          {#if Head}
+            <Head {column} {...getHeadProps?.()} />
           {:else}
-            <TableCell class={column.class}>
-              {column.format(item, i)}
-            </TableCell>
+            <TableHead
+              class={className}
+              onclick={() => setSort(column)}
+              sortDirection={isSorted ? sortDirection : undefined}
+              {isSortable}
+            >
+              {title || id}
+            </TableHead>
           {/if}
         {/each}
       </TableRow>
-    {/each}
-  </TableBody>
-</Table>
+    </TableHeader>
+    <TableBody class={bodyClass}>
+      {#each pagedItems as item, i}
+        <TableRow bind:height={rowHeight} class={bodyRowClass}>
+          {#each columns as column}
+            {@const { id, Cell, format, class: className, getCellProps } = column}
+
+            {#if Cell}
+              <Cell {item} {column} {...getCellProps?.(item)} />
+            {:else if format}
+              <TableCell class={className}>
+                {format(item, i, column)}
+              </TableCell>
+            {:else}
+              <TableCell>
+                <pre>Declare <code>Cell</code> or <code>format</code> for column <code>{id}</code
+                  ></pre>
+              </TableCell>
+            {/if}
+          {/each}
+        </TableRow>
+      {/each}
+
+      {#each { length: padRowsAmount } as _}
+        <TableRow style="height: {rowHeight}px;">
+          {#each columns as _}
+            <TableCell noStyles />
+          {/each}
+        </TableRow>
+      {/each}
+    </TableBody>
+  </Table>
+
+  {#if pagination}
+    {@const { page, pageSize, rows, onPageChange } = pagination}
+
+    <Pagination
+      class={pagination.class}
+      {page}
+      {pageSize}
+      {rows}
+      {onPageChange}
+      totalItems={itemsCount}
+    />
+  {/if}
+</article>
diff --git a/src/lib/ui/core/Table/DataTable/types.ts b/src/lib/ui/core/Table/DataTable/types.ts
index 786a2cafe..18c281af7 100644
--- a/src/lib/ui/core/Table/DataTable/types.ts
+++ b/src/lib/ui/core/Table/DataTable/types.ts
@@ -1,25 +1,41 @@
-import type { Component } from 'svelte'
+import type { Component, ComponentProps } from 'svelte'
 
-// TODO: Maybe it's not worth it to use union for format/Cell and title/Head options
-export type BaseTableColumn<GItem extends Record<string, unknown>> = {
+type BaseHeadProps<GItem, GCellExtra = object, GHeaderExtra = object> = {
+  column: ColumnDef<GItem, GCellExtra, GHeaderExtra>
+}
+
+type BaseCellProps<GItem, GCellExtra = object, GHeaderExtra = object> = {
+  item: GItem
+  column: ColumnDef<GItem, GCellExtra, GHeaderExtra>
+}
+
+export type ComponentExtraProps<T extends Component<any, any, any>> = Omit<
+  ComponentProps<T>,
+  keyof BaseCellProps<any, any, any>
+>
+
+export type ColumnDef<GItem, GCellExtra = object, GHeaderExtra = object> = {
+  id: string
   class?: string
-} & (
-  | {
-      Cell: Component<{ item: GItem }>
-      format?: undefined
-    }
-  | {
-      Cell?: undefined
-      format: (item: GItem, index: number) => string | number
-    }
-) &
-  (
-    | {
-        title: string
-        Head?: undefined
-      }
-    | {
-        title?: undefined
-        Head: Component
-      }
-  )
+
+  title?: string
+  Head?: Component<BaseHeadProps<GItem, GCellExtra, GHeaderExtra> & GHeaderExtra>
+  getHeadProps?: () => GHeaderExtra
+
+  format?: (
+    item: GItem,
+    index: number,
+    column: ColumnDef<GItem, GCellExtra, GHeaderExtra>,
+  ) => string | number
+  Cell?: Component<BaseCellProps<GItem, GCellExtra, GHeaderExtra> & GCellExtra>
+  getCellProps?: (item: GItem) => GCellExtra
+
+  isSortable?: boolean
+  sortAccessor?: (item: GItem) => number
+}
+
+export const defineColumn = <GItem, GCellExtra = object, GHeaderExtra = object>(
+  col: ColumnDef<GItem, GCellExtra, GHeaderExtra>,
+) => col
+
+export type SortDirection = 'DESC' | 'ASC'
diff --git a/src/lib/ui/core/Table/Pagination.svelte b/src/lib/ui/core/Table/Pagination.svelte
new file mode 100644
index 000000000..54f273afa
--- /dev/null
+++ b/src/lib/ui/core/Table/Pagination.svelte
@@ -0,0 +1,147 @@
+<script lang="ts">
+  import type { ChangeEventHandler } from 'svelte/elements'
+
+  import { noop } from '@melt-ui/svelte/internal/helpers'
+
+  import Button from '$ui/core/Button/Button.svelte'
+  import Input from '$ui/core/Input/Input.svelte'
+  import Popover from '$ui/core/Popover/Popover.svelte'
+  import { cn } from '$ui/utils/index.js'
+
+  type TProps = {
+    class?: string
+    page: number
+    pageSize: number
+    rows?: number[]
+    onPageChange?: (page: number, pageSize: number) => void
+    totalItems: number
+  }
+
+  const {
+    class: className,
+    page,
+    pageSize,
+    rows = [10, 25, 50],
+    onPageChange = noop,
+    totalItems,
+  }: TProps = $props()
+
+  let isPageSizeOpened = $state(false)
+
+  $effect(() => {
+    if (!process.env.IS_DEV_MODE) return
+
+    if (rows.length > 0 && !rows.includes(pageSize)) {
+      console.error('[pageSize] value should be present in [rows] array or it should be empty')
+    }
+  })
+
+  const pagesAmount = $derived(Math.ceil(totalItems / pageSize))
+  const maxPage = $derived(pagesAmount)
+
+  function adjustPageNumber(page: number) {
+    if (!page || page < 1) return 1
+    if (page > pagesAmount) return maxPage
+    return page
+  }
+
+  const onPageInput: ChangeEventHandler<HTMLInputElement> = ({ currentTarget }) => {
+    const value = +currentTarget.value
+    const page = adjustPageNumber(value)
+
+    onPageChange(page, pageSize)
+  }
+
+  function onPageSizeChange(size: number) {
+    isPageSizeOpened = false
+    onPageChange(1, size)
+  }
+
+  function onNextPage() {
+    onPageChange(adjustPageNumber(page + 1), pageSize)
+  }
+
+  function onPrevPage() {
+    onPageChange(adjustPageNumber(page - 1), pageSize)
+  }
+</script>
+
+<section class={cn('flex items-center gap-4 whitespace-nowrap', className)}>
+  {#if rows.length > 1}
+    <Popover bind:isOpened={isPageSizeOpened}>
+      {#snippet children({ props })}
+        <Button
+          {...props}
+          class="sm:hidden"
+          variant="border"
+          size="md"
+          icon="arrow-down"
+          iconSize="8"
+          iconHeight="5"
+          iconOnRight
+        >
+          {pageSize} rows
+        </Button>
+      {/snippet}
+
+      {#snippet content()}
+        <section class="flex flex-col">
+          {#each rows as option}
+            <Button
+              class={cn(option === pageSize && 'text-green')}
+              onclick={() => onPageSizeChange(option)}
+            >
+              {option} rows
+            </Button>
+          {/each}
+        </section>
+      {/snippet}
+    </Popover>
+  {/if}
+
+  <section class="flex items-center gap-2 text-waterloo">
+    <span>Page</span>
+
+    <Input
+      class="text-center"
+      inputClass="[appearance:textfield]"
+      type="number"
+      min="1"
+      max={maxPage}
+      value={page}
+      onchange={onPageInput}
+    />
+
+    <section>
+      <span>of {pagesAmount}</span>
+    </section>
+  </section>
+
+  <section class="ml-auto flex gap-2">
+    <Button
+      class="[&>svg]:rotate-180"
+      variant="border"
+      disabled={page <= 1}
+      size="md"
+      icon="arrow-right"
+      iconSize="5"
+      iconHeight="8"
+      iconOnRight
+      onclick={onPrevPage}
+    >
+      Prev
+    </Button>
+
+    <Button
+      variant="border"
+      disabled={page >= maxPage}
+      size="md"
+      icon="arrow-right"
+      iconSize="5"
+      iconHeight="8"
+      onclick={onNextPage}
+    >
+      Next
+    </Button>
+  </section>
+</section>
diff --git a/src/lib/ui/core/Table/Table.svelte b/src/lib/ui/core/Table/Table.svelte
index a7a1a347c..0cc419228 100644
--- a/src/lib/ui/core/Table/Table.svelte
+++ b/src/lib/ui/core/Table/Table.svelte
@@ -12,6 +12,9 @@
   const { class: className, children, ...props }: TProps = $props()
 </script>
 
-<table class={cn('relative w-full border-spacing-0 text-left', className)} {...props}>
+<table
+  class={cn('relative w-full border-collapse border-spacing-0 text-left indent-0', className)}
+  {...props}
+>
   {@render children()}
 </table>
diff --git a/src/lib/ui/core/Table/TableCell.svelte b/src/lib/ui/core/Table/TableCell.svelte
index 6147b892a..4eeec844c 100644
--- a/src/lib/ui/core/Table/TableCell.svelte
+++ b/src/lib/ui/core/Table/TableCell.svelte
@@ -6,18 +6,19 @@
 
   type TProps = {
     class?: string
-    children: Snippet
+    children?: Snippet
+    noStyles?: boolean
   } & HTMLTdAttributes
 
-  const { class: className, children, ...props }: TProps = $props()
+  const { class: className, children, noStyles = false, ...props }: TProps = $props()
 </script>
 
 <td
   class={cn(
-    'overflow-hidden text-ellipsis whitespace-nowrap px-2 group-hover:bg-athens',
+    !noStyles && 'overflow-hidden text-ellipsis whitespace-nowrap px-4 group-hover/row:bg-athens',
     className,
   )}
   {...props}
 >
-  {@render children()}
+  {@render children?.()}
 </td>
diff --git a/src/lib/ui/core/Table/TableHead.svelte b/src/lib/ui/core/Table/TableHead.svelte
index 12f7f8b24..97ab91467 100644
--- a/src/lib/ui/core/Table/TableHead.svelte
+++ b/src/lib/ui/core/Table/TableHead.svelte
@@ -1,23 +1,50 @@
 <script lang="ts">
   import type { Snippet } from 'svelte'
   import type { HTMLThAttributes } from 'svelte/elements'
+  import type { SortDirection } from './DataTable/types.js'
 
   import { cn } from '$ui/utils/index.js'
 
+  import Svg from '../Svg/Svg.svelte'
+
   type TProps = {
     class?: string
     children: Snippet
+    noStyles?: boolean
+    isSortable?: boolean
+    sortDirection?: SortDirection
   } & HTMLThAttributes
 
-  const { class: className, children, ...props }: TProps = $props()
+  const {
+    class: className,
+    children,
+    noStyles = false,
+    sortDirection,
+    isSortable = false,
+    ...props
+  }: TProps = $props()
 </script>
 
 <th
   class={cn(
-    'whitespace-nowrap border-b bg-athens px-[15px] py-[5px] font-medium text-casper',
+    !noStyles &&
+      'whitespace-nowrap bg-porcelain px-4 py-1.5 font-normal text-waterloo first:rounded-l-md last:rounded-r-md',
+    isSortable && 'cursor-pointer',
     className,
   )}
   {...props}
 >
   {@render children()}
+
+  {#if isSortable}
+    <Svg
+      illus
+      id="sorted"
+      class={cn('invisible inline-block', sortDirection && 'visible')}
+      w="6"
+      h="8"
+      --sorter-up={sortDirection === 'ASC' ? 'var(--waterloo)' : 'var(--mystic)'}
+      --sorter-down={sortDirection === 'ASC' ? 'var(--mystic)' : 'var(--waterloo)'}
+    />
+  {/if}
 </th>
diff --git a/src/lib/ui/core/Table/TableRow.svelte b/src/lib/ui/core/Table/TableRow.svelte
index c90af7fe4..2cba001c3 100644
--- a/src/lib/ui/core/Table/TableRow.svelte
+++ b/src/lib/ui/core/Table/TableRow.svelte
@@ -5,13 +5,14 @@
   import { cn } from '$ui/utils/index.js'
 
   type TProps = {
+    height?: number
     class?: string
     children: Snippet
   } & HTMLAttributes<HTMLTableRowElement>
 
-  const { class: className, children, ...props }: TProps = $props()
+  let { class: className, height = $bindable(), children, ...props }: TProps = $props()
 </script>
 
-<tr class={cn('group', className)} {...props}>
+<tr bind:clientHeight={height} class={cn('group/row', className)} {...props}>
   {@render children()}
 </tr>
diff --git a/src/lib/ui/core/Table/index.ts b/src/lib/ui/core/Table/index.ts
index 07f941407..40320a43a 100644
--- a/src/lib/ui/core/Table/index.ts
+++ b/src/lib/ui/core/Table/index.ts
@@ -6,3 +6,7 @@ export { default as TableRow } from './TableRow.svelte'
 export { default as TableCell } from './TableCell.svelte'
 
 export { default as DataTable } from './DataTable/DataTable.svelte'
+
+export { default as Pagination } from './Pagination.svelte'
+
+export type { ColumnDef } from './DataTable/types.js'
diff --git a/src/lib/ui/core/Tooltip/Tooltip.svelte b/src/lib/ui/core/Tooltip/Tooltip.svelte
index 3ed0aad82..c8be5a25c 100644
--- a/src/lib/ui/core/Tooltip/Tooltip.svelte
+++ b/src/lib/ui/core/Tooltip/Tooltip.svelte
@@ -49,6 +49,7 @@
     arrowSize: type === 'arrow' ? 11 : undefined,
     ...options,
     positioning: {
+      flip: true,
       placement: position,
       fitViewport: true,
       // NOTE: [gutter] must be set to 0 in order to offset to work
diff --git a/src/stories/Design System - Core UI/Table/DataTable/DataTable.svelte b/src/stories/Design System - Core UI/Table/DataTable/DataTable.svelte
index ed7ac2b05..4250bbd81 100644
--- a/src/stories/Design System - Core UI/Table/DataTable/DataTable.svelte	
+++ b/src/stories/Design System - Core UI/Table/DataTable/DataTable.svelte	
@@ -1,11 +1,47 @@
 <script lang="ts">
   import { DataTable } from '$ui/core/Table/index.js'
-  import { generateItems } from '../utils.js'
-  import { columns } from './columns.js'
+  import type { ComponentProps } from 'svelte'
+  import { type Item } from '../utils.js'
+  import { createColumns } from './columns.js'
+  import { SvelteSet } from 'svelte/reactivity'
 
-  const items = generateItems(10)
+  type TProps = {
+    items: Item[]
+    pagination?: ComponentProps<typeof DataTable>['pagination']
+  } & Pick<ComponentProps<typeof DataTable>, 'onSort' | 'sortColumn' | 'sortDirection'>
+
+  const { items, pagination, ...rest }: TProps = $props()
+
+  let selectedRows = $state(new SvelteSet<number>())
+  const isAllSelected = $derived(selectedRows.size === items.length)
+
+  const columns = $derived(
+    createColumns({
+      selected: selectedRows,
+      checkAllSelected: () => isAllSelected,
+      checkSelected: (item) => selectedRows.has(item.id),
+      onSelect,
+      onSelectAll,
+    }),
+  )
+
+  function onSelect(item: Item) {
+    if (selectedRows.has(item.id)) {
+      selectedRows.delete(item.id)
+    } else {
+      selectedRows.add(item.id)
+    }
+  }
+
+  function onSelectAll() {
+    if (isAllSelected) {
+      selectedRows.clear()
+    } else {
+      selectedRows = new SvelteSet(items.map(({ id }) => id))
+    }
+  }
 </script>
 
 <main class="flex h-screen items-start justify-center px-10 py-5">
-  <DataTable {items} {columns} />
+  <DataTable {items} {columns} {pagination} {...rest} />
 </main>
diff --git a/src/stories/Design System - Core UI/Table/DataTable/PagedDataTable.svelte b/src/stories/Design System - Core UI/Table/DataTable/PagedDataTable.svelte
new file mode 100644
index 000000000..3592e339c
--- /dev/null
+++ b/src/stories/Design System - Core UI/Table/DataTable/PagedDataTable.svelte	
@@ -0,0 +1,25 @@
+<script lang="ts">
+  import DataTable from './DataTable.svelte'
+  import { generateItems } from '../utils.js'
+
+  const TOTAL_ITEMS = 55
+  const items = generateItems(TOTAL_ITEMS)
+
+  let page = $state(1)
+  let pageSize = $state(10)
+</script>
+
+<main class="flex h-screen items-start justify-center px-10 py-5">
+  <DataTable
+    {items}
+    pagination={{
+      page,
+      pageSize,
+      totalItems: TOTAL_ITEMS,
+      onPageChange: (p, size) => {
+        page = p
+        pageSize = size
+      },
+    }}
+  />
+</main>
diff --git a/src/stories/Design System - Core UI/Table/DataTable/PagedLoadDataTable.svelte b/src/stories/Design System - Core UI/Table/DataTable/PagedLoadDataTable.svelte
new file mode 100644
index 000000000..4141260e1
--- /dev/null
+++ b/src/stories/Design System - Core UI/Table/DataTable/PagedLoadDataTable.svelte	
@@ -0,0 +1,54 @@
+<script lang="ts">
+  import DataTable from './DataTable.svelte'
+  import { generateItems } from '../utils.js'
+  import type { ColumnDef } from '$ui/core/Table/index.js'
+  import type { SortDirection } from '$ui/core/Table/DataTable/types.js'
+
+  let page = $state(1)
+  let pageSize = $state(10)
+  let items = $state(generateItems(10))
+
+  let sortColumn = $state<ColumnDef<any>>()
+  let sortDirection = $state<SortDirection>('DESC')
+
+  function loadItems(count: number) {
+    items = generateItems(count)
+  }
+
+  function onSortChange(column: ColumnDef<any>, sortDirection: SortDirection) {
+    sortColumn = column
+
+    const newItems = generateItems(pageSize)
+
+    const { sortAccessor } = column
+    if (!sortAccessor) {
+      items = newItems
+      return
+    }
+
+    items = newItems.toSorted((a, b) =>
+      sortDirection === 'ASC'
+        ? sortAccessor(a) - sortAccessor(b)
+        : sortAccessor(b) - sortAccessor(a),
+    )
+  }
+</script>
+
+<main class="flex h-screen items-start justify-center px-10 py-5">
+  <DataTable
+    {items}
+    {sortColumn}
+    {sortDirection}
+    onSort={onSortChange}
+    pagination={{
+      page,
+      pageSize,
+      totalItems: 60,
+      onPageChange: (p, size) => {
+        page = p
+        pageSize = size
+        loadItems(size)
+      },
+    }}
+  />
+</main>
diff --git a/src/stories/Design System - Core UI/Table/DataTable/SimpleDataTable.svelte b/src/stories/Design System - Core UI/Table/DataTable/SimpleDataTable.svelte
new file mode 100644
index 000000000..c9170557b
--- /dev/null
+++ b/src/stories/Design System - Core UI/Table/DataTable/SimpleDataTable.svelte	
@@ -0,0 +1,11 @@
+<script lang="ts">
+  import DataTable from './DataTable.svelte'
+
+  import { generateItems } from '../utils.js'
+
+  const items = generateItems(10)
+</script>
+
+<main class="flex h-screen items-start justify-center px-10 py-5">
+  <DataTable {items} />
+</main>
diff --git a/src/stories/Design System - Core UI/Table/DataTable/cells/Checkbox.svelte b/src/stories/Design System - Core UI/Table/DataTable/cells/Checkbox.svelte
new file mode 100644
index 000000000..f9c257fd5
--- /dev/null
+++ b/src/stories/Design System - Core UI/Table/DataTable/cells/Checkbox.svelte	
@@ -0,0 +1,20 @@
+<script lang="ts">
+  import type { Item } from '../../utils.js'
+  import Checkbox from '$ui/core/Checkbox/index.js'
+  import { TableCell } from '$ui/core/Table/index.js'
+
+  type TProps = {
+    item: Item
+    checkSelected: (item: Item) => boolean
+    onSelect: (item: Item) => void
+  }
+
+  const { item, checkSelected, onSelect }: TProps = $props()
+  let isSelected = $derived(checkSelected(item))
+</script>
+
+<TableCell class="w-px p-0 pl-2" noStyles>
+  <div class="w-full rounded-l-lg p-2 group-hover/row:bg-athens">
+    <Checkbox isActive={isSelected} onCheckedChange={() => onSelect(item)} />
+  </div>
+</TableCell>
diff --git a/src/stories/Design System - Core UI/Table/DataTable/cells/CheckboxHead.svelte b/src/stories/Design System - Core UI/Table/DataTable/cells/CheckboxHead.svelte
new file mode 100644
index 000000000..254057be9
--- /dev/null
+++ b/src/stories/Design System - Core UI/Table/DataTable/cells/CheckboxHead.svelte	
@@ -0,0 +1,15 @@
+<script lang="ts">
+  import Checkbox from '$ui/core/Checkbox/index.js'
+  import TableHead from '$ui/core/Table/TableHead.svelte'
+
+  type TProps = {
+    checkAllSelected: () => boolean
+    onSelectAll: () => void
+  }
+
+  const { checkAllSelected, onSelectAll }: TProps = $props()
+</script>
+
+<TableHead class="w-px">
+  <Checkbox isActive={checkAllSelected()} onCheckedChange={() => onSelectAll()} />
+</TableHead>
diff --git a/src/stories/Design System - Core UI/Table/DataTable/CustomCell.svelte b/src/stories/Design System - Core UI/Table/DataTable/cells/CustomCell.svelte
similarity index 84%
rename from src/stories/Design System - Core UI/Table/DataTable/CustomCell.svelte
rename to src/stories/Design System - Core UI/Table/DataTable/cells/CustomCell.svelte
index e7ff6c840..0562ec41c 100644
--- a/src/stories/Design System - Core UI/Table/DataTable/CustomCell.svelte	
+++ b/src/stories/Design System - Core UI/Table/DataTable/cells/CustomCell.svelte	
@@ -1,6 +1,6 @@
 <script lang="ts">
   import { TableCell } from '$ui/core/Table/index.js'
-  import type { Item } from '../utils.js'
+  import type { Item } from '../../utils.js'
 
   type TProps = {
     item: Item
diff --git a/src/stories/Design System - Core UI/Table/DataTable/columns.ts b/src/stories/Design System - Core UI/Table/DataTable/columns.ts
index 1e0fe9982..6c4e75576 100644
--- a/src/stories/Design System - Core UI/Table/DataTable/columns.ts	
+++ b/src/stories/Design System - Core UI/Table/DataTable/columns.ts	
@@ -1,23 +1,74 @@
-import type { BaseTableColumn } from '$ui/core/Table/DataTable/types.js'
-import CustomCell from './CustomCell.svelte'
 import type { Item } from '../utils.js'
 import { usdFormatter } from '$lib/utils/formatters/index.js'
 
-export const columns: BaseTableColumn<Item>[] = [
-  {
-    title: '#',
-    format: (_, index) => index + 1,
-  },
-  {
-    title: 'Title',
-    format: ({ title }) => title,
-  },
-  {
-    title: 'Price',
-    format: ({ price }) => usdFormatter(price),
-  },
-  {
-    title: 'Tokens',
-    Cell: CustomCell,
-  },
-]
+import {
+  defineColumn,
+  type ColumnDef,
+  type ComponentExtraProps,
+} from '$ui/core/Table/DataTable/types.js'
+import CustomCell from './cells/CustomCell.svelte'
+import Checkbox from './cells/Checkbox.svelte'
+import CheckboxHead from './cells/CheckboxHead.svelte'
+
+export type ColumnDeps = {
+  selected: Set<number>
+  checkAllSelected: () => boolean
+  checkSelected: (item: Item) => boolean
+  onSelect: (item: Item) => void
+  onSelectAll: () => void
+}
+
+export const createColumns = (deps: ColumnDeps) =>
+  [
+    defineColumn<
+      Item,
+      ComponentExtraProps<typeof Checkbox>,
+      ComponentExtraProps<typeof CheckboxHead>
+    >({
+      id: 'checkbox',
+      title: 'checkbox',
+      Cell: Checkbox,
+      Head: CheckboxHead,
+      getCellProps: () => ({
+        onSelect: deps.onSelect,
+        checkSelected: deps.checkSelected,
+      }),
+      getHeadProps: () => ({
+        onSelectAll: deps.onSelectAll,
+        checkAllSelected: deps.checkAllSelected,
+      }),
+    }),
+    {
+      id: 'index',
+      title: '#',
+      format: (_, index) => index + 1,
+      class: 'w-px',
+    },
+    {
+      id: 'title',
+      title: 'Title',
+      format: ({ title }) => title,
+    },
+    {
+      id: 'price',
+      title: 'Price',
+      format: ({ price }) => usdFormatter(price),
+      isSortable: true,
+      sortAccessor: ({ price }) => price,
+    },
+    {
+      id: 'volume',
+      title: 'Volume',
+      format: (item) => item.volume,
+      isSortable: true,
+      sortAccessor: ({ volume }) => volume,
+    },
+    {
+      id: 'tokens',
+      title: 'Tokens',
+      Cell: CustomCell,
+    },
+    {
+      id: 'empty',
+    },
+  ] satisfies ColumnDef<Item, any, any>[]
diff --git a/src/stories/Design System - Core UI/Table/DataTable/index.ts b/src/stories/Design System - Core UI/Table/DataTable/index.ts
deleted file mode 100644
index 416ae3d78..000000000
--- a/src/stories/Design System - Core UI/Table/DataTable/index.ts	
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './DataTable.svelte'
diff --git a/src/stories/Design System - Core UI/Table/index.stories.ts b/src/stories/Design System - Core UI/Table/index.stories.ts
index e042975e8..4c02656cc 100644
--- a/src/stories/Design System - Core UI/Table/index.stories.ts	
+++ b/src/stories/Design System - Core UI/Table/index.stories.ts	
@@ -2,7 +2,9 @@ import type { Meta, StoryObj } from '@storybook/svelte'
 import type { ComponentType } from 'svelte'
 
 import component from './index.svelte'
-import DataTableComponent from './DataTable/index.js'
+import SimpleDataTableComponent from './DataTable/SimpleDataTable.svelte'
+import PagedDataTableComponent from './DataTable/PagedDataTable.svelte'
+import PagedLoadDataTableComponent from './DataTable/PagedLoadDataTable.svelte'
 
 const meta = {
   component,
@@ -16,6 +18,14 @@ export default meta
 
 export const SimpleTable: Story = {}
 
-export const DataTable: StoryObj<typeof DataTableComponent> = {
-  render: () => ({ Component: DataTableComponent as unknown as ComponentType }),
+export const SimpleDataTable: StoryObj<typeof SimpleDataTableComponent> = {
+  render: () => ({ Component: SimpleDataTableComponent as unknown as ComponentType }),
+}
+
+export const PagedDataTable: StoryObj<typeof PagedDataTableComponent> = {
+  render: () => ({ Component: PagedDataTableComponent as unknown as ComponentType }),
+}
+
+export const PagedLoadDataTable: StoryObj<typeof PagedLoadDataTableComponent> = {
+  render: () => ({ Component: PagedLoadDataTableComponent as unknown as ComponentType }),
 }
diff --git a/src/stories/Design System - Core UI/Table/index.svelte b/src/stories/Design System - Core UI/Table/index.svelte
index 9faf543c9..9dd1c86cc 100644
--- a/src/stories/Design System - Core UI/Table/index.svelte	
+++ b/src/stories/Design System - Core UI/Table/index.svelte	
@@ -11,7 +11,7 @@
   <Table>
     <TableHeader sticky>
       <TableRow>
-        <TableHead>#</TableHead>
+        <TableHead class="w-px">#</TableHead>
         <TableHead>Name</TableHead>
         <TableHead>Price</TableHead>
         <TableHead>Count</TableHead>
@@ -20,7 +20,7 @@
     <TableBody>
       {#each DATA as { id, title, price, volume }, i}
         <TableRow>
-          <TableCell>{id + 1}</TableCell>
+          <TableCell class="w-px">{id + 1}</TableCell>
           <TableCell>{title}</TableCell>
           <TableCell>{usdFormatter(price)}</TableCell>
           <TableCell>{volume}</TableCell>