diff --git a/src/App.css b/src/App.css
index 55d480c..3bd0fa3 100644
--- a/src/App.css
+++ b/src/App.css
@@ -16,3 +16,8 @@
   -ms-overflow-style: none; /* IE and Edge */
   scrollbar-width: none; /* Firefox */
 }
+
+.\[\&_svg\]\:size-4 svg {
+  width: 1.3rem !important;
+  height: 1.3rem !important;
+}
diff --git a/src/App.jsx b/src/App.jsx
index d878806..a2b196e 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -15,6 +15,7 @@ import EditorPanel from "./components/Panel/EditorPanel";
 import CanvasContext from "./components/Context/canvasContext/CanvasContext";
 import Canvas from "./components/Canvas/Canvas";
 import ActiveObjectContext from "./components/Context/activeObject/ObjectContext";
+import CanvasCapture from "./components/CanvasCapture";
 
 function App() {
   useEffect(() => {
@@ -100,6 +101,7 @@ function App() {
         {activeObject && <TopBar />}
         <ActionButtons />
         <Canvas />
+        <CanvasCapture />
       </div>
     </div>
   );
diff --git a/src/components/ActionButtons.jsx b/src/components/ActionButtons.jsx
index d4e6491..ea45bed 100644
--- a/src/components/ActionButtons.jsx
+++ b/src/components/ActionButtons.jsx
@@ -1,4 +1,5 @@
 import CanvasContext from "./Context/canvasContext/CanvasContext";
+import OpenContext from "./Context/openContext/OpenContext";
 import { Button } from "./ui/button";
 import {
   Select,
@@ -28,6 +29,7 @@ const aspectRatios = [
 ];
 
 export function ActionButtons() {
+  const { setCaptureOpen } = useContext(OpenContext);
   const { setCanvasRatio, canvasRatio } = useContext(CanvasContext);
   const handleRatioChange = (newRatio) => {
     setCanvasRatio(newRatio);
@@ -54,7 +56,12 @@ export function ActionButtons() {
           </Select>
         </div>
       </div>
-      <div className="mr-5">
+      <div
+        className="mr-5"
+        onClick={() => {
+          setCaptureOpen(true);
+        }}
+      >
         <Button
           variant="ghost"
           size="icon"
diff --git a/src/components/Canvas/Canvas.jsx b/src/components/Canvas/Canvas.jsx
index ab7c44d..ddd7cde 100644
--- a/src/components/Canvas/Canvas.jsx
+++ b/src/components/Canvas/Canvas.jsx
@@ -1,9 +1,10 @@
-import { useEffect, useContext } from "react";
+import { useEffect, useContext, useState, useRef } from "react";
 import { AspectRatio } from "@/components/ui/aspect-ratio";
 import OpenContext from "../Context/openContext/OpenContext";
 import CanvasContext from "../Context/canvasContext/CanvasContext";
 import { Card, CardContent } from "../ui/card";
 import ActiveObjectContext from "../Context/activeObject/ObjectContext";
+import { Slider } from "@/components/ui/slider";
 
 export default function Canvas() {
   const {
@@ -26,14 +27,35 @@ export default function Canvas() {
   } = useContext(CanvasContext);
 
   const { activeObject, setActiveObject } = useContext(ActiveObjectContext);
+  const [zoomLevel, setZoomLevel] = useState(100);
+  const containerRef = useRef(null);
+
+  const handleZoom = (newZoom) => {
+    const zoom = Math.min(Math.max(newZoom, 0), 100);
+    setZoomLevel(zoom);
+
+    if (canvasRef.current && canvas) {
+      const scale = zoom / 100;
+
+      // Update canvas dimensions
+      const newWidth = canvasRef.current.offsetWidth * scale;
+      const newHeight = canvasRef.current.offsetHeight * scale;
+
+      canvas.setWidth(newWidth);
+      canvas.setHeight(newHeight);
+      setCanvasWidth(newWidth);
+      setCanvasHeight(newHeight);
+
+      canvas.renderAll();
+    }
+  };
 
   useEffect(() => {
-    if (!canvas) return; // Ensure canvas is available
+    if (!canvas) return;
 
-    // Event handler for mouse down
     const handleMouseDown = (event) => {
-      const target = event.target; // Get the clicked target
-      const activeObject = canvas.getActiveObject(); // Get the active object
+      const target = event.target;
+      const activeObject = canvas.getActiveObject();
 
       if (target) {
         if (target.type === "group") {
@@ -46,20 +68,99 @@ export default function Canvas() {
       }
     };
 
-    // Attach the event listener
-    canvas.on("mouse:down", handleMouseDown);
-
-    // Cleanup function to remove the event listener
-    return () => {
-      canvas.off("mouse:down", handleMouseDown); // Remove the listener on unmount
+    const handleWheel = (event) => {
+      if (event.ctrlKey || event.metaKey) {
+        event.preventDefault();
+        const delta = event.deltaY > 0 ? -1 : 1;
+        handleZoom(zoomLevel + delta);
+        event.stopPropagation();
+      }
     };
-  }, [canvas, setActiveObject]);
+
+    const handleKeyboard = (event) => {
+      if (
+        (event.ctrlKey || event.metaKey) &&
+        (event.key === "=" || event.key === "-")
+      ) {
+        event.preventDefault();
+        const delta = event.key === "=" ? 1 : -1;
+        handleZoom(zoomLevel + delta);
+      }
+    };
+
+    let lastDistance = 0;
+    const handleTouchStart = (event) => {
+      if (event.touches.length === 2) {
+        const touch1 = event.touches[0];
+        const touch2 = event.touches[1];
+        lastDistance = Math.hypot(
+          touch2.clientX - touch1.clientX,
+          touch2.clientY - touch1.clientY
+        );
+      }
+    };
+
+    const handleTouchMove = (event) => {
+      if (event.touches.length === 2) {
+        event.preventDefault();
+        const touch1 = event.touches[0];
+        const touch2 = event.touches[1];
+        const distance = Math.hypot(
+          touch2.clientX - touch1.clientX,
+          touch2.clientY - touch1.clientY
+        );
+
+        if (lastDistance > 0) {
+          const delta = distance - lastDistance;
+          const zoomDelta = delta > 0 ? 1 : -1;
+          handleZoom(zoomLevel + zoomDelta);
+        }
+        lastDistance = distance;
+      }
+    };
+
+    const handleTouchEnd = () => {
+      lastDistance = 0;
+    };
+
+    const handleResize = () => {
+      handleZoom(zoomLevel);
+    };
+
+    canvas.on("mouse:down", handleMouseDown);
+    const canvasContainer = document.getElementById("canvas-ref");
+
+    if (canvasContainer) {
+      canvasContainer.addEventListener("wheel", handleWheel, {
+        passive: false,
+      });
+      canvasContainer.addEventListener("touchstart", handleTouchStart);
+      canvasContainer.addEventListener("touchmove", handleTouchMove, {
+        passive: false,
+      });
+      canvasContainer.addEventListener("touchend", handleTouchEnd);
+      window.addEventListener("keydown", handleKeyboard);
+      window.addEventListener("resize", handleResize);
+    }
+
+    return () => {
+      canvas.off("mouse:down", handleMouseDown);
+      if (canvasContainer) {
+        canvasContainer.removeEventListener("wheel", handleWheel);
+        canvasContainer.removeEventListener("touchstart", handleTouchStart);
+        canvasContainer.removeEventListener("touchmove", handleTouchMove);
+        canvasContainer.removeEventListener("touchend", handleTouchEnd);
+        window.removeEventListener("keydown", handleKeyboard);
+        window.removeEventListener("resize", handleResize);
+      }
+    };
+  }, [canvas, setActiveObject, zoomLevel]);
 
   useEffect(() => {
     import("fabric").then((fabricModule) => {
       window.fabric = fabricModule.fabric;
     });
-  }, []);
+  }, [canvasRef, fabricCanvasRef, setCanvas]);
 
   const getRatioValue = (ratio) => {
     const [width, height] = ratio.split(":").map(Number);
@@ -69,42 +170,33 @@ export default function Canvas() {
   useEffect(() => {
     const updateCanvasSize = () => {
       if (canvasRef.current && canvas) {
-        // Update canvas dimensions
-        const newWidth = canvasRef?.current?.offsetWidth;
-        const newHeight = canvasRef?.current?.offsetHeight;
+        const newWidth = canvasRef.current.offsetWidth;
+        const newHeight = canvasRef.current.offsetHeight;
 
         canvas.setWidth(newWidth);
         canvas.setHeight(newHeight);
         setCanvasWidth(newWidth);
         setCanvasHeight(newHeight);
 
-        // Adjust the background image to fit the updated canvas size
         const bgImage = canvas.backgroundImage;
         if (bgImage) {
-          // Calculate scaling factors for width and height
           const scaleX = newWidth / bgImage.width;
           const scaleY = newHeight / bgImage.height;
-
-          // Use the larger scale to cover the entire canvas
           const scale = Math.max(scaleX, scaleY);
 
-          // Apply scale and position the image
           bgImage.scaleX = scale;
           bgImage.scaleY = scale;
-          bgImage.left = 0; // Align left
-          bgImage.top = 0; // Align top
+          bgImage.left = 0;
+          bgImage.top = 0;
 
-          // Update the background image
           canvas.setBackgroundImage(bgImage, canvas.renderAll.bind(canvas));
         } else {
-          // Render the canvas if no background image
           canvas.renderAll();
         }
       }
 
       setScreenWidth(document.getElementById("root").offsetWidth);
 
-      // Handle responsive behavior for panels
       if (document.getElementById("root").offsetWidth <= 640) {
         setLeftPanelOpen(false);
         setRightPanelOpen(false);
@@ -114,13 +206,9 @@ export default function Canvas() {
         setOpenSetting(false);
       }
     };
-    // Initial setup
+
     updateCanvasSize();
-
-    // Listen for window resize
     window.addEventListener("resize", updateCanvasSize);
-
-    // Cleanup listener on unmount
     return () => window.removeEventListener("resize", updateCanvasSize);
   }, [
     setCanvasWidth,
@@ -139,44 +227,75 @@ export default function Canvas() {
   useEffect(() => {
     if (window.fabric) {
       if (fabricCanvasRef?.current) {
-        fabricCanvasRef?.current.dispose();
+        fabricCanvasRef.current.dispose();
       }
-      // Set styles directly on the canvas element
+
       const canvasElement = document.getElementById("fabric-canvas");
       if (canvasElement) {
-        canvasElement.classList.add("fabric-canvas-container"); // Add the CSS class
+        canvasElement.classList.add("fabric-canvas-container");
       }
 
       fabricCanvasRef.current = new window.fabric.Canvas("fabric-canvas", {
         width: canvasRef?.current?.offsetWidth,
         height: canvasRef?.current?.offsetWidth,
         backgroundColor: "#ffffff",
+        allowTouchScrolling: true,
+        selection: true,
+        preserveObjectStacking: true,
       });
 
-      setCanvas(fabricCanvasRef?.current);
+      setCanvas(fabricCanvasRef.current);
     }
-  }, []);
+  }, [canvasRef, fabricCanvasRef, setCanvas]);
 
   return (
-    <Card
-      className={`w-full max-w-3xl p-2 my-4 overflow-y-scroll scrollbar-thin scrollbar-thumb-secondary scrollbar-track-background rounded-none flex-1 flex flex-col ${
-        activeObject ? "mt-20" : "mt-20"
-      } mx-auto bg-white pl-5 pb-5 pt-5 border-0 shadow-none`}
-    >
-      <CardContent className="p-0 space-y-2">
-        <AspectRatio
-          ratio={getRatioValue(canvasRatio)}
-          className="overflow-y-scroll shadow-red-200 overflow-x-hidden shadow-lg rounded-lg border-2 border-primary/10 transition-all duration-300 ease-in-out hover:shadow-xl scrollbar-hide"
+    <>
+      {/* Zoom Controls */}
+      <div className="fixed bottom-4 right-4 flex items-center gap-4 bg-white p-3 rounded-lg shadow-lg z-50">
+        <span className="text-sm font-medium min-w-[45px]">{zoomLevel}%</span>
+        <Slider
+          value={[zoomLevel]}
+          onValueChange={(value) => handleZoom(value[0])}
+          min={0}
+          max={100}
+          step={1}
+          className="w-32"
+        />
+      </div>
+
+      {/* Canvas Container */}
+      <div className="w-full max-w-4xl mx-auto p-4">
+        <Card
+          className={`w-full p-2 rounded-none flex-1 flex flex-col 
+            ${activeObject ? "mt-20" : "mt-20"} 
+            mx-auto pl-5 pb-5 pt-5 border-0 shadow-none bg-transparent
+            ${zoomLevel < 100 ? "overflow-hidden" : ""}`}
         >
-          <div
-            ref={canvasRef}
-            className="w-full h-full flex items-center justify-center bg-white rounded-md shadow-lg"
-            id="canvas-ref"
+          <CardContent
+            className="p-0 h-full bg-transparent shadow-none"
+            ref={containerRef}
           >
-            <canvas id="fabric-canvas" />
-          </div>
-        </AspectRatio>
-      </CardContent>
-    </Card>
+            <AspectRatio
+              ratio={getRatioValue(canvasRatio)}
+              className="rounded-lg border-0 border-primary/10 transition-all duration-300 ease-in-out"
+            >
+              <div
+                ref={canvasRef}
+                className="w-full h-full flex items-start justify-center rounded-md shadow-none touch-none"
+                id="canvas-ref"
+                style={{
+                  touchAction: "none",
+                  transform: `scale(${zoomLevel / 100})`,
+                  transformOrigin: "50% 0",
+                  transition: "transform 0.1s ease-out",
+                }}
+              >
+                <canvas id="fabric-canvas" />
+              </div>
+            </AspectRatio>
+          </CardContent>
+        </Card>
+      </div>
+    </>
   );
 }
diff --git a/src/components/CanvasSetting.jsx b/src/components/CanvasSetting.jsx
index d5f0e88..a46b82b 100644
--- a/src/components/CanvasSetting.jsx
+++ b/src/components/CanvasSetting.jsx
@@ -1,290 +1,301 @@
-import { useContext, useRef, useState } from 'react'
-import CanvasContext from './Context/canvasContext/CanvasContext';
-import { Card, CardTitle } from './ui/card';
-import { Button } from './ui/button';
-import { Trash2, UploadIcon, X } from 'lucide-react';
-import { Separator } from './ui/separator';
-import ColorComponent from './ColorComponent';
-import { Label } from './ui/label';
-import { Input } from './ui/input';
-import { Slider } from './ui/slider';
-import { fabric } from 'fabric';
-import OpenContext from './Context/openContext/OpenContext';
-import { ScrollArea } from './ui/scroll-area';
-import RndComponent from './Layouts/RndComponent';
+import { useContext, useRef, useState } from "react";
+import CanvasContext from "./Context/canvasContext/CanvasContext";
+import { Card, CardTitle } from "./ui/card";
+import { Button } from "./ui/button";
+import { Trash2, UploadIcon, X } from "lucide-react";
+import { Separator } from "./ui/separator";
+import ColorComponent from "./ColorComponent";
+import { Label } from "./ui/label";
+import { Input } from "./ui/input";
+import { Slider } from "./ui/slider";
+import { fabric } from "fabric";
+import OpenContext from "./Context/openContext/OpenContext";
+import { ScrollArea } from "./ui/scroll-area";
+import RndComponent from "./Layouts/RndComponent";
 
 const CanvasSetting = () => {
-    const { canvas, canvasHeight, canvasWidth, screenWidth } = useContext(CanvasContext);
-    const { setOpenSetting } = useContext(OpenContext);
-    const bgImgRef = useRef(null);
+  const { canvas, canvasHeight, canvasWidth, screenWidth } =
+    useContext(CanvasContext);
+  const { setOpenSetting } = useContext(OpenContext);
+  const bgImgRef = useRef(null);
 
-    const [canvasSettings, setCanvasSettings] = useState({
-        width: canvas?.width,
-        height: canvas?.height,
-        perPixelTargetFind: true, // Enable per-pixel detection globally
-        targetFindTolerance: 4, // Adjust for leniency in pixel-perfect detection
-    });
+  const [canvasSettings, setCanvasSettings] = useState({
+    width: canvas?.width,
+    height: canvas?.height,
+    perPixelTargetFind: true, // Enable per-pixel detection globally
+    targetFindTolerance: 4, // Adjust for leniency in pixel-perfect detection
+  });
 
-    const handleChange = (key, value) => {
-        setCanvasSettings((prevSettings) => ({
-            ...prevSettings,
-            [key]: value,
-        }));
+  const handleChange = (key, value) => {
+    setCanvasSettings((prevSettings) => ({
+      ...prevSettings,
+      [key]: value,
+    }));
 
-        // Update canvas dimensions
-        if (key === 'width') {
-            canvas.setWidth(value); // Update canvas width
-        } else if (key === 'height') {
-            canvas.setHeight(value); // Update canvas height
-        }
-
-        // Adjust the background image to fit the updated canvas
-        const bgImage = canvas.backgroundImage;
-        if (bgImage) {
-            const canvasWidth = canvas.width;
-            const canvasHeight = canvas.height;
-
-            // Calculate scaling factors for width and height
-            const scaleX = canvasWidth / bgImage.width;
-            const scaleY = canvasHeight / bgImage.height;
-
-            // Choose the larger scale to cover the entire canvas
-            const scale = Math.max(scaleX, scaleY);
-
-            // Apply the scale and center the image
-            bgImage.scaleX = scale;
-            bgImage.scaleY = scale;
-            bgImage.left = 0; // Align left
-            bgImage.top = 0;  // Align top
-
-            // Mark the background image as needing an update
-            canvas.setBackgroundImage(bgImage, canvas.renderAll.bind(canvas));
-        } else {
-            canvas.renderAll(); // Render if no background image
-        }
-    };
-
-    const setBackgroundImage = (e) => {
-        const file = e.target.files[0];
-        if (file) {
-            const blobUrl = URL.createObjectURL(file);
-
-            // Create an image element
-            const imgElement = new Image();
-            imgElement.src = blobUrl;
-
-            imgElement.onload = () => {
-                // Create a fabric.Image instance
-                const img = new fabric.Image(imgElement, {
-                    scaleX: canvas.width / imgElement.width,
-                    scaleY: canvas.height / imgElement.height,
-                });
-
-                // Set the background image on the canvas
-                canvas.setBackgroundImage(img, canvas.renderAll.bind(canvas));
-
-                // Revoke the object URL to free memory
-                URL.revokeObjectURL(blobUrl);
-            };
-
-            imgElement.onerror = () => {
-                console.error("Failed to load the image.");
-                URL.revokeObjectURL(blobUrl);
-            };
-        }
-    };
-
-    const setBackgroundOverlayImage = (e) => {
-        const file = e.target.files[0];
-        if (file) {
-            const blobUrl = URL.createObjectURL(file);
-
-            // Create an image element
-            const imgElement = new Image();
-            imgElement.src = blobUrl;
-
-            imgElement.onload = () => {
-                const img = new fabric.Image(imgElement, {
-                    scaleX: canvas.width / imgElement.width,
-                    scaleY: canvas.height / imgElement.height,
-                });
-
-                // Use setOverlayImage method to add the image as an overlay
-                canvas.setOverlayImage(img, () => {
-                    canvas.renderAll();
-                });
-
-                // Revoke the object URL after image is loaded and set
-                URL.revokeObjectURL(blobUrl);
-            };
-        }
-    };
-
-    const adjustBackgroundOpacity = (value) => {
-        if (canvas) {
-            if (canvas.backgroundImage) {
-                // Update the opacity of the background image if it exists
-                canvas.backgroundImage.set("opacity", value);
-            } else if (canvas.overlayImage) {
-                // Update the opacity of the overlay image if it exists
-                canvas.overlayImage.set("opacity", value);
-            } else {
-                console.error("No background or overlay image found on the canvas.");
-                return;
-            }
-
-            // Re-render the canvas to apply changes
-            canvas.renderAll();
-        } else {
-            console.error("Canvas is not initialized.");
-        }
-    };
-
-    const removeBackgroundImage = () => {
-        if (canvas) {
-            canvas.backgroundImage = null;
-            canvas.renderAll();
-        }
-        if (bgImgRef.current) {
-            bgImgRef.current.value = "";
-        }
-    };
-
-    const removeBackgroundOverlayImage = () => {
-        if (canvas) {
-            canvas.overlayImage = null;
-            canvas.renderAll();
-        }
-    };
-
-    const rndValue = {
-        valueX: 0,
-        valueY: 20,
-        width: 250,
-        height: 0,
-        minWidth: 250,
-        maxWidth: 300,
-        minHeight: 0,
-        maxHeight: 400,
-        bound: "parent"
-    }
-    const content = () => {
-        return (
-            <Card className="xl:p-0 lg:p-0 md:p-0 p-2">
-                <CardTitle className="flex items-center flex-wrap justify-between gap-1 xl:hidden lg:hidden md:hidden">Canvas Setting <Button className="rnd-escape" variant="secondary" onClick={() => setOpenSetting(false)}><X /></Button> </CardTitle>
-                <Separator className="mt-4 block xl:hidden lg:hidden md:hidden" />
-                <ScrollArea className="h-[400px] xl:h-fit lg:h-fit md:h-fit">
-                    <div className='rnd-escape'>
-
-                        <ColorComponent />
-
-                        <Separator className="mt-2" />
-
-                        <div className='flex flex-col my-2 gap-2 rnd-escape'>
-                            <div>
-                                <Label>Background:</Label>
-                                <div className='flex items-center w-fit gap-2 flex-wrap relative'>
-                                    <Button className="top-0 absolute flex items-center w-[30px]">
-                                        <UploadIcon className="cursor-pointer" />
-                                        <Input
-                                            ref={bgImgRef}
-                                            className="absolute top-0 opacity-0"
-                                            type="file"
-                                            accept="image/*"
-                                            onChange={setBackgroundImage}
-                                        />
-                                    </Button>
-
-                                    <Button variant="secondary" className="ml-[35px]" onClick={removeBackgroundImage}><Trash2 /></Button>
-                                </div>
-                            </div>
-
-                            <div>
-                                <Label>Background Overlay:</Label>
-                                <div className='flex items-center w-fit gap-2 flex-wrap relative'>
-                                    <Button className="top-0 absolute flex items-center w-[30px]">
-                                        <UploadIcon className="cursor-pointer" />
-                                        <Input
-                                            className="absolute top-0 opacity-0"
-                                            type="file"
-                                            accept="image/*"
-                                            onChange={setBackgroundOverlayImage}
-                                        />
-                                    </Button>
-
-                                    <Button variant="secondary" className="ml-[35px]" onClick={removeBackgroundOverlayImage}><Trash2 /></Button>
-                                </div>
-                            </div>
-
-                            {/* opacity */}
-                            <div className='flex flex-col gap-2 rnd-escape mt-2'>
-                                <Label>
-                                    Background Opacity:
-                                </Label>
-                                <Slider
-                                    defaultValue={[1.0]} // Default value, you can set it to 0.0 or another value
-                                    min={0.0}
-                                    max={1.0}
-                                    step={0.01} // Step size for fine control
-                                    onValueChange={(value) => {
-                                        const newOpacity = value[0]; // Extract slider value
-                                        adjustBackgroundOpacity(newOpacity); // Adjust Fabric.js background opacity
-                                    }}
-                                />
-                            </div>
-                        </div>
-
-                        <Separator className="mt-4" />
-
-                        {/* canvas size customization (width/height) */}
-                        <div className='flex gap-2 my-2'>
-                            <div className='flex flex-col gap-2'>
-                                <Label>
-                                    Width:
-                                </Label>
-                                <Input
-                                    min={300}
-                                    type="number"
-                                    value={canvasSettings.width}
-                                    onChange={(e) => {
-                                        if (canvasWidth > parseInt(e.target.value)) {
-                                            handleChange('width', parseInt(e.target.value, 10));
-                                        }
-                                    }}
-                                />
-                            </div>
-
-                            <div className='flex flex-col gap-2'>
-                                <Label>
-                                    Height:
-                                </Label>
-                                <Input
-                                    min={300}
-                                    type="number"
-                                    value={canvasSettings.height}
-                                    onChange={(e) => {
-                                        if (canvasHeight > parseInt(e.target.value)) {
-                                            handleChange('height', parseInt(e.target.value, 10));
-                                        }
-                                    }}
-                                />
-                            </div>
-                        </div>
-                    </div>
-                </ScrollArea>
-            </Card>
-        )
+    // Update canvas dimensions
+    if (key === "width") {
+      canvas.setWidth(value); // Update canvas width
+    } else if (key === "height") {
+      canvas.setHeight(value); // Update canvas height
     }
 
-    return screenWidth <= 768 ? (
-        <RndComponent value={rndValue}>
-            {content()}
-        </RndComponent>
-    ) : (
-        <div>
-            {content()}
-        </div>
+    // Adjust the background image to fit the updated canvas
+    const bgImage = canvas.backgroundImage;
+    if (bgImage) {
+      const canvasWidth = canvas.width;
+      const canvasHeight = canvas.height;
+
+      // Calculate scaling factors for width and height
+      const scaleX = canvasWidth / bgImage.width;
+      const scaleY = canvasHeight / bgImage.height;
+
+      // Choose the larger scale to cover the entire canvas
+      const scale = Math.max(scaleX, scaleY);
+
+      // Apply the scale and center the image
+      bgImage.scaleX = scale;
+      bgImage.scaleY = scale;
+      bgImage.left = 0; // Align left
+      bgImage.top = 0; // Align top
+
+      // Mark the background image as needing an update
+      canvas.setBackgroundImage(bgImage, canvas.renderAll.bind(canvas));
+    } else {
+      canvas.renderAll(); // Render if no background image
+    }
+  };
+
+  const setBackgroundImage = (e) => {
+    const file = e.target.files[0];
+    if (file) {
+      const blobUrl = URL.createObjectURL(file);
+
+      // Create an image element
+      const imgElement = new Image();
+      imgElement.src = blobUrl;
+
+      imgElement.onload = () => {
+        // Create a fabric.Image instance
+        const img = new fabric.Image(imgElement, {
+          scaleX: canvas.width / imgElement.width,
+          scaleY: canvas.height / imgElement.height,
+        });
+
+        // Set the background image on the canvas
+        canvas.setBackgroundImage(img, canvas.renderAll.bind(canvas));
+
+        // Revoke the object URL to free memory
+        URL.revokeObjectURL(blobUrl);
+      };
+
+      imgElement.onerror = () => {
+        console.error("Failed to load the image.");
+        URL.revokeObjectURL(blobUrl);
+      };
+    }
+  };
+
+  const setBackgroundOverlayImage = (e) => {
+    const file = e.target.files[0];
+    if (file) {
+      const blobUrl = URL.createObjectURL(file);
+
+      // Create an image element
+      const imgElement = new Image();
+      imgElement.src = blobUrl;
+
+      imgElement.onload = () => {
+        const img = new fabric.Image(imgElement, {
+          scaleX: canvas.width / imgElement.width,
+          scaleY: canvas.height / imgElement.height,
+        });
+
+        // Use setOverlayImage method to add the image as an overlay
+        canvas.setOverlayImage(img, () => {
+          canvas.renderAll();
+        });
+
+        // Revoke the object URL after image is loaded and set
+        URL.revokeObjectURL(blobUrl);
+      };
+    }
+  };
+
+  const adjustBackgroundOpacity = (value) => {
+    if (canvas) {
+      if (canvas.backgroundImage) {
+        // Update the opacity of the background image if it exists
+        canvas.backgroundImage.set("opacity", value);
+      } else if (canvas.overlayImage) {
+        // Update the opacity of the overlay image if it exists
+        canvas.overlayImage.set("opacity", value);
+      } else {
+        console.error("No background or overlay image found on the canvas.");
+        return;
+      }
+
+      // Re-render the canvas to apply changes
+      canvas.renderAll();
+    } else {
+      console.error("Canvas is not initialized.");
+    }
+  };
+
+  const removeBackgroundImage = () => {
+    if (canvas) {
+      canvas.backgroundImage = null;
+      canvas.renderAll();
+    }
+    if (bgImgRef.current) {
+      bgImgRef.current.value = "";
+    }
+  };
+
+  const removeBackgroundOverlayImage = () => {
+    if (canvas) {
+      canvas.overlayImage = null;
+      canvas.renderAll();
+    }
+  };
+
+  const rndValue = {
+    valueX: 0,
+    valueY: 20,
+    width: 250,
+    height: 0,
+    minWidth: 250,
+    maxWidth: 300,
+    minHeight: 0,
+    maxHeight: 400,
+    bound: "parent",
+  };
+  const content = () => {
+    return (
+      <Card className="xl:p-0 lg:p-0 md:p-0 p-2 border-none shadow-none">
+        <CardTitle className="flex items-center flex-wrap justify-between gap-1 xl:hidden lg:hidden md:hidden">
+          Canvas Setting{" "}
+          <Button
+            className="rnd-escape"
+            variant="secondary"
+            onClick={() => setOpenSetting(false)}
+          >
+            <X />
+          </Button>{" "}
+        </CardTitle>
+        <Separator className="mt-4 block xl:hidden lg:hidden md:hidden" />
+        <ScrollArea className="h-[400px] xl:h-fit lg:h-fit md:h-fit">
+          <div className="rnd-escape">
+            <ColorComponent />
+
+            <Separator className="mt-2" />
+
+            <div className="flex flex-col my-2 gap-2 rnd-escape">
+              <div>
+                <Label>Background:</Label>
+                <div className="flex items-center w-fit gap-2 flex-wrap relative">
+                  <Button className="top-0 absolute flex items-center w-[30px]">
+                    <UploadIcon className="cursor-pointer" />
+                    <Input
+                      ref={bgImgRef}
+                      className="absolute top-0 opacity-0"
+                      type="file"
+                      accept="image/*"
+                      onChange={setBackgroundImage}
+                    />
+                  </Button>
+
+                  <Button
+                    variant="secondary"
+                    className="ml-[35px]"
+                    onClick={removeBackgroundImage}
+                  >
+                    <Trash2 />
+                  </Button>
+                </div>
+              </div>
+
+              <div>
+                <Label>Background Overlay:</Label>
+                <div className="flex items-center w-fit gap-2 flex-wrap relative">
+                  <Button className="top-0 absolute flex items-center w-[30px]">
+                    <UploadIcon className="cursor-pointer" />
+                    <Input
+                      className="absolute top-0 opacity-0"
+                      type="file"
+                      accept="image/*"
+                      onChange={setBackgroundOverlayImage}
+                    />
+                  </Button>
+
+                  <Button
+                    variant="secondary"
+                    className="ml-[35px]"
+                    onClick={removeBackgroundOverlayImage}
+                  >
+                    <Trash2 />
+                  </Button>
+                </div>
+              </div>
+
+              {/* opacity */}
+              <div className="flex flex-col gap-2 rnd-escape mt-2">
+                <Label>Background Opacity:</Label>
+                <Slider
+                  defaultValue={[1.0]} // Default value, you can set it to 0.0 or another value
+                  min={0.0}
+                  max={1.0}
+                  step={0.01} // Step size for fine control
+                  onValueChange={(value) => {
+                    const newOpacity = value[0]; // Extract slider value
+                    adjustBackgroundOpacity(newOpacity); // Adjust Fabric.js background opacity
+                  }}
+                />
+              </div>
+            </div>
+
+            <Separator className="mt-4" />
+
+            {/* canvas size customization (width/height) */}
+            <div className="flex gap-2 my-2">
+              <div className="flex flex-col gap-2">
+                <Label>Width:</Label>
+                <Input
+                  min={300}
+                  type="number"
+                  value={canvasSettings.width}
+                  onChange={(e) => {
+                    if (canvasWidth > parseInt(e.target.value)) {
+                      handleChange("width", parseInt(e.target.value, 10));
+                    }
+                  }}
+                />
+              </div>
+
+              <div className="flex flex-col gap-2">
+                <Label>Height:</Label>
+                <Input
+                  min={300}
+                  type="number"
+                  value={canvasSettings.height}
+                  onChange={(e) => {
+                    if (canvasHeight > parseInt(e.target.value)) {
+                      handleChange("height", parseInt(e.target.value, 10));
+                    }
+                  }}
+                />
+              </div>
+            </div>
+          </div>
+        </ScrollArea>
+      </Card>
     );
-}
+  };
 
-export default CanvasSetting
\ No newline at end of file
+  return screenWidth <= 768 ? (
+    <RndComponent value={rndValue}>{content()}</RndComponent>
+  ) : (
+    <div>{content()}</div>
+  );
+};
+
+export default CanvasSetting;
diff --git a/src/components/EachComponent/CustomShape/CustomShape.jsx b/src/components/EachComponent/CustomShape/CustomShape.jsx
index 2615965..7b071ea 100644
--- a/src/components/EachComponent/CustomShape/CustomShape.jsx
+++ b/src/components/EachComponent/CustomShape/CustomShape.jsx
@@ -1,68 +1,69 @@
-import ActiveObjectContext from '@/components/Context/activeObject/ObjectContext';
-import CanvasContext from '@/components/Context/canvasContext/CanvasContext';
-import { useContext } from 'react'
-import { shapes } from './shapes';
-import { fabric } from 'fabric';
+import ActiveObjectContext from "@/components/Context/activeObject/ObjectContext";
+import CanvasContext from "@/components/Context/canvasContext/CanvasContext";
+import { useContext } from "react";
+import { shapes } from "./shapes";
+import { fabric } from "fabric";
 
 const CustomShape = () => {
-    const { canvas } = useContext(CanvasContext);
-    const { setActiveObject } = useContext(ActiveObjectContext);
+  const { canvas } = useContext(CanvasContext);
+  const { setActiveObject } = useContext(ActiveObjectContext);
 
-    const addShape = (each) => {
-        // Load the SVG from the imported file
-        fabric.loadSVGFromURL(each, (objects, options) => {
-            const svgGroup = fabric.util.groupSVGElements(objects, options);
+  const addShape = (each) => {
+    // Load the SVG from the imported file
+    fabric.loadSVGFromURL(each, (objects, options) => {
+      const svgGroup = fabric.util.groupSVGElements(objects, options);
 
-            // Calculate canvas center
-            const centerX = canvas.getWidth() / 2;
-            const centerY = canvas.getHeight() / 2;
+      // Calculate canvas center
+      const centerX = canvas.getWidth() / 2;
+      const centerY = canvas.getHeight() / 2;
 
-            // Set properties for centering the SVG
-            svgGroup.set({
-                left: centerX, // Center horizontally
-                top: centerY,  // Center vertically
-                originX: 'center', // Set the origin to the center
-                originY: 'center',
-                fill: "#f09b0a",
-                scaleX: 1,
-                scaleY: 1,
-            });
+      // Set properties for centering the SVG
+      svgGroup.set({
+        left: centerX, // Center horizontally
+        top: centerY, // Center vertically
+        originX: "center", // Set the origin to the center
+        originY: "center",
+        fill: "#f09b0a",
+        scaleX: 1,
+        scaleY: 1,
+        strokeWidth: 0,
+      });
 
-            // Add SVG to the canvas
-            canvas.add(svgGroup);
-            canvas.setActiveObject(svgGroup);
+      // Add SVG to the canvas
+      canvas.add(svgGroup);
+      canvas.setActiveObject(svgGroup);
 
-            // Update the active object state
-            setActiveObject(svgGroup);
+      // Update the active object state
+      setActiveObject(svgGroup);
 
-            // Render the canvas
-            canvas.renderAll();
-        });
-    };
+      // Render the canvas
+      canvas.renderAll();
+    });
+  };
 
-    return (
+  return (
+    <div
+      className="rounded-md grid grid-cols-3 gap-2 p-2"
+      onClick={() => addShape()}
+    >
+      {shapes.map((each) => (
         <div
-            className="rounded-md grid grid-cols-3 gap-2 p-2"
-            onClick={() => addShape()}
+          key={each.shape}
+          className="relative aspect-square flex items-center justify-center bg-secondary rounded-md cursor-pointer"
+          onClick={(e) => {
+            e.stopPropagation();
+            addShape(each.source);
+          }}
         >
-            {shapes.map((each) => (
-                <div
-                    key={each.shape}
-                    className="relative aspect-square flex items-center justify-center bg-secondary rounded-md cursor-pointer"
-                    onClick={(e) => {
-                        e.stopPropagation()
-                        addShape(each.source)
-                    }}
-                >
-                    <img
-                        src={each.source}
-                        alt={`Shape ${each.shape}`}
-                        className="max-w-full max-h-full p-1 object-contain hover:bg-gray-200 rounded-md transition-colors duration-200"
-                    />
-                </div>
-            ))}
+          <img
+            src={each.source}
+            alt={`Shape ${each.shape}`}
+            className="max-w-full max-h-full p-1 object-contain hover:bg-gray-200 rounded-md transition-colors duration-200"
+          />
         </div>
-    )
-}
+      ))}
+    </div>
+  );
+};
 
-export default CustomShape
\ No newline at end of file
+export default CustomShape;
diff --git a/src/components/EachComponent/Customization/LockObject.jsx b/src/components/EachComponent/Customization/LockObject.jsx
index 4f83377..5d9e9c9 100644
--- a/src/components/EachComponent/Customization/LockObject.jsx
+++ b/src/components/EachComponent/Customization/LockObject.jsx
@@ -4,6 +4,7 @@ import { Button } from "@/components/ui/button";
 import { useToast } from "@/hooks/use-toast";
 import { useContext, useEffect, useState } from "react";
 import { Lock, Unlock } from "lucide-react";
+import { Tooltip } from "react-tooltip";
 
 const LockObject = () => {
   const { canvas } = useContext(CanvasContext);
@@ -51,19 +52,22 @@ const LockObject = () => {
 
   return (
     <div className="shadow-none border-0">
-      <Button
-        onClick={toggleLock}
-        variant="outline"
-        size="icon"
-        disabled={!activeObject}
-        title={isLocked ? "Unlock object" : "Lock object"}
-      >
-        {isLocked ? (
-          <Unlock className="h-4 w-4" />
-        ) : (
-          <Lock className="h-4 w-4" />
-        )}
-      </Button>
+      <a data-tooltip-id="lock">
+        <Button
+          onClick={toggleLock}
+          variant="outline"
+          size="icon"
+          disabled={!activeObject}
+          title={isLocked ? "Unlock object" : "Lock object"}
+        >
+          {isLocked ? (
+            <Unlock className="h-4 w-4" />
+          ) : (
+            <Lock className="h-4 w-4" />
+          )}
+        </Button>
+      </a>
+      <Tooltip id="lock" content="Lock object" place="bottom" />
     </div>
   );
 };
diff --git a/src/components/EachComponent/Customization/OpacityCustomization.jsx b/src/components/EachComponent/Customization/OpacityCustomization.jsx
index a1d2e84..e30fb26 100644
--- a/src/components/EachComponent/Customization/OpacityCustomization.jsx
+++ b/src/components/EachComponent/Customization/OpacityCustomization.jsx
@@ -10,6 +10,7 @@ import {
 import { useContext, useEffect, useState } from "react";
 import { BsTransparency } from "react-icons/bs";
 import { Button } from "@/components/ui/button";
+import { Tooltip } from "react-tooltip";
 
 const OpacityCustomization = () => {
   const { activeObject } = useContext(ActiveObjectContext);
@@ -31,30 +32,35 @@ const OpacityCustomization = () => {
   };
 
   return (
-    <Popover>
-      <PopoverTrigger asChild>
-        <Button variant="ghost" size="icon" className="h-8 w-8">
-          <BsTransparency className="h-4 w-4" size={20} />
-        </Button>
-      </PopoverTrigger>
-      <PopoverContent className="w-64 mt-3">
-        <div className="grid gap-4">
-          <div className="flex items-center justify-between">
-            <Label className="text-sm font-medium">Opacity</Label>
-            <span className="text-sm text-gray-500">
-              {Math.round(opacity * 100)}%
-            </span>
+    <div>
+      <Popover>
+        <PopoverTrigger asChild>
+          <a data-tooltip-id="opacity-ic">
+            <Button variant="ghost" size="icon" className="h-8 w-8">
+              <BsTransparency className="h-4 w-4" size={20} />
+            </Button>
+          </a>
+        </PopoverTrigger>
+        <PopoverContent className="w-64 mt-3">
+          <div className="grid gap-4">
+            <div className="flex items-center justify-between">
+              <Label className="text-sm font-medium">Opacity</Label>
+              <span className="text-sm text-gray-500">
+                {Math.round(opacity * 100)}%
+              </span>
+            </div>
+            <Slider
+              value={[opacity]}
+              min={0}
+              max={1}
+              step={0.01}
+              onValueChange={(value) => adjustBackgroundOpacity(value[0])}
+            />
           </div>
-          <Slider
-            value={[opacity]}
-            min={0}
-            max={1}
-            step={0.01}
-            onValueChange={(value) => adjustBackgroundOpacity(value[0])}
-          />
-        </div>
-      </PopoverContent>
-    </Popover>
+        </PopoverContent>
+      </Popover>
+      <Tooltip id="opacity-ic" content="Transparency" place="bottom" />
+    </div>
   );
 };
 
diff --git a/src/components/EachComponent/Icons/AllIcons.jsx b/src/components/EachComponent/Icons/AllIcons.jsx
index c08e5d6..75e6013 100644
--- a/src/components/EachComponent/Icons/AllIcons.jsx
+++ b/src/components/EachComponent/Icons/AllIcons.jsx
@@ -4,133 +4,141 @@ import { Card, CardDescription, CardTitle } from "@/components/ui/card";
 import { Input } from "@/components/ui/input";
 import * as lucideIcons from "lucide-react";
 import CanvasContext from "@/components/Context/canvasContext/CanvasContext";
-import { fabric } from 'fabric';
+import { fabric } from "fabric";
 import ActiveObjectContext from "@/components/Context/activeObject/ObjectContext";
 import { useToast } from "@/hooks/use-toast";
 
 const AllIconsPage = () => {
-    const [search, setSearch] = useState("");
-    const { canvas } = useContext(CanvasContext);
-    const { setActiveObject } = useContext(ActiveObjectContext);
+  const [search, setSearch] = useState("");
+  const { canvas } = useContext(CanvasContext);
+  const { setActiveObject } = useContext(ActiveObjectContext);
 
-    const { toast } = useToast();
+  const { toast } = useToast();
 
-    // Assume icons is already defined as shown previously, and filtered is created based on the search query
-    const icons = Object.entries(lucideIcons)?.filter(([name, Icon]) =>
-        !name.includes("Icon") && Icon?.$$typeof
-    );
+  // Assume icons is already defined as shown previously, and filtered is created based on the search query
+  const icons = Object.entries(lucideIcons)?.filter(
+    ([name, Icon]) => !name.includes("Icon") && Icon?.$$typeof
+  );
 
-    const filtered = icons.filter(([name, Icon]) =>
-        name.toLowerCase().includes(search.toLowerCase())
-    );
+  const filtered = icons.filter(([name, Icon]) =>
+    name.toLowerCase().includes(search.toLowerCase())
+  );
 
-    const handleSearch = (e) => {
-        setSearch(e.target.value);
-    };
+  const handleSearch = (e) => {
+    setSearch(e.target.value);
+  };
 
-    const handleIcon = (e) => {
-        // Check if the target is an SVG or path
-        if (e.target.tagName.toLowerCase() === 'svg') {
-            // Serialize the SVG element to a string and pass it
-            const svgString = new XMLSerializer().serializeToString(e.target);
-            handleAddIcon(svgString);
+  const handleIcon = (e) => {
+    // Check if the target is an SVG or path
+    if (e.target.tagName.toLowerCase() === "svg") {
+      // Serialize the SVG element to a string and pass it
+      const svgString = new XMLSerializer().serializeToString(e.target);
+      handleAddIcon(svgString);
+    } else {
+      toast({
+        title: "Invalid Choice",
+        description: "The target is a path element! Select the full icon.",
+        variant: "destructive",
+      });
+    }
+  };
+
+  const handleAddIcon = (svgString) => {
+    if (!canvas) {
+      console.error("Canvas is not initialized.");
+      return;
+    }
+
+    if (!svgString) {
+      console.error("Failed to retrieve SVG string from the icon.");
+      return;
+    }
+
+    fabric.loadSVGFromString(svgString, (objects, options) => {
+      if (!objects || !options) {
+        console.error("Failed to parse SVG.");
+        return;
+      }
+
+      // Recursively set fill color for all objects
+      const setFillColor = (obj, color) => {
+        if (obj.type === "group" && obj._objects) {
+          obj._objects.forEach((child) => setFillColor(child, color));
         } else {
-            toast({
-                title: "Invalid Choice",
-                description: "The target is a path element! Select the full icon.",
-                variant: "destructive",
-            })
+          obj.set("stroke", color);
         }
-    };
+      };
 
-    const handleAddIcon = (svgString) => {
-        if (!canvas) {
-            console.error("Canvas is not initialized.");
-            return;
-        }
+      objects.forEach((obj) => setFillColor(obj, "#FFA500")); // Set fill color to orange
 
-        if (!svgString) {
-            console.error("Failed to retrieve SVG string from the icon.");
-            return;
-        }
+      const iconGroup = fabric.util.groupSVGElements(objects, options);
+      iconGroup.set({
+        left: canvas.width / 2,
+        top: canvas.height / 2,
+        originX: "center",
+        originY: "center",
+        scaleX: 6,
+        scaleY: 6,
+      });
 
-        fabric.loadSVGFromString(svgString, (objects, options) => {
-            if (!objects || !options) {
-                console.error("Failed to parse SVG.");
-                return;
-            }
-
-            // Recursively set fill color for all objects
-            const setFillColor = (obj, color) => {
-                if (obj.type === 'group' && obj._objects) {
-                    obj._objects.forEach((child) => setFillColor(child, color));
-                } else {
-                    obj.set('stroke', color);
-                }
-            };
-
-            objects.forEach((obj) => setFillColor(obj, '#FFA500')); // Set fill color to orange
-
-            const iconGroup = fabric.util.groupSVGElements(objects, options);
-            iconGroup.set({
-                left: canvas.width / 2,
-                top: canvas.height / 2,
-                originX: 'center',
-                originY: 'center',
-                scaleX: 6,
-                scaleY: 6,
-            });
-
-            canvas.add(iconGroup);
-            canvas.setActiveObject(iconGroup);
-            setActiveObject(iconGroup);
-            canvas.renderAll();
-        });
-    };
-
-    // Cell component for rendering each icon
-    const Cell = ({ columnIndex, rowIndex, style }) => {
-        const index = rowIndex * 3 + columnIndex; // Adjust columns as needed (3 columns in this case)
-        if (index >= filtered.length) return null; // Handle out-of-bounds index
-        const [name, Icon] = filtered[index];
-        // Define cell-specific styles
-        return (
-            <div style={style}>
-                <div className="bg-red-50 rounded-md ml-1 p-1">
-                    <Icon size={32} className="cursor-pointer bg-primary rounded-md text-white p-1" onClick={handleIcon} />
-                    <p className="text-xs truncate w-full overflow-hidden whitespace-nowrap">{name}</p>
-                </div>
-            </div>
-        );
-    };
+      canvas.add(iconGroup);
+      canvas.setActiveObject(iconGroup);
+      setActiveObject(iconGroup);
+      canvas.renderAll();
+    });
+  };
 
+  // Cell component for rendering each icon
+  const Cell = ({ columnIndex, rowIndex, style }) => {
+    const index = rowIndex * 3 + columnIndex; // Adjust columns as needed (3 columns in this case)
+    if (index >= filtered.length) return null; // Handle out-of-bounds index
+    const [name, Icon] = filtered[index];
+    // Define cell-specific styles
     return (
-        <Card className="flex flex-col px-2 py-2 gap-1 scrollbar-thin scrollbar-thumb-secondary scrollbar-track-white">
-            <CardTitle className="flex items-center flex-wrap my-1">All Icons</CardTitle>
-            <CardDescription className="text-xs">All copyright (c) for Lucide are held by Lucide Contributors 2022.</CardDescription>
-            <Input
-                type="text"
-                placeholder="Search icons..."
-                onChange={handleSearch}
-                className="border p-2 mb-0 w-full"
-            />
-            <Card className="flex items-center justify-center rounded-none p-1">
-                <Grid
-                    columnCount={4}
-                    columnWidth={50}
-                    height={330}
-                    rowCount={Math.ceil(filtered.length / 4)}
-                    rowHeight={70}
-                    width={240}
-                    className="scrollbar-thin scrollbar-thumb-secondary scrollbar-track-white"
-                >
-                    {Cell}
-                </Grid>
-            </Card>
-        </Card>
-    )
+      <div style={style}>
+        <div className="bg-red-50 rounded-md ml-1 p-1">
+          <Icon
+            size={32}
+            className="cursor-pointer bg-primary rounded-md text-white p-1 mx-auto"
+            onClick={handleIcon}
+          />
+          <p className="text-xs text-center truncate w-full overflow-hidden whitespace-nowrap">
+            {name}
+          </p>
+        </div>
+      </div>
+    );
+  };
+
+  return (
+    <Card className="flex flex-col py-2 gap-1 scrollbar-thin scrollbar-thumb-secondary scrollbar-track-white border-none shadow-none">
+      <CardTitle className="flex items-center flex-wrap my-1">
+        All Icons
+      </CardTitle>
+      <CardDescription className="text-xs">
+        All copyright (c) for Lucide are held by Lucide Contributors 2022.
+      </CardDescription>
+      <Input
+        type="text"
+        placeholder="Search icons..."
+        onChange={handleSearch}
+        className="border p-2 mb-0 w-[280px]"
+      />
+      <Card className="flex items-center justify-center rounded-none p-1 border-none shadow-none">
+        <Grid
+          columnCount={3}
+          columnWidth={90}
+          height={330}
+          rowCount={Math.ceil(filtered.length / 3)}
+          rowHeight={70}
+          width={300}
+          className="scrollbar-thin scrollbar-thumb-secondary scrollbar-track-white"
+        >
+          {Cell}
+        </Grid>
+      </Card>
+    </Card>
+  );
 };
 
 export default AllIconsPage;
-
-
diff --git a/src/components/EachComponent/RoundedShapes/RoundedShape.jsx b/src/components/EachComponent/RoundedShapes/RoundedShape.jsx
index 371b9e6..e512138 100644
--- a/src/components/EachComponent/RoundedShapes/RoundedShape.jsx
+++ b/src/components/EachComponent/RoundedShapes/RoundedShape.jsx
@@ -1,85 +1,95 @@
-import React, { useContext } from 'react'
-import { ArrowBigRight, Diamond, Hexagon, Octagon, Pentagon, Sparkle, Square, Star, Triangle } from 'lucide-react'
+import React, { useContext } from "react";
+import {
+  ArrowBigRight,
+  Diamond,
+  Hexagon,
+  Octagon,
+  Pentagon,
+  Sparkle,
+  Square,
+  Star,
+  Triangle,
+} from "lucide-react";
 import ReactDOMServer from "react-dom/server";
-import { fabric } from 'fabric';
-import CanvasContext from '@/components/Context/canvasContext/CanvasContext';
-import ActiveObjectContext from '@/components/Context/activeObject/ObjectContext';
-import { Card } from '@/components/ui/card';
-import { Separator } from '@/components/ui/separator';
+import { fabric } from "fabric";
+import CanvasContext from "@/components/Context/canvasContext/CanvasContext";
+import ActiveObjectContext from "@/components/Context/activeObject/ObjectContext";
+import { Card } from "@/components/ui/card";
+import { Separator } from "@/components/ui/separator";
 
 const RoundedShape = () => {
-    const { canvas } = useContext(CanvasContext);
-    const { setActiveObject } = useContext(ActiveObjectContext);
+  const { canvas } = useContext(CanvasContext);
+  const { setActiveObject } = useContext(ActiveObjectContext);
 
-    const shapes = [
-        { icon: <ArrowBigRight />, name: 'Arrow' },
-        { icon: <Diamond />, name: 'Diamond' },
-        { icon: <Hexagon />, name: 'Hexagon' },
-        { icon: <Octagon />, name: 'Octagon' },
-        { icon: <Pentagon />, name: 'Pentagon' },
-        { icon: <Sparkle />, name: 'Sparkle' },
-        { icon: <Square />, name: 'Square' },
-        { icon: <Star />, name: 'Star' },
-        { icon: <Triangle />, name: 'Triangle' },
-    ];
+  const shapes = [
+    { icon: <ArrowBigRight />, name: "Arrow" },
+    { icon: <Diamond />, name: "Diamond" },
+    { icon: <Hexagon />, name: "Hexagon" },
+    { icon: <Octagon />, name: "Octagon" },
+    { icon: <Pentagon />, name: "Pentagon" },
+    { icon: <Sparkle />, name: "Sparkle" },
+    { icon: <Square />, name: "Square" },
+    { icon: <Star />, name: "Star" },
+    { icon: <Triangle />, name: "Triangle" },
+  ];
 
-    const addObject = (icon) => {
-        if (!canvas) {
-            console.error("Canvas is not initialized.");
-            return;
-        }
-        const svgString = ReactDOMServer.renderToStaticMarkup(icon);
+  const addObject = (icon) => {
+    if (!canvas) {
+      console.error("Canvas is not initialized.");
+      return;
+    }
+    const svgString = ReactDOMServer.renderToStaticMarkup(icon);
 
-        if (!svgString) {
-            console.error("Failed to retrieve SVG string from icon.");
-            return;
-        }
-        // Load SVG onto the Fabric.js canvas
-        fabric.loadSVGFromString(svgString, (objects, options) => {
-            if (!objects || !options) {
-                console.error("Failed to parse SVG.");
-                return;
-            }
+    if (!svgString) {
+      console.error("Failed to retrieve SVG string from icon.");
+      return;
+    }
+    // Load SVG onto the Fabric.js canvas
+    fabric.loadSVGFromString(svgString, (objects, options) => {
+      if (!objects || !options) {
+        console.error("Failed to parse SVG.");
+        return;
+      }
 
-            const iconGroup = fabric.util.groupSVGElements(objects, options);
-            iconGroup.set({
-                left: canvas.width / 2,
-                top: canvas.height / 2,
-                originX: 'center',
-                originY: 'center',
-                fill: "#f09b0a",
-                scaleX: 6,
-                scaleY: 6,
-                strokeWidth: 0,
-                stroke: "#ffffff"
-            });
-            canvas.add(iconGroup);
-            canvas.setActiveObject(iconGroup);
-            setActiveObject(iconGroup)
-            canvas.renderAll();
-        });
-    };
+      const iconGroup = fabric.util.groupSVGElements(objects, options);
+      iconGroup.set({
+        left: canvas.width / 2,
+        top: canvas.height / 2,
+        originX: "center",
+        originY: "center",
+        fill: "#f09b0a",
+        scaleX: 6,
+        scaleY: 6,
+        strokeWidth: 0,
+        stroke: "#ffffff",
+      });
+      canvas.add(iconGroup);
+      canvas.setActiveObject(iconGroup);
+      setActiveObject(iconGroup);
+      canvas.renderAll();
+    });
+  };
 
-    return (
-        <Card className="p-2 bg-gradient-to-br from-white to-gray-100 rounded-xl shadow-lg">
-            <h2 className="font-semibold text-sm mb-1">Rounded Shapes</h2>
-            <Separator className="my-2" />
-            <div className="grid grid-cols-3 gap-y-4 gap-x-2">
-                {shapes.map((shape, index) => (
-                    <button
-                        key={index}
-                        className="group flex flex-col items-center justify-center p-1 bg-secondary rounded-lg shadow-md hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 hover:scale-105"
-                        onClick={() => addObject(shape.icon)}
-                    >
-                        <div className="text-orange-600 group-hover:text-orange-500 transition-colors duration-300">
-                            {React.cloneElement(shape.icon, { size: 36 })}
-                        </div>
-                        {/* <span className="text-xs font-bold text-gray-700 group-hover:text-blue-600 transition-colors duration-300">{shape.name}</span> */}
-                    </button>
-                ))}
+  return (
+    <Card className="p-2 border-none shadow-none">
+      <h2 className="font-semibold text-sm mb-1">Rounded Shapes</h2>
+      <Separator className="my-2" />
+      <div className="grid grid-cols-3 gap-y-4 gap-x-2">
+        {shapes.map((shape, index) => (
+          <button
+            key={index}
+            className="group flex flex-col items-center justify-center p-1 bg-secondary rounded-lg shadow-md hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 hover:scale-105"
+            onClick={() => addObject(shape.icon)}
+          >
+            <div className="text-orange-600 group-hover:text-orange-500 transition-colors duration-300">
+              {React.cloneElement(shape.icon, { size: 36 })}
             </div>
-        </Card>
-    )
-}
+            {/* <span className="text-xs font-bold text-gray-700 group-hover:text-blue-600 transition-colors duration-300">{shape.name}</span> */}
+          </button>
+        ))}
+      </div>
+    </Card>
+  );
+};
 
-export default RoundedShape
\ No newline at end of file
+export default RoundedShape;
diff --git a/src/components/EachComponent/Shapes/PlainShapes.jsx b/src/components/EachComponent/Shapes/PlainShapes.jsx
index 87a17c2..f62eed3 100644
--- a/src/components/EachComponent/Shapes/PlainShapes.jsx
+++ b/src/components/EachComponent/Shapes/PlainShapes.jsx
@@ -1,174 +1,326 @@
-import ActiveObjectContext from '@/components/Context/activeObject/ObjectContext';
-import CanvasContext from '@/components/Context/canvasContext/CanvasContext';
-import React, { useContext } from 'react'
+import ActiveObjectContext from "@/components/Context/activeObject/ObjectContext";
+import CanvasContext from "@/components/Context/canvasContext/CanvasContext";
+import React, { useContext } from "react";
 import ReactDOMServer from "react-dom/server";
-import { fabric } from 'fabric';
-import { Card } from '@/components/ui/card';
-import { Separator } from '@/components/ui/separator';
-import { Badge, Circle, Heart, Shield } from 'lucide-react';
+import { fabric } from "fabric";
+import { Card } from "@/components/ui/card";
+import { Separator } from "@/components/ui/separator";
+import { Badge, Circle, Heart, Shield } from "lucide-react";
 
 const PlainShapes = () => {
-    const { canvas } = useContext(CanvasContext);
-    const { setActiveObject } = useContext(ActiveObjectContext);
+  const { canvas } = useContext(CanvasContext);
+  const { setActiveObject } = useContext(ActiveObjectContext);
 
-    const shapes = [
-        {
-            icon: <svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 24 24" className="lucide lucide-arrow-big-left" fill='orange'>
-                <path d="M18 15H12v4L5 12l7-7v4h6v6z" />
-            </svg>, name: 'Arrow'
-        },
+  const shapes = [
+    {
+      icon: (
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="36"
+          height="36"
+          viewBox="0 0 24 24"
+          className="lucide lucide-arrow-big-left"
+          fill="orange"
+        >
+          <path d="M18 15H12v4L5 12l7-7v4h6v6z" />
+        </svg>
+      ),
+      name: "Arrow",
+    },
 
-        { icon: <Badge />, name: 'Badge' },
-        { icon: <Circle />, name: 'Circle' },
+    { icon: <Badge />, name: "Badge" },
+    { icon: <Circle />, name: "Circle" },
 
-        { icon: <svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 24 24" fill='orange' className="lucide lucide-club"><path d="M17.28 9.05a5.5 5.5 0 1 0-10.56 0A5.5 5.5 0 1 0 12 17.66a5.5 5.5 0 1 0 5.28-8.6Z" /></svg>, name: 'Club' },
+    {
+      icon: (
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="36"
+          height="36"
+          viewBox="0 0 24 24"
+          fill="orange"
+          className="lucide lucide-club"
+        >
+          <path d="M17.28 9.05a5.5 5.5 0 1 0-10.56 0A5.5 5.5 0 1 0 12 17.66a5.5 5.5 0 1 0 5.28-8.6Z" />
+        </svg>
+      ),
+      name: "Club",
+    },
 
-        {
-            icon: <svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="#ea580c" strokeWidth="2" strokeLinecap="butt" strokeLinejoin="miter" className="lucide lucide-cross">
-                <path d="M4 12h16M12 4v16" />
-            </svg>, name: 'Cross'
-        },
+    {
+      icon: (
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="36"
+          height="36"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="#ea580c"
+          strokeWidth="2"
+          strokeLinecap="butt"
+          strokeLinejoin="miter"
+          className="lucide lucide-cross"
+        >
+          <path d="M4 12h16M12 4v16" />
+        </svg>
+      ),
+      name: "Cross",
+    },
 
-        {
-            icon: <svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 24 24" fill="orange" className="lucide lucide-diamond">
-                <path d="M12 2L22 12L12 22L2 12Z" />
-            </svg>, name: 'Diamond'
-        },
+    {
+      icon: (
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="36"
+          height="36"
+          viewBox="0 0 24 24"
+          fill="orange"
+          className="lucide lucide-diamond"
+        >
+          <path d="M12 2L22 12L12 22L2 12Z" />
+        </svg>
+      ),
+      name: "Diamond",
+    },
 
-        { icon: <Heart />, name: 'Heart' },
+    { icon: <Heart />, name: "Heart" },
 
-        {
-            icon: <svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 24 24" fill="orange" className="lucide lucide-hexagon">
-                <path d="M12 2L21 8v8l-9 6-9-6V8L12 2z" />
-            </svg>, name: 'Hexagon'
-        },
+    {
+      icon: (
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="36"
+          height="36"
+          viewBox="0 0 24 24"
+          fill="orange"
+          className="lucide lucide-hexagon"
+        >
+          <path d="M12 2L21 8v8l-9 6-9-6V8L12 2z" />
+        </svg>
+      ),
+      name: "Hexagon",
+    },
 
-        {
-            icon: <svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 24 24" fill="white" stroke="#ea580c" strokeWidth="2" strokeLinecap="butt" strokeLinejoin="miter" className="lucide lucide-arrow-right">
-                <path d="M5 12h14" />
-            </svg>, name: 'Line'
-        },
+    {
+      icon: (
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="36"
+          height="36"
+          viewBox="0 0 24 24"
+          fill="white"
+          stroke="#ea580c"
+          strokeWidth="2"
+          strokeLinecap="butt"
+          strokeLinejoin="miter"
+          className="lucide lucide-arrow-right"
+        >
+          <path d="M5 12h14" />
+        </svg>
+      ),
+      name: "Line",
+    },
 
-        {
-            icon: <svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 24 24" fill="orange" stroke="#ec7e7e" strokeWidth="0" className="lucide lucide-octagon">
-                <path d="M4 8 L8 4 H16 L20 8 V16 L16 20 H8 L4 16 Z" />
-            </svg>, name: 'Octagon'
-        },
+    {
+      icon: (
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="36"
+          height="36"
+          viewBox="0 0 24 24"
+          fill="orange"
+          stroke="#ec7e7e"
+          strokeWidth="0"
+          className="lucide lucide-octagon"
+        >
+          <path d="M4 8 L8 4 H16 L20 8 V16 L16 20 H8 L4 16 Z" />
+        </svg>
+      ),
+      name: "Octagon",
+    },
 
-        {
-            icon: <svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 24 24" fill="orange" className="lucide lucide-pentagon">
-                <path d="M2 11 L12 2 L22 11 L19 21 L5 21 Z" />
-            </svg>, name: 'Pentagon'
-        },
+    {
+      icon: (
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="36"
+          height="36"
+          viewBox="0 0 24 24"
+          fill="orange"
+          className="lucide lucide-pentagon"
+        >
+          <path d="M2 11 L12 2 L22 11 L19 21 L5 21 Z" />
+        </svg>
+      ),
+      name: "Pentagon",
+    },
 
-        {
-            icon: <svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 24 24" fill='orange' className="lucide lucide-rectangle-horizontal">
-                <path d="M2 6h20v12H2z" />
-            </svg>, name: 'Rectangle'
-        },
+    {
+      icon: (
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="36"
+          height="36"
+          viewBox="0 0 24 24"
+          fill="orange"
+          className="lucide lucide-rectangle-horizontal"
+        >
+          <path d="M2 6h20v12H2z" />
+        </svg>
+      ),
+      name: "Rectangle",
+    },
 
-        {
-            icon: <svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 24 24" fill="orange" className="lucide lucide-triangle-right">
-                <path d="M2 4 L22 20 L2 20 Z" />
-            </svg>, name: 'Right Triangle'
-        },
+    {
+      icon: (
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="36"
+          height="36"
+          viewBox="0 0 24 24"
+          fill="orange"
+          className="lucide lucide-triangle-right"
+        >
+          <path d="M2 4 L22 20 L2 20 Z" />
+        </svg>
+      ),
+      name: "Right Triangle",
+    },
 
+    {
+      icon: <Shield fill="orange" stroke="0" />,
+      name: "Shield",
+    },
 
-        {
-            icon: <Shield fill="orange" stroke="0" />, name: 'Shield'
-        },
+    {
+      icon: (
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="36"
+          height="36"
+          viewBox="0 0 24 24"
+          fill="orange"
+          className="lucide lucide-square"
+        >
+          <path d="M3 3h18v18H3z" />
+        </svg>
+      ),
+      name: "Rectangle Square",
+    },
 
-        {
-            icon: <svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 24 24" fill="orange" className="lucide lucide-square">
-                <path d="M3 3h18v18H3z" />
-            </svg>, name: 'Rectangle Square'
-        },
+    {
+      icon: (
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="36"
+          height="36"
+          viewBox="0 0 24 24"
+          fill="orange"
+          className="lucide lucide-star"
+        >
+          <path d="M12 2 L14.85 8.9 L22 10 L16.5 14.5 L18 21 L12 17.5 L6 21 L7.5 14.5 L2 10 L9.15 8.9 Z" />
+        </svg>
+      ),
+      name: "Star",
+    },
 
+    {
+      icon: (
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="36"
+          height="36"
+          viewBox="0 0 24 24"
+          fill="orange"
+          className="lucide lucide-triangle"
+        >
+          <path d="M12 4L4 20h16L12 4Z" />
+        </svg>
+      ),
+      name: "Triangle",
+    },
 
-        {
-            icon: <svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 24 24" fill="orange" className="lucide lucide-star">
-                <path d="M12 2 L14.85 8.9 L22 10 L16.5 14.5 L18 21 L12 17.5 L6 21 L7.5 14.5 L2 10 L9.15 8.9 Z" />
-            </svg>, name: 'Star'
-        },
+    {
+      icon: (
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="36"
+          height="36"
+          viewBox="0 0 24 24"
+          fill="orange"
+          className="lucide lucide-rectangle-vertical scale-125"
+        >
+          <path d="M6 2h12v20H6z" />
+        </svg>
+      ),
+      name: "Rectangle Vertical",
+    },
+  ];
 
-        {
-            icon: <svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 24 24" fill="orange" className="lucide lucide-triangle">
-                <path d="M12 4L4 20h16L12 4Z" />
-            </svg>, name: 'Triangle'
-        },
+  const addObject = (icon, name) => {
+    if (!canvas) {
+      console.error("Canvas is not initialized.");
+      return;
+    }
 
-        {
-            icon: <svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 24 24" fill="orange" className="lucide lucide-rectangle-vertical scale-125">
-                <path d="M6 2h12v20H6z" />
-            </svg>, name: 'Rectangle Vertical'
-        },
+    const svgString = ReactDOMServer.renderToStaticMarkup(icon);
 
-    ];
-
-    const addObject = (icon, name) => {
-        if (!canvas) {
-            console.error("Canvas is not initialized.");
-            return;
-        }
-
-        const svgString = ReactDOMServer.renderToStaticMarkup(icon);
-
-        if (!svgString) {
-            console.error("Failed to retrieve SVG string from icon.");
-            return;
-        }
-        // Load SVG onto the Fabric.js canvas
-        fabric.loadSVGFromString(svgString, (objects, options) => {
-            if (!objects || !options) {
-                console.error("Failed to parse SVG.");
-                return;
-            }
-            const iconGroup = fabric.util.groupSVGElements(objects, options);
-            iconGroup.set({
-                left: canvas.width / 2,
-                top: canvas.height / 2,
-                originX: 'center',
-                originY: 'center',
-                fill: "#f09b0a",
-                scaleX: 6,
-                scaleY: 6,
-                strokeWidth: 0,
-                // rx: 0,
-                // x: 0,
-                // y: 0,
-            });
-            if (name === "Line") {
-                iconGroup.set({
-                    strokeWidth: 2,
-                })
-            }
-            canvas.add(iconGroup);
-            canvas.setActiveObject(iconGroup);
-            setActiveObject(iconGroup)
-            canvas.renderAll();
+    if (!svgString) {
+      console.error("Failed to retrieve SVG string from icon.");
+      return;
+    }
+    // Load SVG onto the Fabric.js canvas
+    fabric.loadSVGFromString(svgString, (objects, options) => {
+      if (!objects || !options) {
+        console.error("Failed to parse SVG.");
+        return;
+      }
+      const iconGroup = fabric.util.groupSVGElements(objects, options);
+      iconGroup.set({
+        left: canvas.width / 2,
+        top: canvas.height / 2,
+        originX: "center",
+        originY: "center",
+        fill: "#f09b0a",
+        scaleX: 6,
+        scaleY: 6,
+        strokeWidth: 0,
+        // rx: 0,
+        // x: 0,
+        // y: 0,
+      });
+      if (name === "Line") {
+        iconGroup.set({
+          strokeWidth: 2,
         });
-    };
+      }
+      canvas.add(iconGroup);
+      canvas.setActiveObject(iconGroup);
+      setActiveObject(iconGroup);
+      canvas.renderAll();
+    });
+  };
 
-    return (
-        <Card className="p-2 bg-gradient-to-br from-white to-gray-100 rounded-xl shadow-lg">
-            <h2 className="font-semibold text-sm mb-1">Plain Shapes</h2>
-            <Separator className="my-2" />
-            <div className="grid grid-cols-3 gap-y-4 gap-x-2">
-                {shapes.map((shape, index) => (
-                    <button
-                        key={index}
-                        className="group flex flex-col items-center justify-center p-1 bg-secondary rounded-lg shadow-md hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 hover:scale-105"
-                        onClick={() => addObject(shape.icon, shape.name)}
-                    >
-                        <div className="text-orange-600 group-hover:text-orange-500 transition-colors duration-300">
-                            {React.cloneElement(shape.icon, { size: 36, fill: "#ea580c" })}
-                        </div>
-                        {/* <span className="text-xs font-bold text-gray-700 group-hover:text-blue-600 transition-colors duration-300">{shape.name}</span> */}
-                    </button>
-                ))}
+  return (
+    <Card className="p-2  rounded-xl shadow-none border-none">
+      <h2 className="font-semibold text-sm mb-1">Plain Shapes</h2>
+      <Separator className="my-2" />
+      <div className="grid grid-cols-3 gap-y-4 gap-x-2">
+        {shapes.map((shape, index) => (
+          <button
+            key={index}
+            className="group flex flex-col items-center justify-center p-1 bg-secondary rounded-lg shadow-md hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 hover:scale-105"
+            onClick={() => addObject(shape.icon, shape.name)}
+          >
+            <div className="text-orange-600 group-hover:text-orange-500 transition-colors duration-300">
+              {React.cloneElement(shape.icon, { size: 36, fill: "#ea580c" })}
             </div>
-        </Card>
-    )
-}
+            {/* <span className="text-xs font-bold text-gray-700 group-hover:text-blue-600 transition-colors duration-300">{shape.name}</span> */}
+          </button>
+        ))}
+      </div>
+    </Card>
+  );
+};
 
-export default PlainShapes
\ No newline at end of file
+export default PlainShapes;
diff --git a/src/components/EachComponent/UploadImage.jsx b/src/components/EachComponent/UploadImage.jsx
index a4c84c3..310bb38 100644
--- a/src/components/EachComponent/UploadImage.jsx
+++ b/src/components/EachComponent/UploadImage.jsx
@@ -1,288 +1,308 @@
-import { useContext, useRef, useState } from 'react'
-import CanvasContext from '../Context/canvasContext/CanvasContext'
-import { Button } from '@/components/ui/button'
-import { fabric } from 'fabric'
-import { ImageIcon, Trash2 } from 'lucide-react'
-import { Label } from '@/components/ui/label'
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
-import Resizer from "react-image-file-resizer"
-import { Slider } from '@/components/ui/slider'
-import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
-import { useDropzone } from 'react-dropzone'
-import ImageCustomization from './Customization/ImageCustomization'
-import { Separator } from '../ui/separator'
-import ActiveObjectContext from '../Context/activeObject/ObjectContext'
+import { useContext, useRef, useState } from "react";
+import CanvasContext from "../Context/canvasContext/CanvasContext";
+import { Button } from "@/components/ui/button";
+import { fabric } from "fabric";
+import { ImageIcon, Trash2 } from "lucide-react";
+import { Label } from "@/components/ui/label";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import Resizer from "react-image-file-resizer";
+import { Slider } from "@/components/ui/slider";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { useDropzone } from "react-dropzone";
+import ImageCustomization from "./Customization/ImageCustomization";
+import { Separator } from "../ui/separator";
+import ActiveObjectContext from "../Context/activeObject/ObjectContext";
 
 const UploadImage = () => {
-    const { canvas } = useContext(CanvasContext);
-    const [width, setWidth] = useState(1080);
-    const [height, setHeight] = useState(1080);
-    const [quality, setQuality] = useState(100);
-    const [rotation, setRotation] = useState("0");
-    const [format, setFormat] = useState('JPEG');
-    const fileInputRef = useRef(null);
+  const { canvas } = useContext(CanvasContext);
+  const [width, setWidth] = useState(1080);
+  const [height, setHeight] = useState(1080);
+  const [quality, setQuality] = useState(100);
+  const [rotation, setRotation] = useState("0");
+  const [format, setFormat] = useState("JPEG");
+  const fileInputRef = useRef(null);
 
-    const { activeObject, setActiveObject } = useContext(ActiveObjectContext);
+  const { activeObject, setActiveObject } = useContext(ActiveObjectContext);
 
-    const [file, setFile] = useState(null);
-    const [preview, setPreview] = useState(null);
+  const [file, setFile] = useState(null);
+  const [preview, setPreview] = useState(null);
 
-    const { getRootProps, getInputProps, isDragActive } = useDropzone({
-        accept: {
-            'image/*': ['.jpeg', '.png', '.gif', '.jpg', '.webp', '.svg']
-        },
-        // maxSize: 5 * 1024 * 1024, // 5MB max file size
-        multiple: false,
-        onDrop: (acceptedFiles) => {
-            if (!acceptedFiles.length) {
-                console.error("No files were dropped.");
-                return;
-            }
-            const selectedFile = acceptedFiles[0];
-            // Create a preview URL
-            const blobUrl = URL.createObjectURL(selectedFile);
-            setFile(selectedFile);
-            setPreview(blobUrl);
+  const { getRootProps, getInputProps, isDragActive } = useDropzone({
+    accept: {
+      "image/*": [".jpeg", ".png", ".gif", ".jpg", ".webp", ".svg"],
+    },
+    // maxSize: 5 * 1024 * 1024, // 5MB max file size
+    multiple: false,
+    onDrop: (acceptedFiles) => {
+      if (!acceptedFiles.length) {
+        console.error("No files were dropped.");
+        return;
+      }
+      const selectedFile = acceptedFiles[0];
+      // Create a preview URL
+      const blobUrl = URL.createObjectURL(selectedFile);
+      setFile(selectedFile);
+      setPreview(blobUrl);
 
-            if (selectedFile.type === "image/svg+xml") {
-                addImageToCanvas(selectedFile);
-                URL.revokeObjectURL(blobUrl);
-            } else {
-                const imgElement = new Image();
-                imgElement.src = blobUrl;
+      if (selectedFile.type === "image/svg+xml") {
+        addImageToCanvas(selectedFile);
+        URL.revokeObjectURL(blobUrl);
+      } else {
+        const imgElement = new Image();
+        imgElement.src = blobUrl;
 
-                imgElement.onload = () => {
-                    if (imgElement.width > 1080) {
-                        handleResize(selectedFile, (compressedFile) => {
-                            addImageToCanvas(compressedFile);
-                        });
-                    } else {
-                        addImageToCanvas(selectedFile);
-                    }
-                    URL.revokeObjectURL(blobUrl); // Clean up
-                };
+        imgElement.onload = () => {
+          if (imgElement.width > 1080) {
+            handleResize(selectedFile, (compressedFile) => {
+              addImageToCanvas(compressedFile);
+            });
+          } else {
+            addImageToCanvas(selectedFile);
+          }
+          URL.revokeObjectURL(blobUrl); // Clean up
+        };
 
-                imgElement.onerror = () => {
-                    console.error("Failed to load image.");
-                    URL.revokeObjectURL(blobUrl); // Clean up
-                };
-            }
-        }
+        imgElement.onerror = () => {
+          console.error("Failed to load image.");
+          URL.revokeObjectURL(blobUrl); // Clean up
+        };
+      }
+    },
+  });
+
+  const removeFile = () => {
+    // Revoke the object URL to free up memory
+    if (preview) {
+      URL.revokeObjectURL(preview);
+    }
+    setFile(null);
+    setPreview(null);
+    if (fileInputRef.current) {
+      fileInputRef.current.value = "";
+    }
+    if (activeObject?.type === "image") {
+      canvas.remove(activeObject);
+      setActiveObject(null);
+      canvas.renderAll();
+    }
+  };
+
+  const handleResize = (file, callback) => {
+    Resizer.imageFileResizer(
+      file,
+      width,
+      height,
+      format,
+      quality,
+      parseInt(rotation),
+      (resizedFile) => {
+        callback(resizedFile);
+      },
+      "file"
+    );
+  };
+
+  const addImageToCanvas = (file) => {
+    const blobUrl = URL.createObjectURL(file);
+    fabric.Image.fromURL(blobUrl, (img) => {
+      img.set({
+        left: canvas.width / 4,
+        top: canvas.height / 4,
+        scaleX: 0.5,
+        scaleY: 0.5,
+      });
+      canvas.add(img);
+      canvas.setActiveObject(img);
+      // Update the active object state
+      setActiveObject(img);
+      canvas.renderAll();
+      URL.revokeObjectURL(blobUrl);
     });
+  };
 
-    const removeFile = () => {
-        // Revoke the object URL to free up memory
-        if (preview) {
-            URL.revokeObjectURL(preview)
-        }
-        setFile(null)
-        setPreview(null)
-        if (fileInputRef.current) {
-            fileInputRef.current.value = ""
-        }
-        if (activeObject?.type === "image") {
-            canvas.remove(activeObject);
-            setActiveObject(null);
-            canvas.renderAll();
-        }
-    }
+  return (
+    <Card className="w-full border-none shadow-none">
+      <CardHeader className="px-4 py-3">
+        <CardTitle>Image Upload & Editing</CardTitle>
+        <CardDescription>
+          Upload, resize, and apply effects to your images
+        </CardDescription>
+      </CardHeader>
+      <CardContent className="p-2">
+        <Tabs defaultValue="upload">
+          <TabsList className="grid w-full grid-cols-2">
+            <TabsTrigger value="upload">Upload</TabsTrigger>
+            <TabsTrigger value="effects">Effects</TabsTrigger>
+          </TabsList>
 
-    const handleResize = (file, callback) => {
-        Resizer.imageFileResizer(
-            file,
-            width,
-            height,
-            format,
-            quality,
-            parseInt(rotation),
-            (resizedFile) => {
-                callback(resizedFile)
-            },
-            'file',
-        )
-    }
+          {/* Uploads */}
+          <TabsContent value="upload">
+            <div className="space-y-4">
+              <div className="grid grid-cols-2 gap-4">
+                <div className="space-y-2">
+                  <Label>Width: {width}px</Label>
+                  <Slider
+                    value={[width]}
+                    max={2000}
+                    min={300}
+                    step={10}
+                    onValueChange={(value) => setWidth(value[0])}
+                  />
+                </div>
+                <div className="space-y-2">
+                  <Label>Height: {height}px</Label>
+                  <Slider
+                    value={[height]}
+                    max={2000}
+                    min={300}
+                    step={10}
+                    onValueChange={(value) => setHeight(value[0])}
+                  />
+                </div>
+              </div>
+              {format === "JPEG" && (
+                <div className="space-y-2">
+                  <Label>Quality: {quality}%</Label>
+                  <Slider
+                    value={[quality]}
+                    max={100}
+                    step={1}
+                    onValueChange={(value) => setQuality(value[0])}
+                  />
+                </div>
+              )}
 
-    const addImageToCanvas = (file) => {
-        const blobUrl = URL.createObjectURL(file)
-        fabric.Image.fromURL(blobUrl, (img) => {
-            img.set({
-                left: canvas.width / 4,
-                top: canvas.height / 4,
-                scaleX: 0.5,
-                scaleY: 0.5,
-            })
-            canvas.add(img)
-            canvas.setActiveObject(img);
-            // Update the active object state
-            setActiveObject(img);
-            canvas.renderAll();
-            URL.revokeObjectURL(blobUrl);
-        })
-    }
+              <div className="grid grid-cols-2 gap-4">
+                <div className="space-y-2">
+                  <Label>Format</Label>
+                  <Select value={format} onValueChange={setFormat}>
+                    <SelectTrigger>
+                      <SelectValue />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="JPEG">JPEG</SelectItem>
+                      <SelectItem value="PNG">PNG</SelectItem>
+                      <SelectItem value="WEBP">WEBP</SelectItem>
+                    </SelectContent>
+                  </Select>
+                </div>
+                <div className="space-y-2">
+                  <Label>Rotation</Label>
+                  <Select value={rotation} onValueChange={setRotation}>
+                    <SelectTrigger>
+                      <SelectValue />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="0">0°</SelectItem>
+                      <SelectItem value="45">45°</SelectItem>
+                      <SelectItem value="90">90°</SelectItem>
+                      <SelectItem value="180">180°</SelectItem>
+                      <SelectItem value="270">270°</SelectItem>
+                    </SelectContent>
+                  </Select>
+                </div>
+              </div>
 
-    return (
-        <Card className="w-full mx-auto">
-            <CardHeader className="px-4 py-3">
-                <CardTitle>Image Upload & Editing</CardTitle>
-                <CardDescription>Upload, resize, and apply effects to your images</CardDescription>
-            </CardHeader>
-            <CardContent className="p-2">
-                <Tabs defaultValue="upload">
-                    <TabsList className="grid w-full grid-cols-2">
-                        <TabsTrigger value="upload">Upload</TabsTrigger>
-                        <TabsTrigger value="effects">Effects</TabsTrigger>
-                    </TabsList>
-
-                    {/* Uploads */}
-                    <TabsContent value="upload">
-                        <div className="space-y-4">
-                            <div className="grid grid-cols-2 gap-4">
-                                <div className="space-y-2">
-                                    <Label>Width: {width}px</Label>
-                                    <Slider
-                                        value={[width]}
-                                        max={2000}
-                                        min={300}
-                                        step={10}
-                                        onValueChange={(value) => setWidth(value[0])}
-                                    />
-                                </div>
-                                <div className="space-y-2">
-                                    <Label>Height: {height}px</Label>
-                                    <Slider
-                                        value={[height]}
-                                        max={2000}
-                                        min={300}
-                                        step={10}
-                                        onValueChange={(value) => setHeight(value[0])}
-                                    />
-                                </div>
-                            </div>
-                            {format === "JPEG" && (
-                                <div className="space-y-2">
-                                    <Label>Quality: {quality}%</Label>
-                                    <Slider
-                                        value={[quality]}
-                                        max={100}
-                                        step={1}
-                                        onValueChange={(value) => setQuality(value[0])}
-                                    />
-                                </div>
-                            )}
-
-                            <div className="grid grid-cols-2 gap-4">
-                                <div className="space-y-2">
-                                    <Label>Format</Label>
-                                    <Select value={format} onValueChange={setFormat}>
-                                        <SelectTrigger>
-                                            <SelectValue />
-                                        </SelectTrigger>
-                                        <SelectContent>
-                                            <SelectItem value="JPEG">JPEG</SelectItem>
-                                            <SelectItem value="PNG">PNG</SelectItem>
-                                            <SelectItem value="WEBP">WEBP</SelectItem>
-                                        </SelectContent>
-                                    </Select>
-                                </div>
-                                <div className="space-y-2">
-                                    <Label>Rotation</Label>
-                                    <Select value={rotation} onValueChange={setRotation}>
-                                        <SelectTrigger>
-                                            <SelectValue />
-                                        </SelectTrigger>
-                                        <SelectContent>
-                                            <SelectItem value="0">0°</SelectItem>
-                                            <SelectItem value="45">45°</SelectItem>
-                                            <SelectItem value="90">90°</SelectItem>
-                                            <SelectItem value="180">180°</SelectItem>
-                                            <SelectItem value="270">270°</SelectItem>
-                                        </SelectContent>
-                                    </Select>
-                                </div>
-                            </div>
-
-                            {/* upload image */}
-                            {
-                                !preview &&
-                                <div className="max-w-md mx-auto p-4">
-                                    <Card>
-                                        <CardContent className="p-6 space-y-4">
-                                            <div
-                                                {...getRootProps()}
-                                                className={`border-2 border-dashed rounded-lg p-8 text-center cursor-pointer transition-colors duration-300 ${isDragActive ? 'border-primary bg-primary/10' : 'border-gray-300 hover:border-primary'} ${preview ? 'hidden' : ''}`}
-                                                ref={fileInputRef}
-                                            >
-                                                <input {...getInputProps()} />
-                                                <div className="flex flex-col items-center justify-center space-y-4">
-                                                    <ImageIcon
-                                                        className={`h-12 w-12 ${isDragActive ? 'text-primary' : 'text-gray-400'}`}
-                                                    />
-                                                    <p className="text-sm text-gray-600">
-                                                        {isDragActive
-                                                            ? 'Drop file here'
-                                                            : 'Drag \'n\' drop an image, or click to select a file'
-                                                        }
-                                                    </p>
-                                                    <p className="text-xs text-gray-500">
-                                                        (Max 5MB, image files only)
-                                                    </p>
-                                                </div>
-                                            </div>
-                                        </CardContent>
-                                    </Card>
-                                </div>
-                            }
-
-                            {/* preview image  */}
-                            {preview && (
-                                <Card className="overflow-y-scroll rounded-none">
-                                    <CardContent className="mt-2 mb-2">
-                                        <div className="w-fit aspect-square relative h-[100%]">
-                                            {
-                                                file?.type === "image/svg+xml" ? <object
-                                                    data={preview}
-                                                    type="image/svg+xml"
-                                                    className="object-cover rounded-lg"
-                                                    style={{ width: '100%', height: '100%' }}
-                                                >
-                                                    Your browser does not support SVG, no preview available for SVG.
-                                                </object> :
-                                                    <img
-                                                        src={preview}
-                                                        alt="Uploaded image"
-                                                        className="object-cover rounded-lg overflow-hidden"
-                                                    />
-                                            }
-
-                                            <Separator className="my-4" />
-                                            <div className="grid grid-cols-1 gap-2 items-center pb-4">
-                                                <p className="text-sm text-gray-600 truncate">{file?.name}</p>
-                                                <Button
-                                                    variant="destructive"
-                                                    size="sm"
-                                                    onClick={removeFile}
-                                                >
-                                                    <Trash2 className="mr-2 h-4 w-4" />
-                                                    Remove
-                                                </Button>
-                                            </div>
-                                        </div>
-                                    </CardContent>
-                                </Card>
-                            )}
+              {/* upload image */}
+              {!preview && (
+                <div className="max-w-md mx-auto p-4">
+                  <Card>
+                    <CardContent className="p-6 space-y-4">
+                      <div
+                        {...getRootProps()}
+                        className={`border-2 border-dashed rounded-lg p-8 text-center cursor-pointer transition-colors duration-300 ${
+                          isDragActive
+                            ? "border-primary bg-primary/10"
+                            : "border-gray-300 hover:border-primary"
+                        } ${preview ? "hidden" : ""}`}
+                        ref={fileInputRef}
+                      >
+                        <input {...getInputProps()} />
+                        <div className="flex flex-col items-center justify-center space-y-4">
+                          <ImageIcon
+                            className={`h-12 w-12 ${
+                              isDragActive ? "text-primary" : "text-gray-400"
+                            }`}
+                          />
+                          <p className="text-sm text-gray-600">
+                            {isDragActive
+                              ? "Drop file here"
+                              : "Drag 'n' drop an image, or click to select a file"}
+                          </p>
+                          <p className="text-xs text-gray-500">
+                            (Max 5MB, image files only)
+                          </p>
                         </div>
-                    </TabsContent>
+                      </div>
+                    </CardContent>
+                  </Card>
+                </div>
+              )}
 
-                    {/* Effects */}
-                    <TabsContent value="effects">
-                        <ImageCustomization />
-                    </TabsContent>
-                </Tabs>
-            </CardContent>
-        </Card>
-    )
-}
-export default UploadImage
+              {/* preview image  */}
+              {preview && (
+                <Card className="overflow-y-scroll rounded-none">
+                  <CardContent className="mt-2 mb-2">
+                    <div className="w-fit aspect-square relative h-[100%]">
+                      {file?.type === "image/svg+xml" ? (
+                        <object
+                          data={preview}
+                          type="image/svg+xml"
+                          className="object-cover rounded-lg"
+                          style={{ width: "100%", height: "100%" }}
+                        >
+                          Your browser does not support SVG, no preview
+                          available for SVG.
+                        </object>
+                      ) : (
+                        <img
+                          src={preview}
+                          alt="Uploaded image"
+                          className="object-cover rounded-lg overflow-hidden"
+                        />
+                      )}
 
+                      <Separator className="my-4" />
+                      <div className="grid grid-cols-1 gap-2 items-center pb-4">
+                        <p className="text-sm text-gray-600 truncate">
+                          {file?.name}
+                        </p>
+                        <Button
+                          variant="destructive"
+                          size="sm"
+                          onClick={removeFile}
+                        >
+                          <Trash2 className="mr-2 h-4 w-4" />
+                          Remove
+                        </Button>
+                      </div>
+                    </div>
+                  </CardContent>
+                </Card>
+              )}
+            </div>
+          </TabsContent>
 
+          {/* Effects */}
+          <TabsContent value="effects">
+            <ImageCustomization />
+          </TabsContent>
+        </Tabs>
+      </CardContent>
+    </Card>
+  );
+};
+export default UploadImage;
diff --git a/src/components/ObjectShortcut.jsx b/src/components/ObjectShortcut.jsx
index adbc276..c99018e 100644
--- a/src/components/ObjectShortcut.jsx
+++ b/src/components/ObjectShortcut.jsx
@@ -176,6 +176,7 @@ export const ObjectShortcut = ({ value }) => {
   const clearCanvas = () => {
     canvas.clear();
     canvas.renderAll();
+    canvas.setBackgroundColor("#ffffff", canvas.renderAll.bind(canvas));
     setActiveObject(null);
   };
 
diff --git a/src/components/Panel/CanvasPanel.jsx b/src/components/Panel/CanvasPanel.jsx
new file mode 100644
index 0000000..8f56b39
--- /dev/null
+++ b/src/components/Panel/CanvasPanel.jsx
@@ -0,0 +1,29 @@
+import { useContext } from "react";
+import CanvasContext from "../Context/canvasContext/CanvasContext";
+import { Button } from "../ui/button";
+import { ScrollArea } from "../ui/scroll-area";
+import { X } from "lucide-react";
+import CanvasSetting from "../CanvasSetting";
+
+const CanvasPanel = () => {
+  const { setSelectedPanel } = useContext(CanvasContext);
+  return (
+    <div>
+      <div className="flex justify-between items-center p-4 border-b">
+        <h2 className="text-lg font-semibold">Canvas Settings</h2>
+        <Button
+          variant="ghost"
+          size="icon"
+          onClick={() => setSelectedPanel("")}
+        >
+          <X className="h-4 w-4" />
+        </Button>
+      </div>
+      <ScrollArea className="lg:h-[calc(90vh-190px)] px-4 py-4">
+        <CanvasSetting />
+      </ScrollArea>
+    </div>
+  );
+};
+
+export default CanvasPanel;
diff --git a/src/components/Panel/CommonPanel.jsx b/src/components/Panel/CommonPanel.jsx
index c319a54..57e6f2e 100644
--- a/src/components/Panel/CommonPanel.jsx
+++ b/src/components/Panel/CommonPanel.jsx
@@ -1,15 +1,7 @@
 import { useContext } from "react";
 import CanvasContext from "../Context/canvasContext/CanvasContext";
-import SelectObjectFromGroup from "../EachComponent/Customization/SelectObjectFromGroup";
-import StrokeCustomization from "../EachComponent/Customization/StrokeCustomization";
-import PositionCustomization from "../EachComponent/Customization/PositionCustomization";
-import { Card } from "../ui/card";
-import CollapsibleComponent from "../EachComponent/Customization/CollapsibleComponent";
-import FlipCustomization from "../EachComponent/Customization/FlipCustomization";
-import RotateCustomization from "../EachComponent/Customization/RotateCustomization";
 import SkewCustomization from "../EachComponent/Customization/SkewCustomization";
 import ScaleObjects from "../EachComponent/Customization/ScaleObjects";
-import ShadowCustomization from "../EachComponent/Customization/ShadowCustomization";
 import AddImageIntoShape from "../EachComponent/Customization/AddImageIntoShape";
 import ApplyColor from "../EachComponent/ApplyColor";
 
@@ -23,45 +15,17 @@ const CommonPanel = () => {
   return (
     <div>
       <div className="space-y-5">
-        <SelectObjectFromGroup />
-
         {/* Apply fill and background color */}
         {activeObjectType !== "image" && !hasClipPath && !customClipPath && (
           <ApplyColor />
         )}
 
-        {/* Apply stroke and stroke color */}
-        {!customClipPath && (
-          <>
-            <StrokeCustomization />
-          </>
-        )}
-
-        {activeObject?.type !== "group" && (
-          <>
-            <PositionCustomization />
-          </>
-        )}
-
-        {/* Controls for opacity, flip, and rotation */}
-        <Card className="shadow-none border-0">
-          <CollapsibleComponent text={"Flip, Rotate Control"}>
-            <div className="space-y-2">
-              <FlipCustomization />
-              <RotateCustomization />
-            </div>
-          </CollapsibleComponent>
-        </Card>
-
         {/* Skew Customization */}
         <SkewCustomization />
 
         {/* Scale Objects */}
         <ScaleObjects />
 
-        {/* Shadow Customization */}
-        <ShadowCustomization />
-
         {/* Add image into shape */}
         <AddImageIntoShape />
       </div>
diff --git a/src/components/Panel/EditorPanel.jsx b/src/components/Panel/EditorPanel.jsx
index 10e01f2..18f9449 100644
--- a/src/components/Panel/EditorPanel.jsx
+++ b/src/components/Panel/EditorPanel.jsx
@@ -2,6 +2,16 @@ import { useContext } from "react";
 import CanvasContext from "../Context/canvasContext/CanvasContext";
 import TextPanel from "./TextPanel";
 import ColorPanel from "./ColorPanel";
+import ShapePanel from "./ShapePanel";
+import IconPanel from "./IconPanel";
+import UploadPanel from "./UploadPanel";
+import StrokePanel from "./StrokePanel";
+import ShadowPanel from "./ShadowPanel";
+import FlipPanel from "./FlipPanel";
+import PositionPanel from "./PositionPanel";
+import ImagePanel from "./ImagePanel";
+import GroupObjectPanel from "./GroupObjectPanel";
+import CanvasPanel from "./CanvasPanel";
 
 const EditorPanel = () => {
   const { selectedPanel } = useContext(CanvasContext);
@@ -10,8 +20,28 @@ const EditorPanel = () => {
     switch (selectedPanel) {
       case "text":
         return <TextPanel />;
+      case "shape":
+        return <ShapePanel />;
+      case "icon":
+        return <IconPanel />;
+      case "upload":
+        return <UploadPanel />;
       case "color":
         return <ColorPanel />;
+      case "stroke":
+        return <StrokePanel />;
+      case "shadow":
+        return <ShadowPanel />;
+      case "flip":
+        return <FlipPanel />;
+      case "position":
+        return <PositionPanel />;
+      case "image-insert":
+        return <ImagePanel />;
+      case "group-obj":
+        return <GroupObjectPanel />;
+      case "canvas":
+        return <CanvasPanel />;
       default:
         return;
     }
diff --git a/src/components/Panel/FlipPanel.jsx b/src/components/Panel/FlipPanel.jsx
new file mode 100644
index 0000000..7bfb8fd
--- /dev/null
+++ b/src/components/Panel/FlipPanel.jsx
@@ -0,0 +1,39 @@
+import { useContext } from "react";
+import CanvasContext from "../Context/canvasContext/CanvasContext";
+import { Button } from "../ui/button";
+import { ScrollArea } from "../ui/scroll-area";
+import { X } from "lucide-react";
+import { Card } from "../ui/card";
+import CollapsibleComponent from "../EachComponent/Customization/CollapsibleComponent";
+import FlipCustomization from "../EachComponent/Customization/FlipCustomization";
+import RotateCustomization from "../EachComponent/Customization/RotateCustomization";
+
+const FlipPanel = () => {
+  const { setSelectedPanel } = useContext(CanvasContext);
+  return (
+    <div>
+      <div className="flex justify-between items-center p-4 border-b">
+        <h2 className="text-lg font-semibold">Flip & Rotate</h2>
+        <Button
+          variant="ghost"
+          size="icon"
+          onClick={() => setSelectedPanel("")}
+        >
+          <X className="h-4 w-4" />
+        </Button>
+      </div>
+      <ScrollArea className="lg:h-[calc(90vh-190px)] px-4 py-4">
+        <Card className="shadow-none border-0">
+          <CollapsibleComponent text={"Flip, Rotate Control"}>
+            <div className="space-y-2">
+              <FlipCustomization />
+              <RotateCustomization />
+            </div>
+          </CollapsibleComponent>
+        </Card>
+      </ScrollArea>
+    </div>
+  );
+};
+
+export default FlipPanel;
diff --git a/src/components/Panel/GroupObjectPanel.jsx b/src/components/Panel/GroupObjectPanel.jsx
new file mode 100644
index 0000000..0bdd55c
--- /dev/null
+++ b/src/components/Panel/GroupObjectPanel.jsx
@@ -0,0 +1,36 @@
+import { useContext } from "react";
+import CanvasContext from "../Context/canvasContext/CanvasContext";
+import { Button } from "../ui/button";
+import { ScrollArea } from "../ui/scroll-area";
+import SelectObjectFromGroup from "../EachComponent/Customization/SelectObjectFromGroup";
+import { X } from "lucide-react";
+import SkewCustomization from "../EachComponent/Customization/SkewCustomization";
+import ScaleObjects from "../EachComponent/Customization/ScaleObjects";
+
+const GroupObjectPanel = () => {
+  const { setSelectedPanel } = useContext(CanvasContext);
+  return (
+    <div>
+      <div className="flex justify-between items-center p-4 border-b">
+        <h2 className="text-lg font-semibold">Group Object</h2>
+        <Button
+          variant="ghost"
+          size="icon"
+          onClick={() => setSelectedPanel("")}
+        >
+          <X className="h-4 w-4" />
+        </Button>
+      </div>
+      <ScrollArea className="lg:h-[calc(90vh-190px)] px-4 py-4">
+        <SelectObjectFromGroup />
+        {/* Skew Customization */}
+        <SkewCustomization />
+
+        {/* Scale Objects */}
+        <ScaleObjects />
+      </ScrollArea>
+    </div>
+  );
+};
+
+export default GroupObjectPanel;
diff --git a/src/components/Panel/IconPanel.jsx b/src/components/Panel/IconPanel.jsx
new file mode 100644
index 0000000..99be08b
--- /dev/null
+++ b/src/components/Panel/IconPanel.jsx
@@ -0,0 +1,30 @@
+import { useContext } from "react";
+import { Button } from "../ui/button";
+import CanvasContext from "../Context/canvasContext/CanvasContext";
+import { X } from "lucide-react";
+import { ScrollArea } from "../ui/scroll-area";
+import AllIconsPage from "../EachComponent/Icons/AllIcons";
+
+const IconPanel = () => {
+  const { setSelectedPanel } = useContext(CanvasContext);
+  return (
+    <div>
+      <div className="flex justify-between items-center p-4 border-b">
+        <h2 className="text-lg font-semibold">Icons</h2>
+        <Button
+          variant="ghost"
+          size="icon"
+          onClick={() => setSelectedPanel("")}
+        >
+          <X className="h-4 w-4" />
+        </Button>
+      </div>
+
+      <ScrollArea className="lg:h-[calc(90vh-190px)] px-4 py-4">
+        <AllIconsPage />
+      </ScrollArea>
+    </div>
+  );
+};
+
+export default IconPanel;
diff --git a/src/components/Panel/ImagePanel.jsx b/src/components/Panel/ImagePanel.jsx
new file mode 100644
index 0000000..c968d1d
--- /dev/null
+++ b/src/components/Panel/ImagePanel.jsx
@@ -0,0 +1,29 @@
+import { useContext } from "react";
+import CanvasContext from "../Context/canvasContext/CanvasContext";
+import { Button } from "../ui/button";
+import { ScrollArea } from "../ui/scroll-area";
+import { X } from "lucide-react";
+import AddImageIntoShape from "../EachComponent/Customization/AddImageIntoShape";
+
+const ImagePanel = () => {
+  const { setSelectedPanel } = useContext(CanvasContext);
+  return (
+    <div>
+      <div className="flex justify-between items-center p-4 border-b">
+        <h2 className="text-lg font-semibold">Image</h2>
+        <Button
+          variant="ghost"
+          size="icon"
+          onClick={() => setSelectedPanel("")}
+        >
+          <X className="h-4 w-4" />
+        </Button>
+      </div>
+      <ScrollArea className="lg:h-[calc(90vh-190px)] px-4 py-4">
+        <AddImageIntoShape />
+      </ScrollArea>
+    </div>
+  );
+};
+
+export default ImagePanel;
diff --git a/src/components/Panel/PositionPanel.jsx b/src/components/Panel/PositionPanel.jsx
new file mode 100644
index 0000000..6e4b79d
--- /dev/null
+++ b/src/components/Panel/PositionPanel.jsx
@@ -0,0 +1,29 @@
+import { useContext } from "react";
+import CanvasContext from "../Context/canvasContext/CanvasContext";
+import { Button } from "../ui/button";
+import { ScrollArea } from "../ui/scroll-area";
+import { X } from "lucide-react";
+import PositionCustomization from "../EachComponent/Customization/PositionCustomization";
+
+const PositionPanel = () => {
+  const { setSelectedPanel } = useContext(CanvasContext);
+  return (
+    <div>
+      <div className="flex justify-between items-center p-4 border-b">
+        <h2 className="text-lg font-semibold">Position Controller</h2>
+        <Button
+          variant="ghost"
+          size="icon"
+          onClick={() => setSelectedPanel("")}
+        >
+          <X className="h-4 w-4" />
+        </Button>
+      </div>
+      <ScrollArea className="lg:h-[calc(90vh-190px)]  px-4 py-4">
+        <PositionCustomization />
+      </ScrollArea>
+    </div>
+  );
+};
+
+export default PositionPanel;
diff --git a/src/components/Panel/ShadowPanel.jsx b/src/components/Panel/ShadowPanel.jsx
new file mode 100644
index 0000000..08a4c3b
--- /dev/null
+++ b/src/components/Panel/ShadowPanel.jsx
@@ -0,0 +1,29 @@
+import { useContext } from "react";
+import CanvasContext from "../Context/canvasContext/CanvasContext";
+import { Button } from "../ui/button";
+import { ScrollArea } from "../ui/scroll-area";
+import { X } from "lucide-react";
+import ShadowCustomization from "../EachComponent/Customization/ShadowCustomization";
+
+const ShadowPanel = () => {
+  const { setSelectedPanel } = useContext(CanvasContext);
+  return (
+    <div>
+      <div className="flex justify-between items-center p-4 border-b">
+        <h2 className="text-lg font-semibold">Shadow Color</h2>
+        <Button
+          variant="ghost"
+          size="icon"
+          onClick={() => setSelectedPanel("")}
+        >
+          <X className="h-4 w-4" />
+        </Button>
+      </div>
+      <ScrollArea className="lg:h-[calc(90vh-190px)]  px-4 py-4">
+        <ShadowCustomization />
+      </ScrollArea>
+    </div>
+  );
+};
+
+export default ShadowPanel;
diff --git a/src/components/Panel/ShapePanel.jsx b/src/components/Panel/ShapePanel.jsx
new file mode 100644
index 0000000..d837b7f
--- /dev/null
+++ b/src/components/Panel/ShapePanel.jsx
@@ -0,0 +1,47 @@
+import { useContext } from "react";
+import CanvasContext from "../Context/canvasContext/CanvasContext";
+import { Button } from "../ui/button";
+import { ScrollArea } from "../ui/scroll-area";
+import { X } from "lucide-react";
+import { Separator } from "../ui/separator";
+import CustomShape from "../EachComponent/CustomShape/CustomShape";
+import RoundedShape from "../EachComponent/RoundedShapes/RoundedShape";
+import PlainShapes from "../EachComponent/Shapes/PlainShapes";
+
+const ShapePanel = () => {
+  const { setSelectedPanel } = useContext(CanvasContext);
+  return (
+    <div>
+      <div className="flex justify-between items-center p-4 border-b">
+        <h2 className="text-lg font-semibold">Shape</h2>
+        <Button
+          variant="ghost"
+          size="icon"
+          onClick={() => setSelectedPanel("")}
+        >
+          <X className="h-4 w-4" />
+        </Button>
+      </div>
+
+      <ScrollArea className="lg:h-[calc(90vh-190px)] px-4 py-4">
+        <h2 className="font-semibold text-sm">Custom Shapes</h2>
+        <Separator className="my-2" />
+        <div className="space-y-4">
+          <div>
+            <CustomShape />
+          </div>
+
+          <div>
+            <RoundedShape />
+          </div>
+
+          <div>
+            <PlainShapes />
+          </div>
+        </div>
+      </ScrollArea>
+    </div>
+  );
+};
+
+export default ShapePanel;
diff --git a/src/components/Panel/StrokePanel.jsx b/src/components/Panel/StrokePanel.jsx
index e8d7900..e8833d6 100644
--- a/src/components/Panel/StrokePanel.jsx
+++ b/src/components/Panel/StrokePanel.jsx
@@ -1,16 +1,16 @@
 import { useContext } from "react";
-import ApplyColor from "../EachComponent/ApplyColor";
 import { Button } from "../ui/button";
 import CanvasContext from "../Context/canvasContext/CanvasContext";
 import { X } from "lucide-react";
 import { ScrollArea } from "../ui/scroll-area";
+import StrokeCustomization from "../EachComponent/Customization/StrokeCustomization";
 
-const ColorPanel = () => {
+const StrokePanel = () => {
   const { setSelectedPanel } = useContext(CanvasContext);
   return (
     <div>
       <div className="flex justify-between items-center p-4 border-b">
-        <h2 className="text-lg font-semibold">Color</h2>
+        <h2 className="text-lg font-semibold">Stroke Color</h2>
         <Button
           variant="ghost"
           size="icon"
@@ -19,11 +19,11 @@ const ColorPanel = () => {
           <X className="h-4 w-4" />
         </Button>
       </div>
-      <ScrollArea className="lg:h-[calc(90vh-190px)] xl:h-[calc(100vh-190px)] px-4 py-4">
-        <ApplyColor />
+      <ScrollArea className="lg:h-[calc(90vh-190px)] px-4 py-4">
+        <StrokeCustomization />
       </ScrollArea>
     </div>
   );
 };
 
-export default ColorPanel;
+export default StrokePanel;
diff --git a/src/components/Panel/TopBar.jsx b/src/components/Panel/TopBar.jsx
index a200883..383c396 100644
--- a/src/components/Panel/TopBar.jsx
+++ b/src/components/Panel/TopBar.jsx
@@ -5,9 +5,23 @@ import OpacityCustomization from "../EachComponent/Customization/OpacityCustomiz
 import CanvasContext from "../Context/canvasContext/CanvasContext";
 import { useContext } from "react";
 import { ObjectShortcut } from "../ObjectShortcut";
+import ActiveObjectContext from "../Context/activeObject/ObjectContext";
+import { Button } from "../ui/button";
+import { ImagePlus } from "lucide-react";
+import { RxBorderWidth } from "react-icons/rx";
+import { LuFlipVertical } from "react-icons/lu";
+import { SlTarget } from "react-icons/sl";
+import { RiShadowLine } from "react-icons/ri";
+import { FaRegObjectGroup } from "react-icons/fa";
+import { Tooltip } from "react-tooltip";
 
 export function TopBar() {
-  const { selectedPanel } = useContext(CanvasContext);
+  const { activeObject } = useContext(ActiveObjectContext);
+  const { selectedPanel, setSelectedPanel, textColor } =
+    useContext(CanvasContext);
+  const activeObjectType = activeObject?.type;
+  const hasClipPath = !!activeObject?.clipPath;
+  const customClipPath = activeObject?.isClipPath;
   return (
     <div>
       <ScrollArea
@@ -21,6 +35,147 @@ export function TopBar() {
           <div>
             <TextCustomization />
           </div>
+          <div className="flex items-center gap-4 px-2">
+            <Button
+              variant="outline"
+              className="flex items-center gap-2 border-dashed border-2 rounded-md hover:bg-gray-50"
+              onClick={() => setSelectedPanel("image-insert")}
+            >
+              <ImagePlus className="w-5 h-5" />
+              <span>Add image</span>
+            </Button>
+
+            <div>
+              <a data-tooltip-id="canvas">
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  className="w-10 h-10"
+                  onClick={() => setSelectedPanel("canvas")}
+                >
+                  <svg
+                    width="100"
+                    height="100"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <rect
+                      x="3"
+                      y="5"
+                      width="18"
+                      height="12"
+                      stroke="black"
+                      strokeWidth="2"
+                      fill="none"
+                    />
+
+                    <path d="M14 14 L19 19" stroke="black" strokeWidth="2" />
+                    <path
+                      d="M15 15 Q16 12, 19 11"
+                      stroke="black"
+                      strokeWidth="2"
+                      fill="none"
+                    />
+
+                    <line
+                      x1="3"
+                      y1="17"
+                      x2="7"
+                      y2="21"
+                      stroke="black"
+                      strokeWidth="2"
+                    />
+                    <line
+                      x1="21"
+                      y1="17"
+                      x2="17"
+                      y2="21"
+                      stroke="black"
+                      strokeWidth="2"
+                    />
+                  </svg>
+                </Button>
+              </a>
+            </div>
+
+            <div className="flex items-center gap-2">
+              {activeObjectType !== "image" &&
+                activeObject?.type !== "i-text" &&
+                !hasClipPath &&
+                !customClipPath && (
+                  <a data-tooltip-id="color-gr">
+                    <Button
+                      variant="ghost"
+                      size="icon"
+                      className={"rounded-full"}
+                      onClick={() => setSelectedPanel("color")}
+                      style={{ backgroundColor: textColor?.fill || "black" }}
+                    ></Button>
+                  </a>
+                )}
+
+              {!customClipPath && (
+                <a data-tooltip-id="stroke">
+                  <Button
+                    variant="ghost"
+                    size="icon"
+                    className="w-10 h-10"
+                    onClick={() => setSelectedPanel("stroke")}
+                  >
+                    <RxBorderWidth className="text-lg" />
+                  </Button>
+                </a>
+              )}
+              {(activeObject || activeObject.type === "group") && (
+                <a data-tooltip-id="group-obj">
+                  <Button
+                    variant="ghost"
+                    size="icon"
+                    className="w-10 h-10"
+                    onClick={() => setSelectedPanel("group-obj")}
+                  >
+                    <FaRegObjectGroup />
+                  </Button>
+                </a>
+              )}
+            </div>
+
+            <div className="h-6 w-px bg-gray-200" />
+
+            <div className="flex items-center gap-2">
+              <a data-tooltip-id="flip">
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  onClick={() => setSelectedPanel("flip")}
+                >
+                  <LuFlipVertical />
+                </Button>
+              </a>
+
+              {activeObject?.type !== "group" && (
+                <a data-tooltip-id="position">
+                  <Button
+                    variant="ghost"
+                    size="icon"
+                    onClick={() => setSelectedPanel("position")}
+                  >
+                    <SlTarget />
+                  </Button>
+                </a>
+              )}
+              <a data-tooltip-id="shadow">
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  onClick={() => setSelectedPanel("shadow")}
+                >
+                  <RiShadowLine />
+                </Button>
+              </a>
+            </div>
+          </div>
           <OpacityCustomization />
           <div className="h-4 w-px bg-border mx-2" />
 
@@ -33,6 +188,14 @@ export function TopBar() {
         </div>
         <ScrollBar orientation="horizontal" />
       </ScrollArea>
+
+      <Tooltip id="color-gr" content="Color" place="bottom" />
+      <Tooltip id="stroke" content="Stroke" place="bottom" />
+      <Tooltip id="position" content="Object position" place="bottom" />
+      <Tooltip id="shadow" content="Shadow color" place="bottom" />
+      <Tooltip id="flip" content="Object flip" place="bottom" />
+      <Tooltip id="group-obj" content="Group Object" place="bottom" />
+      <Tooltip id="canvas" content="Canvas Settings" place="bottom" />
     </div>
   );
 }
diff --git a/src/components/Panel/UploadPanel.jsx b/src/components/Panel/UploadPanel.jsx
new file mode 100644
index 0000000..faeaff5
--- /dev/null
+++ b/src/components/Panel/UploadPanel.jsx
@@ -0,0 +1,30 @@
+import { useContext } from "react";
+import CanvasContext from "../Context/canvasContext/CanvasContext";
+import { X } from "lucide-react";
+import { Button } from "../ui/button";
+import { ScrollArea } from "../ui/scroll-area";
+import UploadImage from "../EachComponent/UploadImage";
+
+const UploadPanel = () => {
+  const { setSelectedPanel } = useContext(CanvasContext);
+  return (
+    <div>
+      <div className="flex justify-between items-center p-4 border-b">
+        <h2 className="text-lg font-semibold">Upload</h2>
+        <Button
+          variant="ghost"
+          size="icon"
+          onClick={() => setSelectedPanel("")}
+        >
+          <X className="h-4 w-4" />
+        </Button>
+      </div>
+
+      <ScrollArea className="lg:h-[calc(90vh-190px)] px-4 py-4">
+        <UploadImage />
+      </ScrollArea>
+    </div>
+  );
+};
+
+export default UploadPanel;