diff --git a/bin/web/src/lib/analysis.spec.ts b/bin/web/src/lib/analysis.spec.svelte.ts
similarity index 98%
rename from bin/web/src/lib/analysis.spec.ts
rename to bin/web/src/lib/analysis.spec.svelte.ts
index 7190906..35df7e3 100644
--- a/bin/web/src/lib/analysis.spec.ts
+++ b/bin/web/src/lib/analysis.spec.svelte.ts
@@ -1,5 +1,5 @@
 import { describe, it, expect } from 'vitest';
-import { EventType, parse_finished_report, Severity, type QualitativeWarning } from './analysis';
+import { EventType, parse_finished_report, Severity, type QualitativeWarning } from './analysis.svelte';
 import { parse_ndjson, type NewlineDeliminatedJson } from './ndjson';
 
 const SAMPLE_REPORT_NDJSON: NewlineDeliminatedJson = [
diff --git a/bin/web/src/lib/analysis.ts b/bin/web/src/lib/analysis.svelte.ts
similarity index 98%
rename from bin/web/src/lib/analysis.ts
rename to bin/web/src/lib/analysis.svelte.ts
index 1625e40..24889cb 100644
--- a/bin/web/src/lib/analysis.ts
+++ b/bin/web/src/lib/analysis.svelte.ts
@@ -1,5 +1,5 @@
 import { parse_ndjson, type NewlineDeliminatedJson } from "./ndjson";
-import { req } from "./utils";
+import { req } from "./utils.svelte";
 
 export type AnalysisReport = {
     metadata: ReportMetadata;
diff --git a/bin/web/src/lib/analysisManager.ts b/bin/web/src/lib/analysisManager.svelte.ts
similarity index 91%
rename from bin/web/src/lib/analysisManager.ts
rename to bin/web/src/lib/analysisManager.svelte.ts
index 9f5cdf0..9e19b6a 100644
--- a/bin/web/src/lib/analysisManager.ts
+++ b/bin/web/src/lib/analysisManager.svelte.ts
@@ -1,6 +1,6 @@
-import { get_report, type AnalysisReport } from "./analysis";
-import type { Manifest, ManifestEntry } from "./manifest";
-import { req } from "./utils";
+import { get_report, type AnalysisReport } from "./analysis.svelte";
+import type { Manifest, ManifestEntry } from "./manifest.svelte";
+import { req } from "./utils.svelte";
 
 export enum AnalysisStatus {
     // rayhunter is currently analyzing this entry (note that this is distinct
diff --git a/bin/web/src/lib/components/AnalysisStatus.svelte b/bin/web/src/lib/components/AnalysisStatus.svelte
index 22e720f..b318ba6 100644
--- a/bin/web/src/lib/components/AnalysisStatus.svelte
+++ b/bin/web/src/lib/components/AnalysisStatus.svelte
@@ -1,35 +1,39 @@
 <script lang="ts">
-	import { AnalysisStatus } from "$lib/analysisManager";
-	import { EventType } from "$lib/analysis";
-	import type { ManifestEntry } from "$lib/manifest";
-    let { entry }: {
+	import { AnalysisStatus } from "$lib/analysisManager.svelte";
+	import { EventType } from "$lib/analysis.svelte";
+	import type { ManifestEntry } from "$lib/manifest.svelte";
+    let { entry, analysis_status }: {
         entry: ManifestEntry,
+        analysis_status: AnalysisStatus | undefined,
     } = $props();
 
-    let summary = $state('Loading...');
-    if (entry.analysis_status === AnalysisStatus.Queued) {
-        summary = 'Queued...';
-    } else if (entry.analysis_status === AnalysisStatus.Running) {
-        summary = 'Running...';
-    } else if (entry.analysis_status === AnalysisStatus.Finished) {
-        if (entry.analysis_report === undefined) {
-            summary = 'Loading...';
-        } else if (typeof(entry.analysis_report) === 'string') {
-            summary = entry.analysis_report;
-        } else {
-            let num_warnings = 0;
-            for (let row of entry.analysis_report.rows) {
-                for (let analysis of row.analysis) {
-                    for (let event of analysis.events) {
-                        if (event.type === EventType.Warning) {
-                            num_warnings += 1;
+    let summary = $derived.by(() => {
+        if (analysis_status === AnalysisStatus.Queued) {
+            return 'Queued...';
+        } else if (entry.analysis_status === AnalysisStatus.Running) {
+            return 'Running...';
+        } else if (entry.analysis_status === AnalysisStatus.Finished) {
+            if (entry.analysis_report === undefined) {
+                return 'Loading...';
+            } else if (typeof(entry.analysis_report) === 'string') {
+                return entry.analysis_report;
+            } else {
+                let num_warnings = 0;
+                for (let row of entry.analysis_report.rows) {
+                    for (let analysis of row.analysis) {
+                        for (let event of analysis.events) {
+                            if (event.type === EventType.Warning) {
+                                num_warnings += 1;
+                            }
                         }
                     }
                 }
+                return `${num_warnings} warnings`;
             }
-            summary = `${num_warnings} warnings`;
+        } else {
+            return 'Loading...';
         }
-    }
+    })
 </script>
 
 <p>
diff --git a/bin/web/src/lib/components/ManifestTable.svelte b/bin/web/src/lib/components/ManifestTable.svelte
index 954a663..d6a6765 100644
--- a/bin/web/src/lib/components/ManifestTable.svelte
+++ b/bin/web/src/lib/components/ManifestTable.svelte
@@ -1,10 +1,11 @@
 <script lang="ts">
-    import { Manifest, ManifestEntry } from "$lib/manifest";
+    import { Manifest, ManifestEntry } from "$lib/manifest.svelte";
     import TableRow from "./ManifestTableRow.svelte";
     interface Props {
-        manifest: Manifest;
+        entries: ManifestEntry[];
+        current_entry: ManifestEntry | undefined;
     }
-    let { manifest }: Props = $props();
+    let { entries, current_entry }: Props = $props();
 </script>
 
 <table>
@@ -20,10 +21,10 @@
         </tr>
     </thead>
     <tbody>
-        {#if manifest.current_entry !== undefined}
-            <TableRow entry={manifest.current_entry} current={true} />
+        {#if current_entry !== undefined}
+            <TableRow entry={current_entry} current={true} />
         {/if}
-        {#each manifest.entries as entry}
+        {#each entries as entry}
             <TableRow entry={entry} current={false} />
         {/each}
     </tbody>
diff --git a/bin/web/src/lib/components/ManifestTableRow.svelte b/bin/web/src/lib/components/ManifestTableRow.svelte
index 2ffbbd0..984b8d2 100644
--- a/bin/web/src/lib/components/ManifestTableRow.svelte
+++ b/bin/web/src/lib/components/ManifestTableRow.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { ManifestEntry } from "$lib/manifest";
+    import { ManifestEntry } from "$lib/manifest.svelte";
     import DownloadLink from '$lib/components/DownloadLink.svelte';
 	import AnalysisStatus from "./AnalysisStatus.svelte";
     let { entry, current }: {
@@ -17,7 +17,7 @@
     <td>{entry.qmdl_size_bytes}</td>
     <td><DownloadLink url={entry.getPcapUrl()} text="pcap" /></td>
     <td><DownloadLink url={entry.getQmdlUrl()} text="qmdl" /></td>
-    <td><AnalysisStatus entry={entry} /></td>
+    <td><AnalysisStatus analysis_status={entry.analysis_status} entry={entry} /></td>
 </tr>
 
 <style>
diff --git a/bin/web/src/lib/components/RecordingControls.svelte b/bin/web/src/lib/components/RecordingControls.svelte
new file mode 100644
index 0000000..1766343
--- /dev/null
+++ b/bin/web/src/lib/components/RecordingControls.svelte
@@ -0,0 +1,25 @@
+<script lang="ts">
+    import { req } from "$lib/utils.svelte";
+    let { currently_recording }: {
+        currently_recording: boolean;
+    } = $props();
+
+    async function start_recording() {
+        await req('POST', '/api/start-recording');
+    }
+
+    async function stop_recording() {
+        await req('POST', '/api/stop-recording');
+    }
+</script>
+
+<div>
+    {#if currently_recording}
+        <button onclick={stop_recording}>Stop Recording</button>
+    {:else}
+        <button onclick={start_recording}>Start Recording</button>
+    {/if}
+</div>
+
+<style>
+</style>
diff --git a/bin/web/src/lib/manifest.ts b/bin/web/src/lib/manifest.svelte.ts
similarity index 86%
rename from bin/web/src/lib/manifest.ts
rename to bin/web/src/lib/manifest.svelte.ts
index df9b106..55d6c08 100644
--- a/bin/web/src/lib/manifest.ts
+++ b/bin/web/src/lib/manifest.svelte.ts
@@ -1,5 +1,5 @@
-	import { get_report, type AnalysisReport } from "./analysis";
-import { AnalysisStatus, type AnalysisManager } from "./analysisManager";
+import { get_report, type AnalysisReport } from "./analysis.svelte";
+import { AnalysisStatus, type AnalysisManager } from "./analysisManager.svelte";
 
 interface JsonManifest {
     entries: JsonManifestEntry[];
@@ -51,13 +51,13 @@ export class Manifest {
 }
 
 export class ManifestEntry {
-    public name: string;
+    public name = $state("");
     public start_time: Date;
-    public last_message_time: Date | undefined = undefined;
-    public qmdl_size_bytes: number;
-    public analysis_size_bytes: number;
-    public analysis_status: AnalysisStatus | undefined = undefined;
-    public analysis_report: AnalysisReport | string | undefined = undefined;
+    public last_message_time: Date | undefined = $state(undefined);
+    public qmdl_size_bytes = $state(0);
+    public analysis_size_bytes = $state(0);
+    public analysis_status: AnalysisStatus | undefined = $state(undefined);
+    public analysis_report: AnalysisReport | string | undefined = $state(undefined);
 
     constructor(json: JsonManifestEntry) {
         this.name = json.name;
diff --git a/bin/web/src/lib/ndjson.ts b/bin/web/src/lib/ndjson.ts
index 7f8c83d..cfae466 100644
--- a/bin/web/src/lib/ndjson.ts
+++ b/bin/web/src/lib/ndjson.ts
@@ -1,7 +1,6 @@
 export type NewlineDeliminatedJson = any[];
 
 export function parse_ndjson(input: string): NewlineDeliminatedJson {
-    console.log(input)
     const lines = input.split('\n');
     const result = [];
     let current_line = '';
diff --git a/bin/web/src/lib/utils.ts b/bin/web/src/lib/utils.svelte.ts
similarity index 93%
rename from bin/web/src/lib/utils.ts
rename to bin/web/src/lib/utils.svelte.ts
index 52712aa..a720b08 100644
--- a/bin/web/src/lib/utils.ts
+++ b/bin/web/src/lib/utils.svelte.ts
@@ -1,4 +1,4 @@
-import { Manifest } from "./manifest";
+import { Manifest } from "./manifest.svelte";
 import type { SystemStats } from "./systemStats";
 
 export async function req(method: string, url: string): Promise<string> {
diff --git a/bin/web/src/routes/+page.svelte b/bin/web/src/routes/+page.svelte
index b49c94c..72aaf0d 100644
--- a/bin/web/src/routes/+page.svelte
+++ b/bin/web/src/routes/+page.svelte
@@ -1,35 +1,40 @@
 <script lang="ts">
-    import { Manifest, ManifestEntry } from "$lib/manifest";
-    import { get_manifest, get_system_stats } from "$lib/utils";
+    import { Manifest, ManifestEntry } from "$lib/manifest.svelte";
+    import { get_manifest, get_system_stats } from "$lib/utils.svelte";
     import ManifestTable from "$lib/components/ManifestTable.svelte";
     import { onMount } from "svelte";
     import type { SystemStats } from "$lib/systemStats";
-    import { AnalysisManager } from "$lib/analysisManager";
+    import { AnalysisManager } from "$lib/analysisManager.svelte";
+    import { writable, readable, type Readable, type Writable } from "svelte/store";
+	import RecordingControls from "$lib/components/RecordingControls.svelte";
 
-    let manifest: Manifest | undefined = $state(undefined);
-    let system_stats: SystemStats | undefined = $state(undefined);
     let manager: AnalysisManager = new AnalysisManager();
-    let analysis_status = $state([]);
+    let loaded = $state(false);
+    let recording = $state(false);
+    let entries: ManifestEntry[] = $state([]);
+    let current_entry: ManifestEntry | undefined = $state(undefined);
+    let system_stats: SystemStats | undefined = $state(undefined);
+    $effect(() => {
+        const interval = setInterval(async () => {
+            loaded = true;
+            await manager.update();
+            let new_manifest = await get_manifest();
+            await new_manifest.set_analysis_status(manager);
+            entries = new_manifest.entries;
+            current_entry = new_manifest.current_entry;
+            recording = current_entry !== undefined;
 
-    async function update(): Promise<void> {
-        await manager.update();
-        manifest = await get_manifest();
-        manifest.set_analysis_status(manager);
-        system_stats = await get_system_stats();
-    }
-
-    onMount(() => {
-       const interval = setInterval(() => {
-            update();
+            system_stats = await get_system_stats();
         }, 1000);
 
         return () => clearInterval(interval);
-    });
+    })
 </script>
 
 <div class="p-8">
-{#if manifest !== undefined}
-    <ManifestTable manifest={manifest} />
+{#if loaded}
+    <RecordingControls currently_recording={recording} />
+    <ManifestTable entries={entries} current_entry={current_entry} />
 {:else}
     <p>Loading...</p>
 {/if}