diff --git a/.gitignore b/.gitignore
index a3f7a51..42a6339 100644
--- a/.gitignore
+++ b/.gitignore
@@ -34,3 +34,7 @@ coverage
 
 # Vitest
 __screenshots__/
+
+# Local AI instructions
+.github/copilot-instructions.md
+*.agent.md
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index 5811c57..a63d533 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,14 +9,18 @@
       "version": "0.0.1",
       "dependencies": {
         "@tailwindcss/vite": "^4.1.16",
+        "@tanstack/vue-table": "^8.21.3",
         "@unyt/datex": "0.0.13",
-        "@unyt/speck": "^0.0.11",
-        "@vueuse/core": "^14.0.0",
+        "@unyt/speck": "0.0.12",
+        "@vueuse/core": "^14.1.0",
+        "ag-grid-community": "^35.0.0",
+        "ag-grid-vue3": "^35.0.0",
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
         "lucide-vue-next": "^0.548.0",
         "markdown-it": "^14.1.1",
-        "reka-ui": "^2.6.0",
+        "reka-ui": "^2.7.0",
+        "search-query-parser": "^1.6.0",
         "shadcn": "^3.5.0",
         "shadcn-ui": "^0.9.5",
         "tailwind-merge": "^3.3.1",
@@ -2784,6 +2788,19 @@
         "vite": "^5.2.0 || ^6 || ^7"
       }
     },
+    "node_modules/@tanstack/table-core": {
+      "version": "8.21.3",
+      "resolved": "https://registry.npmjs.org/@tanstack/table-core/-/table-core-8.21.3.tgz",
+      "integrity": "sha512-ldZXEhOBb8Is7xLs01fR3YEc3DERiz5silj8tnGkFZytt1abEvl/GhUmCE0PMLaMPTa3Jk4HbKmRlHmu+gCftg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      }
+    },
     "node_modules/@tanstack/virtual-core": {
       "version": "3.13.22",
       "resolved": "https://registry.npmjs.org/@tanstack/virtual-core/-/virtual-core-3.13.22.tgz",
@@ -2794,6 +2811,25 @@
         "url": "https://github.com/sponsors/tannerlinsley"
       }
     },
+    "node_modules/@tanstack/vue-table": {
+      "version": "8.21.3",
+      "resolved": "https://registry.npmjs.org/@tanstack/vue-table/-/vue-table-8.21.3.tgz",
+      "integrity": "sha512-rusRyd77c5tDPloPskctMyPLFEQUeBzxdQ+2Eow4F7gDPlPOB1UnnhzfpdvqZ8ZyX2rRNGmqNnQWm87OI2OQPw==",
+      "license": "MIT",
+      "dependencies": {
+        "@tanstack/table-core": "8.21.3"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      },
+      "peerDependencies": {
+        "vue": ">=3.2"
+      }
+    },
     "node_modules/@tanstack/vue-virtual": {
       "version": "3.13.22",
       "resolved": "https://registry.npmjs.org/@tanstack/vue-virtual/-/vue-virtual-3.13.22.tgz",
@@ -3181,9 +3217,9 @@
       "license": "MIT"
     },
     "node_modules/@unyt/speck": {
-      "version": "0.0.11",
-      "resolved": "https://registry.npmjs.org/@unyt/speck/-/speck-0.0.11.tgz",
-      "integrity": "sha512-NLONEkxU5aZR1il/q2YJqxY/2MiPsIR0PBmbZ/Z4cpqx3400m5WJlEbqs5Je7A4I282TMjyP2fwT5VqhU49IjA==",
+      "version": "0.0.12",
+      "resolved": "https://registry.npmjs.org/@unyt/speck/-/speck-0.0.12.tgz",
+      "integrity": "sha512-SDK1UD64FhKeDeVmHGFLSc6hmTbUzryHJfoEswE8Ce9SzlbJ6xcxnvxpw4v8fweicREaRReSsq4rHMr7QnmiFg==",
       "license": "MIT",
       "dependencies": {
         "github-slugger": "^2.0.0",
@@ -3777,6 +3813,33 @@
         "acorn": "^6.0.0 || ^7.0.0 || ^8.0.0"
       }
     },
+    "node_modules/ag-charts-types": {
+      "version": "13.1.0",
+      "resolved": "https://registry.npmjs.org/ag-charts-types/-/ag-charts-types-13.1.0.tgz",
+      "integrity": "sha512-DytRM3CXli+Y013SC1Mr8lQBrhVTACK+11ilDHOhwUM0sRpmGuR51XFGcBKOliW1Vas1AycP31Cm3Pp0jx3hqw==",
+      "license": "MIT"
+    },
+    "node_modules/ag-grid-community": {
+      "version": "35.1.0",
+      "resolved": "https://registry.npmjs.org/ag-grid-community/-/ag-grid-community-35.1.0.tgz",
+      "integrity": "sha512-yWFQfRNjv3KUBkHHzFdDOYGjPcDMU0B8Up4qG651diFlGRUGEGVs94SK73niWvk1FDZdpV9oWrwq3f30/qAoVg==",
+      "license": "MIT",
+      "dependencies": {
+        "ag-charts-types": "13.1.0"
+      }
+    },
+    "node_modules/ag-grid-vue3": {
+      "version": "35.1.0",
+      "resolved": "https://registry.npmjs.org/ag-grid-vue3/-/ag-grid-vue3-35.1.0.tgz",
+      "integrity": "sha512-BvM7yrFxRB/r5hZ4xSyE6T2lU2Rj+Ls6RH5tTu/n8DmhCTmLj4QCEkoU7EuaE0/Az3uEHOubYMaCX4jcDf181A==",
+      "license": "MIT",
+      "dependencies": {
+        "ag-grid-community": "35.1.0"
+      },
+      "peerDependencies": {
+        "vue": "^3.5.0"
+      }
+    },
     "node_modules/agent-base": {
       "version": "7.1.4",
       "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-7.1.4.tgz",
@@ -8351,6 +8414,12 @@
         "node": ">=v12.22.7"
       }
     },
+    "node_modules/search-query-parser": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/search-query-parser/-/search-query-parser-1.6.0.tgz",
+      "integrity": "sha512-bhf+phLlKF38nuniwLcVHWPArHGdzenlPhPi955CR3vm1QQifXIuPHwAffhjapojdVVzmv4hgIJ6NOX1d/w+Uw==",
+      "license": "MIT"
+    },
     "node_modules/semver": {
       "version": "7.7.4",
       "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.4.tgz",
@@ -9061,9 +9130,9 @@
       "license": "MIT"
     },
     "node_modules/tinyexec": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/tinyexec/-/tinyexec-1.0.2.tgz",
