diff --git a/apps/web/src/components/editor/properties-panel/text-properties.tsx b/apps/web/src/components/editor/properties-panel/text-properties.tsx
index 120ca95..37b8d74 100644
--- a/apps/web/src/components/editor/properties-panel/text-properties.tsx
+++ b/apps/web/src/components/editor/properties-panel/text-properties.tsx
@@ -1,12 +1,6 @@
 import { Textarea } from "@/components/ui/textarea";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select";
-import { FONT_OPTIONS, FontFamily } from "@/constants/font-constants";
+import { FontPicker } from "@/components/ui/font-picker";
+import { FontFamily } from "@/constants/font-constants";
 import { TextElement } from "@/types/timeline";
 import { useTimelineStore } from "@/stores/timeline-store";
 import { Slider } from "@/components/ui/slider";
@@ -39,23 +33,12 @@ export function TextProperties({
       <PropertyItem direction="row">
         <PropertyItemLabel>Font</PropertyItemLabel>
         <PropertyItemValue>
-          <Select
+          <FontPicker
             defaultValue={element.fontFamily}
             onValueChange={(value: FontFamily) =>
               updateTextElement(trackId, element.id, { fontFamily: value })
             }
-          >
-            <SelectTrigger className="w-full text-xs">
-              <SelectValue placeholder="Select a font" />
-            </SelectTrigger>
-            <SelectContent>
-              {FONT_OPTIONS.map((font) => (
-                <SelectItem key={font.value} value={font.value}>
-                  {font.label}
-                </SelectItem>
-              ))}
-            </SelectContent>
-          </Select>
+          />
         </PropertyItemValue>
       </PropertyItem>
       <PropertyItem direction="column">
diff --git a/apps/web/src/components/ui/font-picker.tsx b/apps/web/src/components/ui/font-picker.tsx
new file mode 100644
index 0000000..8ad5742
--- /dev/null
+++ b/apps/web/src/components/ui/font-picker.tsx
@@ -0,0 +1,35 @@
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { FONT_OPTIONS, FontFamily } from "@/constants/font-constants";
+
+interface FontPickerProps {
+  defaultValue?: FontFamily;
+  onValueChange?: (value: FontFamily) => void;
+  className?: string;
+}
+
+export function FontPicker({
+  defaultValue,
+  onValueChange,
+  className,
+}: FontPickerProps) {
+  return (
+    <Select defaultValue={defaultValue} onValueChange={onValueChange}>
+      <SelectTrigger className={`w-full text-xs ${className || ""}`}>
+        <SelectValue placeholder="Select a font" />
+      </SelectTrigger>
+      <SelectContent>
+        {FONT_OPTIONS.map((font) => (
+          <SelectItem key={font.value} value={font.value}>
+            {font.label}
+          </SelectItem>
+        ))}
+      </SelectContent>
+    </Select>
+  );
+}