diff --git a/packages/client/components/FullscreenButton.vue b/packages/client/components/FullscreenButton.vue
index d1356b70..0f153f33 100644
--- a/packages/client/components/FullscreenButton.vue
+++ b/packages/client/components/FullscreenButton.vue
@@ -1,12 +1,11 @@
 <script setup lang="ts">
 import { useDevToolsClient } from '../logic/client'
 
-const isFullscreen = ref(false)
+const { viewMode } = useFrameState()
 const client = useDevToolsClient()
-
+const isFullscreen = computed(() => viewMode.value === 'fullscreen')
 function toggleFullscreen() {
   client.value.panel?.toggleViewMode(isFullscreen.value ? 'default' : 'fullscreen')
-  isFullscreen.value = !isFullscreen.value
 }
 </script>
 
diff --git a/packages/client/composables/state.ts b/packages/client/composables/state.ts
index fbd617e8..cad987dc 100644
--- a/packages/client/composables/state.ts
+++ b/packages/client/composables/state.ts
@@ -12,6 +12,7 @@ export interface DevToolsFrameState {
   isFirstVisit: boolean
   closeOnOutsideClick: boolean
   minimizePanelInactive: number
+  viewMode: ViewMode
 }
 
 const frameState = useLocalStorage<DevToolsFrameState>(FRAME_STATE_STORAGE_KEY, {
@@ -25,6 +26,7 @@ const frameState = useLocalStorage<DevToolsFrameState>(FRAME_STATE_STORAGE_KEY,
   isFirstVisit: true,
   closeOnOutsideClick: false,
   minimizePanelInactive: 5000,
+  viewMode: 'default',
 }, { mergeDefaults: true })
 
 const frameStateRefs = toRefs(frameState)
diff --git a/packages/client/pages/__eyedropper.vue b/packages/client/pages/__eyedropper.vue
index 4590c6a8..7a843ff4 100644
--- a/packages/client/pages/__eyedropper.vue
+++ b/packages/client/pages/__eyedropper.vue
@@ -23,8 +23,9 @@ useEventListener('keydown', (e) => {
 })
 
 function close() {
-  client.value?.panel?.toggleViewMode()
-  router.replace(frameState.route.value)
+  router.replace(frameState.route.value).then(() => {
+    client.value?.panel?.toggleViewMode()
+  })
 }
 
 const inSecurityContext = checkIsSecurityContext()
diff --git a/packages/node/src/views/FrameBox.vue b/packages/node/src/views/FrameBox.vue
index b3cc9a04..0bb54f7f 100644
--- a/packages/node/src/views/FrameBox.vue
+++ b/packages/node/src/views/FrameBox.vue
@@ -14,10 +14,13 @@ const props = defineProps<{
       disable: () => void
     } | undefined
   }
-  viewMode: 'xs' | 'default' | 'fullscreen'
+  viewMode: ViewMode
 }>()
 
 const container = ref<HTMLElement>()
