diff --git a/frontend/locales/en.json b/frontend/locales/en.json
index adeb55d7b..a1a757159 100644
--- a/frontend/locales/en.json
+++ b/frontend/locales/en.json
@@ -39,7 +39,6 @@
       }
     },
     "app_sessions_list": {
-      "error": "Failed to load app sessions",
       "heading": "Apps"
     },
     "browser_session_details": {
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index eb1963cb5..4bd99c454 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -34,7 +34,8 @@
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-i18next": "^14.0.5",
-        "ua-parser-js": "^1.0.37"
+        "ua-parser-js": "^1.0.37",
+        "urql": "^4.0.6"
       },
       "devDependencies": {
         "@graphql-codegen/cli": "^5.0.2",
@@ -23549,6 +23550,18 @@
       "integrity": "sha512-Qp95D4TPJl1kC9SKigDcqgyM2VDVO4RiJc2d4qe5GrYm+zbIQCWWKAFaJNQ4BhdFeDGwBmAxqJBwWSJDb9T3BQ==",
       "dev": true
     },
+    "node_modules/urql": {
+      "version": "4.0.6",
+      "resolved": "https://registry.npmjs.org/urql/-/urql-4.0.6.tgz",
+      "integrity": "sha512-meXJ2puOd64uCGKh7Fse2R7gPa8+ZpBOoA62jN7CPXXUt7SVZSdeXWSpB3HvlfzLUkEqsWbvshwrgeWRYNNGaQ==",
+      "dependencies": {
+        "@urql/core": "^4.2.0",
+        "wonka": "^6.3.2"
+      },
+      "peerDependencies": {
+        "react": ">= 16.8.0"
+      }
+    },
     "node_modules/use-callback-ref": {
       "version": "1.3.1",
       "resolved": "https://registry.npmjs.org/use-callback-ref/-/use-callback-ref-1.3.1.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index 548526af7..975e6ba00 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -38,11 +38,11 @@
     "jotai": "^2.6.4",
     "jotai-devtools": "^0.7.1",
     "jotai-location": "^0.5.2",
-    "jotai-urql": "^0.7.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-i18next": "^14.0.5",
-    "ua-parser-js": "^1.0.37"
+    "ua-parser-js": "^1.0.37",
+    "urql": "^4.0.6"
   },
   "devDependencies": {
     "@graphql-codegen/cli": "^5.0.2",
diff --git a/frontend/src/atoms.ts b/frontend/src/atoms.ts
index 7ecef58af..e69de29bb 100644
--- a/frontend/src/atoms.ts
+++ b/frontend/src/atoms.ts
@@ -1,123 +0,0 @@
-// Copyright 2023 The Matrix.org Foundation C.I.C.
-//
-// Licensed under the Apache License, Version 2.0 (the "License");
-// you may not use this file except in compliance with the License.
-// You may obtain a copy of the License at
-//
-//     http://www.apache.org/licenses/LICENSE-2.0
-//
-// Unless required by applicable law or agreed to in writing, software
-// distributed under the License is distributed on an "AS IS" BASIS,
-// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-// See the License for the specific language governing permissions and
-// limitations under the License.
-
-import { AnyVariables, CombinedError, OperationContext } from "@urql/core";
-import { atom, WritableAtom } from "jotai";
-import { useHydrateAtoms } from "jotai/utils";
-import { AtomWithQuery, atomWithQuery, clientAtom } from "jotai-urql";
-import type { ReactElement } from "react";
-
-import { graphql } from "./gql";
-import { client } from "./graphql";
-import { err, ok, Result } from "./result";
-
-export type GqlResult<T> = Result<T, CombinedError>;
-export type GqlAtom<T> = WritableAtom<
-  Promise<GqlResult<T>>,
-  [context?: Partial<OperationContext>],
-  void
->;
-
-/**
- * Map the result of a query atom to a new value, making it a GqlResult
- *
- * @param queryAtom: An atom got from atomWithQuery
- * @param mapper: A function that takes the data from the query and returns a new value
- */
-export const mapQueryAtom = <Data, Variables extends AnyVariables, NewData>(
-  queryAtom: AtomWithQuery<Data, Variables>,
-  mapper: (data: Data) => NewData,
-): GqlAtom<NewData> => {
-  return atom(
-    async (get): Promise<GqlResult<NewData>> => {
-      const result = await get(queryAtom);
-      if (result.error) {
-        return err(result.error);
-      }
-
-      if (result.data === undefined) {
-        throw new Error("Query result is undefined");
-      }
-
-      return ok(mapper(result.data));
-    },
-
-    (_get, set, context) => {
-      set(queryAtom, context);
-    },
-  );
-};
-
-export const HydrateAtoms: React.FC<{ children: ReactElement }> = ({
-  children,
-}) => {
-  useHydrateAtoms([[clientAtom, client]]);
-  return children;
-};
-
-const CURRENT_VIEWER_QUERY = graphql(/* GraphQL */ `
-  query CurrentViewerQuery {
-    viewer {
-      __typename
-      ... on User {
-        id
-      }
-
-      ... on Anonymous {
-        id
-      }
-    }
-  }
-`);
-
-const currentViewerAtom = atomWithQuery({ query: CURRENT_VIEWER_QUERY });
-
-export const currentUserIdAtom: GqlAtom<string | null> = mapQueryAtom(
-  currentViewerAtom,
-  (data) => {
-    if (data.viewer.__typename === "User") {
-      return data.viewer.id;
-    }
-    return null;
-  },
-);
-
-const CURRENT_VIEWER_SESSION_QUERY = graphql(/* GraphQL */ `
-  query CurrentViewerSessionQuery {
-    viewerSession {
-      __typename
-      ... on BrowserSession {
-        id
-      }
-
-      ... on Anonymous {
-        id
-      }
-    }
-  }
-`);
-
-const currentViewerSessionAtom = atomWithQuery({
-  query: CURRENT_VIEWER_SESSION_QUERY,
-});
-
-export const currentBrowserSessionIdAtom: GqlAtom<string | null> = mapQueryAtom(
-  currentViewerSessionAtom,
-  (data) => {
-    if (data.viewerSession.__typename === "BrowserSession") {
-      return data.viewerSession.id;
-    }
-    return null;
-  },
-);
diff --git a/frontend/src/components/BrowserSession.tsx b/frontend/src/components/BrowserSession.tsx
index 79e996208..8d0e3884b 100644
--- a/frontend/src/components/BrowserSession.tsx
+++ b/frontend/src/components/BrowserSession.tsx
@@ -13,12 +13,9 @@
 // limitations under the License.
 
 import { parseISO } from "date-fns";
-import { atom, useSetAtom } from "jotai";
-import { atomFamily } from "jotai/utils";
-import { atomWithMutation } from "jotai-urql";
 import { useCallback } from "react";
+import { useMutation } from "urql";
 
-import { currentBrowserSessionIdAtom, currentUserIdAtom } from "../atoms";
 import { FragmentType, graphql, useFragment } from "../gql";
 import {
   parseUserAgent,
@@ -56,39 +53,18 @@ const END_SESSION_MUTATION = graphql(/* GraphQL */ `
   }
 `);
 
-export const endBrowserSessionFamily = atomFamily((id: string) => {
-  const endSession = atomWithMutation(END_SESSION_MUTATION);
-
-  // A proxy atom which pre-sets the id variable in the mutation
-  const endSessionAtom = atom(
-    (get) => get(endSession),
-    (get, set) => set(endSession, { id }),
-  );
-
-  return endSessionAtom;
-});
-
 export const useEndBrowserSession = (
   sessionId: string,
   isCurrent: boolean,
 ): (() => Promise<void>) => {
-  const endSession = useSetAtom(endBrowserSessionFamily(sessionId));
-
-  // Pull those atoms to reset them when the current session is ended
-  const currentUserId = useSetAtom(currentUserIdAtom);
-  const currentBrowserSessionId = useSetAtom(currentBrowserSessionIdAtom);
+  const [, endSession] = useMutation(END_SESSION_MUTATION);
 
   const onSessionEnd = useCallback(async (): Promise<void> => {
-    await endSession();
+    await endSession({ id: sessionId });
     if (isCurrent) {
-      currentBrowserSessionId({
-        requestPolicy: "network-only",
-      });
-      currentUserId({
-        requestPolicy: "network-only",
-      });
+      window.location.reload();
     }
-  }, [isCurrent, endSession, currentBrowserSessionId, currentUserId]);
+  }, [isCurrent, endSession, sessionId]);
 
   return onSessionEnd;
 };
diff --git a/frontend/src/components/BrowserSessionList.tsx b/frontend/src/components/BrowserSessionList.tsx
index d659f8c1b..fb688e34f 100644
--- a/frontend/src/components/BrowserSessionList.tsx
+++ b/frontend/src/components/BrowserSessionList.tsx
@@ -12,21 +12,12 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { atom, useAtom, useAtomValue, useSetAtom } from "jotai";
-import { atomFamily } from "jotai/utils";
-import { atomWithQuery } from "jotai-urql";
-import { useTransition } from "react";
+import { useState, useTransition } from "react";
+import { useQuery } from "urql";
 
-import { mapQueryAtom } from "../atoms";
 import { graphql } from "../gql";
-import { SessionState, PageInfo } from "../gql/graphql";
-import {
-  atomForCurrentPagination,
-  atomWithPagination,
-  FIRST_PAGE,
-  Pagination,
-} from "../pagination";
-import { isOk, unwrap, unwrapOk } from "../result";
+import { SessionState } from "../gql/graphql";
+import { FIRST_PAGE, Pagination, usePages, usePagination } from "../pagination";
 
 import BlockList from "./BlockList";
 import BrowserSession from "./BrowserSession";
@@ -72,52 +63,22 @@ const QUERY = graphql(/* GraphQL */ `
   }
 `);
 
