diff --git a/apps/web/src/components/callPopout.tsx b/apps/web/src/components/callPopout.tsx
index bbe0f91..79d5fb7 100644
--- a/apps/web/src/components/callPopout.tsx
+++ b/apps/web/src/components/callPopout.tsx
@@ -1,8 +1,15 @@
+import { lazy, Suspense } from "react";
+
 import { useCall } from "@tensamin/call/state";
-import Popout from "@tensamin/call/popout";
+
+const Popout = lazy(() => import("@tensamin/call/popout"));
 
 export default function CallPopout() {
   const active = useCall((state) => state.state !== "closed");
 
-  return active ? <Popout /> : null;
+  return active ? (
+    <Suspense fallback={null}>
+      <Popout />
+    </Suspense>
+  ) : null;
 }
diff --git a/apps/web/src/components/callSidebarBox.tsx b/apps/web/src/components/callSidebarBox.tsx
index 89d7905..5480af2 100644
--- a/apps/web/src/components/callSidebarBox.tsx
+++ b/apps/web/src/components/callSidebarBox.tsx
@@ -1,8 +1,15 @@
+import { lazy, Suspense } from "react";
+
 import { useCall } from "@tensamin/call/state";
-import SidebarBox from "@tensamin/call/sidebarBox";
+
+const SidebarBox = lazy(() => import("@tensamin/call/sidebarBox"));
 
 export default function CallSidebarBox() {
   const active = useCall((state) => state.state !== "closed");
 
-  return active ? <SidebarBox /> : null;
+  return active ? (
+    <Suspense fallback={null}>
+      <SidebarBox />
+    </Suspense>
+  ) : null;
 }
diff --git a/apps/web/src/components/navbar.tsx b/apps/web/src/components/navbar.tsx
index e980a0d..19c367f 100644
--- a/apps/web/src/components/navbar.tsx
+++ b/apps/web/src/components/navbar.tsx
@@ -28,7 +28,6 @@ import { useState } from "react";
 import { SidebarTrigger, useSidebar } from "@methanium/ui";
 import { WindowControls as Controls } from "@methanium/ui";
 import { useSession } from "@tensamin/identity/session";
