diff --git a/frontend/src/hooks/useRecorder.ts b/frontend/src/hooks/useRecorder.ts
new file mode 100644
index 0000000..e239a9e
--- /dev/null
+++ b/frontend/src/hooks/useRecorder.ts
@@ -0,0 +1,93 @@
+import { useState } from 'react';
+import { RecorderConfig, SCTE35Marker } from '../types';
+
+const API_BASE = '/api';
+
+export function useRecorder() {
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const startRecording = async (portIndex: number, config: RecorderConfig): Promise<void> => {
+    setLoading(true);
+    setError(null);
+    try {
+      const response = await fetch(`${API_BASE}/ports/${portIndex}/start`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify(config),
+      });
+
+      if (!response.ok) {
+        throw new Error(`Failed to start recording: ${response.statusText}`);
+      }
+    } catch (err) {
+      const errorMessage = err instanceof Error ? err.message : 'Unknown error';
+      setError(errorMessage);
+      throw err;
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const stopRecording = async (portIndex: number): Promise<void> => {
+    setLoading(true);
+    setError(null);
+    try {
+      const response = await fetch(`${API_BASE}/ports/${portIndex}/stop`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+      });
+
+      if (!response.ok) {
+        throw new Error(`Failed to stop recording: ${response.statusText}`);
+      }
+    } catch (err) {
+      const errorMessage = err instanceof Error ? err.message : 'Unknown error';
+      setError(errorMessage);
+      throw err;
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const injectSCTE35 = async (
+    eventId: number,
+    durationSeconds: number,
+    webhookUrl?: string
+  ): Promise<SCTE35Marker | null> => {
+    setLoading(true);
+    setError(null);
+    try {
+      const response = await fetch(`${API_BASE}/scte35/inject`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          event_id: eventId,
+          duration_seconds: durationSeconds,
+          webhook_url: webhookUrl || null,
+        }),
+      });
+
+      if (!response.ok) {
+        throw new Error(`Failed to inject SCTE35 marker: ${response.statusText}`);
+      }
+
+      const data: SCTE35Marker = await response.json();
+      return data;
+    } catch (err) {
+      const errorMessage = err instanceof Error ? err.message : 'Unknown error';
+      setError(errorMessage);
+      throw err;
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return { startRecording, stopRecording, injectSCTE35, loading, error };
+}