-const filterAtom = atom<SessionState | null>(SessionState.Active);
-const currentPaginationAtom = atomForCurrentPagination();
-
-const browserSessionListFamily = atomFamily((userId: string) => {
-  const browserSessionListQuery = atomWithQuery({
-    query: QUERY,
-    getVariables: (get) => ({
-      userId,
-      state: get(filterAtom),
-      ...get(currentPaginationAtom),
-    }),
-  });
-
-  const browserSessionList = mapQueryAtom(
-    browserSessionListQuery,
-    (data) => data.user?.browserSessions || null,
+const BrowserSessionList: React.FC<{ userId: string }> = ({ userId }) => {
+  const [pagination, setPagination] = usePagination();
+  const [pending, startTransition] = useTransition();
+  const [filter, setFilter] = useState<SessionState | null>(
+    SessionState.Active,
   );
-
-  return browserSessionList;
-});
-
-const pageInfoFamily = atomFamily((userId: string) => {
-  const pageInfoAtom = atom(async (get): Promise<PageInfo | null> => {
-    const result = await get(browserSessionListFamily(userId));
-    return (isOk(result) && unwrapOk(result)?.pageInfo) || null;
+  const [result] = useQuery({
+    query: QUERY,
+    variables: { userId, state: filter, ...pagination },
   });
-  return pageInfoAtom;
-});
-
-const paginationFamily = atomFamily((userId: string) => {
-  const paginationAtom = atomWithPagination(
-    currentPaginationAtom,
-    pageInfoFamily(userId),
-  );
+  if (result.error) throw result.error;
+  const browserSessions = result.data?.user?.browserSessions;
+  if (!browserSessions) throw new Error(); // Suspense mode is enabled
 
-  return paginationAtom;
-});
-
-const BrowserSessionList: React.FC<{ userId: string }> = ({ userId }) => {
-  const [pending, startTransition] = useTransition();
-  const result = useAtomValue(browserSessionListFamily(userId));
-  const setPagination = useSetAtom(currentPaginationAtom);
-  const [prevPage, nextPage] = useAtomValue(paginationFamily(userId));
-  const [filter, setFilter] = useAtom(filterAtom);
+  const [prevPage, nextPage] = usePages(pagination, browserSessions.pageInfo);
 
-  const browserSessions = unwrap(result);
   if (browserSessions === null) return <>Failed to load browser sessions</>;
 
   const paginate = (pagination: Pagination): void => {
@@ -145,6 +106,7 @@ const BrowserSessionList: React.FC<{ userId: string }> = ({ userId }) => {
       <label>
         <input
           type="checkbox"
+          disabled={pending}
           checked={filter === SessionState.Active}
           onChange={toggleFilter}
         />{" "}
diff --git a/frontend/src/components/CompatSession.test.tsx b/frontend/src/components/CompatSession.test.tsx
index 1526c1368..ce8721f2a 100644
--- a/frontend/src/components/CompatSession.test.tsx
+++ b/frontend/src/components/CompatSession.test.tsx
@@ -15,7 +15,9 @@
 // @vitest-environment happy-dom
 
 import { create } from "react-test-renderer";
+import { Provider } from "urql";
 import { describe, expect, it, beforeAll } from "vitest";
+import { never } from "wonka";
 
 import { makeFragmentData } from "../gql";
 import { WithLocation } from "../test-utils/WithLocation";
@@ -24,6 +26,10 @@ import { mockLocale } from "../test-utils/mockLocale";
 import CompatSession, { FRAGMENT } from "./CompatSession";
 
 describe("<CompatSession />", () => {
+  const mockClient = {
+    executeQuery: (): typeof never => never,
+  };
+
   const baseSession = {
     id: "session-id",
     deviceId: "abcd1234",
@@ -42,9 +48,11 @@ describe("<CompatSession />", () => {
   it("renders an active session", () => {
     const session = makeFragmentData(baseSession, FRAGMENT);
     const component = create(
-      <WithLocation>
-        <CompatSession session={session} />
-      </WithLocation>,
+      <Provider value={mockClient}>
+        <WithLocation>
+          <CompatSession session={session} />
+        </WithLocation>
+      </Provider>,
     );
     expect(component.toJSON()).toMatchSnapshot();
   });
@@ -58,9 +66,11 @@ describe("<CompatSession />", () => {
       FRAGMENT,
     );
     const component = create(
-      <WithLocation>
-        <CompatSession session={session} />
-      </WithLocation>,
+      <Provider value={mockClient}>
+        <WithLocation>
+          <CompatSession session={session} />
+        </WithLocation>
+      </Provider>,
     );
     expect(component.toJSON()).toMatchSnapshot();
   });
diff --git a/frontend/src/components/CompatSession.tsx b/frontend/src/components/CompatSession.tsx
index c831e3b63..47e1b4fe8 100644
--- a/frontend/src/components/CompatSession.tsx
+++ b/frontend/src/components/CompatSession.tsx
@@ -13,9 +13,7 @@
 // limitations under the License.
 
 import { parseISO } from "date-fns";
-import { atom, useSetAtom } from "jotai";
-import { atomFamily } from "jotai/utils";
-import { atomWithMutation } from "jotai-urql";
+import { useMutation } from "urql";
 
 import { FragmentType, graphql, useFragment } from "../gql";
 
@@ -37,7 +35,7 @@ export const FRAGMENT = graphql(/* GraphQL */ `
   }
 `);
 
-const END_SESSION_MUTATION = graphql(/* GraphQL */ `
+export const END_SESSION_MUTATION = graphql(/* GraphQL */ `
   mutation EndCompatSession($id: ID!) {
     endCompatSession(input: { compatSessionId: $id }) {
       status
@@ -49,18 +47,6 @@ const END_SESSION_MUTATION = graphql(/* GraphQL */ `
   }
 `);
 
-export const endCompatSessionFamily = atomFamily((id: string) => {
-  const endCompatSession = atomWithMutation(END_SESSION_MUTATION);
-
-  // A proxy atom which pre-sets the id variable in the mutation
-  const endCompatSessionAtom = atom(
-    (get) => get(endCompatSession),
-    (get, set) => set(endCompatSession, { id }),
-  );
-
-  return endCompatSessionAtom;
-});
-
 export const simplifyUrl = (url: string): string => {
   let parsed;
   try {
@@ -86,10 +72,10 @@ const CompatSession: React.FC<{
   session: FragmentType<typeof FRAGMENT>;
 }> = ({ session }) => {
   const data = useFragment(FRAGMENT, session);
-  const endCompatSession = useSetAtom(endCompatSessionFamily(data.id));
+  const [, endCompatSession] = useMutation(END_SESSION_MUTATION);
 
   const onSessionEnd = async (): Promise<void> => {
-    await endCompatSession();
+    await endCompatSession({ id: data.id });
   };
 
   const clientName = data.ssoLogin?.redirectUri
diff --git a/frontend/src/components/Layout/Layout.test.tsx b/frontend/src/components/Layout/Layout.test.tsx
index 0a5cf0de9..d1c03aef6 100644
--- a/frontend/src/components/Layout/Layout.test.tsx
+++ b/frontend/src/components/Layout/Layout.test.tsx
@@ -15,29 +15,26 @@
 // @vitest-environment happy-dom
 
 import { render } from "@testing-library/react";
-import { describe, expect, it, vi, afterAll, beforeEach } from "vitest";
+import { Provider } from "urql";
+import { describe, expect, it } from "vitest";
+import { never } from "wonka";
 
-import { currentUserIdAtom, GqlResult } from "../../atoms";
 import { WithLocation } from "../../test-utils/WithLocation";
 
 import Layout from "./Layout";
 
 describe("<Layout />", () => {
-  beforeEach(() => {
-    vi.spyOn(currentUserIdAtom, "read").mockResolvedValue(
-      "abc123" as unknown as GqlResult<string | null>,
-    );
-  });
-
-  afterAll(() => {
-    vi.restoreAllMocks();
-  });
-
   it("renders app navigation correctly", async () => {
+    const mockClient = {
+      executeQuery: (): typeof never => never,
+    };
+
     const component = render(
-      <WithLocation path="/">
-        <Layout />
-      </WithLocation>,
+      <Provider value={mockClient}>
+        <WithLocation path="/">
+          <Layout userId="abc123" />
+        </WithLocation>
+      </Provider>,
     );
 
     expect(await component.findByText("Profile")).toMatchSnapshot();
diff --git a/frontend/src/components/Layout/Layout.tsx b/frontend/src/components/Layout/Layout.tsx
index 26773c890..9ddbb2f4f 100644
--- a/frontend/src/components/Layout/Layout.tsx
+++ b/frontend/src/components/Layout/Layout.tsx
@@ -15,37 +15,25 @@
 import { useAtomValue } from "jotai";
 import { useTranslation } from "react-i18next";
 
-import { currentUserIdAtom } from "../../atoms";
-import { isErr, unwrapErr, unwrapOk } from "../../result";
 import { appConfigAtom, routeAtom } from "../../routing";
 import Footer from "../Footer";
-import GraphQLError from "../GraphQLError";
 import NavBar from "../NavBar";
 import NavItem from "../NavItem";
-import NotLoggedIn from "../NotLoggedIn";
 import UserGreeting from "../UserGreeting";
 
 import styles from "./Layout.module.css";
 
-const Layout: React.FC<{ children?: React.ReactNode }> = ({ children }) => {
+const Layout: React.FC<{
+  userId: string;
+  children?: React.ReactNode;
+}> = ({ userId, children }) => {
   const route = useAtomValue(routeAtom);
   const appConfig = useAtomValue(appConfigAtom);
-  const result = useAtomValue(currentUserIdAtom);
   const { t } = useTranslation();
 
-  if (isErr(result)) return <GraphQLError error={unwrapErr(result)} />;
-
   // Hide the nav bar & user greeting on the verify-email page
   const shouldHideNavBar = route.type === "verify-email";
 
-  const userId = unwrapOk(result);
-  if (userId === null)
-    return (
-      <div className={styles.container}>
-        <NotLoggedIn />
-      </div>
-    );
-
   return (
     <div className={styles.layoutContainer}>
       {shouldHideNavBar ? null : (
diff --git a/frontend/src/components/OAuth2Session.test.tsx b/frontend/src/components/OAuth2Session.test.tsx
index ee471d1e7..80d44ddb5 100644
--- a/frontend/src/components/OAuth2Session.test.tsx
+++ b/frontend/src/components/OAuth2Session.test.tsx
@@ -15,7 +15,9 @@
 // @vitest-environment happy-dom
 
 import { create } from "react-test-renderer";
+import { Provider } from "urql";
 import { describe, expect, it, beforeAll } from "vitest";
+import { never } from "wonka";
 
 import { makeFragmentData } from "../gql";
 import { Oauth2ApplicationType } from "../gql/graphql";
@@ -25,6 +27,10 @@ import { mockLocale } from "../test-utils/mockLocale";
 import OAuth2Session, { FRAGMENT } from "./OAuth2Session";
 
 describe("<OAuth2Session />", () => {
+  const mockClient = {
+    executeQuery: (): typeof never => never,
+  };
+
   const defaultSession = {
     id: "session-id",
     scope:
@@ -48,9 +54,11 @@ describe("<OAuth2Session />", () => {
     const session = makeFragmentData(defaultSession, FRAGMENT);
 
     const component = create(
-      <WithLocation>
-        <OAuth2Session session={session} />
-      </WithLocation>,
+      <Provider value={mockClient}>
+        <WithLocation>
+          <OAuth2Session session={session} />
+        </WithLocation>
+      </Provider>,
     );
     expect(component.toJSON()).toMatchSnapshot();
   });
@@ -64,9 +72,11 @@ describe("<OAuth2Session />", () => {
       FRAGMENT,
     );
     const component = create(
-      <WithLocation>
-        <OAuth2Session session={session} />
-      </WithLocation>,
+      <Provider value={mockClient}>
+        <WithLocation>
+          <OAuth2Session session={session} />
+        </WithLocation>
+      </Provider>,
     );
     expect(component.toJSON()).toMatchSnapshot();
   });
@@ -84,9 +94,11 @@ describe("<OAuth2Session />", () => {
       FRAGMENT,
     );
     const component = create(
-      <WithLocation>
-        <OAuth2Session session={session} />
-      </WithLocation>,
+      <Provider value={mockClient}>
+        <WithLocation>
+          <OAuth2Session session={session} />
+        </WithLocation>
+      </Provider>,
     );
     expect(component.toJSON()).toMatchSnapshot();
   });
diff --git a/frontend/src/components/OAuth2Session.tsx b/frontend/src/components/OAuth2Session.tsx
index 1dcf5b878..f0eb17130 100644
--- a/frontend/src/components/OAuth2Session.tsx
+++ b/frontend/src/components/OAuth2Session.tsx
@@ -13,9 +13,7 @@
 // limitations under the License.
 
 import { parseISO } from "date-fns";
-import { atom, useSetAtom } from "jotai";
-import { atomFamily } from "jotai/utils";
-import { atomWithMutation } from "jotai-urql";
+import { useMutation } from "urql";
 
 import { FragmentType, graphql, useFragment } from "../gql";
 import { Oauth2ApplicationType } from "../gql/graphql";
@@ -43,7 +41,7 @@ export const FRAGMENT = graphql(/* GraphQL */ `
   }
 `);
 
-const END_SESSION_MUTATION = graphql(/* GraphQL */ `
+export const END_SESSION_MUTATION = graphql(/* GraphQL */ `
   mutation EndOAuth2Session($id: ID!) {
     endOauth2Session(input: { oauth2SessionId: $id }) {
       status
@@ -67,28 +65,16 @@ const getDeviceTypeFromClientAppType = (
   return DeviceType.Unknown;
 };
 
-export const endSessionFamily = atomFamily((id: string) => {
-  const endSession = atomWithMutation(END_SESSION_MUTATION);
-
-  // A proxy atom which pre-sets the id variable in the mutation
-  const endSessionAtom = atom(
-    (get) => get(endSession),
-    (get, set) => set(endSession, { id }),
-  );
-
-  return endSessionAtom;
-});
-
 type Props = {
   session: FragmentType<typeof FRAGMENT>;
 };
 
 const OAuth2Session: React.FC<Props> = ({ session }) => {
   const data = useFragment(FRAGMENT, session);
-  const endSession = useSetAtom(endSessionFamily(data.id));
+  const [, endSession] = useMutation(END_SESSION_MUTATION);
 
   const onSessionEnd = async (): Promise<void> => {
-    await endSession();
+    await endSession({ id: data.id });
   };
 
   const deviceId = getDeviceIdFromScope(data.scope);
diff --git a/frontend/src/components/SessionDetail/CompatSessionDetail.test.tsx b/frontend/src/components/SessionDetail/CompatSessionDetail.test.tsx
index aad1b7296..d512e9433 100644
--- a/frontend/src/components/SessionDetail/CompatSessionDetail.test.tsx
+++ b/frontend/src/components/SessionDetail/CompatSessionDetail.test.tsx
@@ -15,7 +15,9 @@
 // @vitest-environment happy-dom
 
 import { render, cleanup } from "@testing-library/react";
+import { Provider } from "urql";
 import { describe, expect, it, afterEach, beforeAll } from "vitest";
+import { never } from "wonka";
 
 import { makeFragmentData } from "../../gql";
 import { WithLocation } from "../../test-utils/WithLocation";
@@ -24,6 +26,10 @@ import { mockLocale } from "../../test-utils/mockLocale";
 import CompatSessionDetail, { FRAGMENT } from "./CompatSessionDetail";
 
 describe("<CompatSessionDetail>", () => {
+  const mockClient = {
+    executeQuery: (): typeof never => never,
+  };
+
   const baseSession = {
     id: "session-id",
     deviceId: "abcd1234",
@@ -43,9 +49,11 @@ describe("<CompatSessionDetail>", () => {
     const data = makeFragmentData(baseSession, FRAGMENT);
 
     const { container } = render(
-      <WithLocation>
-        <CompatSessionDetail session={data} />
-      </WithLocation>,
+      <Provider value={mockClient}>
+        <WithLocation>
+          <CompatSessionDetail session={data} />
+        </WithLocation>
+      </Provider>,
     );
 
     expect(container).toMatchSnapshot();
@@ -61,9 +69,11 @@ describe("<CompatSessionDetail>", () => {
     );
 
     const { container } = render(
-      <WithLocation>
-        <CompatSessionDetail session={data} />
-      </WithLocation>,
+      <Provider value={mockClient}>
+        <WithLocation>
+          <CompatSessionDetail session={data} />
+        </WithLocation>
+      </Provider>,
     );
 
     expect(container).toMatchSnapshot();
@@ -79,9 +89,11 @@ describe("<CompatSessionDetail>", () => {
     );
 
     const { getByText, queryByText } = render(
-      <WithLocation>
-        <CompatSessionDetail session={data} />
-      </WithLocation>,
+      <Provider value={mockClient}>
+        <WithLocation>
+          <CompatSessionDetail session={data} />
+        </WithLocation>
+      </Provider>,
     );
 
     expect(getByText("Finished")).toBeTruthy();
diff --git a/frontend/src/components/SessionDetail/CompatSessionDetail.tsx b/frontend/src/components/SessionDetail/CompatSessionDetail.tsx
index aa603d83e..8b574b495 100644
--- a/frontend/src/components/SessionDetail/CompatSessionDetail.tsx
+++ b/frontend/src/components/SessionDetail/CompatSessionDetail.tsx
@@ -13,12 +13,12 @@
 // limitations under the License.
 
 import { parseISO } from "date-fns";
-import { useSetAtom } from "jotai";
 import { useTranslation } from "react-i18next";
+import { useMutation } from "urql";
 
 import { FragmentType, graphql, useFragment } from "../../gql";
 import BlockList from "../BlockList/BlockList";
-import { endCompatSessionFamily, simplifyUrl } from "../CompatSession";
+import { END_SESSION_MUTATION, simplifyUrl } from "../CompatSession";
 import DateTime from "../DateTime";
 import ExternalLink from "../ExternalLink/ExternalLink";
 import EndSessionButton from "../Session/EndSessionButton";
@@ -48,11 +48,11 @@ type Props = {
 
 const CompatSessionDetail: React.FC<Props> = ({ session }) => {
   const data = useFragment(FRAGMENT, session);
-  const endSession = useSetAtom(endCompatSessionFamily(data.id));
+  const [, endSession] = useMutation(END_SESSION_MUTATION);
   const { t } = useTranslation();
 
   const onSessionEnd = async (): Promise<void> => {
-    await endSession();
+    await endSession({ id: data.id });
   };
 
   const finishedAt = data.finishedAt
diff --git a/frontend/src/components/SessionDetail/OAuth2SessionDetail.test.tsx b/frontend/src/components/SessionDetail/OAuth2SessionDetail.test.tsx
index 2b964733a..5771d290c 100644
--- a/frontend/src/components/SessionDetail/OAuth2SessionDetail.test.tsx
+++ b/frontend/src/components/SessionDetail/OAuth2SessionDetail.test.tsx
@@ -15,7 +15,9 @@
 // @vitest-environment happy-dom
 
 import { render, cleanup } from "@testing-library/react";
+import { Provider } from "urql";
 import { describe, expect, it, afterEach, beforeAll } from "vitest";
+import { never } from "wonka";
 
 import { makeFragmentData } from "../../gql";
 import { WithLocation } from "../../test-utils/WithLocation";
@@ -24,6 +26,10 @@ import { mockLocale } from "../../test-utils/mockLocale";
 import OAuth2SessionDetail, { FRAGMENT } from "./OAuth2SessionDetail";
 
 describe("<OAuth2SessionDetail>", () => {
+  const mockClient = {
+    executeQuery: (): typeof never => never,
+  };
+
   const baseSession = {
     id: "session-id",
     scope:
@@ -46,9 +52,11 @@ describe("<OAuth2SessionDetail>", () => {
     const data = makeFragmentData(baseSession, FRAGMENT);
 
     const { container } = render(
-      <WithLocation>
-        <OAuth2SessionDetail session={data} />
-      </WithLocation>,
+      <Provider value={mockClient}>
+        <WithLocation>
+          <OAuth2SessionDetail session={data} />
+        </WithLocation>
+      </Provider>,
     );
 
     expect(container).toMatchSnapshot();
@@ -64,9 +72,11 @@ describe("<OAuth2SessionDetail>", () => {
     );
 
     const { getByText, queryByText } = render(
-      <WithLocation>
-        <OAuth2SessionDetail session={data} />
-      </WithLocation>,
+      <Provider value={mockClient}>
+        <WithLocation>
+          <OAuth2SessionDetail session={data} />
+        </WithLocation>
+      </Provider>,
     );
 
     expect(getByText("Finished")).toBeTruthy();
diff --git a/frontend/src/components/SessionDetail/OAuth2SessionDetail.tsx b/frontend/src/components/SessionDetail/OAuth2SessionDetail.tsx
index 80204b0dd..225649402 100644
--- a/frontend/src/components/SessionDetail/OAuth2SessionDetail.tsx
+++ b/frontend/src/components/SessionDetail/OAuth2SessionDetail.tsx
@@ -13,15 +13,15 @@
 // limitations under the License.
 
 import { parseISO } from "date-fns";
-import { useSetAtom } from "jotai";
 import { useTranslation } from "react-i18next";
+import { useMutation } from "urql";
 
 import { FragmentType, graphql, useFragment } from "../../gql";
 import { Link } from "../../routing";
 import { getDeviceIdFromScope } from "../../utils/deviceIdFromScope";
 import BlockList from "../BlockList/BlockList";
 import DateTime from "../DateTime";
-import { endSessionFamily } from "../OAuth2Session";
+import { END_SESSION_MUTATION } from "../OAuth2Session";
 import ClientAvatar from "../Session/ClientAvatar";
 import EndSessionButton from "../Session/EndSessionButton";
 import LastActive from "../Session/LastActive";
@@ -53,11 +53,11 @@ type Props = {
 
 const OAuth2SessionDetail: React.FC<Props> = ({ session }) => {
   const data = useFragment(FRAGMENT, session);
-  const endSession = useSetAtom(endSessionFamily(data.id));
+  const [, endSession] = useMutation(END_SESSION_MUTATION);
   const { t } = useTranslation();
 
   const onSessionEnd = async (): Promise<void> => {
-    await endSession();
+    await endSession({ id: data.id });
   };
 
   const deviceId = getDeviceIdFromScope(data.scope);
diff --git a/frontend/src/components/SessionDetail/SessionDetail.tsx b/frontend/src/components/SessionDetail/SessionDetail.tsx
index afa36fbf0..dcd3946fc 100644
--- a/frontend/src/components/SessionDetail/SessionDetail.tsx
+++ b/frontend/src/components/SessionDetail/SessionDetail.tsx
@@ -13,11 +13,8 @@
 // limitations under the License.
 
 import { Alert } from "@vector-im/compound-web";
-import { useAtomValue } from "jotai";
-import { atomFamily } from "jotai/utils";
-import { atomWithQuery } from "jotai-urql";
-import { useMemo } from "react";
 import { useTranslation } from "react-i18next";
+import { useQuery } from "urql";
 
 import { graphql } from "../../gql";
 import { Link } from "../../routing";
@@ -35,17 +32,6 @@ const QUERY = graphql(/* GraphQL */ `
   }
 `);
 
-const sessionFamily = atomFamily(
-  ({ userId, deviceId }: { userId: string; deviceId: string }) => {
-    const sessionQueryAtom = atomWithQuery({
-      query: QUERY,
-      getVariables: () => ({ userId, deviceId }),
-    });
-
-    return sessionQueryAtom;
-  },
-);
-
 // A type-safe way to ensure we've handled all session types
 const unknownSessionType = (type: never): never => {
   throw new Error(`Unknown session type: ${type}`);
@@ -55,11 +41,7 @@ const SessionDetail: React.FC<{
   deviceId: string;
   userId: string;
 }> = ({ deviceId, userId }) => {
-  const sessionFamilyAtomWithProps = useMemo(
-    () => sessionFamily({ deviceId, userId }),
-    [deviceId, userId],
-  );
-  const result = useAtomValue(sessionFamilyAtomWithProps);
+  const [result] = useQuery({ query: QUERY, variables: { deviceId, userId } });
   const { t } = useTranslation();
 
   const session = result.data?.session;
diff --git a/frontend/src/components/UserEmail/UserEmail.tsx b/frontend/src/components/UserEmail/UserEmail.tsx
index a372f2a11..2c645d89c 100644
--- a/frontend/src/components/UserEmail/UserEmail.tsx
+++ b/frontend/src/components/UserEmail/UserEmail.tsx
@@ -14,11 +14,9 @@
 
 import IconDelete from "@vector-im/compound-design-tokens/icons/delete.svg?react";
 import { Form, IconButton, Text, Tooltip } from "@vector-im/compound-web";
-import { atom, useSetAtom } from "jotai";
-import { atomFamily } from "jotai/utils";
-import { atomWithMutation } from "jotai-urql";
-import { useTransition, ComponentProps, ReactNode } from "react";
+import { ComponentProps, ReactNode } from "react";
 import { Translation, useTranslation } from "react-i18next";
+import { useMutation } from "urql";
 
 import { FragmentType, graphql, useFragment } from "../../gql";
 import { Link } from "../../routing";
@@ -29,7 +27,7 @@ import styles from "./UserEmail.module.css";
 // This component shows a single user email address, with controls to verify it,
 // resend the verification email, remove it, and set it as the primary email address.
 
-export const FRAGMENT = graphql(/* GraphQL */ `
+const FRAGMENT = graphql(/* GraphQL */ `
   fragment UserEmail_email on UserEmail {
     id
     email
@@ -63,30 +61,6 @@ const SET_PRIMARY_EMAIL_MUTATION = graphql(/* GraphQL */ `
   }
 `);
 
-const removeEmailFamily = atomFamily((id: string) => {
-  const removeEmail = atomWithMutation(REMOVE_EMAIL_MUTATION);
-
-  // A proxy atom which pre-sets the id variable in the mutation
-  const removeEmailAtom = atom(
-    (get) => get(removeEmail),
-    (_get, set) => set(removeEmail, { id }),
-  );
-
-  return removeEmailAtom;
-});
-
-const setPrimaryEmailFamily = atomFamily((id: string) => {
-  const setPrimaryEmail = atomWithMutation(SET_PRIMARY_EMAIL_MUTATION);
-
-  // A proxy atom which pre-sets the id variable in the mutation
-  const setPrimaryEmailAtom = atom(
-    (get) => get(setPrimaryEmail),
-    (_get, set) => set(setPrimaryEmail, { id }),
-  );
-
-  return setPrimaryEmailAtom;
-});
-
 const DeleteButton: React.FC<{ disabled?: boolean; onClick?: () => void }> = ({
   disabled,
   onClick,
@@ -139,29 +113,29 @@ const UserEmail: React.FC<{
   onRemove?: () => void;
   onSetPrimary?: () => void;
   isPrimary?: boolean;
-  highlight?: boolean;
-}> = ({ email, isPrimary, highlight, onSetPrimary, onRemove }) => {
-  const [pending, startTransition] = useTransition();
-  const data = useFragment(FRAGMENT, email);
-  const setPrimaryEmail = useSetAtom(setPrimaryEmailFamily(data.id));
-  const removeEmail = useSetAtom(removeEmailFamily(data.id));
+}> = ({ email, isPrimary, onSetPrimary, onRemove }) => {
   const { t } = useTranslation();
+  const data = useFragment(FRAGMENT, email);
+
+  const [setPrimaryResult, setPrimary] = useMutation(
+    SET_PRIMARY_EMAIL_MUTATION,
+  );
+  const [removeResult, removeEmail] = useMutation(REMOVE_EMAIL_MUTATION);
+  // Handle errors with the error boundary
+  if (setPrimaryResult.error) throw setPrimaryResult.error;
+  if (removeResult.error) throw removeResult.error;
 
   const onRemoveClick = (): void => {
-    startTransition(() => {
-      removeEmail().then(() => {
-        // Call the onRemove callback if provided
-        onRemove?.();
-      });
+    removeEmail({ id: data.id }).then(() => {
+      // Call the onRemove callback if provided
+      onRemove?.();
     });
   };
 
   const onSetPrimaryClick = (): void => {
-    startTransition(() => {
-      setPrimaryEmail().then(() => {
-        // Call the onSetPrimary callback if provided
-        onSetPrimary?.();
-      });
+    setPrimary({ id: data.id }).then(() => {
+      // Call the onSetPrimary callback if provided
+      onSetPrimary?.();
     });
   };
 
@@ -181,7 +155,7 @@ const UserEmail: React.FC<{
             className={styles.userEmailField}
           />
           <DeleteButtonWithConfirmation
-            disabled={isPrimary || pending}
+            disabled={isPrimary || removeResult.fetching}
             onClick={onRemoveClick}
           />
         </div>
@@ -189,8 +163,9 @@ const UserEmail: React.FC<{
         <Form.HelpMessage>
           {data.confirmedAt && !isPrimary && (
             <button
+              type="button"
               className={styles.link}
-              disabled={pending}
+              disabled={setPrimaryResult.fetching}
               onClick={onSetPrimaryClick}
             >
               {t("frontend.user_email.make_primary_button")}
diff --git a/frontend/src/components/UserEmail/index.ts b/frontend/src/components/UserEmail/index.ts
index e3f34b643..b95b2ac24 100644
--- a/frontend/src/components/UserEmail/index.ts
+++ b/frontend/src/components/UserEmail/index.ts
@@ -12,4 +12,4 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-export { default, FRAGMENT } from "./UserEmail";
+export { default } from "./UserEmail";
diff --git a/frontend/src/components/UserGreeting.tsx b/frontend/src/components/UserGreeting.tsx
index 31c98b5e5..a47fd5d2f 100644
--- a/frontend/src/components/UserGreeting.tsx
+++ b/frontend/src/components/UserGreeting.tsx
@@ -13,10 +13,8 @@
 // limitations under the License.
 
 import { Heading, Text, Avatar } from "@vector-im/compound-web";
-import { useAtomValue } from "jotai";
-import { atomFamily } from "jotai/utils";
-import { atomWithQuery } from "jotai-urql";
 import { useTranslation } from "react-i18next";
+import { useQuery } from "urql";
 
 import { graphql } from "../gql";
 
@@ -38,17 +36,8 @@ const QUERY = graphql(/* GraphQL */ `
   }
 `);
 
-export const userGreetingFamily = atomFamily((userId: string) => {
-  const userGreeting = atomWithQuery({
-    query: QUERY,
-    getVariables: () => ({ userId }),
-  });
-
-  return userGreeting;
-});
-
 const UserGreeting: React.FC<{ userId: string }> = ({ userId }) => {
-  const result = useAtomValue(userGreetingFamily(userId));
+  const [result] = useQuery({ query: QUERY, variables: { userId } });
   const { t } = useTranslation();
 
   if (result.data?.user) {
diff --git a/frontend/src/components/UserProfile/AddEmailForm.tsx b/frontend/src/components/UserProfile/AddEmailForm.tsx
index 719c905b7..b4487bab4 100644
--- a/frontend/src/components/UserProfile/AddEmailForm.tsx
+++ b/frontend/src/components/UserProfile/AddEmailForm.tsx
@@ -13,10 +13,9 @@
 // limitations under the License.
 
 import { Alert, Form } from "@vector-im/compound-web";
-import { useAtom } from "jotai";
-import { atomWithMutation } from "jotai-urql";
-import { useRef, useTransition } from "react";
+import { useRef } from "react";
 import { useTranslation } from "react-i18next";
+import { useMutation } from "urql";
 
 import { graphql } from "../../gql";
 
@@ -33,40 +32,36 @@ const ADD_EMAIL_MUTATION = graphql(/* GraphQL */ `
   }
 `);
 
-const addUserEmailAtom = atomWithMutation(ADD_EMAIL_MUTATION);
-
 const AddEmailForm: React.FC<{
   userId: string;
   onAdd?: (id: string) => void;
 }> = ({ userId, onAdd }) => {
+  const { t } = useTranslation();
   const formRef = useRef<HTMLFormElement>(null);
   const fieldRef = useRef<HTMLInputElement>(null);
-  const [addEmailResult, addEmail] = useAtom(addUserEmailAtom);
-  const [pending, startTransition] = useTransition();
-  const { t } = useTranslation();
+  const [addEmailResult, addEmail] = useMutation(ADD_EMAIL_MUTATION);
+  if (addEmailResult.error) throw addEmailResult.error;
 
   const handleSubmit = (e: React.FormEvent<HTMLFormElement>): void => {
     e.preventDefault();
 
     const formData = new FormData(e.currentTarget);
     const email = formData.get("email") as string;
-    startTransition(() => {
-      addEmail({ userId, email }).then((result) => {
-        // Don't clear the form if the email was invalid or already exists
-        if (result.data?.addEmail.status !== "ADDED") {
-          return;
-        }
-
-        if (!result.data?.addEmail.email?.id) {
-          throw new Error("Unexpected response from server");
-        }
-
-        // Call the onAdd callback if provided
-        onAdd?.(result.data?.addEmail.email?.id);
-
-        // Reset the form
-        formRef.current?.reset();
-      });
+    addEmail({ userId, email }).then((result) => {
+      // Don't clear the form if the email was invalid or already exists
+      if (result.data?.addEmail.status !== "ADDED") {
+        return;
+      }
+
+      if (!result.data?.addEmail.email?.id) {
+        throw new Error("Unexpected response from server");
+      }
+
+      // Call the onAdd callback if provided
+      onAdd?.(result.data?.addEmail.email?.id);
+
+      // Reset the form
+      formRef.current?.reset();
     });
   };
 
@@ -119,14 +114,18 @@ const AddEmailForm: React.FC<{
             {t("frontend.add_email_form.email_field_label")}
           </Form.Label>
           <Form.TextControl
-            disabled={pending}
+            disabled={addEmailResult.fetching}
             type="email"
             autoComplete="email"
             ref={fieldRef}
           />
         </Form.Field>
 
-        <Form.Submit size="sm" disabled={pending} className="self-start">
+        <Form.Submit
+          size="sm"
+          disabled={addEmailResult.fetching}
+          className="self-start"
+        >
           {t("common.add")}
         </Form.Submit>
       </Form.Root>
diff --git a/frontend/src/components/UserProfile/CrossSigningReset.tsx b/frontend/src/components/UserProfile/CrossSigningReset.tsx
index 40ad17e3a..0a300f9e9 100644
--- a/frontend/src/components/UserProfile/CrossSigningReset.tsx
+++ b/frontend/src/components/UserProfile/CrossSigningReset.tsx
@@ -13,11 +13,8 @@
 // limitations under the License.
 
 import { Alert, Button, H3, Text } from "@vector-im/compound-web";
-import { atom, useAtom } from "jotai";
-import { atomFamily } from "jotai/utils";
-import { atomWithMutation } from "jotai-urql";
-import { useState } from "react";
 import { useTranslation } from "react-i18next";
+import { useMutation } from "urql";
 
 import { graphql } from "../../gql";
 import BlockList from "../BlockList";
@@ -33,29 +30,12 @@ const ALLOW_CROSS_SIGING_RESET_MUTATION = graphql(/* GraphQL */ `
   }
 `);
 
-const allowCrossSigningResetFamily = atomFamily((id: string) => {
-  const allowCrossSigingReset = atomWithMutation(
-    ALLOW_CROSS_SIGING_RESET_MUTATION,
-  );
-
-  // A proxy atom which pre-sets the id variable in the mutation
-  const allowCrossSigningResetAtom = atom(
-    (get) => get(allowCrossSigingReset),
-    (_get, set) => set(allowCrossSigingReset, { userId: id }),
-  );
-
-  return allowCrossSigningResetAtom;
-});
-
 const CrossSigningReset: React.FC<{ userId: string }> = ({ userId }) => {
   const { t } = useTranslation();
-  const [result, allowReset] = useAtom(allowCrossSigningResetFamily(userId));
-  const [inProgress, setInProgress] = useState(false);
+  const [result, allowReset] = useMutation(ALLOW_CROSS_SIGING_RESET_MUTATION);
 
   const onClick = (): void => {
-    if (inProgress) return;
-    setInProgress(true);
-    allowReset().finally(() => setInProgress(false));
+    allowReset({ userId });
   };
 
   return (
@@ -66,8 +46,12 @@ const CrossSigningReset: React.FC<{ userId: string }> = ({ userId }) => {
           <Text className="text-justify">
             {t("frontend.reset_cross_signing.description")}
           </Text>
-          <Button kind="destructive" disabled={inProgress} onClick={onClick}>
-            {!!inProgress && <LoadingSpinner inline />}
+          <Button
+            kind="destructive"
+            disabled={result.fetching}
+            onClick={onClick}
+          >
+            {!!result.fetching && <LoadingSpinner inline />}
             {t("frontend.reset_cross_signing.button")}
           </Button>
         </>
diff --git a/frontend/src/components/UserProfile/UserEmailList.tsx b/frontend/src/components/UserProfile/UserEmailList.tsx
index 8bfa6ad3f..201fb7908 100644
--- a/frontend/src/components/UserProfile/UserEmailList.tsx
+++ b/frontend/src/components/UserProfile/UserEmailList.tsx
@@ -13,19 +13,17 @@
 // limitations under the License.
 
 import { Alert, H3 } from "@vector-im/compound-web";
-import { atom, useAtom, useAtomValue, useSetAtom } from "jotai";
-import { atomFamily } from "jotai/utils";
-import { atomWithQuery } from "jotai-urql";
+import { useSetAtom } from "jotai";
 import { useTransition } from "react";
 import { useTranslation } from "react-i18next";
+import { useQuery } from "urql";
 
 import { graphql } from "../../gql";
-import { PageInfo } from "../../gql/graphql";
 import {
-  atomForCurrentPagination,
-  atomWithPagination,
   FIRST_PAGE,
   Pagination,
+  usePages,
+  usePagination,
 } from "../../pagination";
 import { routeAtom } from "../../routing";
 import BlockList from "../BlockList";
@@ -76,67 +74,31 @@ const PRIMARY_EMAIL_QUERY = graphql(/* GraphQL */ `
   }
 `);
 
-export const primaryEmailResultFamily = atomFamily((userId: string) => {
-  const primaryEmailResult = atomWithQuery({
-    query: PRIMARY_EMAIL_QUERY,
-    getVariables: () => ({ userId }),
-  });
-  return primaryEmailResult;
-});
-
-const primaryEmailIdFamily = atomFamily((userId: string) => {
-  const primaryEmailIdAtom = atom(
-    async (get) => {
-      const result = await get(primaryEmailResultFamily(userId));
-      return result.data?.user?.primaryEmail?.id ?? null;
-    },
-    (get, set) => {
-      set(primaryEmailResultFamily(userId));
-    },
-  );
-
-  return primaryEmailIdAtom;
-});
-
-export const currentPaginationAtom = atomForCurrentPagination();
-
-export const emailPageResultFamily = atomFamily((userId: string) => {
-  const emailPageResult = atomWithQuery({
-    query: QUERY,
-    getVariables: (get) => ({ userId, ...get(currentPaginationAtom) }),
-  });
-  return emailPageResult;
-});
-
-const pageInfoFamily = atomFamily((userId: string) => {
-  const pageInfoAtom = atom(async (get): Promise<PageInfo | null> => {
-    const result = await get(emailPageResultFamily(userId));
-    return result.data?.user?.emails?.pageInfo ?? null;
-  });
-
-  return pageInfoAtom;
-});
-
-const paginationFamily = atomFamily((userId: string) => {
-  const paginationAtom = atomWithPagination(
-    currentPaginationAtom,
-    pageInfoFamily(userId),
-  );
-  return paginationAtom;
-});
-
 const UserEmailList: React.FC<{
   userId: string;
 }> = ({ userId }) => {
+  const { t } = useTranslation();
   const [pending, startTransition] = useTransition();
-  const [result, refreshList] = useAtom(emailPageResultFamily(userId));
-  const setPagination = useSetAtom(currentPaginationAtom);
+
+  const [pagination, setPagination] = usePagination();
+  const [result, refreshList] = useQuery({
+    query: QUERY,
+    variables: { userId, ...pagination },
+  });
+  if (result.error) throw result.error;
+  const emails = result.data?.user?.emails;
+  if (!emails) throw new Error(); // Suspense mode is enabled
+
   const setRoute = useSetAtom(routeAtom);
-  const [prevPage, nextPage] = useAtomValue(paginationFamily(userId));
-  const [primaryEmailId, refreshPrimaryEmailId] = useAtom(
-    primaryEmailIdFamily(userId),
-  );
-  const { t } = useTranslation();
+  const [prevPage, nextPage] = usePages(pagination, emails.pageInfo);
+
+  const [primaryEmailResult, refreshPrimaryEmail] = useQuery({
+    query: PRIMARY_EMAIL_QUERY,
+    variables: { userId },
+  });
+  if (primaryEmailResult.error) throw primaryEmailResult.error;
+  if (!result.data) throw new Error(); // Suspense mode is enabled
+  const primaryEmailId = primaryEmailResult.data?.user?.primaryEmail?.id;
 
   const paginate = (pagination: Pagination): void => {
     startTransition(() => {
@@ -168,19 +130,19 @@ const UserEmailList: React.FC<{
           title={t("frontend.user_email_list.no_primary_email_alert")}
         />
       )}
-      {result.data?.user?.emails?.edges?.map((edge) => (
+      {emails.edges.map((edge) => (
         <UserEmail
           email={edge.node}
           key={edge.cursor}
           isPrimary={primaryEmailId === edge.node.id}
-          onSetPrimary={refreshPrimaryEmailId}
+          onSetPrimary={refreshPrimaryEmail}
           onRemove={onRemove}
         />
       ))}
 
       <PaginationControls
         autoHide
-        count={result.data?.user?.emails?.totalCount ?? 0}
+        count={emails.totalCount ?? 0}
         onPrev={prevPage ? (): void => paginate(prevPage) : null}
         onNext={nextPage ? (): void => paginate(nextPage) : null}
         disabled={pending}
diff --git a/frontend/src/components/UserProfile/UserName.tsx b/frontend/src/components/UserProfile/UserName.tsx
index 09bb9107d..12e2ef91c 100644
--- a/frontend/src/components/UserProfile/UserName.tsx
+++ b/frontend/src/components/UserProfile/UserName.tsx
@@ -13,18 +13,26 @@
 // limitations under the License.
 
 import { Alert, Button, Form } from "@vector-im/compound-web";
-import { useAtom, atom } from "jotai";
-import { atomFamily } from "jotai/utils";
-import { atomWithMutation } from "jotai-urql";
 import { useState, ChangeEventHandler } from "react";
 import { useTranslation } from "react-i18next";
+import { useMutation, useQuery } from "urql";
 
 import { graphql } from "../../gql";
 import LoadingSpinner from "../LoadingSpinner/LoadingSpinner";
-import { userGreetingFamily } from "../UserGreeting";
 
 import styles from "./UserName.module.css";
 
+const QUERY = graphql(/* GraphQL */ `
+  query UserDisplayName($userId: ID!) {
+    user(id: $userId) {
+      id
+      matrix {
+        displayName
+      }
+    }
+  }
+`);
+
 const SET_DISPLAYNAME_MUTATION = graphql(/* GraphQL */ `
   mutation SetDisplayName($userId: ID!, $displayName: String) {
     setDisplayName(input: { userId: $userId, displayName: $displayName }) {
@@ -39,19 +47,6 @@ const SET_DISPLAYNAME_MUTATION = graphql(/* GraphQL */ `
   }
 `);
 
-const setDisplayNameFamily = atomFamily((userId: string) => {
-  const setDisplayName = atomWithMutation(SET_DISPLAYNAME_MUTATION);
-
-  // A proxy atom which pre-sets the id variable in the mutation
-  const setDisplayNameAtom = atom(
-    (get) => get(setDisplayName),
-    (get, set, displayName: string | null) =>
-      set(setDisplayName, { userId, displayName }),
-  );
-
-  return setDisplayNameAtom;
-});
-
 const getErrorMessage = (result: {
   error?: unknown;
   data?: { setDisplayName: { status: string } };
@@ -65,15 +60,15 @@ const getErrorMessage = (result: {
 };
 
 const UserName: React.FC<{ userId: string }> = ({ userId }) => {
-  const [userGreeting, refreshUserGreeting] = useAtom(
-    userGreetingFamily(userId),
-  );
-  const displayName = userGreeting.data?.user?.matrix.displayName || "";
-
-  const [setDisplayNameResult, setDisplayName] = useAtom(
-    setDisplayNameFamily(userId),
+  const [result, refreshUserGreeting] = useQuery({
+    query: QUERY,
+    variables: { userId },
+  });
+  const displayName = result.data?.user?.matrix.displayName || "";
+
+  const [setDisplayNameResult, setDisplayName] = useMutation(
+    SET_DISPLAYNAME_MUTATION,
   );
-  const [inProgress, setInProgress] = useState(false);
 
   const [hasChanges, setHasChanges] = useState(false);
 
@@ -100,8 +95,7 @@ const UserName: React.FC<{ userId: string }> = ({ userId }) => {
       return;
     }
 
-    setInProgress(true);
-    setDisplayName(newDisplayName).then((result) => {
+    setDisplayName({ displayName: newDisplayName, userId }).then((result) => {
       if (!result.data) {
         console.error("Failed to set display name", result.error);
       } else if (result.data.setDisplayName.status === "SET") {
@@ -115,7 +109,6 @@ const UserName: React.FC<{ userId: string }> = ({ userId }) => {
       }
 
       setHasChanges(false);
-      setInProgress(false);
     });
   };
 
@@ -125,7 +118,7 @@ const UserName: React.FC<{ userId: string }> = ({ userId }) => {
     <Form.Root onSubmit={onSubmit} className={styles.form}>
       <Form.Field
         name="displayname"
-        serverInvalid={!inProgress && !!errorMessage}
+        serverInvalid={!setDisplayNameResult.fetching && !!errorMessage}
       >
         <Form.Label>
           {t("frontend.user_name.display_name_field_label")}
@@ -137,7 +130,7 @@ const UserName: React.FC<{ userId: string }> = ({ userId }) => {
           max={250}
         />
       </Form.Field>
-      {!inProgress && errorMessage && (
+      {!setDisplayNameResult.fetching && errorMessage && (
         <Alert type="critical" title={t("common.error")}>
           {errorMessage}
         </Alert>
@@ -145,12 +138,12 @@ const UserName: React.FC<{ userId: string }> = ({ userId }) => {
 
       <Button
         className="self-start"
-        disabled={inProgress || !hasChanges}
+        disabled={setDisplayNameResult.fetching || !hasChanges}
         kind="primary"
         size="sm"
         type="submit"
       >
-        {!!inProgress && <LoadingSpinner inline />}
+        {!!setDisplayNameResult.fetching && <LoadingSpinner inline />}
         {t("action.save")}
       </Button>
     </Form.Root>
diff --git a/frontend/src/components/UserSessionsOverview/AppSessionsList.tsx b/frontend/src/components/UserSessionsOverview/AppSessionsList.tsx
index a4c879db8..7cadfd3d9 100644
--- a/frontend/src/components/UserSessionsOverview/AppSessionsList.tsx
+++ b/frontend/src/components/UserSessionsOverview/AppSessionsList.tsx
@@ -13,21 +13,12 @@
 // limitations under the License.
 
 import { H5 } from "@vector-im/compound-web";
-import { atom, useAtomValue, useSetAtom } from "jotai";
-import { atomFamily } from "jotai/utils";
-import { atomWithQuery } from "jotai-urql";
 import { useTransition } from "react";
 import { useTranslation } from "react-i18next";
+import { useQuery } from "urql";
 
-import { mapQueryAtom } from "../../atoms";
 import { graphql } from "../../gql";
-import { SessionState, PageInfo } from "../../gql/graphql";
-import {
-  atomForCurrentPagination,
-  atomWithPagination,
-  Pagination,
-} from "../../pagination";
-import { isOk, unwrap, unwrapOk } from "../../result";
+import { Pagination, usePages, usePagination } from "../../pagination";
 import BlockList from "../BlockList";
 import CompatSession from "../CompatSession";
 import OAuth2Session from "../OAuth2Session";
@@ -73,44 +64,6 @@ const QUERY = graphql(/* GraphQL */ `
   }
 `);
 
-const filterAtom = atom<SessionState | null>(SessionState.Active);
-const currentPaginationAtom = atomForCurrentPagination();
-
-export const appSessionListFamily = atomFamily((userId: string) => {
-  const appSessionListQuery = atomWithQuery({
-    query: QUERY,
-    getVariables: (get) => ({
-      userId,
-      state: get(filterAtom),
-      ...get(currentPaginationAtom),
-    }),
-  });
-
-  const appSessionList = mapQueryAtom(
-    appSessionListQuery,
-    (data) => data.user?.appSessions || null,
-  );
-
-  return appSessionList;
-});
-
-const pageInfoFamily = atomFamily((userId: string) => {
-  const pageInfoAtom = atom(async (get): Promise<PageInfo | null> => {
-    const result = await get(appSessionListFamily(userId));
-    return (isOk(result) && unwrapOk(result)?.pageInfo) || null;
-  });
-  return pageInfoAtom;
-});
-
-const paginationFamily = atomFamily((userId: string) => {
-  const paginationAtom = atomWithPagination(
-    currentPaginationAtom,
-    pageInfoFamily(userId),
-  );
-
-  return paginationAtom;
-});
-
 // A type-safe way to ensure we've handled all session types
 const unknownSessionType = (type: never): never => {
   throw new Error(`Unknown session type: ${type}`);
@@ -118,14 +71,17 @@ const unknownSessionType = (type: never): never => {
 
 const AppSessionsList: React.FC<{ userId: string }> = ({ userId }) => {
   const [pending, startTransition] = useTransition();
-  const result = useAtomValue(appSessionListFamily(userId));
-  const setPagination = useSetAtom(currentPaginationAtom);
-  const [prevPage, nextPage] = useAtomValue(paginationFamily(userId));
+  const [pagination, setPagination] = usePagination();
+  const [result] = useQuery({
+    query: QUERY,
+    variables: { userId, ...pagination },
+  });
+  if (result.error) throw result.error;
+  const appSessions = result.data?.user?.appSessions;
+  if (!appSessions) throw new Error(); // Suspense mode is enabled
+  const [prevPage, nextPage] = usePages(pagination, appSessions.pageInfo);
   const { t } = useTranslation();
 
-  const appSessions = unwrap(result);
-  if (!appSessions) return <>{t("frontend.app_sessions_list.error")}</>;
-
   const paginate = (pagination: Pagination): void => {
     startTransition(() => {
       setPagination(pagination);
diff --git a/frontend/src/components/VerifyEmail/VerifyEmail.tsx b/frontend/src/components/VerifyEmail/VerifyEmail.tsx
index 75cf7546a..170935024 100644
--- a/frontend/src/components/VerifyEmail/VerifyEmail.tsx
+++ b/frontend/src/components/VerifyEmail/VerifyEmail.tsx
@@ -15,11 +15,10 @@
 import IconArrowLeft from "@vector-im/compound-design-tokens/icons/arrow-left.svg?react";
 import IconSend from "@vector-im/compound-design-tokens/icons/send-solid.svg?react";
 import { Button, Form, Alert, H1, Text } from "@vector-im/compound-web";
-import { useSetAtom, atom, useAtom } from "jotai";
-import { atomFamily } from "jotai/utils";
-import { atomWithMutation } from "jotai-urql";
-import { useRef, useTransition } from "react";
+import { useSetAtom } from "jotai";
+import { useRef } from "react";
 import { Trans, useTranslation } from "react-i18next";
+import { useMutation } from "urql";
 
 import { FragmentType, graphql, useFragment } from "../../gql";
 import { routeAtom, useNavigationLink } from "../../routing";
@@ -73,32 +72,6 @@ const RESEND_VERIFICATION_EMAIL_MUTATION = graphql(/* GraphQL */ `
   }
 `);
 
-const verifyEmailFamily = atomFamily((id: string) => {
-  const verifyEmail = atomWithMutation(VERIFY_EMAIL_MUTATION);
-
-  // A proxy atom which pre-sets the id variable in the mutation
-  const verifyEmailAtom = atom(
-    (get) => get(verifyEmail),
-    (get, set, code: string) => set(verifyEmail, { id, code }),
-  );
-
-  return verifyEmailAtom;
-});
-
-const resendVerificationEmailFamily = atomFamily((id: string) => {
-  const resendVerificationEmail = atomWithMutation(
-    RESEND_VERIFICATION_EMAIL_MUTATION,
-  );
-
-  // A proxy atom which pre-sets the id variable in the mutation
-  const resendVerificationEmailAtom = atom(
-    (get) => get(resendVerificationEmail),
-    (_get, set) => set(resendVerificationEmail, { id }),
-  );
-
-  return resendVerificationEmailAtom;
-});
-
 const BackButton: React.FC = () => {
   const { onClick, href, pending } = useNavigationLink({
     type: "profile",
@@ -122,10 +95,9 @@ const VerifyEmail: React.FC<{
   email: FragmentType<typeof FRAGMENT>;
 }> = ({ email }) => {
   const data = useFragment(FRAGMENT, email);
-  const [pending, startTransition] = useTransition();
-  const [verifyEmailResult, verifyEmail] = useAtom(verifyEmailFamily(data.id));
-  const [resendVerificationEmailResult, resendVerificationEmail] = useAtom(
-    resendVerificationEmailFamily(data.id),
+  const [verifyEmailResult, verifyEmail] = useMutation(VERIFY_EMAIL_MUTATION);
+  const [resendVerificationEmailResult, resendVerificationEmail] = useMutation(
+    RESEND_VERIFICATION_EMAIL_MUTATION,
   );
   const setRoute = useSetAtom(routeAtom);
   const fieldRef = useRef<HTMLInputElement>(null);
@@ -136,23 +108,19 @@ const VerifyEmail: React.FC<{
     const form = e.currentTarget;
     const formData = new FormData(form);
     const code = formData.get("code") as string;
-    startTransition(() => {
-      verifyEmail(code).then((result) => {
-        // Clear the form
-        form.reset();
+    verifyEmail({ id: data.id, code }).then((result) => {
+      // Clear the form
+      form.reset();
 
-        if (result.data?.verifyEmail.status === "VERIFIED") {
-          setRoute({ type: "profile" });
-        }
-      });
+      if (result.data?.verifyEmail.status === "VERIFIED") {
+        setRoute({ type: "profile" });
+      }
     });
   };
 
   const onResendClick = (): void => {
-    startTransition(() => {
-      resendVerificationEmail().then(() => {
-        fieldRef.current?.focus();
-      });
+    resendVerificationEmail({ id: data.id }).then(() => {
+      fieldRef.current?.focus();
     });
   };
 
@@ -212,13 +180,13 @@ const VerifyEmail: React.FC<{
           </Form.ErrorMessage>
         </Form.Field>
 
-        <Form.Submit type="submit" disabled={pending}>
+        <Form.Submit type="submit" disabled={verifyEmailResult.fetching}>
           {t("action.continue")}
         </Form.Submit>
         <Button
           type="button"
           kind="secondary"
-          disabled={pending}
+          disabled={resendVerificationEmailResult.fetching}
           onClick={onResendClick}
         >
           {t("frontend.verify_email.resend_code")}
diff --git a/frontend/src/gql/gql.ts b/frontend/src/gql/gql.ts
index a64f704b6..08f122ab6 100644
--- a/frontend/src/gql/gql.ts
+++ b/frontend/src/gql/gql.ts
@@ -13,10 +13,6 @@ import { TypedDocumentNode as DocumentNode } from "@graphql-typed-document-node/
  * Therefore it is highly recommended to use the babel or swc plugin for production.
  */
 const documents = {
-  "\n  query CurrentViewerQuery {\n    viewer {\n      __typename\n      ... on User {\n        id\n      }\n\n      ... on Anonymous {\n        id\n      }\n    }\n  }\n":
-    types.CurrentViewerQueryDocument,
-  "\n  query CurrentViewerSessionQuery {\n    viewerSession {\n      __typename\n      ... on BrowserSession {\n        id\n      }\n\n      ... on Anonymous {\n        id\n      }\n    }\n  }\n":
-    types.CurrentViewerSessionQueryDocument,
   "\n  fragment BrowserSession_session on BrowserSession {\n    id\n    createdAt\n    finishedAt\n    userAgent\n    lastActiveIp\n    lastActiveAt\n    lastAuthentication {\n      id\n      createdAt\n    }\n  }\n":
     types.BrowserSession_SessionFragmentDoc,
   "\n  mutation EndBrowserSession($id: ID!) {\n    endBrowserSession(input: { browserSessionId: $id }) {\n      status\n      browserSession {\n        id\n        ...BrowserSession_session\n      }\n    }\n  }\n":
@@ -59,6 +55,8 @@ const documents = {
     types.UserEmailListQueryDocument,
   "\n  query UserPrimaryEmail($userId: ID!) {\n    user(id: $userId) {\n      id\n      primaryEmail {\n        id\n      }\n    }\n  }\n":
     types.UserPrimaryEmailDocument,
+  "\n  query UserDisplayName($userId: ID!) {\n    user(id: $userId) {\n      id\n      matrix {\n        displayName\n      }\n    }\n  }\n":
+    types.UserDisplayNameDocument,
   "\n  mutation SetDisplayName($userId: ID!, $displayName: String) {\n    setDisplayName(input: { userId: $userId, displayName: $displayName }) {\n      status\n      user {\n        id\n        matrix {\n          displayName\n        }\n      }\n    }\n  }\n":
     types.SetDisplayNameDocument,
   "\n  query AppSessionList(\n    $userId: ID!\n    $state: SessionState\n    $first: Int\n    $after: String\n    $last: Int\n    $before: String\n  ) {\n    user(id: $userId) {\n      id\n      appSessions(\n        first: $first\n        after: $after\n        last: $last\n        before: $before\n        state: $state\n      ) {\n        totalCount\n\n        edges {\n          cursor\n          node {\n            __typename\n            ...CompatSession_session\n            ...OAuth2Session_session\n          }\n        }\n\n        pageInfo {\n          hasNextPage\n          hasPreviousPage\n          startCursor\n          endCursor\n        }\n      }\n    }\n  }\n":
@@ -79,6 +77,10 @@ const documents = {
     types.SessionsOverviewQueryDocument,
   "\n  query VerifyEmailQuery($id: ID!) {\n    userEmail(id: $id) {\n      ...UserEmail_verifyEmail\n    }\n  }\n":
     types.VerifyEmailQueryDocument,
+  "\n  query CurrentViewerSessionQuery {\n    viewerSession {\n      __typename\n      ... on BrowserSession {\n        id\n      }\n    }\n  }\n":
+    types.CurrentViewerSessionQueryDocument,
+  "\n  query CurrentViewerQuery {\n    viewer {\n      __typename\n      ... on User {\n        id\n      }\n    }\n  }\n":
+    types.CurrentViewerQueryDocument,
 };
 
 /**
@@ -95,18 +97,6 @@ const documents = {
  */
 export function graphql(source: string): unknown;
 
-/**
- * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
- */
-export function graphql(
-  source: "\n  query CurrentViewerQuery {\n    viewer {\n      __typename\n      ... on User {\n        id\n      }\n\n      ... on Anonymous {\n        id\n      }\n    }\n  }\n",
-): (typeof documents)["\n  query CurrentViewerQuery {\n    viewer {\n      __typename\n      ... on User {\n        id\n      }\n\n      ... on Anonymous {\n        id\n      }\n    }\n  }\n"];
-/**
- * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
- */
-export function graphql(
-  source: "\n  query CurrentViewerSessionQuery {\n    viewerSession {\n      __typename\n      ... on BrowserSession {\n        id\n      }\n\n      ... on Anonymous {\n        id\n      }\n    }\n  }\n",
-): (typeof documents)["\n  query CurrentViewerSessionQuery {\n    viewerSession {\n      __typename\n      ... on BrowserSession {\n        id\n      }\n\n      ... on Anonymous {\n        id\n      }\n    }\n  }\n"];
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
@@ -233,6 +223,12 @@ export function graphql(
 export function graphql(
   source: "\n  query UserPrimaryEmail($userId: ID!) {\n    user(id: $userId) {\n      id\n      primaryEmail {\n        id\n      }\n    }\n  }\n",
 ): (typeof documents)["\n  query UserPrimaryEmail($userId: ID!) {\n    user(id: $userId) {\n      id\n      primaryEmail {\n        id\n      }\n    }\n  }\n"];
+/**
+ * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
+ */
+export function graphql(
+  source: "\n  query UserDisplayName($userId: ID!) {\n    user(id: $userId) {\n      id\n      matrix {\n        displayName\n      }\n    }\n  }\n",
+): (typeof documents)["\n  query UserDisplayName($userId: ID!) {\n    user(id: $userId) {\n      id\n      matrix {\n        displayName\n      }\n    }\n  }\n"];
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
@@ -293,6 +289,18 @@ export function graphql(
 export function graphql(
   source: "\n  query VerifyEmailQuery($id: ID!) {\n    userEmail(id: $id) {\n      ...UserEmail_verifyEmail\n    }\n  }\n",
 ): (typeof documents)["\n  query VerifyEmailQuery($id: ID!) {\n    userEmail(id: $id) {\n      ...UserEmail_verifyEmail\n    }\n  }\n"];
+/**
+ * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
+ */
+export function graphql(
+  source: "\n  query CurrentViewerSessionQuery {\n    viewerSession {\n      __typename\n      ... on BrowserSession {\n        id\n      }\n    }\n  }\n",
+): (typeof documents)["\n  query CurrentViewerSessionQuery {\n    viewerSession {\n      __typename\n      ... on BrowserSession {\n        id\n      }\n    }\n  }\n"];
+/**
+ * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
+ */
+export function graphql(
+  source: "\n  query CurrentViewerQuery {\n    viewer {\n      __typename\n      ... on User {\n        id\n      }\n    }\n  }\n",
+): (typeof documents)["\n  query CurrentViewerQuery {\n    viewer {\n      __typename\n      ... on User {\n        id\n      }\n    }\n  }\n"];
 
 export function graphql(source: string) {
   return (documents as any)[source] ?? {};
diff --git a/frontend/src/gql/graphql.ts b/frontend/src/gql/graphql.ts
index 57a4a8467..41c0eda8f 100644
--- a/frontend/src/gql/graphql.ts
+++ b/frontend/src/gql/graphql.ts
@@ -1107,27 +1107,6 @@ export type Viewer = Anonymous | User;
 /** Represents the current viewer's session */
 export type ViewerSession = Anonymous | BrowserSession | Oauth2Session;
 
-export type CurrentViewerQueryQueryVariables = Exact<{ [key: string]: never }>;
-
-export type CurrentViewerQueryQuery = {
-  __typename?: "Query";
-  viewer:
-    | { __typename: "Anonymous"; id: string }
-    | { __typename: "User"; id: string };
-};
-
-export type CurrentViewerSessionQueryQueryVariables = Exact<{
-  [key: string]: never;
-}>;
-
-export type CurrentViewerSessionQueryQuery = {
-  __typename?: "Query";
-  viewerSession:
-    | { __typename: "Anonymous"; id: string }
-    | { __typename: "BrowserSession"; id: string }
-    | { __typename: "Oauth2Session" };
-};
-
 export type BrowserSession_SessionFragment = {
   __typename?: "BrowserSession";
   id: string;
@@ -1499,6 +1478,19 @@ export type UserPrimaryEmailQuery = {
   } | null;
 };
 
+export type UserDisplayNameQueryVariables = Exact<{
+  userId: Scalars["ID"]["input"];
+}>;
+
+export type UserDisplayNameQuery = {
+  __typename?: "Query";
+  user?: {
+    __typename?: "User";
+    id: string;
+    matrix: { __typename?: "MatrixUser"; displayName?: string | null };
+  } | null;
+};
+
 export type SetDisplayNameMutationVariables = Exact<{
   userId: Scalars["ID"]["input"];
   displayName?: InputMaybe<Scalars["String"]["input"]>;
@@ -1680,6 +1672,25 @@ export type VerifyEmailQueryQuery = {
     | null;
 };
 
+export type CurrentViewerSessionQueryQueryVariables = Exact<{
+  [key: string]: never;
+}>;
+
+export type CurrentViewerSessionQueryQuery = {
+  __typename?: "Query";
+  viewerSession:
+    | { __typename: "Anonymous" }
+    | { __typename: "BrowserSession"; id: string }
+    | { __typename: "Oauth2Session" };
+};
+
+export type CurrentViewerQueryQueryVariables = Exact<{ [key: string]: never }>;
+
+export type CurrentViewerQueryQuery = {
+  __typename?: "Query";
+  viewer: { __typename: "Anonymous" } | { __typename: "User"; id: string };
+};
+
 export const BrowserSession_SessionFragmentDoc = {
   kind: "Document",
   definitions: [
@@ -2060,114 +2071,6 @@ export const UserEmail_VerifyEmailFragmentDoc = {
     },
   ],
 } as unknown as DocumentNode<UserEmail_VerifyEmailFragment, unknown>;
-export const CurrentViewerQueryDocument = {
-  kind: "Document",
-  definitions: [
-    {
-      kind: "OperationDefinition",
-      operation: "query",
-      name: { kind: "Name", value: "CurrentViewerQuery" },
-      selectionSet: {
-        kind: "SelectionSet",
-        selections: [
-          {
-            kind: "Field",
-            name: { kind: "Name", value: "viewer" },
-            selectionSet: {
-              kind: "SelectionSet",
-              selections: [
-                { kind: "Field", name: { kind: "Name", value: "__typename" } },
-                {
-                  kind: "InlineFragment",
-                  typeCondition: {
-                    kind: "NamedType",
-                    name: { kind: "Name", value: "User" },
-                  },
-                  selectionSet: {
-                    kind: "SelectionSet",
-                    selections: [
-                      { kind: "Field", name: { kind: "Name", value: "id" } },
-                    ],
-                  },
-                },
-                {
-                  kind: "InlineFragment",
-                  typeCondition: {
-                    kind: "NamedType",
-                    name: { kind: "Name", value: "Anonymous" },
-                  },
-                  selectionSet: {
-                    kind: "SelectionSet",
-                    selections: [
-                      { kind: "Field", name: { kind: "Name", value: "id" } },
-                    ],
-                  },
-                },
-              ],
-            },
-          },
-        ],
-      },
-    },
-  ],
-} as unknown as DocumentNode<
-  CurrentViewerQueryQuery,
-  CurrentViewerQueryQueryVariables
->;
-export const CurrentViewerSessionQueryDocument = {
-  kind: "Document",
-  definitions: [
-    {
-      kind: "OperationDefinition",
-      operation: "query",
-      name: { kind: "Name", value: "CurrentViewerSessionQuery" },
-      selectionSet: {
-        kind: "SelectionSet",
-        selections: [
-          {
-            kind: "Field",
-            name: { kind: "Name", value: "viewerSession" },
-            selectionSet: {
-              kind: "SelectionSet",
-              selections: [
-                { kind: "Field", name: { kind: "Name", value: "__typename" } },
-                {
-                  kind: "InlineFragment",
-                  typeCondition: {
-                    kind: "NamedType",
-                    name: { kind: "Name", value: "BrowserSession" },
-                  },
-                  selectionSet: {
-                    kind: "SelectionSet",
-                    selections: [
-                      { kind: "Field", name: { kind: "Name", value: "id" } },
-                    ],
-                  },
-                },
-                {
-                  kind: "InlineFragment",
-                  typeCondition: {
-                    kind: "NamedType",
-                    name: { kind: "Name", value: "Anonymous" },
-                  },
-                  selectionSet: {
-                    kind: "SelectionSet",
-                    selections: [
-                      { kind: "Field", name: { kind: "Name", value: "id" } },
-                    ],
-                  },
-                },
-              ],
-            },
-          },
-        ],
-      },
-    },
-  ],
-} as unknown as DocumentNode<
-  CurrentViewerSessionQueryQuery,
-  CurrentViewerSessionQueryQueryVariables
->;
 export const EndBrowserSessionDocument = {
   kind: "Document",
   definitions: [
@@ -3511,6 +3414,70 @@ export const UserPrimaryEmailDocument = {
   UserPrimaryEmailQuery,
   UserPrimaryEmailQueryVariables
 >;
+export const UserDisplayNameDocument = {
+  kind: "Document",
+  definitions: [
+    {
+      kind: "OperationDefinition",
+      operation: "query",
+      name: { kind: "Name", value: "UserDisplayName" },
+      variableDefinitions: [
+        {
+          kind: "VariableDefinition",
+          variable: {
+            kind: "Variable",
+            name: { kind: "Name", value: "userId" },
+          },
+          type: {
+            kind: "NonNullType",
+            type: { kind: "NamedType", name: { kind: "Name", value: "ID" } },
+          },
+        },
+      ],
+      selectionSet: {
+        kind: "SelectionSet",
+        selections: [
+          {
+            kind: "Field",
+            name: { kind: "Name", value: "user" },
+            arguments: [
+              {
+                kind: "Argument",
+                name: { kind: "Name", value: "id" },
+                value: {
+                  kind: "Variable",
+                  name: { kind: "Name", value: "userId" },
+                },
+              },
+            ],
+            selectionSet: {
+              kind: "SelectionSet",
+              selections: [
+                { kind: "Field", name: { kind: "Name", value: "id" } },
+                {
+                  kind: "Field",
+                  name: { kind: "Name", value: "matrix" },
+                  selectionSet: {
+                    kind: "SelectionSet",
+                    selections: [
+                      {
+                        kind: "Field",
+                        name: { kind: "Name", value: "displayName" },
+                      },
+                    ],
+                  },
+                },
+              ],
+            },
+          },
+        ],
+      },
+    },
+  ],
+} as unknown as DocumentNode<
+  UserDisplayNameQuery,
+  UserDisplayNameQueryVariables
+>;
 export const SetDisplayNameDocument = {
   kind: "Document",
   definitions: [
@@ -4435,3 +4402,85 @@ export const VerifyEmailQueryDocument = {
   VerifyEmailQueryQuery,
   VerifyEmailQueryQueryVariables
 >;
+export const CurrentViewerSessionQueryDocument = {
+  kind: "Document",
+  definitions: [
+    {
+      kind: "OperationDefinition",
+      operation: "query",
+      name: { kind: "Name", value: "CurrentViewerSessionQuery" },
+      selectionSet: {
+        kind: "SelectionSet",
+        selections: [
+          {
+            kind: "Field",
+            name: { kind: "Name", value: "viewerSession" },
+            selectionSet: {
+              kind: "SelectionSet",
+              selections: [
+                { kind: "Field", name: { kind: "Name", value: "__typename" } },
+                {
+                  kind: "InlineFragment",
+                  typeCondition: {
+                    kind: "NamedType",
+                    name: { kind: "Name", value: "BrowserSession" },
+                  },
+                  selectionSet: {
+                    kind: "SelectionSet",
+                    selections: [
+                      { kind: "Field", name: { kind: "Name", value: "id" } },
+                    ],
+                  },
+                },
+              ],
+            },
+          },
+        ],
+      },
+    },
+  ],
+} as unknown as DocumentNode<
+  CurrentViewerSessionQueryQuery,
+  CurrentViewerSessionQueryQueryVariables
+>;
+export const CurrentViewerQueryDocument = {
+  kind: "Document",
+  definitions: [
+    {
+      kind: "OperationDefinition",
+      operation: "query",
+      name: { kind: "Name", value: "CurrentViewerQuery" },
+      selectionSet: {
+        kind: "SelectionSet",
+        selections: [
+          {
+            kind: "Field",
+            name: { kind: "Name", value: "viewer" },
+            selectionSet: {
+              kind: "SelectionSet",
+              selections: [
+                { kind: "Field", name: { kind: "Name", value: "__typename" } },
+                {
+                  kind: "InlineFragment",
+                  typeCondition: {
+                    kind: "NamedType",
+                    name: { kind: "Name", value: "User" },
+                  },
+                  selectionSet: {
+                    kind: "SelectionSet",
+                    selections: [
+                      { kind: "Field", name: { kind: "Name", value: "id" } },
+                    ],
+                  },
+                },
+              ],
+            },
+          },
+        ],
+      },
+    },
+  ],
+} as unknown as DocumentNode<
+  CurrentViewerQueryQuery,
+  CurrentViewerQueryQueryVariables
+>;
diff --git a/frontend/src/graphql.ts b/frontend/src/graphql.ts
index ab10fc3c7..f8737914a 100644
--- a/frontend/src/graphql.ts
+++ b/frontend/src/graphql.ts
@@ -132,6 +132,7 @@ const exchanges = [
 
 export const client = createClient({
   url: appConfig.graphqlEndpoint,
+  suspense: true,
   // Add the devtools exchange in development
   exchanges: import.meta.env.DEV ? [devtoolsExchange, ...exchanges] : exchanges,
 });
diff --git a/frontend/src/main.tsx b/frontend/src/main.tsx
index 2dad19f50..f0277caf2 100644
--- a/frontend/src/main.tsx
+++ b/frontend/src/main.tsx
@@ -18,32 +18,47 @@ import { DevTools } from "jotai-devtools";
 import { Suspense, StrictMode } from "react";
 import { createRoot } from "react-dom/client";
 import { I18nextProvider } from "react-i18next";
+import { Provider as UrqlProvider } from "urql";
 
-import { HydrateAtoms } from "./atoms";
+import ErrorBoundary from "./components/ErrorBoundary";
 import Layout from "./components/Layout";
 import LoadingScreen from "./components/LoadingScreen";
 import LoadingSpinner from "./components/LoadingSpinner";
+import NotLoggedIn from "./components/NotLoggedIn";
+import { client } from "./graphql";
 import i18n from "./i18n";
 import { Router } from "./routing";
 import "./main.css";
+import { useCurrentUserId } from "./utils/useCurrentUserId";
+
+const App: React.FC = () => {
+  const userId = useCurrentUserId();
+  if (userId === null) return <NotLoggedIn />;
+
+  return (
+    <Layout userId={userId}>
+      <Suspense fallback={<LoadingSpinner />}>
+        <Router userId={userId} />
+      </Suspense>
+    </Layout>
+  );
+};
 
 createRoot(document.getElementById("root") as HTMLElement).render(
   <StrictMode>
-    <Provider>
-      {import.meta.env.DEV && <DevTools />}
-      <HydrateAtoms>
-        <Suspense fallback={<LoadingScreen />}>
-          <I18nextProvider i18n={i18n}>
-            <TooltipProvider>
-              <Layout>
-                <Suspense fallback={<LoadingSpinner />}>
-                  <Router />
-                </Suspense>
-              </Layout>
-            </TooltipProvider>
-          </I18nextProvider>
-        </Suspense>
-      </HydrateAtoms>
-    </Provider>
+    <ErrorBoundary>
+      <UrqlProvider value={client}>
+        <Provider>
+          {import.meta.env.DEV && <DevTools />}
+          <Suspense fallback={<LoadingScreen />}>
+            <I18nextProvider i18n={i18n}>
+              <TooltipProvider>
+                <App />
+              </TooltipProvider>
+            </I18nextProvider>
+          </Suspense>
+        </Provider>
+      </UrqlProvider>
+    </ErrorBoundary>
   </StrictMode>,
 );
diff --git a/frontend/src/pages/BrowserSession.tsx b/frontend/src/pages/BrowserSession.tsx
index fbb85c118..6f2e27315 100644
--- a/frontend/src/pages/BrowserSession.tsx
+++ b/frontend/src/pages/BrowserSession.tsx
@@ -12,17 +12,13 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { useAtomValue } from "jotai";
-import { atomFamily } from "jotai/utils";
-import { atomWithQuery } from "jotai-urql";
+import { useQuery } from "urql";
 
-import { mapQueryAtom } from "../atoms";
 import ErrorBoundary from "../components/ErrorBoundary";
 import GraphQLError from "../components/GraphQLError";
 import NotFound from "../components/NotFound";
 import BrowserSessionDetail from "../components/SessionDetail/BrowserSessionDetail";
 import { graphql } from "../gql";
-import { isErr, unwrapErr, unwrapOk } from "../result";
 
 const QUERY = graphql(/* GraphQL */ `
   query BrowserSessionQuery($id: ID!) {
@@ -33,25 +29,15 @@ const QUERY = graphql(/* GraphQL */ `
   }
 `);
 
-const browserSessionFamily = atomFamily((id: string) => {
-  const browserSessionQueryAtom = atomWithQuery({
+const BrowserSession: React.FC<{ id: string }> = ({ id }) => {
+  const [result] = useQuery({
     query: QUERY,
-    getVariables: () => ({ id }),
+    variables: { id },
   });
+  if (result.error) return <GraphQLError error={result.error} />;
+  if (!result.data) throw new Error(); // Suspense mode is enabled
 
-  const browserSessionAtom = mapQueryAtom(
-    browserSessionQueryAtom,
-    (data) => data?.browserSession,
-  );
-
-  return browserSessionAtom;
-});
-
-const BrowserSession: React.FC<{ id: string }> = ({ id }) => {
-  const result = useAtomValue(browserSessionFamily(id));
-  if (isErr(result)) return <GraphQLError error={unwrapErr(result)} />;
-
-  const browserSession = unwrapOk(result);
+  const browserSession = result.data.browserSession;
   if (!browserSession) return <NotFound />;
 
   return (
diff --git a/frontend/src/pages/BrowserSessionList.tsx b/frontend/src/pages/BrowserSessionList.tsx
index f778ce2e9..6cc084281 100644
--- a/frontend/src/pages/BrowserSessionList.tsx
+++ b/frontend/src/pages/BrowserSessionList.tsx
@@ -12,27 +12,10 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { useAtomValue } from "jotai";
-
-import { currentUserIdAtom } from "../atoms";
 import List from "../components/BrowserSessionList";
-import ErrorBoundary from "../components/ErrorBoundary";
-import GraphQLError from "../components/GraphQLError";
-import NotLoggedIn from "../components/NotLoggedIn";
-import { isErr, unwrapErr, unwrapOk } from "../result";
-
-const BrowserSessionList: React.FC = () => {
-  const result = useAtomValue(currentUserIdAtom);
-  if (isErr(result)) return <GraphQLError error={unwrapErr(result)} />;
-
-  const userId = unwrapOk(result);
-  if (userId === null) return <NotLoggedIn />;
 
-  return (
-    <ErrorBoundary>
-      <List userId={userId} />
-    </ErrorBoundary>
-  );
+const BrowserSessionList: React.FC<{ userId: string }> = ({ userId }) => {
+  return <List userId={userId} />;
 };
 
 export default BrowserSessionList;
diff --git a/frontend/src/pages/OAuth2Client.tsx b/frontend/src/pages/OAuth2Client.tsx
index 9840f3261..931e33c39 100644
--- a/frontend/src/pages/OAuth2Client.tsx
+++ b/frontend/src/pages/OAuth2Client.tsx
@@ -12,17 +12,13 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { useAtomValue } from "jotai";
-import { atomFamily } from "jotai/utils";
-import { atomWithQuery } from "jotai-urql";
+import { useQuery } from "urql";
 
-import { mapQueryAtom } from "../atoms";
 import OAuth2ClientDetail from "../components/Client/OAuth2ClientDetail";
 import ErrorBoundary from "../components/ErrorBoundary";
 import GraphQLError from "../components/GraphQLError";
 import NotFound from "../components/NotFound";
 import { graphql } from "../gql";
-import { isErr, unwrapErr, unwrapOk } from "../result";
 
 const QUERY = graphql(/* GraphQL */ `
   query OAuth2ClientQuery($id: ID!) {
@@ -32,25 +28,15 @@ const QUERY = graphql(/* GraphQL */ `
   }
 `);
 
-const oauth2ClientFamily = atomFamily((id: string) => {
-  const oauth2ClientQueryAtom = atomWithQuery({
+const OAuth2Client: React.FC<{ id: string }> = ({ id }) => {
+  const [result] = useQuery({
     query: QUERY,
-    getVariables: () => ({ id }),
+    variables: { id },
   });
+  if (result.error) return <GraphQLError error={result.error} />;
+  if (!result.data) throw new Error(); // Suspense mode is enabled
 
-  const oauth2ClientAtom = mapQueryAtom(
-    oauth2ClientQueryAtom,
-    (data) => data?.oauth2Client,
-  );
-
-  return oauth2ClientAtom;
-});
-
-const OAuth2Client: React.FC<{ id: string }> = ({ id }) => {
-  const result = useAtomValue(oauth2ClientFamily(id));
-  if (isErr(result)) return <GraphQLError error={unwrapErr(result)} />;
-
-  const oauth2Client = unwrapOk(result);
+  const oauth2Client = result.data.oauth2Client;
   if (!oauth2Client) return <NotFound />;
 
   return (
diff --git a/frontend/src/pages/Profile.tsx b/frontend/src/pages/Profile.tsx
index 38473236c..53787dd5b 100644
--- a/frontend/src/pages/Profile.tsx
+++ b/frontend/src/pages/Profile.tsx
@@ -12,22 +12,10 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { useAtomValue } from "jotai";
-
-import { currentUserIdAtom } from "../atoms";
 import ErrorBoundary from "../components/ErrorBoundary";
-import GraphQLError from "../components/GraphQLError";
-import NotLoggedIn from "../components/NotLoggedIn";
 import UserProfile from "../components/UserProfile";
-import { isErr, unwrapErr, unwrapOk } from "../result";
-
-const Profile: React.FC = () => {
-  const result = useAtomValue(currentUserIdAtom);
-  if (isErr(result)) return <GraphQLError error={unwrapErr(result)} />;
-
-  const userId = unwrapOk(result);
-  if (userId === null) return <NotLoggedIn />;
 
+const Profile: React.FC<{ userId: string }> = ({ userId }) => {
   return (
     <ErrorBoundary>
       <UserProfile userId={userId} />
diff --git a/frontend/src/pages/SessionDetail.tsx b/frontend/src/pages/SessionDetail.tsx
index f4de2f0df..dd880cba4 100644
--- a/frontend/src/pages/SessionDetail.tsx
+++ b/frontend/src/pages/SessionDetail.tsx
@@ -12,27 +12,13 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { useAtomValue } from "jotai";
-
-import { currentUserIdAtom } from "../atoms";
-import ErrorBoundary from "../components/ErrorBoundary";
-import GraphQLError from "../components/GraphQLError";
-import NotLoggedIn from "../components/NotLoggedIn";
 import UserSessionDetail from "../components/SessionDetail";
-import { isErr, unwrapErr, unwrapOk } from "../result";
-
-const SessionDetail: React.FC<{ deviceId: string }> = ({ deviceId }) => {
-  const result = useAtomValue(currentUserIdAtom);
-  if (isErr(result)) return <GraphQLError error={unwrapErr(result)} />;
-
-  const userId = unwrapOk(result);
-  if (userId === null) return <NotLoggedIn />;
 
-  return (
-    <ErrorBoundary>
-      <UserSessionDetail userId={userId} deviceId={deviceId} />
-    </ErrorBoundary>
-  );
+const SessionDetail: React.FC<{ userId: string; deviceId: string }> = ({
+  userId,
+  deviceId,
+}) => {
+  return <UserSessionDetail userId={userId} deviceId={deviceId} />;
 };
 
 export default SessionDetail;
diff --git a/frontend/src/pages/SessionsOverview.tsx b/frontend/src/pages/SessionsOverview.tsx
index 34f630c71..1e767bfa0 100644
--- a/frontend/src/pages/SessionsOverview.tsx
+++ b/frontend/src/pages/SessionsOverview.tsx
@@ -12,16 +12,13 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { useAtomValue } from "jotai";
-import { atomWithQuery } from "jotai-urql";
+import { useQuery } from "urql";
 
-import { mapQueryAtom } from "../atoms";
 import ErrorBoundary from "../components/ErrorBoundary";
 import GraphQLError from "../components/GraphQLError";
 import NotLoggedIn from "../components/NotLoggedIn";
 import UserSessionsOverview from "../components/UserSessionsOverview";
 import { graphql } from "../gql";
-import { isErr, unwrapErr, unwrapOk } from "../result";
 
 const QUERY = graphql(/* GraphQL */ `
   query SessionsOverviewQuery {
@@ -36,23 +33,13 @@ const QUERY = graphql(/* GraphQL */ `
   }
 `);
 
-const sessionsOverviewQueryAtom = atomWithQuery({
-  query: QUERY,
-});
-
-const sessionsOverviewAtom = mapQueryAtom(sessionsOverviewQueryAtom, (data) => {
-  if (data.viewer?.__typename === "User") {
-    return data.viewer;
-  }
-
-  return null;
-});
-
 const SessionsOverview: React.FC = () => {
-  const result = useAtomValue(sessionsOverviewAtom);
-  if (isErr(result)) return <GraphQLError error={unwrapErr(result)} />;
+  const [result] = useQuery({ query: QUERY });
+  if (result.error) return <GraphQLError error={result.error} />;
+  if (!result.data) throw new Error(); // Suspense mode is enabled
 
-  const data = unwrapOk(result);
+  const data =
+    result.data.viewer.__typename === "User" ? result.data.viewer : null;
   if (data === null) return <NotLoggedIn />;
 
   return (
diff --git a/frontend/src/pages/VerifyEmail.tsx b/frontend/src/pages/VerifyEmail.tsx
index 3922bf541..05648aef5 100644
--- a/frontend/src/pages/VerifyEmail.tsx
+++ b/frontend/src/pages/VerifyEmail.tsx
@@ -12,17 +12,13 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { useAtomValue } from "jotai";
-import { atomFamily } from "jotai/utils";
-import { atomWithQuery } from "jotai-urql";
 import { useTranslation } from "react-i18next";
+import { useQuery } from "urql";
 
-import { mapQueryAtom } from "../atoms";
 import ErrorBoundary from "../components/ErrorBoundary";
 import GraphQLError from "../components/GraphQLError";
 import VerifyEmailComponent from "../components/VerifyEmail";
 import { graphql } from "../gql";
-import { isErr, unwrapErr, unwrapOk } from "../result";
 
 const QUERY = graphql(/* GraphQL */ `
   query VerifyEmailQuery($id: ID!) {
@@ -32,27 +28,14 @@ const QUERY = graphql(/* GraphQL */ `
   }
 `);
 
-const verifyEmailFamily = atomFamily((id: string) => {
-  const verifyEmailQueryAtom = atomWithQuery({
-    query: QUERY,
-    getVariables: () => ({ id }),
-  });
-
-  const verifyEmailAtom = mapQueryAtom(
-    verifyEmailQueryAtom,
-    (data) => data?.userEmail,
-  );
-
-  return verifyEmailAtom;
-});
-
 const VerifyEmail: React.FC<{ id: string }> = ({ id }) => {
-  const result = useAtomValue(verifyEmailFamily(id));
+  const [result] = useQuery({ query: QUERY, variables: { id } });
   const { t } = useTranslation();
 
-  if (isErr(result)) return <GraphQLError error={unwrapErr(result)} />;
+  if (result.error) return <GraphQLError error={result.error} />;
+  if (!result.data) throw new Error(); // Suspense mode is enabled
 
-  const email = unwrapOk(result);
+  const email = result.data.userEmail;
   if (email == null) return <>{t("frontend.verify_email.unknown_email")}</>;
 
   return (
diff --git a/frontend/src/pagination.ts b/frontend/src/pagination.ts
index 090acd0d0..b557c74dc 100644
--- a/frontend/src/pagination.ts
+++ b/frontend/src/pagination.ts
@@ -12,13 +12,12 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { atom, Atom, WritableAtom } from "jotai";
+import { useState } from "react";
 
 import { PageInfo } from "./gql/graphql";
 
 export const FIRST_PAGE = Symbol("FIRST_PAGE");
 export const LAST_PAGE = Symbol("LAST_PAGE");
-const EMPTY = Symbol("EMPTY");
 
 export type ForwardPagination = {
   first: number;
@@ -36,99 +35,73 @@ export type Pagination = ForwardPagination | BackwardPagination;
 export const isForwardPagination = (
   pagination: Pagination,
 ): pagination is ForwardPagination => {
-  return pagination.hasOwnProperty("first");
+  return Object.hasOwn(pagination, "first");
 };
 
 // Check if the pagination is backward pagination.
 export const isBackwardPagination = (
   pagination: Pagination,
 ): pagination is BackwardPagination => {
-  return pagination.hasOwnProperty("last");
+  return Object.hasOwn(pagination, "last");
 };
 
-// This atom sets the default page size for pagination.
-export const pageSizeAtom = atom(6);
-
 type Action = typeof FIRST_PAGE | typeof LAST_PAGE | Pagination;
 
-export const atomForCurrentPagination = (): WritableAtom<
-  Pagination,
-  [Action],
-  void
-> => {
-  const dataAtom = atom<typeof EMPTY | Pagination>(EMPTY);
-
-  const currentPaginationAtom = atom(
-    (get) => {
-      const data = get(dataAtom);
-      if (data === EMPTY) {
-        return {
-          first: get(pageSizeAtom),
-          after: null,
-        };
-      }
-
-      return data;
-    },
-    (get, set, action: Action) => {
-      if (action === FIRST_PAGE) {
-        set(dataAtom, EMPTY);
-      } else if (action === LAST_PAGE) {
-        set(dataAtom, {
-          last: get(pageSizeAtom),
-          before: null,
-        });
-      } else {
-        set(dataAtom, action);
-      }
-    },
-  );
-
-  currentPaginationAtom.onMount = (setAtom): void => {
-    setAtom(FIRST_PAGE);
+// Hook to handle pagination state.
+export const usePagination = (
+  pageSize = 6,
+): [Pagination, (action: Action) => void] => {
+  const [pagination, setPagination] = useState<Pagination>({
+    first: pageSize,
+    after: null,
+  });
+
+  const handlePagination = (action: Action): void => {
+    if (action === FIRST_PAGE) {
+      setPagination({
+        first: pageSize,
+        after: null,
+      });
+    } else if (action === LAST_PAGE) {
+      setPagination({
+        last: pageSize,
+        before: null,
+      });
+    } else {
+      setPagination(action);
+    }
   };
 
-  return currentPaginationAtom;
+  return [pagination, handlePagination];
 };
 
-// This atom is used to create a pagination atom that gives the previous and
-// next pagination objects, given the current pagination and the page info.
-export const atomWithPagination = (
-  currentPaginationAtom: Atom<Pagination>,
-  pageInfoAtom: Atom<Promise<PageInfo | null>>,
-): Atom<Promise<[BackwardPagination | null, ForwardPagination | null]>> => {
-  const paginationAtom = atom(
-    async (
-      get,
-    ): Promise<[BackwardPagination | null, ForwardPagination | null]> => {
-      const currentPagination = get(currentPaginationAtom);
-      const pageInfo = await get(pageInfoAtom);
-      const hasProbablyPreviousPage =
-        isForwardPagination(currentPagination) &&
-        currentPagination.after !== null;
-      const hasProbablyNextPage =
-        isBackwardPagination(currentPagination) &&
-        currentPagination.before !== null;
-
-      let previousPagination: BackwardPagination | null = null;
-      let nextPagination: ForwardPagination | null = null;
-      if (pageInfo?.hasPreviousPage || hasProbablyPreviousPage) {
-        previousPagination = {
-          last: get(pageSizeAtom),
-          before: pageInfo?.startCursor ?? null,
-        };
-      }
-
-      if (pageInfo?.hasNextPage || hasProbablyNextPage) {
-        nextPagination = {
-          first: get(pageSizeAtom),
-          after: pageInfo?.endCursor ?? null,
-        };
-      }
-
-      return [previousPagination, nextPagination];
-    },
-  );
-
-  return paginationAtom;
+// Compute the previous and next pagination based on the current pagination and the page info.
+export const usePages = (
+  currentPagination: Pagination,
+  pageInfo: PageInfo | null,
+  pageSize = 6,
+): [BackwardPagination | null, ForwardPagination | null] => {
+  const hasProbablyPreviousPage =
+    isForwardPagination(currentPagination) && currentPagination.after !== null;
+  const hasProbablyNextPage =
+    isBackwardPagination(currentPagination) &&
+    currentPagination.before !== null;
+
+  let previousPagination: BackwardPagination | null = null;
+  let nextPagination: ForwardPagination | null = null;
+  if (pageInfo?.hasPreviousPage || hasProbablyPreviousPage) {
+    previousPagination = {
+      last: pageSize,
+      before: pageInfo?.startCursor ?? null,
+    };
+  }
+
+  if (pageInfo?.hasNextPage || hasProbablyNextPage) {
+    nextPagination = {
+      first: pageSize,
+      after: pageInfo?.endCursor ?? null,
+    };
+  }
+
+  return [previousPagination, nextPagination];
 };
diff --git a/frontend/src/routing/Router.tsx b/frontend/src/routing/Router.tsx
index e13b72c26..879dd2008 100644
--- a/frontend/src/routing/Router.tsx
+++ b/frontend/src/routing/Router.tsx
@@ -55,7 +55,7 @@ const unknownRoute = (route: never): never => {
   throw new Error(`Invalid route: ${JSON.stringify(route)}`);
 };
 
-const Router: React.FC = () => {
+const Router: React.FC<{ userId: string }> = ({ userId }) => {
   const [route, redirecting] = useRouteWithRedirect();
   const { t } = useTranslation();
 
@@ -65,13 +65,13 @@ const Router: React.FC = () => {
 
   switch (route.type) {
     case "profile":
-      return <Profile />;
+      return <Profile userId={userId} />;
     case "sessions-overview":
       return <SessionsOverview />;
     case "session":
-      return <SessionDetail deviceId={route.id} />;
+      return <SessionDetail userId={userId} deviceId={route.id} />;
     case "browser-session-list":
-      return <BrowserSessionList />;
+      return <BrowserSessionList userId={userId} />;
     case "client":
       return <OAuth2Client id={route.id} />;
     case "browser-session":
diff --git a/frontend/src/utils/session/useCurrentBrowserSessionId.ts b/frontend/src/utils/session/useCurrentBrowserSessionId.ts
index 019fad379..96e01a24c 100644
--- a/frontend/src/utils/session/useCurrentBrowserSessionId.ts
+++ b/frontend/src/utils/session/useCurrentBrowserSessionId.ts
@@ -12,11 +12,20 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { CombinedError } from "@urql/core";
-import { useAtomValue } from "jotai";
+import { useQuery } from "urql";
 
-import { currentBrowserSessionIdAtom } from "../../atoms";
-import { isOk, unwrapOk, unwrapErr, isErr } from "../../result";
+import { graphql } from "../../gql";
+
+const CURRENT_VIEWER_SESSION_QUERY = graphql(/* GraphQL */ `
+  query CurrentViewerSessionQuery {
+    viewerSession {
+      __typename
+      ... on BrowserSession {
+        id
+      }
+    }
+  }
+`);
 
 /**
  * Query the current browser session id
@@ -24,16 +33,10 @@ import { isOk, unwrapOk, unwrapErr, isErr } from "../../result";
  * throws error when error result
  */
 export const useCurrentBrowserSessionId = (): string | null => {
-  const currentSessionIdResult = useAtomValue(currentBrowserSessionIdAtom);
-
-  if (isErr(currentSessionIdResult)) {
-    // eslint-disable-next-line no-throw-literal
-    throw unwrapErr<CombinedError>(currentSessionIdResult) as Error;
-  }
-
-  if (isOk<string | null, unknown>(currentSessionIdResult)) {
-    return unwrapOk<string | null>(currentSessionIdResult);
-  }
-
-  return null;
+  const [result] = useQuery({ query: CURRENT_VIEWER_SESSION_QUERY });
+  if (result.error) throw result.error;
+  if (!result.data) throw new Error(); // Suspense mode is enabled
+  return result.data.viewerSession.__typename === "BrowserSession"
+    ? result.data.viewerSession.id
+    : null;
 };
diff --git a/frontend/src/utils/useCurrentUserId.tsx b/frontend/src/utils/useCurrentUserId.tsx
new file mode 100644
index 000000000..2bcdd6728
--- /dev/null
+++ b/frontend/src/utils/useCurrentUserId.tsx
@@ -0,0 +1,37 @@
+// Copyright 2023 The Matrix.org Foundation C.I.C.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import { useQuery } from "urql";
+
+import { graphql } from "../gql";
+
+const CURRENT_VIEWER_QUERY = graphql(/* GraphQL */ `
+  query CurrentViewerQuery {
+    viewer {
+      __typename
+      ... on User {
+        id
+      }
+    }
+  }
+`);
+
+export const useCurrentUserId = (): string | null => {
+  const [result] = useQuery({ query: CURRENT_VIEWER_QUERY });
+  if (result.error) throw result.error;
+  if (!result.data) throw new Error(); // Suspense mode is enabled
+  return result.data.viewer.__typename === "User"
+    ? result.data.viewer.id
+    : null;
+};