diff --git a/app/src/lib/components/ui/table/table-cell.svelte b/app/src/lib/components/ui/table/table-cell.svelte
index 5329134596..6af9fe242c 100644
--- a/app/src/lib/components/ui/table/table-cell.svelte
+++ b/app/src/lib/components/ui/table/table-cell.svelte
@@ -9,7 +9,7 @@ export { className as class }
 </script>
 
 <td
-  class={cn('p-4 align-middle [&:has([role=checkbox])]:pr-0', className)}
+  class={cn('px-2 py-1 align-middle [&:has([role=checkbox])]:pr-0', className)}
   {...$$restProps}
   on:click
   on:keydown
diff --git a/app/src/lib/components/ui/table/table-head.svelte b/app/src/lib/components/ui/table/table-head.svelte
index d01fa8fe39..4d95d6bac4 100644
--- a/app/src/lib/components/ui/table/table-head.svelte
+++ b/app/src/lib/components/ui/table/table-head.svelte
@@ -10,7 +10,7 @@ export { className as class }
 
 <th
   class={cn(
-    'h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0',
+    'h-12 px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0',
     className,
   )}
   {...$$restProps}
diff --git a/app/src/lib/components/ui/table/table-row.svelte b/app/src/lib/components/ui/table/table-row.svelte
index 7f432dfe58..0d15c4aa85 100644
--- a/app/src/lib/components/ui/table/table-row.svelte
+++ b/app/src/lib/components/ui/table/table-row.svelte
@@ -12,7 +12,7 @@ export { className as class }
 
 <tr
   class={cn(
-    'border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted',
+    'border-b border-secondary transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted',
     className,
   )}
   {...$$restProps}
diff --git a/app/src/lib/graphql/documents/index-status.ts b/app/src/lib/graphql/documents/index-status.ts
index aa786dd763..41a6b59f22 100644
--- a/app/src/lib/graphql/documents/index-status.ts
+++ b/app/src/lib/graphql/documents/index-status.ts
@@ -2,24 +2,14 @@ import { graphql } from "gql.tada"
 
 export const indexStatusQuery = graphql(/* GraphQL */ `
   query IndexStatusQuery {
-    data: v0_index_status(order_by: { id: asc }) {
-      id
+    v0_index_status(order_by: { id: asc }) {
       chain_id
       display_name
       height
-      time
-    }
-  }
-`)
-
-export const indexStatusSubscription = graphql(/* GraphQL */ `
-  subscription IndexStatusSubscription {
-    data: v0_index_status(order_by: { id: asc }) {
       id
-      chain_id
-      display_name
-      height
-      time
+      status
+      timestamp
+      tip_age_seconds
     }
   }
 `)
diff --git a/app/src/routes/explorer/(components)/cell-plain-text.svelte b/app/src/routes/explorer/(components)/cell-plain-text.svelte
index c7de3563ba..6fb69a9c1b 100644
--- a/app/src/routes/explorer/(components)/cell-plain-text.svelte
+++ b/app/src/routes/explorer/(components)/cell-plain-text.svelte
@@ -3,5 +3,3 @@ export let value: string
 </script>
 
 <p {...$$restProps}>{value}</p>
