diff --git a/Cargo.lock b/Cargo.lock
index ea66481a..b50c761c 100644
--- a/Cargo.lock
+++ b/Cargo.lock
@@ -468,6 +468,7 @@ checksum = "edca88bc138befd0323b20752846e6587272d3b03b0343c8ea28a6f819e6e71f"
 dependencies = [
  "async-trait",
  "axum-core",
+ "axum-macros",
  "base64 0.22.1",
  "bytes",
  "futures-util",
@@ -518,6 +519,17 @@ dependencies = [
  "tracing",
 ]
 
+[[package]]
+name = "axum-macros"
+version = "0.4.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "57d123550fa8d071b7255cb0cc04dc302baa6c8c4a79f55701552684d8399bce"
+dependencies = [
+ "proc-macro2",
+ "quote",
+ "syn 2.0.90",
+]
+
 [[package]]
 name = "backtrace"
 version = "0.3.73"
@@ -713,6 +725,19 @@ dependencies = [
  "alloc-stdlib",
 ]
 
+[[package]]
+name = "build-time"
+version = "0.1.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "f1219c19fc29b7bfd74b7968b420aff5bc951cf517800176e795d6b2300dd382"
+dependencies = [
+ "chrono",
+ "once_cell",
+ "proc-macro2",
+ "quote",
+ "syn 2.0.90",
+]
+
 [[package]]
 name = "built"
 version = "0.7.4"
@@ -824,15 +849,16 @@ name = "cap-export"
 version = "0.1.0"
 dependencies = [
  "cap-editor",
- "cap-ffmpeg-cli",
  "cap-flags",
  "cap-media",
  "cap-project",
  "cap-rendering",
  "cap-utils",
+ "ffmpeg-next",
  "futures",
  "image 0.25.5",
  "mp4",
+ "tauri",
  "tempfile",
  "thiserror 1.0.63",
  "tokio",
@@ -877,6 +903,7 @@ dependencies = [
  "core-graphics 0.24.0",
  "cpal 0.15.3 (git+https://github.com/RustAudio/cpal?rev=f43d36e55494993bbbde3299af0c53e5cdf4d4cf)",
  "ffmpeg-next",
+ "ffmpeg-sys-next",
  "flume 0.11.0",
  "futures",
  "indexmap 2.5.0",
@@ -907,6 +934,8 @@ dependencies = [
  "serde",
  "serde_json",
  "specta",
+ "tauri",
+ "tauri-plugin-store",
 ]
 
 [[package]]
@@ -938,15 +967,18 @@ version = "0.1.0"
 dependencies = [
  "anyhow",
  "bezier_easing",
+ "build-time",
  "bytemuck",
  "cap-flags",
  "cap-project",
+ "cap-recording",
  "ffmpeg-hw-device",
  "ffmpeg-next",
  "ffmpeg-sys-next",
  "futures",
  "futures-intrusive",
  "image 0.25.5",
+ "log",
  "nix 0.29.0",
  "pretty_assertions",
  "serde",
diff --git a/apps/desktop/src-tauri/src/export.rs b/apps/desktop/src-tauri/src/export.rs
index abcfb7b3..4fad366a 100644
--- a/apps/desktop/src-tauri/src/export.rs
+++ b/apps/desktop/src-tauri/src/export.rs
@@ -1,6 +1,6 @@
 use crate::{
-    get_video_metadata, upsert_editor_instance, windows::ShowCapWindow, RenderProgress,
-    VideoRecordingMetadata, VideoType,
+    general_settings::GeneralSettingsStore, get_video_metadata, upsert_editor_instance,
+    windows::ShowCapWindow, RenderProgress, VideoRecordingMetadata, VideoType,
 };
 use cap_project::ProjectConfiguration;
 use std::path::PathBuf;
@@ -44,10 +44,8 @@ pub async fn export_video(
             .unwrap_or(screen_metadata.duration),
     );
 
-    // Calculate total frames with ceiling to ensure we don't exceed 100%
-    let total_frames = ((duration * 30.0).ceil() as u32).max(1);
-
     let editor_instance = upsert_editor_instance(&app, video_id.clone()).await;
+    let total_frames = editor_instance.get_total_frames();
 
     let output_path = editor_instance.meta().output_path();
 
@@ -72,6 +70,7 @@ pub async fn export_video(
     }
 
     let exporter = cap_export::Exporter::new(
+        &app,
         modified_project,
         output_path.clone(),
         move |frame_index| {
@@ -91,11 +90,7 @@ pub async fn export_video(
         e.to_string()
     })?;
 
-    let result = if use_custom_muxer {
-        exporter.export_with_custom_muxer().await
-    } else {
-        exporter.export_with_ffmpeg_cli().await
-    };
+    let result = exporter.export_with_custom_muxer().await;
 
     match result {
         Ok(_) => {
diff --git a/apps/desktop/src-tauri/src/general_settings.rs b/apps/desktop/src-tauri/src/general_settings.rs
index 88c11db1..4f7d91db 100644
--- a/apps/desktop/src-tauri/src/general_settings.rs
+++ b/apps/desktop/src-tauri/src/general_settings.rs
@@ -1,3 +1,4 @@
+use cap_project::Resolution;
 use serde::{Deserialize, Serialize};
 use serde_json::json;
 use specta::Type;
@@ -25,6 +26,8 @@ pub struct GeneralSettingsStore {
     pub has_completed_startup: bool,
     #[serde(default)]
     pub theme: AppTheme,
+    #[serde(default)]
+    pub recording_config: Option<RecordingConfig>,
 }
 
 #[derive(Default, Debug, Copy, Clone, Serialize, Deserialize, Type)]
@@ -36,6 +39,25 @@ pub enum AppTheme {
     Dark,
 }
 
+#[derive(Debug, Clone, Serialize, Deserialize, Type)]
+#[serde(rename_all = "camelCase")]
+pub struct RecordingConfig {
+    pub fps: u32,
+    pub resolution: Resolution,
+}
+
+impl Default for RecordingConfig {
+    fn default() -> Self {
+        Self {
+            fps: 30,
+            resolution: Resolution {
+                width: 1920,
+                height: 1080,
+            },
+        }
+    }
+}
+
 fn true_b() -> bool {
     true
 }
@@ -78,3 +100,20 @@ pub fn init(app: &AppHandle) {
     app.manage(GeneralSettingsState::new(store));
     println!("GeneralSettingsState managed");
 }
+
+#[tauri::command]
+#[specta::specta]
+pub async fn get_recording_config(app: AppHandle) -> Result<RecordingConfig, String> {
+    let settings = GeneralSettingsStore::get(&app)?;
+    Ok(settings
+        .and_then(|s| s.recording_config)
+        .unwrap_or_default())
+}
+
+#[tauri::command]
+#[specta::specta]
+pub async fn set_recording_config(app: AppHandle, config: RecordingConfig) -> Result<(), String> {
+    GeneralSettingsStore::update(&app, |settings| {
+        settings.recording_config = Some(config);
+    })
+}
diff --git a/apps/desktop/src-tauri/src/lib.rs b/apps/desktop/src-tauri/src/lib.rs
index 7dd8a984..a67d28aa 100644
--- a/apps/desktop/src-tauri/src/lib.rs
+++ b/apps/desktop/src-tauri/src/lib.rs
@@ -25,12 +25,12 @@ use cap_media::feeds::{AudioInputFeed, AudioInputSamplesSender};
 use cap_media::frame_ws::WSFrame;
 use cap_media::sources::CaptureScreen;
 use cap_media::{feeds::CameraFeed, sources::ScreenCaptureTarget};
-use cap_project::{Content, ProjectConfiguration, RecordingMeta, SharingMeta};
+use cap_project::{Content, ProjectConfiguration, RecordingMeta, Resolution, SharingMeta};
 use cap_recording::RecordingOptions;
 use cap_rendering::ProjectRecordings;
 use clipboard_rs::common::RustImage;
 use clipboard_rs::{Clipboard, ClipboardContext};
-use general_settings::GeneralSettingsStore;
+use general_settings::{GeneralSettingsStore, RecordingConfig};
 use mp4::Mp4Reader;
 // use display::{list_capture_windows, Bounds, CaptureTarget, FPS};
 use notifications::NotificationType;
@@ -91,14 +91,20 @@ pub enum VideoType {
     Camera,
 }
 
-#[derive(Serialize, Deserialize, specta::Type)]
-enum UploadResult {
+#[derive(Serialize, Deserialize, specta::Type, Debug)]
+pub enum UploadResult {
     Success(String),
     NotAuthenticated,
     PlanCheckFailed,
     UpgradeRequired,
 }
 
+#[derive(Serialize, Deserialize, specta::Type, Debug)]
+pub struct VideoRecordingMetadata {
+    pub duration: f64,
+    pub size: f64,
+}
+
 #[derive(Clone, Serialize, Deserialize, specta::Type)]
 pub struct PreCreatedVideo {
     id: String,
@@ -377,9 +383,20 @@ type MutableState<'a, T> = State<'a, Arc<RwLock<T>>>;
 
 #[tauri::command]
 #[specta::specta]
-async fn get_recording_options(state: MutableState<'_, App>) -> Result<RecordingOptions, ()> {
+async fn get_recording_options(
+    app: AppHandle,
+    state: MutableState<'_, App>,
+) -> Result<RecordingOptions, ()> {
     let mut state = state.write().await;
 
+    // Load settings from disk if they exist
+    if let Ok(Some(settings)) = GeneralSettingsStore::get(&app) {
+        if let Some(config) = settings.recording_config {
+            state.start_recording_options.fps = config.fps;
+            state.start_recording_options.output_resolution = Some(config.resolution);
+        }
+    }
+
     // If there's a saved audio input but no feed, initialize it
     if let Some(audio_input_name) = state.start_recording_options.audio_input_name() {
         if state.audio_input_feed.is_none() {
@@ -401,15 +418,28 @@ async fn get_recording_options(state: MutableState<'_, App>) -> Result<Recording
 #[tauri::command]
 #[specta::specta]
 async fn set_recording_options(
+    app: AppHandle,
     state: MutableState<'_, App>,
     options: RecordingOptions,
 ) -> Result<(), String> {
+    // Update in-memory state
     state
         .write()
         .await
-        .set_start_recording_options(options)
+        .set_start_recording_options(options.clone())
         .await?;
 
+    // Update persistent settings
+    GeneralSettingsStore::update(&app, |settings| {
+        settings.recording_config = Some(RecordingConfig {
+            fps: options.fps,
+            resolution: options.output_resolution.unwrap_or_else(|| Resolution {
+                width: 1920,
+                height: 1080,
+            }),
+        });
+    })?;
+
     Ok(())
 }
 
@@ -910,6 +940,7 @@ async fn copy_video_to_clipboard(
     Ok(())
 }
 
+
 #[derive(Serialize, Deserialize, specta::Type)]
 pub struct VideoRecordingMetadata {
     duration: f64,
@@ -1865,6 +1896,7 @@ pub async fn run() {
             global_message_dialog,
             show_window,
             write_clipboard_string,
+            get_editor_total_frames,
         ])
         .events(tauri_specta::collect_events![
             RecordingOptionsChanged,
@@ -1998,11 +2030,13 @@ pub async fn run() {
                     audio_input_feed: None,
                     start_recording_options: RecordingOptions {
                         capture_target: ScreenCaptureTarget::Screen(CaptureScreen {
-                            id: 1,
-                            name: "Default".to_string(),
+                            id: 0,
+                            name: String::new(),
                         }),
                         camera_label: None,
                         audio_input_name: None,
+                        fps: 30,
+                        output_resolution: None,
                     },
                     current_recording: None,
                     pre_created_video: None,
@@ -2362,3 +2396,15 @@ trait EventExt: tauri_specta::Event {
 }
 
 impl<T: tauri_specta::Event> EventExt for T {}
+
+#[tauri::command(async)]
+#[specta::specta]
+async fn get_editor_total_frames(app: AppHandle, video_id: String) -> Result<u32, String> {
+    let editor_instances = app.state::<EditorInstancesState>();
+    let instances = editor_instances.lock().await;
+
+    let instance = instances
+        .get(&video_id)
+        .ok_or_else(|| "Editor instance not found".to_string())?;
+    Ok(instance.get_total_frames())
+}
diff --git a/apps/desktop/src-tauri/src/recording.rs b/apps/desktop/src-tauri/src/recording.rs
index f0d957b0..838a7dbe 100644
--- a/apps/desktop/src-tauri/src/recording.rs
+++ b/apps/desktop/src-tauri/src/recording.rs
@@ -48,6 +48,14 @@ pub fn list_cameras() -> Vec<String> {
 pub async fn start_recording(app: AppHandle, state: MutableState<'_, App>) -> Result<(), String> {
     let mut state = state.write().await;
 
+    // Get the recording config
+    let config = GeneralSettingsStore::get(&app)?
+        .and_then(|s| s.recording_config)
+        .unwrap_or_default();
+
+    // Update the recording options with the configured FPS
+    state.start_recording_options.fps = config.fps;
+
     let id = uuid::Uuid::new_v4().to_string();
 
     let recording_dir = app
@@ -152,7 +160,6 @@ pub async fn stop_recording(app: AppHandle, state: MutableState<'_, App>) -> Res
 
     let now = Instant::now();
     let completed_recording = current_recording.stop().await.map_err(|e| e.to_string())?;
-    println!("stopped recording in {:?}", now.elapsed());
 
     if let Some(window) = CapWindowId::InProgressRecording.get(&app) {
         window.hide().unwrap();
@@ -175,14 +182,7 @@ pub async fn stop_recording(app: AppHandle, state: MutableState<'_, App>) -> Res
     };
 
     let display_screenshot = screenshots_dir.join("display.jpg");
-    let now = Instant::now();
     create_screenshot(display_output_path, display_screenshot.clone(), None).await?;
-    println!("created screenshot in {:?}", now.elapsed());
-
-    // let thumbnail = screenshots_dir.join("thumbnail.png");
-    // let now = Instant::now();
-    // create_thumbnail(display_screenshot, thumbnail, (100, 100)).await?;
-    // println!("created thumbnail in {:?}", now.elapsed());
 
     let recording_dir = completed_recording.recording_dir.clone();
 
diff --git a/apps/desktop/src/routes/(window-chrome)/(main).tsx b/apps/desktop/src/routes/(window-chrome)/(main).tsx
index 668d39fe..f751ad4e 100644
--- a/apps/desktop/src/routes/(window-chrome)/(main).tsx
+++ b/apps/desktop/src/routes/(window-chrome)/(main).tsx
@@ -7,6 +7,8 @@ import {
   useQueryClient,
 } from "@tanstack/solid-query";
 import { getVersion } from "@tauri-apps/api/app";
+import { getCurrentWindow } from "@tauri-apps/api/window";
+import { LogicalSize } from "@tauri-apps/api/window";
 import { cx } from "cva";
 import {
   JSX,
@@ -17,6 +19,7 @@ import {
   createResource,
   createSignal,
   onMount,
+  onCleanup,
 } from "solid-js";
 import { createStore, produce } from "solid-js/store";
 import { fetch } from "@tauri-apps/plugin-http";
@@ -51,11 +54,6 @@ const getAuth = cache(async () => {
   const value = await authStore.get();
   const local = import.meta.env.VITE_LOCAL_MODE === "true";
 
-  if (!value) {
-    if (local) return;
-    return redirect("/signin");
-  }
-
   const res = await apiClient.desktop.getUserPlan({
     headers: await protectedHeaders(),
   });
@@ -102,6 +100,33 @@ export default function () {
       }
     }
 
+    // Enforce window size with multiple safeguards
+    const currentWindow = await getCurrentWindow();
+    const MAIN_WINDOW_SIZE = { width: 300, height: 360 };
+
+    // Set initial size
+    currentWindow.setSize(
+      new LogicalSize(MAIN_WINDOW_SIZE.width, MAIN_WINDOW_SIZE.height)
+    );
+
+    // Check size when app regains focus
+    const unlistenFocus = await currentWindow.onFocusChanged(
+      ({ payload: focused }) => {
+        if (focused) {
+          currentWindow.setSize(
+            new LogicalSize(MAIN_WINDOW_SIZE.width, MAIN_WINDOW_SIZE.height)
+          );
+        }
+      }
+    );
+
+    // Listen for resize events
+    const unlistenResize = await currentWindow.onResized(() => {
+      currentWindow.setSize(
+        new LogicalSize(MAIN_WINDOW_SIZE.width, MAIN_WINDOW_SIZE.height)
+      );
+    });
+
     setTitlebar("hideMaximize", true);
     setTitlebar(
       "items",
@@ -121,6 +146,11 @@ export default function () {
         <ChangelogButton />
       </div>
     );
+
+    onCleanup(() => {
+      unlistenFocus();
+      unlistenResize();
+    });
   });
 
   return (
@@ -147,26 +177,24 @@ export default function () {
           </span>
         </div>
         <div class="flex items-center space-x-2">
-          {window.FLAGS.customS3 && (
-            <Tooltip.Root openDelay={0}>
-              <Tooltip.Trigger>
-                <button
-                  type="button"
-                  onClick={() =>
-                    commands.showWindow({ Settings: { page: "apps" } })
-                  }
-                >
-                  <IconLucideLayoutGrid class="w-[1.25rem] h-[1.25rem] text-gray-400 hover:text-gray-500" />
-                </button>
-              </Tooltip.Trigger>
-              <Tooltip.Portal>
-                <Tooltip.Content class="z-50 px-2 py-1 text-xs text-gray-50 bg-[--gray-500] rounded shadow-lg animate-in fade-in duration-100">
-                  Cap Apps
-                  <Tooltip.Arrow class="fill-[--gray-500]" />
-                </Tooltip.Content>
-              </Tooltip.Portal>
-            </Tooltip.Root>
-          )}
+          <Tooltip.Root openDelay={0}>
+            <Tooltip.Trigger>
+              <button
+                type="button"
+                onClick={() =>
+                  commands.showWindow({ Settings: { page: "apps" } })
+                }
+              >
+                <IconLucideLayoutGrid class="w-[1.25rem] h-[1.25rem] text-gray-400 hover:text-gray-500" />
+              </button>
+            </Tooltip.Trigger>
+            <Tooltip.Portal>
+              <Tooltip.Content class="z-50 px-2 py-1 text-xs text-gray-50 bg-[--gray-500] rounded shadow-lg animate-in fade-in duration-100">
+                Cap Apps
+                <Tooltip.Arrow class="fill-[--gray-500]" />
+              </Tooltip.Content>
+            </Tooltip.Portal>
+          </Tooltip.Root>
           <Tooltip.Root openDelay={0}>
             <Tooltip.Trigger>
               <button
diff --git a/apps/desktop/src/routes/(window-chrome)/settings.tsx b/apps/desktop/src/routes/(window-chrome)/settings.tsx
index 20f381a1..eab865b1 100644
--- a/apps/desktop/src/routes/(window-chrome)/settings.tsx
+++ b/apps/desktop/src/routes/(window-chrome)/settings.tsx
@@ -20,6 +20,7 @@ export default function Settings(props: RouteSectionProps) {
           <For
             each={[
               { href: "general", name: "General", icon: IconCapSettings },
+              { href: "config", name: "Config", icon: IconLucideVideo },
               { href: "hotkeys", name: "Shortcuts", icon: IconCapHotkeys },
               {
                 href: "recordings",
@@ -31,7 +32,7 @@ export default function Settings(props: RouteSectionProps) {
                 name: "Previous Screenshots",
                 icon: IconLucideCamera,
               },
-              window.FLAGS.customS3 && {
+              {
                 href: "apps",
                 name: "Cap Apps",
                 icon: IconLucideLayoutGrid,
diff --git a/apps/desktop/src/routes/(window-chrome)/settings/config.tsx b/apps/desktop/src/routes/(window-chrome)/settings/config.tsx
new file mode 100644
index 00000000..a11e566d
--- /dev/null
+++ b/apps/desktop/src/routes/(window-chrome)/settings/config.tsx
@@ -0,0 +1,89 @@
+import { createQuery } from "@tanstack/solid-query";
+import { For, Show } from "solid-js";
+import { commands } from "~/utils/tauri";
+
+const RESOLUTION_OPTIONS = [
+  { label: "720p (1280x720)", value: "720p", width: 1280, height: 720 },
+  { label: "1080p (1920x1080)", value: "1080p", width: 1920, height: 1080 },
+  { label: "4K (3840x2160)", value: "4k", width: 3840, height: 2160 },
+] as const;
+
+const FPS_OPTIONS = [
+  { label: "30 FPS", value: 30 },
+  { label: "60 FPS", value: 60 },
+] as const;
+
+export default function Config() {
+  const config = createQuery(() => ({
+    queryKey: ["recording-config"],
+    queryFn: () => commands.getRecordingOptions(),
+  }));
+
+  const updateConfig = async (updates: {
+    fps?: number;
+    outputResolution?: { width: number; height: number };
+  }) => {
+    if (!config.data) return;
+
+    await commands.setRecordingOptions({
+      ...config.data,
+      ...updates,
+    });
+
+    config.refetch();
+  };
+
+  return (
+    <div class="flex flex-col w-full h-full divide-y divide-[--gray-200] pt-1 pb-12">
+      <div class="p-4">
+        <div class="mb-6">
+          <label class="text-sm font-medium mb-2 block">
+            Output Resolution
+          </label>
+          <select
+            class="w-full p-2 border rounded"
+            value={
+              RESOLUTION_OPTIONS.find(
+                (opt) =>
+                  opt.width === config.data?.outputResolution?.width &&
+                  opt.height === config.data?.outputResolution?.height
+              )?.value
+            }
+            onChange={(e) => {
+              const option = RESOLUTION_OPTIONS.find(
+                (opt) => opt.value === e.currentTarget.value
+              );
+              if (option) {
+                updateConfig({
+                  outputResolution: {
+                    width: option.width,
+                    height: option.height,
+                  },
+                });
+              }
+            }}
+          >
+            <For each={RESOLUTION_OPTIONS}>
+              {(option) => <option value={option.value}>{option.label}</option>}
+            </For>
+          </select>
+        </div>
+
+        <div class="mb-6">
+          <label class="text-sm font-medium mb-2 block">Frame Rate</label>
+          <select
+            class="w-full p-2 border rounded"
+            value={config.data?.fps}
+            onChange={(e) => {
+              updateConfig({ fps: Number(e.currentTarget.value) });
+            }}
+          >
+            <For each={FPS_OPTIONS}>
+              {(option) => <option value={option.value}>{option.label}</option>}
+            </For>
+          </select>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/desktop/src/routes/editor/ConfigSidebar.tsx b/apps/desktop/src/routes/editor/ConfigSidebar.tsx
index 4cecad66..7f144626 100644
--- a/apps/desktop/src/routes/editor/ConfigSidebar.tsx
+++ b/apps/desktop/src/routes/editor/ConfigSidebar.tsx
@@ -541,71 +541,78 @@ export function ConfigSidebar() {
           </Field>
         </KTabs.Content>
         <KTabs.Content value="cursor" class="flex flex-col gap-6">
-          <Field name="Cursor" icon={<IconCapCursor />}>
-            <ComingSoonTooltip>
-              <Subfield name="Hide cursor when not moving">
-                <Toggle disabled />
-              </Subfield>
-            </ComingSoonTooltip>
-          </Field>
-          <Field name="Size" icon={<IconCapEnlarge />}>
-            <ComingSoonTooltip>
-              <Slider
-                disabled
-                value={[project.cursor.size]}
-                onChange={(v) => setProject("cursor", "size", v[0])}
-                minValue={20}
-                maxValue={300}
-                step={1}
-              />
-            </ComingSoonTooltip>
-          </Field>
-          {window.FLAGS.zoom && (
-            <Field name="Animation Style" icon={<IconLucideRabbit />}>
-              <RadioGroup
-                defaultValue="regular"
-                value={project.cursor.animationStyle}
-                onChange={(value) => {
-                  console.log("Changing animation style to:", value);
-                  setProject(
-                    "cursor",
-                    "animationStyle",
-                    value as CursorAnimationStyle
-                  );
-                }}
-                class="flex flex-col gap-2"
-              >
-                {(
-                  Object.entries(CURSOR_ANIMATION_STYLES) as [
-                    CursorAnimationStyle,
-                    string
-                  ][]
-                ).map(([value, label]) => (
-                  <RadioGroup.Item value={value} class="flex items-center">
-                    <RadioGroup.ItemInput class="peer sr-only" />
-                    <RadioGroup.ItemControl
-                      class={cx(
-                        "w-4 h-4 rounded-full border border-gray-300 mr-2",
-                        "relative after:absolute after:inset-0 after:m-auto after:block after:w-2 after:h-2 after:rounded-full",
-                        "after:transition-colors after:duration-200",
-                        "peer-checked:border-blue-500 peer-checked:after:bg-blue-400",
-                        "peer-focus-visible:ring-2 peer-focus-visible:ring-blue-400/50",
-                        "peer-disabled:opacity-50"
-                      )}
-                    />
-                    <span
-                      class={cx(
-                        "text-gray-500",
-                        "peer-checked:text-gray-900",
-                        "peer-disabled:opacity-50"
-                      )}
-                    >
-                      {label}
-                    </span>
-                  </RadioGroup.Item>
-                ))}
-              </RadioGroup>
-            </Field>
+          {window.FLAGS.recordMouse ? (
+            <>
+              <Field name="Cursor" icon={<IconCapCursor />}>
+                <Subfield name="Hide cursor when not moving">
+                  <Toggle
+                    checked={project.cursor.hideWhenIdle}
+                    onChange={(v) => setProject("cursor", "hideWhenIdle", v)}
+                  />
+                </Subfield>
+              </Field>
+              <Field name="Size" icon={<IconCapEnlarge />}>
+                <Slider
+                  value={[project.cursor.size]}
+                  onChange={(v) => setProject("cursor", "size", v[0])}
+                  minValue={20}
+                  maxValue={300}
+                  step={1}
+                />
+              </Field>
+              {window.FLAGS.zoom && (
+                <Field name="Animation Style" icon={<IconLucideRabbit />}>
+                  <RadioGroup
+                    defaultValue="regular"
+                    value={project.cursor.animationStyle}
+                    onChange={(value) => {
+                      console.log("Changing animation style to:", value);
+                      setProject(
+                        "cursor",
+                        "animationStyle",
+                        value as CursorAnimationStyle
+                      );
+                    }}
+                    class="flex flex-col gap-2"
+                  >
+                    {(
+                      Object.entries(CURSOR_ANIMATION_STYLES) as [
+                        CursorAnimationStyle,
+                        string
+                      ][]
+                    ).map(([value, label]) => (
+                      <RadioGroup.Item value={value} class="flex items-center">
+                        <RadioGroup.ItemInput class="peer sr-only" />
+                        <RadioGroup.ItemControl
+                          class={cx(
+                            "w-4 h-4 rounded-full border border-gray-300 mr-2",
+                            "relative after:absolute after:inset-0 after:m-auto after:block after:w-2 after:h-2 after:rounded-full",
+                            "after:transition-colors after:duration-200",
+                            "peer-checked:border-blue-500 peer-checked:after:bg-blue-400",
+                            "peer-focus-visible:ring-2 peer-focus-visible:ring-blue-400/50",
+                            "peer-disabled:opacity-50"
+                          )}
+                        />
+                        <span
+                          class={cx(
+                            "text-gray-500",
+                            "peer-checked:text-gray-900",
+                            "peer-disabled:opacity-50"
+                          )}
+                        >
+                          {label}
+                        </span>
+                      </RadioGroup.Item>
+                    ))}
+                  </RadioGroup>
+                </Field>
+              )}
+            </>
+          ) : (
+            <div class="flex flex-col items-center justify-center gap-2 text-gray-400 p-4">
+              <IconCapCursor class="size-6" />
+              <span>Cursor settings coming soon</span>
+            </div>
           )}
         </KTabs.Content>
         <KTabs.Content value="hotkeys">
diff --git a/apps/desktop/src/routes/editor/Timeline.tsx b/apps/desktop/src/routes/editor/Timeline.tsx
index 89e76512..2b0a9df2 100644
--- a/apps/desktop/src/routes/editor/Timeline.tsx
+++ b/apps/desktop/src/routes/editor/Timeline.tsx
@@ -17,9 +17,11 @@ import { createMemo } from "solid-js";
 
 import { commands, TimelineSegment } from "~/utils/tauri";
 import {
+  SegmentContextProvider,
   TimelineContextProvider,
   TrackContextProvider,
   useEditorContext,
+  useSegmentContext,
   useTimelineContext,
   useTrackContext,
 } from "./context";
@@ -459,7 +461,7 @@ export function Timeline() {
 
                       return (
                         <SegmentRoot
-                          class="border-red-300 group"
+                          class="border-red-300 group bg-red-50 hover:bg-opacity-80 transition-colors"
                           innerClass="ring-red-300"
                           segment={segment}
                           onMouseEnter={() => {
@@ -470,7 +472,7 @@ export function Timeline() {
                           }}
                         >
                           <SegmentHandle
-                            class="bg-red-300 group-hover:bg-opacity-80 transition-colors"
+                            class="bg-red-300 hover:opacity-80 transition-colors"
                             onMouseDown={(downEvent) => {
                               const start = segment.start;
 
@@ -531,7 +533,7 @@ export function Timeline() {
                             }}
                           />
                           <SegmentContent
-                            class="bg-red-50 cursor-pointer group-hover:bg-opacity-80 transition-colors flex items-center justify-center"
+                            class="cursor-pointer flex items-center justify-center"
                             onClick={(e) => {
                               setState("timelineSelection", {
                                 type: "zoom",
@@ -540,15 +542,23 @@ export function Timeline() {
                               e.stopPropagation();
                             }}
                           >
-                            <div class="text-xs text-gray-500 whitespace-nowrap flex flex-col justify-center items-center gap-1">
-                              <div class="flex items-center gap-1 text-red-300">
-                                <IconLucideSearch class="size-3" />{" "}
-                                {zoomPercentage()}
-                              </div>
-                            </div>
+                            {(() => {
+                              const ctx = useSegmentContext();
+
+                              return (
+                                <Show when={ctx.width() > 100}>
+                                  <div class="text-xs text-gray-500 whitespace-nowrap flex flex-col justify-center items-center gap-1">
+                                    <div class="flex items-center gap-1 text-red-300">
+                                      <IconLucideSearch class="size-3" />{" "}
+                                      {zoomPercentage()}
+                                    </div>
+                                  </div>
+                                </Show>
+                              );
+                            })()}
                           </SegmentContent>
                           <SegmentHandle
-                            class="bg-red-300 group-hover:bg-opacity-80 transition-colors"
+                            class="bg-red-300 hover:opacity-80 transition-colors"
                             onMouseDown={(downEvent) => {
                               const end = segment.end;
 
@@ -669,34 +679,38 @@ function SegmentRoot(
     return (props.segment.start / duration()) * (trackBounds.width ?? 0);
   });
 
+  const width = () =>
+    ((trackBounds.width ?? 0) * (props.segment.end - props.segment.start)) /
+    duration();
+
   return (
-    <div
-      {...props}
-      class={cx(
-        "border rounded-[calc(0.75rem+1px)] h-[3rem] w-full",
-        props.class,
-        isSelected() && "wobble-wrapper",
-        isFreeForm() && "absolute"
-      )}
-      style={{
-        "--segment-x": `${translateX()}px`,
-        transform: isFreeForm() ? "translateX(var(--segment-x))" : undefined,
-        width: `${
-          (100 * (props.segment.end - props.segment.start)) / duration()
-        }%`,
-      }}
-      onMouseDown={props.onMouseDown}
-      ref={props.ref}
-    >
+    <SegmentContextProvider width={width}>
       <div
+        {...props}
         class={cx(
-          "h-full border border-white ring-1 flex flex-row rounded-xl overflow-hidden group",
-          props.innerClass
+          "border rounded-[calc(0.75rem+1px)] h-[3rem] w-full",
+          props.class,
+          isSelected() && "wobble-wrapper",
+          isFreeForm() && "absolute"
         )}
+        style={{
+          "--segment-x": `${translateX()}px`,
+          transform: isFreeForm() ? "translateX(var(--segment-x))" : undefined,
+          width: `${width()}px`,
+        }}
+        onMouseDown={props.onMouseDown}
+        ref={props.ref}
       >
-        {props.children}
+        <div
+          class={cx(
+            "h-full border border-white ring-1 flex flex-row rounded-xl overflow-hidden group",
+            props.innerClass
+          )}
+        >
+          {props.children}
+        </div>
       </div>
-    </div>
+    </SegmentContextProvider>
   );
 }
 
@@ -713,7 +727,15 @@ function SegmentContent(props: ComponentProps<"div">) {
 }
 
 function SegmentHandle(props: ComponentProps<"div">) {
+  const ctx = useSegmentContext();
   return (
-    <div {...props} class={cx("w-[0.5rem] cursor-col-resize", props.class)} />
+    <div
+      {...props}
+      class={cx(
+        "w-[0.5rem] cursor-col-resize shrink-0 data-[hidden='true']:opacity-0 transition-opacity",
+        props.class
+      )}
+      data-hidden={ctx.width() < 50}
+    />
   );
 }
diff --git a/apps/desktop/src/routes/editor/context.ts b/apps/desktop/src/routes/editor/context.ts
index 58127a3e..5b70b739 100644
--- a/apps/desktop/src/routes/editor/context.ts
+++ b/apps/desktop/src/routes/editor/context.ts
@@ -183,3 +183,8 @@ export const [TrackContextProvider, useTrackContext] = createContextProvider(
   },
   null!
 );
+
+export const [SegmentContextProvider, useSegmentContext] =
+  createContextProvider((props: { width: Accessor<number> }) => {
+    return props;
+  }, null!);
diff --git a/apps/desktop/src/utils/createPresets.ts b/apps/desktop/src/utils/createPresets.ts
index af4e9aea..4bc5fbc7 100644
--- a/apps/desktop/src/utils/createPresets.ts
+++ b/apps/desktop/src/utils/createPresets.ts
@@ -2,6 +2,7 @@ import { createResource, onCleanup } from "solid-js";
 
 import type { ProjectConfiguration } from "~/utils/tauri";
 import { presetsStore, type PresetsStore } from "~/store";
+import { DEFAULT_PROJECT_CONFIG } from "~/routes/editor/projectConfig";
 
 export type CreatePreset = {
   name: string;
@@ -56,9 +57,13 @@ export function createPresets() {
       }),
     getDefaultConfig: () => {
       const p = query();
-      if (!p) return;
+      if (!p) return DEFAULT_PROJECT_CONFIG;
 
       const config = p.presets[p.default ?? 0]?.config;
+      if (!config) return DEFAULT_PROJECT_CONFIG;
+
+      console.log("Config:", config);
+      
       // @ts-ignore we reeeally don't want the timeline in the preset
       config.timeline = undefined;
       return config;
diff --git a/apps/desktop/src/utils/tauri.ts b/apps/desktop/src/utils/tauri.ts
index d669bc47..bc10c24a 100644
--- a/apps/desktop/src/utils/tauri.ts
+++ b/apps/desktop/src/utils/tauri.ts
@@ -160,6 +160,9 @@ async showWindow(window: ShowCapWindow) : Promise<void> {
 },
 async writeClipboardString(text: string) : Promise<null> {
     return await TAURI_INVOKE("write_clipboard_string", { text });
+},
+async getEditorTotalFrames(videoId: string) : Promise<number> {
+    return await TAURI_INVOKE("get_editor_total_frames", { videoId });
 }
 }
 
@@ -238,7 +241,7 @@ export type CursorType = "pointer" | "circle"
 export type Display = { path: string }
 export type EditorStateChanged = { playhead_position: number }
 export type Flags = { recordMouse: boolean; split: boolean; pauseResume: boolean; zoom: boolean }
-export type GeneralSettingsStore = { uploadIndividualFiles?: boolean; openEditorAfterRecording?: boolean; hideDockIcon?: boolean; autoCreateShareableLink?: boolean; enableNotifications?: boolean; disableAutoOpenLinks?: boolean; hasCompletedStartup?: boolean; theme?: AppTheme }
+export type GeneralSettingsStore = { uploadIndividualFiles?: boolean; openEditorAfterRecording?: boolean; hideDockIcon?: boolean; autoCreateShareableLink?: boolean; enableNotifications?: boolean; disableAutoOpenLinks?: boolean; hasCompletedStartup?: boolean; theme?: AppTheme; recordingConfig?: RecordingConfig | null }
 export type Hotkey = { code: string; meta: boolean; ctrl: boolean; alt: boolean; shift: boolean }
 export type HotkeyAction = "startRecording" | "stopRecording" | "restartRecording" | "takeScreenshot"
 export type HotkeysConfiguration = { show: boolean }
@@ -256,10 +259,11 @@ export type Plan = { upgraded: boolean; last_checked: number }
 export type PreCreatedVideo = { id: string; link: string; config: S3UploadMeta }
 export type ProjectConfiguration = { aspectRatio: AspectRatio | null; background: BackgroundConfiguration; camera: Camera; audio: AudioConfiguration; cursor: CursorConfiguration; hotkeys: HotkeysConfiguration; timeline?: TimelineConfiguration | null; motionBlur: number | null }
 export type ProjectRecordings = { segments: SegmentRecordings[] }
+export type RecordingConfig = { fps: number; resolution: Resolution }
 export type RecordingInfo = { captureTarget: ScreenCaptureTarget }
 export type RecordingMeta = ({ segment: SingleSegment } | { inner: MultipleSegments }) & { pretty_name: string; sharing?: SharingMeta | null }
 export type RecordingMetaChanged = { id: string }
-export type RecordingOptions = { captureTarget: ScreenCaptureTarget; cameraLabel: string | null; audioInputName: string | null }
+export type RecordingOptions = { captureTarget: ScreenCaptureTarget; cameraLabel: string | null; audioInputName: string | null; fps: number; outputResolution: Resolution | null }
 export type RecordingOptionsChanged = null
 export type RecordingStarted = null
 export type RecordingStopped = { path: string }
@@ -270,6 +274,7 @@ export type RequestOpenSettings = { page: string }
 export type RequestRestartRecording = null
 export type RequestStartRecording = null
 export type RequestStopRecording = null
+export type Resolution = { width: number; height: number }
 export type S3UploadMeta = { id: string; user_id: string; aws_region?: string; aws_bucket?: string }
 export type ScreenCaptureTarget = ({ variant: "window" } & CaptureWindow) | ({ variant: "screen" } & CaptureScreen)
 export type SegmentRecordings = { display: Video; camera: Video | null; audio: Audio | null }
@@ -282,7 +287,7 @@ export type TimelineSegment = { recordingSegment: number | null; timescale: numb
 export type UploadMode = { Initial: { pre_created_video: PreCreatedVideo | null } } | "Reupload"
 export type UploadProgress = { stage: string; progress: number; message: string }
 export type UploadResult = { Success: string } | "NotAuthenticated" | "PlanCheckFailed" | "UpgradeRequired"
-export type Video = { duration: number; width: number; height: number }
+export type Video = { duration: number; width: number; height: number; fps: number }
 export type VideoRecordingMetadata = { duration: number; size: number }
 export type VideoType = "screen" | "output" | "camera"
 export type XY<T> = { x: T; y: T }
diff --git a/apps/storybook/vite.config.ts.timestamp-1734982723347-15965ce66b06c.mjs b/apps/storybook/vite.config.ts.timestamp-1734982723347-15965ce66b06c.mjs
new file mode 100644
index 00000000..2cc8ae25
--- /dev/null
+++ b/apps/storybook/vite.config.ts.timestamp-1734982723347-15965ce66b06c.mjs
@@ -0,0 +1,11 @@
+// vite.config.ts
+import { defineConfig } from "file:///Users/macbookuser/Documents/GitHub/cap/node_modules/.pnpm/vite@5.4.8_@types+node@20.16.9_terser@5.34.0/node_modules/vite/dist/node/index.js";
+import solid from "file:///Users/macbookuser/Documents/GitHub/cap/node_modules/.pnpm/vite-plugin-solid@2.10.2_@testing-library+jest-dom@6.5.0_solid-js@1.9.3_vite@5.4.8_@types+node@20.16.9_terser@5.34.0_/node_modules/vite-plugin-solid/dist/esm/index.mjs";
+import capUIPlugin from "file:///Users/macbookuser/Documents/GitHub/cap/packages/ui-solid/vite.js";
+var vite_config_default = defineConfig({
+  plugins: [solid(), capUIPlugin]
+});
+export {
+  vite_config_default as default
+};
+//# sourceMappingURL=data:application/json;base64,ewogICJ2ZXJzaW9uIjogMywKICAic291cmNlcyI6IFsidml0ZS5jb25maWcudHMiXSwKICAic291cmNlc0NvbnRlbnQiOiBbImNvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9kaXJuYW1lID0gXCIvVXNlcnMvbWFjYm9va3VzZXIvRG9jdW1lbnRzL0dpdEh1Yi9jYXAvYXBwcy9zdG9yeWJvb2tcIjtjb25zdCBfX3ZpdGVfaW5qZWN0ZWRfb3JpZ2luYWxfZmlsZW5hbWUgPSBcIi9Vc2Vycy9tYWNib29rdXNlci9Eb2N1bWVudHMvR2l0SHViL2NhcC9hcHBzL3N0b3J5Ym9vay92aXRlLmNvbmZpZy50c1wiO2NvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9pbXBvcnRfbWV0YV91cmwgPSBcImZpbGU6Ly8vVXNlcnMvbWFjYm9va3VzZXIvRG9jdW1lbnRzL0dpdEh1Yi9jYXAvYXBwcy9zdG9yeWJvb2svdml0ZS5jb25maWcudHNcIjtpbXBvcnQgeyBkZWZpbmVDb25maWcgfSBmcm9tIFwidml0ZVwiO1xuaW1wb3J0IHNvbGlkIGZyb20gXCJ2aXRlLXBsdWdpbi1zb2xpZFwiO1xuaW1wb3J0IGNhcFVJUGx1Z2luIGZyb20gXCJAY2FwL3VpLXNvbGlkL3ZpdGVcIjtcblxuZXhwb3J0IGRlZmF1bHQgZGVmaW5lQ29uZmlnKHtcbiAgcGx1Z2luczogW3NvbGlkKCksIGNhcFVJUGx1Z2luXSxcbn0pO1xuIl0sCiAgIm1hcHBpbmdzIjogIjtBQUFvVixTQUFTLG9CQUFvQjtBQUNqWCxPQUFPLFdBQVc7QUFDbEIsT0FBTyxpQkFBaUI7QUFFeEIsSUFBTyxzQkFBUSxhQUFhO0FBQUEsRUFDMUIsU0FBUyxDQUFDLE1BQU0sR0FBRyxXQUFXO0FBQ2hDLENBQUM7IiwKICAibmFtZXMiOiBbXQp9Cg==
diff --git a/crates/editor/src/editor.rs b/crates/editor/src/editor.rs
index dbdd2ebb..b090a466 100644
--- a/crates/editor/src/editor.rs
+++ b/crates/editor/src/editor.rs
@@ -52,7 +52,6 @@ impl Renderer {
         }
 
         let total_frames = (30_f64 * max_duration).ceil() as u32;
-        println!("Editor total frames: {total_frames}");
 
         let (tx, rx) = mpsc::channel(4);
 
diff --git a/crates/editor/src/editor_instance.rs b/crates/editor/src/editor_instance.rs
index e3a3cdf8..da8985d0 100644
--- a/crates/editor/src/editor_instance.rs
+++ b/crates/editor/src/editor_instance.rs
@@ -1,12 +1,16 @@
 use crate::editor;
 use crate::playback::{self, PlaybackHandle};
+use cap_media::data::RawVideoFormat;
+use cap_media::data::VideoInfo;
 use cap_media::feeds::AudioData;
 use cap_media::frame_ws::create_frame_ws;
+use cap_project::RecordingConfig;
 use cap_project::{CursorEvents, ProjectConfiguration, RecordingMeta, XY};
 use cap_rendering::{
     ProjectRecordings, ProjectUniforms, RecordingSegmentDecoders, RenderOptions,
     RenderVideoConstants, SegmentVideoPaths,
 };
+use ffmpeg::Rational;
 use std::ops::Deref;
 use std::sync::Mutex as StdMutex;
 use std::time::Instant;
@@ -31,6 +35,7 @@ pub struct EditorInstance {
     ),
     ws_shutdown: Arc<StdMutex<Option<mpsc::Sender<()>>>>,
     pub segments: Arc<Vec<Segment>>,
+    pub total_frames: u32,
 }
 
 impl EditorInstance {
@@ -55,14 +60,17 @@ impl EditorInstance {
 
         if !project_path.exists() {
             println!("Video path {} not found!", project_path.display());
-            // return Err(format!("Video path {} not found!", path.display()));
             panic!("Video path {} not found!", project_path.display());
         }
 
         let meta = cap_project::RecordingMeta::load_for_project(&project_path).unwrap();
-
         let recordings = ProjectRecordings::new(&meta);
 
+        // Calculate total frames based on actual video duration and fps
+        let duration = recordings.duration();
+        let fps = recordings.segments[0].display.fps();
+        let total_frames = (duration * fps as f64).round() as u32;
+
         let render_options = RenderOptions {
             screen_size: XY::new(
                 recordings.segments[0].display.width,
@@ -111,6 +119,7 @@ impl EditorInstance {
             project_config: watch::channel(meta.project_config()),
             ws_shutdown: Arc::new(StdMutex::new(Some(ws_shutdown))),
             segments: Arc::new(segments),
+            total_frames,
         });
 
         this.state.lock().await.preview_task =
@@ -267,6 +276,10 @@ impl EditorInstance {
             }
         })
     }
+
+    pub fn get_total_frames(&self) -> u32 {
+        self.total_frames
+    }
 }
 
 impl Drop for EditorInstance {
@@ -343,3 +356,16 @@ pub fn create_segments(meta: &RecordingMeta) -> Vec<Segment> {
         }
     }
 }
+
+fn create_preview_config(recording_config: &RecordingConfig, meta: &RecordingMeta) -> VideoInfo {
+    let (width, height) = if recording_config.resolution.width > 1280 {
+        (1280, 720)
+    } else {
+        (
+            recording_config.resolution.width,
+            recording_config.resolution.height,
+        )
+    };
+
+    VideoInfo::from_raw(RawVideoFormat::Rgba, width, height, 30)
+}
diff --git a/crates/export/Cargo.toml b/crates/export/Cargo.toml
index 1711b488..9074f4b4 100644
--- a/crates/export/Cargo.toml
+++ b/crates/export/Cargo.toml
@@ -7,7 +7,6 @@ edition = "2021"
 cap-utils = { path = "../utils" }
 cap-project = { path = "../project" }
 cap-rendering = { path = "../rendering" }
-cap-ffmpeg-cli = { path = "../ffmpeg-cli" }
 cap-editor = { path = "../editor" }
 cap-media = { path = "../media" }
 cap-flags = { path = "../flags" }
@@ -18,3 +17,5 @@ image = "0.25.2"
 mp4 = "0.14.0"
 thiserror.workspace = true
 futures = "0.3.31"
+tauri = { workspace = true }
+ffmpeg = { workspace = true }
diff --git a/crates/export/src/lib.rs b/crates/export/src/lib.rs
index 8f9247de..15bb567d 100644
--- a/crates/export/src/lib.rs
+++ b/crates/export/src/lib.rs
@@ -5,14 +5,16 @@ use cap_media::{
     feeds::{AudioData, AudioFrameBuffer},
     MediaError,
 };
-use cap_project::{ProjectConfiguration, RecordingMeta};
+use cap_project::{GeneralSettingsStore, ProjectConfiguration, RecordingMeta};
 use cap_rendering::{
     ProjectUniforms, RecordingSegmentDecoders, RenderSegment, RenderVideoConstants, RenderedFrame,
     SegmentVideoPaths,
 };
+use ffmpeg::Rational;
 use futures::FutureExt;
 use image::{ImageBuffer, Rgba};
 use std::{path::PathBuf, sync::Arc};
+use tauri::AppHandle;
 
 const FPS: u32 = 30;
 
@@ -51,6 +53,7 @@ where
     TOnProgress: Fn(u32) + Send + 'static,
 {
     pub fn new(
+        app: &AppHandle,
         project: ProjectConfiguration,
         output_path: PathBuf,
         on_progress: TOnProgress,
@@ -59,6 +62,24 @@ where
         render_constants: Arc<RenderVideoConstants>,
         segments: &[Segment],
     ) -> Result<Self, ExportError> {
+        let recording_config = GeneralSettingsStore::get(app)
+            .map_err(|e| ExportError::FFmpeg(e))?
+            .and_then(|s| Some(s.recording_config))
+            .flatten()
+            .unwrap_or_default();
+
+        let display_info = match &meta.content {
+            cap_project::Content::SingleSegment { segment } => &segment.display,
+            cap_project::Content::MultipleSegments { inner } => &inner.segments[0].display,
+        };
+
+        let output_config = VideoInfo::from_raw(
+            RawVideoFormat::Rgba,
+            recording_config.resolution.width,
+            recording_config.resolution.height,
+            recording_config.fps,
+        );
+
         let output_folder = output_path.parent().unwrap();
         std::fs::create_dir_all(output_folder)?;
 
@@ -111,8 +132,9 @@ where
             buffer: AudioFrameBuffer,
         }
 
-        let (tx_image_data, mut rx_image_data) = tokio::sync::mpsc::channel::<RenderedFrame>(4);
+        println!("Exporting with custom muxer");
 
+        let (tx_image_data, mut rx_image_data) = tokio::sync::mpsc::channel::<RenderedFrame>(4);
         let (frame_tx, frame_rx) = std::sync::mpsc::sync_channel::<MP4Input>(4);
 
         let audio_info = match self.audio_segments.get(0).and_then(|d| d.as_ref().as_ref()) {
@@ -134,7 +156,7 @@ where
                     MP4Encoder::video_format(),
                     self.output_size.0,
                     self.output_size.1,
-                    30,
+                    FPS,
                 ),
                 audio_info,
                 cap_media::encoders::Output::File(self.output_path.clone()),
@@ -188,29 +210,24 @@ where
                         }
 
                         let audio_info = audio.buffer.info();
-                        // dbg!(&audio_info);
                         let estimated_samples_per_frame =
                             f64::from(audio_info.sample_rate) / f64::from(FPS);
                         let samples = estimated_samples_per_frame.ceil() as usize;
 
-                        if let Some((_, frame_data)) =
-                            audio.buffer.next_frame_data(samples, project.timeline())
+                        if let Some((_, frame_data)) = audio
+                            .buffer
+                            .next_frame_data(samples, project.timeline.as_ref().map(|t| t))
                         {
-                            // dbg!(&audio_info);
-                            let mut frame = audio_info.wrap_frame(
-                                &frame_data
-                                    .to_vec()
-                                    .chunks(8)
-                                    .flat_map(|v| {
-                                        (f64::from_le_bytes([
-                                            v[0], v[1], v[2], v[3], v[4], v[5], v[6], v[7],
-                                        ]) as f32)
-                                            .to_le_bytes()
-                                    })
-                                    .collect::<Vec<_>>(),
-                                0,
+                            let mut frame = audio_info.wrap_frame(&frame_data, 0);
+                            let pts = (frame_count as f64 * f64::from(audio_info.sample_rate) / f64::from(FPS)) as i64;
+                            frame.set_pts(Some(pts));
+                            println!(
+                                "Export: Sending audio frame {} with PTS: {:?}, samples: {}, data size: {}",
+                                frame_count,
+                                frame.pts(),
+                                samples,
+                                frame_data.len()
                             );
-                            frame.set_pts(Some(1_000_000 / 30 * (frame_count as i64)));
                             Some(frame)
                         } else {
                             None
@@ -219,6 +236,11 @@ where
                         None
                     };
 
+                    println!(
+                        "Export: Processing frame {} (size: {}x{}, padded_bytes_per_row: {})",
+                        frame_count, frame.width, frame.height, frame.padded_bytes_per_row
+                    );
+
                     let mut video_frame = VideoInfo::from_raw(
                         RawVideoFormat::Rgba,
                         self.output_size.0,
@@ -232,6 +254,12 @@ where
                     );
                     video_frame.set_pts(Some(frame_count as i64));
 
+                    println!(
+                        "Export: Sending frame {} to encoder (PTS: {:?})",
+                        frame_count,
+                        video_frame.pts()
+                    );
+
                     frame_tx
                         .send(MP4Input {
                             audio: audio_frame,
@@ -265,18 +293,6 @@ where
                     rgb_img.save(&screenshot_path).unwrap_or_else(|e| {
                         eprintln!("Failed to save screenshot: {:?}", e);
                     });
-
-                    // // Create and save thumbnail
-                    // let thumbnail = image::imageops::resize(
-                    //     &rgb_img,
-                    //     100,
-                    //     100,
-                    //     image::imageops::FilterType::Lanczos3,
-                    // );
-                    // let thumbnail_path = screenshots_dir.join("thumbnail.png");
-                    // thumbnail.save(&thumbnail_path).unwrap_or_else(|e| {
-                    //     eprintln!("Failed to save thumbnail: {:?}", e);
-                    // });
                 } else {
                     eprintln!("No frames were processed, cannot save screenshot or thumbnail");
                 }
@@ -294,6 +310,7 @@ where
             tx_image_data,
             &self.meta,
             self.render_segments,
+            FPS,
         )
         .then(|f| async { f.map_err(Into::into) });
 
@@ -302,172 +319,137 @@ where
         Ok(output_path)
     }
 
-    pub async fn export_with_ffmpeg_cli(self) -> Result<PathBuf, ExportError> {
+    pub async fn export_with_mp4_encoder(self) -> Result<PathBuf, ExportError> {
         struct AudioRender {
             buffer: AudioFrameBuffer,
-            pipe_tx: tokio::sync::mpsc::Sender<Vec<u8>>,
         }
 
         let (tx_image_data, mut rx_image_data) = tokio::sync::mpsc::channel::<RenderedFrame>(4);
 
-        let ffmpeg_handle = tokio::spawn({
+        let encoder_handle = tokio::spawn({
             let project = self.project.clone();
             let project_path = self.project_path.clone();
             async move {
-                println!("Starting FFmpeg output process...");
-                let mut ffmpeg = cap_ffmpeg_cli::FFmpeg::new();
+                println!("Starting MP4 encoding process...");
 
-                let audio_dir = tempfile::tempdir().unwrap();
-                let video_dir = tempfile::tempdir().unwrap();
-                let mut audio = if let Some(audio_data) =
+                let audio_info = if let Some(audio_data) =
                     self.audio_segments.get(0).and_then(|d| d.as_ref().as_ref())
                 {
-                    let (tx, rx) = tokio::sync::mpsc::channel::<Vec<u8>>(30);
-
-                    let pipe_path = cap_utils::create_channel_named_pipe(
-                        rx,
-                        audio_dir.path().join("audio.pipe"),
-                        {
-                            let mut done = false;
-                            move |value| {
-                                if done {
-                                    None
-                                } else {
-                                    done = true;
-                                    Some(&value)
-                                }
-                            }
-                        },
-                    );
-
-                    ffmpeg.add_input(cap_ffmpeg_cli::FFmpegRawAudioInput {
-                        input: pipe_path,
-                        sample_format: "f64le".to_string(),
-                        sample_rate: audio_data.info.sample_rate,
-                        channels: audio_data.info.channels as u16,
-                    });
-
-                    Some(AudioRender {
-                        buffer: AudioFrameBuffer::new(
-                            self.audio_segments
-                                .iter()
-                                .map(|s| s.as_ref().as_ref().unwrap().clone())
-                                .collect(),
-                        ),
-                        pipe_tx: tx,
-                    })
+                    Some(
+                        AudioInfo::new(
+                            audio_data.info.sample_format,
+                            audio_data.info.sample_rate,
+                            audio_data.info.channels as u16,
+                        )
+                        .map_err(Into::<MediaError>::into)?,
+                    )
                 } else {
                     None
                 };
 
-                let video_tx = {
-                    let (tx, rx) = tokio::sync::mpsc::channel::<RenderedFrame>(30);
+                let mut encoder = cap_media::encoders::MP4Encoder::init(
+                    "output",
+                    VideoInfo::from_raw(
+                        MP4Encoder::video_format(),
+                        self.output_size.0,
+                        self.output_size.1,
+                        30,
+                    ),
+                    audio_info,
+                    cap_media::encoders::Output::File(self.output_path.clone()),
+                )?;
 
-                    let pipe_path = cap_utils::create_channel_named_pipe(
-                        rx,
-                        video_dir.path().join("video.pipe"),
-                        {
-                            let mut i = 0;
-
-                            move |frame| {
-                                if i < frame.data.len() as u32 {
-                                    let value =
-                                        &frame.data[i as usize..(i + frame.width * 4) as usize];
-
-                                    i += frame.padded_bytes_per_row;
-                                    Some(value)
-                                } else {
-                                    None
-                                }
-                            }
-                        },
-                    );
+                let mut audio =
+                    if let Some(_) = self.audio_segments.get(0).and_then(|d| d.as_ref().as_ref()) {
+                        Some(AudioRender {
+                            buffer: AudioFrameBuffer::new(
+                                self.audio_segments
+                                    .iter()
+                                    .map(|s| s.as_ref().as_ref().unwrap().clone())
+                                    .collect(),
+                            ),
+                        })
+                    } else {
+                        None
+                    };
 
-                    ffmpeg.add_input(cap_ffmpeg_cli::FFmpegRawVideoInput {
-                        width: self.output_size.0,
-                        height: self.output_size.1,
-                        fps: 30,
-                        pix_fmt: "rgba",
-                        input: pipe_path,
-                    });
+                let mut frame_count = 0;
+                let mut first_frame = None;
 
-                    tx
-                };
+                while let Some(frame) = rx_image_data.recv().await {
+                    (self.on_progress)(frame_count);
 
-                ffmpeg
-                    .command
-                    .args(["-f", "mp4"])
-                    .args(["-codec:v", "libx264", "-codec:a", "aac"])
-                    .args(["-preset", "ultrafast"])
-                    .args(["-pix_fmt", "yuv420p", "-tune", "zerolatency"])
-                    .arg("-y")
-                    .arg(&self.output_path);
+                    if frame_count == 0 {
+                        first_frame = Some(frame.clone());
+                    }
 
-                let mut ffmpeg_process = ffmpeg.start();
+                    if let Some(audio) = &mut audio {
+                        if frame_count == 0 {
+                            audio.buffer.set_playhead(0., project.timeline());
+                        }
 
-                let mut frame_count = 0;
-                let mut first_frame = None;
+                        let audio_info = audio.buffer.info();
+                        let estimated_samples_per_frame =
+                            f64::from(audio_info.sample_rate) / f64::from(FPS);
+                        let samples = estimated_samples_per_frame.ceil() as usize;
 
-                loop {
-                    tokio::select! {
-                        result = ffmpeg_process.wait() => {
-                            match result {
-                                Err(e) => Err(ExportError::FFmpeg(e.to_string())),
-                                Ok(status) => {
-                                    if status.success() {
-                                        Ok(())
-                                    } else {
-                                        Err(ExportError::FFmpeg(
-                                            ffmpeg_process
-                                                .read_stderr()
-                                                .await
-                                                .unwrap_or_else(|_| "Failed to read FFmpegg error".to_string())
-                                        ))
-                                    }
-                                }
-                            }?;
-                        }
-                        frame = rx_image_data.recv()  => {
-                            match frame {
-                                Some(frame) => {
-                                    (self.on_progress)(frame_count);
-
-                                    if frame_count == 0 {
-                                        first_frame = Some(frame.clone());
-                                    }
-
-                                    if let Some(audio) = &mut audio {
-                                        if frame_count == 0 {
-                                            audio.buffer.set_playhead(0., project.timeline());
-                                        }
-
-                                        let audio_info = audio.buffer.info();
-                                        let estimated_samples_per_frame =
-                                            f64::from(audio_info.sample_rate) / f64::from(FPS);
-                                        let samples = estimated_samples_per_frame.ceil() as usize;
-
-                                        if let Some((_, frame_data)) =
-                                            audio.buffer.next_frame_data(samples, project.timeline())
-                                        {
-                                            let frame_samples = frame_data.to_vec();
-                                            audio.pipe_tx.send(frame_samples).await.unwrap();
-                                        }
-                                    }
-
-                                    video_tx.send(frame).await.unwrap();
-
-                                    frame_count += 1;
-                                }
-                                None => {
-                                    println!("All frames sent to FFmpeg");
-                                    break;
-                                }
-                            }
+                        if let Some((_, frame_data)) =
+                            audio.buffer.next_frame_data(samples, project.timeline())
+                        {
+                            let mut frame = audio_info.wrap_frame(
+                                &frame_data
+                                    .to_vec()
+                                    .chunks(8)
+                                    .flat_map(|v| {
+                                        (f64::from_le_bytes([
+                                            v[0], v[1], v[2], v[3], v[4], v[5], v[6], v[7],
+                                        ]) as f32)
+                                            .to_le_bytes()
+                                    })
+                                    .collect::<Vec<_>>(),
+                                0,
+                            );
+                            let pts = i64::from(frame_count) * i64::try_from(samples).unwrap();
+                            frame.set_pts(Some(pts));
+                            println!(
+                                "Export: Sending audio frame {} with PTS: {:?}, samples: {}",
+                                frame_count,
+                                frame.pts(),
+                                samples
+                            );
+                            encoder.queue_audio_frame(frame);
                         }
                     }
+
+                    println!(
+                        "Export: Processing frame {} (size: {}x{}, padded_bytes_per_row: {})",
+                        frame_count, frame.width, frame.height, frame.padded_bytes_per_row
+                    );
+
+                    let mut video_frame = VideoInfo::from_raw(
+                        RawVideoFormat::Rgba,
+                        self.output_size.0,
+                        self.output_size.1,
+                        30,
+                    )
+                    .wrap_frame(
+                        &frame.data,
+                        0,
+                        frame.padded_bytes_per_row as usize,
+                    );
+                    video_frame.set_pts(Some(frame_count as i64));
+
+                    println!(
+                        "Export: Sending frame {} to encoder (PTS: {:?})",
+                        frame_count,
+                        video_frame.pts()
+                    );
+
+                    encoder.queue_video_frame(video_frame);
+                    frame_count += 1;
                 }
 
-                ffmpeg_process.stop().await;
+                encoder.finish();
 
                 // Save the first frame as a screenshot and thumbnail
                 if let Some(frame) = first_frame {
@@ -492,18 +474,6 @@ where
                     rgb_img.save(&screenshot_path).unwrap_or_else(|e| {
                         eprintln!("Failed to save screenshot: {:?}", e);
                     });
-
-                    // // Create and save thumbnail
-                    // let thumbnail = image::imageops::resize(
-                    //     &rgb_img,
-                    //     100,
-                    //     100,
-                    //     image::imageops::FilterType::Lanczos3,
-                    // );
-                    // let thumbnail_path = screenshots_dir.join("thumbnail.png");
-                    // thumbnail.save(&thumbnail_path).unwrap_or_else(|e| {
-                    //     eprintln!("Failed to save thumbnail: {:?}", e);
-                    // });
                 } else {
                     eprintln!("No frames were processed, cannot save screenshot or thumbnail");
                 }
@@ -520,10 +490,11 @@ where
             tx_image_data,
             &self.meta,
             self.render_segments,
+            FPS,
         )
         .await?;
 
-        let output_path = ffmpeg_handle.await??;
+        let output_path = encoder_handle.await??;
 
         Ok(output_path)
     }
diff --git a/crates/flags/src/lib.rs b/crates/flags/src/lib.rs
index 1d398090..da74f9a8 100644
--- a/crates/flags/src/lib.rs
+++ b/crates/flags/src/lib.rs
@@ -8,7 +8,7 @@ pub struct Flags {
 }
 
 pub const FLAGS: Flags = Flags {
-    record_mouse: false, // cfg!(debug_assertions),
+    record_mouse: cfg!(debug_assertions),
     split: false,        // cfg!(debug_assertions),
     pause_resume: false, // cfg!(debug_assertions),
     zoom: cfg!(debug_assertions),
diff --git a/crates/gpu-converters/src/yuyv_rgba/shader.wgsl b/crates/gpu-converters/src/yuyv_rgba/shader.wgsl
new file mode 100644
index 00000000..378bf244
--- /dev/null
+++ b/crates/gpu-converters/src/yuyv_rgba/shader.wgsl
@@ -0,0 +1,57 @@
+@group(0) @binding(0)
+var yuyv_input: texture_2d<u32>;
+
+@group(0) @binding(1)
+var rgba_output: texture_storage_2d<rgba8unorm, write>;
+
+// We use 8x8 workgroups to cover the entire input texture
+@compute
+@workgroup_size(8, 8)
+fn main(@builtin(global_invocation_id) gid: vec3<u32>) {
+    let dims = textureDimensions(yuyv_input);
+    if (gid.x >= dims.x || gid.y >= dims.y) {
+        return;
+    }
+
+    // Each texel in Rgba8Uint has .r, .g, .b, .a (each 8 bits).
+    // In standard YUYV: R=Y0, G=U, B=Y1, A=V. 
+    // Some cameras mislabel and actually deliver YVYU or UYVY, so see below if color is off.
+
+    let packed = textureLoad(yuyv_input, gid.xy, 0);
+
+    // --- Standard “YUYV” interpretation (no offsets) ---
+    let y0 = f32(packed.r) / 255.0;
+    let v  = f32(packed.g) / 255.0;
+    let y1 = f32(packed.b) / 255.0;
+    let u  = f32(packed.a) / 255.0;
+
+    // If you still see green/magenta, try swapping U<->V here:
+    // let y0 = f32(packed.r) / 255.0;
+    // let v  = f32(packed.g) / 255.0; // swapped
+    // let y1 = f32(packed.b) / 255.0;
+    // let u  = f32(packed.a) / 255.0; // swapped
+
+    // ---- Full-Range YUV->RGB (0..255 for Y, U, V) ----
+    // R = Y + 1.402 * (V - 0.5)
+    // G = Y - 0.344136 * (U - 0.5) - 0.714136 * (V - 0.5)
+    // B = Y + 1.772 * (U - 0.5)
+    let r1 = clamp(y0 + 1.402 * (v - 0.5), 0.0, 1.0);
+    let g1 = clamp(y0
+        - 0.344136 * (u - 0.5)
+        - 0.714136 * (v - 0.5),
+        0.0, 1.0);
+    let b1 = clamp(y0 + 1.772 * (u - 0.5), 0.0, 1.0);
+
+    let r2 = clamp(y1 + 1.402 * (v - 0.5), 0.0, 1.0);
+    let g2 = clamp(y1
+        - 0.344136 * (u - 0.5)
+        - 0.714136 * (v - 0.5),
+        0.0, 1.0);
+    let b2 = clamp(y1 + 1.772 * (u - 0.5), 0.0, 1.0);
+
+    // Each texel stores two Y’s => two output RGBA pixels.
+    let out_coords = gid.xy * vec2<u32>(2, 1);
+
+    textureStore(rgba_output, out_coords, vec4<f32>(r1, g1, b1, 1.0));
+    textureStore(rgba_output, out_coords + vec2<u32>(1, 0), vec4<f32>(r2, g2, b2, 1.0));
+}
\ No newline at end of file
diff --git a/crates/media/Cargo.toml b/crates/media/Cargo.toml
index 85612a07..f707da41 100644
--- a/crates/media/Cargo.toml
+++ b/crates/media/Cargo.toml
@@ -7,7 +7,7 @@ rust-version = "1.80"
 
 [features]
 default = []
-debug-logging = []  # Feature flag to control debug logging
+debug-logging = [] # Feature flag to control debug logging
 
 [dependencies]
 cap-project = { path = "../project" }
@@ -15,6 +15,7 @@ cap-flags = { path = "../flags" }
 cap-gpu-converters = { path = "../gpu-converters" }
 cpal.workspace = true
 ffmpeg.workspace = true
+ffmpeg-sys-next.workspace = true
 flume.workspace = true
 indexmap = "2.5.0"
 nokhwa = { workspace = true, features = ["input-native", "serialize"] }
@@ -27,7 +28,7 @@ tempfile = "3.12.0"
 thiserror.workspace = true
 tracing = { version = "0.1", features = ["release_max_level_info"] }
 futures = "0.3.31"
-axum = "0.7.9"
+axum = { version = "0.7.9", features = ["macros", "ws"] }
 tokio.workspace = true
 
 [target.'cfg(target_os = "macos")'.dependencies]
diff --git a/crates/media/src/data/video.rs b/crates/media/src/data/video.rs
new file mode 100644
index 00000000..d58a4a5e
--- /dev/null
+++ b/crates/media/src/data/video.rs
@@ -0,0 +1,35 @@
+pub struct FFVideo(ffmpeg::frame::Video);
+
+impl FFVideo {
+    pub fn new(format: ffmpeg::format::Pixel, width: u32, height: u32) -> Self {
+        Self(ffmpeg::frame::Video::new(format, width, height))
+    }
+
+    pub fn data(&self, index: usize) -> &[u8] {
+        self.0.data(index)
+    }
+
+    pub fn data_mut(&mut self, index: usize) -> &mut [u8] {
+        self.0.data_mut(index)
+    }
+
+    pub fn stride(&self, index: usize) -> usize {
+        self.0.stride(index)
+    }
+
+    pub fn as_mut_ptr(&mut self) -> *mut ffmpeg_sys_next::AVFrame {
+        self.0.as_mut_ptr()
+    }
+
+    pub fn as_ptr(&self) -> *const ffmpeg_sys_next::AVFrame {
+        self.0.as_ptr()
+    }
+
+    pub fn convert_with(
+        &mut self,
+        context: &mut ffmpeg::software::scaling::Context,
+        output: &mut FFVideo,
+    ) -> Result<(), ffmpeg::Error> {
+        unsafe { context.run(&self.0, &mut output.0) }
+    }
+}
diff --git a/crates/media/src/encoders/h264.rs b/crates/media/src/encoders/h264.rs
index 65964572..2b09ebb6 100644
--- a/crates/media/src/encoders/h264.rs
+++ b/crates/media/src/encoders/h264.rs
@@ -7,8 +7,9 @@ use ffmpeg::{
     codec::{codec::Codec, context, encoder},
     format::{self},
     threading::Config,
-    Dictionary,
+    Dictionary, Rescale,
 };
+use ffmpeg_sys_next as sys;
 
 use super::Output;
 
@@ -18,6 +19,7 @@ pub struct H264Encoder {
     output_ctx: format::context::Output,
     last_pts: Option<i64>,
     config: VideoInfo,
+    frame_count: i64,
 }
 
 impl H264Encoder {
@@ -52,8 +54,8 @@ impl H264Encoder {
 
         let mut output_stream = output_ctx.add_stream(codec)?;
         output_stream.set_time_base(config.frame_rate.invert());
+        output_stream.set_rate(config.frame_rate);
         output_stream.set_parameters(&video_encoder);
-        // TODO: Move this to after pipeline start maybe?
         output_ctx.write_header()?;
 
         Ok(Self {
@@ -62,24 +64,25 @@ impl H264Encoder {
             output_ctx,
             last_pts: None,
             config,
+            frame_count: 0,
         })
     }
 
-    fn queue_frame(&mut self, frame: FFVideo) {
+    fn queue_frame(&mut self, mut frame: FFVideo) {
+        frame.set_pts(Some(self.frame_count));
+        self.frame_count += 1;
         self.encoder.send_frame(&frame).unwrap();
     }
 
     fn process_frame(&mut self) {
         let mut encoded_packet = FFPacket::empty();
 
-        // TODO: Handle errors that are not EGAIN/"needs more data"
         while self.encoder.receive_packet(&mut encoded_packet).is_ok() {
             encoded_packet.set_stream(0);
             encoded_packet.rescale_ts(
                 self.encoder.time_base(),
                 self.output_ctx.stream(0).unwrap().time_base(),
             );
-            // TODO: Possibly move writing to disk to its own file, to increase encoding throughput?
             encoded_packet
                 .write_interleaved(&mut self.output_ctx)
                 .unwrap();
@@ -89,6 +92,23 @@ impl H264Encoder {
     fn finish(&mut self) {
         self.encoder.send_eof().unwrap();
         self.process_frame();
+
+        // Set the duration in the output container's stream
+        if let Some(stream) = self.output_ctx.stream(0) {
+            let duration = self
+                .frame_count
+                .rescale(self.config.frame_rate.invert(), stream.time_base());
+            unsafe {
+                let stream_ptr = stream.as_ptr() as *mut sys::AVStream;
+                (*stream_ptr).duration = duration;
+                (*stream_ptr).time_base = stream.time_base().into();
+                (*stream_ptr).nb_frames = self.frame_count;
+                (*stream_ptr).start_time = 0;
+                (*stream_ptr).r_frame_rate = self.config.frame_rate.into();
+                (*stream_ptr).avg_frame_rate = self.config.frame_rate.into();
+            }
+        }
+
         self.output_ctx.write_trailer().unwrap();
     }
 }
diff --git a/crates/media/src/encoders/mp4.rs b/crates/media/src/encoders/mp4.rs
index d6034b37..19460d3a 100644
--- a/crates/media/src/encoders/mp4.rs
+++ b/crates/media/src/encoders/mp4.rs
@@ -7,11 +7,12 @@ use crate::{
 };
 use ffmpeg::{
     codec::{codec::Codec, context, encoder},
-    format::{self},
+    format::{self, sample::Sample},
     software,
     threading::Config,
-    Dictionary,
+    Dictionary, Rescale,
 };
+use ffmpeg_sys_next as sys;
 
 use super::Output;
 
@@ -25,6 +26,7 @@ struct Audio {
 struct Video {
     encoder: ffmpeg::encoder::Video,
     config: VideoInfo,
+    frame_count: i64,
 }
 
 pub struct MP4Encoder {
@@ -57,7 +59,7 @@ impl MP4Encoder {
         video_enc.set_width(video_config.width);
         video_enc.set_height(video_config.height);
         video_enc.set_format(video_config.pixel_format);
-        video_enc.set_time_base(video_config.frame_rate.invert());
+        video_enc.set_time_base(FFRational(1, video_config.frame_rate.numerator()));
         video_enc.set_frame_rate(Some(video_config.frame_rate));
 
         if video_codec.name() == "h264_videotoolbox" {
@@ -73,6 +75,7 @@ impl MP4Encoder {
         let video = Video {
             encoder: video_encoder,
             config: video_config,
+            frame_count: 0,
         };
 
         let audio = if let Some(audio_config) = audio_config {
@@ -97,17 +100,17 @@ impl MP4Encoder {
                 )));
             }
 
-            let output_format = ffmpeg::format::Sample::F32(format::sample::Type::Packed);
+            let output_format = ffmpeg::format::Sample::F32(format::sample::Type::Planar);
 
             audio_enc.set_bit_rate(Self::AUDIO_BITRATE);
             audio_enc.set_rate(audio_config.rate());
             audio_enc.set_format(output_format);
             audio_enc.set_channel_layout(audio_config.channel_layout());
-            audio_enc.set_time_base(audio_config.time_base);
+            audio_enc.set_time_base(FFRational(1, audio_config.rate()));
 
             let resampler = software::resampler(
                 (
-                    audio_config.sample_format,
+                    Sample::F64(format::sample::Type::Packed),
                     audio_config.channel_layout(),
                     audio_config.sample_rate,
                 ),
@@ -125,7 +128,7 @@ impl MP4Encoder {
 
         // Setup output streams
         let mut video_stream = output_ctx.add_stream(video_codec)?;
-        video_stream.set_time_base(video_config.frame_rate.invert());
+        video_stream.set_time_base(FFRational(1, video_config.frame_rate.numerator()));
         video_stream.set_parameters(&video.encoder);
 
         let audio = if let Some((encoder, codec, input_config, resampler)) = audio {
@@ -159,7 +162,12 @@ impl MP4Encoder {
         RawVideoFormat::YUYV420
     }
 
-    pub fn queue_video_frame(&mut self, frame: FFVideo) {
+    pub fn queue_video_frame(&mut self, mut frame: FFVideo) {
+        println!(
+            "MP4Encoder: Processing frame {} (input PTS: {:?})",
+            self.video.frame_count,
+            frame.pts()
+        );
         let mut scaler = ffmpeg::software::converter(
             (frame.width(), frame.height()),
             frame.format(),
@@ -168,29 +176,75 @@ impl MP4Encoder {
         .unwrap();
 
         let mut output = FFVideo::empty();
-
         scaler.run(&frame, &mut output).unwrap();
 
-        output.set_pts(frame.pts());
+        // Set PTS in microseconds (1/1_000_000 second units)
+        let pts = frame.pts().unwrap_or_else(|| self.video.frame_count);
+        output.set_pts(Some(pts));
+        println!(
+            "MP4Encoder: Setting frame {} PTS to {}",
+            self.video.frame_count, pts
+        );
+        self.video.frame_count += 1;
 
         self.video.encoder.send_frame(&output).unwrap();
         self.process_video_packets();
     }
 
     pub fn queue_audio_frame(&mut self, frame: FFAudio) {
-        if let Some(buffer) = self.audio.as_mut().map(|a| &mut a.buffer) {
-            buffer.consume(frame);
-        }
+        let Some(audio) = &mut self.audio else {
+            return;
+        };
+
+        println!(
+            "MP4Encoder: Queueing audio frame with PTS: {:?}, samples: {}",
+            frame.pts(),
+            frame.samples()
+        );
+
+        audio.buffer.consume(frame);
+
+        // Process all buffered frames
+        loop {
+            let Some(buffered_frame) = audio.buffer.next_frame() else {
+                break;
+            };
 
-        while let Some((buffered_frame, audio)) = self
-            .audio
-            .as_mut()
-            .and_then(|a| Some((a.buffer.next_frame()?, a)))
-        {
             let mut output = ffmpeg::util::frame::Audio::empty();
             audio.resampler.run(&buffered_frame, &mut output).unwrap();
+
+            // Preserve PTS from input frame
+            if let Some(pts) = buffered_frame.pts() {
+                output.set_pts(Some(pts));
+            }
+
+            println!(
+                "MP4Encoder: Sending audio frame with PTS: {:?}, samples: {}",
+                output.pts(),
+                output.samples()
+            );
+
+            // Send frame to encoder
             audio.encoder.send_frame(&output).unwrap();
-            self.process_audio_packets();
+
+            // Process any encoded packets
+            let mut encoded_packet = FFPacket::empty();
+            while audio.encoder.receive_packet(&mut encoded_packet).is_ok() {
+                println!(
+                    "MP4Encoder: Writing audio packet with PTS: {:?}, size: {}",
+                    encoded_packet.pts(),
+                    encoded_packet.size()
+                );
+
+                encoded_packet.set_stream(1);
+                encoded_packet.rescale_ts(
+                    audio.encoder.time_base(),
+                    self.output_ctx.stream(1).unwrap().time_base(),
+                );
+                encoded_packet
+                    .write_interleaved(&mut self.output_ctx)
+                    .unwrap();
+            }
         }
     }
 
@@ -203,11 +257,21 @@ impl MP4Encoder {
             .receive_packet(&mut encoded_packet)
             .is_ok()
         {
+            println!(
+                "MP4Encoder: Got encoded packet with PTS: {:?}, DTS: {:?}",
+                encoded_packet.pts(),
+                encoded_packet.dts()
+            );
             encoded_packet.set_stream(0); // Video is stream 0
             encoded_packet.rescale_ts(
                 self.video.encoder.time_base(),
                 self.output_ctx.stream(0).unwrap().time_base(),
             );
+            println!(
+                "MP4Encoder: Writing packet with rescaled PTS: {:?}, DTS: {:?}",
+                encoded_packet.pts(),
+                encoded_packet.dts()
+            );
             encoded_packet
                 .write_interleaved(&mut self.output_ctx)
                 .unwrap();
@@ -215,30 +279,84 @@ impl MP4Encoder {
     }
 
     fn process_audio_packets(&mut self) {
-        let mut packet = FFPacket::empty();
-
         if let Some(audio) = self.audio.as_mut() {
-            while audio.encoder.receive_packet(&mut packet).is_ok() {
-                packet.set_stream(1); // Audio is stream 1
-                packet.set_time_base(self.output_ctx.stream(1).unwrap().time_base());
-                packet.rescale_ts(
-                    packet.time_base(),
+            let mut encoded_packet = FFPacket::empty();
+
+            while audio.encoder.receive_packet(&mut encoded_packet).is_ok() {
+                println!(
+                    "MP4Encoder: Writing audio packet with PTS: {:?}, size: {}",
+                    encoded_packet.pts(),
+                    encoded_packet.size()
+                );
+
+                // Set stream index for audio (stream 1)
+                encoded_packet.set_stream(1);
+
+                // Rescale timestamps to output timebase
+                encoded_packet.rescale_ts(
+                    audio.encoder.time_base(),
                     self.output_ctx.stream(1).unwrap().time_base(),
                 );
-                packet.write_interleaved(&mut self.output_ctx).unwrap();
+
+                encoded_packet
+                    .write_interleaved(&mut self.output_ctx)
+                    .unwrap();
             }
         }
     }
 
     pub fn finish(&mut self) {
+        println!("MP4Encoder: Finishing encoding");
+
+        // Flush video encoder
         self.video.encoder.send_eof().unwrap();
         self.process_video_packets();
 
-        if let Some(audio) = self.audio.as_mut() {
+        // Flush audio encoder
+        if let Some(audio) = &mut self.audio {
+            println!("MP4Encoder: Flushing audio encoder");
+
+            // Process any remaining frames in the buffer
+            while let Some(buffered_frame) = audio.buffer.next_frame() {
+                let mut output = ffmpeg::util::frame::Audio::empty();
+                audio.resampler.run(&buffered_frame, &mut output).unwrap();
+
+                if let Some(pts) = buffered_frame.pts() {
+                    output.set_pts(Some(pts));
+                }
+
+                audio.encoder.send_frame(&output).unwrap();
+
+                // Process packets after each frame
+                let mut encoded_packet = FFPacket::empty();
+                while audio.encoder.receive_packet(&mut encoded_packet).is_ok() {
+                    encoded_packet.set_stream(1);
+                    encoded_packet.rescale_ts(
+                        audio.encoder.time_base(),
+                        self.output_ctx.stream(1).unwrap().time_base(),
+                    );
+                    encoded_packet
+                        .write_interleaved(&mut self.output_ctx)
+                        .unwrap();
+                }
+            }
+
+            // Send EOF to audio encoder and process final packets
             audio.encoder.send_eof().unwrap();
-            self.process_audio_packets();
+            let mut encoded_packet = FFPacket::empty();
+            while audio.encoder.receive_packet(&mut encoded_packet).is_ok() {
+                encoded_packet.set_stream(1);
+                encoded_packet.rescale_ts(
+                    audio.encoder.time_base(),
+                    self.output_ctx.stream(1).unwrap().time_base(),
+                );
+                encoded_packet
+                    .write_interleaved(&mut self.output_ctx)
+                    .unwrap();
+            }
         }
 
+        println!("MP4Encoder: Writing trailer");
         self.output_ctx.write_trailer().unwrap();
     }
 }
diff --git a/crates/media/src/feeds/camera.rs b/crates/media/src/feeds/camera.rs
index e790d76c..dff46e90 100644
--- a/crates/media/src/feeds/camera.rs
+++ b/crates/media/src/feeds/camera.rs
@@ -84,7 +84,7 @@ impl CameraFeed {
                 .into_iter()
                 .map(|i| i.human_name().to_string())
                 .collect::<Vec<String>>(),
-            Err(_) => Vec::new()
+            Err(_) => Vec::new(),
         }
     }
 
@@ -144,7 +144,7 @@ fn create_camera(info: &CameraInfo) -> Result<Camera, MediaError> {
         RequestedFormatType::AbsoluteHighestFrameRate,
         &[FrameFormat::YUYV],
     );
-    
+
     #[cfg(feature = "debug-logging")]
     trace!("Requested camera format: {:?}", format);
 
@@ -160,10 +160,10 @@ fn create_camera(info: &CameraInfo) -> Result<Camera, MediaError> {
     }
 
     let camera = Camera::new(index, format)?;
-    
+
     #[cfg(feature = "debug-logging")]
     debug!("Created camera with format: {:?}", camera.camera_format());
-    
+
     Ok(camera)
 }
 
@@ -226,7 +226,7 @@ fn run_camera_feed(
     loop {
         match control.try_recv() {
             Err(TryRecvError::Disconnected) => break,
-            Err(TryRecvError::Empty) => {},
+            Err(TryRecvError::Empty) => {}
             Ok(CameraControl::Shutdown) => break,
             Ok(CameraControl::AttachRawConsumer(rgba_sender)) => {
                 maybe_raw_data = Some(rgba_sender);
@@ -364,18 +364,19 @@ impl FrameConverter {
         let context = ffmpeg::software::converter(
             (video_info.width, video_info.height),
             if camera_format.format() == FrameFormat::YUYV {
-                ffmpeg::format::Pixel::YUYV422
+                ffmpeg::format::Pixel::UYVY422
             } else {
                 video_info.pixel_format
             },
             ffmpeg::format::Pixel::RGBA,
-        ).unwrap();
+        )
+        .unwrap();
 
         Self {
             video_info,
             context,
             format: camera_format.format(),
-            hw_converter: None,  // Don't use hardware converters
+            hw_converter: None, // Don't use hardware converters
         }
     }
 
@@ -383,38 +384,55 @@ impl FrameConverter {
         let resolution = buffer.resolution();
 
         match self.format {
-            FrameFormat::YUYV => {
-                self.convert_with_ffmpeg(buffer, resolution)
-            }
-            _ => {
-                match &self.hw_converter {
-                    Some(HwConverter::NV12(converter)) => {
-                        converter.convert(
-                            NV12Input::from_buffer(buffer.buffer(), resolution.width(), resolution.height()),
-                            resolution.width(),
-                            resolution.height(),
-                        )
-                    }
-                    _ => {
-                        self.convert_with_ffmpeg(buffer, resolution)
-                    }
-                }
-            }
+            FrameFormat::YUYV => self.convert_with_ffmpeg(buffer, resolution),
+            _ => match &self.hw_converter {
+                Some(HwConverter::NV12(converter)) => converter.convert(
+                    NV12Input::from_buffer(
+                        buffer.buffer(),
+                        resolution.width(),
+                        resolution.height(),
+                    ),
+                    resolution.width(),
+                    resolution.height(),
+                ),
+                _ => self.convert_with_ffmpeg(buffer, resolution),
+            },
         }
     }
 
     fn convert_with_ffmpeg(&mut self, buffer: &nokhwa::Buffer, resolution: Resolution) -> Vec<u8> {
         if self.format == FrameFormat::YUYV {
             // For YUYV, we need to handle the conversion differently
-            let stride = resolution.width() as usize * 2;  // YUYV uses 2 bytes per pixel
-            
-            // Create input frame with YUYV format
-            let mut input_frame = FFVideo::new(ffmpeg::format::Pixel::YUYV422, resolution.width(), resolution.height());
-            input_frame.data_mut(0).copy_from_slice(buffer.buffer());
-            
-            // Convert directly to RGBA
-            let mut rgba_frame = FFVideo::new(ffmpeg::format::Pixel::RGBA, resolution.width(), resolution.height());
-            
+            let stride = resolution.width() as usize * 2; // YUYV uses 2 bytes per pixel
+            let src = buffer.buffer();
+
+            // Create input frame with YUYV format and copy data
+            let mut input_frame = FFVideo::new(
+                ffmpeg::format::Pixel::UYVY422,
+                resolution.width(),
+                resolution.height(),
+            );
+
+            // Copy data line by line
+            {
+                let dst_stride = input_frame.stride(0);
+                let dst = input_frame.data_mut(0);
+                for y in 0..resolution.height() as usize {
+                    let src_offset = y * stride;
+                    let dst_offset = y * dst_stride;
+                    dst[dst_offset..dst_offset + stride]
+                        .copy_from_slice(&src[src_offset..src_offset + stride]);
+                }
+            }
+
+            // Create output frame
+            let mut rgba_frame = FFVideo::new(
+                ffmpeg::format::Pixel::RGBA,
+                resolution.width(),
+                resolution.height(),
+            );
+
+            // Convert the frame
             if self.context.run(&input_frame, &mut rgba_frame).is_ok() {
                 rgba_frame.data(0).to_vec()
             } else {
@@ -422,10 +440,50 @@ impl FrameConverter {
             }
         } else {
             // For other formats, use the normal conversion path
-            let stride = resolution.width() as usize * 4;  // RGBA uses 4 bytes per pixel
-            let input_frame = self.video_info.wrap_frame(buffer.buffer(), 0, stride);
-            
-            let mut rgba_frame = FFVideo::empty();
+            let stride = match self.format {
+                FrameFormat::NV12 => resolution.width() as usize,
+                FrameFormat::BGRA => resolution.width() as usize * 4,
+                FrameFormat::MJPEG => resolution.width() as usize * 4,
+                FrameFormat::GRAY => resolution.width() as usize,
+                FrameFormat::RAWRGB => resolution.width() as usize * 3,
+                _ => buffer.buffer_bytes().len() / resolution.height() as usize,
+            };
+
+            // Create input frame and copy data
+            let mut input_frame = FFVideo::new(
+                match self.format {
+                    FrameFormat::NV12 => ffmpeg::format::Pixel::NV12,
+                    FrameFormat::BGRA => ffmpeg::format::Pixel::BGRA,
+                    FrameFormat::MJPEG => ffmpeg::format::Pixel::RGBA,
+                    FrameFormat::GRAY => ffmpeg::format::Pixel::GRAY8,
+                    FrameFormat::RAWRGB => ffmpeg::format::Pixel::RGB24,
+                    _ => ffmpeg::format::Pixel::RGBA,
+                },
+                resolution.width(),
+                resolution.height(),
+            );
+
+            // Copy data line by line
+            {
+                let dst_stride = input_frame.stride(0);
+                let dst = input_frame.data_mut(0);
+                let src = buffer.buffer();
+                for y in 0..resolution.height() as usize {
+                    let src_offset = y * stride;
+                    let dst_offset = y * dst_stride;
+                    dst[dst_offset..dst_offset + stride]
+                        .copy_from_slice(&src[src_offset..src_offset + stride]);
+                }
+            }
+
+            // Create output frame
+            let mut rgba_frame = FFVideo::new(
+                ffmpeg::format::Pixel::RGBA,
+                resolution.width(),
+                resolution.height(),
+            );
+
+            // Convert the frame
             if self.context.run(&input_frame, &mut rgba_frame).is_ok() {
                 rgba_frame.data(0).to_vec()
             } else {
@@ -436,31 +494,71 @@ impl FrameConverter {
 
     fn raw(&mut self, buffer: &nokhwa::Buffer) -> FFVideo {
         let resolution = buffer.resolution();
-        
+
         if self.format == FrameFormat::YUYV {
             // For YUYV, we need to handle the conversion differently
-            let stride = resolution.width() as usize * 2;  // YUYV uses 2 bytes per pixel
-            
-            // Create input frame with YUYV format
-            let mut input_frame = FFVideo::new(ffmpeg::format::Pixel::YUYV422, resolution.width(), resolution.height());
-            input_frame.data_mut(0).copy_from_slice(buffer.buffer());
+            let stride = resolution.width() as usize * 2; // YUYV uses 2 bytes per pixel
+            let src = buffer.buffer();
+
+            // Create input frame with YUYV format and copy data
+            let mut input_frame = FFVideo::new(
+                ffmpeg::format::Pixel::UYVY422,
+                resolution.width(),
+                resolution.height(),
+            );
+
+            // Copy data line by line
+            {
+                let dst_stride = input_frame.stride(0);
+                let dst = input_frame.data_mut(0);
+                for y in 0..resolution.height() as usize {
+                    let src_offset = y * stride;
+                    let dst_offset = y * dst_stride;
+                    dst[dst_offset..dst_offset + stride]
+                        .copy_from_slice(&src[src_offset..src_offset + stride]);
+                }
+            }
+
             input_frame
         } else {
             // For other formats, use the normal conversion path
             let stride = match self.format {
-                FrameFormat::NV12 => resolution.width() as usize, // 1 byte per pixel for Y plane
-                FrameFormat::BGRA => resolution.width() as usize * 4, // 4 bytes per pixel
-                FrameFormat::MJPEG => resolution.width() as usize * 4, // 4 bytes per pixel
-                FrameFormat::GRAY => resolution.width() as usize, // 1 byte per pixel
-                FrameFormat::RAWRGB => resolution.width() as usize * 3, // 3 bytes per pixel
+                FrameFormat::NV12 => resolution.width() as usize,
+                FrameFormat::BGRA => resolution.width() as usize * 4,
+                FrameFormat::MJPEG => resolution.width() as usize * 4,
+                FrameFormat::GRAY => resolution.width() as usize,
+                FrameFormat::RAWRGB => resolution.width() as usize * 3,
                 _ => buffer.buffer_bytes().len() / resolution.height() as usize,
             };
 
-            self.video_info.wrap_frame(
-                buffer.buffer(),
-                0,
-                stride,
-            )
+            // Create input frame and copy data
+            let mut input_frame = FFVideo::new(
+                match self.format {
+                    FrameFormat::NV12 => ffmpeg::format::Pixel::NV12,
+                    FrameFormat::BGRA => ffmpeg::format::Pixel::BGRA,
+                    FrameFormat::MJPEG => ffmpeg::format::Pixel::RGBA,
+                    FrameFormat::GRAY => ffmpeg::format::Pixel::GRAY8,
+                    FrameFormat::RAWRGB => ffmpeg::format::Pixel::RGB24,
+                    _ => ffmpeg::format::Pixel::RGBA,
+                },
+                resolution.width(),
+                resolution.height(),
+            );
+
+            // Copy data line by line
+            {
+                let dst_stride = input_frame.stride(0);
+                let dst = input_frame.data_mut(0);
+                let src = buffer.buffer();
+                for y in 0..resolution.height() as usize {
+                    let src_offset = y * stride;
+                    let dst_offset = y * dst_stride;
+                    dst[dst_offset..dst_offset + stride]
+                        .copy_from_slice(&src[src_offset..src_offset + stride]);
+                }
+            }
+
+            input_frame
         }
     }
 }
diff --git a/crates/media/src/frame_ws.rs b/crates/media/src/frame_ws.rs
index 31cb7ce0..3a732bcf 100644
--- a/crates/media/src/frame_ws.rs
+++ b/crates/media/src/frame_ws.rs
@@ -23,6 +23,7 @@ pub async fn create_frame_ws(frame_rx: Receiver<WSFrame>) -> (u16, mpsc::Sender<
 
     type RouterState = Arc<Mutex<Receiver<WSFrame>>>;
 
+    #[axum::debug_handler]
     async fn ws_handler(
         ws: WebSocketUpgrade,
         State(state): State<RouterState>,
diff --git a/crates/media/src/pipeline/audio_buffer.rs b/crates/media/src/pipeline/audio_buffer.rs
index 54d65f8c..d698a16f 100644
--- a/crates/media/src/pipeline/audio_buffer.rs
+++ b/crates/media/src/pipeline/audio_buffer.rs
@@ -4,6 +4,7 @@ use ffmpeg::encoder;
 pub use ffmpeg::util::frame::Audio as FFAudio;
 
 use crate::data::{AudioInfo, PlanarData};
+use cap_project::TimelineConfiguration;
 
 #[derive(Debug)]
 pub struct AudioBuffer {
@@ -35,14 +36,10 @@ impl AudioBuffer {
     }
 
     pub fn consume(&mut self, frame: FFAudio) {
-        // TODO: Set PTS from frame with ffmpeg::sys::av_rescale_q??
-        // if let Some(pts) = frame.pts() {
-        //     self.current_pts = pts;
-        // }
+        if let Some(pts) = frame.pts() {
+            self.current_pts = pts;
+        }
         for channel in 0..self.config.channels {
-            // if self.current_pts == 0 {
-            //     println!("Data in channel {channel}: {:?}", frame.data(channel));
-            // }
             self.data[channel].extend(frame.plane_data(channel));
         }
     }
@@ -67,7 +64,33 @@ impl AudioBuffer {
             }
         }
 
-        self.current_pts += i64::try_from(frame_size / self.config.sample_size()).unwrap();
+        self.current_pts += i64::try_from(self.frame_size).unwrap();
         Some(frame)
     }
+
+    pub fn next_frame_data(
+        &mut self,
+        samples: usize,
+        timeline: Option<&TimelineConfiguration>,
+    ) -> Option<(f64, Vec<u8>)> {
+        if self.is_empty() {
+            return None;
+        }
+
+        let frame_size = samples * self.config.sample_size();
+
+        if self.len() < frame_size {
+            return None;
+        }
+
+        let mut frame_data = Vec::with_capacity(frame_size * self.config.channels);
+        for channel in 0..self.config.channels {
+            frame_data.extend(self.data[channel].drain(0..frame_size));
+        }
+
+        let current_time = self.current_pts as f64 / f64::from(self.config.sample_rate);
+        self.current_pts += i64::try_from(samples).unwrap();
+
+        Some((current_time, frame_data))
+    }
 }
diff --git a/crates/media/src/sources/screen_capture.rs b/crates/media/src/sources/screen_capture.rs
index d3d5f8ab..d29cb84e 100644
--- a/crates/media/src/sources/screen_capture.rs
+++ b/crates/media/src/sources/screen_capture.rs
@@ -1,7 +1,9 @@
 use cap_flags::FLAGS;
 use flume::Sender;
 use scap::{
-    capturer::{get_output_frame_size, Area, Capturer, Options, Point, Resolution, Size},
+    capturer::{
+        get_output_frame_size, Area, Capturer, Options, Point, Resolution as ScapResolution, Size,
+    },
     frame::{Frame, FrameType},
     Target,
 };
@@ -13,6 +15,7 @@ use crate::{
     data::{FFVideo, RawVideoFormat, VideoInfo},
     pipeline::{clock::*, control::Control, task::PipelineSourceTask},
     platform::{self, Bounds, Window},
+    MediaError,
 };
 
 static EXCLUDED_WINDOWS: [&str; 4] = [
@@ -58,52 +61,62 @@ impl PartialEq<Target> for ScreenCaptureTarget {
     }
 }
 
-pub struct ScreenCaptureSource<T> {
+#[derive(Debug)]
+pub struct ScreenCaptureSource<TCaptureFormat> {
     target: ScreenCaptureTarget,
+    output_resolution: Option<ScapResolution>,
+    output_type: Option<FrameType>,
     fps: u32,
-    resolution: Resolution,
     video_info: VideoInfo,
-    phantom: std::marker::PhantomData<T>,
+    _phantom: std::marker::PhantomData<TCaptureFormat>,
 }
 
-impl<T> Clone for ScreenCaptureSource<T> {
+impl<TCaptureFormat> Clone for ScreenCaptureSource<TCaptureFormat> {
     fn clone(&self) -> Self {
         Self {
             target: self.target.clone(),
+            output_resolution: self.output_resolution,
+            output_type: self.output_type,
             fps: self.fps,
-            resolution: self.resolution,
-            video_info: self.video_info,
-            phantom: Default::default(),
+            video_info: self.video_info.clone(),
+            _phantom: std::marker::PhantomData,
         }
     }
 }
 
-unsafe impl<T> Send for ScreenCaptureSource<T> {}
-unsafe impl<T> Sync for ScreenCaptureSource<T> {}
-
-impl<T> ScreenCaptureSource<T> {
-    pub const DEFAULT_FPS: u32 = 30;
-
+impl<TCaptureFormat> ScreenCaptureSource<TCaptureFormat> {
     pub fn init(
-        capture_target: &ScreenCaptureTarget,
-        fps: Option<u32>,
-        resolution: Option<Resolution>,
+        target: &ScreenCaptureTarget,
+        output_resolution: Option<cap_project::Resolution>,
+        output_type: Option<FrameType>,
+        fps: u32,
     ) -> Self {
-        let output_resolution = resolution.unwrap_or(Resolution::Captured);
-        let fps = fps.unwrap_or(Self::DEFAULT_FPS);
-
         let mut this = Self {
-            target: capture_target.clone(),
+            target: target.clone(),
+            output_resolution: output_resolution.map(|r| {
+                // Choose the closest resolution based on height
+                if r.height <= 480 {
+                    ScapResolution::_480p
+                } else if r.height <= 720 {
+                    ScapResolution::_720p
+                } else if r.height <= 1080 {
+                    ScapResolution::_1080p
+                } else if r.height <= 1440 {
+                    ScapResolution::_1440p
+                } else if r.height <= 2160 {
+                    ScapResolution::_2160p
+                } else {
+                    ScapResolution::_4320p
+                }
+            }),
+            output_type,
             fps,
-            resolution: output_resolution,
             video_info: VideoInfo::from_raw(RawVideoFormat::Bgra, 0, 0, fps),
-            phantom: Default::default(),
+            _phantom: std::marker::PhantomData,
         };
 
         let options = this.create_options();
-
         let [frame_width, frame_height] = get_output_frame_size(&options);
-
         this.video_info = VideoInfo::from_raw(RawVideoFormat::Bgra, frame_width, frame_height, fps);
 
         this
@@ -145,7 +158,7 @@ impl<T> ScreenCaptureSource<T> {
         };
 
         let target = match &self.target {
-            ScreenCaptureTarget::Window(w) => None,
+            ScreenCaptureTarget::Window(_) => None,
             ScreenCaptureTarget::Screen(capture_screen) => targets
                 .iter()
                 .find(|t| match t {
@@ -157,18 +170,13 @@ impl<T> ScreenCaptureSource<T> {
 
         Options {
             fps: self.fps,
-            show_cursor: !FLAGS.record_mouse,
+            show_cursor: FLAGS.record_mouse,
             show_highlight: true,
-            excluded_targets: Some(excluded_targets),
-            output_type: if cfg!(windows) {
-                FrameType::BGRAFrame
-            } else {
-                FrameType::YUVFrame
-            },
-            output_resolution: self.resolution,
-            crop_area,
             target,
-            ..Default::default()
+            crop_area,
+            output_type: self.output_type.unwrap_or(FrameType::YUVFrame),
+            output_resolution: self.output_resolution.unwrap_or(ScapResolution::Captured),
+            excluded_targets: Some(excluded_targets),
         }
     }
 
@@ -256,7 +264,17 @@ impl PipelineSourceTask for ScreenCaptureSource<AVFrameCapture> {
             ScreenCaptureTarget::Window(window) => Some(window.id),
             _ => None,
         };
-        let mut capturer = Capturer::new(dbg!(options));
+        let mut capturer = match Capturer::build(dbg!(options)) {
+            Ok(capturer) => capturer,
+            Err(e) => {
+                let error = format!("Failed to build capturer: {e}");
+                eprintln!("{}", error);
+                ready_signal
+                    .send(Err(MediaError::Any("Failed to build capturer")))
+                    .unwrap();
+                return;
+            }
+        };
         let mut capturing = false;
         ready_signal.send(Ok(())).unwrap();
 
@@ -389,7 +407,17 @@ impl PipelineSourceTask for ScreenCaptureSource<CMSampleBufferCapture> {
             ScreenCaptureTarget::Window(window) => Some(window.id),
             _ => None,
         };
-        let mut capturer = Capturer::new(dbg!(self.create_options()));
+        let mut capturer = match Capturer::build(dbg!(self.create_options())) {
+            Ok(capturer) => capturer,
+            Err(e) => {
+                let error = format!("Failed to build capturer: {e}");
+                eprintln!("{}", error);
+                ready_signal
+                    .send(Err(MediaError::Any("Failed to build capturer")))
+                    .unwrap();
+                return;
+            }
+        };
         let mut capturing = false;
         ready_signal.send(Ok(())).ok();
 
diff --git a/crates/project/Cargo.toml b/crates/project/Cargo.toml
index 125233e4..1f1ec462 100644
--- a/crates/project/Cargo.toml
+++ b/crates/project/Cargo.toml
@@ -5,6 +5,8 @@ edition = "2021"
 
 [dependencies]
 specta = { workspace = true, features = ["derive"] }
-serde = { version = "1.0.209", features = ["derive"] }
+serde = { version = "1", features = ["derive"] }
 serde_json = "1.0.127"
 either = "1.13.0"
+tauri = { workspace = true }
+tauri-plugin-store = "2.0.0-rc.4"
diff --git a/crates/project/src/lib.rs b/crates/project/src/lib.rs
index b87168f0..1438e19d 100644
--- a/crates/project/src/lib.rs
+++ b/crates/project/src/lib.rs
@@ -5,3 +5,65 @@ mod meta;
 pub use configuration::*;
 pub use cursor::*;
 pub use meta::*;
+
+use serde::{Deserialize, Serialize};
+use specta::Type;
+use tauri::AppHandle;
+use tauri_plugin_store::StoreExt;
+
+#[derive(Debug, Clone, Serialize, Deserialize, Type)]
+#[serde(rename_all = "camelCase")]
+pub struct RecordingConfig {
+    pub fps: u32,
+    pub resolution: Resolution,
+}
+
+#[derive(Debug, Clone, Serialize, Deserialize, Type)]
+pub struct Resolution {
+    pub width: u32,
+    pub height: u32,
+}
+
+impl Default for RecordingConfig {
+    fn default() -> Self {
+        Self {
+            fps: 30,
+            resolution: Resolution {
+                width: 1920,
+                height: 1080,
+            },
+        }
+    }
+}
+
+#[derive(Debug, Clone, Serialize, Deserialize, Type)]
+pub struct GeneralSettingsStore {
+    #[serde(default)]
+    pub recording_config: Option<RecordingConfig>,
+}
+
+impl GeneralSettingsStore {
+    pub fn get(app: &AppHandle) -> Result<Option<Self>, String> {
+        match app.get_store("store").map(|s| s.get("general_settings")) {
+            Some(Some(store)) => match serde_json::from_value(store) {
+                Ok(settings) => Ok(Some(settings)),
+                Err(_) => Ok(Some(GeneralSettingsStore::default())),
+            },
+            _ => Ok(None),
+        }
+    }
+
+    pub fn save(&self, app: &AppHandle) -> Result<(), String> {
+        let store = app.get_store("store").ok_or("Store not found")?;
+        store.set("general_settings", serde_json::json!(self));
+        store.save().map_err(|e| e.to_string())
+    }
+}
+
+impl Default for GeneralSettingsStore {
+    fn default() -> Self {
+        Self {
+            recording_config: Some(RecordingConfig::default()),
+        }
+    }
+}
diff --git a/crates/recording/src/actor.rs b/crates/recording/src/actor.rs
deleted file mode 100644
index f49bbf2d..00000000
--- a/crates/recording/src/actor.rs
+++ /dev/null
@@ -1,418 +0,0 @@
-use cap_flags::FLAGS;
-use cap_media::{
-    encoders::{H264Encoder, MP3Encoder, Output},
-    feeds::{AudioInputFeed, CameraFeed},
-    filters::VideoFilter,
-    pipeline::{builder::PipelineBuilder, Pipeline, RealTimeClock},
-    sources::{AudioInputSource, CameraSource, ScreenCaptureSource, ScreenCaptureTarget},
-    MediaError,
-};
-use cap_project::RecordingMeta;
-use either::Either;
-use std::{
-    path::PathBuf,
-    sync::{atomic::AtomicBool, Arc},
-    time::{SystemTime, UNIX_EPOCH},
-};
-use thiserror::Error;
-use tokio::sync::{oneshot, Mutex};
-
-use crate::{
-    cursor::{spawn_cursor_recorder, CursorActor},
-    RecordingOptions,
-};
-
-pub enum ActorControlMessage {
-    Stop(oneshot::Sender<Result<CompletedRecording, RecordingError>>),
-}
-
-pub struct Actor {
-    id: String,
-    recording_dir: PathBuf,
-    options: RecordingOptions,
-    pipeline: RecordingPipeline,
-    start_time: f64,
-    stop_signal: Arc<AtomicBool>,
-    cursor: Option<CursorActor>,
-}
-
-pub struct ActorHandle {
-    ctrl_tx: flume::Sender<ActorControlMessage>,
-    pub options: RecordingOptions,
-}
-
-#[derive(Error, Debug)]
-pub enum ActorError {
-    #[error("Actor has stopped")]
-    ActorStopped,
-
-    #[error("Failed to send to actor")]
-    SendFailed(#[from] flume::SendError<ActorControlMessage>),
-}
-
-#[derive(Error, Debug)]
-pub enum RecordingError {
-    #[error("Media/{0}")]
-    Media(#[from] MediaError),
-
-    #[error("Actor/{0}")]
-    Actor(#[from] ActorError),
-
-    #[error("Serde/{0}")]
-    Serde(#[from] serde_json::Error),
-
-    #[error("IO/{0}")]
-    Io(#[from] std::io::Error),
-}
-
-macro_rules! send_message {
-    ($ctrl_tx:expr, $variant:path) => {{
-        let (tx, rx) = oneshot::channel();
-        $ctrl_tx.send($variant(tx)).map_err(ActorError::from)?;
-        rx.await.map_err(|_| ActorError::ActorStopped)?
-    }};
-}
-
-impl ActorHandle {
-    pub async fn stop(&self) -> Result<CompletedRecording, RecordingError> {
-        send_message!(self.ctrl_tx, ActorControlMessage::Stop)
-    }
-
-    pub async fn pause(&self) -> Result<(), RecordingError> {
-        Ok(())
-    }
-
-    pub async fn resume(&self) -> Result<(), RecordingError> {
-        Ok(())
-    }
-}
-
-pub async fn spawn_recording_actor(
-    id: String,
-    recording_dir: impl Into<PathBuf>,
-    options: RecordingOptions,
-    camera_feed: Option<Arc<Mutex<CameraFeed>>>,
-    audio_input_feed: Option<AudioInputFeed>,
-) -> Result<ActorHandle, RecordingError> {
-    let recording_dir = recording_dir.into();
-
-    let content_dir = ensure_dir(recording_dir.join("content"))?;
-    let cursors_dir = ensure_dir(content_dir.join("cursors"))?;
-
-    let screen_source = create_screen_capture(&options);
-
-    let pipeline = create_pipeline(
-        &content_dir,
-        screen_source.clone(),
-        camera_feed.as_deref(),
-        audio_input_feed.as_ref(),
-    )
-    .await?;
-
-    let start_time = current_time_f64();
-
-    let (ctrl_tx, ctrl_rx) = flume::bounded(1);
-
-    let stop_signal = Arc::new(AtomicBool::new(false));
-
-    // Initialize default values for cursor channels
-    let cursor = FLAGS.record_mouse.then(|| {
-        spawn_cursor_recorder(
-            screen_source.get_bounds(),
-            cursors_dir,
-            Default::default(),
-            0,
-        )
-    });
-
-    tokio::spawn({
-        let options = options.clone();
-        async move {
-            let actor = Actor {
-                recording_dir,
-                options,
-                pipeline,
-                start_time,
-                cursor,
-                stop_signal,
-                id,
-            };
-
-            loop {
-                let Ok(ActorControlMessage::Stop(tx)) = ctrl_rx.recv_async().await else {
-                    return;
-                };
-
-                let resp = stop_recording(actor).await;
-
-                tx.send(resp).ok();
-                return;
-            }
-        }
-    });
-
-    Ok(ActorHandle { ctrl_tx, options })
-}
-
-pub struct CompletedRecording {
-    pub id: String,
-    pub recording_dir: PathBuf,
-    pub display_source: ScreenCaptureTarget,
-    pub meta: RecordingMeta,
-    pub cursor_data: cap_project::CursorData,
-    pub segments: Vec<f64>,
-}
-
-async fn stop_recording(mut actor: Actor) -> Result<CompletedRecording, RecordingError> {
-    let segment = (actor.start_time, current_time_f64());
-
-    use cap_project::*;
-
-    let meta = RecordingMeta {
-        project_path: actor.recording_dir.clone(),
-        sharing: None,
-        pretty_name: format!(
-            "Cap {}",
-            chrono::Local::now().format("%Y-%m-%d at %H.%M.%S")
-        ),
-        content: Content::SingleSegment {
-            segment: SingleSegment {
-                display: Display {
-                    path: actor
-                        .pipeline
-                        .display_output_path
-                        .strip_prefix(&actor.recording_dir)
-                        .unwrap()
-                        .to_owned(),
-                },
-                camera: actor
-                    .pipeline
-                    .camera_output_path
-                    .as_ref()
-                    .map(|path| CameraMeta {
-                        path: path.strip_prefix(&actor.recording_dir).unwrap().to_owned(),
-                    }),
-                audio: actor
-                    .pipeline
-                    .audio_output_path
-                    .as_ref()
-                    .map(|path| AudioMeta {
-                        path: path.strip_prefix(&actor.recording_dir).unwrap().to_owned(),
-                    }),
-                cursor: Some(PathBuf::from("content/cursor.json")),
-            },
-        },
-    };
-
-    actor.pipeline.inner.shutdown().await?;
-
-    actor
-        .stop_signal
-        .store(true, std::sync::atomic::Ordering::Relaxed);
-
-    let cursor_data = if let Some(cursor) = actor.cursor {
-        let resp = cursor.stop().await;
-        cap_project::CursorData {
-            clicks: resp.clicks,
-            moves: resp.moves,
-            cursor_images: CursorImages(
-                resp.cursors
-                    .into_values()
-                    .map(|(filename, id)| (id.to_string(), filename))
-                    .collect(),
-            ),
-        }
-    } else {
-        Default::default()
-    };
-
-    std::fs::write(
-        actor.recording_dir.join("content/cursor.json"),
-        serde_json::to_string_pretty(&cursor_data)?,
-    )?;
-
-    meta.save_for_project()
-        .map_err(Either::either_into::<RecordingError>)?;
-
-    Ok(CompletedRecording {
-        id: actor.id,
-        meta,
-        cursor_data,
-        recording_dir: actor.recording_dir,
-        display_source: actor.options.capture_target,
-        segments: vec![segment.0, segment.1],
-    })
-}
-
-fn create_screen_capture(
-    recording_options: &RecordingOptions,
-) -> ScreenCaptureSource<impl MakeCapturePipeline> {
-    #[cfg(target_os = "macos")]
-    {
-        ScreenCaptureSource::<cap_media::sources::CMSampleBufferCapture>::init(
-            dbg!(&recording_options.capture_target),
-            None,
-            None,
-        )
-    }
-    #[cfg(not(target_os = "macos"))]
-    {
-        ScreenCaptureSource::<cap_media::sources::AVFrameCapture>::init(
-            dbg!(&recording_options.capture_target),
-            None,
-            None,
-        )
-    }
-}
-
-struct RecordingPipeline {
-    pub inner: Pipeline<RealTimeClock<()>>,
-    pub display_output_path: PathBuf,
-    pub audio_output_path: Option<PathBuf>,
-    pub camera_output_path: Option<PathBuf>,
-}
-
-async fn create_pipeline<TCaptureFormat: MakeCapturePipeline>(
-    content_dir: &PathBuf,
-    screen_source: ScreenCaptureSource<TCaptureFormat>,
-    camera_feed: Option<&Mutex<CameraFeed>>,
-    audio_input_feed: Option<&AudioInputFeed>,
-) -> Result<RecordingPipeline, MediaError> {
-    let camera_feed = match camera_feed.as_ref() {
-        Some(camera_feed) => Some(camera_feed.lock().await),
-        None => None,
-    };
-    let camera_feed = camera_feed.as_deref();
-
-    let clock = RealTimeClock::<()>::new();
-    let mut pipeline_builder = Pipeline::builder(clock);
-
-    let display_output_path = content_dir.join("display.mp4");
-    let mut audio_output_path = None;
-    let mut camera_output_path = None;
-
-    if let Some(camera_source) = camera_feed.map(CameraSource::init) {
-        let camera_config = camera_source.info();
-        let output_config = camera_config.scaled(1920, 30);
-        camera_output_path = Some(content_dir.join("camera.mp4"));
-
-        let camera_filter = VideoFilter::init("camera", camera_config, output_config)?;
-        let camera_encoder = H264Encoder::init(
-            "camera",
-            output_config,
-            Output::File(camera_output_path.clone().unwrap()),
-        )?;
-
-        pipeline_builder = pipeline_builder
-            .source("camera_capture", camera_source)
-            .pipe("camera_filter", camera_filter)
-            .sink("camera_encoder", camera_encoder);
-    }
-
-    if let Some(mic_source) = audio_input_feed.map(AudioInputSource::init) {
-        let mic_config = mic_source.info();
-        audio_output_path = Some(content_dir.join("audio-input.mp3"));
-
-        // let mic_filter = AudioFilter::init("microphone", mic_config, "aresample=async=1:min_hard_comp=0.100000:first_pts=0")?;
-        let mic_encoder = MP3Encoder::init(
-            "microphone",
-            mic_config,
-            Output::File(audio_output_path.clone().unwrap()),
-        )?;
-
-        pipeline_builder = pipeline_builder
-            .source("microphone_capture", mic_source)
-            // .pipe("microphone_filter", mic_filter)
-            .sink("microphone_encoder", mic_encoder);
-    }
-
-    // we do this last to frontload the majority of errors,
-    // as the screen pipeline crashes the app if an error occurs afterwards for some reason
-    pipeline_builder = TCaptureFormat::make_capture_pipeline(
-        pipeline_builder,
-        screen_source,
-        &display_output_path,
-    )?;
-
-    //
-
-    let mut pipeline = pipeline_builder.build().await?;
-
-    pipeline.play().await?;
-
-    Ok(RecordingPipeline {
-        inner: pipeline,
-        display_output_path,
-        audio_output_path,
-        camera_output_path,
-    })
-}
-
-fn ensure_dir(path: PathBuf) -> Result<PathBuf, MediaError> {
-    std::fs::create_dir_all(&path)?;
-    Ok(path)
-}
-
-type CapturePipelineBuilder = PipelineBuilder<RealTimeClock<()>>;
-
-trait MakeCapturePipeline: 'static {
-    fn make_capture_pipeline(
-        builder: CapturePipelineBuilder,
-        source: ScreenCaptureSource<Self>,
-        output_path: impl Into<PathBuf>,
-    ) -> Result<CapturePipelineBuilder, MediaError>
-    where
-        Self: Sized;
-}
-
-#[cfg(target_os = "macos")]
-impl MakeCapturePipeline for cap_media::sources::CMSampleBufferCapture {
-    fn make_capture_pipeline(
-        builder: CapturePipelineBuilder,
-        source: ScreenCaptureSource<Self>,
-        output_path: impl Into<PathBuf>,
-    ) -> Result<CapturePipelineBuilder, MediaError> {
-        let screen_config = source.info();
-
-        let output_config = screen_config.scaled(1920, 30);
-        let screen_encoder = cap_media::encoders::H264AVAssetWriterEncoder::init(
-            "screen",
-            output_config,
-            Output::File(output_path.into()),
-        )?;
-
-        Ok(builder
-            .source("screen_capture", source)
-            .sink("screen_capture_encoder", screen_encoder))
-    }
-}
-
-impl MakeCapturePipeline for cap_media::sources::AVFrameCapture {
-    fn make_capture_pipeline(
-        builder: CapturePipelineBuilder,
-        source: ScreenCaptureSource<Self>,
-        output_path: impl Into<PathBuf>,
-    ) -> Result<CapturePipelineBuilder, MediaError>
-    where
-        Self: Sized,
-    {
-        let screen_config = source.info();
-        // let screen_bounds = screen_source.bounds;
-
-        let output_config = screen_config.scaled(1920, 30);
-        let screen_filter = VideoFilter::init("screen", screen_config, output_config)?;
-        let screen_encoder =
-            H264Encoder::init("screen", output_config, Output::File(output_path.into()))?;
-        Ok(builder
-            .source("screen_capture", source)
-            .pipe("screen_capture_filter", screen_filter)
-            .sink("screen_capture_encoder", screen_encoder))
-    }
-}
-
-fn current_time_f64() -> f64 {
-    SystemTime::now()
-        .duration_since(UNIX_EPOCH)
-        .unwrap()
-        .as_secs_f64()
-}
diff --git a/crates/recording/src/lib.rs b/crates/recording/src/lib.rs
index 486896bd..8ba0158a 100644
--- a/crates/recording/src/lib.rs
+++ b/crates/recording/src/lib.rs
@@ -1,10 +1,10 @@
-pub mod actor;
-mod cursor;
+pub mod cursor;
 pub mod segmented_actor;
 
 pub use segmented_actor::{spawn_recording_actor, ActorHandle, CompletedRecording, RecordingError};
 
 use cap_media::sources::*;
+use cap_project::Resolution;
 use serde::{Deserialize, Serialize};
 
 #[derive(specta::Type, Serialize, Deserialize, Clone, Debug)]
@@ -13,6 +13,23 @@ pub struct RecordingOptions {
     pub capture_target: ScreenCaptureTarget,
     pub camera_label: Option<String>,
     pub audio_input_name: Option<String>,
+    pub fps: u32,
+    pub output_resolution: Option<Resolution>,
+}
+
+impl Default for RecordingOptions {
+    fn default() -> Self {
+        Self {
+            capture_target: ScreenCaptureTarget::Screen(CaptureScreen {
+                id: 0,
+                name: String::new(),
+            }),
+            camera_label: None,
+            audio_input_name: None,
+            fps: 30,
+            output_resolution: None,
+        }
+    }
 }
 
 impl RecordingOptions {
diff --git a/crates/recording/src/segmented_actor.rs b/crates/recording/src/segmented_actor.rs
index 395d396b..52df8d77 100644
--- a/crates/recording/src/segmented_actor.rs
+++ b/crates/recording/src/segmented_actor.rs
@@ -376,6 +376,11 @@ async fn stop_recording(
     meta.save_for_project()
         .map_err(Either::either_into::<RecordingError>)?;
 
+    let project_config = cap_project::ProjectConfiguration::default();
+    project_config
+        .write(&actor.recording_dir)
+        .map_err(RecordingError::from)?;
+
     Ok(CompletedRecording {
         id: actor.id,
         meta,
@@ -393,16 +398,18 @@ fn create_screen_capture(
     {
         ScreenCaptureSource::<cap_media::sources::CMSampleBufferCapture>::init(
             dbg!(&recording_options.capture_target),
+            recording_options.output_resolution.clone(),
             None,
-            None,
+            recording_options.fps,
         )
     }
     #[cfg(not(target_os = "macos"))]
     {
         ScreenCaptureSource::<cap_media::sources::AVFrameCapture>::init(
             dbg!(&recording_options.capture_target),
+            recording_options.output_resolution.clone(),
             None,
-            None,
+            recording_options.fps,
         )
     }
 }
@@ -443,7 +450,6 @@ async fn create_segment_pipeline<TCaptureFormat: MakeCapturePipeline>(
         let mic_config = mic_source.info();
         audio_output_path = Some(dir.join("audio-input.mp3"));
 
-        // let mic_filter = AudioFilter::init("microphone", mic_config, "aresample=async=1:min_hard_comp=0.100000:first_pts=0")?;
         let mic_encoder = MP3Encoder::init(
             "microphone",
             mic_config,
@@ -452,13 +458,12 @@ async fn create_segment_pipeline<TCaptureFormat: MakeCapturePipeline>(
 
         pipeline_builder = pipeline_builder
             .source("microphone_capture", mic_source)
-            // .pipe("microphone_filter", mic_filter)
             .sink("microphone_encoder", mic_encoder);
     }
 
     if let Some(camera_source) = camera_feed.map(CameraSource::init) {
         let camera_config = camera_source.info();
-        let output_config = camera_config.scaled(1920, 30);
+        let output_config = camera_config.scaled(1280_u32, 30_u32);
         camera_output_path = Some(dir.join("camera.mp4"));
 
         let camera_filter = VideoFilter::init("camera", camera_config, output_config)?;
@@ -526,11 +531,9 @@ impl MakeCapturePipeline for cap_media::sources::CMSampleBufferCapture {
         output_path: impl Into<PathBuf>,
     ) -> Result<CapturePipelineBuilder, MediaError> {
         let screen_config = source.info();
-
-        let output_config = screen_config.scaled(1920, 30);
         let screen_encoder = cap_media::encoders::H264AVAssetWriterEncoder::init(
             "screen",
-            output_config,
+            screen_config,
             Output::File(output_path.into()),
         )?;
 
@@ -550,12 +553,9 @@ impl MakeCapturePipeline for cap_media::sources::AVFrameCapture {
         Self: Sized,
     {
         let screen_config = source.info();
-        // let screen_bounds = screen_source.bounds;
-
-        let output_config = screen_config.scaled(1920, 30);
-        let screen_filter = VideoFilter::init("screen", screen_config, output_config)?;
+        let screen_filter = VideoFilter::init("screen", screen_config, screen_config)?;
         let screen_encoder =
-            H264Encoder::init("screen", output_config, Output::File(output_path.into()))?;
+            H264Encoder::init("screen", screen_config, Output::File(output_path.into()))?;
         Ok(builder
             .source("screen_capture", source)
             .pipe("screen_capture_filter", screen_filter)
diff --git a/crates/rendering/Cargo.toml b/crates/rendering/Cargo.toml
index 81f67f86..f73679d4 100644
--- a/crates/rendering/Cargo.toml
+++ b/crates/rendering/Cargo.toml
@@ -6,19 +6,21 @@ edition = "2021"
 [dependencies]
 anyhow.workspace = true
 bytemuck = { version = "1.7", features = ["derive"] }
-futures-intrusive = "0.5.0"
-serde = "1.0.209"
-specta.workspace = true
-wgpu.workspace = true
-image = "0.25.2"
-cap-project = { path = "../project" }
 cap-flags = { path = "../flags" }
+cap-project = { path = "../project" }
+cap-recording = { path = "../recording" }
 ffmpeg-hw-device = { path = "../ffmpeg-hw-device" }
 tokio.workspace = true
 ffmpeg.workspace = true
 ffmpeg-sys-next.workspace = true
 futures = "0.3.30"
+futures-intrusive = "0.5.0"
+image = "0.25.2"
+log = "0.4"
+serde = "1.0.209"
+specta.workspace = true
 thiserror.workspace = true
+wgpu.workspace = true
 bezier_easing = "0.1.1"
 
 [target.'cfg(unix)'.dependencies]
@@ -26,3 +28,6 @@ nix = { version = "0.29.0", features = ["fs"] }
 
 [dev-dependencies]
 pretty_assertions = "1.4.1"
+
+[build-dependencies]
+build-time = "0.1"
diff --git a/crates/rendering/assets/watermark.png b/crates/rendering/assets/watermark.png
new file mode 100644
index 00000000..da3bc994
Binary files /dev/null and b/crates/rendering/assets/watermark.png differ
diff --git a/crates/rendering/assets/watermark.svg b/crates/rendering/assets/watermark.svg
new file mode 100644
index 00000000..30d5b30b
--- /dev/null
+++ b/crates/rendering/assets/watermark.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 103 40" class="w-20 sm:w-24 h-auto"><rect width="39.5" height="39.5" x="0.25" y="0.25" fill="#fff" rx="7.75"></rect><rect width="39.5" height="39.5" x="0.25" y="0.25" stroke="#E7EAF0" stroke-width="0.5" rx="7.75"></rect><path fill="#4785FF" d="M20 36c8.837 0 16-7.163 16-16 0-8.836-7.163-16-16-16-8.836 0-16 7.164-16 16 0 8.837 7.164 16 16 16z"></path><path fill="#ADC9FF" d="M20 33c7.18 0 13-5.82 13-13S27.18 7 20 7 7 12.82 7 20s5.82 13 13 13z"></path><path fill="#fff" d="M20 30c5.523 0 10-4.477 10-10s-4.477-10-10-10-10 4.477-10 10 4.477 10 10 10z"></path><path fill="#ffffff" d="M58.416 30.448c-5.404 0-9.212-3.864-9.212-10.36 0-6.384 3.668-10.416 9.268-10.416 5.068 0 7.784 2.66 8.624 7.168l-3.808.196c-.476-2.604-2.072-4.2-4.816-4.2-3.388 0-5.488 2.828-5.488 7.252 0 4.48 2.156 7.196 5.46 7.196 2.94 0 4.508-1.708 4.956-4.564l3.808.196c-.784 4.676-3.752 7.532-8.792 7.532zm16.23-.112c-3.137 0-5.209-1.484-5.209-4.088 0-2.576 1.596-3.948 4.872-4.592l4.956-.98c0-2.1-.98-3.192-2.856-3.192-1.764 0-2.716.812-3.052 2.324l-3.668-.168c.588-3.136 2.996-4.928 6.72-4.928 4.256 0 6.44 2.24 6.44 6.216v5.432c0 .812.28 1.036.84 1.036h.476V30c-.224.056-.812.112-1.288.112-1.624 0-2.828-.588-3.136-2.436-.728 1.596-2.632 2.66-5.096 2.66zm.727-2.604c2.38 0 3.892-1.512 3.892-3.78v-.84l-3.864.784c-1.596.308-2.24.98-2.24 2.016 0 1.176.784 1.82 2.212 1.82zM86.874 34.2V15.048h3.444l.056 2.212c.868-1.652 2.52-2.548 4.48-2.548 4.256 0 6.356 3.5 6.356 7.812s-2.128 7.812-6.384 7.812c-1.904 0-3.556-.924-4.368-2.38V34.2h-3.584zm7.112-6.776c2.184 0 3.5-1.82 3.5-4.9s-1.316-4.9-3.5-4.9-3.528 1.652-3.528 4.9 1.316 4.9 3.528 4.9z"></path></svg>
\ No newline at end of file
diff --git a/crates/rendering/src/decoder.rs b/crates/rendering/src/decoder.rs
index 0e869f7e..6792ec0d 100644
--- a/crates/rendering/src/decoder.rs
+++ b/crates/rendering/src/decoder.rs
@@ -1,5 +1,5 @@
 use std::{
-    collections::BTreeMap,
+    collections::{HashMap, VecDeque},
     path::PathBuf,
     sync::{mpsc, Arc, Mutex},
 };
@@ -11,8 +11,33 @@ use ffmpeg::{
     software::{self, scaling},
     Codec, Rational, Rescale,
 };
-use ffmpeg_hw_device::{CodecContextExt, HwDevice};
-use ffmpeg_sys_next::{avcodec_find_decoder, AVHWDeviceType};
+use ffmpeg_hw_device::CodecContextExt;
+use ffmpeg_sys_next::{
+    av_buffer_unref, av_hwdevice_ctx_alloc, av_hwdevice_ctx_init, av_hwframe_transfer_data,
+    avcodec_find_decoder, AVHWDeviceType,
+};
+use log;
+
+// Trait for hardware frame operations
+trait HwFrameExt {
+    fn has_hw_context(&self) -> bool;
+    fn transfer_to_cpu(&self, output: &mut frame::Video) -> Result<(), ffmpeg::Error>;
+}
+
+impl HwFrameExt for frame::Video {
+    fn has_hw_context(&self) -> bool {
+        unsafe { (*self.as_ptr()).hw_frames_ctx.is_null() == false }
+    }
+
+    fn transfer_to_cpu(&self, output: &mut frame::Video) -> Result<(), ffmpeg::Error> {
+        let ret = unsafe { av_hwframe_transfer_data(output.as_mut_ptr(), self.as_ptr(), 0) };
+        if ret < 0 {
+            Err(ffmpeg::Error::from(ret))
+        } else {
+            Ok(())
+        }
+    }
+}
 
 pub type DecodedFrame = Arc<Vec<u8>>;
 
@@ -25,12 +50,55 @@ fn pts_to_frame(pts: i64, time_base: Rational) -> u32 {
         .round() as u32
 }
 
-const FRAME_CACHE_SIZE: usize = 50;
-// TODO: Allow dynamic FPS values by either passing it into `spawn`
-// or changing `get_frame` to take the requested time instead of frame number,
-// so that the lookup can be done by PTS instead of frame number.
+const FRAME_CACHE_SIZE: usize = 100;
 const FPS: u32 = 30;
 
+pub struct FrameCache {
+    capacity: usize,
+    frames: HashMap<u32, CachedFrame>,
+    usage_order: VecDeque<u32>,
+}
+
+impl FrameCache {
+    pub fn new(capacity: usize) -> Self {
+        Self {
+            capacity,
+            frames: HashMap::new(),
+            usage_order: VecDeque::new(),
+        }
+    }
+
+    pub fn get(&mut self, key: u32) -> Option<&mut CachedFrame> {
+        if self.frames.contains_key(&key) {
+            self.refresh_usage(key);
+            return self.frames.get_mut(&key);
+        }
+        None
+    }
+
+    pub fn insert(&mut self, key: u32, cached_frame: CachedFrame) {
+        if self.frames.contains_key(&key) {
+            self.frames.insert(key, cached_frame);
+            self.refresh_usage(key);
+        } else {
+            if self.frames.len() >= self.capacity {
+                if let Some(oldest) = self.usage_order.pop_front() {
+                    self.frames.remove(&oldest);
+                }
+            }
+            self.frames.insert(key, cached_frame);
+            self.usage_order.push_back(key);
+        }
+    }
+
+    fn refresh_usage(&mut self, key: u32) {
+        if let Some(pos) = self.usage_order.iter().position(|x| *x == key) {
+            self.usage_order.remove(pos);
+        }
+        self.usage_order.push_back(key);
+    }
+}
+
 #[derive(Clone)]
 struct CachedFrame {
     data: CachedFrameData,
@@ -40,50 +108,101 @@ impl CachedFrame {
     fn process(
         &mut self,
         scaler_input_format: &mut format::Pixel,
-        scaler: &mut scaling::Context,
+        scaler_ctx: &mut ScalerContext,
         decoder: &codec::decoder::Video,
     ) -> Arc<Vec<u8>> {
         match &mut self.data {
+            CachedFrameData::Processed(data) => {
+                // Already have RGBA data, return it immediately
+                return data.clone();
+            }
             CachedFrameData::Raw(frame) => {
-                if frame.format() != *scaler_input_format {
-                    // Reinitialize the scaler with the new input format
-                    *scaler_input_format = frame.format();
-                    *scaler = software::scaling::Context::get(
-                        *scaler_input_format,
-                        decoder.width(),
-                        decoder.height(),
-                        format::Pixel::RGBA,
-                        decoder.width(),
-                        decoder.height(),
-                        software::scaling::Flags::BILINEAR,
-                    )
-                    .unwrap();
-                }
-
-                let mut rgb_frame = frame::Video::empty();
-                scaler.run(&frame, &mut rgb_frame).unwrap();
+                let width = frame.width();
+                let height = frame.height();
+
+                // Check if dimensions changed and update scalers if needed
+                scaler_ctx.check_dimensions(width, height);
+
+                // Handle hardware frames by transferring to CPU memory if needed
+                let frame = if frame.has_hw_context() {
+                    let mut sw_frame = frame::Video::new(format::Pixel::YUV420P, width, height);
+                    if let Err(e) = frame.transfer_to_cpu(&mut sw_frame) {
+                        log::error!("Failed to transfer hardware frame to CPU: {:?}", e);
+                        panic!("Failed to transfer hardware frame to CPU memory");
+                    }
+                    sw_frame
+                } else {
+                    frame.clone()
+                };
+
+                // Now handle software format conversion if needed
+                let frame = if frame.format() != format::Pixel::YUV420P {
+                    log::debug!(
+                        "Converting from {:?} to YUV420P as intermediate format",
+                        frame.format()
+                    );
+
+                    let mut yuv_frame = frame::Video::new(format::Pixel::YUV420P, width, height);
+                    scaler_ctx.ensure_yuv_scaler(frame.format());
+
+                    if let Some(yuv_scaler) = &mut scaler_ctx.yuv_scaler {
+                        if let Err(e) = yuv_scaler.run(&frame, &mut yuv_frame) {
+                            log::error!(
+                                "Failed to convert to YUV420P: {:?} (from format: {:?})",
+                                e,
+                                frame.format()
+                            );
+                            panic!("Failed to convert to intermediate format");
+                        }
+                    }
+                    yuv_frame
+                } else {
+                    frame
+                };
 
-                let width = rgb_frame.width() as usize;
-                let height = rgb_frame.height() as usize;
-                let stride = rgb_frame.stride(0);
-                let data = rgb_frame.data(0);
+                *scaler_input_format = format::Pixel::YUV420P;
 
-                let expected_size = width * height * 4;
+                // Create output frame
+                let mut rgb_frame = frame::Video::new(format::Pixel::RGBA, width, height);
 
-                let mut frame_buffer = Vec::with_capacity(expected_size);
+                // Convert to RGBA with retry on failure
+                let mut conversion_successful = false;
+                for _ in 0..3 {
+                    match scaler_ctx.rgba_scaler.run(&frame, &mut rgb_frame) {
+                        Ok(_) => {
+                            conversion_successful = true;
+                            break;
+                        }
+                        Err(e) => {
+                            log::warn!(
+                                "Failed to convert to RGBA, retrying with new scaler: {:?}",
+                                e
+                            );
+                            scaler_ctx.rgba_scaler = create_scaler(
+                                format::Pixel::YUV420P,
+                                width,
+                                height,
+                                format::Pixel::RGBA,
+                            );
+                        }
+                    }
+                }
 
-                // account for stride > width
-                for line_data in data.chunks_exact(stride) {
-                    frame_buffer.extend_from_slice(&line_data[0..width * 4]);
+                if !conversion_successful {
+                    panic!("Failed to convert frame to RGBA after multiple attempts");
                 }
 
-                let data = Arc::new(frame_buffer);
+                // Convert to bytes and store in Arc<Vec<u8>>
+                let size = (width as usize) * (height as usize) * 4;
+                let mut rgb_data = Vec::with_capacity(size);
+                rgb_data.extend_from_slice(rgb_frame.data(0));
+                let rgb_data = Arc::new(rgb_data);
 
-                self.data = CachedFrameData::Processed(data.clone());
+                // Store the processed RGBA data for future use
+                self.data = CachedFrameData::Processed(rgb_data.clone());
 
-                data
+                rgb_data
             }
-            CachedFrameData::Processed(data) => data.clone(),
         }
     }
 }
@@ -102,7 +221,6 @@ impl AsyncVideoDecoder {
 
         std::thread::spawn(move || {
             let mut input = ffmpeg::format::input(&path).unwrap();
-
             let input_stream = input
                 .streams()
                 .best(ffmpeg::media::Type::Video)
@@ -117,16 +235,13 @@ impl AsyncVideoDecoder {
 
             let input_stream_index = input_stream.index();
             let time_base = input_stream.time_base();
-            let frame_rate = input_stream.rate();
+            let _frame_rate = input_stream.rate();
 
-            // Create a decoder for the video stream
             let mut decoder = context.decoder().video().unwrap();
 
             {
                 use codec::threading::{Config, Type};
-
                 let capabilities = decoder_codec.capabilities();
-
                 if capabilities.intersects(Capabilities::FRAME_THREADS) {
                     decoder.set_threading(Config::kind(Type::Frame));
                 } else if capabilities.intersects(Capabilities::SLICE_THREADS) {
@@ -136,59 +251,48 @@ impl AsyncVideoDecoder {
                 }
             }
 
-            let hw_device: Option<HwDevice> = {
-                #[cfg(target_os = "macos")]
-                {
-                    decoder
-                        .try_use_hw_device(
-                            AVHWDeviceType::AV_HWDEVICE_TYPE_VIDEOTOOLBOX,
-                            Pixel::NV12,
-                        )
-                        .ok()
+            // Try to enable hardware acceleration on macOS
+            #[cfg(target_os = "macos")]
+            {
+                // First try NV12 as it's commonly supported by VideoToolbox
+                let formats = [format::Pixel::NV12, format::Pixel::YUV420P];
+
+                for &fmt in &formats {
+                    unsafe {
+                        let mut hw_device_ptr =
+                            av_hwdevice_ctx_alloc(AVHWDeviceType::AV_HWDEVICE_TYPE_VIDEOTOOLBOX);
+                        if !hw_device_ptr.is_null() && av_hwdevice_ctx_init(hw_device_ptr) >= 0 {
+                            (*decoder.as_mut_ptr()).hw_device_ctx = hw_device_ptr;
+                            (*decoder.as_mut_ptr()).sw_pix_fmt = fmt.into();
+                            (*decoder.as_mut_ptr()).get_format = Some(get_hw_format);
+                            log::info!("Successfully enabled VideoToolbox hardware acceleration with format {:?}", fmt);
+                            break;
+                        }
+                        if !hw_device_ptr.is_null() {
+                            av_buffer_unref(&mut hw_device_ptr);
+                        }
+                    }
                 }
-
-                #[cfg(not(target_os = "macos"))]
-                None
-            };
+            }
 
             use ffmpeg::format::Pixel;
             use ffmpeg::software::scaling::{context::Context, flag::Flags};
 
-            let mut scaler_input_format = hw_device
-                .as_ref()
-                .map(|d| d.pix_fmt)
-                .unwrap_or(decoder.format());
-
-            let mut scaler = Context::get(
-                scaler_input_format,
-                decoder.width(),
-                decoder.height(),
-                Pixel::RGBA,
-                decoder.width(),
-                decoder.height(),
-                Flags::BILINEAR,
-            )
-            .unwrap();
+            // Set initial scaler format based on hardware acceleration
+            let mut scaler_input_format = format::Pixel::YUV420P;
+            let mut scaler_ctx = ScalerContext::new(decoder.width(), decoder.height());
 
             let mut temp_frame = ffmpeg::frame::Video::empty();
-
-            let mut cache = BTreeMap::<u32, CachedFrame>::new();
-            // active frame is a frame that triggered decode.
-            // frames that are within render_more_margin of this frame won't trigger decode.
-            let mut last_active_frame = None::<u32>;
-
-            let mut last_decoded_frame = None::<u32>;
+            let mut frame_cache = FrameCache::new(FRAME_CACHE_SIZE);
             let mut last_sent_frame = None::<(u32, DecodedFrame)>;
             let mut reached_end = false;
 
             let mut peekable_requests = PeekableReceiver { rx, peeked: None };
-
             let mut packets = input.packets();
 
             while let Ok(r) = peekable_requests.recv() {
                 match r {
                     VideoDecoderMessage::GetFrame(requested_frame, sender) => {
-                        // If we've already reached the end and have a last frame, return it
                         if reached_end {
                             if let Some((_, last_frame)) = &last_sent_frame {
                                 sender.send(Some(last_frame.clone())).ok();
@@ -196,267 +300,58 @@ impl AsyncVideoDecoder {
                             }
                         }
 
-                        let mut sender = if let Some(cached) = cache.get_mut(&requested_frame) {
+                        if let Some(cached) = frame_cache.get(requested_frame) {
                             let data =
-                                cached.process(&mut scaler_input_format, &mut scaler, &decoder);
-
+                                cached.process(&mut scaler_input_format, &mut scaler_ctx, &decoder);
                             sender.send(Some(data.clone())).ok();
                             last_sent_frame = Some((requested_frame, data));
                             continue;
-                        } else {
-                            Some(sender)
-                        };
-
-                        let cache_min = requested_frame.saturating_sub(FRAME_CACHE_SIZE as u32 / 2);
-                        let cache_max = requested_frame + FRAME_CACHE_SIZE as u32 / 2;
-
-                        if cache.len() >= FRAME_CACHE_SIZE {
-                            // When cache is full, remove old frames that are far from the requested frame
-                            let frames_to_remove: Vec<_> = cache
-                                .keys()
-                                .filter(|&&k| {
-                                    // Keep frames within a window of the requested frame
-                                    let distance = if k <= requested_frame {
-                                        requested_frame - k
-                                    } else {
-                                        k - requested_frame
-                                    };
-                                    // Remove frames that are more than half the cache size away
-                                    distance > FRAME_CACHE_SIZE as u32 / 2
-                                })
-                                .copied()
-                                .collect();
-
-                            for frame in frames_to_remove {
-                                println!(
-                                    "Removing old frame {} from cache (requested_frame: {})",
-                                    frame, requested_frame
-                                );
-                                cache.remove(&frame);
-                            }
-
-                            // If we still need to remove frames, remove the ones furthest from the requested frame
-                            if cache.len() >= FRAME_CACHE_SIZE {
-                                let frame_to_remove = cache
-                                    .keys()
-                                    .max_by_key(|&&k| {
-                                        if k <= requested_frame {
-                                            requested_frame - k
-                                        } else {
-                                            k - requested_frame
-                                        }
-                                    })
-                                    .copied()
-                                    .unwrap();
-                                println!(
-                                    "Removing distant frame {} from cache (requested_frame: {})",
-                                    frame_to_remove, requested_frame
-                                );
-                                cache.remove(&frame_to_remove);
-                            }
                         }
 
-                        // Only seek if we're going backwards or if we're jumping more than half the cache size
-                        // AND we don't have the frame in cache already
-                        // AND we haven't reached the end of the video
-                        if !reached_end
-                            && !cache.contains_key(&requested_frame)
-                            && (requested_frame <= 0
-                                || last_sent_frame
-                                    .as_ref()
-                                    .map(|last| {
-                                        let backwards = requested_frame < last.0;
-                                        let big_jump = requested_frame > last.0
-                                            && requested_frame.saturating_sub(last.0)
-                                                > FRAME_CACHE_SIZE as u32 / 2;
-                                        backwards || big_jump
-                                    })
-                                    .unwrap_or(true))
-                        {
-                            let timestamp_us =
-                                ((requested_frame as f32 / frame_rate.numerator() as f32)
-                                    * 1_000_000.0) as i64;
-                            let position = timestamp_us.rescale((1, 1_000_000), rescale::TIME_BASE);
-
-                            decoder.flush();
-                            // Drop the old packets iterator to release the mutable borrow
-                            drop(packets);
-                            let seek_result = input.seek(position, ..position);
-                            // Create new packets iterator regardless of seek result
-                            packets = input.packets();
-
-                            match seek_result {
-                                Ok(_) => {
-                                    cache.clear();
-                                    last_decoded_frame = None;
-                                }
-                                Err(_) => {
-                                    // If seek fails, we've likely reached the end
-                                    reached_end = true;
-                                    if let Some((_, last_frame)) = &last_sent_frame {
-                                        sender.take().map(|s| s.send(Some(last_frame.clone())));
-                                    }
-                                    continue;
-                                }
-                            }
-                        }
+                        let mut sender = Some(sender);
 
-                        // handle when requested_frame == last_decoded_frame or last_decoded_frame > requested_frame.
-                        // the latter can occur when there are skips in frame numbers.
-                        // in future we should alleviate this by using time + pts values instead of frame numbers.
-                        if let Some((_, last_sent_frame)) = last_decoded_frame
-                            .zip(last_sent_frame.as_ref())
-                            .filter(|(last_decoded_frame, last_sent_frame)| {
-                                last_sent_frame.0 < requested_frame
-                                    && requested_frame < *last_decoded_frame
-                            })
-                        {
-                            if let Some(sender) = sender.take() {
-                                sender.send(Some(last_sent_frame.1.clone())).ok();
+                        'packet_loop: while let Some((stream, packet)) = packets.next() {
+                            if stream.index() != input_stream_index {
                                 continue;
                             }
-                        }
-
-                        last_active_frame = Some(requested_frame);
 
-                        loop {
-                            if peekable_requests.peek().is_some() {
-                                break;
-                            }
-                            let Some((stream, packet)) = packets.next() else {
-                                sender
-                                    .take()
-                                    .map(|s| s.send(last_sent_frame.clone().map(|f| f.1)));
-                                break;
-                            };
-
-                            if stream.index() == input_stream_index {
-                                let start_offset = stream.start_time();
-
-                                decoder.send_packet(&packet).ok(); // decode failures are ok, we just fail to return a frame
-
-                                let mut exit = false;
-
-                                while decoder.receive_frame(&mut temp_frame).is_ok() {
-                                    let current_frame = pts_to_frame(
-                                        temp_frame.pts().unwrap() - start_offset,
-                                        time_base,
-                                    );
-
-                                    last_decoded_frame = Some(current_frame);
-
-                                    // we repeat the similar section as above to do the check per-frame instead of just per-request
-                                    if let Some((_, last_sent_frame)) = last_decoded_frame
-                                        .zip(last_sent_frame.as_ref())
-                                        .filter(|(last_decoded_frame, last_sent_frame)| {
-                                            last_sent_frame.0 <= requested_frame
-                                                && requested_frame < *last_decoded_frame
-                                        })
-                                    {
-                                        if let Some(sender) = sender.take() {
-                                            sender.send(Some(last_sent_frame.1.clone())).ok();
-                                        }
-                                    }
+                            decoder.send_packet(&packet).unwrap();
 
-                                    let exceeds_cache_bounds = current_frame > cache_max;
-                                    let too_small_for_cache_bounds = current_frame < cache_min;
-
-                                    let hw_frame =
-                                        hw_device.as_ref().and_then(|d| d.get_hwframe(&temp_frame));
-
-                                    let frame = hw_frame.unwrap_or(std::mem::replace(
-                                        &mut temp_frame,
-                                        frame::Video::empty(),
-                                    ));
-
-                                    if !too_small_for_cache_bounds {
-                                        let mut cache_frame = CachedFrame {
-                                            data: CachedFrameData::Raw(frame),
-                                        };
-
-                                        if current_frame == requested_frame {
-                                            if let Some(sender) = sender.take() {
-                                                let data = cache_frame.process(
-                                                    &mut scaler_input_format,
-                                                    &mut scaler,
-                                                    &decoder,
-                                                );
-                                                last_sent_frame =
-                                                    Some((current_frame, data.clone()));
-                                                sender.send(Some(data)).ok();
-                                                break;
-                                            }
-                                        } else if current_frame
-                                            > last_sent_frame.as_ref().map(|f| f.0).unwrap_or(0)
-                                        {
-                                            // Keep last_sent_frame up to date even for frames we're not sending
-                                            let data = cache_frame.process(
-                                                &mut scaler_input_format,
-                                                &mut scaler,
-                                                &decoder,
-                                            );
-                                            last_sent_frame = Some((current_frame, data));
-                                        }
+                            while decoder.receive_frame(&mut temp_frame).is_ok() {
+                                let frame_number =
+                                    pts_to_frame(temp_frame.pts().unwrap(), time_base);
+                                let cached_frame = CachedFrame {
+                                    data: CachedFrameData::Raw(temp_frame.clone()),
+                                };
 
-                                        if cache.len() >= FRAME_CACHE_SIZE {
-                                            // When cache is full, remove old frames that are far from the requested frame
-                                            let frames_to_remove: Vec<_> = cache
-                                                .keys()
-                                                .filter(|&&k| {
-                                                    // Keep frames within a window of the requested frame
-                                                    let distance = if k <= requested_frame {
-                                                        requested_frame - k
-                                                    } else {
-                                                        k - requested_frame
-                                                    };
-                                                    // Remove frames that are more than half the cache size away
-                                                    distance > FRAME_CACHE_SIZE as u32 / 2
-                                                })
-                                                .copied()
-                                                .collect();
-
-                                            for frame in frames_to_remove {
-                                                println!("Removing old frame {} from cache (requested_frame: {})", frame, requested_frame);
-                                                cache.remove(&frame);
-                                            }
-
-                                            // If we still need to remove frames, remove the ones furthest from the requested frame
-                                            if cache.len() >= FRAME_CACHE_SIZE {
-                                                let frame_to_remove = cache
-                                                    .keys()
-                                                    .max_by_key(|&&k| {
-                                                        if k <= requested_frame {
-                                                            requested_frame - k
-                                                        } else {
-                                                            k - requested_frame
-                                                        }
-                                                    })
-                                                    .copied()
-                                                    .unwrap();
-                                                println!("Removing distant frame {} from cache (requested_frame: {})", frame_to_remove, requested_frame);
-                                                cache.remove(&frame_to_remove);
-                                            }
-                                        }
+                                frame_cache.insert(frame_number, cached_frame);
 
-                                        println!(
-                                            "Inserting frame {} into cache (size: {})",
-                                            current_frame,
-                                            cache.len()
+                                if frame_number == requested_frame {
+                                    if let Some(cached) = frame_cache.get(requested_frame) {
+                                        let data = cached.process(
+                                            &mut scaler_input_format,
+                                            &mut scaler_ctx,
+                                            &decoder,
                                         );
-                                        cache.insert(current_frame, cache_frame);
+                                        if let Some(s) = sender.take() {
+                                            s.send(Some(data.clone())).ok();
+                                        }
+                                        last_sent_frame = Some((requested_frame, data));
+                                        break 'packet_loop;
                                     }
-
-                                    exit = exit || exceeds_cache_bounds;
-                                }
-
-                                if exit {
-                                    break;
                                 }
                             }
                         }
 
-                        if let Some(s) = sender.take() {
-                            s.send(None).ok();
+                        if sender.is_some() {
+                            reached_end = true;
+                            if let Some(s) = sender.take() {
+                                if let Some((_, last_frame)) = &last_sent_frame {
+                                    s.send(Some(last_frame.clone())).ok();
+                                } else {
+                                    s.send(None).ok();
+                                }
+                            }
                         }
                     }
                 }
@@ -577,3 +472,125 @@ fn ff_find_decoder(
         Some(Codec::wrap(found))
     }
 }
+
+fn create_scaler(
+    input_format: format::Pixel,
+    width: u32,
+    height: u32,
+    output_format: format::Pixel,
+) -> scaling::Context {
+    // Try different input/output format combinations in order of preference
+    let format_combinations = [
+        (input_format, output_format),
+        (format::Pixel::YUV420P, output_format),
+        (format::Pixel::YUV420P, format::Pixel::RGBA),
+        (format::Pixel::YUV420P, format::Pixel::RGB24),
+        (format::Pixel::YUV420P, format::Pixel::BGR24),
+    ];
+
+    // Try different scaling flags in order of quality/performance
+    let scaling_flags = [
+        scaling::Flags::BILINEAR,
+        scaling::Flags::BICUBIC,
+        scaling::Flags::POINT,
+        scaling::Flags::FAST_BILINEAR,
+        scaling::Flags::AREA,
+    ];
+
+    for (in_fmt, out_fmt) in format_combinations.iter() {
+        for flags in scaling_flags.iter() {
+            match scaling::Context::get(*in_fmt, width, height, *out_fmt, width, height, *flags) {
+                Ok(context) => {
+                    log::info!(
+                        "Created scaler: {:?} -> {:?} with flags {:?}",
+                        in_fmt,
+                        out_fmt,
+                        flags
+                    );
+                    return context;
+                }
+                Err(e) => {
+                    log::debug!(
+                        "Failed to create scaler: {:?} -> {:?} with flags {:?}: {:?}",
+                        in_fmt,
+                        out_fmt,
+                        flags,
+                        e
+                    );
+                    continue;
+                }
+            }
+        }
+    }
+
+    // Last resort: try with absolute minimal settings
+    match scaling::Context::get(
+        format::Pixel::YUV420P,
+        width,
+        height,
+        format::Pixel::RGB24,
+        width,
+        height,
+        scaling::Flags::POINT,
+    ) {
+        Ok(context) => {
+            log::warn!("Using fallback RGB24 scaler with minimal settings");
+            context
+        }
+        Err(e) => {
+            log::error!("All scaler creation attempts failed. Last error: {:?}", e);
+            panic!("Could not create scaler with any configuration");
+        }
+    }
+}
+
+unsafe extern "C" fn get_hw_format(
+    ctx: *mut ffmpeg_sys_next::AVCodecContext,
+    _pix_fmts: *const ffmpeg_sys_next::AVPixelFormat,
+) -> ffmpeg_sys_next::AVPixelFormat {
+    (*ctx).sw_pix_fmt
+}
+
+struct ScalerContext {
+    yuv_scaler: Option<scaling::Context>,
+    rgba_scaler: scaling::Context,
+    width: u32,
+    height: u32,
+}
+
+impl ScalerContext {
+    fn new(width: u32, height: u32) -> Self {
+        let rgba_scaler = create_scaler(format::Pixel::YUV420P, width, height, format::Pixel::RGBA);
+
+        Self {
+            yuv_scaler: None,
+            rgba_scaler,
+            width,
+            height,
+        }
+    }
+
+    fn ensure_yuv_scaler(&mut self, input_format: format::Pixel) {
+        if input_format != format::Pixel::YUV420P {
+            self.yuv_scaler = Some(create_scaler(
+                input_format,
+                self.width,
+                self.height,
+                format::Pixel::YUV420P,
+            ));
+        }
+    }
+
+    fn check_dimensions(&mut self, width: u32, height: u32) -> bool {
+        if width != self.width || height != self.height {
+            self.width = width;
+            self.height = height;
+            self.rgba_scaler =
+                create_scaler(format::Pixel::YUV420P, width, height, format::Pixel::RGBA);
+            self.yuv_scaler = None;
+            true
+        } else {
+            false
+        }
+    }
+}
diff --git a/crates/rendering/src/lib.rs b/crates/rendering/src/lib.rs
index 06bd5575..c7ba8996 100644
--- a/crates/rendering/src/lib.rs
+++ b/crates/rendering/src/lib.rs
@@ -4,10 +4,11 @@ use cap_flags::FLAGS;
 use cap_project::{
     AspectRatio, BackgroundSource, CameraXPosition, CameraYPosition, Content, Crop,
     CursorAnimationStyle, CursorClickEvent, CursorData, CursorEvents, CursorMoveEvent,
-    ProjectConfiguration, RecordingMeta, ZoomSegment, FAST_SMOOTHING_SAMPLES,
-    FAST_VELOCITY_THRESHOLD, REGULAR_SMOOTHING_SAMPLES, REGULAR_VELOCITY_THRESHOLD,
-    SLOW_SMOOTHING_SAMPLES, SLOW_VELOCITY_THRESHOLD, XY,
+    ProjectConfiguration, RecordingMeta, FAST_SMOOTHING_SAMPLES, FAST_VELOCITY_THRESHOLD,
+    REGULAR_SMOOTHING_SAMPLES, REGULAR_VELOCITY_THRESHOLD, SLOW_SMOOTHING_SAMPLES,
+    SLOW_VELOCITY_THRESHOLD, XY,
 };
+use cap_recording::segmented_actor::RecordingSegment;
 use core::f64;
 use decoder::{AsyncVideoDecoder, AsyncVideoDecoderHandle};
 use futures::future::OptionFuture;
@@ -158,6 +159,7 @@ pub async fn render_video_to_channel(
     sender: mpsc::Sender<RenderedFrame>,
     meta: &RecordingMeta,
     segments: Vec<RenderSegment>,
+    fps: u32,
 ) -> Result<(), RenderingError> {
     let constants = RenderVideoConstants::new(options, meta).await?;
     let recordings = ProjectRecordings::new(meta);
@@ -205,127 +207,38 @@ pub async fn render_video_to_channel(
         }
     };
 
-    let total_frames = (30_f64 * duration).ceil() as u32;
+    let total_frames = (fps as f64 * duration).ceil() as u32;
     println!(
         "Final export duration: {} seconds ({} frames at 30fps)",
         duration, total_frames
     );
 
-    // Send initial frame to communicate total frames
-    let initial_frame = RenderedFrame {
-        data: vec![],
-        width: 0,
-        height: 0,
-        padded_bytes_per_row: 0,
-        total_frames: Some(total_frames),
-    };
-    sender.send(initial_frame).await?;
-
     let mut frame_number = 0;
     let background = Background::from(project.background.source.clone());
 
     loop {
         if frame_number >= total_frames {
-            println!("Reached total frames: {frame_number}/{total_frames}");
             break;
         }
 
-        println!("Processing frame {frame_number}/{total_frames}");
-
         let (time, segment_i) = if let Some(timeline) = &project.timeline {
-            println!("Getting time from timeline for frame {}", frame_number);
             match timeline.get_recording_time(frame_number as f64 / 30_f64) {
-                Some(value) => {
-                    println!(
-                        "Timeline returned time: {}, segment: {:?}",
-                        value.0, value.1
-                    );
-                    value
-                }
-                None => {
-                    println!(
-                        "Timeline returned None for frame {} (time: {})",
-                        frame_number,
-                        frame_number as f64 / 30_f64
-                    );
-                    println!(
-                        "Timeline segments: {:?}",
-                        timeline
-                            .segments
-                            .iter()
-                            .map(|s| (s.start, s.end))
-                            .collect::<Vec<_>>()
-                    );
-                    break;
-                }
+                Some(value) => (value.0, value.1),
+                None => (frame_number as f64 / 30_f64, Some(0u32)),
             }
         } else {
-            let time = frame_number as f64 / 30_f64;
-            println!("No timeline, using direct time calculation: {}", time);
-            (time, None)
+            (frame_number as f64 / 30_f64, Some(0u32))
         };
 
-        let segment_index = segment_i.unwrap_or(0) as usize;
-        println!("Using segment {} for frame {}", segment_index, frame_number);
-        let segment = &segments[segment_index];
-        let uniforms = ProjectUniforms::new(&constants, &project, time as f32);
-
-        println!("Getting frames for time: {} (frame {})", time, frame_number);
-        // Get frames or use last valid frames if past duration
-        let (screen_frame, camera_frame) =
-            match segment.decoders.get_frames((time * 30.0) as u32).await {
-                Some((screen, camera)) => {
-                    println!(
-                        "Successfully got frames for time {} (frame {})",
-                        time, frame_number
-                    );
-                    (screen, camera)
-                }
-                None => {
-                    println!(
-                        "No frames from decoder at time {} (frame {}), using last valid frames",
-                        time, frame_number
-                    );
-                    // Get the last valid frame from each decoder
-                    let screen = segment
-                        .decoders
-                        .screen
-                        .get_frame((time * 30.0) as u32)
-                        .await
-                        .unwrap_or_else(|| {
-                            println!("Using empty frame for screen");
-                            Arc::new(vec![
-                                0;
-                                (constants.options.screen_size.x
-                                    * constants.options.screen_size.y
-                                    * 4) as usize
-                            ])
-                        });
-
-                    let camera = match &segment.decoders.camera {
-                        Some(camera_decoder) => {
-                            println!("Getting camera frame at time {}", time);
-                            Some(
-                                camera_decoder
-                                    .get_frame((time * 30.0) as u32)
-                                    .await
-                                    .unwrap_or_else(|| {
-                                        println!("Using empty frame for camera");
-                                        Arc::new(match constants.options.camera_size {
-                                            Some(size) => vec![0; (size.x * size.y * 4) as usize],
-                                            None => vec![0; 0],
-                                        })
-                                    }),
-                            )
-                        }
-                        None => None,
-                    };
+        let segment = &segments[segment_i.unwrap() as usize];
+        let frame_time = frame_number;
+        let Some((screen_frame, camera_frame)) = segment.decoders.get_frames(frame_time).await
+        else {
+            break;
+        };
 
-                    (screen, camera)
-                }
-            };
+        let uniforms = ProjectUniforms::new(&constants, &project, time as f32);
 
-        println!("Producing frame {frame_number}");
         let frame = produce_frame(
             &constants,
             &screen_frame,
@@ -337,23 +250,14 @@ pub async fn render_video_to_channel(
         )
         .await?;
 
-        println!("Sending frame {frame_number}");
-        if let Err(e) = sender.send(frame).await {
-            println!("Failed to send frame: {e}");
-            break;
+        if frame.width == 0 || frame.height == 0 {
+            continue;
         }
 
+        sender.send(frame).await?;
         frame_number += 1;
-        if frame_number % 60 == 0 {
-            let elapsed = start_time.elapsed();
-            println!(
-                "Rendered {frame_number}/{total_frames} frames in {:?} seconds",
-                elapsed.as_secs_f32()
-            );
-        }
     }
 
-    println!("Render loop exited at frame {frame_number}/{total_frames}");
     let total_time = start_time.elapsed();
     println!(
         "Render complete. Processed {frame_number} frames in {:?} seconds",
@@ -373,6 +277,10 @@ pub struct RenderVideoConstants {
     gradient_or_color_pipeline: GradientOrColorPipeline,
     pub cursor_textures: HashMap<String, wgpu::Texture>,
     cursor_pipeline: CursorPipeline,
+    watermark_pipeline: WatermarkPipeline,
+    watermark_texture: wgpu::Texture,
+    watermark_bind_group: wgpu::BindGroup,
+    watermark_dimensions: (u32, u32), // Add watermark dimensions
 }
 
 impl RenderVideoConstants {
@@ -395,19 +303,112 @@ impl RenderVideoConstants {
 
         // Pass project_path to load_cursor_textures
         let cursor_textures = Self::load_cursor_textures(&device, &queue, meta);
-
         let cursor_pipeline = CursorPipeline::new(&device);
+        let watermark_pipeline = WatermarkPipeline::new(&device);
+        let composite_video_frame_pipeline = CompositeVideoFramePipeline::new(&device);
+        let gradient_or_color_pipeline = GradientOrColorPipeline::new(&device);
+
+        // Create watermark texture from embedded logo
+        let watermark_bytes = include_bytes!("../assets/watermark.png");
+        println!(
+            "Loading watermark texture from embedded bytes: {} bytes",
+            watermark_bytes.len()
+        );
+
+        let watermark_image = image::load_from_memory(watermark_bytes).unwrap();
+        let watermark_rgba = watermark_image.to_rgba8();
+        let dimensions = watermark_image.dimensions();
+        println!(
+            "Loaded watermark image dimensions: {}x{}",
+            dimensions.0, dimensions.1
+        );
+
+        let watermark_texture = device.create_texture(&wgpu::TextureDescriptor {
+            label: Some("WatermarkTexture"),
+            size: wgpu::Extent3d {
+                width: dimensions.0,
+                height: dimensions.1,
+                depth_or_array_layers: 1,
+            },
+            mip_level_count: 1,
+            sample_count: 1,
+            dimension: wgpu::TextureDimension::D2,
+            format: wgpu::TextureFormat::Rgba8UnormSrgb,
+            usage: wgpu::TextureUsages::TEXTURE_BINDING | wgpu::TextureUsages::COPY_DST,
+            view_formats: &[],
+        });
+
+        queue.write_texture(
+            wgpu::ImageCopyTexture {
+                texture: &watermark_texture,
+                mip_level: 0,
+                origin: wgpu::Origin3d::ZERO,
+                aspect: wgpu::TextureAspect::All,
+            },
+            &watermark_rgba,
+            wgpu::ImageDataLayout {
+                offset: 0,
+                bytes_per_row: Some(4 * dimensions.0),
+                rows_per_image: Some(dimensions.1),
+            },
+            wgpu::Extent3d {
+                width: dimensions.0,
+                height: dimensions.1,
+                depth_or_array_layers: 1,
+            },
+        );
+
+        let watermark_view = watermark_texture.create_view(&wgpu::TextureViewDescriptor::default());
+        let watermark_sampler = device.create_sampler(&wgpu::SamplerDescriptor {
+            address_mode_u: wgpu::AddressMode::ClampToEdge,
+            address_mode_v: wgpu::AddressMode::ClampToEdge,
+            address_mode_w: wgpu::AddressMode::ClampToEdge,
+            mag_filter: wgpu::FilterMode::Linear,
+            min_filter: wgpu::FilterMode::Linear,
+            mipmap_filter: wgpu::FilterMode::Linear,
+            ..Default::default()
+        });
+
+        let watermark_uniform_buffer = device.create_buffer(&wgpu::BufferDescriptor {
+            label: Some("WatermarkUniformBuffer"),
+            size: std::mem::size_of::<WatermarkUniforms>() as u64,
+            usage: wgpu::BufferUsages::UNIFORM | wgpu::BufferUsages::COPY_DST,
+            mapped_at_creation: false,
+        });
+
+        let watermark_bind_group = device.create_bind_group(&wgpu::BindGroupDescriptor {
+            label: Some("WatermarkBindGroup"),
+            layout: &watermark_pipeline.bind_group_layout,
+            entries: &[
+                wgpu::BindGroupEntry {
+                    binding: 0,
+                    resource: wgpu::BindingResource::TextureView(&watermark_view),
+                },
+                wgpu::BindGroupEntry {
+                    binding: 1,
+                    resource: wgpu::BindingResource::Sampler(&watermark_sampler),
+                },
+                wgpu::BindGroupEntry {
+                    binding: 2,
+                    resource: watermark_uniform_buffer.as_entire_binding(),
+                },
+            ],
+        });
 
         Ok(Self {
-            composite_video_frame_pipeline: CompositeVideoFramePipeline::new(&device),
-            gradient_or_color_pipeline: GradientOrColorPipeline::new(&device),
             _instance: instance,
             _adapter: adapter,
-            queue,
             device,
+            queue,
             options,
+            composite_video_frame_pipeline,
+            gradient_or_color_pipeline,
             cursor_textures,
             cursor_pipeline,
+            watermark_pipeline,
+            watermark_texture,
+            watermark_bind_group,
+            watermark_dimensions: dimensions,
         })
     }
 
@@ -666,7 +667,7 @@ impl ProjectUniforms {
 
         let interpolated_zoom = zoom_keyframes.interpolate(time as f64);
 
-        let (zoom_amount, zoom_origin) = {
+        let (zoom_amount, zoom_origin, lowered_zoom) = {
             let origin = match interpolated_zoom.position {
                 ZoomPosition::Manual { x, y } => Coord::<RawDisplayUVSpace>::new(XY {
                     x: x as f64,
@@ -690,7 +691,7 @@ impl ProjectUniforms {
                 }
             };
 
-            (interpolated_zoom.amount, origin)
+            (interpolated_zoom.amount, origin, interpolated_zoom.lowered)
         };
 
         let (display, zoom) = {
@@ -720,8 +721,21 @@ impl ProjectUniforms {
                 // padding: screen_scale_origin,
             };
 
-            let start = zoom.apply_scale(display_offset);
-            let end = zoom.apply_scale(end);
+            let target_size = end - display_offset;
+
+            let (zoom_start, zoom_end) = (
+                Coord::new(XY::new(
+                    lowered_zoom.top_left.0 as f64 * target_size.x,
+                    lowered_zoom.top_left.1 as f64 * target_size.y,
+                )),
+                Coord::new(XY::new(
+                    (lowered_zoom.bottom_right.0 as f64 - 1.0) * target_size.x,
+                    (lowered_zoom.bottom_right.1 as f64 - 1.0) * target_size.y,
+                )),
+            );
+
+            let start = display_offset + zoom_start;
+            let end = end + zoom_end;
 
             let target_size = end - start;
             let min_target_axis = target_size.x.min(target_size.y);
@@ -1055,6 +1069,113 @@ pub async fn produce_frame(
     // Now submit the encoder
     constants.queue.submit(std::iter::once(encoder.finish()));
 
+    // Add watermark if not upgraded - moved to after all other rendering
+    if uniforms.project.background.inset <= 0 {
+        // Calculate watermark width as 10% of frame width, but no larger than 200px
+        let frame_width = uniforms.output_size.0 as f32;
+        let target_width = (frame_width * 0.15).min(280.0);
+        let aspect_ratio =
+            constants.watermark_dimensions.1 as f32 / constants.watermark_dimensions.0 as f32;
+
+        // Increase padding from edges
+        let padding = frame_width * 0.02; // 2% of frame width for padding
+
+        let watermark_uniforms = WatermarkUniforms {
+            output_size: [uniforms.output_size.0 as f32, uniforms.output_size.1 as f32],
+            watermark_size: [target_width, target_width * aspect_ratio],
+            position: [
+                padding,
+                uniforms.output_size.1 as f32 - (target_width * aspect_ratio) - padding,
+            ],
+            opacity: 0.5,
+            is_upgraded: 0.0,
+        };
+
+        // println!(
+        //     "Rendering watermark at position: {:?}, size: {:?}, output_size: {:?}",
+        //     watermark_uniforms.position,
+        //     watermark_uniforms.watermark_size,
+        //     watermark_uniforms.output_size
+        // );
+
+        let watermark_buffer =
+            constants
+                .device
+                .create_buffer_init(&wgpu::util::BufferInitDescriptor {
+                    label: Some("Watermark Uniforms Buffer"),
+                    contents: bytemuck::cast_slice(&[watermark_uniforms]),
+                    usage: wgpu::BufferUsages::UNIFORM | wgpu::BufferUsages::COPY_DST,
+                });
+
+        let watermark_bind_group = constants
+            .device
+            .create_bind_group(&wgpu::BindGroupDescriptor {
+                label: Some("WatermarkBindGroup"),
+                layout: &constants.watermark_pipeline.bind_group_layout,
+                entries: &[
+                    wgpu::BindGroupEntry {
+                        binding: 0,
+                        resource: wgpu::BindingResource::TextureView(
+                            &constants
+                                .watermark_texture
+                                .create_view(&wgpu::TextureViewDescriptor::default()),
+                        ),
+                    },
+                    wgpu::BindGroupEntry {
+                        binding: 1,
+                        resource: wgpu::BindingResource::Sampler(&constants.device.create_sampler(
+                            &wgpu::SamplerDescriptor {
+                                address_mode_u: wgpu::AddressMode::ClampToEdge,
+                                address_mode_v: wgpu::AddressMode::ClampToEdge,
+                                address_mode_w: wgpu::AddressMode::ClampToEdge,
+                                mag_filter: wgpu::FilterMode::Linear,
+                                min_filter: wgpu::FilterMode::Linear,
+                                mipmap_filter: wgpu::FilterMode::Linear,
+                                anisotropy_clamp: 16, // Add anisotropic filtering
+                                ..Default::default()
+                            },
+                        )),
+                    },
+                    wgpu::BindGroupEntry {
+                        binding: 2,
+                        resource: watermark_buffer.as_entire_binding(),
+                    },
+                ],
+            });
+
+        let mut watermark_encoder =
+            constants
+                .device
+                .create_command_encoder(&wgpu::CommandEncoderDescriptor {
+                    label: Some("WatermarkEncoder"),
+                });
+
+        {
+            let mut render_pass =
+                watermark_encoder.begin_render_pass(&wgpu::RenderPassDescriptor {
+                    label: Some("WatermarkRenderPass"),
+                    color_attachments: &[Some(wgpu::RenderPassColorAttachment {
+                        view: get_either(texture_views, !output_is_left),
+                        resolve_target: None,
+                        ops: wgpu::Operations {
+                            load: wgpu::LoadOp::Load,
+                            store: wgpu::StoreOp::Store,
+                        },
+                    })],
+                    depth_stencil_attachment: None,
+                    timestamp_writes: None,
+                    occlusion_query_set: None,
+                });
+
+            render_pass.set_pipeline(&constants.watermark_pipeline.render_pipeline);
+            render_pass.set_bind_group(0, &watermark_bind_group, &[]);
+            render_pass.draw(0..6, 0..1); // Using 6 vertices for two triangles
+                                          // println!("Drew watermark with 6 vertices");
+        }
+
+        constants.queue.submit(Some(watermark_encoder.finish()));
+    }
+
     let output_texture_size = wgpu::Extent3d {
         width: uniforms.output_size.0,
         height: uniforms.output_size.1,
@@ -1844,7 +1965,7 @@ impl CursorPipeline {
                     format: wgpu::TextureFormat::Rgba8UnormSrgb,
                     blend: Some(wgpu::BlendState {
                         color: wgpu::BlendComponent {
-                            src_factor: wgpu::BlendFactor::SrcAlpha,
+                            src_factor: wgpu::BlendFactor::One,
                             dst_factor: wgpu::BlendFactor::OneMinusSrcAlpha,
                             operation: wgpu::BlendOperation::Add,
                         },
@@ -2003,3 +2124,125 @@ impl<T> Mul<f64> for Coord<T> {
         }
     }
 }
+
+struct WatermarkPipeline {
+    bind_group_layout: wgpu::BindGroupLayout,
+    render_pipeline: wgpu::RenderPipeline,
+}
+
+impl WatermarkPipeline {
+    pub fn new(device: &wgpu::Device) -> Self {
+        let bind_group_layout = device.create_bind_group_layout(&wgpu::BindGroupLayoutDescriptor {
+            label: Some("WatermarkBindGroupLayout"),
+            entries: &[
+                wgpu::BindGroupLayoutEntry {
+                    binding: 0,
+                    visibility: wgpu::ShaderStages::FRAGMENT,
+                    ty: wgpu::BindingType::Texture {
+                        sample_type: wgpu::TextureSampleType::Float { filterable: true },
+                        view_dimension: wgpu::TextureViewDimension::D2,
+                        multisampled: false,
+                    },
+                    count: None,
+                },
+                wgpu::BindGroupLayoutEntry {
+                    binding: 1,
+                    visibility: wgpu::ShaderStages::FRAGMENT,
+                    ty: wgpu::BindingType::Sampler(wgpu::SamplerBindingType::Filtering),
+                    count: None,
+                },
+                wgpu::BindGroupLayoutEntry {
+                    binding: 2,
+                    visibility: wgpu::ShaderStages::VERTEX_FRAGMENT,
+                    ty: wgpu::BindingType::Buffer {
+                        ty: wgpu::BufferBindingType::Uniform,
+                        has_dynamic_offset: false,
+                        min_binding_size: None,
+                    },
+                    count: None,
+                },
+            ],
+        });
+
+        let shader = device.create_shader_module(wgpu::ShaderModuleDescriptor {
+            label: Some("WatermarkShader"),
+            source: wgpu::ShaderSource::Wgsl(include_str!("shaders/watermark.wgsl").into()),
+        });
+
+        let empty_constants: HashMap<String, f64> = HashMap::new();
+
+        let render_pipeline = device.create_render_pipeline(&wgpu::RenderPipelineDescriptor {
+            label: Some("WatermarkPipeline"),
+            layout: Some(
+                &device.create_pipeline_layout(&wgpu::PipelineLayoutDescriptor {
+                    label: Some("WatermarkPipelineLayout"),
+                    bind_group_layouts: &[&bind_group_layout],
+                    push_constant_ranges: &[],
+                }),
+            ),
+            vertex: wgpu::VertexState {
+                module: &shader,
+                entry_point: "vs_main",
+                buffers: &[],
+                compilation_options: wgpu::PipelineCompilationOptions {
+                    constants: &empty_constants,
+                    zero_initialize_workgroup_memory: false,
+                    vertex_pulling_transform: false,
+                },
+            },
+            fragment: Some(wgpu::FragmentState {
+                module: &shader,
+                entry_point: "fs_main",
+                targets: &[Some(wgpu::ColorTargetState {
+                    format: wgpu::TextureFormat::Rgba8UnormSrgb,
+                    blend: Some(wgpu::BlendState {
+                        color: wgpu::BlendComponent {
+                            src_factor: wgpu::BlendFactor::One,
+                            dst_factor: wgpu::BlendFactor::OneMinusSrcAlpha,
+                            operation: wgpu::BlendOperation::Add,
+                        },
+                        alpha: wgpu::BlendComponent {
+                            src_factor: wgpu::BlendFactor::One,
+                            dst_factor: wgpu::BlendFactor::OneMinusSrcAlpha,
+                            operation: wgpu::BlendOperation::Add,
+                        },
+                    }),
+                    write_mask: wgpu::ColorWrites::ALL,
+                })],
+                compilation_options: wgpu::PipelineCompilationOptions {
+                    constants: &empty_constants,
+                    zero_initialize_workgroup_memory: false,
+                    vertex_pulling_transform: false,
+                },
+            }),
+            primitive: wgpu::PrimitiveState {
+                topology: wgpu::PrimitiveTopology::TriangleStrip,
+                strip_index_format: None,
+                front_face: wgpu::FrontFace::Ccw,
+                cull_mode: None,
+                unclipped_depth: false,
+                polygon_mode: wgpu::PolygonMode::Fill,
+                conservative: false,
+            },
+            depth_stencil: None,
+            multisample: wgpu::MultisampleState::default(),
+            multiview: None,
+            cache: None,
+        });
+
+        Self {
+            bind_group_layout,
+            render_pipeline,
+        }
+    }
+}
+
+#[repr(C)]
+#[derive(Copy, Clone, bytemuck::Pod, bytemuck::Zeroable)]
+struct WatermarkUniforms {
+    output_size: [f32; 2],
+    watermark_size: [f32; 2],
+    position: [f32; 2],
+    opacity: f32,
+    is_upgraded: f32,
+}
diff --git a/crates/rendering/src/project_recordings.rs b/crates/rendering/src/project_recordings.rs
index b6205744..fa5eab24 100644
--- a/crates/rendering/src/project_recordings.rs
+++ b/crates/rendering/src/project_recordings.rs
@@ -9,6 +9,7 @@ pub struct Video {
     pub duration: f64,
     pub width: u32,
     pub height: u32,
+    pub fps: u32,
 }
 
 impl Video {
@@ -26,12 +27,20 @@ impl Video {
             .video()
             .map_err(|e| format!("Failed to get video decoder: {}", e))?;
 
+        let rate = stream.avg_frame_rate();
+        let fps = rate.numerator() as f64 / rate.denominator() as f64;
+
         Ok(Video {
             width: video_decoder.width(),
             height: video_decoder.height(),
             duration: input.duration() as f64 / 1_000_000.0,
+            fps: fps.round() as u32,
         })
     }
+
+    pub fn fps(&self) -> u32 {
+        self.fps
+    }
 }
 
 #[derive(Debug, Clone, Copy, Serialize, Type)]
diff --git a/crates/rendering/src/shaders/watermark.wgsl b/crates/rendering/src/shaders/watermark.wgsl
new file mode 100644
index 00000000..425f3f88
--- /dev/null
+++ b/crates/rendering/src/shaders/watermark.wgsl
@@ -0,0 +1,53 @@
+struct VertexOutput {
+    @builtin(position) position: vec4<f32>,
+    @location(0) uv: vec2<f32>,
+};
+
+struct Uniforms {
+    output_size: vec2<f32>,
+    watermark_size: vec2<f32>,
+    position: vec2<f32>,
+    opacity: f32,
+    is_upgraded: f32,
+};
+
+@group(0) @binding(0) var watermark_texture: texture_2d<f32>;
+@group(0) @binding(1) var watermark_sampler: sampler;
+@group(0) @binding(2) var<uniform> uniforms: Uniforms;
+
+@vertex
+fn vs_main(@builtin(vertex_index) vertex_index: u32) -> VertexOutput {
+    var out: VertexOutput;
+    
+    // Define vertices for two triangles forming a quad
+    var positions = array<vec2<f32>, 6>(
+        vec2<f32>(0.0, 0.0),  // First triangle
+        vec2<f32>(1.0, 0.0),
+        vec2<f32>(0.0, 1.0),
+        vec2<f32>(0.0, 1.0),  // Second triangle
+        vec2<f32>(1.0, 0.0),
+        vec2<f32>(1.0, 1.0)
+    );
+    
+    let uv = positions[vertex_index];
+    
+    // Calculate position in screen space
+    let size = uniforms.watermark_size;
+    let pos = uniforms.position;
+    let screen_pos = pos + (uv * size);
+    
+    // Convert to clip space (-1 to 1)
+    let clip_pos = (screen_pos / uniforms.output_size) * 2.0 - 1.0;
+    out.position = vec4<f32>(clip_pos.x, -clip_pos.y, 0.0, 1.0);
+    out.uv = uv;
+    
+    return out;
+}
+
+@fragment
+fn fs_main(in: VertexOutput) -> @location(0) vec4<f32> {
+    let color = textureSample(watermark_texture, watermark_sampler, in.uv);
+    // Ensure the watermark is visible by using premultiplied alpha
+    let alpha = color.a * uniforms.opacity;
+    return vec4<f32>(color.rgb * alpha, alpha);
+} 
\ No newline at end of file
diff --git a/crates/rendering/src/zoom.rs b/crates/rendering/src/zoom.rs
index ed5eef22..298b6afa 100644
--- a/crates/rendering/src/zoom.rs
+++ b/crates/rendering/src/zoom.rs
@@ -7,6 +7,7 @@ pub struct ZoomKeyframe {
     pub scale: f64,
     pub position: ZoomPosition,
     pub has_segment: bool,
+    pub lowered: LoweredKeyframe,
 }
 #[derive(Debug, PartialEq, Clone, Copy)]
 pub enum ZoomPosition {
@@ -16,13 +17,15 @@ pub enum ZoomPosition {
 #[derive(Debug, PartialEq)]
 pub struct ZoomKeyframes(Vec<ZoomKeyframe>);
 
-pub const ZOOM_DURATION: f64 = 0.6;
+pub const ZOOM_DURATION: f64 = 1.0;
 
 #[derive(Debug, PartialEq, Clone, Copy)]
 pub struct InterpolatedZoom {
     pub amount: f64,
     pub t: f64,
     pub position: ZoomPosition,
+    pub time_t: f64,
+    pub lowered: LoweredKeyframe,
 }
 
 impl ZoomKeyframes {
@@ -50,6 +53,11 @@ impl ZoomKeyframes {
             let prev = if i > 0 { segments.get(i - 1) } else { None };
             let next = segments.get(i + 1);
 
+            let lowered_position = match segment.mode {
+                cap_project::ZoomMode::Auto => (0.0, 0.0),
+                cap_project::ZoomMode::Manual { x, y } => (x, y),
+            };
+
             if let Some(prev) = prev {
                 if prev.end + ZOOM_DURATION < segment.start {
                     // keyframes.push(ZoomKeyframe {
@@ -64,6 +72,7 @@ impl ZoomKeyframes {
                     scale: segment.amount,
                     position,
                     has_segment: true,
+                    lowered: LoweredKeyframe::new(lowered_position, segment.amount as f32),
                 });
             } else {
                 if segment.start != 0.0 {
@@ -73,18 +82,21 @@ impl ZoomKeyframes {
                             scale: 1.0,
                             position: ZoomPosition::Manual { x: 0.0, y: 0.0 },
                             has_segment: false,
+                            lowered: LoweredKeyframe::new((0.0, 0.0), 1.0),
                         },
                         ZoomKeyframe {
                             time: segment.start,
                             scale: 1.0,
                             position,
                             has_segment: true,
+                            lowered: LoweredKeyframe::new(lowered_position, 1.0),
                         },
                         ZoomKeyframe {
                             time: segment.start + ZOOM_DURATION,
                             scale: segment.amount,
                             position,
                             has_segment: true,
+                            lowered: LoweredKeyframe::new(lowered_position, segment.amount as f32),
                         },
                     ]);
                 } else {
@@ -93,6 +105,7 @@ impl ZoomKeyframes {
                         scale: segment.amount,
                         position,
                         has_segment: true,
+                        lowered: LoweredKeyframe::new(lowered_position, segment.amount as f32),
                     });
                 }
             }
@@ -102,6 +115,7 @@ impl ZoomKeyframes {
                 scale: segment.amount,
                 position,
                 has_segment: true,
+                lowered: LoweredKeyframe::new(lowered_position, segment.amount as f32),
             });
 
             if let Some(next) = next {
@@ -114,6 +128,10 @@ impl ZoomKeyframes {
                         scale: 1.0 * t + (1.0 - t) * segment.amount,
                         position,
                         has_segment: false,
+                        lowered: LoweredKeyframe::new(
+                            lowered_position,
+                            (1.0 * t + (1.0 - t) * segment.amount) as f32,
+                        ),
                     });
                 }
             } else {
@@ -122,6 +140,7 @@ impl ZoomKeyframes {
                     scale: 1.0,
                     position,
                     has_segment: false,
+                    lowered: LoweredKeyframe::new(lowered_position, 1.0),
                 });
             }
         }
@@ -134,6 +153,8 @@ impl ZoomKeyframes {
             amount: 1.0,
             position: ZoomPosition::Manual { x: 0.0, y: 0.0 },
             t: 0.0,
+            time_t: 0.0,
+            lowered: LoweredKeyframe::new((0.0, 0.0), 1.0),
         };
 
         if !FLAGS.zoom {
@@ -166,57 +187,95 @@ impl ZoomKeyframes {
             bezier_easing::bezier_easing(0.5, 0.0, 0.5, 1.0).unwrap()
         };
 
-        let time_t = delta_time / keyframe_length;
+        let time_t_raw = delta_time / keyframe_length;
 
         let keyframe_diff = next.scale - prev.scale;
 
-        let amount = prev.scale + (keyframe_diff) * time_t;
+        // let time_t = ease(time_t_raw as f32) as f64;
+        let time_t = time_t_raw;
 
-        let time_t = ease(time_t as f32) as f64;
+        let amount = prev.scale + (keyframe_diff) * time_t;
 
         // the process we use to get to this is way too convoluted lol
-        let t = ease(
-            (if prev.scale > 1.0 && next.scale > 1.0 {
-                if !next.has_segment {
-                    (amount - 1.0) / (prev.scale - 1.0)
-                } else if !prev.has_segment {
-                    (amount - 1.0) / (next.scale - 1.0)
-                } else {
-                    1.0
-                }
-            } else if next.scale > 1.0 {
-                (amount - 1.0) / (next.scale - 1.0)
-            } else if prev.scale > 1.0 {
+        let t = if prev.scale > 1.0 && next.scale > 1.0 {
+            if !next.has_segment {
                 (amount - 1.0) / (prev.scale - 1.0)
+            } else if !prev.has_segment {
+                (amount - 1.0) / (next.scale - 1.0)
             } else {
-                0.0
-            }) as f32,
-        ) as f64;
+                1.0
+            }
+        } else if next.scale > 1.0 {
+            (amount - 1.0) / (next.scale - 1.0)
+        } else if prev.scale > 1.0 {
+            (amount - 1.0) / (prev.scale - 1.0)
+        } else {
+            0.0
+        };
 
         let position = match (&prev.position, &next.position) {
             (ZoomPosition::Manual { x: x1, y: y1 }, ZoomPosition::Manual { x: x2, y: y2 }) => {
                 ZoomPosition::Manual {
-                    x: x1 + (x2 - x1) * time_t as f32,
-                    y: y1 + (y2 - y1) * time_t as f32,
+                    x: x1 + (x2 - x1) * time_t_raw as f32,
+                    y: y1 + (y2 - y1) * time_t_raw as f32,
                 }
             }
             _ => ZoomPosition::Manual { x: 0.0, y: 0.0 },
         };
 
+        let eased_time_t = ease(time_t as f32);
+
         InterpolatedZoom {
-            amount: if next.scale > prev.scale {
-                prev.scale + (next.scale - prev.scale) * t
-            } else {
-                prev.scale + (next.scale - prev.scale) * (1.0 - t)
-            },
+            time_t,
+            amount: prev.scale + (next.scale - prev.scale) * time_t,
             position,
-            t,
+            t: ease(t as f32) as f64,
+            lowered: LoweredKeyframe {
+                top_left: {
+                    let prev = prev.lowered.top_left;
+                    let next = next.lowered.top_left;
+
+                    (
+                        prev.0 + (next.0 - prev.0) * eased_time_t,
+                        prev.1 + (next.1 - prev.1) * eased_time_t,
+                    )
+                },
+                bottom_right: {
+                    let prev = prev.lowered.bottom_right;
+                    let next = next.lowered.bottom_right;
+
+                    (
+                        prev.0 + (next.0 - prev.0) * eased_time_t,
+                        prev.1 + (next.1 - prev.1) * eased_time_t,
+                    )
+                },
+            },
+        }
+    }
+}
+
+#[derive(Debug, PartialEq, Clone, Copy)]
+pub struct LoweredKeyframe {
+    pub top_left: (f32, f32),
+    pub bottom_right: (f32, f32),
+}
+
+impl LoweredKeyframe {
+    fn new(center: (f32, f32), amount: f32) -> Self {
+        let scaled_center = (center.0 * amount, center.1 * amount);
+        let center_diff = (scaled_center.0 - center.0, scaled_center.1 - center.1);
+
+        Self {
+            top_left: (0.0 - center_diff.0, 0.0 - center_diff.1),
+            bottom_right: (amount - center_diff.0, amount - center_diff.1),
         }
     }
 }
 
 #[cfg(test)]
 mod test {
+    use cap_project::ZoomMode;
+
     use super::*;
 
     #[test]
@@ -238,30 +297,35 @@ mod test {
                     scale: 1.0,
                     position: ZoomPosition::Manual { x: 0.0, y: 0.0 },
                     has_segment: false,
+                    lowered: LoweredKeyframe::new((0.0, 0.0), 1.0)
                 },
                 ZoomKeyframe {
                     time: 0.5,
                     scale: 1.0,
                     position: ZoomPosition::Manual { x: 0.2, y: 0.2 },
                     has_segment: true,
+                    lowered: LoweredKeyframe::new((0.2, 0.2), 1.0)
                 },
                 ZoomKeyframe {
                     time: 0.5 + ZOOM_DURATION,
                     scale: 1.5,
                     position: ZoomPosition::Manual { x: 0.2, y: 0.2 },
                     has_segment: true,
+                    lowered: LoweredKeyframe::new((0.2, 0.2), 1.5)
                 },
                 ZoomKeyframe {
                     time: 1.5,
                     scale: 1.5,
                     position: ZoomPosition::Manual { x: 0.2, y: 0.2 },
                     has_segment: true,
+                    lowered: LoweredKeyframe::new((0.2, 0.2), 1.5)
                 },
                 ZoomKeyframe {
                     time: 1.5 + ZOOM_DURATION,
                     scale: 1.0,
                     position: ZoomPosition::Manual { x: 0.2, y: 0.2 },
                     has_segment: false,
+                    lowered: LoweredKeyframe::new((0.2, 0.2), 1.0)
                 }
             ])
         );
@@ -294,42 +358,49 @@ mod test {
                     scale: 1.0,
                     position: ZoomPosition::Manual { x: 0.0, y: 0.0 },
                     has_segment: false,
+                    lowered: LoweredKeyframe::new((0.0, 0.0), 1.0)
                 },
                 ZoomKeyframe {
                     time: 0.5,
                     scale: 1.0,
                     position: ZoomPosition::Manual { x: 0.2, y: 0.2 },
                     has_segment: true,
+                    lowered: LoweredKeyframe::new((0.2, 0.2), 1.0)
                 },
                 ZoomKeyframe {
                     time: 0.5 + ZOOM_DURATION,
                     scale: 1.5,
                     position: ZoomPosition::Manual { x: 0.2, y: 0.2 },
                     has_segment: true,
+                    lowered: LoweredKeyframe::new((0.2, 0.2), 1.5)
                 },
                 ZoomKeyframe {
                     time: 1.5,
                     scale: 1.5,
                     position: ZoomPosition::Manual { x: 0.2, y: 0.2 },
                     has_segment: true,
+                    lowered: LoweredKeyframe::new((0.2, 0.2), 1.5)
                 },
                 ZoomKeyframe {
                     time: 1.5 + ZOOM_DURATION,
                     scale: 1.5,
                     position: ZoomPosition::Manual { x: 0.8, y: 0.8 },
                     has_segment: true,
+                    lowered: LoweredKeyframe::new((0.8, 0.8), 1.5)
                 },
                 ZoomKeyframe {
                     time: 2.5,
                     scale: 1.5,
                     position: ZoomPosition::Manual { x: 0.8, y: 0.8 },
                     has_segment: true,
+                    lowered: LoweredKeyframe::new((0.8, 0.8), 1.5)
                 },
                 ZoomKeyframe {
                     time: 2.5 + ZOOM_DURATION,
                     scale: 1.0,
                     position: ZoomPosition::Manual { x: 0.8, y: 0.8 },
                     has_segment: false,
+                    lowered: LoweredKeyframe::new((0.8, 0.8), 1.0)
                 }
             ])
         );
@@ -362,42 +433,49 @@ mod test {
                     scale: 1.0,
                     position: ZoomPosition::Manual { x: 0.0, y: 0.0 },
                     has_segment: false,
+                    lowered: LoweredKeyframe::new((0.0, 0.0), 1.0)
                 },
                 ZoomKeyframe {
                     time: 0.5,
                     scale: 1.0,
                     position: ZoomPosition::Manual { x: 0.2, y: 0.2 },
                     has_segment: true,
+                    lowered: LoweredKeyframe::new((0.2, 0.2), 1.0)
                 },
                 ZoomKeyframe {
                     time: 0.5 + ZOOM_DURATION,
                     scale: 1.5,
                     position: ZoomPosition::Manual { x: 0.2, y: 0.2 },
                     has_segment: true,
+                    lowered: LoweredKeyframe::new((0.2, 0.2), 1.5)
                 },
                 ZoomKeyframe {
                     time: 1.5,
                     scale: 1.5,
                     position: ZoomPosition::Manual { x: 0.2, y: 0.2 },
                     has_segment: true,
+                    lowered: LoweredKeyframe::new((0.2, 0.2), 1.5)
                 },
                 ZoomKeyframe {
                     time: 1.5 + ZOOM_DURATION,
                     scale: 2.0,
                     position: ZoomPosition::Manual { x: 0.2, y: 0.2 },
                     has_segment: true,
+                    lowered: LoweredKeyframe::new((0.2, 0.2), 2.0)
                 },
                 ZoomKeyframe {
                     time: 2.5,
                     scale: 2.0,
                     position: ZoomPosition::Manual { x: 0.2, y: 0.2 },
                     has_segment: true,
+                    lowered: LoweredKeyframe::new((0.2, 0.2), 2.0)
                 },
                 ZoomKeyframe {
                     time: 2.5 + ZOOM_DURATION,
                     scale: 1.0,
                     position: ZoomPosition::Manual { x: 0.2, y: 0.2 },
                     has_segment: false,
+                    lowered: LoweredKeyframe::new((0.2, 0.2), 1.0)
                 }
             ])
         );
@@ -428,6 +506,7 @@ mod test {
             scale: 1.0,
             position,
             has_segment: true,
+            lowered: LoweredKeyframe::new((0.0, 0.0), 1.0),
         };
 
         pretty_assertions::assert_eq!(
@@ -437,41 +516,46 @@ mod test {
                     has_segment: false,
                     ..base
                 },
-                ZoomKeyframe {
-                    time: 0.5,
-                    scale: 1.0,
-                    ..base
-                },
+                ZoomKeyframe { time: 0.5, ..base },
                 ZoomKeyframe {
                     time: 0.5 + ZOOM_DURATION,
                     scale: 1.5,
+                    lowered: LoweredKeyframe::new((0.0, 0.0), 1.5),
                     ..base
                 },
                 ZoomKeyframe {
                     time: 1.5,
                     scale: 1.5,
+                    lowered: LoweredKeyframe::new((0.0, 0.0), 1.5),
                     ..base
                 },
                 ZoomKeyframe {
                     time: 1.8,
                     scale: 1.5 - (0.3 / ZOOM_DURATION) * 0.5,
+                    lowered: LoweredKeyframe::new(
+                        (0.0, 0.0),
+                        1.5 - (0.3 / ZOOM_DURATION as f32) * 0.5
+                    ),
                     has_segment: false,
                     ..base
                 },
                 ZoomKeyframe {
                     time: 1.8 + ZOOM_DURATION,
                     scale: 1.5,
+                    lowered: LoweredKeyframe::new((0.0, 0.0), 1.5),
                     ..base
                 },
                 ZoomKeyframe {
                     time: 2.5,
                     scale: 1.5,
+                    lowered: LoweredKeyframe::new((0.0, 0.0), 1.5),
                     ..base
                 },
                 ZoomKeyframe {
                     time: 2.5 + ZOOM_DURATION,
                     scale: 1.0,
                     has_segment: false,
+                    lowered: LoweredKeyframe::new((0.0, 0.0), 1.0),
                     ..base
                 }
             ])
@@ -503,6 +587,7 @@ mod test {
             scale: 1.0,
             position,
             has_segment: true,
+            lowered: LoweredKeyframe::new((0.0, 0.0), 1.0),
         };
 
         pretty_assertions::assert_eq!(
@@ -514,36 +599,116 @@ mod test {
                 },
                 ZoomKeyframe {
                     time: 0.3966305848375451,
-                    scale: 1.0,
                     ..base
                 },
                 ZoomKeyframe {
                     time: 0.3966305848375451 + ZOOM_DURATION,
                     scale: 1.176,
+                    lowered: LoweredKeyframe::new((0.0, 0.0), 1.176),
                     ..base
                 },
                 ZoomKeyframe {
                     time: 1.396630584837545,
                     scale: 1.176,
+                    lowered: LoweredKeyframe::new((0.0, 0.0), 1.176),
                     ..base
                 },
                 ZoomKeyframe {
                     time: 1.396630584837545 + ZOOM_DURATION,
                     scale: 1.204,
+                    lowered: LoweredKeyframe::new((0.0, 0.0), 1.204),
                     ..base
                 },
                 ZoomKeyframe {
                     time: 3.21881273465704,
                     scale: 1.204,
+                    lowered: LoweredKeyframe::new((0.0, 0.0), 1.204),
                     ..base
                 },
                 ZoomKeyframe {
                     time: 3.21881273465704 + ZOOM_DURATION,
-                    scale: 1.0,
                     has_segment: false,
                     ..base
                 },
             ])
         );
     }
+
+    mod interpolate {
+        use super::*;
+
+        #[test]
+        fn amount() {
+            let keyframes = ZoomKeyframes::from_zoom_segments(&[
+                ZoomSegment {
+                    start: 0.0,
+                    end: 1.0,
+                    amount: 1.2,
+                    mode: ZoomMode::Manual { x: 0.0, y: 0.0 },
+                },
+                ZoomSegment {
+                    start: 1.0,
+                    end: 2.0,
+                    amount: 1.5,
+                    mode: ZoomMode::Manual { x: 0.0, y: 0.0 },
+                },
+            ]);
+
+            assert_eq!(keyframes.interpolate(0.0).amount, 1.2);
+            assert_eq!(keyframes.interpolate(1.0).amount, 1.2);
+            assert_eq!(keyframes.interpolate(2.0).amount, 1.5);
+        }
+
+        #[test]
+        fn t() {
+            let keyframes = ZoomKeyframes::from_zoom_segments(&[
+                ZoomSegment {
+                    start: 0.0,
+                    end: 1.0,
+                    amount: 1.2,
+                    mode: ZoomMode::Manual { x: 0.0, y: 0.0 },
+                },
+                ZoomSegment {
+                    start: 1.0,
+                    end: 2.0,
+                    amount: 1.5,
+                    mode: ZoomMode::Manual { x: 0.0, y: 0.0 },
+                },
+            ]);
+
+            assert_eq!(keyframes.interpolate(0.0).t, 1.0);
+            assert_eq!(keyframes.interpolate(1.0).t, 1.0);
+            assert_eq!(keyframes.interpolate(2.0).t, 1.0);
+            assert_eq!(keyframes.interpolate(2.0 + ZOOM_DURATION).t, 0.0);
+        }
+    }
+
+    mod new_keyframe_lowering {
+        use super::*;
+
+        #[test]
+        fn basic() {
+            let center = (0.0, 0.0);
+            let amount = 2.0;
+
+            assert_eq!(
+                LoweredKeyframe::new(center, amount),
+                LoweredKeyframe {
+                    top_left: (0.0, 0.0),
+                    bottom_right: (2.0, 2.0)
+                }
+            );
+
+            let center = (1.0, 1.0);
+            let amount = 2.0;
+
+            assert_eq!(
+                LoweredKeyframe::new(center, amount),
+                LoweredKeyframe {
+                    top_left: (-1.0, -1.0),
+                    bottom_right: (1.0, 1.0)
+                }
+            );
+        }
+    }
 }
diff --git a/package.json b/package.json
index 3c43939c..33c09c85 100644
--- a/package.json
+++ b/package.json
@@ -2,8 +2,8 @@
   "type": "module",
   "scripts": {
     "build": "dotenv -e .env -- turbo run build",
-    "dev": "(cd apps/web && docker compose up -d && cd ../..) && dotenv -e .env -- pnpm --dir packages/database db:generate && dotenv -e .env -- pnpm --dir packages/database db:push && dotenv -e .env -- turbo run dev --no-cache --concurrency 12",
-    "dev:manual": "dotenv -e .env -- turbo run dev --no-cache --concurrency 1",
+    "dev": "(cd apps/web && docker compose up -d && cd ../..) && dotenv -e .env -- pnpm --dir packages/database db:generate && dotenv -e .env -- pnpm --dir packages/database db:push && dotenv -e .env -- turbo run dev --filter=!@cap/storybook --no-cache --concurrency 12",
+    "dev:manual": "dotenv -e .env -- turbo run dev --filter=!@cap/storybook --no-cache --concurrency 1",
     "lint": "turbo run lint",
     "format": "prettier --write \"**/*.{ts,tsx,md}\"",
     "db:push": "dotenv -e .env -- pnpm --dir packages/database db:push",
diff --git a/packages/ui-solid/src/auto-imports.d.ts b/packages/ui-solid/src/auto-imports.d.ts
index e11b6f9e..a814bce9 100644
--- a/packages/ui-solid/src/auto-imports.d.ts
+++ b/packages/ui-solid/src/auto-imports.d.ts
@@ -65,6 +65,7 @@ declare global {
   const IconLucideRotateCcw: typeof import('~icons/lucide/rotate-ccw.jsx')['default']
   const IconLucideSearch: typeof import('~icons/lucide/search.jsx')['default']
   const IconLucideSquarePlay: typeof import('~icons/lucide/square-play.jsx')['default']
+  const IconLucideVideo: typeof import('~icons/lucide/video.jsx')['default']
   const IconLucideVolume2: typeof import('~icons/lucide/volume2.jsx')['default']
   const IconLucideVolumeX: typeof import('~icons/lucide/volume-x.jsx')['default']
 }