diff --git a/resources/js/modules/editor/partials/text-sidebar.jsx b/resources/js/modules/editor/partials/text-sidebar.jsx
index 4c27067..09980a8 100644
--- a/resources/js/modules/editor/partials/text-sidebar.jsx
+++ b/resources/js/modules/editor/partials/text-sidebar.jsx
@@ -161,22 +161,40 @@ export default function TextSidebar({ isOpen, onClose }) {
                                     value={textValue}
                                     onChange={handleTextChange}
                                     placeholder="Enter your text..."
-                                    className="mt-2 text-center"
+                                    className="mt-2 border-2 text-center text-nowrap"
                                     rows={4}
+                                    style={{
+                                        fontFamily: fontFamily,
+                                        fontSize: `${fontSize * 0.45}px`, // Better scaling
+                                        fontWeight: isBold ? 'bold' : 'normal',
+                                        fontStyle: isItalic ? 'italic' : 'normal',
+                                        lineHeight: '1.4',
+                                    }}
                                 />
                             </div>
 
+                            {/* Font Fa
+
                             {/* Font Family */}
                             <div>
                                 <label className="text-sm font-medium">Font Family</label>
                                 <Select value={fontFamily} onValueChange={handleFontFamilyChange}>
                                     <SelectTrigger className="mt-2">
-                                        <SelectValue placeholder="Select font" />
+                                        <SelectValue placeholder="Select font">
+                                            <span style={{ fontFamily: fontFamily }}>
+                                                {AVAILABLE_FONTS.find((f) => f.value === fontFamily)?.label || 'Select font'}
+                                            </span>
+                                        </SelectValue>
                                     </SelectTrigger>
                                     <SelectContent>
                                         {AVAILABLE_FONTS.map((font) => (
-                                            <SelectItem key={font.value} value={font.value}>
-                                                {font.label}
+                                            <SelectItem
+                                                key={font.value}
+                                                value={font.value}
+                                                style={{ fontFamily: font.value }}
+                                                className="cursor-pointer"
+                                            >
+                                                <span style={{ fontFamily: font.value }}>{font.label}</span>
                                             </SelectItem>
                                         ))}
                                     </SelectContent>