-
-<style lang="postcss"></style>
diff --git a/app/src/routes/explorer/(components)/cell-status.svelte b/app/src/routes/explorer/(components)/cell-status.svelte
new file mode 100644
index 0000000000..1a56e4be22
--- /dev/null
+++ b/app/src/routes/explorer/(components)/cell-status.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+import { cn } from "$lib/utilities/shadcn.ts"
+
+export let value: string
+</script>
+
+<div class={cn(value === 'HEALTHY' ? 'bg-green-500 dark:bg-green-800' : 'bg-red-500 dark:bg-red-800', 'font-bold text-white inline px-2 py-1 rounded')}  {...$$restProps}>{value}</div>
diff --git a/app/src/routes/explorer/(components)/table.svelte b/app/src/routes/explorer/(components)/table.svelte
new file mode 100644
index 0000000000..d888e23b7a
--- /dev/null
+++ b/app/src/routes/explorer/(components)/table.svelte
@@ -0,0 +1,96 @@
+<script lang="ts" generics="T extends object" >
+import { derived, get } from "svelte/store"
+import {
+  flexRender,
+  type ColumnDef,
+  getCoreRowModel,
+  type TableOptions,
+  createSvelteTable,
+  getFilteredRowModel,
+  getPaginationRowModel
+} from "@tanstack/svelte-table"
+import { writable, type Writable } from "svelte/store"
+import { cn } from "$lib/utilities/shadcn.ts"
+import * as Table from "$lib/components/ui/table"
+import { createVirtualizer } from "@tanstack/svelte-virtual"
+import * as Card from "$lib/components/ui/card/index.ts"
+
+export let columns: Array<ColumnDef<any>>
+// https://github.com/TanStack/table/issues/4241
+// @ts-ignore
+export let dataStore: Writable<Array<any>>
+
+const options = writable<TableOptions<any>>({
+  data: $dataStore,
+  enableHiding: true,
+  enableFilters: true,
+  // https://github.com/TanStack/table/issues/4241
+  // @ts-ignore
+  columns,
+  autoResetPageIndex: true,
+  enableColumnFilters: true,
+  enableColumnResizing: true,
+  enableMultiRowSelection: true,
+  getCoreRowModel: getCoreRowModel(),
+  getFilteredRowModel: getFilteredRowModel(),
+  getPaginationRowModel: getPaginationRowModel()
+})
+
+let virtualListElement: HTMLDivElement
+
+const table = createSvelteTable(options)
+const rows = derived(table, $t => $t.getRowModel().rows)
+
+$: virtualizer = createVirtualizer<HTMLDivElement, HTMLTableRowElement>({
+  overscan: 20,
+  count: $rows.length,
+  estimateSize: () => 34,
+  getScrollElement: () => virtualListElement
+})
+
+$: dataStore.subscribe(() => {
+  if (!$dataStore) return
+  $table.setPageSize($dataStore.length)
+  options.update(options => ({ ...options, data: $dataStore as unknown as Array<T> }))
+})
+</script>
+
+<Card.Root>
+  <div bind:this={virtualListElement} >
+    <Table.Root>
+      <Table.Header>
+        {#each $table.getHeaderGroups() as headerGroup (headerGroup.id)}
+          <Table.Row>
+            {#each headerGroup.headers as header (header.id)}
+              <Table.Head
+                colspan={header.colSpan}
+                class={cn(`w-[${header.getSize()}px]`)}
+              >
+                  <svelte:component
+                    this={flexRender(header.column.columnDef.header, header.getContext())}
+                  />
+              </Table.Head>
+            {/each}
+          </Table.Row>
+        {/each}
+      </Table.Header>
+      <Table.Body class={cn(`h-[${$virtualizer.getTotalSize()}px]`)}>
+        {#each $virtualizer.getVirtualItems() as row, index (row.index)}
+          <Table.Row
+            class={cn(
+              index % 2 === 0 ? 'bg-secondary/10' : 'bg-transparent',
+            )}
+          >
+            {#each $rows[row.index].getVisibleCells() as cell, index (cell.id)}
+              <Table.Cell>
+                <svelte:component
+                  this={flexRender(cell.column.columnDef.cell, cell.getContext())}
+                />
+              </Table.Cell>
+            {/each}
+          </Table.Row>
+        {/each}
+      </Table.Body>
+    </Table.Root>
+  </div>
+</Card.Root>
diff --git a/app/src/routes/explorer/+layout.svelte b/app/src/routes/explorer/+layout.svelte
index 600fed0718..4adade749f 100644
--- a/app/src/routes/explorer/+layout.svelte
+++ b/app/src/routes/explorer/+layout.svelte
@@ -63,6 +63,11 @@ onNavigate(navigation => {
 })
 </script>
 
+<svelte:head>
+  <title>Union - Explorer</title>
+</svelte:head>
+
+
 <main class="flex flex-row flex-1 overflow-y-hidden">
   <Resizable.PaneGroup direction="horizontal" class="w-full rounded-lg bg-re" {onLayoutChange}>
     <Resizable.Pane
diff --git a/app/src/routes/explorer/blocks/+page.svelte b/app/src/routes/explorer/blocks/+page.svelte
index 7aeac99cda..a9f097c873 100644
--- a/app/src/routes/explorer/blocks/+page.svelte
+++ b/app/src/routes/explorer/blocks/+page.svelte
@@ -1,29 +1,20 @@
 <script lang="ts">
-import {
-  flexRender,
-  type ColumnDef,
-  getCoreRowModel,
-  type TableOptions,
-  createSvelteTable,
-  getFilteredRowModel,
-  getPaginationRowModel
-} from "@tanstack/svelte-table"
+import { flexRender, type ColumnDef } from "@tanstack/svelte-table"
 import request from "graphql-request"
 import { URLS } from "$lib/constants"
 import { writable } from "svelte/store"
 import { DurationUnits } from "svelte-ux"
-import { cn } from "$lib/utilities/shadcn.ts"
 import { CHAIN_MAP } from "$lib/constants/chains"
-import * as Table from "$lib/components/ui/table"
 import { createQuery } from "@tanstack/svelte-query"
 import { removeArrayDuplicates } from "$lib/utilities"
 import type { Override } from "$lib/utilities/types.ts"
-import { createVirtualizer } from "@tanstack/svelte-virtual"
 import Button from "$lib/components/ui/button/button.svelte"
 import CellText from "../(components)/cell-plain-text.svelte"
 import CellDurationText from "../(components)/cell-duration-text.svelte"
 import { cosmosBlocksQuery } from "$lib/graphql/documents/cosmos-blocks.ts"
 
+import Table from "../(components)/table.svelte"
+
 $: cosmosBlocks = createQuery({
   queryKey: ["cosmos-blocks"],
   refetchInterval: 6_000,
@@ -44,15 +35,14 @@ $: if (blockData) {
     removeArrayDuplicates([...(blockData as Array<CosmosBlock>), ...currentBlocks], "height")
   )
 }
-
-const defaultColumns: Array<ColumnDef<CosmosBlock>> = [
+const columns = [
   {
     accessorKey: "time",
     size: 100,
     meta: {
       class: "ml-1.5 justify-start"
     },
-    header: info => "Time",
+    header: () => "Time",
     cell: info =>
       flexRender(CellDurationText, {
         totalUnits: 3,
@@ -64,7 +54,7 @@ const defaultColumns: Array<ColumnDef<CosmosBlock>> = [
   },
   {
     accessorKey: "height",
-    header: info => "Height",
+    header: () => "Height",
     size: 100,
     meta: {
       class: "w-full justify-start"
@@ -82,28 +72,26 @@ const defaultColumns: Array<ColumnDef<CosmosBlock>> = [
   },
   {
     accessorKey: "chain_id",
-    header: info => "Chain ID",
+    header: () => "Chain ID",
     meta: {
       class: "w-full justify-start"
     },
-    size: 100,
-    maxSize: 100,
+    size: 200,
     cell: info =>
       flexRender(CellText, {
-        value: CHAIN_MAP[info.getValue() as unknown as number].chainId,
-        class: "min-w-[105px] text-clip"
+        value: CHAIN_MAP[info.getValue() as unknown as number].chainId
       })
   },
   {
     accessorKey: "hash",
     meta: {
-      class: "w-full justify-start ml-1.5"
+      class: "w-full justify-start"
     },
-    header: info => flexRender(CellText, { value: "Hash", class: "text-left" }),
+    header: () => flexRender(CellText, { value: "Hash" }),
     size: 1000,
     cell: info =>
       flexRender(Button, {
-        class: "py-0 px-2.5 max-w-[600px]",
+        class: "p-0 font-mono",
         variant: "link",
         target: "_blank",
         value: info.getValue(),
@@ -111,109 +99,9 @@ const defaultColumns: Array<ColumnDef<CosmosBlock>> = [
         href: `https://rpc.testnet.bonlulu.uno/block_by_hash?hash=${info.getValue()}`
       })
   }
-]
-
-const options = writable<TableOptions<CosmosBlock>>({
-  data: $blocksStore,
-  enableHiding: true,
-  enableFilters: true,
-  columns: defaultColumns,
-  autoResetPageIndex: true, // Automatically update pagination when data or page size changes
-  enableColumnFilters: true,
-  enableColumnResizing: true,
-  enableMultiRowSelection: true,
-  getCoreRowModel: getCoreRowModel(),
-  getFilteredRowModel: getFilteredRowModel(),
-  getPaginationRowModel: getPaginationRowModel()
-})
-
-let virtualListElement: HTMLDivElement
-
-const rerender = () =>
-  options.update(options => ({ ...options, data: $blocksStore as unknown as Array<CosmosBlock> }))
-
-const table = createSvelteTable(options)
-
-$: blocksStore.subscribe(() => {
-  if (!$blocksStore) return
-  $table.setPageSize($blocksStore.length)
-  rerender()
-})
-
-$: rows = $table.getRowModel().rows
-
-$: virtualizer = createVirtualizer<HTMLDivElement, HTMLTableRowElement>({
-  overscan: 20,
-  count: rows.length,
-  estimateSize: () => 34,
-  getScrollElement: () => virtualListElement
-})
+] as Array<ColumnDef<CosmosBlock>>
 </script>
 
-<svelte:head>
-  <title>Union - Explorer</title>
-</svelte:head>
+<Table columns={columns} bind:dataStore={blocksStore}/>
+{JSON.stringify($blocksStore, null, 2)}
 
-  <div
-    bind:this={virtualListElement}
-    class={cn('rounded-md border border-secondary border-solid w-full')}
-  >
-    <Table.Root class={cn('size-full mx-auto rounded-md w-full')}>
-      <Table.Header
-        class={cn('outline outline-1 outline-secondary sticky top-0 left-0 bottom-0 z-50')}
-      >
-        {#each $table.getHeaderGroups() as headerGroup (headerGroup.id)}
-          <Table.Row class="font-bold text-md sticky">
-            {#each headerGroup.headers as header (header.id)}
-              <Table.Head
-                colspan={header.colSpan}
-                class={cn('text-left px-2 sticky top-0', `w-[${header.getSize()}px]`)}
-              >
-                {#if !header.isPlaceholder}
-                  <Button
-                    variant="ghost"
-                    disabled={!header.column.getCanSort()}
-                    on:click={header.column.getToggleSortingHandler()}
-                    class={cn(
-                      header.column.columnDef.meta?.class,
-                      'cursor-pointer select-none capitalize px-0 hover:bg-transparent text-md',
-                    )}
-                  >
-                    <svelte:component
-                      this={flexRender(header.column.columnDef.header, header.getContext())}
-                    />
-                  </Button>
-                {/if}
-              </Table.Head>
-            {/each}
-          </Table.Row>
-        {/each}
-      </Table.Header>
-      <Table.Body class={cn('relative', `h-[${$virtualizer.getTotalSize()}px] w-full`)}>
-        {#each $virtualizer.getVirtualItems() as row, index (row.index)}
-          <Table.Row
-            class={cn(
-              'h-5 text-left overflow-auto',
-              'border-b-[1px] border-solid border-secondary',
-              index % 2 === 0 ? 'bg-secondary/10' : 'bg-transparent',
-            )}
-          >
-            {#each rows[row.index].getVisibleCells() as cell, index (cell.id)}
-              <Table.Cell class={cn('px-2 py-0 text-left')}>
-                <svelte:component
-                  this={flexRender(cell.column.columnDef.cell, cell.getContext())}
-                />
-              </Table.Cell>
-            {/each}
-          </Table.Row>
-        {/each}
-      </Table.Body>
-    </Table.Root>
-  </div>
-
-<style lang="postcss">
-  :global(tr td:last-child) {
-    font-variant-numeric: tabular-nums;
-    font-variant: common-ligatures tabular-nums;
-  }
-</style>
diff --git a/app/src/routes/explorer/index-status/+page.svelte b/app/src/routes/explorer/index-status/+page.svelte
index 348a1554ef..2228292ca4 100644
--- a/app/src/routes/explorer/index-status/+page.svelte
+++ b/app/src/routes/explorer/index-status/+page.svelte
@@ -1,24 +1,71 @@
 <script lang="ts">
-import { voyagerQueueQuery } from "$lib/graphql/documents/voyager-queue.ts"
+import request from "graphql-request"
+import { indexStatusQuery } from "$lib/graphql/documents/index-status.ts"
 import { createQuery } from "@tanstack/svelte-query"
 import { URLS } from "$lib/constants"
+import Table from "../(components)/table.svelte"
+import { flexRender, type ColumnDef } from "@tanstack/svelte-table"
+import { removeArrayDuplicates } from "$lib/utilities"
+import { writable } from "svelte/store"
+import CellDurationText from "../(components)/cell-duration-text.svelte"
+import CellStatus from "../(components)/cell-status.svelte"
+import { DurationUnits } from "svelte-ux"
 
 $: indexStatus = createQuery({
   queryKey: ["index-status"],
-  refetchInterval: 1_000,
-  // enabled: false,
-  queryFn: async () => {
-    const response = await fetch(`${URLS.GRAPHQL_REST}/index_status`)
-    const json = (await response.json()) as { v0_index_status: unknown }
-    return json.v0_index_status
-  }
+  refetchInterval: 500,
+  queryFn: async () => request(URLS.GRAPHQL, indexStatusQuery, {})
 })
-</script>
 
-<h1>Index Status</h1>
+$: indexStatusData = $indexStatus?.data?.v0_index_status ?? []
+
+type IndexStatus = (typeof indexStatusData)[number]
+
+$: indexStatusStore = writable<Array<IndexStatus>>(indexStatusData as Array<IndexStatus>)
+$: if (indexStatus) {
+  indexStatusStore.update(currentStatuses =>
+    removeArrayDuplicates(
+      [...(indexStatusData as Array<IndexStatus>), ...currentStatuses],
+      "chain_id"
+    )
+  )
+}
+
+const columns: Array<ColumnDef<{ chain_id: string }>> = [
+  {
+    accessorKey: "display_name",
+    header: () => "Chain",
+    size: 200,
+    cell: info => info.getValue()
+  },
+  {
+    accessorKey: "chain_id",
+    header: () => "Chain ID",
+    size: 200,
+    cell: info => info.getValue()
+  },
+  {
+    accessorKey: "timestamp",
+    header: () => "Latest block",
+    size: 200,
+    cell: info =>
+      flexRender(CellDurationText, {
+        totalUnits: 3,
+        variant: "short",
+        minUnits: DurationUnits.Second,
+        start: new Date(info.getValue() as string)
+      })
+  },
+  {
+    accessorKey: "status",
+    header: () => "Status",
+    size: 200,
+    cell: info =>
+      flexRender(CellStatus, {
+        value: info.getValue()
+      })
+  }
+]
+</script>
 
-{#if $indexStatus?.data }
-<pre class="overflow-scroll">
-  {JSON.stringify($indexStatus?.data, null, 2)}
-</pre>
-{/if}
+<Table bind:dataStore={indexStatusStore} {columns} />