diff --git a/src/components/Layouts/LeftSidebar.jsx b/src/components/Layouts/LeftSidebar.jsx
index 72b4b9c..ed4de47 100644
--- a/src/components/Layouts/LeftSidebar.jsx
+++ b/src/components/Layouts/LeftSidebar.jsx
@@ -24,7 +24,7 @@ const sidebarItems = [
 export function Sidebar() {
   const { selectedPanel, setSelectedPanel } = useContext(CanvasContext);
   return (
-    <div className="w-20 border-r bg-background flex flex-col items-center py-4 gap-6">
+    <div className="w-20 border-r bg-background flex flex-col items-center py-4 gap-6 md:pt-16 xl:pt-0">
       {sidebarItems.map((item) => {
         const Icon = item.icon;
         return (
diff --git a/src/components/Panel/CanvasPanel.jsx b/src/components/Panel/CanvasPanel.jsx
index 8f56b39..912dc45 100644
--- a/src/components/Panel/CanvasPanel.jsx
+++ b/src/components/Panel/CanvasPanel.jsx
@@ -19,7 +19,7 @@ const CanvasPanel = () => {
           <X className="h-4 w-4" />
         </Button>
       </div>
-      <ScrollArea className="lg:h-[calc(90vh-190px)] px-4 py-4">
+      <ScrollArea className="md:h-[calc(90vh-190px)] px-4 py-4">
         <CanvasSetting />
       </ScrollArea>
     </div>
diff --git a/src/components/Panel/ColorPanel.jsx b/src/components/Panel/ColorPanel.jsx
index a20fc65..782cdb7 100644
--- a/src/components/Panel/ColorPanel.jsx
+++ b/src/components/Panel/ColorPanel.jsx
@@ -19,7 +19,7 @@ const ColorPanel = () => {
           <X className="h-4 w-4" />
         </Button>
       </div>
-      <ScrollArea className="lg:h-[calc(90vh-190px)] px-4 py-4">
+      <ScrollArea className="md:h-[calc(90vh-190px)] px-4 py-4">
         <ApplyColor />
       </ScrollArea>
     </div>
diff --git a/src/components/Panel/EditorPanel.jsx b/src/components/Panel/EditorPanel.jsx
index 18f9449..092c183 100644
--- a/src/components/Panel/EditorPanel.jsx
+++ b/src/components/Panel/EditorPanel.jsx
@@ -50,7 +50,7 @@ const EditorPanel = () => {
   return (
     <>
       {selectedPanel !== "" && (
-        <div className="w-80 lg:h-[calc(90vh-100px)] bg-background rounded-xl shadow-lg mx-4 my-auto">
+        <div className="w-80 md:h-[calc(90vh-120px)] bg-background rounded-xl shadow-lg mx-4 my-auto">
           {renderPanel()}
         </div>
       )}
diff --git a/src/components/Panel/FlipPanel.jsx b/src/components/Panel/FlipPanel.jsx
index 7bfb8fd..a603f23 100644
--- a/src/components/Panel/FlipPanel.jsx
+++ b/src/components/Panel/FlipPanel.jsx
@@ -22,7 +22,7 @@ const FlipPanel = () => {
           <X className="h-4 w-4" />
         </Button>
       </div>
-      <ScrollArea className="lg:h-[calc(90vh-190px)] px-4 py-4">
+      <ScrollArea className="md:h-[calc(90vh-190px)] px-4 py-4">
         <Card className="shadow-none border-0">
           <CollapsibleComponent text={"Flip, Rotate Control"}>
             <div className="space-y-2">
diff --git a/src/components/Panel/GroupObjectPanel.jsx b/src/components/Panel/GroupObjectPanel.jsx
index 0bdd55c..bfb217e 100644
--- a/src/components/Panel/GroupObjectPanel.jsx
+++ b/src/components/Panel/GroupObjectPanel.jsx
@@ -21,7 +21,7 @@ const GroupObjectPanel = () => {
           <X className="h-4 w-4" />
         </Button>
       </div>
-      <ScrollArea className="lg:h-[calc(90vh-190px)] px-4 py-4">
+      <ScrollArea className="md:h-[calc(90vh-190px)] px-4 py-4">
         <SelectObjectFromGroup />
         {/* Skew Customization */}
         <SkewCustomization />
diff --git a/src/components/Panel/IconPanel.jsx b/src/components/Panel/IconPanel.jsx
index 99be08b..ab989f7 100644
--- a/src/components/Panel/IconPanel.jsx
+++ b/src/components/Panel/IconPanel.jsx
@@ -20,7 +20,7 @@ const IconPanel = () => {
         </Button>
       </div>
 
-      <ScrollArea className="lg:h-[calc(90vh-190px)] px-4 py-4">
+      <ScrollArea className="md:h-[calc(90vh-190px)] px-4 py-4">
         <AllIconsPage />
       </ScrollArea>
     </div>
diff --git a/src/components/Panel/ImagePanel.jsx b/src/components/Panel/ImagePanel.jsx
index c968d1d..6dc0d70 100644
--- a/src/components/Panel/ImagePanel.jsx
+++ b/src/components/Panel/ImagePanel.jsx
@@ -19,7 +19,7 @@ const ImagePanel = () => {
           <X className="h-4 w-4" />
         </Button>
       </div>
-      <ScrollArea className="lg:h-[calc(90vh-190px)] px-4 py-4">
+      <ScrollArea className="md:h-[calc(90vh-190px)] px-4 py-4">
         <AddImageIntoShape />
       </ScrollArea>
     </div>
diff --git a/src/components/Panel/PositionPanel.jsx b/src/components/Panel/PositionPanel.jsx
index 6e4b79d..cc1e2af 100644
--- a/src/components/Panel/PositionPanel.jsx
+++ b/src/components/Panel/PositionPanel.jsx
@@ -19,7 +19,7 @@ const PositionPanel = () => {
           <X className="h-4 w-4" />
         </Button>
       </div>
-      <ScrollArea className="lg:h-[calc(90vh-190px)]  px-4 py-4">
+      <ScrollArea className="md:h-[calc(90vh-190px)]  px-4 py-4">
         <PositionCustomization />
       </ScrollArea>
     </div>
diff --git a/src/components/Panel/ShadowPanel.jsx b/src/components/Panel/ShadowPanel.jsx
index 08a4c3b..2bb83d6 100644
--- a/src/components/Panel/ShadowPanel.jsx
+++ b/src/components/Panel/ShadowPanel.jsx
@@ -19,7 +19,7 @@ const ShadowPanel = () => {
           <X className="h-4 w-4" />
         </Button>
       </div>
-      <ScrollArea className="lg:h-[calc(90vh-190px)]  px-4 py-4">
+      <ScrollArea className="md:h-[calc(90vh-190px)]  px-4 py-4">
         <ShadowCustomization />
       </ScrollArea>
     </div>
diff --git a/src/components/Panel/ShapePanel.jsx b/src/components/Panel/ShapePanel.jsx
index d837b7f..ef197a1 100644
--- a/src/components/Panel/ShapePanel.jsx
+++ b/src/components/Panel/ShapePanel.jsx
@@ -23,7 +23,7 @@ const ShapePanel = () => {
         </Button>
       </div>
 
-      <ScrollArea className="lg:h-[calc(90vh-190px)] px-4 py-4">
+      <ScrollArea className="md: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">
diff --git a/src/components/Panel/StrokePanel.jsx b/src/components/Panel/StrokePanel.jsx
index e8833d6..14accf3 100644
--- a/src/components/Panel/StrokePanel.jsx
+++ b/src/components/Panel/StrokePanel.jsx
@@ -19,7 +19,7 @@ const StrokePanel = () => {
           <X className="h-4 w-4" />
         </Button>
       </div>
-      <ScrollArea className="lg:h-[calc(90vh-190px)] px-4 py-4">
+      <ScrollArea className="md:h-[calc(90vh-190px)] px-4 py-4">
         <StrokeCustomization />
       </ScrollArea>
     </div>
diff --git a/src/components/Panel/TextPanel.jsx b/src/components/Panel/TextPanel.jsx
index 62c57b3..95e2e83 100644
--- a/src/components/Panel/TextPanel.jsx
+++ b/src/components/Panel/TextPanel.jsx
@@ -53,7 +53,7 @@ export default function TextPanel() {
         </Button>
       </div>
 
-      <ScrollArea className="lg:h-[calc(90vh-190px)] px-4 py-4">
+      <ScrollArea className="md:h-[calc(90vh-195px)] px-4 py-4">
         <Button
           className="w-full bg-[#FF2B85] hover:bg-[#FF2B85] text-white rounded-[10px] mb-6 h-12 font-medium text-xl"
           onClick={() => {
diff --git a/src/components/Panel/TopBar.jsx b/src/components/Panel/TopBar.jsx
index 6fc382b..3397c06 100644
--- a/src/components/Panel/TopBar.jsx
+++ b/src/components/Panel/TopBar.jsx
@@ -27,7 +27,7 @@ export function TopBar() {
       <ScrollArea
         className={`!absolute top-2 -translate-x-1/2 z-40 h-28 ${
           selectedPanel !== ""
-            ? "w-[500px] lg:w-[700px] xl:w-[900px] xl:left-[25%] 2xl:left-[50%]"
+            ? "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%]"
         }   `}
       >
diff --git a/src/components/Panel/UploadPanel.jsx b/src/components/Panel/UploadPanel.jsx
index faeaff5..1b9a79e 100644
--- a/src/components/Panel/UploadPanel.jsx
+++ b/src/components/Panel/UploadPanel.jsx
@@ -20,7 +20,7 @@ const UploadPanel = () => {
         </Button>
       </div>
 
-      <ScrollArea className="lg:h-[calc(90vh-190px)] px-4 py-4">
+      <ScrollArea className="md:h-[calc(90vh-190px)] px-4 py-4">
         <UploadImage />
       </ScrollArea>
     </div>
diff --git a/tailwind.config.js b/tailwind.config.js
index 90d55ce..b6b17a0 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -13,7 +13,9 @@ export default {
           foreground: "hsl(var(--primary-foreground))",
         },
       },
-
+      screens: {
+        mdxl: "1100px",
+      },
       colors: {
         border: "hsl(var(--border))",
         input: "hsl(var(--input))",