diff --git a/packages/devtools/src/components/main-panel.tsx b/packages/devtools/src/components/main-panel.tsx
index f01e2082..17b1cfbf 100644
--- a/packages/devtools/src/components/main-panel.tsx
+++ b/packages/devtools/src/components/main-panel.tsx
@@ -27,7 +27,11 @@ export const MainPanel = (props: {
           settings().panelLocation,
           Boolean(pip().pipWindow),
         ),
-        styles().devtoolsPanelContainerAnimation(props.isOpen(), height()),
+        styles().devtoolsPanelContainerAnimation(
+          props.isOpen(),
+          height(),
+          settings().panelLocation,
+        ),
         styles().devtoolsPanelContainerVisibility(props.isOpen()),
         styles().devtoolsPanelContainerResizing(props.isResizing),
       )}
diff --git a/packages/devtools/src/styles/use-styles.ts b/packages/devtools/src/styles/use-styles.ts
index 314dec1a..6dcf5cf6 100644
--- a/packages/devtools/src/styles/use-styles.ts
+++ b/packages/devtools/src/styles/use-styles.ts
@@ -166,7 +166,11 @@ const stylesFactory = (theme: DevtoolsStore['settings']['theme']) => {
         transition: all 0.4s ease;
       `
     },
-    devtoolsPanelContainerAnimation: (isOpen: boolean, height: number) => {
+    devtoolsPanelContainerAnimation: (
+      isOpen: boolean,
+      height: number,
+      panelLocation: TanStackDevtoolsConfig['panelLocation'],
+    ) => {
       if (isOpen) {
         return css`
           pointer-events: auto;
@@ -175,7 +179,7 @@ const stylesFactory = (theme: DevtoolsStore['settings']['theme']) => {
       }
       return css`
         pointer-events: none;
-        transform: translateY(${height}px);
+        transform: translateY(${panelLocation === 'top' ? -height : height}px);
       `
     },
     devtoolsPanel: css`