diff --git a/package-lock.json b/package-lock.json
index 9cea2308..15d0c9e5 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,7 +9,7 @@
       "version": "0.0.1",
       "dependencies": {
         "@tailwindcss/vite": "^4.1.16",
-        "@unyt/datex": "^0.0.10",
+        "@unyt/datex": "0.0.13",
         "@unyt/speck": "^0.0.11",
         "@vueuse/core": "^14.0.0",
         "class-variance-authority": "^0.7.1",
@@ -2552,9 +2552,9 @@
       }
     },
     "node_modules/@unyt/datex": {
-      "version": "0.0.10",
-      "resolved": "https://registry.npmjs.org/@unyt/datex/-/datex-0.0.10.tgz",
-      "integrity": "sha512-dTyqhb92/K/nH/uIQDTeLNOQVz9M5MBC4v/fzHe+s7pnOkw8m/SyUbvlwh+ZAwTNVd27ygsQmvusKFSn6w8Yrg==",
+      "version": "0.0.13",
+      "resolved": "https://registry.npmjs.org/@unyt/datex/-/datex-0.0.13.tgz",
+      "integrity": "sha512-H9iXiPLrVyPx82K1ahjCK0XII9DGtITZkIz6g4X750USfdelRfSacNPkpQklNu3Qn3Zkk4gxDQPUg1iQWaexMg==",
       "license": "MIT"
     },
     "node_modules/@unyt/speck": {
diff --git a/package.json b/package.json
index bac5ea92..2827e9fe 100644
--- a/package.json
+++ b/package.json
@@ -19,7 +19,7 @@
   },
   "dependencies": {
     "@tailwindcss/vite": "^4.1.16",
-    "@unyt/datex": "^0.0.10",
+    "@unyt/datex": "0.0.13",
     "@unyt/speck": "^0.0.11",
     "@vueuse/core": "^14.0.0",
     "class-variance-authority": "^0.7.1",
diff --git a/src/components/ComHubEndpointList.vue b/src/components/ComHubEndpointList.vue
new file mode 100644
index 00000000..dae7b835
--- /dev/null
+++ b/src/components/ComHubEndpointList.vue
@@ -0,0 +1,157 @@
+<template>
+  <div>
+    <div
+      v-for="[endpointId, sockets] in filteredEndpoints"
+      :key="endpointId"
+      class="border border-neutral-200 dark:border-neutral-700 rounded-lg p-3 mb-3 bg-white dark:bg-neutral-900 shadow-sm text-neutral-900 dark:text-neutral-100"
+    >
+      <!-- Endpoint Header -->
+      <div class="flex justify-between items-center cursor-pointer" @click="toggle(endpointId)">
+        <div class="flex flex-col gap-1">
+          <div class="flex items-center gap-2">
+            <h3 class="font-semibold text-sm font-mono text-blue-600 dark:text-blue-400">{{ endpointId }}</h3>
+            <span
+              v-if="isDirect(sockets)"
+              class="text-xs px-2 py-0.5 rounded bg-green-100 text-green-700 dark:bg-green-900 dark:text-green-300"
+            >direct</span>
+          </div>
+          <div class="text-xs text-neutral-500">
+            Connected via {{ sockets.length }} {{ sockets.length === 1 ? 'socket' : 'sockets' }}
+            {{ getEndpointDirection(sockets) }}
+          </div>
+        </div>
+        <div class="flex items-center gap-2">
+          <span class="text-neutral-400 text-xs">{{ expanded[endpointId] ? '▾' : '▸' }}</span>
+        </div>
+      </div>
+
+      <!-- Expanded Socket List -->
+      <div v-if="expanded[endpointId]" class="mt-3 border-t pt-3 flex flex-col gap-2">
+        <div
+          v-for="(socket, idx) in sockets"
+          :key="socket.uuid + idx"
+          class="text-sm p-3 rounded bg-neutral-50 dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-700"
+        >
+          <div class="flex items-start justify-between gap-2">
+            <div class="flex flex-col gap-1 flex-1">
+              <h4 class="font-semibold text-sm">
+                {{ socket.interface.properties.interface_type }}
+                <span v-if="socket.interface.properties.name" class="font-normal text-neutral-500">
+                  ({{ socket.interface.properties.name }})
+                </span>
+              </h4>
+              <div class="text-xs text-neutral-400 font-mono mt-0.5">{{ socket.uuid }}</div>
+              <div class="text-xs text-neutral-500 mt-1 flex items-center gap-2">
+                <span>Known since {{ formatTime(socket.properties.known_since) }}</span>
+                <span>·</span>
+                <span>Distance: {{ socket.properties.distance }}</span>
+                <span
+                  v-if="socket.properties.is_direct"
+                  class="text-xs px-2 py-0.5 rounded bg-green-100 text-green-700 dark:bg-green-900 dark:text-green-300"
+                >direct</span>
+              </div>
+            </div>
+            <button
+              v-if="advancedMode"
+              @click.stop="removeSocket(socket.uuid)"
+              class="shrink-0 text-xs px-2 py-1 rounded bg-red-100 text-red-600 hover:bg-red-200 dark:bg-red-900 dark:text-red-300 dark:hover:bg-red-800 transition"
+            >
+              Disconnect
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div v-if="filteredEndpoints.length === 0" class="text-sm text-neutral-500">
+      No matching endpoints found.
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { ComHubInterface, ComHubSocket } from '@/components/ComHubOverviewWrapper.vue'
+import { removeSocket } from '@/lib/runtime'
+import { computed, reactive, watch } from 'vue'
+
+interface SocketWithInterface extends ComHubSocket {
+  interface: {
+    uuid: string
+    properties: ComHubInterface['properties']
+  }
+}
+
+const props = defineProps<{
+  interfaces: ComHubInterface[]
+  searchQuery: string
+  advancedMode: boolean
+}>()
+
+const expanded = reactive<Record<string, boolean>>({})
+
+const endpointMap = computed((): Map<string, SocketWithInterface[]> => {
+  const map = new Map<string, SocketWithInterface[]>()
+  for (const iface of props.interfaces) {
+    for (const socket of iface.sockets) {
+      const entry: SocketWithInterface = {
+        ...socket,
+        interface: { uuid: iface.uuid, properties: iface.properties },
+      }
+      if (!map.has(socket.endpoint)) map.set(socket.endpoint, [])
+      map.get(socket.endpoint)!.push(entry)
+    }
+  }
+  return map
+})
+
+const filteredEndpoints = computed((): [string, SocketWithInterface[]][] => {
+  const query = props.searchQuery.trim().toLowerCase()
+  const entries = Array.from(endpointMap.value.entries())
+  if (!query) return entries
+  return entries.filter(([endpointId]) => endpointId.toLowerCase().includes(query))
+})
+
+watch(filteredEndpoints, (entries) => {
+  if (!props.searchQuery.trim()) return
+  for (const [endpointId] of entries) {
+    expanded[endpointId] = true
+  }
+})
+
+watch(() => props.searchQuery, (val) => {
+  if (!val.trim()) {
+    Object.keys(expanded).forEach((key) => { expanded[key] = false })
+  }
+})
+
+function toggle(endpointId: string) {
+  expanded[endpointId] = !expanded[endpointId]
+}
+
+function getEndpointDirection(sockets: SocketWithInterface[]): string {
+  const dirs = new Set(sockets.map((s) => s.direction))
+  if (dirs.has('InOut')) return '↔'
+  if (dirs.has('In') && dirs.has('Out')) return '↔'
+  if (dirs.has('In')) return '←'
+  if (dirs.has('Out')) return '→'
+  return '↔'
+}
+
+function isDirect(sockets: SocketWithInterface[]): boolean {
+  return sockets.some((s) => s.properties.is_direct)
+}
+
+const rtf = new Intl.RelativeTimeFormat(undefined, { numeric: 'auto' })
+
+function formatTime(ms: number): string {
+  const elapsed = Math.floor((Date.now() - ms) / 1000)
+  if (elapsed < 60) return rtf.format(-elapsed, 'second')
+  const minutes = Math.floor(elapsed / 60)
+  if (minutes < 60) return rtf.format(-minutes, 'minute')
+  const hours = Math.floor(minutes / 60)
+  if (hours < 24) return rtf.format(-hours, 'hour')
+  return rtf.format(-Math.floor(hours / 24), 'day')
+}
+
+
+</script>
\ No newline at end of file
diff --git a/src/components/ComHubEndpointView.vue b/src/components/ComHubEndpointView.vue
deleted file mode 100644
index da0986e2..00000000
--- a/src/components/ComHubEndpointView.vue
+++ /dev/null
@@ -1,322 +0,0 @@
-<template>
-    <div class="h-full overflow-auto">
-      <h2 class="text-lg font-semibold mb-3">ComHub Endpoints</h2>
-
-      <!-- Search Bar -->
-      <div class="mb-4 w-1/2">
-        <input
-          v-model="searchQuery"
-          type="text"
-          placeholder="Search endpoint identifier (e.g. @@...)"
-          class="w-full px-3 py-2 text-sm rounded border bg-white dark:bg-neutral-900 dark:border-neutral-700 focus:outline-none focus:ring-2 focus:ring-blue-500"
-        />
-      </div>
-
-      <!-- Endpoint Cards -->
-      <div
-        v-for="[endpointId, sockets] in filteredEndpoints"
-        :key="endpointId"
-        class="border rounded-lg p-3 mb-3 bg-white dark:bg-neutral-900 shadow-sm text-neutral-900 dark:text-neutral-100"
-      >
-        <!-- Endpoint Header -->
-        <div
-          class="flex justify-between items-center cursor-pointer"
-          @click="toggle(endpointId)"
-        >
-          <div class="flex flex-col gap-1">
-            <div class="flex items-center gap-2">
-              <h3 class="font-semibold text-sm font-mono text-blue-600 dark:text-blue-400">{{ endpointId }}</h3>
-
-              <!-- Direct badge -->
-              <span
-                v-if="isDirect(sockets)"
-                class="text-xs px-2 py-0.5 rounded bg-green-100 text-green-700 dark:bg-green-900 dark:text-green-300"
-              >
-                direct
-              </span>
-            </div>
-
-            <div class="text-xs text-neutral-500">
-              Connected via {{ sockets.length }} {{ sockets.length === 1 ? 'socket' : 'sockets' }}
-              {{ getEndpointDirection(sockets) }}
-            </div>
-          </div>
-
-          <span class="text-neutral-400 text-xs">{{ expanded[endpointId] ? '▾' : '▸' }}</span>
-        </div>
-
-        <!-- Expanded Socket List -->
-        <div v-if="expanded[endpointId]" class="mt-3 border-t pt-3 flex flex-col gap-2">
-          <div
-            v-for="(socket, idx) in sockets"
-            :key="socket.uuid + idx"
-            class="text-sm p-3 rounded bg-neutral-100 dark:bg-neutral-800"
-          >
-            <!-- Interface type + name -->
-            <h4 class="font-semibold text-sm">
-              {{ socket.interface.properties.interface_type }}
-              <span v-if="socket.interface.properties.name" class="font-normal text-neutral-500">
-                ({{ socket.interface.properties.name }})
-              </span>
-            </h4>
-
-            <!-- Socket UUID -->
-            <div class="text-xs text-neutral-400 font-mono mt-0.5">
-              {{ socket.uuid }}
-            </div>
-
-            <!-- Known since + distance -->
-            <div class="text-xs text-neutral-500 mt-1 flex items-center gap-2">
-              <span>Known since {{ formatTime(socket.properties.known_since) }}</span>
-              <span>·</span>
-              <span>Distance: {{ socket.properties.distance }}</span>
-
-              <!-- Direct badge on socket level -->
-              <span
-                v-if="socket.properties.is_direct"
-                class="text-xs px-2 py-0.5 rounded bg-green-100 text-green-700 dark:bg-green-900 dark:text-green-300"
-              >
-                direct
-              </span>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <!-- Empty state -->
-      <div
-        v-if="filteredEndpoints.length === 0"
-        class="text-sm text-neutral-500"
-      >
-        No matching endpoints found.
-      </div>
-    </div>
-  </template>
-
-  <script setup lang="ts">
-  import { reactive, ref, computed, watch } from 'vue'
-
-  // ---- Types ----
-
-  interface InterfaceProperties {
-    interface_type?: string
-    channel?: string
-    name?: string
-    direction?: string
-    round_trip_time?: number
-    max_bandwidth?: number
-    [key: string]: unknown
-  }
-
-  interface ComHubInterface {
-    uuid: string
-    properties: InterfaceProperties
-    sockets: RawSocket[]
-    is_waiting_for_socket_connections?: boolean
-  }
-
-  interface RawSocket {
-    uuid: string
-    direction: string
-    endpoint: string
-    properties: {
-      known_since: number
-      distance: number
-      is_direct: boolean
-      channel_factor: number
-      direction: string
-    }
-  }
-
-  interface SocketWithInterface extends RawSocket {
-    interface: {
-      uuid: string
-      properties: InterfaceProperties
-    }
-  }
-
-  // ---- Mock data (same as ComHubOverview) ----
-  // TODO: Replace with live ComHub runtime state
-
-  const comhub = reactive({
-    endpoint: '@@FB2D5CF3FBE8CF00FC4518DAF76A189602E1',
-    interfaces: [
-      {
-        uuid: 'com_interface::28a6b060-055c-4d20-a715-9bafd9edb90d',
-        properties: {
-          interface_type: 'websocket-client',
-          channel: 'websocket',
-          name: 'ws://localhost:8043',
-          direction: 'InOut',
-          round_trip_time: 40,
-          max_bandwidth: 1000,
-        },
-        sockets: [
-          {
-            uuid: 'socket::4a17ec53-6027-4527-9786-abf8db76c61f',
-            direction: 'InOut',
-            endpoint: '@server',
-            properties: { known_since: 4, distance: 1, is_direct: true, channel_factor: 1, direction: 'InOut' },
-          },
-          {
-            uuid: 'socket::4a17ec53-6027-4527-9786-abf8db76c61f',
-            direction: 'InOut',
-            endpoint: '@@8FAEBB621D91CB42EA59389EB5C47A9BADEF',
-            properties: { known_since: 16852, distance: 2, is_direct: false, channel_factor: 1, direction: 'InOut' },
-          },
-          {
-            uuid: 'socket::4a17ec53-6027-4527-9786-abf8db76c61f',
-            direction: 'InOut',
-            endpoint: '@example1',
-            properties: { known_since: 16852, distance: 2, is_direct: false, channel_factor: 1, direction: 'InOut' },
-          },
-        ],
-        is_waiting_for_socket_connections: false,
-      },
-      {
-        uuid: 'com_interface::12364567-055c-4d20-a715-9bafd9edb90d',
-        properties: {
-          interface_type: 'tcp-client',
-          channel: 'tcp',
-          name: '12.34.56.78:8043',
-          direction: 'InOut',
-          round_trip_time: 40,
-          max_bandwidth: 1000,
-        },
-        sockets: [
-          {
-            uuid: 'socket::4a17ec53-6027-4527-9786-abf8db76c62a',
-            direction: 'InOut',
-            endpoint: '@example1',
-            properties: { known_since: 16852, distance: 2, is_direct: false, channel_factor: 1, direction: 'InOut' },
-          },
-          {
-            uuid: 'socket::4a17ec53-6027-4527-9786-abf8db76c62b',
-            direction: 'InOut',
-            endpoint: '@example2',
-            properties: { known_since: 16852, distance: 2, is_direct: false, channel_factor: 1, direction: 'InOut' },
-          },
-          {
-            uuid: 'socket::4a17ec53-6027-4527-9786-abf8db76c62c',
-            direction: 'InOut',
-            endpoint: '@server',
-            properties: { known_since: 4, distance: 1, is_direct: true, channel_factor: 1, direction: 'InOut' },
-          },
-          {
-            uuid: 'socket::4a17ec53-6027-4527-9786-abf8db76c62d',
-            direction: 'InOut',
-            endpoint: '@@8FAEBB621D91CB42EA59389EB5C47A9BADEF',
-            properties: { known_since: 16852, distance: 2, is_direct: false, channel_factor: 1, direction: 'InOut' },
-          },
-        ],
-        is_waiting_for_socket_connections: false,
-      },
-      {
-        uuid: 'com_interface::a8fc3085-9717-4715-bbed-b20f6128e6df',
-        properties: {
-          interface_type: 'local',
-          channel: 'local',
-          direction: 'InOut',
-          round_trip_time: 0,
-          max_bandwidth: 4294967295,
-        },
-        sockets: [
-          {
-            uuid: 'socket::cb2f1a7e-5fc6-4bd1-acdc-ce796606c6bd',
-            direction: 'InOut',
-            endpoint: '@@local',
-            properties: { known_since: 0, distance: 0, is_direct: true, channel_factor: 1, direction: 'InOut' },
-          },
-        ],
-        is_waiting_for_socket_connections: false,
-      },
-    ] as ComHubInterface[],
-  })
-
-  // ---- State ----
-
-  const searchQuery = ref('')
-  const expanded = reactive<Record<string, boolean>>({})
-
-  // ---- Data transformation: interface[] → endpoint → sockets+interface ----
-
-  const endpointMap = computed((): Map<string, SocketWithInterface[]> => {
-    const map = new Map<string, SocketWithInterface[]>()
-
-    for (const iface of comhub.interfaces) {
-      for (const socket of iface.sockets) {
-        const entry: SocketWithInterface = {
-          ...socket,
-          interface: {
-            uuid: iface.uuid,
-            properties: iface.properties,
-          },
-        }
-        if (!map.has(socket.endpoint)) {
-          map.set(socket.endpoint, [])
-        }
-        map.get(socket.endpoint)!.push(entry)
-      }
-    }
-
-    return map
-  })
-
-  // ---- Filtered endpoints based on search ----
-
-  const filteredEndpoints = computed((): [string, SocketWithInterface[]][] => {
-  const query = searchQuery.value.trim().toLowerCase()
-  const entries = Array.from(endpointMap.value.entries())
-  if (!query) return entries
-  return entries.filter(([endpointId]) =>
-    endpointId.toLowerCase().includes(query)
-  )
-})
-
-watch(filteredEndpoints, (entries) => {
-  const query = searchQuery.value.trim()
-  if (!query) return
-  for (const [endpointId] of entries) {
-    expanded[endpointId] = true
-  }
-})
-
-  // ---- Helpers ----
-
-  function toggle(endpointId: string) {
-    expanded[endpointId] = !expanded[endpointId]
-  }
-
-  /**
-   * Direction logic per spec:
-   * - "↔" if any socket is InOut, or if both In and Out exist
-   * - "←" if only In sockets
-   * - "→" if only Out sockets
-   */
-  function getEndpointDirection(sockets: SocketWithInterface[]): string {
-    const dirs = new Set(sockets.map((s) => s.direction))
-    if (dirs.has('InOut')) return '↔'
-    if (dirs.has('In') && dirs.has('Out')) return '↔'
-    if (dirs.has('In')) return '←'
-    if (dirs.has('Out')) return '→'
-    return '↔'
-  }
-
-  /**
-   * Direct badge: shown if ANY socket for this endpoint is direct
-   */
-  function isDirect(sockets: SocketWithInterface[]): boolean {
-    return sockets.some((s) => s.properties.is_direct)
-  }
-
-  const rtf = new Intl.RelativeTimeFormat(undefined, { numeric: 'auto' })
-
-  function formatTime(seconds: number): string {
-    if (seconds < 60) return rtf.format(-seconds, 'second')
-    const minutes = Math.floor(seconds / 60)
-    if (minutes < 60) return rtf.format(-minutes, 'minute')
-    const hours = Math.floor(minutes / 60)
-    if (hours < 24) return rtf.format(-hours, 'hour')
-    return rtf.format(-Math.floor(hours / 24), 'day')
-  }
-  </script>
\ No newline at end of file
diff --git a/src/components/ComHubInterfaceList.vue b/src/components/ComHubInterfaceList.vue
new file mode 100644
index 00000000..dae825e2
--- /dev/null
+++ b/src/components/ComHubInterfaceList.vue
@@ -0,0 +1,135 @@
+<template>
+  <div>
+    <div
+      v-for="iface in filteredInterfaces"
+      :key="iface.uuid"
+      class="border border-neutral-200 dark:border-neutral-700 rounded-lg p-3 mb-3 bg-white dark:bg-neutral-900 shadow-sm text-neutral-900 dark:text-neutral-100"
+    >
+      <!-- Interface Header -->
+      <div class="flex justify-between items-center">
+        <div class="cursor-pointer flex-1" @click="toggle(iface.uuid)">
+          <h3 class="font-semibold">
+            {{ iface.properties.interface_type }}
+            <span v-if="iface.properties.name">({{ iface.properties.name }})</span>
+          </h3>
+          <div class="text-xs text-neutral-500 mt-1">
+            Sockets: {{ iface.sockets.length }} • Channel: {{ iface.properties.channel }}
+          </div>
+        </div>
+        <div class="flex items-center gap-2">
+          <div class="text-xs text-neutral-400">RTT: {{ iface.properties.round_trip_time }} ms</div>
+          <button
+            v-if="advancedMode"
+            @click.stop="removeInterface(iface.uuid)"
+            class="text-xs px-2 py-1 rounded bg-red-100 text-red-600 hover:bg-red-200 dark:bg-red-900 dark:text-red-300 dark:hover:bg-red-800 transition"
+          >
+            Disconnect
+          </button>
+        </div>
+      </div>
+
+      <!-- Expanded Socket List -->
+      <div v-if="expanded[iface.uuid]" class="mt-3 border-t pt-3 flex flex-col gap-3">
+        <div
+          v-for="socket in getSortedSockets(iface.sockets)"
+          :key="socket.uuid + socket.endpoint"
+          class="text-sm p-3 rounded bg-neutral-50 dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-700"
+        >
+          <div class="flex items-start justify-between gap-2">
+            <div class="flex flex-col gap-1 flex-1">
+              <h4 class="font-semibold flex items-center gap-2">
+                <span class="font-mono text-blue-600 dark:text-blue-400">{{ socket.endpoint }}</span>
+                <span
+                  v-if="socket.properties.is_direct"
+                  class="text-xs px-2 py-0.5 rounded bg-green-100 text-green-700 dark:bg-green-900 dark:text-green-300"
+                >direct</span>
+                <span class="text-neutral-400">{{ getDirectionArrow(socket.direction) }}</span>
+              </h4>
+              <div class="text-xs text-neutral-500 mt-1">
+                Distance: {{ socket.properties.distance }}
+                • Created: {{ formatTime(socket.properties.known_since) }}
+              </div>
+            </div>
+            <button
+              v-if="advancedMode"
+              @click.stop="removeSocket(socket.uuid)"
+              class="shrink-0 text-xs px-2 py-1 rounded bg-red-100 text-red-600 hover:bg-red-200 dark:bg-red-900 dark:text-red-300 dark:hover:bg-red-800 transition"
+            >
+              Disconnect
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div v-if="filteredInterfaces.length === 0" class="text-sm text-neutral-500">
+      No matching endpoints found.
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { ComHubInterface, ComHubSocket } from '@/components/ComHubOverviewWrapper.vue';
+import { removeInterface, removeSocket } from '@/lib/runtime';
+import { computed, reactive, watch } from 'vue';
+
+const props = defineProps<{
+  interfaces: ComHubInterface[]
+  searchQuery: string
+  advancedMode: boolean
+}>()
+
+const expanded = reactive<Record<string, boolean>>({})
+
+const filteredInterfaces = computed(() => {
+  const query = props.searchQuery.trim().toLowerCase()
+  if (!query) return props.interfaces
+  return props.interfaces
+    .map((iface) => {
+      const matchingSockets = iface.sockets.filter((socket) =>
+        socket.endpoint.toLowerCase().includes(query)
+      )
+      if (matchingSockets.length === 0) return null
+      expanded[iface.uuid] = true
+      return { ...iface, sockets: matchingSockets }
+    })
+    .filter((iface): iface is ComHubInterface => iface !== null)
+})
+
+watch(() => props.searchQuery, (val) => {
+  if (!val.trim()) {
+    Object.keys(expanded).forEach((key) => { expanded[key] = false })
+  }
+})
+
+function toggle(uuid: string) {
+  expanded[uuid] = !expanded[uuid]
+}
+
+function getSortedSockets(sockets: ComHubSocket[]) {
+  return [...sockets].sort((a, b) => {
+    if (a.properties.is_direct !== b.properties.is_direct) return a.properties.is_direct ? -1 : 1
+    return a.properties.known_since - b.properties.known_since
+  })
+}
+
+function getDirectionArrow(direction: string): string {
+  if (direction === 'InOut') return '↔'
+  if (direction === 'In') return '←'
+  if (direction === 'Out') return '→'
+  return ''
+}
+
+const rtf = new Intl.RelativeTimeFormat(undefined, { numeric: 'auto' })
+
+function formatTime(ms: number): string {
+  const elapsed = Math.floor((Date.now() - ms) / 1000)
+  if (elapsed < 60) return rtf.format(-elapsed, 'second')
+  const minutes = Math.floor(elapsed / 60)
+  if (minutes < 60) return rtf.format(-minutes, 'minute')
+  const hours = Math.floor(minutes / 60)
+  if (hours < 24) return rtf.format(-hours, 'hour')
+  return rtf.format(-Math.floor(hours / 24), 'day')
+}
+
+</script>
\ No newline at end of file
diff --git a/src/components/ComHubOverview.vue b/src/components/ComHubOverview.vue
deleted file mode 100644
index f8719ae2..00000000
--- a/src/components/ComHubOverview.vue
+++ /dev/null
@@ -1,305 +0,0 @@
-<template>
-  <div class="h-full overflow-auto">
-
-
-  <div class="flex items-center justify-between mb-3">
-  <h2 class="text-lg font-semibold">ComHub Overview</h2>
-  <span class="text-xs font-mono px-2 py-1 rounded border border-neutral-300 dark:border-neutral-600 text-neutral-500 dark:text-neutral-400">
-    {{ comhub.endpoint }}
-  </span>
-</div>
-
-
-<!-- Search Bar -->
-<div class="mb-4 w-1/2">
-  <input
-    v-model="searchQuery"
-    type="text"
-    placeholder="Search endpoint identifier (e.g. @@...)"
-    class="w-full px-3 py-2 text-sm rounded border bg-white dark:bg-neutral-900 dark:border-neutral-700 focus:outline-none focus:ring-2 focus:ring-blue-500"
-  />
-</div>
-
-<!-- Advanced Mode Toggle -->
-<div class="mb-4 flex items-center gap-2">
-  <label class="text-sm text-neutral-500 cursor-pointer select-none flex items-center gap-2">
-    <input type="checkbox" v-model="advancedMode" class="accent-blue-500" />
-    Advanced Mode
-  </label>
-</div>
-
-    <div
-      v-for="iface in filteredInterfaces"
-      :key="iface.uuid"
-      class="border rounded-lg p-3 mb-3 bg-white dark:bg-neutral-900 shadow-sm text-neutral-900 dark:text-neutral-100"
-    >
-      <!-- Interface Header -->
-      <div
-        class="flex justify-between items-center cursor-pointer"
-        @click="toggle(iface.uuid)"
-      >
-        <div>
-          <!-- 1. Channel type prominent + name -->
-          <h3 class="font-semibold">
-            {{ iface.properties.interface_type }}
-            <span v-if="iface.properties.name">
-              ({{ iface.properties.name }})
-            </span>
-          </h3>
-
-          <!-- 2. Show channel next to socket count -->
-          <div class="text-xs text-neutral-500 mt-1">
-            Sockets: {{ iface.sockets.length }}
-            • Channel: {{ iface.properties.channel }}
-          </div>
-        </div>
-
-        <div class="text-xs text-neutral-400">
-          RTT: {{ iface.properties.round_trip_time }} ms
-        </div>
-      </div>
-
-     <!-- Expanded Socket List -->
-<div v-if="expanded[iface.uuid]" class="mt-3 border-t pt-3 flex flex-col gap-3">
-  <div
-    v-for="socket in getSortedSockets(iface.sockets)"
-    :key="socket.uuid + socket.endpoint"
-    class="text-sm p-3 rounded bg-neutral-100 dark:bg-neutral-800 text-neutral-900 dark:text-neutral-100"
-  >
-    <div class="flex items-start justify-between gap-2">
-      <div class="flex flex-col gap-1 flex-1">
-        <h4 class="font-semibold flex items-center gap-2">
-          <span class="font-mono text-blue-600 dark:text-blue-400">{{ socket.endpoint }}</span>
-          <span
-            v-if="socket.properties.is_direct"
-            class="text-xs px-2 py-0.5 rounded bg-green-100 text-green-700 dark:bg-green-900 dark:text-green-300"
-          >
-            direct
-          </span>
-          <span class="text-neutral-400">{{ getDirectionArrow(socket.direction) }}</span>
-        </h4>
-        <div class="text-xs text-neutral-500 mt-1">
-          Distance: {{ socket.properties.distance }}
-          • Created: {{ formatTime(socket.properties.known_since) }}
-        </div>
-      </div>
-
-      <button
-        v-if="advancedMode"
-        @click.stop="disconnectSocket(iface.uuid, socket.uuid, socket.endpoint)"
-        class="shrink-0 text-xs px-2 py-1 rounded bg-red-100 text-red-600 hover:bg-red-200 dark:bg-red-900 dark:text-red-300 dark:hover:bg-red-800 transition"
-      >
-        Disconnect
-      </button>
-    </div>
-  </div>
-</div>
-  <div
-  v-if="filteredInterfaces.length === 0"
-  class="text-sm text-neutral-500"
->
-  No matching endpoints found.
-</div>
-</div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { reactive, ref, computed, watch } from 'vue'
-
-const searchQuery = ref('')
-
-const advancedMode = ref(false) // 
-
-/**
- * TEMP MOCK DATA (from issue JSON)
- * TODO: Replace mock JSON with live ComHub runtime state
- */
-const comhub = reactive({
-    "endpoint": "@@FB2D5CF3FBE8CF00FC4518DAF76A189602E1",
-    "interfaces": [
-        {
-            "uuid": "com_interface::28a6b060-055c-4d20-a715-9bafd9edb90d",
-            "properties": {
-                "interface_type": "websocket-client",
-                "channel": "websocket",
-                "name": "ws://localhost:8043",
-                "direction": "InOut",
-                "round_trip_time": 40,
-                "max_bandwidth": 1000,
-                "continuous_connection": false,
-                "allow_redirects": true,
-                "is_secure_channel": false,
-                "reconnection_config": "NoReconnect",
-                "auto_identify": true
-            },
-            "sockets": [
-                {
-                    "uuid": "socket::4a17ec53-6027-4527-9786-abf8db76c61f",
-                    "direction": "InOut",
-                    "endpoint": "@server",
-                    "properties": {
-                        "known_since": 4,
-                        "distance": 1,
-                        "is_direct": true,
-                        "channel_factor": 1,
-                        "direction": "InOut"
-                    }
-                },
-                {
-                    "uuid": "socket::4a17ec53-6027-4527-9786-abf8db76c61f",
-                    "direction": "InOut",
-                    "endpoint": "@@8FAEBB621D91CB42EA59389EB5C47A9BADEF",
-                    "properties": {
-                        "known_since": 16852,
-                        "distance": 2,
-                        "is_direct": false,
-                        "channel_factor": 1,
-                        "direction": "InOut"
-                    }
-                }
-            ],
-            "is_waiting_for_socket_connections": false
-        },
-        {
-            "uuid": "com_interface::a8fc3085-9717-4715-bbed-b20f6128e6df",
-            "properties": {
-                "interface_type": "local",
-                "channel": "local",
-                "direction": "InOut",
-                "round_trip_time": 0,
-                "max_bandwidth": 4294967295,
-                "continuous_connection": false,
-                "allow_redirects": true,
-                "is_secure_channel": false,
-                "reconnection_config": "NoReconnect",
-                "auto_identify": false
-            },
-            "sockets": [
-                {
-                    "uuid": "socket::cb2f1a7e-5fc6-4bd1-acdc-ce796606c6bd",
-                    "direction": "InOut",
-                    "endpoint": "@@local",
-                    "properties": {
-                        "known_since": 0,
-                        "distance": 0,
-                        "is_direct": true,
-                        "channel_factor": 1,
-                        "direction": "InOut"
-                    }
-                }
-            ],
-            "is_waiting_for_socket_connections": false
-        }
-    ],
-    "endpoint_sockets": {}
-})
-
-const expanded = reactive<Record<string, boolean>>({})
-
-type ComHubSocket = {
-  uuid: string
-  direction: string
-  endpoint: string
-  properties: {
-    known_since: number
-    distance: number
-    is_direct: boolean
-    channel_factor: number
-    direction: string
-  }
-}
-
-const filteredInterfaces = computed(() => {
-  const query = searchQuery.value.trim().toLowerCase()
-
-  // If no search, return all interfaces unchanged
-  if (!query) return comhub.interfaces
-
-  return comhub.interfaces
-    .map((iface) => {
-      const matchingSockets = iface.sockets.filter((socket) =>
-        socket.endpoint.toLowerCase().includes(query)
-      )
-
-      // If no matching sockets, this interface should be hidden
-      if (matchingSockets.length === 0) return null
-      expanded[iface.uuid] = true
-
-      // Return a shallow copy with ONLY matching sockets
-      return {
-        ...iface,
-        sockets: matchingSockets,
-      }
-    })
-    .filter((iface): iface is typeof comhub.interfaces[number] => iface !== null)
-})
-
-watch(searchQuery, (val) => {
-  if (!val.trim()) {
-    Object.keys(expanded).forEach((key) => {
-      expanded[key] = false
-    })
-  }
-})
-
-function toggle(uuid: string) {
-  expanded[uuid] = !expanded[uuid]
-}
-
-/**
- * 4. Sorting logic:
- * - Direct sockets first
- * - Then newest first (lower known_since = newer)
- */
-function getSortedSockets(sockets: ComHubSocket[]) {
-  return [...sockets].sort((a, b) => {
-    if (a.properties.is_direct !== b.properties.is_direct) {
-      return a.properties.is_direct ? -1 : 1
-    }
-    return a.properties.known_since - b.properties.known_since
-  })
-}
-
-/**
- * 3. Direction arrows
- */
-function getDirectionArrow(direction: string): string {
-  if (direction === "InOut") return "↔"
-  if (direction === "In") return "←"
-  if (direction === "Out") return "→"
-  return ""
-}
-
-const rtf = new Intl.RelativeTimeFormat(undefined, {
-  numeric: "auto",
-})
-
-function formatTime(seconds: number): string {
-  if (seconds < 60) {
-    return rtf.format(-seconds, "second")
-  }
-
-  const minutes = Math.floor(seconds / 60)
-  if (minutes < 60) {
-    return rtf.format(-minutes, "minute")
-  }
-
-  const hours = Math.floor(minutes / 60)
-  if (hours < 24) {
-    return rtf.format(-hours, "hour")
-  }
-
-  const days = Math.floor(hours / 24)
-  return rtf.format(-days, "day")
-}
-
-/**
- * TODO: Implement once new DATEX release is available
- * Disconnects a socket from its interface
- */
- function disconnectSocket(interfaceUuid: string, socketUuid: string, endpoint: string) {
-  console.warn(`[ComHub] disconnectSocket stub called`, { interfaceUuid, socketUuid, endpoint })
-}
-
-</script>
\ No newline at end of file
diff --git a/src/components/ComHubOverviewWrapper.vue b/src/components/ComHubOverviewWrapper.vue
index bd5c209c..83ae3e1b 100644
--- a/src/components/ComHubOverviewWrapper.vue
+++ b/src/components/ComHubOverviewWrapper.vue
@@ -1,36 +1,106 @@
 <template>
-    <div class="m-5">
-      <!-- Tab Toggle -->
-      <div class="flex gap-1 mb-4 border-b dark:border-neutral-700">
-        <button
-          class="px-3 py-1.5 text-sm font-medium transition"
-          :class="activeTab === 'interface'
-            ? 'border-b-2 border-blue-500 text-blue-500'
-            : 'text-neutral-500 hover:text-neutral-700 dark:hover:text-neutral-300'"
-          @click="activeTab = 'interface'"
-        >
-          By Interface
-        </button>
-        <button
-          class="px-3 py-1.5 text-sm font-medium transition"
-          :class="activeTab === 'endpoint'
-            ? 'border-b-2 border-blue-500 text-blue-500'
-            : 'text-neutral-500 hover:text-neutral-700 dark:hover:text-neutral-300'"
-          @click="activeTab = 'endpoint'"
-        >
-          By Endpoint
-        </button>
-      </div>
-  
-      <ComHubOverview v-if="activeTab === 'interface'" />
-      <ComHubEndpointView v-else />
+  <div class="h-full flex flex-col overflow-hidden p-5 bg-neutral-50 dark:bg-neutral-950">
+    <!-- Title + endpoint badge -->
+    <div class="flex items-center justify-between mb-3">
+      <h2 class="text-lg font-semibold text-neutral-900 dark:text-neutral-100">ComHub</h2>
+      <span class="text-xs font-mono px-2 py-1 rounded border border-neutral-300 dark:border-neutral-600 text-neutral-500 dark:text-neutral-400">
+        {{ String(Datex.endpoint) }}
+      </span>
     </div>
-  </template>
-  
-  <script setup lang="ts">
-  import { ref } from 'vue'
-  import ComHubOverview from '@/components/ComHubOverview.vue'
-  import ComHubEndpointView from '@/components/ComHubEndpointView.vue'
-  
-  const activeTab = ref<'interface' | 'endpoint'>('interface')
-  </script>
\ No newline at end of file
+
+    <!-- Search bar -->
+    <div class="mb-4 max-w-[300px]">
+      <input
+        v-model="searchQuery"
+        type="text"
+        placeholder="Search endpoint identifier (e.g. @@...)"
+        class="w-full px-3 py-2 text-sm rounded border border-neutral-300 dark:border-neutral-600 bg-white dark:bg-neutral-800 text-neutral-900 dark:text-neutral-100 placeholder-neutral-400 dark:placeholder-neutral-500 focus:outline-none focus:ring-2 focus:ring-blue-500"
+      />
+    </div>
+
+    <!-- Toggles -->
+    <div class="mb-4 flex flex-col gap-2">
+      <label class="text-sm text-neutral-500 cursor-pointer select-none flex items-center gap-2">
+        <input type="checkbox" v-model="advancedMode" class="accent-blue-500" />
+        Advanced Mode
+      </label>
+      <label class="text-sm text-neutral-500 cursor-pointer select-none flex items-center gap-2">
+        <input type="checkbox" v-model="groupByEndpoint" class="accent-blue-500" />
+        Group by Endpoint
+      </label>
+    </div>
+
+    <!-- List -->
+    <div class="flex-1 overflow-y-auto">
+      <ComHubEndpointList
+        v-if="groupByEndpoint"
+        :interfaces="interfaces"
+        :search-query="searchQuery"
+        :advanced-mode="advancedMode"
+      />
+      <ComHubInterfaceList
+        v-else
+        :interfaces="interfaces"
+        :search-query="searchQuery"
+        :advanced-mode="advancedMode"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted } from 'vue'
+import { Datex, getComHubMetadata } from '@/lib/runtime'
+import ComHubInterfaceList from '@/components/ComHubInterfaceList.vue'
+import ComHubEndpointList from '@/components/ComHubEndpointList.vue'
+
+interface InterfaceProperties {
+  name?: string
+  interface_type?: string
+  channel?: string
+  direction?: string
+  round_trip_time?: number
+  max_bandwidth?: number
+  [key: string]: unknown
+}
+
+export interface ComHubSocket {
+  uuid: string
+  direction: string
+  endpoint: string
+  properties: {
+    known_since: number
+    distance: number
+    is_direct: boolean
+    channel_factor: number
+    direction: string
+  }
+}
+
+export interface ComHubInterface {
+  uuid: string
+  properties: InterfaceProperties
+  sockets: ComHubSocket[]
+  is_waiting_for_socket_connections?: boolean
+}
+
+const searchQuery = ref('')
+const advancedMode = ref(false)
+const groupByEndpoint = ref(false)
+const interfaces = ref<ComHubInterface[]>([])
+
+function syncMetadata() {
+  interfaces.value = getComHubMetadata().interfaces as ComHubInterface[]
+}
+
+let intervalId: ReturnType<typeof setInterval> | null = null
+
+onMounted(() => {
+  syncMetadata()
+  intervalId = setInterval(syncMetadata, 2000)
+})
+
+onUnmounted(() => {
+  if (intervalId !== null) clearInterval(intervalId)
+})
+</script>
\ No newline at end of file
diff --git a/src/composable/useComHub.ts b/src/composable/useComHub.ts
deleted file mode 100644
index 4e258bd9..00000000
--- a/src/composable/useComHub.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import { reactive } from 'vue'
-
-export const comhub = reactive({
-  endpoint: '@@FB2D5CF3FBE8CF00FC4518DAF76A189602E1',
-  // TODO: Replace with live runtime state
-})
\ No newline at end of file
diff --git a/src/lib/runtime.ts b/src/lib/runtime.ts
index 620b34e6..0e544733 100644
--- a/src/lib/runtime.ts
+++ b/src/lib/runtime.ts
@@ -1,5 +1,20 @@
-import { Runtime, DIF } from '@unyt/datex'
 import type { RuntimeConfig } from '@unyt/datex'