-import { joinCall } from "@tensamin/call/store";
 import Profile from "./modals/profile";
 
 export default function Navbar({ forMobile }: { forMobile: boolean }) {
@@ -140,7 +139,11 @@ export default function Navbar({ forMobile }: { forMobile: boolean }) {
             {currentCalls.length === 0 ? (
               <Button
                 disabled={callState !== "closed"}
-                onClick={() => void joinCall(id)}
+                onClick={() => {
+                  void import("@tensamin/call/store").then(({ joinCall }) =>
+                    joinCall(id),
+                  );
+                }}
                 className="w-9 h-9! aspect-square rounded-lg"
                 variant="outline"
               >
@@ -150,10 +153,12 @@ export default function Navbar({ forMobile }: { forMobile: boolean }) {
               <Button
                 disabled={callState !== "closed"}
                 onClick={() => {
-                  void joinCall(
-                    id,
-                    currentCalls[0].CallSecret,
-                    currentCalls[0].CallId,
+                  void import("@tensamin/call/store").then(({ joinCall }) =>
+                    joinCall(
+                      id,
+                      currentCalls[0].CallSecret,
+                      currentCalls[0].CallId,
+                    ),
                   );
                 }}
                 className="w-9 h-9! aspect-square rounded-lg"
@@ -180,9 +185,12 @@ export default function Navbar({ forMobile }: { forMobile: boolean }) {
                       <SelectItem
                         value={call.CallId}
                         key={call.CallId}
-                        onSelect={() =>
-                          void joinCall(id, call.CallSecret, call.CallId)
-                        }
+                        onSelect={() => {
+                          void import("@tensamin/call/store").then(
+                            ({ joinCall }) =>
+                              joinCall(id, call.CallSecret, call.CallId),
+                          );
+                        }}
                       >
                         {displayCallId(call.CallId)}
                       </SelectItem>
diff --git a/apps/web/src/index.tsx b/apps/web/src/index.tsx
index 4503ecf..d0b9da2 100644
--- a/apps/web/src/index.tsx
+++ b/apps/web/src/index.tsx
@@ -13,13 +13,8 @@ import "@methanium/ui/index.css";
 
 import NotFound from "@/routes/404";
 import RouteLoader from "@/components/routeLoader";
-import Home from "@/routes/app/home";
-import AppShell from "@/routes/app/shell";
-import Login from "@/routes/screens/login";
 
 import { createSettingsRoute } from "@tensamin/settings";
-import ChatScreen from "@tensamin/chat/screen";
-import CallScreen from "@tensamin/call/screen";
 
 import DeeplinkContext from "@tensamin/tauri/deeplinkHandler";
 import PwaRuntime from "@tensamin/pwa/runtime";
@@ -27,7 +22,14 @@ import PwaRuntime from "@tensamin/pwa/runtime";
 import { ErrorScreen, ThemeProvider, useTheme } from "@methanium/ui";
 import z from "zod";
 
-import { useEffect, useRef, useState, type ReactNode } from "react";
+import {
+  lazy,
+  Suspense,
+  useEffect,
+  useRef,
+  useState,
+  type ReactNode,
+} from "react";
 
 import Storage from "@tensamin/storage/context";
 import { log } from "@tensamin/shared/log";
@@ -37,6 +39,13 @@ import { useLocation, useNavigate } from "@tanstack/react-router";
 import { useIsMobile, Toaster, TooltipProvider } from "@methanium/ui";
 import { HotkeysProvider } from "@tensamin/hotkeys";
 
+const Home = lazy(() => import("@/routes/app/home"));
+const ChatScreen = lazy(() => import("@tensamin/chat/screen"));
+const CallScreen = lazy(() => import("@tensamin/call/screen"));
+const Login = lazy(() => import("@/routes/screens/login"));
+const appShellImport = import("@/routes/app/shell");
+const AppShell = lazy(() => appShellImport);
+
 const wrapper = document.getElementById("root");
 
 if (!wrapper) {
@@ -251,7 +260,9 @@ function RootShell() {
               <HotkeysProvider>
                 <ThemeStorageBridge />
                 <LoginWrapper>
-                  <Outlet />
+                  <Suspense fallback={<RouteLoader />}>
+                    <Outlet />
+                  </Suspense>
                 </LoginWrapper>
               </HotkeysProvider>
             </Storage>
diff --git a/apps/web/src/routes/app/shell.tsx b/apps/web/src/routes/app/shell.tsx
index cb40759..6d0a66c 100644
--- a/apps/web/src/routes/app/shell.tsx
+++ b/apps/web/src/routes/app/shell.tsx
@@ -1,6 +1,7 @@
-import { useEffect, useRef } from "react";
+import { Suspense, useEffect, useRef } from "react";
 import { Outlet, useNavigate } from "@tanstack/react-router";
 
+import RouteLoader from "@/components/routeLoader";
 import AppLayout from "./layout";
 import CallInit from "@/components/callRuntimeInit";
 import CacheSync from "@tensamin/cache/sync";
@@ -60,7 +61,9 @@ export default function AppShell() {
                   <AppLayout>
                     <ChatContext>
                       <NotificationsProvider>
-                        <Outlet />
+                        <Suspense fallback={<RouteLoader />}>
+                          <Outlet />
+                        </Suspense>
                       </NotificationsProvider>
                     </ChatContext>
                   </AppLayout>
diff --git a/packages/chat/src/components/input.tsx b/packages/chat/src/components/input.tsx
index 0181063..a605af6 100644
--- a/packages/chat/src/components/input.tsx
+++ b/packages/chat/src/components/input.tsx
@@ -10,7 +10,14 @@ import {
   PopoverTrigger,
 } from "@methanium/ui";
 import { useStorage } from "@tensamin/storage/context";
-import React, { useCallback, useEffect, useState, useRef } from "react";
+import React, {
+  lazy,
+  Suspense,
+  useCallback,
+  useEffect,
+  useState,
+  useRef,
+} from "react";
 import { Button } from "@methanium/ui";
 
 import { Plus, Laugh, FileVideo, SendHorizonal } from "lucide-react";
@@ -26,8 +33,9 @@ import ReplyBox from "./replyBox";
 import { useHotkey } from "@tensamin/hotkeys";
 import { editLastMessageHotkey } from "../hotkeys";
 import { useUser } from "@tensamin/identity/context";
-import EmojiPicker from "./emoji/emojiPicker";
-import GifPicker from "./media/gifPicker";
+
+const EmojiPicker = lazy(() => import("./emoji/emojiPicker"));
+const GifPicker = lazy(() => import("./media/gifPicker"));
 
 export default function InputComponent({
   value,
@@ -351,13 +359,15 @@ export default function InputComponent({
                   )}
                 />
                 <PopoverContent className="w-auto p-0">
-                  <EmojiPicker
-                    onSelect={(shortcode) => {
-                      setValue(`${value}${shortcode} `);
-                      recordUse(shortcode);
-                      setEmojiPopoverOpen(false);
-                    }}
-                  />
+                  <Suspense fallback={null}>
+                    <EmojiPicker
+                      onSelect={(shortcode) => {
+                        setValue(`${value}${shortcode} `);
+                        recordUse(shortcode);
+                        setEmojiPopoverOpen(false);
+                      }}
+                    />
+                  </Suspense>
                 </PopoverContent>
               </Popover>
               {isMobile ? (
@@ -371,12 +381,14 @@ export default function InputComponent({
                   </DrawerTrigger>
                   <DrawerContent className="h-[80dvh]">
                     <div className="min-h-0 flex-1 p-3">
-                      <GifPicker
-                        onSelect={(url) => {
-                          void handleSubmit(url, true);
-                          setGifPopoverOpen(false);
-                        }}
-                      />
+                      <Suspense fallback={null}>
+                        <GifPicker
+                          onSelect={(url) => {
+                            void handleSubmit(url, true);
+                            setGifPopoverOpen(false);
+                          }}
+                        />
+                      </Suspense>
                     </div>
                   </DrawerContent>
                 </Drawer>
@@ -408,14 +420,16 @@ export default function InputComponent({
                       className="absolute left-0 top-0 z-10 h-4 w-4 cursor-nwse-resize"
                       onPointerDown={handleGifPopoverResizeStart}
                     />
-                    <GifPicker
-                      resizeHeight={gifPopoverSize?.height}
-                      resizeWidth={gifPopoverSize?.width}
-                      onSelect={(url) => {
-                        void handleSubmit(url, true);
-                        setGifPopoverOpen(false);
-                      }}
-                    />
+                    <Suspense fallback={null}>
+                      <GifPicker
+                        resizeHeight={gifPopoverSize?.height}
+                        resizeWidth={gifPopoverSize?.width}
+                        onSelect={(url) => {
+                          void handleSubmit(url, true);
+                          setGifPopoverOpen(false);
+                        }}
+                      />
+                    </Suspense>
                   </PopoverContent>
                 </Popover>
               )}
diff --git a/packages/chat/src/components/message.tsx b/packages/chat/src/components/message.tsx
index 1eb7190..c9f8988 100644
--- a/packages/chat/src/components/message.tsx
+++ b/packages/chat/src/components/message.tsx
@@ -1,11 +1,7 @@
 import type { RawMessage } from "../values";
 import { AlertTriangle, Check, CheckLine, RefreshCw } from "lucide-react";
 import { memo, useCallback, useEffect, useRef, useState } from "react";
-import {
-  type SelectedUser,
-  useUser,
-  useUserFields,
-} from "@tensamin/identity/context";
+import { type SelectedUser, useUserFields } from "@tensamin/identity/context";
 
 import {
   Avatar,
@@ -73,7 +69,6 @@ function MessageComponent({
   // Message states
   const { load } = useStorage();
   const { send, sendSealedRelay } = useMTP();
-  const { getIota } = useUser();
   const [ownId, setOwnId] = useState(0);
   useEffect(() => {
     load("user_id").then(setOwnId);
@@ -81,34 +76,38 @@ function MessageComponent({
   const messageStateReadUpdate = useCallback(async () => {
     const readConfirmations = await load("settings.read_confirmations");
 
-    if (!user?.UserId || ownId === 0) return;
+    if (!user?.UserId || !message.RelayMessageId || ownId === 0) return;
     const [ownIota, peerIota] = await Promise.all([
-      getIota(ownId),
-      getIota(user.UserId),
+      send("GetIotaData", { UserId: ownId }),
+      send("GetIotaData", { UserId: user.UserId }),
     ]);
+    if (ownIota.type !== "GetIotaData" || peerIota.type !== "GetIotaData") {
+      throw new Error("Could not resolve an Iota for this receipt");
+    }
     const response = await sendSealedRelay(
       "MessageState",
       {
         ChatPartnerId: user.UserId,
+        RelayMessageId: message.RelayMessageId,
         EventAt: Date.now(),
         MessageState: readConfirmations ? "read" : "received",
         ReceiverId: user.UserId,
       },
       {
-        nextHop: { kind: "iota", id: ownIota.IotaId },
+        nextHop: { kind: "iota", id: ownIota.data.IotaId },
         finalRecipientId: user.UserId,
         metadataRecipients: [
-          { value: ownIota.PublicKey, encoding: "base64" },
-          { value: peerIota.PublicKey, encoding: "base64" },
+          { value: ownIota.data.PublicKey, encoding: "base64" },
+          { value: peerIota.data.PublicKey, encoding: "base64" },
         ],
         contentRecipients: [
-          { value: ownIota.PublicKey, encoding: "base64" },
-          { value: peerIota.PublicKey, encoding: "base64" },
+          { value: ownIota.data.PublicKey, encoding: "base64" },
+          { value: peerIota.data.PublicKey, encoding: "base64" },
         ],
       },
     );
     requireRelaySuccess(response);
-  }, [getIota, load, ownId, sendSealedRelay, user]);
+  }, [load, message.RelayMessageId, ownId, send, sendSealedRelay, user]);
   useEffect(() => {
     if (message.SenderId === ownId || ownId === 0) return;
 
diff --git a/packages/settings/src/manifest.ts b/packages/settings/src/manifest.ts
index b4f9887..abfb0cb 100644
--- a/packages/settings/src/manifest.ts
+++ b/packages/settings/src/manifest.ts
@@ -1,30 +1,20 @@
+import { lazy } from "react";
 import { settingsNavigation } from "./navigation";
 
-import SettingsIndex from "./pages/index";
-import Profile from "./pages/profile";
-import Security from "./pages/security";
-import Chat from "./pages/chat";
-import Call from "./pages/call";
-import Cache from "./pages/cache";
-import Theme from "./pages/theme";
-import Accessibility from "./pages/accessibility";
-import Hotkeys from "./pages/hotkeys";
-import Licenses from "./pages/licenses";
-
 const pageComponents = {
-  profile: Profile,
-  security: Security,
-  chat: Chat,
-  call: Call,
-  cache: Cache,
-  theme: Theme,
-  accessibility: Accessibility,
-  hotkeys: Hotkeys,
-  licenses: Licenses,
+  profile: lazy(() => import("./pages/profile")),
+  security: lazy(() => import("./pages/security")),
+  chat: lazy(() => import("./pages/chat")),
+  call: lazy(() => import("./pages/call")),
+  cache: lazy(() => import("./pages/cache")),
+  theme: lazy(() => import("./pages/theme")),
+  accessibility: lazy(() => import("./pages/accessibility")),
+  hotkeys: lazy(() => import("./pages/hotkeys")),
+  licenses: lazy(() => import("./pages/licenses")),
 } as const;
 
 export const settingsPages = [
-  { path: "/", component: SettingsIndex },
+  { path: "/", component: lazy(() => import("./pages/index")) },
   ...settingsNavigation.map((page) => ({
     ...page,
     component: pageComponents[page.path],