diff --git a/libs/remix-ui/app/src/lib/remix-app/components/dragbar/dragbar.tsx b/libs/remix-ui/app/src/lib/remix-app/components/dragbar/dragbar.tsx
index bb7bd77613..609cd6edb3 100644
--- a/libs/remix-ui/app/src/lib/remix-app/components/dragbar/dragbar.tsx
+++ b/libs/remix-ui/app/src/lib/remix-app/components/dragbar/dragbar.tsx
@@ -54,7 +54,8 @@ const DragBar = (props: IRemixDragBarUi) => {
   const handleResize = () => {
     if (!props.refObject.current) return
     setOffSet(props.refObject.current.offsetLeft)
-    setDragBarPosX(props.refObject.current.offsetLeft + props.refObject.current.offsetWidth)
+    if (props.layoutPosition === 'left') setDragBarPosX(props.refObject.current.offsetLeft + props.refObject.current.offsetWidth)
+    else if (props.layoutPosition === 'right') setDragBarPosX(props.refObject.current.offsetLeft)
   }
 
   useEffect(() => {
@@ -66,15 +67,28 @@ const DragBar = (props: IRemixDragBarUi) => {
 
   function stopDrag(data: any) {
     setDragState(false)
-    if (data.x < props.minWidth + offset) {
-      setDragBarPosX(offset)
-      props.setHideStatus(true)
-    } else {
-      props.refObject.current.style.width = data.x - offset + 'px'
-      setTimeout(() => {
+    if (props.layoutPosition === 'left') {
+      if (data.x < props.minWidth + offset) {
+        setDragBarPosX(offset)
+        props.setHideStatus(true)
+      } else {
+        props.refObject.current.style.width = data.x - offset + 'px'
+        setTimeout(() => {
+          props.setHideStatus(false)
+          setDragBarPosX(offset + props.refObject.current.offsetWidth)
+        }, 300)
+      }
+    } else if (props.layoutPosition === 'right') {
+      if (window.innerWidth - data.x < props.minWidth) {
+        setDragBarPosX(props.refObject.current.offsetLeft)
         props.setHideStatus(false)
-        setDragBarPosX(offset + props.refObject.current.offsetWidth)
-      }, 300)
+      } else {
+        props.refObject.current.style.width = (window.innerWidth - data.x) + 'px'
+        setTimeout(() => {
+          props.setHideStatus(false)
+          setDragBarPosX(props.refObject.current.offsetLeft)
+        }, 300)
+      }
     }
   }
 
diff --git a/libs/remix-ui/app/src/lib/remix-app/remix-app.tsx b/libs/remix-ui/app/src/lib/remix-app/remix-app.tsx
index f184505d33..d458271243 100644
--- a/libs/remix-ui/app/src/lib/remix-app/remix-app.tsx
+++ b/libs/remix-ui/app/src/lib/remix-app/remix-app.tsx
@@ -98,7 +98,7 @@ const RemixApp = (props: IRemixAppUi) => {
 
     props.app.layout.event.on('minimizepinnedpanel', () => {
       setTimeout(() => {
-        setHideSidePanel(true)
+        setHidePinnedPanel(true)
       }, 1000)
     })
 
@@ -220,7 +220,7 @@ const RemixApp = (props: IRemixAppUi) => {
                 minWidth={285}
                 refObject={pinnedPanelRef}
                 hidden={hidePinnedPanel}
-                setHideStatus={setHideSidePanel}
+                setHideStatus={setHidePinnedPanel}
                 layoutPosition='right'
               ></DragBar>
             </div>