diff --git a/frontend/src/components/ConfigPanel.tsx b/frontend/src/components/ConfigPanel.tsx
new file mode 100644
index 0000000..843e30e
--- /dev/null
+++ b/frontend/src/components/ConfigPanel.tsx
@@ -0,0 +1,157 @@
+import React, { useState, useEffect } from 'react';
+import { RecorderConfig, CodecType } from '../types';
+
+interface ConfigPanelProps {
+  portIndex: number;
+  currentConfig: RecorderConfig | null;
+  onSave: (config: RecorderConfig) => void;
+  onClose: () => void;
+}
+
+export function ConfigPanel({ portIndex, currentConfig, onSave, onClose }: ConfigPanelProps) {
+  // State for each config field
+  const [codec, setCodec] = useState<CodecType>('PRORES');
+  const [bitrate, setBitrate] = useState('185M');
+  const [qualityProfile, setQualityProfile] = useState('hq');
+  const [recordingPath, setRecordingPath] = useState('/recordings/port_{port_index}_{timestamp}.mxf');
+  const [srtEnabled, setSrtEnabled] = useState(false);
+  const [srtDestination, setSrtDestination] = useState('');
+  const [previewEnabled, setPreviewEnabled] = useState(true);
+
+  // Initialize from currentConfig if provided
+  useEffect(() => {
+    if (currentConfig) {
+      setCodec(currentConfig.codec);
+      setBitrate(currentConfig.bitrate);
+      setQualityProfile(currentConfig.quality_profile);
+      setRecordingPath(currentConfig.recording_path);
+      setSrtEnabled(currentConfig.srt_enabled);
+      setSrtDestination(currentConfig.srt_destination);
+      setPreviewEnabled(currentConfig.preview_enabled);
+    }
+  }, [currentConfig]);
+
+  const handleSave = () => {
+    const config: RecorderConfig = {
+      port_index: portIndex,
+      codec,
+      bitrate,
+      quality_profile: qualityProfile,
+      recording_path: recordingPath,
+      srt_enabled: srtEnabled,
+      srt_destination: srtDestination,
+      preview_enabled: previewEnabled,
+    };
+    onSave(config);
+    onClose();
+  };
+
+  return (
+    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
+      <div className="bg-gray-800 rounded-lg p-6 w-full max-w-md">
+        <h2 className="text-white text-xl font-bold mb-4">Configure Port {portIndex}</h2>
+
+        {/* Codec Selection */}
+        <div className="mb-4">
+          <label className="text-gray-300 text-sm font-medium mb-1 block">Codec</label>
+          <select
+            value={codec}
+            onChange={(e: React.ChangeEvent<HTMLSelectElement>) => setCodec(e.target.value as CodecType)}
+            className="w-full bg-gray-700 text-white border border-gray-600 rounded px-3 py-2 mb-3"
+          >
+            <option value="PRORES">ProRes</option>
+            <option value="DNXHD">DNxHD</option>
+            <option value="H264">H.264</option>
+            <option value="UNCOMPRESSED">Uncompressed</option>
+          </select>
+        </div>
+
+        {/* Quality Profile - only show for ProRes */}
+        {codec === 'PRORES' && (
+          <div className="mb-4">
+            <label className="text-gray-300 text-sm font-medium mb-1 block">Quality Profile</label>
+            <select
+              value={qualityProfile}
+              onChange={(e: React.ChangeEvent<HTMLSelectElement>) => setQualityProfile(e.target.value)}
+              className="w-full bg-gray-700 text-white border border-gray-600 rounded px-3 py-2 mb-3"
+            >
+              <option value="hq">High Quality</option>
+              <option value="mq">Medium Quality</option>
+              <option value="lq">Low Quality</option>
+            </select>
+          </div>
+        )}
+
+        {/* Bitrate - only show for DNxHD or H264 */}
+        {(codec === 'DNXHD' || codec === 'H264') && (
+          <div className="mb-4">
+            <label className="text-gray-300 text-sm font-medium mb-1 block">Bitrate</label>
+            <input
+              type="text"
+              value={bitrate}
+              onChange={(e: React.ChangeEvent<HTMLInputElement>) => setBitrate(e.target.value)}
+              placeholder="e.g., 185M, 50M"
+              className="w-full bg-gray-700 text-white border border-gray-600 rounded px-3 py-2 mb-3"
+            />
+          </div>
+        )}
+
+        {/* Recording Path */}
+        <div className="mb-4">
+          <label className="text-gray-300 text-sm font-medium mb-1 block">Recording Path</label>
+          <input
+            type="text"
+            value={recordingPath}
+            onChange={(e: React.ChangeEvent<HTMLInputElement>) => setRecordingPath(e.target.value)}
+            className="w-full bg-gray-700 text-white border border-gray-600 rounded px-3 py-2 mb-1"
+          />
+          <p className="text-gray-500 text-xs">Use {'{timestamp}'} and {'{port_index}'} as placeholders</p>
+        </div>
+
+        {/* SRT Enabled Checkbox */}
+        <div className="mb-4">
+          <label className="flex items-center text-gray-300 text-sm font-medium">
+            <input
+              type="checkbox"
+              checked={srtEnabled}
+              onChange={(e: React.ChangeEvent<HTMLInputElement>) => setSrtEnabled(e.target.checked)}
+              className="mr-2 w-4 h-4 bg-gray-700 border border-gray-600 rounded"
+            />
+            Enable SRT (Secure Reliable Transport)
+          </label>
+        </div>
+
+        {/* SRT Destination - only show when SRT enabled */}
+        {srtEnabled && (
+          <div className="mb-4">
+            <label className="text-gray-300 text-sm font-medium mb-1 block">SRT Destination</label>
+            <input
+              type="text"
+              value={srtDestination}
+              onChange={(e: React.ChangeEvent<HTMLInputElement>) => setSrtDestination(e.target.value)}
+              placeholder="srt://destination.example.com:9000"
+              className="w-full bg-gray-700 text-white border border-gray-600 rounded px-3 py-2 mb-3"
+            />
+          </div>
+        )}
+
+        {/* Preview Enabled Checkbox */}
+        <div className="mb-6">
+          <label className="flex items-center text-gray-300 text-sm font-medium">
+            <input
+              type="checkbox"
+              checked={previewEnabled}
+              onChange={(e: React.ChangeEvent<HTMLInputElement>) => setPreviewEnabled(e.target.checked)}
+              className="mr-2 w-4 h-4 bg-gray-700 border border-gray-600 rounded"
+            />
+            Enable Preview
+          </label>
+        </div>
+
+        {/* Action Buttons */}
+        <div className="flex justify-end gap-2">
+          <button
+            onClick={onClose}
+            className="bg-gray-600 hover:bg-gray-700 text-white px-4 py-2 rounded font-medium"
+          >
+            Cancel