diff --git a/apps/web/src/components/editor/timeline/timeline-ruler.tsx b/apps/web/src/components/editor/timeline/timeline-ruler.tsx
index 87702a4f..6484bbd0 100644
--- a/apps/web/src/components/editor/timeline/timeline-ruler.tsx
+++ b/apps/web/src/components/editor/timeline/timeline-ruler.tsx
@@ -7,7 +7,7 @@ import { TimelineTick } from "./timeline-tick";
 interface TimelineRulerProps {
 	zoomLevel: number;
 	dynamicTimelineWidth: number;
-	rulerRef: React.RefObject<HTMLDivElement>;
+	rulerRef: React.Ref<HTMLDivElement>;
 	handleWheel: (e: React.WheelEvent) => void;
 	handleTimelineContentClick: (e: React.MouseEvent) => void;
 	handleRulerTrackingMouseDown: (e: React.MouseEvent) => void;
diff --git a/apps/web/src/components/ui/color-picker.tsx b/apps/web/src/components/ui/color-picker.tsx
index a57a86e0..ad350e0e 100644
--- a/apps/web/src/components/ui/color-picker.tsx
+++ b/apps/web/src/components/ui/color-picker.tsx
@@ -7,7 +7,7 @@ interface ColorPickerProps {
 	value?: string;
 	onChange?: (value: string) => void;
 	className?: string;
-	containerRef?: React.RefObject<HTMLDivElement | null>;
+	containerRef?: React.RefObject<HTMLDivElement>;
 }
 
 const hexToHsv = (hex: string) => {
diff --git a/apps/web/src/hooks/timeline/element/use-element-interaction.ts b/apps/web/src/hooks/timeline/element/use-element-interaction.ts
index c92d6722..d3abd7c3 100644
--- a/apps/web/src/hooks/timeline/element/use-element-interaction.ts
+++ b/apps/web/src/hooks/timeline/element/use-element-interaction.ts
@@ -25,10 +25,10 @@ const DRAG_THRESHOLD_PX = 5;
 
 interface UseElementInteractionProps {
 	zoomLevel: number;
-	timelineRef: RefObject<HTMLDivElement | null>;
-	tracksContainerRef: RefObject<HTMLDivElement | null>;
-	tracksScrollRef: RefObject<HTMLDivElement | null>;
-	headerRef?: RefObject<HTMLElement | null>;
+	timelineRef: RefObject<HTMLDivElement>;
+	tracksContainerRef: RefObject<HTMLDivElement>;
+	tracksScrollRef: RefObject<HTMLDivElement>;
+	headerRef?: RefObject<HTMLElement>;
 	snappingEnabled: boolean;
 	onSnapPointChange?: (snapPoint: SnapPoint | null) => void;
 }
@@ -115,9 +115,9 @@ function getDragDropTarget({
 	elementId: string;
 	trackId: string;
 	tracks: TimelineTrack[];
-	tracksContainerRef: RefObject<HTMLDivElement | null>;
-	tracksScrollRef: RefObject<HTMLDivElement | null>;
-	headerRef?: RefObject<HTMLElement | null>;
+	tracksContainerRef: RefObject<HTMLDivElement>;
+	tracksScrollRef: RefObject<HTMLDivElement>;
+	headerRef?: RefObject<HTMLElement>;
 	zoomLevel: number;
 	snappedTime: number;
 	verticalDragDirection?: "up" | "down" | null;
diff --git a/apps/web/src/hooks/timeline/use-edge-auto-scroll.ts b/apps/web/src/hooks/timeline/use-edge-auto-scroll.ts
index 095c0599..0ddab654 100644
--- a/apps/web/src/hooks/timeline/use-edge-auto-scroll.ts
+++ b/apps/web/src/hooks/timeline/use-edge-auto-scroll.ts
@@ -3,8 +3,8 @@ import { useEffect, useRef } from "react";
 interface UseEdgeAutoScrollParams {
 	isActive: boolean;
 	getMouseClientX: () => number;
-	rulerScrollRef: React.RefObject<HTMLDivElement | null>;
-	tracksScrollRef: React.RefObject<HTMLDivElement | null>;
+	rulerScrollRef: React.RefObject<HTMLDivElement>;
+	tracksScrollRef: React.RefObject<HTMLDivElement>;
 	contentWidth: number;
 	edgeThreshold?: number;
 	maxScrollSpeed?: number;
diff --git a/apps/web/src/hooks/timeline/use-scroll-sync.ts b/apps/web/src/hooks/timeline/use-scroll-sync.ts
index 61465a3d..cdd915b0 100644
--- a/apps/web/src/hooks/timeline/use-scroll-sync.ts
+++ b/apps/web/src/hooks/timeline/use-scroll-sync.ts
@@ -1,10 +1,10 @@
 import { useEffect, useRef } from "react";
 
 interface UseScrollSyncProps {
-	rulerScrollRef?: React.RefObject<HTMLDivElement | null>;
-	tracksScrollRef: React.RefObject<HTMLDivElement | null>;
-	trackLabelsScrollRef?: React.RefObject<HTMLDivElement | null>;
-	bookmarksScrollRef?: React.RefObject<HTMLDivElement | null>;
+	rulerScrollRef?: React.RefObject<HTMLDivElement>;
+	tracksScrollRef: React.RefObject<HTMLDivElement>;
+	trackLabelsScrollRef?: React.RefObject<HTMLDivElement>;
+	bookmarksScrollRef?: React.RefObject<HTMLDivElement>;
 }
 
 export function useScrollSync({
diff --git a/apps/web/src/hooks/timeline/use-selection-box.ts b/apps/web/src/hooks/timeline/use-selection-box.ts
index 12c6bf8a..702abad9 100644
--- a/apps/web/src/hooks/timeline/use-selection-box.ts
+++ b/apps/web/src/hooks/timeline/use-selection-box.ts
@@ -4,12 +4,12 @@ import { getCumulativeHeightBefore, getTrackHeight } from "@/lib/timeline";
 import { useEditor } from "../use-editor";
 
 interface UseSelectionBoxProps {
-	containerRef: React.RefObject<HTMLElement | null>;
+	containerRef: React.RefObject<HTMLElement>;
 	onSelectionComplete: (
 		elements: { trackId: string; elementId: string }[],
 	) => void;
 	isEnabled?: boolean;
-	tracksScrollRef: React.RefObject<HTMLDivElement | null>;
+	tracksScrollRef: React.RefObject<HTMLDivElement>;
 	zoomLevel: number;
 }
 
diff --git a/apps/web/src/hooks/timeline/use-snap-indicator-position.ts b/apps/web/src/hooks/timeline/use-snap-indicator-position.ts
index d78eb04d..c6ecbf7c 100644
--- a/apps/web/src/hooks/timeline/use-snap-indicator-position.ts
+++ b/apps/web/src/hooks/timeline/use-snap-indicator-position.ts
@@ -6,9 +6,9 @@ interface UseSnapIndicatorPositionParams {
 	snapPoint: { time: number } | null;
 	zoomLevel: number;
 	tracks: TimelineTrack[];
-	timelineRef: React.RefObject<HTMLDivElement | null>;
-	trackLabelsRef?: React.RefObject<HTMLDivElement | null>;
-	tracksScrollRef: React.RefObject<HTMLDivElement | null>;
+	timelineRef: React.RefObject<HTMLDivElement>;
+	trackLabelsRef?: React.RefObject<HTMLDivElement>;
+	tracksScrollRef: React.RefObject<HTMLDivElement>;
 }
 
 interface SnapIndicatorPosition {
diff --git a/apps/web/src/hooks/timeline/use-timeline-drag-drop.ts b/apps/web/src/hooks/timeline/use-timeline-drag-drop.ts
index 01af9362..9e5c4fa6 100644
--- a/apps/web/src/hooks/timeline/use-timeline-drag-drop.ts
+++ b/apps/web/src/hooks/timeline/use-timeline-drag-drop.ts
@@ -17,8 +17,8 @@ import type { TrackType, DropTarget, ElementType } from "@/types/timeline";
 import type { MediaDragData, StickerDragData } from "@/types/drag";
 
 interface UseTimelineDragDropProps {
-	containerRef: RefObject<HTMLDivElement | null>;
-	headerRef?: RefObject<HTMLElement | null>;
+	containerRef: RefObject<HTMLDivElement>;
+	headerRef?: RefObject<HTMLElement>;
 	zoomLevel: number;
 }
 
diff --git a/apps/web/src/hooks/timeline/use-timeline-playhead.ts b/apps/web/src/hooks/timeline/use-timeline-playhead.ts
index 34a14793..55e04a68 100644
--- a/apps/web/src/hooks/timeline/use-timeline-playhead.ts
+++ b/apps/web/src/hooks/timeline/use-timeline-playhead.ts
@@ -6,10 +6,10 @@ import { TIMELINE_CONSTANTS } from "@/constants/timeline-constants";
 
 interface UseTimelinePlayheadProps {
 	zoomLevel: number;
-	rulerRef: React.RefObject<HTMLDivElement | null>;
-	rulerScrollRef: React.RefObject<HTMLDivElement | null>;
-	tracksScrollRef: React.RefObject<HTMLDivElement | null>;
-	playheadRef?: React.RefObject<HTMLDivElement | null>;
+	rulerRef: React.RefObject<HTMLDivElement>;
+	rulerScrollRef: React.RefObject<HTMLDivElement>;
+	tracksScrollRef: React.RefObject<HTMLDivElement>;
+	playheadRef?: React.RefObject<HTMLDivElement>;
 }
 
 export function useTimelinePlayhead({
diff --git a/apps/web/src/hooks/timeline/use-timeline-seek.ts b/apps/web/src/hooks/timeline/use-timeline-seek.ts
index 127ebcbb..f5dc6ddb 100644
--- a/apps/web/src/hooks/timeline/use-timeline-seek.ts
+++ b/apps/web/src/hooks/timeline/use-timeline-seek.ts
@@ -5,10 +5,10 @@ import { getSnappedSeekTime } from "@/lib/time";
 import { useEditor } from "../use-editor";
 
 interface UseTimelineSeekProps {
-	playheadRef: RefObject<HTMLDivElement | null>;
-	trackLabelsRef: RefObject<HTMLDivElement | null>;
-	rulerScrollRef: RefObject<HTMLDivElement | null>;
-	tracksScrollRef: RefObject<HTMLDivElement | null>;
+	playheadRef: RefObject<HTMLDivElement>;
+	trackLabelsRef: RefObject<HTMLDivElement>;
+	rulerScrollRef: RefObject<HTMLDivElement>;
+	tracksScrollRef: RefObject<HTMLDivElement>;
 	zoomLevel: number;
 	duration: number;
 	isSelecting: boolean;
diff --git a/apps/web/src/hooks/timeline/use-timeline-zoom.ts b/apps/web/src/hooks/timeline/use-timeline-zoom.ts
index 3d15b5c8..96a4be43 100644
--- a/apps/web/src/hooks/timeline/use-timeline-zoom.ts
+++ b/apps/web/src/hooks/timeline/use-timeline-zoom.ts
@@ -11,13 +11,13 @@ import { TIMELINE_CONSTANTS } from "@/constants/timeline-constants";
 import { useEditor } from "@/hooks/use-editor";
 
 interface UseTimelineZoomProps {
-	containerRef: RefObject<HTMLDivElement | null>;
+	containerRef: RefObject<HTMLDivElement>;
 	minZoom?: number;
 	initialZoom?: number;
 	initialScrollLeft?: number;
 	initialPlayheadTime?: number;
-	tracksScrollRef: RefObject<HTMLDivElement | null>;
-	rulerScrollRef: RefObject<HTMLDivElement | null>;
+	tracksScrollRef: RefObject<HTMLDivElement>;
+	rulerScrollRef: RefObject<HTMLDivElement>;
 }
 
 interface UseTimelineZoomReturn {