diff --git a/resources/js/modules/editor/partials/edit-sidebar.tsx b/resources/js/modules/editor/partials/edit-sidebar.tsx
index cb5b779..1b9a885 100644
--- a/resources/js/modules/editor/partials/edit-sidebar.tsx
+++ b/resources/js/modules/editor/partials/edit-sidebar.tsx
@@ -1,4 +1,10 @@
 import { Edit3, Plus, Coins } from "lucide-react"
+import {
+  Sheet,
+  SheetContent,
+  SheetHeader,
+  SheetTitle,
+} from "@/components/ui/sheet"
 
 interface EditSidebarProps {
   isOpen: boolean
@@ -6,126 +12,127 @@ interface EditSidebarProps {
 }
 
 export default function EditSidebar({ isOpen, onClose }: EditSidebarProps) {
-  if (!isOpen) return null
-
   return (
-    <div className="fixed left-0 top-0 h-full w-80 bg-white shadow-lg z-50 overflow-y-auto">
-      <div className="p-4">
-        {/* Header */}
-        <div className="flex items-center gap-3 mb-6">
-          <Edit3 className="h-6 w-6" />
-          <h2 className="text-xl font-semibold">Edit Media</h2>
-        </div>
+    <Sheet open={isOpen} onOpenChange={(open) => !open && onClose()}>
+      <SheetContent side="right" className="w-80 overflow-y-auto">
+        <SheetHeader>
+          <SheetTitle className="flex items-center gap-3">
+            <Edit3 className="h-6 w-6" />
+            Edit Media
+          </SheetTitle>
+        </SheetHeader>
 
-        {/* Background and Meme Selection */}
-        <div className="grid grid-cols-2 gap-4 mb-6">
-          <div className="border-2 border-gray-300 rounded-lg p-3 text-center">
-            <div className="w-full h-16 bg-blue-600 rounded mb-2 overflow-hidden">
-              <img
-                src="/placeholder.svg?height=64&width=120"
-                alt="Gaming background"
-                width={120}
-                height={64}
-                className="w-full h-full object-cover"
-              />
+        <div className="space-y-6">
+          {/* Background and Meme Selection */}
+          <div className="grid grid-cols-2 gap-4">
+            <div className="border-2 border-gray-300 rounded-lg p-3 text-center">
+              <div className="w-full h-16 bg-blue-600 rounded mb-2 overflow-hidden">
+                <img
+                  src="/placeholder.svg?height=64&width=120"
+                  alt="Gaming background"
+                  width={120}
+                  height={64}
+                  className="w-full h-full object-cover"
+                />
+              </div>
+              <span className="text-sm font-medium">Background</span>
+            </div>
+            <div className="border-2 border-gray-300 rounded-lg p-3 text-center">
+              <div className="w-full h-16 bg-gray-200 rounded mb-2 overflow-hidden">
+                <img
+                  src="/placeholder.svg?height=64&width=120"
+                  alt="Meme character"
+                  width={120}
+                  height={64}
+                  className="w-full h-full object-cover"
+                />
+              </div>
+              <span className="text-sm font-medium">Meme</span>
             </div>
-            <span className="text-sm font-medium">Background</span>
           </div>
-          <div className="border-2 border-gray-300 rounded-lg p-3 text-center">
-            <div className="w-full h-16 bg-gray-200 rounded mb-2 overflow-hidden">
-              <img
-                src="/placeholder.svg?height=64&width=120"
-                alt="Meme character"
-                width={120}
-                height={64}
-                className="w-full h-full object-cover"
-              />
-            </div>
-            <span className="text-sm font-medium">Meme</span>
-          </div>
-        </div>
 
-        {/* AI Background Search */}
-        <div className="mb-6">
-          <h3 className="text-lg font-medium mb-4">Search for backgrounds using AI</h3>
+          {/* AI Background Search */}
+          <div>
+            <h3 className="text-lg font-medium mb-4">Search for backgrounds using AI</h3>
 
-          <div className="border-2 border-dashed border-gray-300 rounded-lg p-6 text-center mb-4">
-            <div className="w-12 h-12 border-2 border-gray-400 rounded-full flex items-center justify-center mx-auto mb-3">
-              <Plus className="h-6 w-6" />
-            </div>
-            <p className="text-sm font-medium mb-2">Generate a background with AI</p>
-            <div className="flex items-center justify-center gap-1">
-              <span className="text-lg font-bold">1</span>
-              <div className="w-5 h-5 bg-yellow-400 rounded-full flex items-center justify-center">
-                <Coins className="h-3 w-3 text-yellow-800" />
+            <div className="border-2 border-dashed border-gray-300 rounded-lg p-6 text-center mb-4">
+              <div className="w-12 h-12 border-2 border-gray-400 rounded-full flex items-center justify-center mx-auto mb-3">
+                <Plus className="h-6 w-6" />
+              </div>
+              <p className="text-sm font-medium mb-2">Generate a background with AI</p>
+              <div className="flex items-center justify-center gap-1">
+                <span className="text-lg font-bold">1</span>
+                <div className="w-5 h-5 bg-yellow-400 rounded-full flex items-center justify-center">
+                  <Coins className="h-3 w-3 text-yellow-800" />
+                </div>
               </div>
             </div>
           </div>
-        </div>
 
-        {/* Meme Templates Grid */}
-        <div className="grid grid-cols-2 gap-3">
-          <div className="aspect-square bg-gray-100 rounded-lg overflow-hidden">
-            <img
-              src="/placeholder.svg?height=150&width=150"
-              alt="Creepy face meme"
-              width={150}
-              height={150}
-              className="w-full h-full object-cover"
-            />
-          </div>
-          <div className="aspect-square bg-gray-100 rounded-lg overflow-hidden relative">
-            <img
-              src="/placeholder.svg?height=150&width=150"
-              alt="Confused person meme"
-              width={150}
-              height={150}
-              className="w-full h-full object-cover"
-            />
-            <div className="absolute top-2 right-2 text-black font-bold text-sm">???</div>
-            <div className="absolute bottom-2 left-2 text-black font-bold text-sm">???</div>
-          </div>
-          <div className="aspect-square bg-gray-100 rounded-lg overflow-hidden">
-            <img
-              src="/placeholder.svg?height=150&width=150"
-              alt="Woody meme"
-              width={150}
-              height={150}
-              className="w-full h-full object-cover"
-            />
-          </div>
-          <div className="aspect-square bg-gray-100 rounded-lg overflow-hidden">
-            <img
-              src="/placeholder.svg?height=150&width=150"
-              alt="Doge meme"
-              width={150}
-              height={150}
-              className="w-full h-full object-cover"
-            />
-          </div>
-          <div className="aspect-square bg-blue-900 rounded-lg overflow-hidden relative">
-            <img
-              src="/placeholder.svg?height=150&width=150"
-              alt="Stock market meme"
-              width={150}
-              height={150}
-              className="w-full h-full object-cover"
-            />
-            <div className="absolute inset-0 bg-blue-900/50 flex items-center justify-center">
-              <span className="text-white text-xs">📈 28%</span>
+          {/* Meme Templates Grid */}
+          <div className="grid grid-cols-2 gap-3">
+            <div className="aspect-square bg-gray-100 rounded-lg overflow-hidden">
+              <img
+                src="/placeholder.svg?height=150&width=150"
+                alt="Creepy face meme"
+                width={150}
+                height={150}
+                className="w-full h-full object-cover"
+              />
+            </div>
+            <div className="aspect-square bg-gray-100 rounded-lg overflow-hidden relative">
+              <img
+                src="/placeholder.svg?height=150&width=150"
+                alt="Confused person meme"
+                width={150}
+                height={150}
+                className="w-full h-full object-cover"
+              />
+              <div className="absolute top-2 right-2 text-black font-bold text-sm">???</div>
+              <div className="absolute bottom-2 left-2 text-black font-bold text-sm">???</div>
+            </div>
+            <div className="aspect-square bg-gray-100 rounded-lg overflow-hidden">
+              <img
+                src="/placeholder.svg?height=150&width=150"
+                alt="Woody meme"
+                width={150}
+                height={150}
+                className="w-full h-full object-cover"
+              />
+            </div>
+            <div className="aspect-square bg-gray-100 rounded-lg overflow-hidden">
+              <img
+                src="/placeholder.svg?height=150&width=150"
+                alt="Doge meme"
+                width={150}
+                height={150}
+                className="w-full h-full object-cover"
+              />
+            </div>
+            <div className="aspect-square bg-blue-900 rounded-lg overflow-hidden relative">
+              <img
+                src="/placeholder.svg?height=150&width=150"
+                alt="Stock market meme"
+                width={150}
+                height={150}
+                className="w-full h-full object-cover"
+              />
+              <div className="absolute inset-0 bg-blue-900/50 flex items-center justify-center">
+                <span className="text-white text-xs">📈 28%</span>
+              </div>
+            </div>
+            <div className="aspect-square bg-yellow-100 rounded-lg overflow-hidden">
+              <img
+                src="/placeholder.svg?height=150&width=150"
+                alt="Room meme"
+                width={150}
+                height={150}
+                className="w-full h-full object-cover"
+              />
             </div>
           </div>
-          <div className="aspect-square bg-yellow-100 rounded-lg overflow-hidden">
-            <img
-              src="/placeholder.svg?height=150&width=150"
-              alt="Room meme"
-              width={150}
-              height={150}
-              className="w-full h-full object-cover"
-            />
-          </div>
         </div>
-      </div>
-    </div>
+      </SheetContent>
+    </Sheet>
   )
 }
diff --git a/resources/js/modules/editor/partials/editor-controls.tsx b/resources/js/modules/editor/partials/editor-controls.tsx
index 6975092..d9e1b56 100644
--- a/resources/js/modules/editor/partials/editor-controls.tsx
+++ b/resources/js/modules/editor/partials/editor-controls.tsx
@@ -15,13 +15,13 @@ const EditorControls = ({ className = '', onEditClick = () => {}, isEditActive =
         <Play className="h-8 w-8 " />
           </Button>
 
-          <Button
+          {/* <Button
         variant="ghost"
         size="icon"
         className="w-12 h-12 rounded-full shadow-sm border "
       >
          <span className="text-sm font-medium ">9:16</span>
-      </Button>
+      </Button> */}
 
 
       <Button