diff --git a/src/pages/editor/components/sidebar/settings/ShapeSettings.tsx b/src/pages/editor/components/sidebar/settings/ShapeSettings.tsx
index 8c4e8d7..fc39210 100644
--- a/src/pages/editor/components/sidebar/settings/ShapeSettings.tsx
+++ b/src/pages/editor/components/sidebar/settings/ShapeSettings.tsx
@@ -109,21 +109,41 @@ const ShapeSettings = ({ selectedObject, onUpdate }: ShapeSettingsProps) => {
                             })
                         }
                     />
-                    <Input
-                        label="زاویه گرادیانت"
-                        type="number"
-                        value={gradient.angle}
-                        onChange={(e) =>
-                            onUpdate(selectedObject.id, {
-                                gradient: {
-                                    ...gradient,
-                                    angle: Number(e.target.value) || 0,
-                                },
-                            })
-                        }
-                        min={0}
-                        max={360}
-                    />
+                    <div className="space-y-1">
+                        <label className="text-sm">زاویه گرادیانت</label>
+                        <div className="flex items-center gap-2">
+                            <input
+                                type="range"
+                                min={0}
+                                max={360}
+                                value={gradient.angle}
+                                onChange={(e) =>
+                                    onUpdate(selectedObject.id, {
+                                        gradient: {
+                                            ...gradient,
+                                            angle: Number(e.target.value),
+                                        },
+                                    })
+                                }
+                                className="w-full"
+                            />
+                            <input
+                                type="number"
+                                min={0}
+                                max={360}
+                                value={gradient.angle}
+                                onChange={(e) =>
+                                    onUpdate(selectedObject.id, {
+                                        gradient: {
+                                            ...gradient,
+                                            angle: Number(e.target.value) || 0,
+                                        },
+                                    })
+                                }
+                                className="w-16 h-9 rounded-lg border border-border px-2 text-xs"
+                            />
+                        </div>
+                    </div>
                 </div>
             )}
             <ColorPicker