diff --git a/src/App.css b/src/App.css
index 3bd0fa3..a45caef 100644
--- a/src/App.css
+++ b/src/App.css
@@ -6,16 +6,6 @@
 .tooltip {
   --tooltip-spacing: 30px;
 }
-/* Hide scrollbar for Chrome, Safari and Opera */
-.example::-webkit-scrollbar {
-  display: none;
-}
-
-/* Hide scrollbar for IE, Edge and Firefox */
-.example {
-  -ms-overflow-style: none; /* IE and Edge */
-  scrollbar-width: none; /* Firefox */
-}
 
 .\[\&_svg\]\:size-4 svg {
   width: 1.3rem !important;
diff --git a/src/components/Panel/TopBar.jsx b/src/components/Panel/TopBar.jsx
index 3397c06..901de91 100644
--- a/src/components/Panel/TopBar.jsx
+++ b/src/components/Panel/TopBar.jsx
@@ -1,13 +1,12 @@
+import { useContext, useRef, useState } from "react";
 import TextCustomization from "../EachComponent/Customization/TextCustomization";
 import LockObject from "../EachComponent/Customization/LockObject";
-import { ScrollArea, ScrollBar } from "../ui/scroll-area";
 import OpacityCustomization from "../EachComponent/Customization/OpacityCustomization";
 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 { ImagePlus, ChevronLeft, ChevronRight } from "lucide-react";
 import { RxBorderWidth } from "react-icons/rx";
 import { LuFlipVertical } from "react-icons/lu";
 import { SlTarget } from "react-icons/sl";
@@ -22,180 +21,220 @@ export function TopBar() {
   const activeObjectType = activeObject?.type;
   const hasClipPath = !!activeObject?.clipPath;
   const customClipPath = activeObject?.isClipPath;
+  const scrollContainerRef = useRef(null);
+  const [showScrollButtons, setShowScrollButtons] = useState(false);
+
+  const scroll = (direction) => {
+    const container = scrollContainerRef.current;
+    if (container) {
+      const scrollAmount = 200; // Adjust this value to change scroll distance
+      container.scrollBy({
+        left: direction * scrollAmount,
+        behavior: "smooth",
+      });
+    }
+  };
+
   return (
-    <div>
-      <ScrollArea
-        className={`!absolute top-2 -translate-x-1/2 z-40 h-28 ${
-          selectedPanel !== ""
-            ? "md:w-[475px] left-[41%] lg:w-[700px] lg:left-[43%] mdxl:left-[45%] xl:w-[900px] xl:left-[46%] 2xl:left-[50%]"
-            : "w-[500px] lg:w-[600px] xl:w-[900px] lg:left-[41%] xl:left-[50%]"
-        }   `}
-      >
-        <div className="bg-white shadow-sm mx-auto px-4 py-2 flex justify-center items-center gap-2">
-          <div>
-            <TextCustomization />
-          </div>
-          <div className="flex items-center gap-4 px-2">
+    <div
+      className={`!absolute top-2 -translate-x-1/2 z-40 ${
+        selectedPanel !== ""
+          ? "md:w-[465px] left-[41%] lg:w-[700px] lg:left-[43%] mdxl:left-[45%] xl:w-[900px] xl:left-[46%] 2xl:left-[50%]"
+          : "w-[500px] lg:w-[600px] xl:w-[900px] lg:left-[41%] xl:left-[50%]"
+      }`}
+      onMouseEnter={() => setShowScrollButtons(true)}
+      onMouseLeave={() => setShowScrollButtons(false)}
+    >
+      <div className="relative h-full hidden xl:block">
+        {showScrollButtons && (
+          <>
             <Button
-              variant="outline"
-              className="flex items-center gap-2 border-dashed border-2 rounded-md hover:bg-gray-50"
-              onClick={() => setSelectedPanel("image-insert")}
+              className="absolute left-0 top-1/2 -translate-y-1/2 z-10 bg-accent"
+              onClick={() => scroll(-1)}
+              variant="ghost"
+              size="icon"
             >
-              <ImagePlus className="w-5 h-5" />
-              <span>Add image</span>
+              <ChevronLeft className="h-4 w-4" />
             </Button>
-
+            <Button
+              className="absolute right-0 top-1/2 -translate-y-1/2 z-10 bg-accent"
+              onClick={() => scroll(1)}
+              variant="ghost"
+              size="icon"
+            >
+              <ChevronRight className="h-4 w-4" />
+            </Button>
+          </>
+        )}
+        <div
+          ref={scrollContainerRef}
+          className="w-full h-full overflow-x-auto scrollbar-hide"
+        >
+          <div className="bg-white shadow-sm mx-auto px-4 xl:px-10 py-2 flex justify-start items-center gap-2 min-w-max h-full">
             <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>
+              <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 className="flex items-center gap-2">
-              {activeObjectType !== "image" &&
-                activeObject?.type !== "i-text" &&
-                !hasClipPath &&
-                !customClipPath && (
-                  <a data-tooltip-id="color-gr">
+              <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>
+                <Tooltip id="canvas" content="Canvas Settings" place="bottom" />
+              </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>
+                  )}
+                <Tooltip id="color-gr" content="Color" place="bottom" />
+
+                {!customClipPath && (
+                  <a data-tooltip-id="stroke">
                     <Button
                       variant="ghost"
                       size="icon"
-                      className={"rounded-full"}
-                      onClick={() => setSelectedPanel("color")}
-                      style={{ backgroundColor: textColor?.fill || "black" }}
-                    ></Button>
+                      className="w-10 h-10"
+                      onClick={() => setSelectedPanel("stroke")}
+                    >
+                      <RxBorderWidth className="text-lg" />
+                    </Button>
                   </a>
                 )}
+                <Tooltip id="stroke" content="Stroke" place="bottom" />
+                {(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>
+                )}
+                <Tooltip id="group-obj" content="Group Object" place="bottom" />
+              </div>
 
-              {!customClipPath && (
-                <a data-tooltip-id="stroke">
+              <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"
-                    className="w-10 h-10"
-                    onClick={() => setSelectedPanel("stroke")}
+                    onClick={() => setSelectedPanel("flip")}
                   >
-                    <RxBorderWidth className="text-lg" />
+                    <LuFlipVertical />
                   </Button>
                 </a>
-              )}
-              {(activeObject || activeObject.type === "group") && (
-                <a data-tooltip-id="group-obj">
+                <Tooltip id="flip" content="Object flip" place="bottom" />
+                {activeObject?.type !== "group" && (
+                  <a data-tooltip-id="position">
+                    <Button
+                      variant="ghost"
+                      size="icon"
+                      onClick={() => setSelectedPanel("position")}
+                    >
+                      <SlTarget />
+                    </Button>
+                  </a>
+                )}
+                <Tooltip
+                  id="position"
+                  content="Object position"
+                  place="bottom"
+                />
+                <a data-tooltip-id="shadow">
                   <Button
                     variant="ghost"
                     size="icon"
-                    className="w-10 h-10"
-                    onClick={() => setSelectedPanel("group-obj")}
+                    onClick={() => setSelectedPanel("shadow")}
                   >
-                    <FaRegObjectGroup />
+                    <RiShadowLine />
                   </Button>
                 </a>
-              )}
+                <Tooltip id="shadow" content="Shadow color" place="bottom" />
+              </div>
             </div>
+            <OpacityCustomization />
+            <div className="h-4 w-px bg-border mx-2" />
 
-            <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>
+              <ObjectShortcut value="default" />
+            </div>
+            <div className="ml-4">
+              <LockObject />
             </div>
-          </div>
-          <OpacityCustomization />
-          <div className="h-4 w-px bg-border mx-2" />
-
-          <div>
-            <ObjectShortcut value={"default"} />
-          </div>
-          <div className="ml-4">
-            <LockObject />
           </div>
         </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>
     </div>
   );
 }