diff --git a/surfsense_web/components/layout/ui/sidebar/SidebarSlideOutPanel.tsx b/surfsense_web/components/layout/ui/sidebar/SidebarSlideOutPanel.tsx
index 5195082cd..47c6c2b4a 100644
--- a/surfsense_web/components/layout/ui/sidebar/SidebarSlideOutPanel.tsx
+++ b/surfsense_web/components/layout/ui/sidebar/SidebarSlideOutPanel.tsx
@@ -91,12 +91,13 @@ export function SidebarSlideOutPanel({
 
 					{/* Panel extending from sidebar's right edge, flush with the wrapper border */}
 					<motion.div
-						initial={{ width: 0 }}
-						animate={{ width }}
-						exit={{ width: 0 }}
+						style={{ width }}
+						initial={{ x: -width }}
+						animate={{ x: 0 }}
+						exit={{ x: -width }}
 						transition={{ type: "tween", duration: 0.2, ease: [0.4, 0, 0.2, 1] }}
 						className="absolute z-20 overflow-hidden"
-						style={{ left: "100%", top: -1, bottom: -1 }}
+						style={{ width, left: "100%", top: -1, bottom: -1 }}
 					>
 						<div
 							style={{ width }}