diff --git a/apps/desktop/src/routes/editor/ConfigSidebar.tsx b/apps/desktop/src/routes/editor/ConfigSidebar.tsx
index 2e72ed3bc9..2e51a3cd06 100644
--- a/apps/desktop/src/routes/editor/ConfigSidebar.tsx
+++ b/apps/desktop/src/routes/editor/ConfigSidebar.tsx
@@ -258,7 +258,7 @@ export function ConfigSidebar() {
 	return (
 		<KTabs
 			value={editorState.timeline.selection ? undefined : state.selectedTab}
-			class="flex flex-col min-h-0 shrink-0 flex-1 max-w-[26rem] overflow-hidden rounded-xl z-10 relative bg-gray-1 dark:bg-gray-2 border border-gray-3"
+			class="flex flex-col min-h-0 shrink-0 flex-1 max-w-[26rem] overflow-hidden rounded-xl z-10 bg-gray-1 dark:bg-gray-2 border border-gray-3"
 		>
 			<KTabs.List class="flex overflow-hidden sticky top-0 z-[60] flex-row items-center h-16 text-lg border-b border-gray-3 shrink-0 bg-gray-1 dark:bg-gray-2">
 				<For
@@ -332,11 +332,14 @@ export function ConfigSidebar() {
 				style={{
 					"--margin-top-scroll": "5px",
 				}}
-				class="p-4 custom-scroll overflow-x-hidden overflow-y-scroll text-[0.875rem] flex-1 min-h-0"
+				class="custom-scroll overflow-x-hidden overflow-y-scroll text-[0.875rem] flex-1 min-h-0"
 			>
 				<BackgroundConfig scrollRef={scrollRef} />
 				<CameraConfig scrollRef={scrollRef} />
-				<KTabs.Content value="audio" class="flex flex-col gap-6">
+				<KTabs.Content
+					value="audio"
+					class="flex flex-col flex-1 gap-6 p-4 min-h-0"
+				>
 					<Field
 						name="Audio Controls"
 						icon={<IconLucideVolume2 class="size-4" />}
@@ -452,7 +455,10 @@ export function ConfigSidebar() {
 						</Field>
 					)}
 				</KTabs.Content>
-				<KTabs.Content value="cursor" class="flex flex-col gap-6">
+				<KTabs.Content
+					value="cursor"
+					class="flex flex-col flex-1 gap-6 p-4 min-h-0"
+				>
 					<Field
 						name="Cursor"
 						icon={<IconCapCursor />}
@@ -623,7 +629,7 @@ export function ConfigSidebar() {
             </RadioGroup>
           </Field> */}
 				</KTabs.Content>
-				<KTabs.Content value="hotkeys">
+				<KTabs.Content value="hotkeys" class="flex flex-1 p-4 min-h-0">
 					<Field name="Hotkeys" icon={<IconCapHotkeys />}>
 						<ComingSoonTooltip>
 							<Subfield name="Show hotkeys">
@@ -632,7 +638,10 @@ export function ConfigSidebar() {
 						</ComingSoonTooltip>
 					</Field>
 				</KTabs.Content>
-				<KTabs.Content value="captions" class="flex flex-col gap-6">
+				<KTabs.Content
+					value="captions"
+					class="flex flex-col flex-1 gap-6 p-4 min-h-0"
+				>
 					<CaptionsTab />
 				</KTabs.Content>
 			</div>
@@ -1040,7 +1049,7 @@ function BackgroundConfig(props: { scrollRef: HTMLDivElement }) {
 	const hapticsEnabled = ostype() === "macos";
 
 	return (
-		<KTabs.Content value={TAB_IDS.background} class="flex flex-col gap-6">
+		<KTabs.Content value={TAB_IDS.background} class="flex flex-col gap-6 p-4">
 			<Field icon={<IconCapImage class="size-4" />} name="Background Image">
 				<KTabs
 					value={project.background.source.type}
@@ -1529,112 +1538,110 @@ function BackgroundConfig(props: { scrollRef: HTMLDivElement }) {
 								const angle = () => source().angle ?? 90;
 
 								return (
-									<>
-										<div class="flex flex-col gap-3">
-											<div class="flex gap-5 h-10">
-												<RgbInput
-													value={source().from}
-													onChange={(from) => {
-														backgrounds.gradient.from = from;
-														setProject("background", "source", {
-															type: "gradient",
-															from,
-														});
-													}}
-												/>
-												<RgbInput
-													value={source().to}
-													onChange={(to) => {
-														backgrounds.gradient.to = to;
-														setProject("background", "source", {
-															type: "gradient",
-															to,
-														});
-													}}
-												/>
-												<div
-													class="flex relative flex-col items-center p-1 ml-auto rounded-full border bg-gray-1 border-gray-3 size-10 cursor-ns-resize shrink-0"
-													style={{ transform: `rotate(${angle()}deg)` }}
-													onMouseDown={(downEvent) => {
-														const start = angle();
-														const resumeHistory = projectHistory.pause();
-
-														createRoot((dispose) =>
-															createEventListenerMap(window, {
-																mouseup: () => dispose(),
-																mousemove: (moveEvent) => {
-																	const rawNewAngle =
-																		Math.round(
-																			start +
-																				(downEvent.clientY - moveEvent.clientY),
-																		) % max;
-																	const newAngle = moveEvent.shiftKey
-																		? rawNewAngle
-																		: Math.round(rawNewAngle / 45) * 45;
-
-																	if (
-																		!moveEvent.shiftKey &&
-																		hapticsEnabled &&
-																		project.background.source.type ===
-																			"gradient" &&
-																		project.background.source.angle !== newAngle
-																	) {
-																		commands.performHapticFeedback(
-																			"alignment",
-																			"now",
-																		);
-																	}
-
-																	setProject("background", "source", {
-																		type: "gradient",
-																		angle:
-																			newAngle < 0 ? newAngle + max : newAngle,
-																	});
-																},
-															}),
-														);
-													}}
-												>
-													<div class="bg-blue-9 rounded-full size-1.5" />
-												</div>
-											</div>
-											<div class="flex flex-wrap gap-2">
-												<For each={BACKGROUND_GRADIENTS}>
-													{(gradient) => (
-														<label class="relative">
-															<input
-																type="radio"
-																class="sr-only peer"
-																name="colorPicker"
-																onChange={(e) => {
-																	if (e.target.checked) {
-																		backgrounds.gradient = {
-																			type: "gradient",
-																			from: gradient.from,
-																			to: gradient.to,
-																		};
-																		setProject(
-																			"background",
-																			"source",
-																			backgrounds.gradient,
-																		);
-																	}
-																}}
-															/>
-															<div
-																class="rounded-lg transition-all duration-200 cursor-pointer size-8 peer-checked:hover:opacity-100 peer-hover:opacity-70 peer-checked:ring-2 peer-checked:ring-gray-500 peer-checked:ring-offset-2 peer-checked:ring-offset-gray-200"
-																style={{
-																	background: `linear-gradient(${angle()}deg, rgb(${gradient.from.join(
-																		",",
-																	)}), rgb(${gradient.to.join(",")}))`,
-																}}
-															/>
-														</label>
-													)}
-												</For>
+									<div class="flex flex-col gap-3">
+										<div class="flex gap-5 h-10">
+											<RgbInput
+												value={source().from}
+												onChange={(from) => {
+													backgrounds.gradient.from = from;
+													setProject("background", "source", {
+														type: "gradient",
+														from,
+													});
+												}}
+											/>
+											<RgbInput
+												value={source().to}
+												onChange={(to) => {
+													backgrounds.gradient.to = to;
+													setProject("background", "source", {
+														type: "gradient",
+														to,
+													});
+												}}
+											/>
+											<div
+												class="flex relative flex-col items-center p-1 ml-auto rounded-full border bg-gray-1 border-gray-3 size-10 cursor-ns-resize shrink-0"
+												style={{ transform: `rotate(${angle()}deg)` }}
+												onMouseDown={(downEvent) => {
+													const start = angle();
+													const resumeHistory = projectHistory.pause();
+
+													createRoot((dispose) =>
+														createEventListenerMap(window, {
+															mouseup: () => dispose(),
+															mousemove: (moveEvent) => {
+																const rawNewAngle =
+																	Math.round(
+																		start +
+																			(downEvent.clientY - moveEvent.clientY),
+																	) % max;
+																const newAngle = moveEvent.shiftKey
+																	? rawNewAngle
+																	: Math.round(rawNewAngle / 45) * 45;
+
+																if (
+																	!moveEvent.shiftKey &&
+																	hapticsEnabled &&
+																	project.background.source.type ===
+																		"gradient" &&
+																	project.background.source.angle !== newAngle
+																) {
+																	commands.performHapticFeedback(
+																		"alignment",
+																		"now",
+																	);
+																}
+
+																setProject("background", "source", {
+																	type: "gradient",
+																	angle:
+																		newAngle < 0 ? newAngle + max : newAngle,
+																});
+															},
+														}),
+													);
+												}}
+											>
+												<div class="bg-blue-9 rounded-full size-1.5" />
 											</div>
 										</div>
-									</>
+										<div class="flex flex-wrap gap-2">
+											<For each={BACKGROUND_GRADIENTS}>
+												{(gradient) => (
+													<label class="relative">
+														<input
+															type="radio"
+															class="sr-only peer"
+															name="colorPicker"
+															onChange={(e) => {
+																if (e.target.checked) {
+																	backgrounds.gradient = {
+																		type: "gradient",
+																		from: gradient.from,
+																		to: gradient.to,
+																	};
+																	setProject(
+																		"background",
+																		"source",
+																		backgrounds.gradient,
+																	);
+																}
+															}}
+														/>
+														<div
+															class="rounded-lg transition-all duration-200 cursor-pointer size-8 peer-checked:hover:opacity-100 peer-hover:opacity-70 peer-checked:ring-2 peer-checked:ring-gray-500 peer-checked:ring-offset-2 peer-checked:ring-offset-gray-200"
+															style={{
+																background: `linear-gradient(${angle()}deg, rgb(${gradient.from.join(
+																	",",
+																)}), rgb(${gradient.to.join(",")}))`,
+															}}
+														/>
+													</label>
+												)}
+											</For>
+										</div>
+									</div>
 								);
 							}}
 						</Show>
@@ -1688,6 +1695,17 @@ function BackgroundConfig(props: { scrollRef: HTMLDivElement }) {
 								opacity: 50.0,
 							};
 
+							if (props.scrollRef && enabled) {
+								setTimeout(
+									() =>
+										props.scrollRef.scrollTo({
+											top: props.scrollRef.scrollHeight,
+											behavior: "smooth",
+										}),
+									100,
+								);
+							}
+
 							setProject("background", "border", {
 								...prev,
 								enabled,
@@ -1696,64 +1714,71 @@ function BackgroundConfig(props: { scrollRef: HTMLDivElement }) {
 					/>
 				}
 			/>
-			<Show when={project.background.border?.enabled}>
-				<Field name="Border Width" icon={<IconCapEnlarge class="size-4" />}>
-					<Slider
-						value={[project.background.border?.width ?? 5.0]}
-						onChange={(v) =>
-							setProject("background", "border", {
-								...(project.background.border ?? {
-									enabled: true,
-									width: 5.0,
-									color: [0, 0, 0],
-									opacity: 50.0,
-								}),
-								width: v[0],
-							})
-						}
-						minValue={1}
-						maxValue={20}
-						step={0.1}
-						formatTooltip="px"
-					/>
-				</Field>
-				<Field name="Border Color" icon={<IconCapImage class="size-4" />}>
-					<RgbInput
-						value={project.background.border?.color ?? [0, 0, 0]}
-						onChange={(color) =>
-							setProject("background", "border", {
-								...(project.background.border ?? {
-									enabled: true,
-									width: 5.0,
-									color: [0, 0, 0],
-									opacity: 50.0,
-								}),
-								color,
-							})
-						}
-					/>
-				</Field>
-				<Field name="Border Opacity" icon={<IconCapShadow class="size-4" />}>
-					<Slider
-						value={[project.background.border?.opacity ?? 50.0]}
-						onChange={(v) =>
-							setProject("background", "border", {
-								...(project.background.border ?? {
-									enabled: true,
-									width: 5.0,
-									color: [0, 0, 0],
-									opacity: 50.0,
-								}),
-								opacity: v[0],
-							})
-						}
-						minValue={0}
-						maxValue={100}
-						step={0.1}
-						formatTooltip="%"
-					/>
-				</Field>
-			</Show>
+			<KCollapsible open={project.background.border?.enabled ?? false}>
+				<KCollapsible.Content class="overflow-hidden opacity-0 transition-opacity animate-collapsible-up ui-expanded:animate-collapsible-down ui-expanded:opacity-100">
+					<div class="flex flex-col gap-6 pb-6">
+						<Field name="Border Width" icon={<IconCapEnlarge class="size-4" />}>
+							<Slider
+								value={[project.background.border?.width ?? 5.0]}
+								onChange={(v) =>
+									setProject("background", "border", {
+										...(project.background.border ?? {
+											enabled: true,
+											width: 5.0,
+											color: [0, 0, 0],
+											opacity: 50.0,
+										}),
+										width: v[0],
+									})
+								}
+								minValue={1}
+								maxValue={20}
+								step={0.1}
+								formatTooltip="px"
+							/>
+						</Field>
+						<Field name="Border Color" icon={<IconCapImage class="size-4" />}>
+							<RgbInput
+								value={project.background.border?.color ?? [0, 0, 0]}
+								onChange={(color) =>
+									setProject("background", "border", {
+										...(project.background.border ?? {
+											enabled: true,
+											width: 5.0,
+											color: [0, 0, 0],
+											opacity: 50.0,
+										}),
+										color,
+									})
+								}
+							/>
+						</Field>
+						<Field
+							name="Border Opacity"
+							icon={<IconCapShadow class="size-4" />}
+						>
+							<Slider
+								value={[project.background.border?.opacity ?? 50.0]}
+								onChange={(v) =>
+									setProject("background", "border", {
+										...(project.background.border ?? {
+											enabled: true,
+											width: 5.0,
+											color: [0, 0, 0],
+											opacity: 50.0,
+										}),
+										opacity: v[0],
+									})
+								}
+								minValue={0}
+								maxValue={100}
+								step={0.1}
+								formatTooltip="%"
+							/>
+						</Field>
+					</div>
+				</KCollapsible.Content>
+			</KCollapsible>
 			<Field name="Shadow" icon={<IconCapShadow class="size-4" />}>
 				<Slider
 					value={[project.background.shadow!]}
@@ -1775,6 +1800,7 @@ function BackgroundConfig(props: { scrollRef: HTMLDivElement }) {
 					step={0.1}
 					formatTooltip="%"
 				/>
+
 				<ShadowSettings
 					scrollRef={props.scrollRef}
 					size={{
diff --git a/apps/desktop/src/routes/editor/ShadowSettings.tsx b/apps/desktop/src/routes/editor/ShadowSettings.tsx
index cd67d95ae9..2633ce61c1 100644
--- a/apps/desktop/src/routes/editor/ShadowSettings.tsx
+++ b/apps/desktop/src/routes/editor/ShadowSettings.tsx
@@ -1,3 +1,4 @@
+import { Collapsible as KCollapsible } from "@kobalte/core/collapsible";
 import { cx } from "cva";
 import { createSignal } from "solid-js";
 import { Field, Slider } from "./ui";
@@ -23,24 +24,24 @@ const ShadowSettings = (props: Props) => {
 
 	const handleToggle = () => {
 		setIsOpen(!isOpen());
-		if (props.scrollRef) {
-			setTimeout(() => {
-				props.scrollRef!.scrollTo({
-					top: props.scrollRef!.scrollHeight,
+		setTimeout(() => {
+			if (props.scrollRef) {
+				props.scrollRef.scrollTo({
+					top: props.scrollRef.scrollHeight,
 					behavior: "smooth",
 				});
-			}, 50);
-		}
+			}
+		}, 200);
 	};
 
 	return (
-		<div class="w-full">
+		<div class="w-full h-full">
 			<button
 				type="button"
 				onClick={handleToggle}
 				class="flex gap-1 items-center w-full font-medium text-left transition duration-200 text-gray-12 hover:text-gray-10"
 			>
-				<span>Advanced shadow settings</span>
+				<span class="text-sm">Advanced shadow settings</span>
 				<IconCapChevronDown
 					class={cx(
 						"size-5",
@@ -48,38 +49,39 @@ const ShadowSettings = (props: Props) => {
 					)}
 				/>
 			</button>
-
-			{isOpen() && (
-				<div class="mt-4 space-y-6 font-medium">
-					<Field name="Size">
-						<Slider
-							value={props.size.value}
-							onChange={props.size.onChange}
-							minValue={0}
-							maxValue={100}
-							step={0.1}
-						/>
-					</Field>
-					<Field name="Opacity">
-						<Slider
-							value={props.opacity.value}
-							onChange={props.opacity.onChange}
-							minValue={0}
-							maxValue={100}
-							step={0.1}
-						/>
-					</Field>
-					<Field name="Blur">
-						<Slider
-							value={props.blur.value}
-							onChange={props.blur.onChange}
-							minValue={0}
-							maxValue={100}
-							step={0.1}
-						/>
-					</Field>
-				</div>
-			)}
+			<KCollapsible open={isOpen()}>
+				<KCollapsible.Content class="overflow-hidden opacity-0 transition-opacity animate-collapsible-up ui-expanded:animate-collapsible-down ui-expanded:opacity-100">
+					<div class="mt-4 space-y-6 font-medium">
+						<Field name="Size">
+							<Slider
+								value={props.size.value}
+								onChange={props.size.onChange}
+								minValue={0}
+								maxValue={100}
+								step={0.1}
+							/>
+						</Field>
+						<Field name="Opacity">
+							<Slider
+								value={props.opacity.value}
+								onChange={props.opacity.onChange}
+								minValue={0}
+								maxValue={100}
+								step={0.1}
+							/>
+						</Field>
+						<Field name="Blur">
+							<Slider
+								value={props.blur.value}
+								onChange={props.blur.onChange}
+								minValue={0}
+								maxValue={100}
+								step={0.1}
+							/>
+						</Field>
+					</div>
+				</KCollapsible.Content>
+			</KCollapsible>
 		</div>
 	);
 };