diff --git a/.changeset/quiet-panels-stay-independent.md b/.changeset/quiet-panels-stay-independent.md
new file mode 100644
index 00000000000..cb94b2f1541
--- /dev/null
+++ b/.changeset/quiet-panels-stay-independent.md
@@ -0,0 +1,5 @@
+---
+'@tanstack/query-devtools': patch
+---
+
+Isolate the signals and subscriptions used across the DevTools context
diff --git a/packages/query-devtools/src/Devtools.tsx b/packages/query-devtools/src/Devtools.tsx
index c19022e6312..76e82a0b108 100644
--- a/packages/query-devtools/src/Devtools.tsx
+++ b/packages/query-devtools/src/Devtools.tsx
@@ -17,6 +17,9 @@ import { Key } from '@solid-primitives/keyed'
 import { createResizeObserver } from '@solid-primitives/resize-observer'
 import { DropdownMenu, RadioGroup } from '@kobalte/core'
 import { Portal } from 'solid-js/web'
+import { useDevtoolsOffline } from './contexts/DevtoolsOfflineContext'
+import { useDevtoolsSubscriptions } from './contexts/DevtoolsSubscriptionsContext'
+import { useDevtoolsState } from './contexts/DevtoolsStateContext'
 import { tokens } from './theme'
 import {
   convertRemToPixels,
@@ -78,7 +81,7 @@ import type {
   QueryCacheNotifyEvent,
 } from '@tanstack/query-core'
 import type { StorageObject, StorageSetter } from '@solid-primitives/storage'
-import type { Accessor, Component, JSX, Setter } from 'solid-js'
+import type { Accessor, Component, JSX } from 'solid-js'
 
 interface DevtoolsPanelProps {
   localStore: StorageObject<string>
@@ -98,15 +101,6 @@ interface QueryStatusProps {
   count: number
 }
 
-const [selectedQueryHash, setSelectedQueryHash] = createSignal<string | null>(
-  null,
-)
-const [selectedMutationId, setSelectedMutationId] = createSignal<number | null>(
-  null,
-)
-const [panelWidth, setPanelWidth] = createSignal(0)
-const [offline, setOffline] = createSignal(false)
-
 export type DevtoolsComponentType = Component<QueryDevtoolsProps> & {
   shadowDOMTarget?: ShadowRoot
 }
@@ -119,19 +113,6 @@ export const Devtools: Component<DevtoolsPanelProps> = (props) => {
   const styles = createMemo(() => {
     return theme() === 'dark' ? darkStyles(css) : lightStyles(css)
   })
-  const onlineManager = createMemo(
-    () => useQueryDevtoolsContext().onlineManager,
-  )
-  onMount(() => {
-    const unsubscribe = onlineManager().subscribe((online) => {
-      setOffline(!online)
-    })
-
-    onCleanup(() => {
-      unsubscribe()
-    })
-  })
-
   const pip = usePiPWindow()
 
   const buttonPosition = createMemo(() => {
@@ -285,6 +266,8 @@ export const Devtools: Component<DevtoolsPanelProps> = (props) => {
 const PiPPanel: Component<{
   children: JSX.Element
 }> = (props) => {
+  const { panelWidth, setPanelWidth } = useDevtoolsState()
+
   const pip = usePiPWindow()
   const theme = useTheme()
   const css = useQueryDevtoolsContext().shadowDOMTarget
@@ -355,6 +338,8 @@ const PiPPanel: Component<{
 export const ParentPanel: Component<{
   children: JSX.Element
 }> = (props) => {
+  const { panelWidth, setPanelWidth } = useDevtoolsState()
+
   const theme = useTheme()
   const css = useQueryDevtoolsContext().shadowDOMTarget
     ? goober.css.bind({ target: useQueryDevtoolsContext().shadowDOMTarget })
@@ -412,6 +397,8 @@ export const ParentPanel: Component<{
 }
 
 const DraggablePanel: Component<DevtoolsPanelProps> = (props) => {
+  const { setSelectedQueryHash, panelWidth, setPanelWidth } = useDevtoolsState()
+
   const theme = useTheme()
   const css = useQueryDevtoolsContext().shadowDOMTarget
     ? goober.css.bind({ target: useQueryDevtoolsContext().shadowDOMTarget })
@@ -676,6 +663,16 @@ const DraggablePanel: Component<DevtoolsPanelProps> = (props) => {
 }
 
 export const ContentView: Component<ContentViewProps> = (props) => {
+  const {
+    selectedQueryHash,
+    setSelectedQueryHash,
+    selectedMutationId,
+    setSelectedMutationId,
+    panelWidth,
+  } = useDevtoolsState()
+
+  const { offline, toggleOffline } = useDevtoolsOffline()
+
   setupQueryCacheSubscription()
   setupMutationCacheSubscription()
   let containerRef!: HTMLDivElement
@@ -710,10 +707,6 @@ export const ContentView: Component<ContentViewProps> = (props) => {
     () => mutationSortFns[mutationSort() as string],
   )
 
-  const onlineManager = createMemo(
-    () => useQueryDevtoolsContext().onlineManager,
-  )
-
   const query_cache = createMemo(() => {
     return useQueryDevtoolsContext().client.getQueryCache()
   })
@@ -1035,9 +1028,7 @@ export const ContentView: Component<ContentViewProps> = (props) => {
               <Trash />
             </button>
             <button
-              onClick={() => {
-                onlineManager().setOnline(!onlineManager().isOnline())
-              }}
+              onClick={toggleOffline}
               class={cx(
                 styles().actionsBtn,
                 offline() && styles().actionsBtnOffline,
@@ -1376,6 +1367,8 @@ export const ContentView: Component<ContentViewProps> = (props) => {
 }
 
 const QueryRow: Component<{ query: Query }> = (props) => {
+  const { selectedQueryHash, setSelectedQueryHash } = useDevtoolsState()
+
   const theme = useTheme()
   const css = useQueryDevtoolsContext().shadowDOMTarget
     ? goober.css.bind({ target: useQueryDevtoolsContext().shadowDOMTarget })
@@ -1485,6 +1478,8 @@ const QueryRow: Component<{ query: Query }> = (props) => {
 }
 
 const MutationRow: Component<{ mutation: Mutation }> = (props) => {
+  const { selectedMutationId, setSelectedMutationId } = useDevtoolsState()
+
   const theme = useTheme()
   const css = useQueryDevtoolsContext().shadowDOMTarget
     ? goober.css.bind({ target: useQueryDevtoolsContext().shadowDOMTarget })
@@ -1726,6 +1721,8 @@ const MutationStatusCount: Component = () => {
 }
 
 const QueryStatus: Component<QueryStatusProps> = (props) => {
+  const { selectedQueryHash, panelWidth } = useDevtoolsState()
+
   const theme = useTheme()
   const css = useQueryDevtoolsContext().shadowDOMTarget
     ? goober.css.bind({ target: useQueryDevtoolsContext().shadowDOMTarget })
@@ -1841,6 +1838,8 @@ const QueryStatus: Component<QueryStatusProps> = (props) => {
 }
 
 const QueryDetails = () => {
+  const { selectedQueryHash, setSelectedQueryHash } = useDevtoolsState()
+
   const theme = useTheme()
   const css = useQueryDevtoolsContext().shadowDOMTarget
     ? goober.css.bind({ target: useQueryDevtoolsContext().shadowDOMTarget })
@@ -2386,6 +2385,8 @@ const QueryDetails = () => {
 }
 
 const MutationDetails = () => {
+  const { selectedMutationId } = useDevtoolsState()
+
   const theme = useTheme()
   const css = useQueryDevtoolsContext().shadowDOMTarget
     ? goober.css.bind({ target: useQueryDevtoolsContext().shadowDOMTarget })
@@ -2573,35 +2574,22 @@ const MutationDetails = () => {
   )
 }
 
-const queryCacheMap = new Map<
-  (q: Accessor<QueryCache>) => any,
-  {
-    setter: Setter<any>
-    shouldUpdate: (event: QueryCacheNotifyEvent) => boolean
-  }
->()
-
 const setupQueryCacheSubscription = () => {
+  const { queryCacheSubscriptions } = useDevtoolsSubscriptions()
   const queryCache = createMemo(() => {
     const client = useQueryDevtoolsContext().client
     return client.getQueryCache()
   })
 
-  const unsubscribe = queryCache().subscribe((q) => {
-    batch(() => {
-      for (const [callback, value] of queryCacheMap.entries()) {
-        if (!value.shouldUpdate(q)) continue
-        value.setter(callback(queryCache))
-      }
+  createEffect(() => {
+    const cache = queryCache()
+    const unsubscribe = cache.subscribe((event) => {
+      batch(() => {
+        queryCacheSubscriptions.notify(() => cache, event)
+      })
     })
+    onCleanup(unsubscribe)
   })
-
-  onCleanup(() => {
-    queryCacheMap.clear()
-    unsubscribe()
-  })
-
-  return unsubscribe
 }
 
 const createSubscribeToQueryCacheBatcher = <T,>(
@@ -2609,6 +2597,7 @@ const createSubscribeToQueryCacheBatcher = <T,>(
   equalityCheck: boolean = true,
   shouldUpdate: (event: QueryCacheNotifyEvent) => boolean = () => true,
 ) => {
+  const { queryCacheSubscriptions } = useDevtoolsSubscriptions()
   const queryCache = createMemo(() => {
     const client = useQueryDevtoolsContext().client
     return client.getQueryCache()
@@ -2623,49 +2612,44 @@ const createSubscribeToQueryCacheBatcher = <T,>(
     setValue(callback(queryCache))
   })
 
-  queryCacheMap.set(callback, {
-    setter: setValue,
-    shouldUpdate: shouldUpdate,
-  })
-
-  onCleanup(() => {
-    queryCacheMap.delete(callback)
-  })
+  queryCacheSubscriptions.register(callback, setValue, shouldUpdate)
 
   return value
 }
 
-const mutationCacheMap = new Map<
-  (q: Accessor<MutationCache>) => any,
-  Setter<any>
->()
-
 const setupMutationCacheSubscription = () => {
+  const { mutationCacheSubscriptions } = useDevtoolsSubscriptions()
   const mutationCache = createMemo(() => {
     const client = useQueryDevtoolsContext().client
     return client.getMutationCache()
   })
 
-  const unsubscribe = mutationCache().subscribe(() => {
-    for (const [callback, setter] of mutationCacheMap.entries()) {
-      queueMicrotask(() => {
-        setter(callback(mutationCache))
-      })
-    }
-  })
-
-  onCleanup(() => {
-    mutationCacheMap.clear()
-    unsubscribe()
+  createEffect(() => {
+    const cache = mutationCache()
+    let active = true
+    const unsubscribe = cache.subscribe((event) => {
+      mutationCacheSubscriptions.notify(
+        () => cache,
+        event,
+        (update) => {
+          queueMicrotask(() => {
+            if (active) update()
+          })
+        },
+      )
+    })
+    onCleanup(() => {
+      active = false
+      unsubscribe()
+    })
   })
-
-  return unsubscribe
 }
 
 const createSubscribeToMutationCacheBatcher = <T,>(
   callback: (queryCache: Accessor<MutationCache>) => Exclude<T, Function>,
   equalityCheck: boolean = true,
 ) => {
+  const { mutationCacheSubscriptions } = useDevtoolsSubscriptions()
   const mutationCache = createMemo(() => {
     const client = useQueryDevtoolsContext().client
     return client.getMutationCache()
@@ -2680,11 +2664,7 @@ const createSubscribeToMutationCacheBatcher = <T,>(
     setValue(callback(mutationCache))
   })
 
-  mutationCacheMap.set(callback, setValue)
-
-  onCleanup(() => {
-    mutationCacheMap.delete(callback)
-  })
+  mutationCacheSubscriptions.register(callback, setValue)
 
   return value
 }
diff --git a/packages/query-devtools/src/DevtoolsComponent.tsx b/packages/query-devtools/src/DevtoolsComponent.tsx
index 069d79c87a2..7373a04429a 100644
--- a/packages/query-devtools/src/DevtoolsComponent.tsx
+++ b/packages/query-devtools/src/DevtoolsComponent.tsx
@@ -1,5 +1,8 @@
 import { createLocalStorage } from '@solid-primitives/storage'
 import { createMemo } from 'solid-js'
+import { DevtoolsOfflineProvider } from './providers/DevtoolsOfflineProvider'
+import { DevtoolsSubscriptionsProvider } from './providers/DevtoolsSubscriptionsProvider'
+import { DevtoolsStateProvider } from './providers/DevtoolsStateProvider'
 import { Devtools } from './Devtools'
 import { getPreferredColorScheme } from './utils'
 import { THEME_PREFERENCE } from './constants'
@@ -24,11 +27,20 @@ const DevtoolsComponent: DevtoolsComponentType = (props) => {
 
   return (
     <QueryDevtoolsContext.Provider value={props}>
-      <PiPProvider localStore={localStore} setLocalStore={setLocalStore}>
-        <ThemeContext.Provider value={theme}>
-          <Devtools localStore={localStore} setLocalStore={setLocalStore} />
-        </ThemeContext.Provider>
-      </PiPProvider>
+      <DevtoolsStateProvider>
+        <DevtoolsOfflineProvider>
+          <DevtoolsSubscriptionsProvider>
+            <PiPProvider localStore={localStore} setLocalStore={setLocalStore}>
+              <ThemeContext.Provider value={theme}>
+                <Devtools
+                  localStore={localStore}
+                  setLocalStore={setLocalStore}
+                />
+              </ThemeContext.Provider>
+            </PiPProvider>
+          </DevtoolsSubscriptionsProvider>
+        </DevtoolsOfflineProvider>
+      </DevtoolsStateProvider>
     </QueryDevtoolsContext.Provider>
   )
 }
diff --git a/packages/query-devtools/src/DevtoolsPanelComponent.tsx b/packages/query-devtools/src/DevtoolsPanelComponent.tsx
index cae641b44ad..7985ac12a25 100644
--- a/packages/query-devtools/src/DevtoolsPanelComponent.tsx
+++ b/packages/query-devtools/src/DevtoolsPanelComponent.tsx
@@ -1,5 +1,8 @@
 import { createLocalStorage } from '@solid-primitives/storage'
 import { createMemo } from 'solid-js'
+import { DevtoolsOfflineProvider } from './providers/DevtoolsOfflineProvider'
+import { DevtoolsSubscriptionsProvider } from './providers/DevtoolsSubscriptionsProvider'
+import { DevtoolsStateProvider } from './providers/DevtoolsStateProvider'
 import { ContentView, ParentPanel } from './Devtools'
 import { getPreferredColorScheme } from './utils'
 import { THEME_PREFERENCE } from './constants'
@@ -24,22 +27,28 @@ const DevtoolsPanelComponent: DevtoolsComponentType = (props) => {
 
   return (
     <QueryDevtoolsContext.Provider value={props}>
-      <PiPProvider
-        disabled
-        localStore={localStore}
-        setLocalStore={setLocalStore}
-      >
-        <ThemeContext.Provider value={theme}>
-          <ParentPanel>
-            <ContentView
+      <DevtoolsStateProvider>
+        <DevtoolsOfflineProvider>
+          <DevtoolsSubscriptionsProvider>
+            <PiPProvider
+              disabled
               localStore={localStore}
               setLocalStore={setLocalStore}
-              onClose={props.onClose}
-              showPanelViewOnly
-            />
-          </ParentPanel>
-        </ThemeContext.Provider>
-      </PiPProvider>
+            >
+              <ThemeContext.Provider value={theme}>
+                <ParentPanel>
+                  <ContentView
+                    localStore={localStore}
+                    setLocalStore={setLocalStore}
+                    onClose={props.onClose}
+                    showPanelViewOnly
+                  />
+                </ParentPanel>
+              </ThemeContext.Provider>
+            </PiPProvider>
+          </DevtoolsSubscriptionsProvider>
+        </DevtoolsOfflineProvider>
+      </DevtoolsStateProvider>
     </QueryDevtoolsContext.Provider>
   )
 }
diff --git a/packages/query-devtools/src/__tests__/Devtools.test.tsx b/packages/query-devtools/src/__tests__/Devtools.test.tsx
index d53c074dae0..23f65991975 100644
--- a/packages/query-devtools/src/__tests__/Devtools.test.tsx
+++ b/packages/query-devtools/src/__tests__/Devtools.test.tsx
@@ -1,3 +1,4 @@
+import { createSignal } from 'solid-js'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 import {
   QueryClient,
@@ -7,8 +8,14 @@ import {
   noop,
   onlineManager,
 } from '@tanstack/query-core'
-import { fireEvent, render } from '@solidjs/testing-library'
+import { fireEvent, render, within } from '@solidjs/testing-library'
 import { createLocalStorage } from '@solid-primitives/storage'
+import { DevtoolsOfflineProvider } from '../providers/DevtoolsOfflineProvider'
+import { DevtoolsSubscriptionsProvider } from '../providers/DevtoolsSubscriptionsProvider'
+import DevtoolsComponent from '../DevtoolsComponent'
+import { DevtoolsStateProvider } from '../providers/DevtoolsStateProvider'
+import { useDevtoolsState } from '../contexts/DevtoolsStateContext'
+import DevtoolsPanelComponent from '../DevtoolsPanelComponent'
 import { Devtools } from '../Devtools'
 import { PiPProvider, QueryDevtoolsContext, ThemeContext } from '../contexts'
 import type { QueryDevtoolsProps } from '../contexts'
@@ -37,8 +44,10 @@ describe('Devtools', () => {
   const storage: { [key: string]: string } = {}
   let queryClient: QueryClient
   let previousRootFontSize = ''
+  let resizeObservers: Array<ResizeObserver> = []
 
   beforeEach(() => {
+    resizeObservers = []
     vi.useFakeTimers()
     previousRootFontSize = document.documentElement.style.fontSize
     vi.stubGlobal('localStorage', {
@@ -75,6 +84,7 @@ describe('Devtools', () => {
         callback: ResizeObserverCallback
         constructor(callback: ResizeObserverCallback) {
           this.callback = callback
+          resizeObservers.push(this)
         }
         observe = vi.fn((target: Element) => {
           this.callback(
@@ -108,10 +118,15 @@ describe('Devtools', () => {
   function renderDevtools(
     overrides: Partial<QueryDevtoolsProps> = {},
     initialStorage: Record<string, string> = {},
+    onState?: (state: ReturnType<typeof useDevtoolsState>) => void,
   ) {
     Object.entries(initialStorage).forEach(([key, value]) => {
       localStorage.setItem(key, value)
     })
+    function StateProbe() {
+      onState?.(useDevtoolsState())
+      return null
+    }
     return render(() => {
       const [localStore, setLocalStore] = createLocalStorage({
         prefix: 'TanstackQueryDevtools',
@@ -126,16 +141,241 @@ describe('Devtools', () => {
             ...overrides,
           }}
         >
-          <PiPProvider localStore={localStore} setLocalStore={setLocalStore}>
-            <ThemeContext.Provider value={() => 'dark'}>
-              <Devtools localStore={localStore} setLocalStore={setLocalStore} />
-            </ThemeContext.Provider>
-          </PiPProvider>
+          <DevtoolsStateProvider>
+            <DevtoolsOfflineProvider>
+              <DevtoolsSubscriptionsProvider>
+                <StateProbe />
+                <PiPProvider
+                  localStore={localStore}
+                  setLocalStore={setLocalStore}
+                >
+                  <ThemeContext.Provider value={() => 'dark'}>
+                    <Devtools
+                      localStore={localStore}
+                      setLocalStore={setLocalStore}
+                    />
+                  </ThemeContext.Provider>
+                </PiPProvider>
+              </DevtoolsSubscriptionsProvider>
+            </DevtoolsOfflineProvider>
+          </DevtoolsStateProvider>
         </QueryDevtoolsContext.Provider>
       )
     })
   }
 
+  it('keeps measured panel widths independent', () => {
+    let firstState!: ReturnType<typeof useDevtoolsState>
+    let secondState!: ReturnType<typeof useDevtoolsState>
+    const first = renderDevtools({ initialIsOpen: true }, {}, (state) => {
+      firstState = state
+    })
+    renderDevtools({ initialIsOpen: true }, {}, (state) => {
+      secondState = state
+    })
+    const panel = first.container.querySelector('aside')!
+    for (const observer of resizeObservers) {
+      const observed = vi
+        .mocked(observer.observe)
+        .mock.calls.some(([target]) => target === panel)
+      if (observed) {
+        ;(
+          observer as ResizeObserver & { callback: ResizeObserverCallback }
+        ).callback(
+          [
+            {
+              target: panel,
+              contentRect: new DOMRectReadOnly(0, 0, 400, 500),
+              borderBoxSize: [],
+              contentBoxSize: [],
+              devicePixelContentBoxSize: [],
+            },
+          ],
+          observer,
+        )
+      }
+    }
+    expect(firstState.panelWidth()).toBe(400)
+    expect(secondState.panelWidth()).toBe(1000)
+  })
+
+  describe.each(['full', 'embedded'] as const)(
+    '%s instance isolation',
+    (mode) => {
+      function mount(client = queryClient, manager = onlineManager) {
+        return mode === 'full'
+          ? renderDevtools({
+              client,
+              onlineManager: manager,
+              initialIsOpen: true,
+            })
+          : render(() => (
+              <DevtoolsPanelComponent
+                client={client}
+                onlineManager={manager}
+                queryFlavor="TanStack Query"
+                version="5"
+              />
+            ))
+      }
+      it('keeps cache notifications and cleanup independent for the same query key', () => {
+        const secondClient = new QueryClient()
+        queryClient.setQueryData(['shared-key'], 'first-data')
+        secondClient.setQueryData(['shared-key'], 'second-data')
+        const firstRender = mount()
+        const secondRender = mount(secondClient)
+        const first = within(firstRender.container)
+        const second = within(secondRender.container)
+        fireEvent.click(first.getByLabelText('Query key ["shared-key"]'))
+        fireEvent.click(second.getByLabelText('Query key ["shared-key"]'))
+
+        secondClient.setQueryData(['shared-key'], 'updated-second')
+        expect(first.getByDisplayValue('first-data')).toBeInTheDocument()
+        expect(
+          first.queryByDisplayValue('updated-second'),
+        ).not.toBeInTheDocument()
+        expect(second.getByDisplayValue('updated-second')).toBeInTheDocument()
+
+        secondRender.unmount()
+        queryClient.setQueryData(['shared-key'], 'updated-first')
+        expect(first.getByDisplayValue('updated-first')).toBeInTheDocument()
+        secondClient.clear()
+      })
+
+      it('keeps mutation selection, notifications, and cleanup independent', async () => {
+        const secondClient = new QueryClient()
+        const firstMutation = queryClient
+          .getMutationCache()
+          .build(queryClient, {
+            mutationKey: ['mutation-a'],
+            mutationFn: () => Promise.resolve('first-result'),
+          })
+        const secondMutation = secondClient
+          .getMutationCache()
+          .build(secondClient, {
+            mutationKey: ['mutation-b'],
+            mutationFn: () => Promise.resolve('second-result'),
+          })
+        const firstRender = mount()
+        const secondRender = mount(secondClient)
+        const first = within(firstRender.container)
+        const second = within(secondRender.container)
+        fireEvent.click(first.getByText('Mutations'))
+        fireEvent.click(second.getByText('Mutations'))
+        await firstMutation.execute({})
+        await secondMutation.execute({})
+        await vi.advanceTimersByTimeAsync(0)
+        fireEvent.click(first.getByLabelText(/Mutation submitted at/))
+        expect(second.queryByText('Mutation Details')).not.toBeInTheDocument()
+        fireEvent.click(second.getByLabelText(/Mutation submitted at/))
+        expect(first.getByText('Mutation Details')).toBeInTheDocument()
+        expect(second.getByText('Mutation Details')).toBeInTheDocument()
+        await secondMutation.execute({})
+        await vi.advanceTimersByTimeAsync(0)
+        expect(firstRender.container).toHaveTextContent('first-result')
+        expect(firstRender.container).not.toHaveTextContent('second-result')
+        secondRender.unmount()
+        await firstMutation.execute({})
+        await vi.advanceTimersByTimeAsync(0)
+        expect(first.getByText('Mutation Details')).toBeInTheDocument()
+        secondClient.clear()
+      })
+
+      it('keeps offline indicators independent for different online managers', () => {
+        const Manager =
+          onlineManager.constructor as new () => typeof onlineManager
+        const firstManager = new Manager()
+        const secondManager = new Manager()
+        firstManager.setOnline(false)
+        const firstRender = mount(queryClient, firstManager)
+        const secondRender = mount(queryClient, secondManager)
+        const first = within(firstRender.container)
+        const second = within(secondRender.container)
+        expect(
+          first.getByLabelText('Unset offline mocking behavior'),
+        ).toHaveAttribute('aria-pressed', 'true')
+        expect(second.getByLabelText('Mock offline behavior')).toHaveAttribute(
+          'aria-pressed',
+          'false',
+        )
+        firstManager.setOnline(true)
+        expect(first.getByLabelText('Mock offline behavior')).toHaveAttribute(
+          'aria-pressed',
+          'false',
+        )
+        secondRender.unmount()
+      })
+
+      it('reflects the supplied online manager in both instances', () => {
+        const firstRender = mount()
+        const secondRender = mount()
+        const first = within(firstRender.container)
+        const second = within(secondRender.container)
+        fireEvent.click(first.getByLabelText('Mock offline behavior'))
+        expect(
+          first.getByLabelText('Unset offline mocking behavior'),
+        ).toHaveAttribute('aria-pressed', 'true')
+        expect(
+          second.getByLabelText('Unset offline mocking behavior'),
+        ).toHaveAttribute('aria-pressed', 'true')
+        secondRender.unmount()
+        onlineManager.setOnline(true)
+        expect(first.getByLabelText('Mock offline behavior')).toHaveAttribute(
+          'aria-pressed',
+          'false',
+        )
+      })
+
+      it('switches cache subscriptions when the client changes', () => {
+        const secondClient = new QueryClient()
+        queryClient.setQueryData(['switch-key'], 'old-client')
+        secondClient.setQueryData(['switch-key'], 'new-client')
+        const [client, setClient] = createSignal(queryClient)
+        const Component =
+          mode === 'full' ? DevtoolsComponent : DevtoolsPanelComponent
+        const rendered = render(() => (
+          <Component
+            client={client()}
+            onlineManager={onlineManager}
+            queryFlavor="TanStack Query"
+            version="5"
+            initialIsOpen
+          />
+        ))
+        const panel = within(rendered.container)
+        fireEvent.click(panel.getByLabelText('Query key ["switch-key"]'))
+        expect(panel.getByDisplayValue('old-client')).toBeInTheDocument()
+        setClient(secondClient)
+        expect(panel.getByDisplayValue('new-client')).toBeInTheDocument()
+        secondClient.setQueryData(['switch-key'], 'new-update')
+        expect(panel.getByDisplayValue('new-update')).toBeInTheDocument()
+        queryClient.setQueryData(['switch-key'], 'old-update')
+        expect(panel.getByDisplayValue('new-update')).toBeInTheDocument()
+        rendered.unmount()
+        secondClient.clear()
+      })
+
+      it('keeps query selection independent between clients', () => {
+        const secondClient = new QueryClient()
+        queryClient.setQueryData(['isolation-a'], 'a')
+        secondClient.setQueryData(['isolation-b'], 'b')
+        const first = within(mount().container)
+        const secondRender = mount(secondClient)
+        const second = within(secondRender.container)
+
+        fireEvent.click(first.getByLabelText('Query key ["isolation-a"]'))
+        expect(first.getByText('Query Details')).toBeInTheDocument()
+        expect(second.queryByText('Query Details')).not.toBeInTheDocument()
+
+        fireEvent.click(second.getByLabelText('Query key ["isolation-b"]'))
+        expect(second.getByText('Query Details')).toBeInTheDocument()
+        expect(first.getByText('Query Details')).toBeInTheDocument()
+        secondRender.unmount()
+        secondClient.clear()
+      })
+    },
+  )
+
   describe('initial state', () => {
     it('should render the open devtools button', () => {
       const rendered = renderDevtools()
diff --git a/packages/query-devtools/src/__tests__/createCacheSubscriptionRegistry.test.ts b/packages/query-devtools/src/__tests__/createCacheSubscriptionRegistry.test.ts
new file mode 100644
index 00000000000..f87045684c2
--- /dev/null
+++ b/packages/query-devtools/src/__tests__/createCacheSubscriptionRegistry.test.ts
@@ -0,0 +1,38 @@
+import { expect, it } from 'vitest'
+import { createRoot, createSignal } from 'solid-js'
+import { createCacheSubscriptionRegistry } from '../createCacheSubscriptionRegistry'
+
+it('skips disposed subscriptions without dropping other queued updates', () => {
+  const registry = createCacheSubscriptionRegistry<number, undefined>()
+  const queued: Array<() => void> = []
+  const [firstValue, setFirstValue] = createSignal(0)
+  const [secondValue, setSecondValue] = createSignal(0)
+  const firstDispose = createRoot((dispose) => {
+    registry.register((cache) => cache(), setFirstValue)
+    return dispose
+  })
+  const secondDispose = createRoot((dispose) => {
+    registry.register((cache) => cache(), setSecondValue)
+    return dispose
+  })
+
+  try {
+    registry.notify(
+      () => 1,
+      undefined,
+      (update) => queued.push(update),
+    )
+    firstDispose()
+    queued.forEach((update) => update())
+
+    expect(firstValue()).toBe(0)
+    expect(secondValue()).toBe(1)
+
+    registry.notify(() => 2, undefined)
+    expect(firstValue()).toBe(0)
+    expect(secondValue()).toBe(2)
+  } finally {
+    firstDispose()
+    secondDispose()
+  }
+})
diff --git a/packages/query-devtools/src/contexts/DevtoolsOfflineContext.ts b/packages/query-devtools/src/contexts/DevtoolsOfflineContext.ts
new file mode 100644
index 00000000000..3447afee7c1
--- /dev/null
+++ b/packages/query-devtools/src/contexts/DevtoolsOfflineContext.ts
@@ -0,0 +1,10 @@
+import { createContext, useContext } from 'solid-js'
+import type { DevtoolsOfflineState } from './types'
+
+export const DevtoolsOfflineContext = createContext<DevtoolsOfflineState>()
+
+export function useDevtoolsOffline() {
+  const state = useContext(DevtoolsOfflineContext)
+  if (!state) throw new Error('Missing DevtoolsOfflineProvider')
+  return state
+}
diff --git a/packages/query-devtools/src/contexts/DevtoolsStateContext.ts b/packages/query-devtools/src/contexts/DevtoolsStateContext.ts
new file mode 100644
index 00000000000..33490a27feb
--- /dev/null
+++ b/packages/query-devtools/src/contexts/DevtoolsStateContext.ts
@@ -0,0 +1,10 @@
+import { createContext, useContext } from 'solid-js'
+import type { DevtoolsState } from './types'
+
+export const DevtoolsStateContext = createContext<DevtoolsState>()
+
+export function useDevtoolsState() {
+  const state = useContext(DevtoolsStateContext)
+  if (!state) throw new Error('Missing DevtoolsStateProvider')
+  return state
+}
diff --git a/packages/query-devtools/src/contexts/DevtoolsSubscriptionsContext.ts b/packages/query-devtools/src/contexts/DevtoolsSubscriptionsContext.ts
new file mode 100644
index 00000000000..2c5308ce2a2
--- /dev/null
+++ b/packages/query-devtools/src/contexts/DevtoolsSubscriptionsContext.ts
@@ -0,0 +1,11 @@
+import { createContext, useContext } from 'solid-js'
+import type { DevtoolsSubscriptions } from './types'
+
+export const DevtoolsSubscriptionsContext =
+  createContext<DevtoolsSubscriptions>()
+
+export function useDevtoolsSubscriptions() {
+  const subscriptions = useContext(DevtoolsSubscriptionsContext)
+  if (!subscriptions) throw new Error('Missing DevtoolsSubscriptionsProvider')
+  return subscriptions
+}
diff --git a/packages/query-devtools/src/contexts/types.ts b/packages/query-devtools/src/contexts/types.ts
index a4596cdb089..818ead8fbf5 100644
--- a/packages/query-devtools/src/contexts/types.ts
+++ b/packages/query-devtools/src/contexts/types.ts
@@ -1,4 +1,14 @@
-import type { Query, QueryClient, onlineManager } from '@tanstack/query-core'
+import type {
+  MutationCache,
+  MutationCacheNotifyEvent,
+  Query,
+  QueryCache,
+  QueryCacheNotifyEvent,
+  QueryClient,
+  onlineManager,
+} from '@tanstack/query-core'
+import type { Accessor, Setter } from 'solid-js'
+import type { createCacheSubscriptionRegistry } from '../createCacheSubscriptionRegistry'
 
 type XPosition = 'left' | 'right'
 type YPosition = 'top' | 'bottom'
@@ -33,3 +43,29 @@ export interface QueryDevtoolsProps {
   hideDisabledQueries?: boolean
   theme?: Theme
 }
+
+export interface DevtoolsState {
+  selectedQueryHash: Accessor<string | null>
+  setSelectedQueryHash: Setter<string | null>
+  selectedMutationId: Accessor<number | null>
+  setSelectedMutationId: Setter<number | null>
+  panelWidth: Accessor<number>
+  setPanelWidth: Setter<number>
+}
+
+export interface DevtoolsSubscriptions {
+  queryCacheSubscriptions: ReturnType<
+    typeof createCacheSubscriptionRegistry<QueryCache, QueryCacheNotifyEvent>
+  >
+  mutationCacheSubscriptions: ReturnType<
+    typeof createCacheSubscriptionRegistry<
+      MutationCache,
+      MutationCacheNotifyEvent
+    >
+  >
+}
+
+export interface DevtoolsOfflineState {
+  offline: Accessor<boolean>
+  toggleOffline: () => void
+}
diff --git a/packages/query-devtools/src/createCacheSubscriptionRegistry.ts b/packages/query-devtools/src/createCacheSubscriptionRegistry.ts
new file mode 100644
index 00000000000..8ad6b7b1248
--- /dev/null
+++ b/packages/query-devtools/src/createCacheSubscriptionRegistry.ts
@@ -0,0 +1,40 @@
+import { onCleanup } from 'solid-js'
+import type { Accessor, Setter } from 'solid-js'
+
+export function createCacheSubscriptionRegistry<TCache, TEvent>() {
+  const subscriptions = new Map<
+    symbol,
+    {
+      shouldUpdate: (event: TEvent) => boolean
+      update: (cache: Accessor<TCache>) => void
+    }
+  >()
+
+  function register<T>(
+    callback: (cache: Accessor<TCache>) => Exclude<T, Function>,
+    setter: Setter<T>,
+    shouldUpdate: (event: TEvent) => boolean = () => true,
+  ) {
+    const id = Symbol()
+    subscriptions.set(id, {
+      shouldUpdate,
+      update: (cache) => setter(callback(cache)),
+    })
+    onCleanup(() => subscriptions.delete(id))
+  }
+
+  function notify(
+    cache: Accessor<TCache>,
+    event: TEvent,
+    schedule: (update: () => void) => void = (update) => update(),
+  ) {
+    for (const [id, subscription] of subscriptions) {
+      if (!subscription.shouldUpdate(event)) continue
+      schedule(() => {
+        if (subscriptions.has(id)) subscription.update(cache)
+      })
+    }
+  }
+
+  return { register, notify }
+}
diff --git a/packages/query-devtools/src/providers/DevtoolsOfflineProvider.tsx b/packages/query-devtools/src/providers/DevtoolsOfflineProvider.tsx
new file mode 100644
index 00000000000..bef195d6135
--- /dev/null
+++ b/packages/query-devtools/src/providers/DevtoolsOfflineProvider.tsx
@@ -0,0 +1,31 @@
+import { createEffect, createSignal, onCleanup } from 'solid-js'
+import { useQueryDevtoolsContext } from '../contexts/QueryDevtoolsContext'
+import { DevtoolsOfflineContext } from '../contexts/DevtoolsOfflineContext'
+import type { DevtoolsOfflineState } from '../contexts/types'
+import type { ParentProps } from 'solid-js'
+
+export function DevtoolsOfflineProvider(props: ParentProps) {
+  const [offline, setOffline] = createSignal(false)
+  const context = useQueryDevtoolsContext()
+
+  createEffect(() => {
+    const manager = context.onlineManager
+    setOffline(!manager.isOnline())
+    const unsubscribe = manager.subscribe((online) => setOffline(!online))
+    onCleanup(unsubscribe)
+  })
+
+  const state: DevtoolsOfflineState = {
+    offline,
+    toggleOffline: () => {
+      const manager = context.onlineManager
+      manager.setOnline(!manager.isOnline())
+    },
+  }
+
+  return (
+    <DevtoolsOfflineContext.Provider value={state}>
+      {props.children}
+    </DevtoolsOfflineContext.Provider>
+  )
+}
diff --git a/packages/query-devtools/src/providers/DevtoolsStateProvider.tsx b/packages/query-devtools/src/providers/DevtoolsStateProvider.tsx
new file mode 100644
index 00000000000..e592024a84a
--- /dev/null
+++ b/packages/query-devtools/src/providers/DevtoolsStateProvider.tsx
@@ -0,0 +1,28 @@
+import { createSignal } from 'solid-js'
+import { DevtoolsStateContext } from '../contexts/DevtoolsStateContext'
+import type { DevtoolsState } from '../contexts/types'
+import type { ParentProps } from 'solid-js'
+
+export function DevtoolsStateProvider(props: ParentProps) {
+  const [selectedQueryHash, setSelectedQueryHash] = createSignal<string | null>(
+    null,
+  )
+  const [selectedMutationId, setSelectedMutationId] = createSignal<
+    number | null
+  >(null)
+  const [panelWidth, setPanelWidth] = createSignal(0)
+
+  const state: DevtoolsState = {
+    selectedQueryHash,
+    setSelectedQueryHash,
+    selectedMutationId,
+    setSelectedMutationId,
+    panelWidth,
+    setPanelWidth,
+  }
+  return (
+    <DevtoolsStateContext.Provider value={state}>
+      {props.children}
+    </DevtoolsStateContext.Provider>
+  )
+}
diff --git a/packages/query-devtools/src/providers/DevtoolsSubscriptionsProvider.tsx b/packages/query-devtools/src/providers/DevtoolsSubscriptionsProvider.tsx
new file mode 100644
index 00000000000..a31c773cefd
--- /dev/null
+++ b/packages/query-devtools/src/providers/DevtoolsSubscriptionsProvider.tsx
@@ -0,0 +1,30 @@
+import { createCacheSubscriptionRegistry } from '../createCacheSubscriptionRegistry'
+import { DevtoolsSubscriptionsContext } from '../contexts/DevtoolsSubscriptionsContext'
+import type {
+  MutationCache,
+  MutationCacheNotifyEvent,
+  QueryCache,
+  QueryCacheNotifyEvent,
+} from '@tanstack/query-core'
+import type { DevtoolsSubscriptions } from '../contexts/types'
+import type { ParentProps } from 'solid-js'
+
+export function DevtoolsSubscriptionsProvider(props: ParentProps) {
+  const queryCacheSubscriptions = createCacheSubscriptionRegistry<
+    QueryCache,
+    QueryCacheNotifyEvent
+  >()
+  const mutationCacheSubscriptions = createCacheSubscriptionRegistry<
+    MutationCache,
+    MutationCacheNotifyEvent
+  >()
+  const subscriptions: DevtoolsSubscriptions = {
+    queryCacheSubscriptions,
+    mutationCacheSubscriptions,
+  }
+  return (
+    <DevtoolsSubscriptionsContext.Provider value={subscriptions}>
+      {props.children}
+    </DevtoolsSubscriptionsContext.Provider>
+  )
+}