diff --git a/apps/zbugs/src/components/nav.tsx b/apps/zbugs/src/components/nav.tsx
index 0391ac8270..c0c60e8e45 100644
--- a/apps/zbugs/src/components/nav.tsx
+++ b/apps/zbugs/src/components/nav.tsx
@@ -3,7 +3,7 @@ import classNames from 'classnames';
 import {memo, useCallback, useEffect, useMemo, useState} from 'react';
 import {useRoute, useSearch} from 'wouter';
 import {navigate, useHistoryState} from 'wouter/use-browser-location';
-import {useQuery} from 'zero-react/src/use-query.js';
+import {useQuery, useZeroOnline} from '@rocicorp/zero/react';
 import logoURL from '../assets/images/logo.svg';
 import markURL from '../assets/images/mark.svg';
 import {useLogin} from '../hooks/use-login.tsx';
@@ -31,6 +31,7 @@ export const Nav = memo(() => {
       login.loginState?.decoded.sub ?? '',
     ),
   );
+  const isOnline = useZeroOnline();
 
   const [showIssueModal, setShowIssueModal] = useState(false);
 
@@ -116,45 +117,71 @@ export const Nav = memo(() => {
           ) : (
             user && (
               <div className="logged-in-user-container">
-                <div className="logged-in-user">
-                  {isMobile ? (
-                    <div className="mobile-login-container">
-                      <Button
-                        eventName="Toggle user options (mobile)"
-                        onAction={handleClick}
-                      >
-                        <AvatarImage
-                          user={user}
-                          className="issue-creator-avatar"
-                          title={user.login}
-                        />
-                      </Button>
-                      <div
-                        className={classNames('user-panel-mobile', {
-                          hidden: !showUserPanel, // Conditionally hide/show the panel
-                        })}
-                      >
+                {isOnline ? (
+                  <div className="logged-in-user">
+                    {isMobile ? (
+                      <div className="mobile-login-container">
                         <Button
-                          className="logout-button-mobile"
-                          eventName="Log out (mobile)"
-                          onAction={login.logout}
-                          title="Log out"
+                          eventName="Toggle user options (mobile)"
+                          onAction={handleClick}
                         >
-                          Log out
+                          <AvatarImage
+                            user={user}
+                            className="issue-creator-avatar"
+                            title={user.login}
+                          />
                         </Button>
+                        <div
+                          className={classNames('user-panel-mobile', {
+                            hidden: !showUserPanel, // Conditionally hide/show the panel
+                          })}
+                        >
+                          <Button
+                            className="logout-button-mobile"
+                            eventName="Log out (mobile)"
+                            onAction={login.logout}
+                            title="Log out"
+                          >
+                            Log out
+                          </Button>
+                        </div>
                       </div>
+                    ) : (
+                      <AvatarImage
+                        user={user}
+                        className="issue-creator-avatar"
+                        title={user.login}
+                      />
+                    )}
+                    <span className="logged-in-user-name">
+                      {login.loginState?.decoded.name}
+                    </span>
+                  </div>
+                ) : (
+                  <div className="offline-status-container">
+                    <div className="offline-status-pill">
+                      <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        width="16"
+                        height="16"
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        stroke="currentColor"
+                        strokeWidth="2"
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                      >
+                        <path d="m19 5 3-3" />
+                        <path d="m2 22 3-3" />
+                        <path d="M6.3 20.3a2.4 2.4 0 0 0 3.4 0L12 18l-6-6-2.3 2.3a2.4 2.4 0 0 0 0 3.4Z" />
+                        <path d="M7.5 13.5 10 11" />
+                        <path d="M10.5 16.5 13 14" />
+                        <path d="m12 6 6 6 2.3-2.3a2.4 2.4 0 0 0 0-3.4l-2.6-2.6a2.4 2.4 0 0 0-3.4 0Z" />
+                      </svg>
+                      <span>Offline</span>
                     </div>
-                  ) : (
-                    <AvatarImage
-                      user={user}
-                      className="issue-creator-avatar"
-                      title={user.login}
-                    />
-                  )}
-                  <span className="logged-in-user-name">
-                    {login.loginState?.decoded.name}
-                  </span>
-                </div>
+                  </div>
+                )}
                 <Button
                   className="logout-button"
                   eventName="Log out"
diff --git a/apps/zbugs/src/index.css b/apps/zbugs/src/index.css
index 8236ab8830..ac6bedb4ac 100644
--- a/apps/zbugs/src/index.css
+++ b/apps/zbugs/src/index.css
@@ -258,16 +258,37 @@ textarea.autoResize {
 .logged-in-user-container {
   display: flex;
   justify-content: space-between;
+  align-items: center;
 }
 
 .logged-in-user {
   flex: 0 0 auto;
+  display: flex;
+  align-items: center;
 }
 
 .logged-in-user-name {
   cursor: default;
 }
 
+.offline-status-container {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+.offline-status-pill {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding: 0.25rem 1rem;
+  border-color: var(--color-modal-outline);
+  border-width: 1px;
+  border-radius: 2rem;
+  font-size: var(--typo-label-size);
+  gap: 0.5rem;
+}
+
 .logout-button {
   display: block;
   height: 1.5rem;
diff --git a/packages/shared/src/subscribable.test.ts b/packages/shared/src/subscribable.test.ts
new file mode 100644
index 0000000000..469864d8b7
--- /dev/null
+++ b/packages/shared/src/subscribable.test.ts
@@ -0,0 +1,162 @@
+import {expect, test} from 'vitest';
+import {Subscribable} from './subscribable.ts';
+
+test('subscribe adds listener and returns unsubscribe function', () => {
+  const subscribable = new Subscribable<string>();
+  const listener = (_arg: string) => {};
+
+  const unsubscribe = subscribable.subscribe(listener);
+
+  expect(subscribable.hasListeners()).toBe(true);
+  expect(typeof unsubscribe).toBe('function');
+});
+
+test('unsubscribe function removes listener', () => {
+  const subscribable = new Subscribable<string>();
+  const listener = (_arg: string) => {};
+
+  const unsubscribe = subscribable.subscribe(listener);
+  expect(subscribable.hasListeners()).toBe(true);
+
+  unsubscribe();
+  expect(subscribable.hasListeners()).toBe(false);
+});
+
+test('notify calls all subscribed listeners with provided argument', () => {
+  const subscribable = new Subscribable<number>();
+  const results: number[] = [];
+
+  const listener1 = (arg: number) => results.push(arg * 2);
+  const listener2 = (arg: number) => results.push(arg * 3);
+
+  subscribable.subscribe(listener1);
+  subscribable.subscribe(listener2);
+
+  subscribable.notify(5);
+
+  expect(results).toEqual([10, 15]);
+});
+
+test('notify handles no listeners gracefully', () => {
+  const subscribable = new Subscribable<string>();
+
+  // Should not throw
+  expect(() => subscribable.notify('test')).not.toThrow();
+});
+
+test('hasListeners returns correct state', () => {
+  const subscribable = new Subscribable<boolean>();
+  const listener = (_arg: boolean) => {};
+
+  // Initially no listeners
+  expect(subscribable.hasListeners()).toBe(false);
+
+  // After subscribing
+  const unsubscribe = subscribable.subscribe(listener);
+  expect(subscribable.hasListeners()).toBe(true);
+
+  // After unsubscribing
+  unsubscribe();
+  expect(subscribable.hasListeners()).toBe(false);
+});
+
+test('cleanup removes all listeners', () => {
+  const subscribable = new Subscribable<string>();
+  const listener1 = (_arg: string) => {};
+  const listener2 = (_arg: string) => {};
+
+  subscribable.subscribe(listener1);
+  subscribable.subscribe(listener2);
+  expect(subscribable.hasListeners()).toBe(true);
+
+  subscribable.cleanup();
+  expect(subscribable.hasListeners()).toBe(false);
+});
+
+test('multiple subscriptions of same listener are handled correctly', () => {
+  const subscribable = new Subscribable<number>();
+  let callCount = 0;
+  const listener = (_arg: number) => {
+    callCount++;
+  };
+
+  const unsubscribe1 = subscribable.subscribe(listener);
+  const unsubscribe2 = subscribable.subscribe(listener);
+
+  subscribable.notify(1);
+  // Should only be called once since Set deduplicates
+  expect(callCount).toBe(1);
+
+  unsubscribe1();
+  expect(subscribable.hasListeners()).toBe(false);
+
+  // Second unsubscribe should be safe
+  unsubscribe2();
+  expect(subscribable.hasListeners()).toBe(false);
+});
+
+test('unsubscribing twice is safe', () => {
+  const subscribable = new Subscribable<string>();
+  const listener = (_arg: string) => {};
+
+  const unsubscribe = subscribable.subscribe(listener);
+
+  unsubscribe();
+  expect(subscribable.hasListeners()).toBe(false);
+
+  // Should not throw
+  expect(() => unsubscribe()).not.toThrow();
+  expect(subscribable.hasListeners()).toBe(false);
+});
+
+test('notifying after cleanup does not call listeners', () => {
+  const subscribable = new Subscribable<string>();
+  let called = false;
+  const listener = (_arg: string) => {
+    called = true;
+  };
+
+  subscribable.subscribe(listener);
+  subscribable.cleanup();
+  subscribable.notify('test');
+
+  expect(called).toBe(false);
+});
+
+test('listeners are called in order they were added', () => {
+  const subscribable = new Subscribable<number>();
+  const results: string[] = [];
+
+  const listener1 = (_arg: number) => results.push('first');
+  const listener2 = (_arg: number) => results.push('second');
+  const listener3 = (_arg: number) => results.push('third');
+
+  subscribable.subscribe(listener1);
+  subscribable.subscribe(listener2);
+  subscribable.subscribe(listener3);
+
+  subscribable.notify(1);
+
+  expect(results).toEqual(['first', 'second', 'third']);
+});
+
+test('supports complex argument types', () => {
+  interface TestData {
+    id: number;
+    name: string;
+    active: boolean;
+  }
+
+  const subscribable = new Subscribable<TestData>();
+  let receivedData: TestData | null = null;
+
+  const listener = (data: TestData) => {
+    receivedData = data;
+  };
+  subscribable.subscribe(listener);
+
+  const testData: TestData = {id: 1, name: 'test', active: true};
+  subscribable.notify(testData);
+
+  expect(receivedData).toEqual(testData);
+});
diff --git a/packages/shared/src/subscribable.ts b/packages/shared/src/subscribable.ts
new file mode 100644
index 0000000000..8d61606423
--- /dev/null
+++ b/packages/shared/src/subscribable.ts
@@ -0,0 +1,38 @@
+export class Subscribable<
+  TArgs,
+  TListener extends (obj: TArgs) => unknown = (obj: TArgs) => unknown,
+> {
+  protected _listeners = new Set<TListener>();
+
+  /**
+   * Subscribe to the subscribable.
+   *
+   * @param listener - The listener to subscribe to.
+   * @returns A function to unsubscribe from the subscribable.
+   */
+  subscribe = (listener: TListener): (() => void) => {
+    this._listeners.add(listener);
+
+    return () => {
+      this._listeners.delete(listener);
+    };
+  };
+
+  /**
+   * Notify all listeners.
+   *
+   * @param update - The update to notify listeners with.
+   */
+  notify = (update: TArgs): void => {
+    this._listeners.forEach(listener => listener(update));
+  };
+
+  hasListeners = (): boolean => this._listeners.size > 0;
+
+  /**
+   * Unsubscribe all listeners.
+   */
+  cleanup = (): void => {
+    this._listeners.clear();
+  };
+}
diff --git a/packages/zero-client/src/client/options.ts b/packages/zero-client/src/client/options.ts
index a3df737ddf..081eb3a8c7 100644
--- a/packages/zero-client/src/client/options.ts
+++ b/packages/zero-client/src/client/options.ts
@@ -118,6 +118,12 @@ export interface ZeroOptions<
 
   /**
    * `onOnlineChange` is called when the Zero instance's online status changes.
+   *
+   * @deprecated Use `onOnline` on the Zero instance instead. e.g.
+   * ```ts
+   * const zero = new Zero({...});
+   * zero.onOnline((online) => { ... });
+   * ```
    */
   onOnlineChange?: ((online: boolean) => void) | undefined;
 
diff --git a/packages/zero-client/src/client/zero.test.ts b/packages/zero-client/src/client/zero.test.ts
index 6993f44de5..601b0389a8 100644
--- a/packages/zero-client/src/client/zero.test.ts
+++ b/packages/zero-client/src/client/zero.test.ts
@@ -330,6 +330,71 @@ test('onOnlineChange callback', async () => {
   }
 });
 
+test('onOnline listener', async () => {
+  let online1 = 0;
+  let offline1 = 0;
+  let online2 = 0;
+  let offline2 = 0;
+
+  const z = zeroForTest({
+    logLevel: 'debug',
+  });
+
+  const unsubscribe1 = z.onOnline(online => {
+    if (online) {
+      online1++;
+    } else {
+      offline1++;
+    }
+  });
+
+  const unsubscribe2 = z.onOnline(online => {
+    if (online) {
+      online2++;
+    } else {
+      offline2++;
+    }
+  });
+
+  // Offline by default.
+  await vi.advanceTimersByTimeAsync(1);
+  expect(z.online).false;
+
+  // Connect: both listeners should be notified.
+  await z.waitForConnectionState(ConnectionState.Connecting);
+  await z.triggerConnected();
+  await z.waitForConnectionState(ConnectionState.Connected);
+  await vi.advanceTimersByTimeAsync(0);
+  expect(z.online).true;
+  expect(online1).toBe(1);
+  expect(offline1).toBe(0);
+  expect(online2).toBe(1);
+  expect(offline2).toBe(0);
+
+  // Unsubscribe the first listener and trigger an error to go offline.
+  unsubscribe1();
+  await z.triggerError(ErrorKind.InvalidMessage, 'oops');
+  await z.waitForConnectionState(ConnectionState.Disconnected);
+  await vi.advanceTimersByTimeAsync(0);
+  expect(z.online).false;
+  expect(online1).toBe(1);
+  expect(offline1).toBe(0);
+  expect(online2).toBe(1);
+  expect(offline2).toBe(1);
+
+  // Reconnect: only the second listener should be notified.
+  await tickAFewTimes(vi, RUN_LOOP_INTERVAL_MS);
+  await z.triggerConnected();
+  await vi.advanceTimersByTimeAsync(0);
+  expect(z.online).true;
+  expect(online1).toBe(1);
+  expect(offline1).toBe(0);
+  expect(online2).toBe(2);
+  expect(offline2).toBe(1);
+
+  unsubscribe2();
+});
+
 test('disconnects if ping fails', async () => {
   const watchdogInterval = RUN_LOOP_INTERVAL_MS;
   const pingTimeout = 5000;
diff --git a/packages/zero-client/src/client/zero.ts b/packages/zero-client/src/client/zero.ts
index 3cc0a78e57..774b0abc92 100644
--- a/packages/zero-client/src/client/zero.ts
+++ b/packages/zero-client/src/client/zero.ts
@@ -145,6 +145,7 @@ import {version} from './version.ts';
 import {ZeroLogContext} from './zero-log-context.ts';
 import {PokeHandler} from './zero-poke-handler.ts';
 import {ZeroRep} from './zero-rep.ts';
+import {Subscribable} from '../../../shared/src/subscribable.ts';
 
 type ConnectionState = Enum<typeof ConnectionState>;
 type PingResult = Enum<typeof PingResult>;
@@ -328,9 +329,8 @@ export class Zero<
 
   #onPong: () => void = () => undefined;
 
-  #online = false;
+  readonly #onlineManager: OnlineManager;
 
-  readonly #onOnlineChange: ((online: boolean) => void) | undefined;
   readonly #onUpdateNeeded: (
     reason: UpdateNeededReason,
     serverErrorMsg?: string,
@@ -455,7 +455,12 @@ export class Zero<
       );
     }
 
-    this.#onOnlineChange = onOnlineChange;
+    this.#onlineManager = new OnlineManager();
+
+    if (onOnlineChange) {
+      this.#onlineManager.subscribe(onOnlineChange);
+    }
+
     this.#options = options;
 
     this.#logOptions = this.#createLogOptions({
@@ -904,6 +909,8 @@ export class Zero<
 
     lc.debug?.('Closing Zero instance. Stack:', new Error().stack);
 
+    this.#onlineManager.cleanup();
+
     if (this.#connectionState !== ConnectionState.Disconnected) {
       this.#disconnect(
         lc,
@@ -1802,12 +1809,7 @@ export class Zero<
   }
 
   #setOnline(online: boolean): void {
-    if (this.#online === online) {
-      return;
-    }
-
-    this.#online = online;
-    this.#onOnlineChange?.(online);
+    this.#onlineManager.setOnline(online);
   }
 
   /**
@@ -1815,9 +1817,20 @@ export class Zero<
    * authenticated.
    */
   get online(): boolean {
-    return this.#online;
+    return this.#onlineManager.online;
   }
 
+  /**
+   * Subscribe to online status changes.
+   *
+   * This is useful when you want to update state based on the online status.
+   *
+   * @param listener - The listener to subscribe to.
+   * @returns A function to unsubscribe the listener.
+   */
+  onOnline = (listener: (online: boolean) => void): (() => void) =>
+    this.#onlineManager.subscribe(listener);
+
   /**
    * Starts a ping and waits for a pong.
    *
@@ -1939,6 +1952,22 @@ export class Zero<
   }
 }
 
+export class OnlineManager extends Subscribable<boolean> {
+  #online = false;
+
+  setOnline(online: boolean): void {
+    if (this.#online === online) {
+      return;
+    }
+    this.#online = online;
+    this.notify(online);
+  }
+
+  get online(): boolean {
+    return this.#online;
+  }
+}
+
 export async function createSocket(
   rep: ReplicacheImpl,
   queryManager: QueryManager,
diff --git a/packages/zero-react/src/mod.ts b/packages/zero-react/src/mod.ts
index 06dd196ca6..9adab23af0 100644
--- a/packages/zero-react/src/mod.ts
+++ b/packages/zero-react/src/mod.ts
@@ -16,3 +16,4 @@ export {
   type UseQueryOptions,
 } from './use-query.tsx';
 export {createUseZero, useZero, ZeroProvider} from './zero-provider.tsx';
+export {useZeroOnline} from './use-zero-online.tsx';
diff --git a/packages/zero-react/src/use-zero-online.tsx b/packages/zero-react/src/use-zero-online.tsx
new file mode 100644
index 0000000000..e1bd3e0e71
--- /dev/null
+++ b/packages/zero-react/src/use-zero-online.tsx
@@ -0,0 +1,18 @@
+import {useSyncExternalStore} from 'react';
+import {useZero} from './zero-provider.tsx';
+
+/**
+ * Hook to subscribe to the online status of the Zero instance.
+ *
+ * This is useful when you want to update state based on the online status.
+ *
+ * @returns The online status of the Zero instance.
+ */
+export function useZeroOnline(): boolean {
+  const zero = useZero();
+  return useSyncExternalStore(
+    zero.onOnline,
+    () => zero.online,
+    () => zero.online,
+  );
+}
diff --git a/packages/zero-solid/src/mod.ts b/packages/zero-solid/src/mod.ts
index 977f97f2bb..7fd3c39807 100644
--- a/packages/zero-solid/src/mod.ts
+++ b/packages/zero-solid/src/mod.ts
@@ -5,3 +5,4 @@ export {
   useQuery,
 } from './use-query.ts';
 export {createUseZero, createZero, useZero, ZeroProvider} from './use-zero.ts';
+export {useZeroOnline} from './use-zero-online.ts';
diff --git a/packages/zero-solid/src/use-zero-online.ts b/packages/zero-solid/src/use-zero-online.ts
new file mode 100644
index 0000000000..26a6fb3660
--- /dev/null
+++ b/packages/zero-solid/src/use-zero-online.ts
@@ -0,0 +1,26 @@
+import {createSignal, onCleanup, type Accessor} from 'solid-js';
+import {useZero} from './use-zero.ts';
+
+/**
+ * Tracks the online status of the current Zero instance.
+ *
+ * @returns An accessor — call `online()` to get a reactive `boolean`.
+ *
+ * @example
+ * const online = useZeroOnline();
+ *
+ * <span>
+ *   {online() ? 'Online' : 'Offline'}
+ * </span>
+ */
+export function useZeroOnline(): Accessor<boolean> {
+  const zero = useZero()();
+
+  const [online, setOnline] = createSignal<boolean>(zero?.online ?? false);
+
+  const unsubscribe = zero?.onOnline(setOnline);
+
+  onCleanup(unsubscribe ?? (() => {}));
+
+  return online;
+}