-      "integrity": "sha512-W/KYk+NFhkmsYpuHq5JykngiOCnxeVL8v8dFnqxSD8qEEdRfXk1SDM6JzNqcERbcGYj9tMrDQBYV9cjgnunFIg==",
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/tinyexec/-/tinyexec-1.0.3.tgz",
+      "integrity": "sha512-NQjrZXDhXdBqX3R5Ek8qxXjtPBNEeQm+Ytv/7QpqY6I9aIui00stSZsyDS2nsP/M9OEYhAvkgqfSirgiV95+4g==",
       "license": "MIT",
       "engines": {
         "node": ">=18"
diff --git a/package.json b/package.json
index 9b570d1..cfa4dfb 100644
--- a/package.json
+++ b/package.json
@@ -19,14 +19,18 @@
   },
   "dependencies": {
     "@tailwindcss/vite": "^4.1.16",
+    "@tanstack/vue-table": "^8.21.3",
     "@unyt/datex": "0.0.13",
-    "@unyt/speck": "^0.0.11",
-    "@vueuse/core": "^14.0.0",
+    "@unyt/speck": "0.0.12",
+    "@vueuse/core": "^14.1.0",
+    "ag-grid-community": "^35.0.0",
+    "ag-grid-vue3": "^35.0.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "lucide-vue-next": "^0.548.0",
     "markdown-it": "^14.1.1",
-    "reka-ui": "^2.6.0",
+    "reka-ui": "^2.7.0",
+    "search-query-parser": "^1.6.0",
     "shadcn": "^3.5.0",
     "shadcn-ui": "^0.9.5",
     "tailwind-merge": "^3.3.1",
diff --git a/src/components/NetworkInspector/DataTable.vue b/src/components/NetworkInspector/DataTable.vue
new file mode 100644
index 0000000..1489279
--- /dev/null
+++ b/src/components/NetworkInspector/DataTable.vue
@@ -0,0 +1,299 @@
+<script setup lang="ts" generic="TData, TValue">
+import type { ColDef, GridApi, GridReadyEvent, Column, ColumnState } from 'ag-grid-community';
+import { AllCommunityModule, ModuleRegistry } from 'ag-grid-community';
+import { AgGridVue } from 'ag-grid-vue3';
+import { Button } from '@/components/ui/button';
+import {
+    DropdownMenu,
+    DropdownMenuCheckboxItem,
+    DropdownMenuContent,
+    DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import { ChevronDown } from 'lucide-vue-next';
+import { ref, watch, nextTick } from 'vue';
+
+ModuleRegistry.registerModules([AllCommunityModule]);
+
+const COLUMN_STATE_KEY = 'network-inspector-column-state';
+
+interface DataTableProps {
+    columns: ColDef<TData>[];
+    data: TData[];
+    filterValue?: string;
+    filterPlaceholder?: string;
+    hasMoreData?: boolean;
+}
+
+const props = withDefaults(defineProps<DataTableProps>(), {
+    filterPlaceholder: 'Filter...',
+    hasMoreData: false
+});
+
+const emit = defineEmits<{
+    'load-more': [];
+}>();
+
+const gridApi = ref<GridApi<TData>>();
+const visibleColumns = ref<Record<string, boolean>>({});
+const isLoadingMore = ref(false);
+const suppressColumnMoveAnimation = ref(true);
+
+const defaultColDef: ColDef = {
+    resizable: true,
+    sortable: true,
+    filter: false,
+    suppressMovable: false,
+};
+
+const onGridReady = (params: GridReadyEvent<TData>) => {
+    gridApi.value = params.api;
+    
+    // Restore column state from localStorage
+    const savedState = localStorage.getItem(COLUMN_STATE_KEY);
+    if (savedState) {
+        try {
+            const columnState: ColumnState[] = JSON.parse(savedState);
+            params.api.applyColumnState({ state: columnState, applyOrder: true });
+            
+            // Resize columns to fit grid width after restoring state
+            params.api.sizeColumnsToFit();
+            
+            // Enable animations after initial state is applied
+            nextTick(() => {
+                if (gridApi.value) {
+                    gridApi.value.setGridOption('suppressColumnMoveAnimation', false);
+                    suppressColumnMoveAnimation.value = false;
+                }
+            });
+        } catch (e) {
+            console.error('Failed to restore column state:', e);
+        }
+    }
+    
+    // Initialize column visibility state
+    const columnState: Record<string, boolean> = {};
+    params.api.getAllGridColumns().forEach((col: Column) => {
+        const colDef = col.getColDef();
+        if (colDef.field) {
+            columnState[colDef.field] = col.isVisible();
+        }
+    });
+    visibleColumns.value = columnState;
+};
+
+// Detect scroll near bottom and load more data
+let scrollTimeout: ReturnType<typeof setTimeout> | null = null;
+const onBodyScroll = () => {
+    if (!gridApi.value || !props.hasMoreData || isLoadingMore.value) return;
+    
+    // Debounce scroll events
+    if (scrollTimeout) {
+        clearTimeout(scrollTimeout);
+    }
+    
+    scrollTimeout = setTimeout(() => {
+        if (!gridApi.value || isLoadingMore.value) return;
+        
+        const gridElement = document.querySelector('.ag-body-viewport') as HTMLElement;
+        if (!gridElement) return;
+        
+        const scrollTop = gridElement.scrollTop;
+        const scrollHeight = gridElement.scrollHeight;
+        const clientHeight = gridElement.clientHeight;
+        
+        // Load more when scrolled within 300px of bottom
+        const threshold = 300;
+        if (scrollHeight - scrollTop - clientHeight < threshold) {
+            isLoadingMore.value = true;
+            
+            // Save scroll position before loading
+            const savedScrollTop = scrollTop;
+            
+            // Emit load-more event
+            emit('load-more');
+            
+            // Use nextTick to wait for DOM update, then restore scroll
+            nextTick(() => {
+                // Give AG Grid time to render new rows
+                requestAnimationFrame(() => {
+                    if (gridElement) {
+                        gridElement.scrollTop = savedScrollTop;
+                    }
+                    isLoadingMore.value = false;
+                });
+            });
+        }
+    }, 50);
+};
+
+const saveColumnState = () => {
+    if (gridApi.value) {
+        const columnState = gridApi.value.getColumnState();
+        localStorage.setItem(COLUMN_STATE_KEY, JSON.stringify(columnState));
+        
+        // Update visibleColumns state to reflect current column visibility
+        const updatedVisibility: Record<string, boolean> = {};
+        gridApi.value.getAllGridColumns().forEach((col: Column) => {
+            const colDef = col.getColDef();
+            if (colDef.field) {
+                updatedVisibility[colDef.field] = col.isVisible();
+            }
+        });
+        visibleColumns.value = updatedVisibility;
+    }
+};
+
+const toggleColumnVisibility = (field: string, visible: boolean) => {
+    if (gridApi.value) {
+        gridApi.value.setColumnsVisible([field], visible);
+        visibleColumns.value[field] = visible;
+        saveColumnState();
+    }
+};
+
+// Watch for filter changes
+watch(() => props.filterValue, (newValue) => {
+    if (gridApi.value && newValue !== undefined) {
+        gridApi.value.setGridOption('quickFilterText', newValue);
+    }
+});
+</script>
+
+<template>
+    <div class="w-full h-full flex flex-col overflow-hidden">
+        <!-- Fixed header section: Search and Column filters -->
+        <div class="flex items-center justify-between gap-4 py-4 px-1 shrink-0">
+            <div class="flex-1 max-w-sm">
+                <slot name="filter">
+                    <!-- Default filter slot if not provided -->
+                </slot>
+            </div>
+            <DropdownMenu>
+                <DropdownMenuTrigger as-child>
+                    <Button variant="outline" class="ml-auto text-foreground border-border">
+                        Columns <ChevronDown class="ml-2 h-4 w-4" />
+                    </Button>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent align="end">
+                    <DropdownMenuCheckboxItem
+                        v-for="(visible, field) in visibleColumns"
+                        :key="field"
+                        class="capitalize"
+                        :model-value="visible"
+                        @update:model-value="(value: boolean) => toggleColumnVisibility(field, value)"
+                    >
+                        {{ field }}
+                    </DropdownMenuCheckboxItem>
+                </DropdownMenuContent>
+            </DropdownMenu>
+        </div>
+        
+        <!-- AG Grid container -->
+        <div class="ag-theme-custom flex-1 rounded-md border overflow-hidden">
+            <AgGridVue
+                style="width: 100%; height: 100%;"
+                :columnDefs="columns"
+                :rowData="data"
+                :defaultColDef="defaultColDef"
+                :autoSizeStrategy="{ type: 'fitGridWidth' }"
+                colResizeDefault="shift"
+                @grid-ready="onGridReady"
+                @drag-stopped="saveColumnState"
+                @column-visible="saveColumnState"
+                @body-scroll="onBodyScroll"
+                :rowHeight="48"
+                :headerHeight="48"
+                :suppressCellFocus="true"
+                :suppressRowClickSelection="true"
+                :enableCellTextSelection="true"
+                :reactiveCustomComponents="true"
+                :suppressDragLeaveHidesColumns="true"
+                :suppressColumnVirtualisation="true"
+                :suppressColumnMoveAnimation="suppressColumnMoveAnimation"
+            />
+        </div>
+    </div>
+</template>
+
+<style>
+/* AG Grid custom theme matching current dark theme */
+.ag-theme-custom {
+    --ag-background-color: hsl(var(--background));
+    --ag-foreground-color: hsl(var(--foreground));
+    --ag-header-background-color: hsl(217 33% 17% / 1);
+    --ag-header-foreground-color: hsl(var(--foreground));
+    --ag-odd-row-background-color: hsl(var(--background));
+    --ag-row-hover-color: hsl(215 30% 20% / 0.6);
+    --ag-border-color: hsl(var(--border));
+    --ag-header-column-resize-handle-color: hsl(var(--border));
+    --ag-font-size: 0.875rem;
+    --ag-font-family: inherit;
+}
+
+/* Light mode overrides */
+html:not(.dark) .ag-theme-custom {
+    --ag-background-color: #ffffff;
+    --ag-foreground-color: #1a1a1a;
+    --ag-header-background-color: #f5f5f5;
+    --ag-header-foreground-color: #1a1a1a;
+    --ag-odd-row-background-color: #ffffff;
+    --ag-row-hover-color: #f0f0f0;
+    --ag-border-color: #e0e0e0;
+}
+
+.ag-theme-custom .ag-root-wrapper {
+    border: none;
+}
+
+.ag-theme-custom .ag-header {
+    border-bottom: 1px solid hsl(var(--border));
+}
+
+.ag-theme-custom .ag-header-cell {
+    border-right: 1px solid hsl(215 20% 25% / 0.5);
+}
+
+/* Light mode: lighter borders for header cells */
+html:not(.dark) .ag-theme-custom .ag-header-cell {
+    border-right: 1px solid #e5e5e5;
+}
+
+.ag-theme-custom .ag-cell {
+    border-right: 1px solid hsl(215 20% 25% / 0.3);
+    display: flex;
+    align-items: center;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+/* Light mode: lighter borders for cells */
+html:not(.dark) .ag-theme-custom .ag-cell {
+    border-right: 1px solid #e8e8e8;
+}
+
+.ag-theme-custom .ag-cell-value {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    width: 100%;
+}
+
+.ag-theme-custom .ag-header-cell-text {
+    font-weight: 500;
+}
+
+.ag-theme-custom .ag-row {
+    border-bottom: 1px solid hsl(var(--border));
+}
+
+/* Column drag indicators */
+.ag-theme-custom .ag-header-cell-moving {
+    background-color: hsl(var(--accent));
+}
+
+/* Resize handle styling */
+.ag-theme-custom .ag-header-cell-resize::after {
+    width: 2px;
+}
+</style>
diff --git a/src/components/NetworkInspector/HighlightedText.vue b/src/components/NetworkInspector/HighlightedText.vue
new file mode 100644
index 0000000..b6fec14
--- /dev/null
+++ b/src/components/NetworkInspector/HighlightedText.vue
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { highlightMatches } from '@/utils/searchParser';
+
+interface HighlightedTextProps {
+    text: string;
+    searchTerms: string[];
+    class?: string;
+}
+
+const props = withDefaults(defineProps<HighlightedTextProps>(), {
+    class: ''
+});
+
+const highlightedHtml = computed(() => {
+    return highlightMatches(props.text, props.searchTerms);
+});
+</script>
+
+<template>
+    <span :class="props.class" v-html="highlightedHtml"></span>
+</template>
diff --git a/src/components/NetworkInspector/NetworkFilter.vue b/src/components/NetworkInspector/NetworkFilter.vue
new file mode 100644
index 0000000..1e5467a
--- /dev/null
+++ b/src/components/NetworkInspector/NetworkFilter.vue
@@ -0,0 +1,315 @@
+<script setup lang="ts">
+import { Input } from '@/components/ui/input';
+import { Search, X } from 'lucide-vue-next';
+import { computed, ref, watch, nextTick } from 'vue';
+import { watchDebounced, onClickOutside } from '@vueuse/core';
+import { tokenizeSearchQuery, tokensToStyledHtml } from '@/utils/searchParser';
+
+export interface SearchSuggestions {
+    types: string[];
+    senders: string[];
+    receivers: string[];
+    interfaces: string[];
+}
+
+interface NetworkFilterProps {
+    filterValue: string;
+    placeholder?: string;
+    debounce?: number;
+    suggestions?: SearchSuggestions;
+}
+
+const props = withDefaults(defineProps<NetworkFilterProps>(), {
+    placeholder: 'Search: type:value sender:value receiver:value interface:value',
+    debounce: 300,
+    suggestions: () => ({ types: [], senders: [], receivers: [], interfaces: [] })
+});
+
+const emit = defineEmits<{
+    'update:filterValue': [value: string];
+}>();
+
+// Local ref for immediate UI updates (keeps typing responsive)
+const localFilterValue = ref(props.filterValue);
+
+// Watch for external prop changes (e.g., when parent resets the filter)
+watch(() => props.filterValue, (newValue) => {
+    if (newValue !== localFilterValue.value) {
+        localFilterValue.value = newValue;
+    }
+});
+
+// Debounced watcher that emits to parent only after user stops typing
+watchDebounced(
+    localFilterValue,
+    (newValue) => {
+        emit('update:filterValue', newValue);
+    },
+    { debounce: props.debounce }
+);
+
+// Compute styled HTML for syntax highlighting based on local value
+const styledText = computed(() => {
+    if (!localFilterValue.value) return '';
+    const tokens = tokenizeSearchQuery(localFilterValue.value);
+    return tokensToStyledHtml(tokens);
+});
+
+function clearFilter() {
+    localFilterValue.value = '';
+}
+
+// Suggestions dropdown state
+const showSuggestions = ref(false);
+const selectedSuggestionIndex = ref(0);
+const inputRef = ref<HTMLInputElement | null>(null);
+const dropdownRef = ref<HTMLDivElement | null>(null);
+
+// Close suggestions when clicking outside
+onClickOutside(dropdownRef, () => {
+    showSuggestions.value = false;
+}, { ignore: [inputRef] });
+
+// Compute current suggestions based on input context
+const currentSuggestions = computed(() => {
+    const value = localFilterValue.value;
+    const cursorPos = inputRef.value?.selectionStart ?? value.length;
+    
+    // Find the current word/qualifier being typed
+    const beforeCursor = value.substring(0, cursorPos);
+    const lastWord = beforeCursor.split(/\s+/).pop() || '';
+    
+    // If lastWord is empty, don't show suggestions
+    if (!lastWord) return [];
+    
+    // Check if we're typing a qualifier
+    const qualifierMatch = lastWord.match(/^(\w+):(.*)$/);
+    
+    if (qualifierMatch) {
+        const qualifier = qualifierMatch[1];
+        const partialValue = qualifierMatch[2];
+        
+        if (!qualifier) return [];
+        
+        const lowerQualifier = qualifier.toLowerCase();
+        
+        // Only show value suggestions for valid qualifiers
+        const validQualifiers = ['type', 'sender', 'receiver', 'interface'];
+        if (!validQualifiers.includes(lowerQualifier)) {
+            return [];
+        }
+        
+        // Suggest values for the qualifier
+        let values: string[] = [];
+        switch (lowerQualifier) {
+            case 'type':
+                values = props.suggestions.types;
+                break;
+            case 'sender':
+                values = props.suggestions.senders;
+                break;
+            case 'receiver':
+                values = props.suggestions.receivers;
+                break;
+            case 'interface':
+                values = props.suggestions.interfaces;
+                break;
+        }
+        
+        // Filter values based on partial input
+        const filteredValues = partialValue 
+            ? values.filter(v => v.toLowerCase().includes(partialValue.toLowerCase()))
+            : values;
+        
+        // Don't show suggestions if the typed value exactly matches an existing value
+        if (partialValue && filteredValues.length === 1 && filteredValues[0]?.toLowerCase() === partialValue.toLowerCase()) {
+            return [];
+        }
+            
+        return filteredValues.map(v => ({ 
+            type: 'value' as const, 
+            text: `${qualifier}:${v}`, 
+            qualifier, 
+            value: v 
+        }));
+    }
+    
+    // Suggest qualifiers only if typing at the start or the word doesn't contain ':'
+    const qualifiers = ['type:', 'sender:', 'receiver:', 'interface:'];
+    const filtered = qualifiers.filter(q => q.startsWith(lastWord.toLowerCase()));
+    
+    // Don't show qualifier suggestions if the word already has a ':' but didn't match
+    if (lastWord.includes(':')) {
+        return [];
+    }
+    
+    return filtered.map(q => ({ 
+        type: 'qualifier' as const, 
+        text: q, 
+        qualifier: q.replace(':', ''), 
+        value: '' 
+    }));
+});
+
+// Handle keyboard navigation
+function handleKeyDown(event: KeyboardEvent) {
+    if (!showSuggestions.value || currentSuggestions.value.length === 0) {
+        if (event.key === 'ArrowDown') {
+            showSuggestions.value = true;
+            event.preventDefault();
+        }
+        return;
+    }
+    
+    switch (event.key) {
+        case 'ArrowDown':
+            event.preventDefault();
+            selectedSuggestionIndex.value = 
+                (selectedSuggestionIndex.value + 1) % currentSuggestions.value.length;
+            scrollToSelectedSuggestion();
+            break;
+        case 'ArrowUp':
+            event.preventDefault();
+            selectedSuggestionIndex.value = 
+                selectedSuggestionIndex.value === 0 
+                    ? currentSuggestions.value.length - 1 
+                    : selectedSuggestionIndex.value - 1;
+            scrollToSelectedSuggestion();
+            break;
+        case 'Enter':
+            event.preventDefault();
+            const suggestion = currentSuggestions.value[selectedSuggestionIndex.value];
+            if (suggestion) {
+                applySuggestion(suggestion);
+            }
+            break;
+        case 'Escape':
+            event.preventDefault();
+            showSuggestions.value = false;
+            break;
+    }
+}
+
+// Apply selected suggestion
+function applySuggestion(suggestion: { type: string; text: string; qualifier: string; value: string }) {
+    const value = localFilterValue.value;
+    const cursorPos = inputRef.value?.selectionStart ?? value.length;
+    const beforeCursor = value.substring(0, cursorPos);
+    const afterCursor = value.substring(cursorPos);
+    
+    // Find the start of the current word
+    const lastSpaceIndex = beforeCursor.lastIndexOf(' ');
+    const wordStart = lastSpaceIndex === -1 ? 0 : lastSpaceIndex + 1;
+    
+    // Replace the current word with the suggestion
+    localFilterValue.value = 
+        value.substring(0, wordStart) + 
+        suggestion.text + 
+        (suggestion.type === 'qualifier' ? '' : ' ') + 
+        afterCursor;
+    
+    showSuggestions.value = false;
+    
+    // Set cursor position after the inserted text
+    nextTick(() => {
+        if (inputRef.value) {
+            const newPos = wordStart + suggestion.text.length + (suggestion.type === 'qualifier' ? 0 : 1);
+            inputRef.value.setSelectionRange(newPos, newPos);
+            inputRef.value.focus();
+        }
+    });
+}
+
+// Scroll to keep selected suggestion visible
+function scrollToSelectedSuggestion() {
+    nextTick(() => {
+        const dropdown = dropdownRef.value;
+        if (!dropdown) return;
+        
+        const selectedElement = dropdown.querySelector('[data-selected="true"]');
+        if (selectedElement) {
+            selectedElement.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
+        }
+    });
+}
+
+// Show suggestions on focus only if there's already text
+function handleFocus() {
+    if (localFilterValue.value && currentSuggestions.value.length > 0) {
+        showSuggestions.value = true;
+    }
+}
+
+// Update suggestions when input changes - only show if there's text
+watch(localFilterValue, (newValue) => {
+    selectedSuggestionIndex.value = 0;
+    if (newValue && currentSuggestions.value.length > 0) {
+        showSuggestions.value = true;
+    } else {
+        showSuggestions.value = false;
+    }
+});
+</script>
+
+<template>
+    <div class="relative w-full">
+        <Search class="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground pointer-events-none z-20" />
+        
+        <!-- Styled text overlay (behind the input) -->
+        <div 
+            v-if="localFilterValue"
+            class="absolute left-9 right-8 top-1/2 -translate-y-1/2 pointer-events-none whitespace-nowrap overflow-hidden text-sm z-10"
+            v-html="styledText"
+        ></div>
+        
+        <!-- Actual input (text made transparent when there's content) -->
+        <Input
+            ref="inputRef"
+            v-model="localFilterValue"
+            :placeholder="placeholder"
+            :class="[
+                'pl-9 pr-8 relative z-10',
+                localFilterValue ? 'text-transparent caret-foreground' : ''
+            ]"
+            @keydown="handleKeyDown"
+            @focus="handleFocus"
+        />
+        
+        <button
+            v-if="localFilterValue"
+            @click="clearFilter"
+            class="absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground transition-colors z-20"
+        >
+            <X class="h-4 w-4" />
+        </button>
+        
+        <!-- Suggestions dropdown -->
+        <div
+            v-if="showSuggestions && currentSuggestions.length > 0"
+            ref="dropdownRef"
+            class="absolute top-full left-0 right-0 mt-1 bg-popover border border-border rounded-md shadow-lg max-h-60 overflow-y-auto z-50"
+        >
+            <div
+                v-for="(suggestion, index) in currentSuggestions"
+                :key="index"
+                :data-selected="index === selectedSuggestionIndex"
+                @click="applySuggestion(suggestion)"
+                @mouseenter="selectedSuggestionIndex = index"
+                :class="[
+                    'px-3 py-2 cursor-pointer transition-colors text-sm',
+                    index === selectedSuggestionIndex 
+                        ? 'bg-accent text-accent-foreground' 
+                        : 'hover:bg-accent/50'
+                ]"
+            >
+                <span v-if="suggestion.type === 'qualifier'" class="font-medium text-primary">
+                    {{ suggestion.text }}
+                </span>
+                <span v-else class="flex items-center gap-2">
+                    <span class="text-muted-foreground">{{ suggestion.qualifier }}:</span>
+                    <span class="font-medium">{{ suggestion.value }}</span>
+                </span>
+            </div>
+        </div>
+    </div>
+</template>
diff --git a/src/components/NetworkInspector/SortableHeader.vue b/src/components/NetworkInspector/SortableHeader.vue
new file mode 100644
index 0000000..b4cec25
--- /dev/null
+++ b/src/components/NetworkInspector/SortableHeader.vue
@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import type { Column } from '@tanstack/vue-table';
+import { Button } from '@/components/ui/button';
+import { ArrowUpDown, ArrowUp, ArrowDown } from 'lucide-vue-next';
+import type { NetworkBlockTableRow } from '@/types/NetworkInspector/TableRow';
+
+const props = defineProps<{
+    column: Column<NetworkBlockTableRow, unknown>;
+    label: string;
+}>();
+
+function toggleSorting() {
+    props.column.toggleSorting(props.column.getIsSorted() === 'asc');
+}
+</script>
+
+<template>
+    <Button
+        variant="ghost"
+        class="absolute inset-0 h-full w-full px-4 justify-start rounded-none"
+        @click="toggleSorting"
+    >
+        {{ label }}
+        <ArrowUp v-if="column.getIsSorted() === 'asc'" class="ml-2 h-4 w-4" />
+        <ArrowDown v-else-if="column.getIsSorted() === 'desc'" class="ml-2 h-4 w-4" />
+        <ArrowUpDown v-else class="ml-2 h-4 w-4" />
+    </Button>
+</template>
diff --git a/src/components/NetworkInspector/TooltipWrapper.vue b/src/components/NetworkInspector/TooltipWrapper.vue
new file mode 100644
index 0000000..7bb1574
--- /dev/null
+++ b/src/components/NetworkInspector/TooltipWrapper.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import {
+    Tooltip,
+    TooltipContent,
+    TooltipProvider,
+    TooltipTrigger,
+} from '@/components/ui/tooltip';
+
+defineProps<{
+    tooltip: string;
+    asChild?: boolean;
+}>();
+</script>
+
+<template>
+    <TooltipProvider>
+        <Tooltip>
+            <TooltipTrigger :as-child="asChild ?? true">
+                <slot />
+            </TooltipTrigger>
+            <TooltipContent>
+                {{ tooltip }}
+            </TooltipContent>
+        </Tooltip>
+    </TooltipProvider>
+</template>
diff --git a/src/components/NetworkInspector/cellRenderers/DirectionCell.vue b/src/components/NetworkInspector/cellRenderers/DirectionCell.vue
new file mode 100644
index 0000000..431fe48
--- /dev/null
+++ b/src/components/NetworkInspector/cellRenderers/DirectionCell.vue
@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import { ArrowLeft, ArrowRight } from 'lucide-vue-next';
+import type { ICellRendererParams } from 'ag-grid-community';
+
+interface Props {
+    params: ICellRendererParams;
+}
+
+const props = defineProps<Props>();
+const direction = props.params.value as string;
+</script>
+
+<template>
+    <div class="flex items-center">
+        <ArrowLeft v-if="direction === 'in'" class="h-4 w-4 text-green-500" />
+        <ArrowRight v-else class="h-4 w-4 text-blue-500" />
+    </div>
+</template>
diff --git a/src/components/NetworkInspector/cellRenderers/EndpointCell.vue b/src/components/NetworkInspector/cellRenderers/EndpointCell.vue
new file mode 100644
index 0000000..7e0a2f0
--- /dev/null
+++ b/src/components/NetworkInspector/cellRenderers/EndpointCell.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import type { ICellRendererParams } from 'ag-grid-community';
+import HighlightedText from '@/components/NetworkInspector/HighlightedText.vue';
+import TooltipWrapper from '@/components/NetworkInspector/TooltipWrapper.vue';
+
+interface Props {
+    params: ICellRendererParams & { searchTerms?: string[] };
+}
+
+const props = defineProps<Props>();
+const text = props.params.value as string;
+const searchTerms = props.params.searchTerms || [];
+</script>
+
+<template>
+    <TooltipWrapper v-if="text" :tooltip="text">
+        <div class="max-w-64 cursor-default truncate text-blue-400">
+            <HighlightedText :text="text" :searchTerms="searchTerms" />
+        </div>
+    </TooltipWrapper>
+    <div v-else class="text-muted-foreground italic">
+        null
+    </div>
+</template>
diff --git a/src/components/NetworkInspector/cellRenderers/InterfaceCell.vue b/src/components/NetworkInspector/cellRenderers/InterfaceCell.vue
new file mode 100644
index 0000000..f567498
--- /dev/null
+++ b/src/components/NetworkInspector/cellRenderers/InterfaceCell.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { ICellRendererParams } from 'ag-grid-community';
+import HighlightedText from '@/components/NetworkInspector/HighlightedText.vue';
+
+interface Props {
+    params: ICellRendererParams & { searchTerms?: string[] };
+}
+
+const props = defineProps<Props>();
+const value = props.params.value as string;
+const searchTerms = props.params.searchTerms || [];
+</script>
+
+<template>
+    <HighlightedText 
+        v-if="value"
+        :text="value"
+        :searchTerms="searchTerms"
+        class="text-muted-foreground"
+    />
+</template>
diff --git a/src/components/NetworkInspector/cellRenderers/TypeCell.vue b/src/components/NetworkInspector/cellRenderers/TypeCell.vue
new file mode 100644
index 0000000..cb21489
--- /dev/null
+++ b/src/components/NetworkInspector/cellRenderers/TypeCell.vue
@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import type { ICellRendererParams } from 'ag-grid-community';
+import type { NetworkBlockTableRow } from '@/types/NetworkInspector/TableRow';
+import { LockOpen, FileX } from 'lucide-vue-next';
+import HighlightedText from '@/components/NetworkInspector/HighlightedText.vue';
+import TooltipWrapper from '@/components/NetworkInspector/TooltipWrapper.vue';
+
+interface Props {
+    params: ICellRendererParams<NetworkBlockTableRow> & { searchTerms?: string[] };
+}
+
+const props = defineProps<Props>();
+const blockType = props.params.value as string;
+const isEncrypted = props.params.data?.isEncrypted;
+const isSigned = props.params.data?.isSigned;
+const searchTerms = props.params.searchTerms || [];
+</script>
+
+<template>
+    <div v-if="blockType" class="flex items-center gap-2">
+        <HighlightedText 
+            :text="blockType"
+            :searchTerms="searchTerms"
+            class="font-medium uppercase"
+        />
+        <TooltipWrapper v-if="!isEncrypted" tooltip="Not encrypted">
+            <div class="inline-block cursor-default">
+                <LockOpen class="h-4 w-4 text-muted-foreground line-through" />
+            </div>
+        </TooltipWrapper>
+        <TooltipWrapper v-if="!isSigned" tooltip="Not signed">
+            <div class="inline-block cursor-default">
+                <FileX class="h-4 w-4 text-muted-foreground" />
+            </div>
+        </TooltipWrapper>
+    </div>
+</template>
diff --git a/src/components/NetworkInspector/columns.ts b/src/components/NetworkInspector/columns.ts
new file mode 100644
index 0000000..65f7617
--- /dev/null
+++ b/src/components/NetworkInspector/columns.ts
@@ -0,0 +1,95 @@
+import type { ColDef } from 'ag-grid-community';
+import type { NetworkBlockTableRow } from '@/types/NetworkInspector/TableRow';
+import type { ParsedSearchQuery } from '@/utils/searchParser';
+import { getSearchTermsForField } from '@/utils/searchParser';
+import DirectionCell from '@/components/NetworkInspector/cellRenderers/DirectionCell.vue';
+import InterfaceCell from '@/components/NetworkInspector/cellRenderers/InterfaceCell.vue';
+import TypeCell from '@/components/NetworkInspector/cellRenderers/TypeCell.vue';
+import EndpointCell from '@/components/NetworkInspector/cellRenderers/EndpointCell.vue';
+
+// Format bytes with compact notation
+const byteFormatter = new Intl.NumberFormat('en', {
+    notation: 'compact',
+    style: 'unit',
+    unit: 'byte',
+    unitDisplay: 'narrow',
+});
+
+function formatBytes(bytes: number): string {
+    return byteFormatter.format(bytes);
+}
+
+export function createColumns(parsedQuery?: ParsedSearchQuery): ColDef<NetworkBlockTableRow>[] {
+    return [
+    {
+        field: 'direction',
+        headerName: 'Dir',
+        width: 70,
+        minWidth: 60,
+        cellRenderer: DirectionCell,
+        sortable: false,
+        suppressMovable: true,
+        lockPosition: 'left',
+    },
+    {
+        field: 'interface',
+        headerName: 'Interface',
+        flex: 1,
+        minWidth: 120,
+        cellRenderer: InterfaceCell,
+        cellRendererParams: {
+            searchTerms: parsedQuery ? getSearchTermsForField(parsedQuery, 'interface') : [],
+        },
+    },
+    {
+        field: 'blockType',
+        headerName: 'Type',
+        flex: 1.2,
+        minWidth: 150,
+        cellRenderer: TypeCell,
+        cellRendererParams: {
+            searchTerms: parsedQuery ? getSearchTermsForField(parsedQuery, 'type') : [],
+        },
+    },
+    {
+        field: 'sender',
+        headerName: 'Sender',
+        flex: 1.5,
+        minWidth: 180,
+        cellRenderer: EndpointCell,
+        cellRendererParams: {
+            searchTerms: parsedQuery ? getSearchTermsForField(parsedQuery, 'sender') : [],
+        },
+    },
+    {
+        field: 'receiver',
+        headerName: 'Receiver',
+        flex: 1.5,
+        minWidth: 180,
+        cellRenderer: EndpointCell,
+        cellRendererParams: {
+            searchTerms: parsedQuery ? getSearchTermsForField(parsedQuery, 'receiver') : [],
+        },
+    },
+    {
+        field: 'timestamp',
+        headerName: 'Time',
+        width: 120,
+        minWidth: 100,
+    },
+    {
+        field: 'size',
+        headerName: 'Size',
+        width: 90,
+        minWidth: 70,
+        valueFormatter: (params) => {
+            const size = params.value as number;
+            if (size === undefined || size === null) return '';
+            return formatBytes(size);
+        },
+    },
+];
+}
+
+// Default columns without search highlighting
+export const columns = createColumns();
diff --git a/src/components/ui/alert-dialog/AlertDialog.vue b/src/components/ui/alert-dialog/AlertDialog.vue
new file mode 100644
index 0000000..ff9accb
--- /dev/null
+++ b/src/components/ui/alert-dialog/AlertDialog.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { AlertDialogEmits, AlertDialogProps } from "reka-ui"
+import { AlertDialogRoot, useForwardPropsEmits } from "reka-ui"
+
+const props = defineProps<AlertDialogProps>()
+const emits = defineEmits<AlertDialogEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <AlertDialogRoot v-bind="forwarded">
+    <slot />
+  </AlertDialogRoot>
+</template>
diff --git a/src/components/ui/alert-dialog/AlertDialogAction.vue b/src/components/ui/alert-dialog/AlertDialogAction.vue
new file mode 100644
index 0000000..09cf6fc
--- /dev/null
+++ b/src/components/ui/alert-dialog/AlertDialogAction.vue
@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import type { AlertDialogActionProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { AlertDialogAction } from "reka-ui"
+import { cn } from "@/lib/utils"
+import { buttonVariants } from '@/components/ui/button'
+
+const props = defineProps<AlertDialogActionProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+</script>
+
+<template>
+  <AlertDialogAction v-bind="delegatedProps" :class="cn(buttonVariants(), props.class)">
+    <slot />
+  </AlertDialogAction>
+</template>
diff --git a/src/components/ui/alert-dialog/AlertDialogCancel.vue b/src/components/ui/alert-dialog/AlertDialogCancel.vue
new file mode 100644
index 0000000..e261894
--- /dev/null
+++ b/src/components/ui/alert-dialog/AlertDialogCancel.vue
@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import type { AlertDialogCancelProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { AlertDialogCancel } from "reka-ui"
+import { cn } from "@/lib/utils"
+import { buttonVariants } from '@/components/ui/button'
+
+const props = defineProps<AlertDialogCancelProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+</script>
+
+<template>
+  <AlertDialogCancel
+    v-bind="delegatedProps"
+    :class="cn(
+      buttonVariants({ variant: 'outline' }),
+      'mt-2 sm:mt-0',
+      props.class,
+    )"
+  >
+    <slot />
+  </AlertDialogCancel>
+</template>
diff --git a/src/components/ui/alert-dialog/AlertDialogContent.vue b/src/components/ui/alert-dialog/AlertDialogContent.vue
new file mode 100644
index 0000000..7806192
--- /dev/null
+++ b/src/components/ui/alert-dialog/AlertDialogContent.vue
@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import type { AlertDialogContentEmits, AlertDialogContentProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import {
+  AlertDialogContent,
+  AlertDialogOverlay,
+  AlertDialogPortal,
+  useForwardPropsEmits,
+} from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<AlertDialogContentProps & { class?: HTMLAttributes["class"] }>()
+const emits = defineEmits<AlertDialogContentEmits>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <AlertDialogPortal>
+    <AlertDialogOverlay
+      class="fixed inset-0 z-50 bg-black/80"
+    />
+    <AlertDialogContent
+      v-bind="forwarded"
+      :class="
+        cn(
+          'fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 border bg-background p-6 shadow-lg sm:rounded-lg',
+          props.class,
+        )
+      "
+    >
+      <slot />
+    </AlertDialogContent>
+  </AlertDialogPortal>
+</template>
diff --git a/src/components/ui/alert-dialog/AlertDialogDescription.vue b/src/components/ui/alert-dialog/AlertDialogDescription.vue
new file mode 100644
index 0000000..d7cb621
--- /dev/null
+++ b/src/components/ui/alert-dialog/AlertDialogDescription.vue
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import type { AlertDialogDescriptionProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import {
+  AlertDialogDescription,
+} from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<AlertDialogDescriptionProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+</script>
+
+<template>
+  <AlertDialogDescription
+    v-bind="delegatedProps"
+    :class="cn('text-sm text-muted-foreground', props.class)"
+  >
+    <slot />
+  </AlertDialogDescription>
+</template>
diff --git a/src/components/ui/alert-dialog/AlertDialogFooter.vue b/src/components/ui/alert-dialog/AlertDialogFooter.vue
new file mode 100644
index 0000000..c764e73
--- /dev/null
+++ b/src/components/ui/alert-dialog/AlertDialogFooter.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <div
+    :class="
+      cn(
+        'flex flex-col-reverse sm:flex-row sm:justify-end sm:gap-x-2',
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </div>
+</template>
diff --git a/src/components/ui/alert-dialog/AlertDialogHeader.vue b/src/components/ui/alert-dialog/AlertDialogHeader.vue
new file mode 100644
index 0000000..b5e5540
--- /dev/null
+++ b/src/components/ui/alert-dialog/AlertDialogHeader.vue
@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <div
+    :class="cn('flex flex-col gap-y-2 text-center sm:text-left', props.class)"
+  >
+    <slot />
+  </div>
+</template>
diff --git a/src/components/ui/alert-dialog/AlertDialogTitle.vue b/src/components/ui/alert-dialog/AlertDialogTitle.vue
new file mode 100644
index 0000000..b829392
--- /dev/null
+++ b/src/components/ui/alert-dialog/AlertDialogTitle.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import type { AlertDialogTitleProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { AlertDialogTitle } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<AlertDialogTitleProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+</script>
+
+<template>
+  <AlertDialogTitle
+    v-bind="delegatedProps"
+    :class="cn('text-lg font-semibold', props.class)"
+  >
+    <slot />
+  </AlertDialogTitle>
+</template>
diff --git a/src/components/ui/alert-dialog/AlertDialogTrigger.vue b/src/components/ui/alert-dialog/AlertDialogTrigger.vue
new file mode 100644
index 0000000..f104dcc
--- /dev/null
+++ b/src/components/ui/alert-dialog/AlertDialogTrigger.vue
@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import type { AlertDialogTriggerProps } from "reka-ui"
+import { AlertDialogTrigger } from "reka-ui"
+
+const props = defineProps<AlertDialogTriggerProps>()
+</script>
+
+<template>
+  <AlertDialogTrigger v-bind="props">
+    <slot />
+  </AlertDialogTrigger>
+</template>
diff --git a/src/components/ui/alert-dialog/index.ts b/src/components/ui/alert-dialog/index.ts
new file mode 100644
index 0000000..cf1b45d
--- /dev/null
+++ b/src/components/ui/alert-dialog/index.ts
@@ -0,0 +1,9 @@
+export { default as AlertDialog } from "./AlertDialog.vue"
+export { default as AlertDialogAction } from "./AlertDialogAction.vue"
+export { default as AlertDialogCancel } from "./AlertDialogCancel.vue"
+export { default as AlertDialogContent } from "./AlertDialogContent.vue"
+export { default as AlertDialogDescription } from "./AlertDialogDescription.vue"
+export { default as AlertDialogFooter } from "./AlertDialogFooter.vue"
+export { default as AlertDialogHeader } from "./AlertDialogHeader.vue"
+export { default as AlertDialogTitle } from "./AlertDialogTitle.vue"
+export { default as AlertDialogTrigger } from "./AlertDialogTrigger.vue"
diff --git a/src/components/ui/button/index.ts b/src/components/ui/button/index.ts
index 258018c..26e2c55 100644
--- a/src/components/ui/button/index.ts
+++ b/src/components/ui/button/index.ts
@@ -1,36 +1,38 @@
-import type { VariantProps } from 'class-variance-authority';
-import { cva } from 'class-variance-authority';
+import type { VariantProps } from "class-variance-authority"
+import { cva } from "class-variance-authority"
 
-export { default as Button } from './Button.vue';
+export { default as Button } from "./Button.vue"
 
 export const buttonVariants = cva(
-    "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
-    {
-        variants: {
-            variant: {
-                default: 'bg-primary text-primary-foreground shadow-xs hover:bg-primary/90',
-                destructive:
-                    'bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
-                outline:
-                    'border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50',
-                secondary: 'bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80',
-                ghost: 'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',
-                link: 'text-primary underline-offset-4 hover:underline',
-            },
-            size: {
-                default: 'h-9 px-4 py-2 has-[>svg]:px-3',
-                sm: 'h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5',
-                lg: 'h-10 rounded-md px-6 has-[>svg]:px-4',
-                icon: 'size-9',
-                'icon-sm': 'size-8',
-                'icon-lg': 'size-10',
-            },
-        },
-        defaultVariants: {
-            variant: 'default',
-            size: 'default',
-        },
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  {
+    variants: {
+      variant: {
+        default:
+          "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline:
+          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost:
+          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        "default": "h-9 px-4 py-2 has-[>svg]:px-3",
+        "sm": "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+        "lg": "h-10 rounded-md px-6 has-[>svg]:px-4",
+        "icon": "size-9",
+        "icon-sm": "size-8",
+        "icon-lg": "size-10",
+      },
     },
-);
-
-export type ButtonVariants = VariantProps<typeof buttonVariants>;
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  },
+)
+export type ButtonVariants = VariantProps<typeof buttonVariants>
diff --git a/src/components/ui/tooltip/TooltipContent.vue b/src/components/ui/tooltip/TooltipContent.vue
index b1748e8..cc3115f 100644
--- a/src/components/ui/tooltip/TooltipContent.vue
+++ b/src/components/ui/tooltip/TooltipContent.vue
@@ -37,7 +37,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
             <slot />
 
             <TooltipArrow
-                class="bg-primary fill-primary z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]"
+                class="bg-primary fill-primary z-50 size-2.5 translate-y-[calc(-50%-2px)] rotate-45 rounded-[2px]"
             />
         </TooltipContent>
     </TooltipPortal>
diff --git a/src/composable/useBlockSimulator.ts b/src/composable/useBlockSimulator.ts
new file mode 100644
index 0000000..72771ed
--- /dev/null
+++ b/src/composable/useBlockSimulator.ts
@@ -0,0 +1,117 @@
+// Block type definitions with their corresponding GitHub raw URLs
+export interface BlockType {
+    id: string;
+    label: string;
+    description: string;
+    url: string;
+}
+
+export const BLOCK_TYPES: BlockType[] = [
+    {
+        id: 'receivers',
+        label: 'Receivers',
+        description: 'Block with multiple receivers',
+        url: 'https://raw.githubusercontent.com/unyt-org/datex-core/main/crates/datex-core/tests/structs/receivers/block.bin'
+    },
+    {
+        id: 'no_receivers',
+        label: 'No Receivers',
+        description: 'Block without receivers',
+        url: 'https://raw.githubusercontent.com/unyt-org/datex-core/main/crates/datex-core/tests/structs/no_receivers/block.bin'
+    },
+    {
+        id: 'receivers_with_keys',
+        label: 'Receivers With Keys',
+        description: 'Block with encryption keys',
+        url: 'https://raw.githubusercontent.com/unyt-org/datex-core/main/crates/datex-core/tests/structs/receivers_with_keys/block.bin'
+    },
+    {
+        id: 'single_receiver_request',
+        label: 'Single Receiver Request',
+        description: 'Request block with single receiver',
+        url: 'https://raw.githubusercontent.com/unyt-org/datex-core/main/crates/datex-core/tests/structs/single_receiver_request/block.bin'
+    },
+    {
+        id: 'with_payload',
+        label: 'With Payload',
+        description: 'Block containing payload data',
+        url: 'https://raw.githubusercontent.com/unyt-org/datex-core/main/crates/datex-core/tests/structs/with_payload/block.bin'
+    }
+];
+
+// Cache for fetched block data
+const blockCache = new Map<string, Uint8Array>();
+
+/**
+ * Fetches a binary block from GitHub and converts it to Uint8Array
+ */
+async function fetchBlock(url: string): Promise<Uint8Array> {
+    // Check cache first
+    if (blockCache.has(url)) {
+        return blockCache.get(url)!;
+    }
+
+    try {
+        const response = await fetch(url);
+        if (!response.ok) {
+            throw new Error(`Failed to fetch block: ${response.statusText}`);
+        }
+        
+        const arrayBuffer = await response.arrayBuffer();
+        const uint8Array = new Uint8Array(arrayBuffer);
+        
+        // Cache the result
+        blockCache.set(url, uint8Array);
+        
+        return uint8Array;
+    } catch (error) {
+        console.error('Error fetching block:', error);
+        throw error;
+    }
+}
+
+/**
+ * Sends a specific block type to the network inspector
+ */
+export async function sendBlock(blockType: BlockType, baseInterface: { impl: { receive: (socketUUID: string, data: Uint8Array) => void } }, socketUUID: string): Promise<void> {
+    try {
+        const blockData = await fetchBlock(blockType.url);
+        baseInterface.impl.receive(socketUUID, blockData);
+        console.log(`Sent ${blockType.label} block:`, blockData);
+    } catch (error) {
+        console.error(`Failed to send ${blockType.label} block:`, error);
+        throw error;
+    }
+}
+
+/**
+ * Composable for block simulation functionality
+ */
+export function useBlockSimulator() {
+    /**
+     * Sends a block by its ID
+     */
+    async function sendBlockById(blockId: string, baseInterface: { impl: { receive: (socketUUID: string, data: Uint8Array) => void } }, socketUUID: string): Promise<void> {
+        const blockType = BLOCK_TYPES.find(bt => bt.id === blockId);
+        if (!blockType) {
+            throw new Error(`Block type not found: ${blockId}`);
+        }
+        await sendBlock(blockType, baseInterface, socketUUID);
+    }
+
+    /**
+     * Preload all block types into cache
+     */
+    async function preloadBlocks(): Promise<void> {
+        const promises = BLOCK_TYPES.map(bt => fetchBlock(bt.url));
+        await Promise.all(promises);
+        console.log('All blocks preloaded');
+    }
+
+    return {
+        BLOCK_TYPES,
+        sendBlock,
+        sendBlockById,
+        preloadBlocks
+    };
+}
diff --git a/src/composable/useNetworkInspector.ts b/src/composable/useNetworkInspector.ts
new file mode 100644
index 0000000..7330896
--- /dev/null
+++ b/src/composable/useNetworkInspector.ts
@@ -0,0 +1,255 @@
+import { Datex } from '@/lib/runtime';
+import type { RawBlockEntry } from '@/types/NetworkInspector/BlockEntry';
+import { parseStructure, type ParsedSection, type StructureDefinition } from '@unyt/speck';
+import { computed, ref } from 'vue';
+
+// Helper functions to extract metadata from parsed block structure (parse once, read many)
+function getBlockType(parsedBlock: ParsedSection[]): string {
+    const blockHeader = parsedBlock.find((section) => section.name === 'Block Header');
+    if (!blockHeader) return 'Unknown';
+
+    const flagsAndTimestamp = blockHeader.fields.find(
+        (field) => field.name === 'Flags and Timestamp',
+    );
+    if (!flagsAndTimestamp || !('subFields' in flagsAndTimestamp)) return 'Unknown';
+
+    const blockType = flagsAndTimestamp.subFields.find((field: { name: string }) => field.name === 'Block Type');
+    return (blockType && 'parsedValue' in blockType) ? blockType.parsedValue?.toString() || 'Unknown' : 'Unknown';
+}
+
+function getSender(parsedBlock: ParsedSection[]): string {
+    const routingHeader = parsedBlock.find((section) => section.name === 'Routing Header');
+    if (!routingHeader) return 'Unknown';
+
+    const sender = routingHeader.fields.find((field) => field.name === 'Sender');
+    return (sender && 'parsedValue' in sender) ? sender.parsedValue?.toString() || 'Unknown' : 'Unknown';
+}
+
+function getReceivers(parsedBlock: ParsedSection[]): string[] {
+    const routingHeader = parsedBlock.find((section) => section.name === 'Routing Header');
+    if (!routingHeader) return [];
+
+    const receivers = routingHeader.fields.filter((field) => field.name === 'Receivers');
+    return receivers.map((field) => ('parsedValue' in field) ? field.parsedValue?.toString() || '' : '');
+}
+
+function getTimestamp(parsedBlock: ParsedSection[]): number {
+    const blockHeader = parsedBlock.find((section) => section.name === 'Block Header');
+    if (!blockHeader) return 0;
+
+    const flagsAndTimestamp = blockHeader.fields.find(
+        (field) => field.name === 'Flags and Timestamp',
+    );
+    if (!flagsAndTimestamp || !('subFields' in flagsAndTimestamp)) return 0;
+
+    const timestamp = flagsAndTimestamp.subFields.find(
+        (field) => field.name === 'Creation Timestamp',
+    );
+    return (timestamp && 'parsedValue' in timestamp) ? Number(timestamp.parsedValue) || 0 : 0;
+}
+
+function getBlockSize(parsedBlock: ParsedSection[]): number {
+    const routingHeader = parsedBlock.find((section) => section.name === 'Routing Header');
+    if (!routingHeader) return 0;
+
+    const blockSize = routingHeader.fields.find((field) => field.name === 'Block Size');
+    return (blockSize && 'parsedValue' in blockSize) ? Number(blockSize.parsedValue) || 0 : 0;
+}
+
+function getEncryptionType(parsedBlock: ParsedSection[]): string {
+    const routingHeader = parsedBlock.find((section) => section.name === 'Routing Header');
+    if (!routingHeader) return 'Unknown';
+
+    const flags = routingHeader.fields.find((field) => field.name === 'Flags');
+    if (!flags || !('subFields' in flags)) return 'Unknown';
+
+    const encryptionType = flags.subFields.find((field: { name: string }) => field.name === 'Encryption Type');
+    return (encryptionType && 'parsedValue' in encryptionType) ? encryptionType.parsedValue?.toString() || 'Unknown' : 'Unknown';
+}
+
+function getSignatureType(parsedBlock: ParsedSection[]): string {
+    const routingHeader = parsedBlock.find((section) => section.name === 'Routing Header');
+    if (!routingHeader) return 'Unknown';
+
+    const flags = routingHeader.fields.find((field) => field.name === 'Flags');
+    if (!flags || !('subFields' in flags)) return 'Unknown';
+
+    const signatureType = flags.subFields.find((field: { name: string }) => field.name === 'Signature Type');
+    return (signatureType && 'parsedValue' in signatureType) ? signatureType.parsedValue?.toString() || 'Unknown' : 'Unknown';
+}
+
+// Extract all metadata once from parsed block
+function extractBlockMetadata(parsedBlock: ParsedSection[]) {
+    return {
+        blockType: getBlockType(parsedBlock),
+        sender: getSender(parsedBlock),
+        receivers: getReceivers(parsedBlock),
+        timestamp: getTimestamp(parsedBlock),
+        size: getBlockSize(parsedBlock),
+        encryptionType: getEncryptionType(parsedBlock),
+        signatureType: getSignatureType(parsedBlock),
+    };
+}
+
+// Storage configuration
+const STORAGE_KEY = 'datex-workbench:network-inspector:blocks';
+const MAX_STORED_BLOCKS = 200;
+const INITIAL_DISPLAYED_BLOCKS = 20;
+const LOAD_MORE_INCREMENT = 20;
+
+// Serializable block entry for localStorage
+interface StoredBlockEntry {
+    blockBase64: string;
+    direction: 'in' | 'out';
+    socketUuid: string;
+    interfaceName: string;
+    capturedAt: number;
+}
+
+// Utility functions for base64 conversion
+function arrayBufferToBase64(buffer: Uint8Array): string {
+    let binary = '';
+    const len = buffer.byteLength;
+    for (let i = 0; i < len; i++) {
+        binary += String.fromCharCode(buffer[i]!);
+    }
+    return btoa(binary);
+}
+
+function base64ToArrayBuffer(base64: string): Uint8Array {
+    const binary = atob(base64);
+    const len = binary.length;
+    const bytes = new Uint8Array(len);
+    for (let i = 0; i < len; i++) {
+        bytes[i] = binary.charCodeAt(i);
+    }
+    return bytes;
+}
+
+// Save blocks to localStorage
+function saveBlocksToStorage(blocks: RawBlockEntry[]): void {
+    try {
+        const storedBlocks: StoredBlockEntry[] = blocks.map(block => ({
+            blockBase64: arrayBufferToBase64(block.originalBinary),
+            direction: block.direction,
+            socketUuid: block.socketUuid,
+            interfaceName: block.interfaceName,
+            capturedAt: block.capturedAt,
+        }));
+        localStorage.setItem(STORAGE_KEY, JSON.stringify(storedBlocks));
+    } catch (error) {
+        console.warn('Failed to save blocks to localStorage:', error);
+    }
+}
+
+// Load blocks from localStorage
+function loadBlocksFromStorage(definition: StructureDefinition): RawBlockEntry[] {
+    try {
+        const stored = localStorage.getItem(STORAGE_KEY);
+        if (!stored) return [];
+        
+        const storedBlocks: StoredBlockEntry[] = JSON.parse(stored);
+        return storedBlocks.map(stored => {
+            const originalBinary = base64ToArrayBuffer(stored.blockBase64);
+            const parsedBlock = parseStructure(definition, originalBinary);
+            const metadata = extractBlockMetadata(parsedBlock);
+            return {
+                direction: stored.direction,
+                parsedBlock,
+                originalBinary,
+                socketUuid: stored.socketUuid,
+                interfaceName: stored.interfaceName,
+                capturedAt: stored.capturedAt,
+                ...metadata,
+            };
+        });
+    } catch (error) {
+        console.warn('Failed to load blocks from localStorage:', error);
+        return [];
+    }
+}
+
+const definition = await (
+    await fetch(
+        'https://raw.githubusercontent.com/unyt-org/datex-specification/refs/heads/main/assets/structures/dxb.json',
+    )
+).json();
+
+// Initialize blocks from storage
+const blocks = ref<RawBlockEntry[]>(loadBlocksFromStorage(definition));
+
+// Lazy loading state
+const loadedBlocksCount = ref(INITIAL_DISPLAYED_BLOCKS);
+
+// Computed property for progressively displaying blocks
+const displayedBlocks = computed(() => blocks.value.slice(0, loadedBlocksCount.value));
+
+// Check if more blocks are available to load
+const hasMoreBlocks = computed(() => loadedBlocksCount.value < blocks.value.length);
+
+// Load more blocks (called when user scrolls near bottom)
+function loadMoreBlocks() {
+    if (hasMoreBlocks.value) {
+        const remaining = blocks.value.length - loadedBlocksCount.value;
+        loadedBlocksCount.value += Math.min(LOAD_MORE_INCREMENT, remaining);
+    }
+}
+
+// Reset loaded count when blocks array significantly changes
+function resetLoadedCount() {
+    loadedBlocksCount.value = Math.min(INITIAL_DISPLAYED_BLOCKS, blocks.value.length);
+}
+
+
+function sendTestBlock() {
+    return Datex.execute("@@local :: 1 + 41")
+}
+
+Datex.comHub.registerIncomingBlockInterceptor((block: Uint8Array, socket_uuid: string) => {
+    const parsedBlock = parseStructure(definition, block);
+    console.log(parsedBlock, socket_uuid);
+    
+    // Extract metadata once at capture time
+    const metadata = extractBlockMetadata(parsedBlock);
+    
+    // Add new block at the beginning (top of list)
+    blocks.value.unshift({
+        direction: 'in',
+        parsedBlock,
+        originalBinary: block,
+        socketUuid: socket_uuid,
+        interfaceName: "local",
+        capturedAt: Date.now(),
+        ...metadata,
+    });
+    
+    // Keep only the most recent 200 blocks (FIFO rotation)
+    if (blocks.value.length > MAX_STORED_BLOCKS) {
+        blocks.value = blocks.value.slice(0, MAX_STORED_BLOCKS);
+    }
+    
+    // Reset loaded count to show new block while maintaining scroll position logic
+    // Only reset if we're at the top (showing initial blocks)
+    if (loadedBlocksCount.value <= INITIAL_DISPLAYED_BLOCKS) {
+        loadedBlocksCount.value = INITIAL_DISPLAYED_BLOCKS;
+    } else {
+        // User has scrolled down, increment to include new block
+        loadedBlocksCount.value = Math.min(loadedBlocksCount.value + 1, blocks.value.length);
+    }
+    
+    // Persist to localStorage
+    saveBlocksToStorage(blocks.value);
+});
+
+export function useNetworkInspector() {
+    return {
+        sendTestBlock,
+        blocks,
+        displayedBlocks,
+        hasMoreBlocks,
+        loadMoreBlocks,
+        resetLoadedCount,
+        loadedBlocksCount,
+        saveBlocksToStorage,
+    };
+}
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
index 3877c89..32e922e 100644
--- a/src/lib/utils.ts
+++ b/src/lib/utils.ts
@@ -1,6 +1,16 @@
 import { clsx, type ClassValue } from 'clsx';
 import { twMerge } from 'tailwind-merge';
+import type { Updater } from '@tanstack/vue-table';
+import type { Ref } from 'vue';
 
 export function cn(...inputs: ClassValue[]) {
     return twMerge(clsx(inputs));
 }
+
+export function valueUpdater<T extends Updater<unknown>>(
+    updaterOrValue: T,
+    ref: Ref,
+): void {
+    ref.value =
+        typeof updaterOrValue === 'function' ? updaterOrValue(ref.value) : updaterOrValue;
+}
diff --git a/src/router/index.ts b/src/router/index.ts
index 23307c0..1c6fba1 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -17,6 +17,11 @@ const router = createRouter({
       name: 'blocks',
       component: () => import('@/views/BlockViewer/DatexBlockProtocolViewWrapper.vue'),
     },
+    {
+      path: '/network',
+      name: 'network',
+      component: () => import('@/views/NetworkInspector/NetworkInspectorView.vue'),
+    },
     {
       path: '',
       name: 'Editor',
diff --git a/src/types/NetworkInspector/BlockEntry.ts b/src/types/NetworkInspector/BlockEntry.ts
new file mode 100644
index 0000000..f7fa949
--- /dev/null
+++ b/src/types/NetworkInspector/BlockEntry.ts
@@ -0,0 +1,20 @@
+import type { ParsedSection } from '@unyt/speck';
+
+export type BlockDirection = 'in' | 'out';
+
+export interface RawBlockEntry {
+    direction: BlockDirection;
+    parsedBlock: ParsedSection[];
+    originalBinary: Uint8Array;
+    socketUuid: string;
+    interfaceName: string;
+    capturedAt: number;
+    // Pre-parsed metadata (extracted once at capture time)
+    blockType: string;
+    sender: string;
+    receivers: string[];
+    timestamp: number;
+    size: number;
+    encryptionType: string;
+    signatureType: string;
+}
diff --git a/src/types/NetworkInspector/TableRow.ts b/src/types/NetworkInspector/TableRow.ts
new file mode 100644
index 0000000..9956fe0
--- /dev/null
+++ b/src/types/NetworkInspector/TableRow.ts
@@ -0,0 +1,14 @@
+import type { BlockDirection } from './BlockEntry';
+
+export interface NetworkBlockTableRow {
+    direction: BlockDirection;
+    blockType: string;
+    sender: string;
+    receiver: string;
+    timestamp: string;
+    size: number;
+    isEncrypted: boolean;
+    isSigned: boolean;
+    interface: string;
+    capturedAt: number;
+}
diff --git a/src/utils/searchParser.ts b/src/utils/searchParser.ts
new file mode 100644
index 0000000..e6e5e62
--- /dev/null
+++ b/src/utils/searchParser.ts
@@ -0,0 +1,282 @@
+/**
+ * Search query parser for GitHub-style key:value search syntax
+ * Now using search-query-parser library for more robust parsing
+ */
+
+import * as searchQuery from 'search-query-parser';
+
+// TypeScript type definitions for search-query-parser (no official types available)
+declare module 'search-query-parser' {
+    export interface ParseOptions {
+        keywords?: string[];
+        ranges?: string[];
+        tokenize?: boolean;
+        alwaysArray?: boolean;
+        offsets?: boolean;
+    }
+
+    export interface ParsedQuery {
+        text?: string | string[];
+        [key: string]: string | string[] | { from: string; to: string } | undefined;
+    }
+
+    export function parse(query: string, options?: ParseOptions): string | string[] | ParsedQuery;
+}
+
+export interface ParsedSearchQuery {
+    type: string[];
+    sender: string[];
+    receiver: string[];
+    interface: string[];
+    plainText: string;
+}
+
+/**
+ * Normalizes library output to always return an array
+ */
+function normalizeToArray(value: string | string[] | undefined): string[] {
+    if (!value) return [];
+    return Array.isArray(value) ? value : [value];
+}
+
+/**
+ * Parses a search query string into structured filters using search-query-parser library
+ * Example: "type:traceback sender:alice hello" 
+ * Returns: { type: ['traceback'], sender: ['alice'], receiver: [], interface: [], plainText: 'hello' }
+ */
+export function parseSearchQuery(query: string): ParsedSearchQuery {
+    const result: ParsedSearchQuery = {
+        type: [],
+        sender: [],
+        receiver: [],
+        interface: [],
+        plainText: ''
+    };
+
+    if (!query || !query.trim()) {
+        return result;
+    }
+
+    // Configure parser to recognize our keywords
+    const parsed = searchQuery.parse(query, {
+        keywords: ['type', 'sender', 'receiver', 'interface'],
+        alwaysArray: true,  // Always return arrays for consistency
+        offsets: false      // We don't need offset tracking
+    });
+
+    // If result is a string or string array, it means no keywords matched - treat as plainText
+    if (typeof parsed === 'string') {
+        result.plainText = parsed;
+        return result;
+    }
+
+    if (Array.isArray(parsed)) {
+        result.plainText = parsed.join(' ');
+        return result;
+    }
+
+    // Extract matched keywords
+    result.type = normalizeToArray(parsed.type as string | string[]);
+    result.sender = normalizeToArray(parsed.sender as string | string[]);
+    result.receiver = normalizeToArray(parsed.receiver as string | string[]);
+    result.interface = normalizeToArray(parsed.interface as string | string[]);
+    
+    // Extract plain text if present
+    const textValue = parsed.text;
+    if (textValue) {
+        result.plainText = Array.isArray(textValue) ? textValue.join(' ') : textValue;
+    }
+    
+    return result;
+}
+
+/**
+ * Checks if a value matches any of the filter values (case-insensitive substring match)
+ */
+function matchesAny(value: string, filters: string[]): boolean {
+    if (filters.length === 0) return true;
+    
+    const lowerValue = value.toLowerCase();
+    return filters.some(filter => lowerValue.includes(filter.toLowerCase()));
+}
+
+/**
+ * Checks if a row matches the plainText search across all searchable fields
+ */
+function matchesPlainText(row: { blockType: string; sender: string; receiver: string; interface: string }, plainText: string): boolean {
+    if (!plainText) return true;
+    
+    const lowerPlainText = plainText.toLowerCase();
+    const searchableFields = [
+        row.blockType,
+        row.sender,
+        row.receiver,
+        row.interface
+    ];
+    
+    return searchableFields.some(field => 
+        field && field.toLowerCase().includes(lowerPlainText)
+    );
+}
+
+/**
+ * Filters an array of rows based on parsed search query
+ * Uses AND logic between different qualifiers and OR logic between same qualifiers
+ */
+export function filterRowsBySearch<T extends {
+    blockType: string;
+    sender: string;
+    receiver: string;
+    interface: string;
+}>(rows: T[], parsedQuery: ParsedSearchQuery): T[] {
+    return rows.filter(row => {
+        // Check type filter (OR logic between multiple type values)
+        if (!matchesAny(row.blockType, parsedQuery.type)) return false;
+        
+        // Check sender filter (OR logic between multiple sender values)
+        if (!matchesAny(row.sender, parsedQuery.sender)) return false;
+        
+        // Check receiver filter (OR logic between multiple receiver values)
+        if (!matchesAny(row.receiver, parsedQuery.receiver)) return false;
+        
+        // Check interface filter (OR logic between multiple interface values)
+        if (!matchesAny(row.interface, parsedQuery.interface)) return false;
+        
+        // Check plain text search
+        if (!matchesPlainText(row, parsedQuery.plainText)) return false;
+        
+        return true;
+    });
+}
+
+/**
+ * Escapes HTML special characters to prevent XSS
+ */
+function escapeHtml(text: string): string {
+    const div = document.createElement('div');
+    div.textContent = text;
+    return div.innerHTML;
+}
+
+/**
+ * Highlights search terms in text with HTML mark tags
+ * Returns HTML string with highlighted matches
+ */
+export function highlightMatches(text: string, searchTerms: string[]): string {
+    if (!text || searchTerms.length === 0) {
+        return escapeHtml(text);
+    }
+    
+    // Escape the original text first
+    let result = escapeHtml(text);
+    
+    // Create a regex pattern for all search terms (case-insensitive)
+    // Sort by length descending to match longer terms first
+    const sortedTerms = [...searchTerms]
+        .filter(term => term.trim().length > 0)
+        .sort((a, b) => b.length - a.length);
+    
+    if (sortedTerms.length === 0) return result;
+    
+    // Build regex pattern
+    const pattern = sortedTerms
+        .map(term => term.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')) // Escape special regex chars
+        .join('|');
+    
+    const regex = new RegExp(`(${pattern})`, 'gi');
+    
+    // Replace matches with highlighted version in blue
+    result = result.replace(regex, '<mark class="bg-blue-900/20 dark:bg-blue-400/30 text-blue-900 dark:text-blue-100 px-0.5 rounded font-medium">$1</mark>');
+    
+    return result;
+}
+
+/**
+ * Get all relevant search terms for a specific field
+ */
+export function getSearchTermsForField(
+    parsedQuery: ParsedSearchQuery, 
+    field: 'type' | 'sender' | 'receiver' | 'interface'
+): string[] {
+    const terms = [...parsedQuery[field]];
+    
+    // Also include plain text if present
+    if (parsedQuery.plainText) {
+        terms.push(parsedQuery.plainText);
+    }
+    
+    return terms;
+}
+
+/**
+ * Token types for syntax highlighting in search input
+ */
+export type TokenType = 'qualifier' | 'colon' | 'value' | 'text' | 'whitespace';
+
+export interface SearchToken {
+    type: TokenType;
+    text: string;
+}
+
+/**
+ * Tokenizes search query for syntax highlighting
+ * Uses a simplified regex approach for visual feedback
+ */
+export function tokenizeSearchQuery(query: string): SearchToken[] {
+    if (!query) return [];
+    
+    const tokens: SearchToken[] = [];
+    // Match qualifier:value or qualifier:"quoted value" patterns
+    const pattern = /(\w+)(:)("(?:[^"\\]|\\.)*"|[^\s]+)|(\s+)|([^\s:]+)/g;
+    
+    let match;
+    
+    while ((match = pattern.exec(query)) !== null) {
+        if (match[1] && match[2] && match[3]) {
+            // Qualifier:value pattern
+            const qualifier = match[1];
+            const validQualifiers = ['type', 'sender', 'receiver', 'interface'];
+            
+            if (validQualifiers.includes(qualifier.toLowerCase())) {
+                tokens.push({ type: 'qualifier', text: qualifier });
+                tokens.push({ type: 'colon', text: match[2] });
+                tokens.push({ type: 'value', text: match[3] });
+            } else {
+                // Unknown qualifier - treat as plain text
+                tokens.push({ type: 'text', text: match[0] });
+            }
+        } else if (match[4]) {
+            // Whitespace
+            tokens.push({ type: 'whitespace', text: match[4] });
+        } else if (match[5]) {
+            // Plain text
+            tokens.push({ type: 'text', text: match[5] });
+        }
+    }
+    
+    return tokens;
+}
+
+/**
+ * Converts tokens to styled HTML for display
+ */
+export function tokensToStyledHtml(tokens: SearchToken[]): string {
+    return tokens.map(token => {
+        const escapedText = escapeHtml(token.text);
+        
+        switch (token.type) {
+            case 'qualifier':
+                return `<span class="text-foreground font-medium">${escapedText}</span>`;
+            case 'colon':
+                return `<span class="text-foreground">${escapedText}</span>`;
+            case 'value':
+                return `<span class="text-blue-500 dark:text-blue-400">${escapedText}</span>`;
+            case 'whitespace':
+                return escapedText;
+            case 'text':
+                return `<span class="text-gray-600 dark:text-gray-300">${escapedText}</span>`;
+            default:
+                return escapedText;
+        }
+    }).join('');
+}
diff --git a/src/views/BlockViewer/DatexBlockProtocolViewWrapper.vue b/src/views/BlockViewer/DatexBlockProtocolViewWrapper.vue
index 496fed3..4507483 100644
--- a/src/views/BlockViewer/DatexBlockProtocolViewWrapper.vue
+++ b/src/views/BlockViewer/DatexBlockProtocolViewWrapper.vue
@@ -6,7 +6,7 @@ import DatexBlockProtocolView from './DatexBlockProtocolView.vue';
 const blockData: Uint8Array = new Uint8Array(
   await (
     await fetch(
-      'https://raw.githubusercontent.com/unyt-org/datex-core/main/tests/structs/receivers_with_keys/block.bin',
+      'https://raw.githubusercontent.com/unyt-org/datex-core/main/crates/datex-core/tests/structs/receivers/block.bin',
     )
   ).arrayBuffer(),
 );
diff --git a/src/views/NetworkInspector/NetworkInspectorView.vue b/src/views/NetworkInspector/NetworkInspectorView.vue
new file mode 100644
index 0000000..cdb71ae
--- /dev/null
+++ b/src/views/NetworkInspector/NetworkInspectorView.vue
@@ -0,0 +1,232 @@
+<script setup lang="ts">
+import DataTable from '@/components/NetworkInspector/DataTable.vue';
+import NetworkFilter, { type SearchSuggestions } from '@/components/NetworkInspector/NetworkFilter.vue';
+import { createColumns } from '@/components/NetworkInspector/columns';
+import {
+    AlertDialog,
+    AlertDialogAction,
+    AlertDialogCancel,
+    AlertDialogContent,
+    AlertDialogDescription,
+    AlertDialogFooter,
+    AlertDialogHeader,
+    AlertDialogTitle,
+    AlertDialogTrigger,
+} from '@/components/ui/alert-dialog';
+import { Button } from '@/components/ui/button';
+import { BLOCK_TYPES } from '@/composable/useBlockSimulator';
+import { useNetworkInspector } from '@/composable/useNetworkInspector';
+import type { NetworkBlockTableRow } from '@/types/NetworkInspector/TableRow';
+import { filterRowsBySearch, parseSearchQuery } from '@/utils/searchParser';
+import { Trash } from 'lucide-vue-next';
+import { computed, nextTick, ref, watch } from 'vue';
+
+const { sendTestBlock, blocks, displayedBlocks, hasMoreBlocks, loadMoreBlocks, resetLoadedCount,  saveBlocksToStorage } = useNetworkInspector();
+
+// Search query state
+const searchQuery = ref('');
+
+// Alert dialog state
+const showDeleteDialog = ref(false);
+const deleteMessage = computed(() => {
+    // When search is empty, delete all blocks; otherwise delete filtered blocks
+    const count = searchQuery.value.trim() ? filteredTableRows.value.length : blocks.value.length;
+    return count > 0 ? `This will permanently delete ${count} block${count > 1 ? 's' : ''}.` : '';
+});
+
+// Confirm and execute deletion
+function confirmClearBlocks() {
+    if (searchQuery.value.trim()) {
+        // Delete only filtered blocks when searching
+        const timestampsToDelete = new Set(filteredTableRows.value.map(row => row.capturedAt));
+        blocks.value = blocks.value.filter(block => !timestampsToDelete.has(block.capturedAt));
+    } else {
+        // Delete ALL blocks when search is empty
+        blocks.value = [];
+        resetLoadedCount();
+    }
+    
+    // Persist changes to localStorage
+    saveBlocksToStorage(blocks.value);
+    
+    showDeleteDialog.value = false;
+}
+
+
+// Scroll container ref for maintaining scroll position
+const scrollContainerRef = ref<HTMLElement | null>(null);
+let savedScrollTop = 0;
+let savedScrollHeight = 0;
+
+// Watch for new blocks and preserve scroll position
+watch(
+    () => blocks.value.length,
+    (newLength, oldLength) => {
+        if (newLength > oldLength && scrollContainerRef.value) {
+            // Save scroll position before DOM update
+            savedScrollTop = scrollContainerRef.value.scrollTop;
+            savedScrollHeight = scrollContainerRef.value.scrollHeight;
+            
+            // Adjust scroll after DOM update
+            nextTick(() => {
+                if (scrollContainerRef.value) {
+                    const newScrollHeight = scrollContainerRef.value.scrollHeight;
+                    const heightDiff = newScrollHeight - savedScrollHeight;
+                    
+                    // Only adjust if user is scrolled down (not watching new items at top)
+                    if (savedScrollTop > 50) {
+                        scrollContainerRef.value.scrollTop = savedScrollTop + heightDiff;
+                    }
+                }
+            });
+        }
+    },
+);
+
+// Computed property to transform DISPLAYED blocks into table rows (using pre-parsed metadata)
+const allTableRows = computed<NetworkBlockTableRow[]>(() => {
+    return displayedBlocks.value.map((block) => {
+        return {
+            direction: block.direction,
+            blockType: block.blockType,
+            sender: block.sender,
+            receiver: block.receivers.join(', '),
+            timestamp: block.timestamp === 0 
+                ? new Date(block.capturedAt).toLocaleTimeString() 
+                : new Date(block.timestamp).toLocaleTimeString(),
+            size: block.size,
+            isEncrypted: block.encryptionType !== 'None' && block.encryptionType !== 'Unknown',
+            isSigned: block.signatureType !== 'None' && block.signatureType !== 'Unknown',
+            interface: block.interfaceName,
+            capturedAt: block.capturedAt,
+        };
+    });
+});
+
+// Filtered table rows based on search query
+const filteredTableRows = computed<NetworkBlockTableRow[]>(() => {
+    if (!searchQuery.value.trim()) return allTableRows.value;
+    
+    const parsedQuery = parseSearchQuery(searchQuery.value);
+    return filterRowsBySearch(allTableRows.value, parsedQuery);
+});
+
+// Final table rows to display (filtered results)
+const tableRows = computed<NetworkBlockTableRow[]>(() => {
+    return filteredTableRows.value;
+});
+
+// Compute unique suggestions from table data
+const searchSuggestions = computed<SearchSuggestions>(() => {
+    const types = new Set<string>();
+    const senders = new Set<string>();
+    const receivers = new Set<string>();
+    const interfaces = new Set<string>();
+    
+    allTableRows.value.forEach(row => {
+        if (row.blockType) types.add(row.blockType);
+        if (row.sender) senders.add(row.sender);
+        if (row.receiver) receivers.add(row.receiver);
+        if (row.interface) interfaces.add(row.interface);
+    });
+    
+    return {
+        types: Array.from(types).sort(),
+        senders: Array.from(senders).sort(),
+        receivers: Array.from(receivers).sort(),
+        interfaces: Array.from(interfaces).sort()
+    };
+});
+
+// Dynamic columns with search highlighting
+const dynamicColumns = computed(() => {
+    if (!searchQuery.value.trim()) return createColumns();
+    
+    const parsedQuery = parseSearchQuery(searchQuery.value);
+    return createColumns(parsedQuery);
+});
+</script>
+
+<template>
+    <div class="flex h-full flex-col p-4 bg-background text-foreground">
+        <div class="mb-4">
+            <h1 class="text-2xl font-bold mb-3">Network Inspector</h1>
+            
+            <!-- Block simulation buttons -->
+            <div class="flex flex-wrap gap-2">
+                <Button 
+                    v-for="blockType in BLOCK_TYPES" 
+                    :key="blockType.id"
+                    @click="sendTestBlock()"
+                    variant="outline"
+                    size="sm"
+                    class="text-foreground border-border"
+                    :title="blockType.description"
+                >
+                    {{ blockType.label }}
+                </Button>
+                
+                <!-- Legacy TraceBack button -->
+                <Button 
+                    @click="sendTestBlock"
+                    variant="outline"
+                    size="sm"
+                    class="text-foreground border-border"
+                    title="Legacy traceback block (base64 encoded)"
+                >
+                    TraceBack (Legacy)
+                </Button>
+            </div>
+        </div>
+
+        <div ref="scrollContainerRef" class="flex-1 max-h-[calc(100vh-200px)] overflow-y-auto">
+            <DataTable 
+                :columns="dynamicColumns" 
+                :data="tableRows"
+                :has-more-data="hasMoreBlocks && !searchQuery.trim()"
+                @load-more="loadMoreBlocks"
+            >
+                <template #filter>
+                    <div class="flex items-center gap-2">
+                        <NetworkFilter 
+                            v-model:filter-value="searchQuery" 
+                            :suggestions="searchSuggestions"
+                            placeholder="Search: type:traceback sender:@sender"
+                        />
+                        <AlertDialog v-model:open="showDeleteDialog">
+                            <AlertDialogTrigger as-child>
+                                <Button
+                                    variant="outline"
+                                    size="icon"
+                                    title="Clear all displayed blocks"
+                                    class="text-foreground border-border hover:text-red-600 transition-colors"
+                                    :disabled="blocks.length === 0"
+                                >
+                                    <Trash class="h-4 w-4" />
+                                </Button>
+                            </AlertDialogTrigger>
+                            <AlertDialogContent>
+                                <AlertDialogHeader>
+                                    <AlertDialogTitle>Delete Blocks?</AlertDialogTitle>
+                                    <AlertDialogDescription>
+                                        {{ deleteMessage }}
+                                        This action cannot be undone.
+                                    </AlertDialogDescription>
+                                </AlertDialogHeader>
+                                <AlertDialogFooter>
+                                    <AlertDialogCancel>Cancel</AlertDialogCancel>
+                                    <AlertDialogAction 
+                                        @click="confirmClearBlocks"
+                                        class="bg-red-600 hover:bg-red-700"
+                                    >
+                                        Delete
+                                    </AlertDialogAction>
+                                </AlertDialogFooter>
+                            </AlertDialogContent>
+                        </AlertDialog>
+                    </div>
+                </template>
+            </DataTable>
+        </div>
+    </div>
+</template>
\ No newline at end of file