+const ableToResize = computed(() => {
+  return props.viewMode === 'default'
+})
 const isResizing = ref<false | { top?: boolean; left?: boolean; right?: boolean; bottom?: boolean }>(false)
 
 watchEffect(() => {
@@ -61,9 +64,7 @@ useWindowEventListener('mousedown', (e: MouseEvent) => {
 })
 
 useWindowEventListener('mousemove', (e) => {
-  if (!isResizing.value)
-    return
-  if (!state.value.open)
+  if (!isResizing.value || !state.value.open)
     return
 
   const iframe = props.client.getIFrame()
@@ -118,49 +119,49 @@ const viewModeClass = computed(() => {
   >
     <!-- Handlers -->
     <div
-      v-show="state.position !== 'top'"
+      v-show="state.position !== 'top' && ableToResize"
       class="vue-devtools-resize-handle vue-devtools-resize-handle-horizontal"
       :style="{ top: 0 }"
       @mousedown.prevent="() => isResizing = { top: true }"
     />
     <div
-      v-show="state.position !== 'bottom'"
+      v-show="state.position !== 'bottom' && ableToResize"
       class="vue-devtools-resize-handle vue-devtools-resize-handle-horizontal"
       :style="{ bottom: 0 }"
       @mousedown.prevent="() => isResizing = { bottom: true }"
     />
     <div
-      v-show="state.position !== 'left'"
+      v-show="state.position !== 'left' && ableToResize"
       class="vue-devtools-resize-handle vue-devtools-resize-handle-vertical"
       :style="{ left: 0 }"
       @mousedown.prevent="() => isResizing = { left: true }"
     />
     <div
-      v-show="state.position !== 'right'"
+      v-show="state.position !== 'right' && ableToResize"
       class="vue-devtools-resize-handle vue-devtools-resize-handle-vertical"
       :style="{ right: 0 }"
       @mousedown.prevent="() => isResizing = { right: true }"
     />
     <div
-      v-show="state.position !== 'top' && state.position !== 'left'"
+      v-show="state.position !== 'top' && state.position !== 'left' && ableToResize"
       class="vue-devtools-resize-handle vue-devtools-resize-handle-corner"
       :style="{ top: 0, left: 0, cursor: 'nwse-resize' }"
       @mousedown.prevent="() => isResizing = { top: true, left: true }"
     />
     <div
-      v-show="state.position !== 'top' && state.position !== 'right'"
+      v-show="state.position !== 'top' && state.position !== 'right' && ableToResize"
       class="vue-devtools-resize-handle vue-devtools-resize-handle-corner"
       :style="{ top: 0, right: 0, cursor: 'nesw-resize' }"
       @mousedown.prevent="() => isResizing = { top: true, right: true }"
     />
     <div
-      v-show="state.position !== 'bottom' && state.position !== 'left'"
+      v-show="state.position !== 'bottom' && state.position !== 'left' && ableToResize"
       class="vue-devtools-resize-handle vue-devtools-resize-handle-corner"
       :style="{ bottom: 0, left: 0, cursor: 'nesw-resize' }"
       @mousedown.prevent="() => isResizing = { bottom: true, left: true }"
     />
     <div
-      v-show="state.position !== 'bottom' && state.position !== 'right'"
+      v-show="state.position !== 'bottom' && state.position !== 'right' && ableToResize"
       class="vue-devtools-resize-handle vue-devtools-resize-handle-corner"
       :style="{ bottom: 0, right: 0, cursor: 'nwse-resize' }"
       @mousedown.prevent="() => isResizing = { bottom: true, right: true }"
@@ -221,6 +222,7 @@ const viewModeClass = computed(() => {
   width: 100vw !important;
   height: 100vh !important;
   z-index: 1 !important;
+  left: 0 !important;
   bottom: 0 !important;
   transform: none !important;
 }
diff --git a/packages/node/src/views/Main.vue b/packages/node/src/views/Main.vue
index b2dacfa8..66b638e5 100644
--- a/packages/node/src/views/Main.vue
+++ b/packages/node/src/views/Main.vue
@@ -6,7 +6,7 @@ import vueDevToolsOptions from 'virtual:vue-devtools-options'
 import { DevToolsHooks, collectDevToolsHookBuffer } from '@vite-plugin-vue-devtools/core'
 import Frame from './FrameBox.vue'
 import ComponentInspector from './ComponentInspector.vue'
-import { useHighlightComponent, useIframe, useInspector, usePanelVisible, usePiPMode, usePosition, useRerenderHighlight } from './composables'
+import { useHighlightComponent, useIframe, useInspector, usePanelState, usePanelVisible, usePiPMode, usePosition, useRerenderHighlight } from './composables'
 import { checkIsSafari, useColorScheme, usePreferredColorScheme, warn } from './utils'
 import RerenderIndicator from './RerenderIndicator.vue'
 
@@ -22,15 +22,11 @@ const hook = props.hook
 const { hookBuffer, collect } = collectDevToolsHookBuffer()
 
 let isAppCreated = false
-const panelState = ref<{
-  viewMode: ViewMode
-}>({
-  viewMode: 'default',
-})
 
 const { togglePanelVisible, closePanel, panelVisible } = usePanelVisible()
 const panelEl = ref<HTMLDivElement>()
 const { onPointerDown, bringUp, anchorStyle, iframeStyle, isDragging, isVertical, isHidden, panelStyle } = usePosition(panelEl)
+const { viewMode, toggleViewMode } = usePanelState()
 const vars = computed(() => {
   const colorScheme = useColorScheme()
   const dark = colorScheme.value === 'auto'
@@ -91,9 +87,7 @@ async function setupClient(iframe: HTMLIFrameElement) {
     hook,
     hookBuffer,
     panel: {
-      toggleViewMode: (mode?: ViewMode) => {
-        panelState.value.viewMode = mode ?? 'default'
-      },
+      toggleViewMode,
       toggle: togglePanelVisible,
       popup,
     },
@@ -237,7 +231,7 @@ collectHookBuffer()
     :class="{
       'vue-devtools-vertical': isVertical,
       'vue-devtools-hide': isHidden,
-      'fullscreen': panelState.viewMode === 'fullscreen',
+      'fullscreen': viewMode === 'fullscreen',
     }"
     @mousemove="bringUp"
   >
@@ -284,7 +278,7 @@ collectHookBuffer()
         },
         getIFrame: getIframe,
       }"
-      :view-mode="panelState.viewMode"
+      :view-mode="viewMode"
     />
   </div>
   <!-- component inspector -->
@@ -301,7 +295,6 @@ collectHookBuffer()
 }
 #vue-devtools-anchor.fullscreen {
   transform: none !important;
-  left: 0 !important;
 }
 
 #vue-devtools-anchor .vue-devtools-icon-button {
diff --git a/packages/node/src/views/composables.ts b/packages/node/src/views/composables.ts
index 186c0913..e4096066 100644
--- a/packages/node/src/views/composables.ts
+++ b/packages/node/src/views/composables.ts
@@ -14,6 +14,7 @@ interface DevToolsFrameState {
   isFirstVisit: boolean
   closeOnOutsideClick: boolean
   minimizePanelInactive: number
+  viewMode: ViewMode
 }
 
 interface ComponentInspectorBounds {
@@ -41,6 +42,7 @@ export const state = useObjectStorage<DevToolsFrameState>('__vue-devtools-frame-
   isFirstVisit: true,
   closeOnOutsideClick: false,
   minimizePanelInactive: 5000,
+  viewMode: 'default',
 })
 
 // ---- useIframe ----
@@ -501,6 +503,27 @@ export function usePosition(panelEl: Ref<HTMLElement | undefined>) {
   }
 }
 
+// ---- usePanelState ----
+export function usePanelState() {
+  const viewMode = computed({
+    get() {
+      return state.value.viewMode
+    },
+    set(value) {
+      state.value.viewMode = value
+    },
+  })
+  let preViewMode = viewMode.value
+
+  function toggleViewMode(mode: ViewMode) {
+    const newMode = mode ?? preViewMode
+    preViewMode = viewMode.value
+    viewMode.value = newMode
+  }
+
+  return { viewMode, toggleViewMode }
+}
+
 // ---- useHighlightComponent ----
 
 export function useHighlightComponent() {