+import { DIF, Runtime } from '@unyt/datex'
+
+export type ComHubMetadata = {
+  endpoint: string
+  interfaces: {
+    uuid: string
+    properties: Record<string, unknown>
+    sockets: {
+      uuid: string
+      direction: string
+      endpoint: string | undefined
+      properties: Record<string, unknown> | undefined
+    }[]
+    is_waiting_for_socket_connections: boolean
+  }[]
+}
 
 const defaultConfig: RuntimeConfig = {
   interfaces: [
@@ -9,17 +24,50 @@ const defaultConfig: RuntimeConfig = {
         url: 'wss://example.unyt.land',
       },
     },
+    {
+      type: 'websocket-client',
+      config: {
+        url: 'wss://example.unyt.land',
+      },
+    },
   ],
 }
 
 export const Datex: Runtime = await Runtime.create(defaultConfig)
 
 export function getPointers(): Map<string, DIF.Definitions.DIFValueContainer> {
-  const mock: [string, DIF.Definitions.DIFValueContainer][] = [
-    ['$std',         { type: 'object', name: 'std' }  as unknown as DIF.Definitions.DIFValueContainer],
-    ['$file_server', { type: 'object', name: 'file_server' } as unknown as DIF.Definitions.DIFValueContainer],
-    ['$webrtc',      { type: 'object', name: 'webrtc' } as unknown as DIF.Definitions.DIFValueContainer],
-    ['$Math',        { type: 'object', name: 'Math' } as unknown as DIF.Definitions.DIFValueContainer],
+  const values = [
+    42,
+    'Hello, World!',
+    true,
+    { a: 1, b: 2 },
+    [1, 2, 3, 4, 5],
+    {
+      nested: {
+        key: 'value',
+        arr: [10, 20, 30],
+      },
+    },
   ]
-  return new Map(mock)
+  const pointers = new Map(
+    values.map((value, index) => {
+      const difValue = Datex.dif.convertJSValueToDIFValueContainer(
+        value,
+      ) as DIF.Definitions.DIFValueContainer
+      return [`$${index.toString().padStart(16, '0')}`, difValue]
+    }),
+  )
+  return pointers
+}
+
+export function getComHubMetadata(): ComHubMetadata {
+  return Datex.comHub.getMetadata()
+}
+
+
+export async function removeInterface(interfaceUuid: string) {
+  return await Datex.comHub.removeInterface(interfaceUuid as `com_interface::${string}`)
+}
+export async function removeSocket(socketUuid: string) {
+  return await Datex.comHub.removeSocket(socketUuid as `socket::${string}`)
 }
\ No newline at end of file