diff --git a/common/zod/schema.ts b/common/zod/schema.ts
index eb92d704..1a597ca5 100644
--- a/common/zod/schema.ts
+++ b/common/zod/schema.ts
@@ -136,3 +136,33 @@ export type MYDATA = Omit<StructuredUser, "university"> & {
   allowNotifications: boolean;
   allowPeriodicNotifications: boolean;
 };
+
+// chat types, maybe consider creating schemas for this?
+type Room = {
+  id: string;
+  members: {
+    user: {
+      id: string;
+      name: string;
+      imageUrl: string | null;
+    };
+  }[];
+};
+export type RoomPreview = Room & {
+  lastMessage: string | null;
+};
+export type Message = {
+  id: string;
+  roomId: string;
+  senderId: string;
+  content: string;
+  createdAt: Date;
+  isPhoto: boolean;
+  isEdited: boolean;
+  sender: {
+    name: string;
+  };
+};
+export type ContentfulRoom = Room & {
+  messages: Message[];
+};
diff --git a/server/routes/chat.ts b/server/routes/chat.ts
index 8aee2afd..3319fc17 100644
--- a/server/routes/chat.ts
+++ b/server/routes/chat.ts
@@ -6,16 +6,7 @@ import { streamSSE } from "hono/streaming";
 import z from "zod";
 import { prisma } from "../config/prisma.ts";
 
-// TODO: use types from schema
-import type { Message as PrismaMessage } from "@prisma/client";
-export type { Room } from "@prisma/client";
-export type Message = PrismaMessage & {
-  sender: {
-    name: string;
-  };
-};
-
-import { MESSAGE_MAX_LENGTH } from "common/zod/schema.ts";
+import { MESSAGE_MAX_LENGTH, type Message } from "common/zod/schema.ts";
 import { HTTPException } from "hono/http-exception";
 import { getUserID } from "../auth/func.ts";
 import { onMessageSend } from "../email/hooks/onMessageSend.ts";
@@ -192,7 +183,14 @@ const router = new Hono()
       },
     });
 
-    return c.json(resp, 200);
+    return c.json(
+      resp.map((it) => ({
+        ...it,
+        lastMessage: it.messages[0]?.content ?? null,
+        messages: undefined,
+      })),
+      200,
+    );
   })
   // ## room data
   .get(
@@ -305,7 +303,7 @@ const router = new Hono()
           },
         },
       });
-      if (!resp) return c.json({ error: "room not found" }, 404);
+      if (!resp) throw new HTTPException(404, { message: "room not found" });
       return c.json(resp, 200);
     },
   )
@@ -332,7 +330,7 @@ const router = new Hono()
       const { room: roomId } = c.req.valid("param");
       const json = c.req.valid("json");
 
-      const message: PrismaMessage = {
+      const message = {
         ...json,
         roomId,
         id: randomUUIDv7(),
@@ -379,7 +377,9 @@ const router = new Hono()
         }
       })();
       const resp = await prisma.message.create({
-        data: message,
+        data: {
+          ...message,
+        },
       });
       return c.json(resp, 201);
     },
diff --git a/server/routes/users/me.ts b/server/routes/users/me.ts
index e7caef57..06dc07e6 100644
--- a/server/routes/users/me.ts
+++ b/server/routes/users/me.ts
@@ -65,18 +65,25 @@ const route = new Hono()
             : {}),
         },
         include: {
-          fluentLanguages: {
-            select: { language: true },
-          },
-          learningLanguages: {
-            select: { language: true },
-          },
           campus: {
             include: {
               university: true,
             },
           },
           division: true,
+          motherLanguage: true,
+          fluentLanguages: {
+            include: {
+              language: true,
+            },
+          },
+          learningLanguages: {
+            include: {
+              language: true,
+            },
+          },
+          marking: true,
+          markedAs: true,
         },
       });
 
diff --git a/tsconfig.json b/tsconfig.json
index 2390076c..87d7d9c8 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -18,8 +18,8 @@
     "skipLibCheck": true,
     "noFallthroughCasesInSwitch": true,
     "noUncheckedIndexedAccess": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
     // "noUncheckedSideEffectImports": true,
     // ?
     "incremental": true,
diff --git a/web/src/app/[locale]/(auth)/chat/[id]/MessageInput.tsx b/web/src/app/[locale]/(auth)/chat/[id]/MessageInput.tsx
new file mode 100644
index 00000000..d1bab7ca
--- /dev/null
+++ b/web/src/app/[locale]/(auth)/chat/[id]/MessageInput.tsx
@@ -0,0 +1,63 @@
+"use client";
+
+import { client } from "@/client";
+import { useAuthContext } from "@/features/auth/providers/AuthProvider";
+import clsx from "clsx";
+import { MESSAGE_MAX_LENGTH } from "common/zod/schema";
+import { useState } from "react";
+import { AiOutlineSend } from "react-icons/ai";
+
+export function MessageInput({ roomId }: { roomId: string }) {
+  const { idToken: Authorization } = useAuthContext();
+  const [input, setInput] = useState<string>("");
+  const [submitting, setSubmitting] = useState<boolean>(false);
+  const isSendButtonDisabled = submitting || input === "";
+
+  const handleSubmit = async (ev: React.FormEvent<HTMLFormElement>) => {
+    ev.preventDefault();
+    if (submitting) return;
+    setSubmitting(true);
+    setInput("");
+    await client.chat.rooms[":room"].messages.$post({
+      header: { Authorization },
+      param: {
+        room: roomId,
+      },
+      json: {
+        content: input,
+        isPhoto: false,
+      },
+    });
+    setSubmitting(false);
+  };
+
+  return (
+    <div className="">
+      <form className="inline" onSubmit={handleSubmit}>
+        <div className="fixed bottom-[64px] flex w-full flex-row justify-around gap-2 border-gray-300 border-t bg-white p-4 sm:bottom-0">
+          <textarea
+            className={clsx(
+              "field-sizing-content h-auto max-h-[200px] min-h-[40px] w-full resize-none rounded-xl border border-gray-300 p-2 leading-relaxed focus:outline-none focus:ring-2 focus:ring-blue-500",
+              input.length >= MESSAGE_MAX_LENGTH && "bg-red-200",
+            )}
+            rows={1}
+            maxLength={MESSAGE_MAX_LENGTH}
+            value={input}
+            onChange={(ev) => {
+              setInput(ev.target.value);
+            }}
+            onKeyDown={(ev) => {
+              if ((ev.ctrlKey || ev.metaKey) && ev.key === "Enter") {
+                ev.preventDefault();
+                ev.currentTarget.form?.requestSubmit();
+              }
+            }}
+          />
+          <button type="submit" className="" disabled={isSendButtonDisabled}>
+            <AiOutlineSend size={30} color={isSendButtonDisabled ? "gray" : "#0b8bee"} />
+          </button>
+        </div>
+      </form>
+    </div>
+  );
+}
diff --git a/web/src/app/[locale]/(auth)/chat/[id]/client.tsx b/web/src/app/[locale]/(auth)/chat/[id]/client.tsx
new file mode 100644
index 00000000..3ad818a5
--- /dev/null
+++ b/web/src/app/[locale]/(auth)/chat/[id]/client.tsx
@@ -0,0 +1,176 @@
+"use client";
+
+import { client } from "@/client";
+import { useAuthContext } from "@/features/auth/providers/AuthProvider";
+import { handlers } from "@/features/chat/state";
+import { useUserContext } from "@/features/user/userProvider";
+import type { ContentfulRoom } from "common/zod/schema.ts";
+import { useEffect, useRef, useState } from "react";
+
+export function MessageList({
+  data,
+}: {
+  data: ContentfulRoom;
+}) {
+  const [messages, setMessages] = useState(data.messages);
+  const { idToken: Authorization } = useAuthContext();
+
+  useEffect(() => {
+    handlers.onCreate = (message) => {
+      console.log("onCreate: updating messages...");
+      if (data.id === message.roomId) {
+        setMessages((prev) => {
+          // avoid react from automatically optimizing the update away
+          return [...prev, message];
+        });
+        return true;
+      }
+      return false;
+    };
+    handlers.onUpdate = (id, newMessage) => {
+      setMessages((prev) => {
+        for (const m of prev) {
+          if (m.id === id) {
+            m.content = newMessage.content;
+          }
+        }
+        // avoid react from automatically optimizing the update away
+        return [...prev];
+      });
+    };
+    handlers.onDelete = (id) => {
+      setMessages((prev) => {
+        return prev.filter((m) => m.id !== id);
+      });
+    };
+    return () => {
+      handlers.onCreate = undefined;
+      handlers.onUpdate = undefined;
+      handlers.onDelete = undefined;
+    };
+  }, [data.id]);
+  const { me } = useUserContext();
+
+  const target = document.getElementById("scroll-bottom");
+  if (target) {
+    target.scrollIntoView(false);
+  }
+
+  const bottomRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    messages;
+    bottomRef.current?.scrollIntoView({ behavior: "auto" });
+  }, [messages]);
+
+  const [selectedMessageId, setSelectedMessageId] = useState<string | null>(null);
+  const [showConfirmModal, setShowConfirmModal] = useState(false);
+  const [deletingMessageId, setDeletingMessageId] = useState<string | null>(null);
+  const longPressTimer = useRef<NodeJS.Timer | null>(null);
+
+  const handleRequestDelete = (id: string) => {
+    setDeletingMessageId(id);
+    setShowConfirmModal(true);
+  };
+
+  const handleDelete = async () => {
+    if (!deletingMessageId) return;
+
+    try {
+      await client.chat.messages[":message"][":room"].$delete({
+        header: { Authorization },
+        param: { message: deletingMessageId, room: data.id },
+      });
+
+      setMessages((prev) => prev.filter((m) => m.id !== deletingMessageId));
+
+      setDeletingMessageId(null);
+      setShowConfirmModal(false);
+    } catch (error) {
+      alert("削除に失敗しました");
+    }
+  };
+
+  const handleEdit = (id: string) => {
+    console.log("編集", id);
+    setSelectedMessageId(null);
+  };
+
+  const handleLongPressStart = (id: string) => {
+    longPressTimer.current = setTimeout(() => {
+      setSelectedMessageId(id);
+    }, 600); // 600ms 長押しで発動
+  };
+
+  const handleLongPressEnd = () => {
+    if (longPressTimer.current) clearTimeout(longPressTimer.current);
+  };
+
+  return (
+    <ul className="mx-3 mb-[76px] grow overflow-y-scroll sm:pb-0" id="scroll-bottom">
+      {messages.map((m) => (
+        // TODO: handle pictures
+        <li key={m.id}>
+          <div
+            className={`chat ${m.senderId === me.id ? "chat-end" : "chat-start"}`}
+            onTouchStart={() => handleLongPressStart(m.id)}
+            onTouchEnd={handleLongPressEnd}
+            onMouseDown={() => handleLongPressStart(m.id)}
+            onMouseUp={handleLongPressEnd}
+            onMouseLeave={handleLongPressEnd}
+          >
+            <div className="chat-header">
+              <time className="text-xs opacity-50">{m.createdAt.toLocaleString()}</time>
+            </div>
+            <div
+              className={`chat-bubble max-w-[80vw] break-words ${m.senderId === me.id ? "bg-blue-200" : "chat-start"}`}
+            >
+              {m.content.split("\n").map((line, index) => (
+                <div key={`${m.id}-${index}`}>
+                  {line}
+                  <br />
+                </div>
+              ))}
+
+              {selectedMessageId === m.id && (
+                <div className="absolute top-0 right-0 z-10 flex gap-1 rounded border bg-white p-1 shadow">
+                  <button
+                    type="button"
+                    className="text-blue-600 text-sm hover:underline"
+                    onClick={() => handleEdit(m.id)}
+                  >
+                    編集
+                  </button>
+                  <button type="button" onClick={() => handleRequestDelete(m.id)} className="text-red-600">
+                    削除
+                  </button>
+                </div>
+              )}
+            </div>
+            {/* <div className="chat-footer opacity-50">Seen</div> */}
+            {showConfirmModal && (
+              <div className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-40">
+                <div className="rounded-lg bg-white p-4 shadow-lg">
+                  <p className="mb-4">このメッセージを削除しますか？</p>
+                  <div className="flex justify-end gap-3">
+                    <button
+                      type="button"
+                      className="rounded bg-gray-300 px-4 py-2"
+                      onClick={() => setShowConfirmModal(false)}
+                    >
+                      キャンセル
+                    </button>
+                    <button type="button" className="rounded bg-red-500 px-4 py-2 text-white" onClick={handleDelete}>
+                      削除
+                    </button>
+                  </div>
+                </div>
+              </div>
+            )}
+          </div>
+        </li>
+      ))}
+      <div ref={bottomRef} />
+    </ul>
+  );
+}
diff --git a/web/src/app/[locale]/(auth)/chat/[id]/page.tsx b/web/src/app/[locale]/(auth)/chat/[id]/page.tsx
index e6b4ed65..5fbb0f98 100644
--- a/web/src/app/[locale]/(auth)/chat/[id]/page.tsx
+++ b/web/src/app/[locale]/(auth)/chat/[id]/page.tsx
@@ -1,30 +1,29 @@
-"use client";
-
-import { client } from "@/client";
 import Avatar from "@/components/Avatar";
-import Loading from "@/components/Loading";
-import { useAuthContext } from "@/features/auth/providers/AuthProvider";
-import { handlers } from "@/features/chat/state";
-import { useUserContext } from "@/features/user/userProvider";
+import Loading from "@/components/Loading.tsx";
+import { getRoomData } from "@/data/room.server.ts";
+import { getMyData } from "@/data/user.server.ts";
 import { Link } from "@/i18n/navigation";
-import { assert } from "@/lib";
-import { use } from "@/react/useData";
-import clsx from "clsx";
-import type { MYDATA } from "common/zod/schema.ts";
-import { MESSAGE_MAX_LENGTH } from "common/zod/schema.ts";
-import { useParams } from "next/navigation";
-import { useEffect, useRef, useState } from "react";
-import { AiOutlineLeft, AiOutlineSend } from "react-icons/ai";
-
-export default function Page() {
-  const roomId = useParams().id as string;
-  assert(typeof roomId === "string");
+import type { SearchParams } from "@/next/types";
+import type { ContentfulRoom, MYDATA } from "common/zod/schema.ts";
+import { Suspense } from "react";
+import { AiOutlineLeft } from "react-icons/ai";
+import z from "zod";
+import { MessageInput } from "./MessageInput.tsx";
+import { MessageList } from "./client.tsx";
+
+const SearchParamsSchema = z.object({
+  id: z.string(),
+});
+export default async function Page({ searchParams }: { searchParams: SearchParams }) {
+  const roomId = SearchParamsSchema.parse(await searchParams).id;
 
   return (
     <div className="flex h-full">
       <div className="flex-1">
         <div className="flex h-full flex-col">
-          <Load roomId={roomId} />
+          <Suspense fallback={<Loading stage="room data" />}>
+            <Load roomId={roomId} />
+          </Suspense>
           <MessageInput roomId={roomId} />
         </div>
       </div>
@@ -32,282 +31,18 @@ export default function Page() {
   );
 }
 
-function MessageInput({ roomId }: { roomId: string }) {
-  const { idToken: Authorization } = useAuthContext();
-  const [input, setInput] = useState<string>("");
-  const [submitting, setSubmitting] = useState<boolean>(false);
-  const isSendButtonDisabled = submitting || input === "";
-
-  const handleSubmit = async (ev: React.FormEvent<HTMLFormElement>) => {
-    ev.preventDefault();
-    if (submitting) return;
-    setSubmitting(true);
-    setInput("");
-    await client.chat.rooms[":room"].messages.$post({
-      header: { Authorization },
-      param: {
-        room: roomId,
-      },
-      json: {
-        content: input,
-        isPhoto: false,
-      },
-    });
-    setSubmitting(false);
-  };
-
-  return (
-    <div className="">
-      <form className="inline" onSubmit={handleSubmit}>
-        <div className="fixed bottom-[64px] flex w-full flex-row justify-around gap-2 border-gray-300 border-t bg-white p-4 sm:bottom-0">
-          <textarea
-            className={clsx(
-              "field-sizing-content h-auto max-h-[200px] min-h-[40px] w-full resize-none rounded-xl border border-gray-300 p-2 leading-relaxed focus:outline-none focus:ring-2 focus:ring-blue-500",
-              input.length >= MESSAGE_MAX_LENGTH && "bg-red-200",
-            )}
-            rows={1}
-            maxLength={MESSAGE_MAX_LENGTH}
-            value={input}
-            onChange={(ev) => {
-              setInput(ev.target.value);
-            }}
-            onKeyDown={(ev) => {
-              if ((ev.ctrlKey || ev.metaKey) && ev.key === "Enter") {
-                ev.preventDefault();
-                ev.currentTarget.form?.requestSubmit();
-              }
-            }}
-          />
-          <button type="submit" className="" disabled={isSendButtonDisabled}>
-            <AiOutlineSend size={30} color={isSendButtonDisabled ? "gray" : "#0b8bee"} />
-          </button>
-        </div>
-      </form>
-    </div>
-  );
-}
-function Load({ roomId }: { roomId: string }) {
-  const { idToken: Authorization } = useAuthContext();
-  const { me } = useUserContext();
-  const m = use(async () => {
-    const res = await client.chat.rooms[":room"].$get({
-      header: { Authorization },
-      param: {
-        room: roomId,
-      },
-    });
-    const json = await res.json();
-    if ("error" in json) throw new Error(json.error);
-    return json;
-  });
-  if (m.loading) return <Loading stage={"room"} />;
-  if (m.error) {
-    console.error(m.error);
-    return <span className="text-error">something went wrong</span>;
-  }
+async function Load({ roomId }: { roomId: string }) {
+  const me = await getMyData();
+  const room = await getRoomData(roomId);
   return (
     <>
-      <Header room={m.data} me={me} />
-      <MessageList
-        data={m.data.messages.map((m) => ({
-          ...m,
-          createdAt: new Date(m.createdAt),
-        }))}
-        roomId={roomId}
-      />
+      <ChatHeader room={room} me={me} />
+      <MessageList data={room} />
     </>
   );
 }
 
-function MessageList({
-  data,
-  roomId,
-}: {
-  data: {
-    id: string;
-    senderId: string;
-    createdAt: Date;
-    content: string;
-    sender: { name: string };
-  }[];
-  roomId: string;
-}) {
-  const [messages, setMessages] = useState(data);
-  const { idToken: Authorization } = useAuthContext();
-
-  useEffect(() => {
-    handlers.onCreate = (message) => {
-      console.log("onCreate: updating messages...");
-      if (roomId === message.roomId) {
-        setMessages((prev) => {
-          // avoid react from automatically optimizing the update away
-          return [...prev, message];
-        });
-        return true;
-      }
-      return false;
-    };
-    handlers.onUpdate = (id, newMessage) => {
-      setMessages((prev) => {
-        for (const m of prev) {
-          if (m.id === id) {
-            m.content = newMessage.content;
-          }
-        }
-        // avoid react from automatically optimizing the update away
-        return [...prev];
-      });
-    };
-    handlers.onDelete = (id) => {
-      setMessages((prev) => {
-        return prev.filter((m) => m.id !== id);
-      });
-    };
-    return () => {
-      handlers.onCreate = undefined;
-      handlers.onUpdate = undefined;
-      handlers.onDelete = undefined;
-    };
-  }, [roomId]);
-  const { me } = useUserContext();
-
-  const target = document.getElementById("scroll-bottom");
-  if (target) {
-    target.scrollIntoView(false);
-  }
-
-  const bottomRef = useRef<HTMLDivElement>(null);
-
-  useEffect(() => {
-    messages;
-    bottomRef.current?.scrollIntoView({ behavior: "auto" });
-  }, [messages]);
-
-  const [selectedMessageId, setSelectedMessageId] = useState<string | null>(null);
-  const [showConfirmModal, setShowConfirmModal] = useState(false);
-  const [deletingMessageId, setDeletingMessageId] = useState<string | null>(null);
-  const longPressTimer = useRef<NodeJS.Timer | null>(null);
-
-  const handleRequestDelete = (id: string) => {
-    setDeletingMessageId(id);
-    setShowConfirmModal(true);
-  };
-
-  const handleDelete = async () => {
-    if (!deletingMessageId) return;
-
-    try {
-      await client.chat.messages[":message"][":room"].$delete({
-        header: { Authorization },
-        param: { message: deletingMessageId, room: roomId },
-      });
-
-      setMessages((prev) => prev.filter((m) => m.id !== deletingMessageId));
-
-      setDeletingMessageId(null);
-      setShowConfirmModal(false);
-    } catch (error) {
-      alert("削除に失敗しました");
-    }
-  };
-
-  const handleEdit = (id: string) => {
-    console.log("編集", id);
-    setSelectedMessageId(null);
-  };
-
-  const handleLongPressStart = (id: string) => {
-    longPressTimer.current = setTimeout(() => {
-      setSelectedMessageId(id);
-    }, 600); // 600ms 長押しで発動
-  };
-
-  const handleLongPressEnd = () => {
-    if (longPressTimer.current) clearTimeout(longPressTimer.current);
-  };
-
-  return (
-    <ul className="mx-3 mb-[76px] grow overflow-y-scroll sm:pb-0" id="scroll-bottom">
-      {messages.map((m) => (
-        // TODO: handle pictures
-        <li key={m.id}>
-          <div
-            className={`chat ${m.senderId === me.id ? "chat-end" : "chat-start"}`}
-            onTouchStart={() => handleLongPressStart(m.id)}
-            onTouchEnd={handleLongPressEnd}
-            onMouseDown={() => handleLongPressStart(m.id)}
-            onMouseUp={handleLongPressEnd}
-            onMouseLeave={handleLongPressEnd}
-          >
-            <div className="chat-header">
-              <time className="text-xs opacity-50">{m.createdAt.toLocaleString()}</time>
-            </div>
-            <div
-              className={`chat-bubble max-w-[80vw] break-words ${m.senderId === me.id ? "bg-blue-200" : "chat-start"}`}
-            >
-              {m.content.split("\n").map((line, index) => (
-                <div key={`${m.id}-${index}`}>
-                  {line}
-                  <br />
-                </div>
-              ))}
-
-              {selectedMessageId === m.id && (
-                <div className="absolute top-0 right-0 z-10 flex gap-1 rounded border bg-white p-1 shadow">
-                  <button
-                    type="button"
-                    className="text-blue-600 text-sm hover:underline"
-                    onClick={() => handleEdit(m.id)}
-                  >
-                    編集
-                  </button>
-                  <button type="button" onClick={() => handleRequestDelete(m.id)} className="text-red-600">
-                    削除
-                  </button>
-                </div>
-              )}
-            </div>
-            {/* <div className="chat-footer opacity-50">Seen</div> */}
-            {showConfirmModal && (
-              <div className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-40">
-                <div className="rounded-lg bg-white p-4 shadow-lg">
-                  <p className="mb-4">このメッセージを削除しますか？</p>
-                  <div className="flex justify-end gap-3">
-                    <button
-                      type="button"
-                      className="rounded bg-gray-300 px-4 py-2"
-                      onClick={() => setShowConfirmModal(false)}
-                    >
-                      キャンセル
-                    </button>
-                    <button type="button" className="rounded bg-red-500 px-4 py-2 text-white" onClick={handleDelete}>
-                      削除
-                    </button>
-                  </div>
-                </div>
-              </div>
-            )}
-          </div>
-        </li>
-      ))}
-      <div ref={bottomRef} />
-    </ul>
-  );
-}
-
-type Room = {
-  id: string;
-  name: string | null;
-  members: {
-    user: {
-      id: string;
-      name: string;
-      imageUrl: string | null;
-    };
-  }[];
-};
-
-function Header({ room, me }: { room: Room; me: MYDATA }) {
+function ChatHeader({ room, me }: { room: ContentfulRoom; me: MYDATA }) {
   return (
     <>
       <div className="invisible h-[56px]" />
diff --git a/web/src/app/[locale]/(auth)/chat/page.tsx b/web/src/app/[locale]/(auth)/chat/page.tsx
index 52c44906..84ec76d8 100644
--- a/web/src/app/[locale]/(auth)/chat/page.tsx
+++ b/web/src/app/[locale]/(auth)/chat/page.tsx
@@ -1,100 +1,15 @@
-"use client";
+import { getRoomsPreview } from "@/data/room.server.ts";
+import { getMyData } from "@/data/user.server.ts";
+import { Rooms } from "./parts.tsx";
 
-import { client } from "@/client";
-import Avatar from "@/components/Avatar";
-import Loading from "@/components/Loading";
-import { useAuthContext } from "@/features/auth/providers/AuthProvider";
-import { useUserContext } from "@/features/user/userProvider";
-import { Link } from "@/i18n/navigation";
-import { useTranslations } from "next-intl";
-import { useEffect, useState } from "react";
-
-export default function Page() {
+export default async function Page() {
+  const user = await getMyData(); // TODO: we don't need full user data here
+  const rooms = await getRoomsPreview();
   return (
     <>
       <div className="h-full w-full">
-        <Rooms />
+        <Rooms rooms={rooms} userId={user.id} />
       </div>
     </>
   );
 }
-
-function Rooms() {
-  const [rooms, setRooms] = useState<RoomPreview[]>([]);
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState<string | null>(null);
-  const { idToken } = useAuthContext();
-  const t = useTranslations();
-
-  useEffect(() => {
-    async function fetchRooms() {
-      try {
-        const res = await client.chat.rooms.preview.$get({
-          header: { Authorization: idToken },
-        });
-        if (!res.ok) throw new Error("Failed to fetch rooms");
-        const data = await res.json();
-        setRooms(data);
-      } catch {
-        setError("An error has occurred.");
-      } finally {
-        setLoading(false);
-      }
-    }
-    fetchRooms();
-  }, [idToken]);
-
-  if (loading) return <Loading stage="room.info" />;
-  if (error) return <span className="text-error">{error}</span>;
-  if (rooms.length === 0)
-    return (
-      <div className="flex h-full items-center justify-center">
-        <p className="font-bold text-xl">{t("chat.noRoom")}</p>
-      </div>
-    );
-
-  return (
-    <ul>
-      {rooms.map((room) => (
-        <li key={room.id}>
-          <Room room={room} />
-        </li>
-      ))}
-    </ul>
-  );
-}
-
-type RoomPreview = {
-  id: string;
-  messages: {
-    content: string;
-  }[];
-  members: {
-    user: {
-      id: string;
-      imageUrl: string | null;
-      name: string;
-    };
-  }[];
-};
-
-function Room({ room }: { room: RoomPreview }) {
-  const { me } = useUserContext();
-  const firstMember = room.members.filter((m) => m.user.id !== me.id)[0]?.user ?? null;
-
-  return (
-    <div className="border-gray-300 border-b">
-      <Link href={`/chat/${room.id}`} className="flex h-full w-full items-center p-5">
-        <div className="flex items-center justify-center">
-          <Avatar alt={firstMember?.name || "User"} src={firstMember?.imageUrl} size={40} />
-        </div>
-        <div className=" list-col-grow pl-4">
-          <div>{firstMember?.name || "Unknown User"}</div>
-          <div className="max-w-[80vw] truncate font-semibold text-xs opacity-60">
-            {room.messages[0]?.content ?? ""}
-          </div>
-        </div>
-      </Link>
-    </div>
-  );
-}
diff --git a/web/src/app/[locale]/(auth)/chat/parts.tsx b/web/src/app/[locale]/(auth)/chat/parts.tsx
new file mode 100644
index 00000000..653a1102
--- /dev/null
+++ b/web/src/app/[locale]/(auth)/chat/parts.tsx
@@ -0,0 +1,43 @@
+import Avatar from "@/components/Avatar";
+import { Link } from "@/i18n/navigation";
+import type { RoomPreview } from "common/zod/schema";
+import { getTranslations } from "next-intl/server";
+
+export async function Rooms({ rooms, userId }: { rooms: RoomPreview[]; userId: string }) {
+  const t = await getTranslations();
+
+  if (rooms.length === 0)
+    return (
+      <div className="flex h-full items-center justify-center">
+        <p className="font-bold text-xl">{t("chat.noRoom")}</p>
+      </div>
+    );
+
+  return (
+    <ul>
+      {rooms.map((room) => (
+        <li key={room.id}>
+          <Room room={room} userId={userId} />
+        </li>
+      ))}
+    </ul>
+  );
+}
+
+function Room({ room, userId }: { room: RoomPreview; userId: string }) {
+  const firstMember = room.members.filter((m) => m.user.id !== userId)[0]?.user ?? null;
+
+  return (
+    <div className="border-gray-300 border-b">
+      <Link href={`/chat/${room.id}`} className="flex h-full w-full items-center p-5">
+        <div className="flex items-center justify-center">
+          <Avatar alt={firstMember?.name || ""} src={firstMember?.imageUrl} size={40} />
+        </div>
+        <div className=" list-col-grow pl-4">
+          <div>{firstMember?.name || "Unknown User"}</div>
+          <div className="max-w-[80vw] truncate font-semibold text-xs opacity-60">{room.lastMessage ?? ""}</div>
+        </div>
+      </Link>
+    </div>
+  );
+}
diff --git a/web/src/app/[locale]/(auth)/community/page.tsx b/web/src/app/[locale]/(auth)/community/page.tsx
index e4a9a9b2..158dcb1e 100644
--- a/web/src/app/[locale]/(auth)/community/page.tsx
+++ b/web/src/app/[locale]/(auth)/community/page.tsx
@@ -1,7 +1,7 @@
 "use client";
 import { client } from "@/client";
 import Loading from "@/components/Loading.tsx";
-import { PATHNAME_LANG_PREFIX_PATTERN } from "@/consts";
+import { PATHNAME_LANG_PREFIX_PATTERN, sessionStorageKeys } from "@/consts";
 import { useAuthContext } from "@/features/auth/providers/AuthProvider";
 import { formatCardUser } from "@/features/format";
 import UserCard from "@/features/user/UserCard.tsx";
@@ -89,11 +89,10 @@ export default function Page() {
   const { idToken: Authorization } = useAuthContext();
 
   useEffect(() => {
-    const SESSION_SEED_KEY = "ut-bridge:community:session-seed";
-    let sessionSeed = sessionStorage.getItem(SESSION_SEED_KEY);
+    let sessionSeed = sessionStorage.getItem(sessionStorageKeys.communitySessionSeed);
     if (!sessionSeed) {
       sessionSeed = crypto.randomUUID();
-      sessionStorage.setItem(SESSION_SEED_KEY, sessionSeed);
+      sessionStorage.setItem(sessionStorageKeys.communitySessionSeed, sessionSeed);
     }
 
     const ctl = new AbortController();
diff --git a/web/src/app/[locale]/(auth)/layout.tsx b/web/src/app/[locale]/(auth)/layout.tsx
index 8ec463ca..c06b8247 100644
--- a/web/src/app/[locale]/(auth)/layout.tsx
+++ b/web/src/app/[locale]/(auth)/layout.tsx
@@ -1,26 +1,47 @@
-"use client";
-
 import Footer from "@/components/Footer";
-import Header from "@/components/Header";
+import HeaderComponent from "@/components/Header";
+import Loading from "@/components/Loading.tsx";
+import { getMyData } from "@/data/user.server";
 import { AuthProvider } from "@/features/auth/providers/AuthProvider";
 import { ChatNotificationProvider } from "@/features/chat/NotificationProvider";
 import { ToastProvider } from "@/features/toast/ToastProvider";
 import { UserProvider } from "@/features/user/userProvider";
+import { Suspense } from "react";
+
+async function LazyHeader() {
+  const user = await getMyData();
+  return <HeaderComponent user={user} />;
+}
+function Header() {
+  return (
+    <Suspense fallback={<HeaderComponent user={null} />}>
+      <LazyHeader />
+    </Suspense>
+  );
+}
 
 export default function Layout({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="flex min-h-fit flex-col bg-tGray">
+      <div className="flex-grow pb-16">
+        <Header />
+        <Suspense fallback={<Loading stage="(auth)/layout" />}>
+          <LazyLayout>{children}</LazyLayout>
+        </Suspense>
+      </div>
+      <Footer />
+    </div>
+  );
+}
+
+async function LazyLayout({ children }: { children: React.ReactNode }) {
+  const user = await getMyData();
+
   return (
     <AuthProvider>
-      <UserProvider>
+      <UserProvider data={user}>
         <ChatNotificationProvider>
-          <ToastProvider>
-            <div className="flex min-h-fit flex-col bg-tGray">
-              <div className="flex-grow pb-16">
-                <Header />
-                {children}
-              </div>
-              <Footer />
-            </div>
-          </ToastProvider>
+          <ToastProvider>{children}</ToastProvider>
         </ChatNotificationProvider>
       </UserProvider>
     </AuthProvider>
diff --git a/web/src/app/[locale]/(auth)/loading.tsx b/web/src/app/[locale]/(auth)/loading.tsx
new file mode 100644
index 00000000..429fdb64
--- /dev/null
+++ b/web/src/app/[locale]/(auth)/loading.tsx
@@ -0,0 +1,5 @@
+import Loading from "@/components/Loading";
+
+export default function Fallback() {
+  return <Loading stage="/[locale]/(auth)/loading.tsx" />;
+}
diff --git a/web/src/app/[locale]/(auth)/settings/layout.client.tsx b/web/src/app/[locale]/(auth)/settings/layout.client.tsx
new file mode 100644
index 00000000..bdf0f5d5
--- /dev/null
+++ b/web/src/app/[locale]/(auth)/settings/layout.client.tsx
@@ -0,0 +1,66 @@
+"use client";
+
+import SideNav from "@/features/settings/SideNav";
+import { useNormalizedPathname } from "@/hooks/useNormalizedPath";
+import { useTranslations } from "next-intl";
+import Link from "next/link";
+import { AiOutlineLeft } from "react-icons/ai";
+
+function useTransition(pathname: string) {
+  switch (pathname) {
+    case "":
+      return "basic.title";
+    case "/basic":
+      return "basic.title";
+    case "/university":
+      return "university.title";
+    case "/language":
+      return "language.title";
+    case "/topic":
+      return "topic.title";
+    case "/favorite":
+      return "favorite.title";
+    case "/block":
+      return "block.title";
+    case "/privacy":
+      return "other.privacy.title";
+    case "/terms":
+      return "other.terms.title";
+    case "/contact":
+      return "other.contact.title";
+    case "/delete":
+      return "delete.title";
+    case "/email":
+      return "email.title";
+    default:
+      console.error("got unexpected pathname:", pathname);
+      return "basic.title";
+  }
+}
+
+export default function ClientLayout({ children }: { children: React.ReactNode }) {
+  const t = useTranslations("settings");
+  const pathnameAfterSettings = useNormalizedPathname().replace("/settings", "");
+
+  const title = t(useTransition(pathnameAfterSettings));
+
+  return (
+    <>
+      <div className="flex flex-col sm:flex-row">
+        <div className="hidden sm:block">
+          <SideNav />
+        </div>
+        {pathnameAfterSettings !== "" && (
+          <div className="flex items-center justify-between border-gray-300 border-b p-4 text-xl sm:hidden">
+            <Link href={"/settings"}>
+              <AiOutlineLeft />
+            </Link>
+            {title}
+            <div className="w-6" />
+          </div>
+        )}
+        <main className="w-full p-8 sm:mt-30 md:mr-8 xl:mr-24">{children}</main>
+      </div>
+    </>
+  );
+}
diff --git a/web/src/app/[locale]/(auth)/settings/layout.tsx b/web/src/app/[locale]/(auth)/settings/layout.tsx
index 24a576ba..48ad4de8 100644
--- a/web/src/app/[locale]/(auth)/settings/layout.tsx
+++ b/web/src/app/[locale]/(auth)/settings/layout.tsx
@@ -1,69 +1,28 @@
-"use client";
-
-import SideNav from "@/features/settings/SideNav";
+import Loading from "@/components/Loading.tsx";
+import { getGlobalData, getPersonalData } from "@/data/formData.server";
 import { UserFormProvider } from "@/features/settings/UserFormController.tsx";
-import { useNormalizedPathname } from "@/hooks/useNormalizedPath";
-import { Link } from "@/i18n/navigation";
-import { useTranslations } from "next-intl";
-import { AiOutlineLeft } from "react-icons/ai";
+import { Suspense } from "react";
+import ClientLayout from "./layout.client";
 
-function getTransition(pathname: string) {
-  switch (pathname) {
-    case "":
-      return "basic.title";
-    case "/basic":
-      return "basic.title";
-    case "/university":
-      return "university.title";
-    case "/language":
-      return "language.title";
-    case "/topic":
-      return "topic.title";
-    case "/favorite":
-      return "favorite.title";
-    case "/block":
-      return "block.title";
-    case "/privacy":
-      return "other.privacy.title";
-    case "/terms":
-      return "other.terms.title";
-    case "/contact":
-      return "other.contact.title";
-    case "/delete":
-      return "delete.title";
-    case "/email":
-      return "email.title";
-    default:
-      console.error("got unexpected pathname:", pathname);
-      return "basic.title";
-  }
+export default async function Layout({ children }: { children: React.ReactNode }) {
+  return (
+    <>
+      <ClientLayout>
+        <Suspense fallback={<Loading stage="settings data" />}>
+          <DataLoader>{children}</DataLoader>
+        </Suspense>
+      </ClientLayout>
+    </>
+  );
 }
 
-export default function Layout({ children }: { children: React.ReactNode }) {
-  const t = useTranslations("settings");
-  const pathnameAfterSettings = useNormalizedPathname().replace("/settings", "");
-
-  const title = t(getTransition(pathnameAfterSettings));
+async function DataLoader({ children }: { children: React.ReactNode }) {
+  const globalData = await getGlobalData();
+  const personalData = await getPersonalData();
 
   return (
-    <>
-      <UserFormProvider loadPreviousData>
-        <div className="flex flex-col sm:flex-row">
-          <div className="hidden sm:block">
-            <SideNav />
-          </div>
-          {pathnameAfterSettings !== "" && (
-            <div className="flex items-center justify-between border-gray-300 border-b p-4 text-xl sm:hidden">
-              <Link href={"/settings"}>
-                <AiOutlineLeft />
-              </Link>
-              {title}
-              <div className="w-6" />
-            </div>
-          )}
-          <main className="w-full p-8 sm:mt-30 md:mr-8 xl:mr-24">{children}</main>
-        </div>
-      </UserFormProvider>
-    </>
+    <UserFormProvider globalData={globalData} personalData={personalData}>
+      {children}
+    </UserFormProvider>
   );
 }
diff --git a/web/src/app/[locale]/(auth)/settings/loading.tsx b/web/src/app/[locale]/(auth)/settings/loading.tsx
new file mode 100644
index 00000000..8805a325
--- /dev/null
+++ b/web/src/app/[locale]/(auth)/settings/loading.tsx
@@ -0,0 +1,5 @@
+import Loading from "@/components/Loading.tsx";
+
+export default function Fallback() {
+  return <Loading stage="/[locale]/(auth)/settings/loading.tsx" />;
+}
diff --git a/web/src/app/[locale]/(auth)/users/client.tsx b/web/src/app/[locale]/(auth)/users/client.tsx
new file mode 100644
index 00000000..d1025019
--- /dev/null
+++ b/web/src/app/[locale]/(auth)/users/client.tsx
@@ -0,0 +1,194 @@
+"use client";
+
+import { client } from "@/client";
+import Avatar from "@/components/Avatar";
+import { useAuthContext } from "@/features/auth/providers/AuthProvider";
+import type { FlatUser, MYDATA } from "common/zod/schema";
+import { useTranslations } from "next-intl";
+import router from "next/router";
+import { useState } from "react";
+
+export function ClientPage({ me, initUser }: { me: MYDATA; initUser: FlatUser }) {
+  const [user, setUser] = useState(initUser);
+  const { idToken: Authorization } = useAuthContext();
+  const t = useTranslations();
+
+  const [markSpinner, setMarkSpinner] = useState(false);
+  const [chatButtonState, setChatButtonState] = useState<"idle" | "searching" | "creating" | "created">("idle");
+
+  function MarkerButton(props: {
+    if: boolean;
+    children: React.ReactNode;
+    class: string;
+    action: "favorite" | "block" | "unblock" | "unfavorite";
+  }) {
+    if (!props.if) return <></>;
+    if (!user) return;
+    return (
+      <button
+        type="button"
+        className={props.class}
+        onClick={async () => {
+          setMarkSpinner(true);
+          const args = {
+            param: { targetId: user.id },
+            header: { Authorization },
+          };
+          const resp =
+            props.action === "favorite"
+              ? await client.users.markers.favorite[":targetId"].$put(args)
+              : props.action === "block"
+                ? await client.users.markers.blocked[":targetId"].$put(args)
+                : props.action === "unfavorite"
+                  ? await client.users.markers.favorite[":targetId"].$delete(args)
+                  : props.action === "unblock"
+                    ? await client.users.markers.blocked[":targetId"].$delete(args)
+                    : (props.action satisfies never);
+          if (!resp.ok) throw new Error(`Failed to ${props.action} user: ${await resp.text()}`);
+          setMarkSpinner(false);
+          setUser({
+            ...user,
+            markedAs: props.action === "favorite" ? "favorite" : props.action === "block" ? "blocked" : undefined,
+          });
+          console.log(`${props.action}ed user`);
+        }}
+        disabled={markSpinner}
+      >
+        {markSpinner ? <span className="loading loading-spinner" /> : props.children}
+      </button>
+    );
+  }
+
+  return (
+    <div className="rounded-3xl p-16 sm:m-16 sm:bg-white">
+      <div className="mb-10 flex flex-col items-center sm:flex-row sm:justify-around">
+        <div className="">
+          <Avatar src={user.imageUrl} alt={user.name} size={300} className="h-12 w-12 rounded-full" />
+        </div>
+        <div className="w-full sm:w-auto">
+          <div className="flex flex-col items-center sm:items-start">
+            <p className="mb-4 break-all font-bold text-5xl">{user.name}</p>
+            <p className="my-4 text-2xl">{t(`users.${user.gender}`)}</p>
+            <p className="my-4 text-2xl">{user.isForeignStudent ? t("users.foreignStudent") : " "}</p>
+          </div>
+          {user.markedAs !== "blocked" && (
+            <div className="flex w-full flex-wrap justify-around sm:w-auto sm:justify-normal sm:gap-10 ">
+              <button
+                type="button"
+                disabled={chatButtonState !== "idle"}
+                onClick={async () => {
+                  setChatButtonState("searching");
+                  // find previous room
+                  const resp = await client.chat.rooms.dmwith[":user"].$get({
+                    param: {
+                      user: user.id,
+                    },
+                    header: { Authorization },
+                  });
+                  if (!resp.ok) throw new Error("failed to find room");
+                  const prevs = await resp.json();
+                  console.log("previous chat rooms:", prevs);
+                  const prev = prevs[0];
+                  if (prev) {
+                    router.push(`/chat/${prev.id}`);
+                    return;
+                  }
+                  setChatButtonState("creating");
+                  // create new if it doesn't exist
+                  const res = await client.chat.rooms.$post({
+                    json: {
+                      members: [me.id, user.id],
+                    },
+                    header: { Authorization },
+                  });
+                  if (!res.ok) throw new Error(`res is not ok; text: ${await res.text()}`);
+                  const room = await res.json();
+                  setChatButtonState("created");
+                  router.push(`/chat/${room.id}`);
+                }}
+                className="btn flex h-10 w-30 items-center justify-center bg-tBlue text-white"
+              >
+                {chatButtonState === "creating" ? (
+                  <span>
+                    <span className="loading loading-spinner" />
+                    {/* 作成中... */}
+                  </span>
+                ) : chatButtonState === "searching" ? (
+                  <span>
+                    <span className="loading loading-spinner " />
+                    {/* 探し中... */}
+                  </span>
+                ) : (
+                  t("users.chatButton")
+                )}
+              </button>
+              <MarkerButton
+                if={user.markedAs !== "favorite"}
+                class={"btn h-10 w-30 border-tYellow bg-white text-tYellow"}
+                action="favorite"
+              >
+                {t("users.favoriteButton")}
+              </MarkerButton>
+              <MarkerButton
+                if={user.markedAs === "favorite"}
+                class={"btn h-10 w-30 bg-tYellow text-white"}
+                action="unfavorite"
+              >
+                {t("users.removeFavoriteButton")}
+              </MarkerButton>
+            </div>
+          )}
+        </div>
+      </div>
+      <div className="sm:mx-24">
+        <div className="mt-24 mb-12">
+          <h2 className="my-3 font-bold text-3xl underline decoration-2">{t("users.universityInformation")}</h2>
+          <p className="my-3 text-lg">
+            <strong>{t("users.campus")} </strong> {user.campus}
+          </p>
+          <p className="my-3 text-lg">
+            <strong>{t("users.divisions")} </strong> {user.division}
+          </p>
+          <p className="my-3 text-lg">
+            <strong>{t("users.grade")} </strong> {user.grade}
+          </p>
+        </div>
+        <div className="my-12">
+          <h2 className="my-3 font-bold text-3xl underline decoration-2">{t("users.language")} </h2>
+          <p className="my-3 text-lg">
+            <strong>{t("users.motherLanguage")} </strong> {user.motherLanguage}
+          </p>
+          <p className="my-3 text-lg">
+            <strong>{t("users.fluentLanguage")} </strong> <br />
+            {user.fluentLanguages.join(", ")}
+          </p>
+          <p className="my-3 text-lg">
+            <strong>{t("users.learningLanguage")} </strong> <br />
+            {user.learningLanguages.join(", ")}
+          </p>
+        </div>
+        <div className="my-12">
+          <h2 className="my-3 font-bold text-3xl underline decoration-2">{t("users.topic")}</h2>
+          <p className="my-3 text-lg">
+            <strong>{t("users.hobby")} </strong>
+            <br />
+            {user.hobby}
+          </p>
+          <p className="my-3 text-lg">
+            <strong>{t("users.introduction")} </strong>
+            <br />
+            {user.introduction}
+          </p>
+        </div>
+        <div>
+          <MarkerButton if={user.markedAs !== "blocked"} class="btn btn-error" action="block">
+            {t("users.blockButton")}
+          </MarkerButton>
+          <MarkerButton if={user.markedAs === "blocked"} class="btn btn-neutral btn-soft" action="unblock">
+            {t("users.removeBlockButton")}
+          </MarkerButton>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/web/src/app/[locale]/(auth)/users/layout.tsx b/web/src/app/[locale]/(auth)/users/layout.tsx
index 790272de..c1492b79 100644
--- a/web/src/app/[locale]/(auth)/users/layout.tsx
+++ b/web/src/app/[locale]/(auth)/users/layout.tsx
@@ -1,3 +1,3 @@
 export default function Layout({ children }: { children: React.ReactNode }) {
-  return <>{children}</>;
+  return children;
 }
diff --git a/web/src/app/[locale]/(auth)/users/loading.tsx b/web/src/app/[locale]/(auth)/users/loading.tsx
new file mode 100644
index 00000000..22fc3d2e
--- /dev/null
+++ b/web/src/app/[locale]/(auth)/users/loading.tsx
@@ -0,0 +1,5 @@
+import Loading from "@/components/Loading.tsx";
+
+export default function Fallback() {
+  return <Loading stage="layout" />;
+}
diff --git a/web/src/app/[locale]/(auth)/users/page.tsx b/web/src/app/[locale]/(auth)/users/page.tsx
index 9b62345a..76739272 100644
--- a/web/src/app/[locale]/(auth)/users/page.tsx
+++ b/web/src/app/[locale]/(auth)/users/page.tsx
@@ -1,235 +1,33 @@
-"use client";
-import { client } from "@/client";
-import Avatar from "@/components/Avatar";
 import Loading from "@/components/Loading.tsx";
-import { useAuthContext } from "@/features/auth/providers/AuthProvider";
-import { formatUser } from "@/features/format";
-import { useUserContext } from "@/features/user/userProvider.tsx";
-import type { FlatUser } from "common/zod/schema";
-import { useLocale, useTranslations } from "next-intl";
-// import {Link} from "@/i18n/navigation.ts";
-import { useRouter, useSearchParams } from "next/navigation";
-import { useEffect, useState } from "react";
-
-export default function Page() {
-  const [user, setUser] = useState<FlatUser | null>(null);
-  const { idToken: Authorization } = useAuthContext();
-  const { me } = useUserContext();
-  const [loading, setLoading] = useState(true);
-  const router = useRouter();
-  const searchParams = useSearchParams();
-  const id = searchParams.get("id");
-  const locale = useLocale();
-  const t = useTranslations();
-
-  useEffect(() => {
-    async function fetchUser() {
-      try {
-        if (!id) {
-          throw new Error("User Id Not Found!");
-        }
-        const res = await client.users.$get({
-          query: { id: id },
-          header: { Authorization },
-        });
-        const data = await res.json();
-        if (data.length >= 2) throw new Error(`got too many users: got ${data.length}`);
-
-        const first = data[0];
-        if (!first) {
-          throw new Error("User Not Found!");
-        }
-        setUser(formatUser(first, locale));
-      } catch (error) {
-        console.error("Failed to fetch user:", error);
-        router.push("/community");
-      } finally {
-        setLoading(false);
-      }
-    }
-
-    fetchUser();
-  }, [router, Authorization, id, locale]);
-
-  const [markSpinner, setMarkSpinner] = useState(false);
-  const [chatButtonState, setChatButtonState] = useState<"idle" | "searching" | "creating" | "created">("idle");
-
-  function MarkerButton(props: {
-    if: boolean;
-    children: React.ReactNode;
-    class: string;
-    action: "favorite" | "block" | "unblock" | "unfavorite";
-  }) {
-    if (!props.if) return <></>;
-    if (!user) return;
-    return (
-      <button
-        type="button"
-        className={props.class}
-        onClick={async () => {
-          setMarkSpinner(true);
-          const args = {
-            param: { targetId: user.id },
-            header: { Authorization },
-          };
-          const resp =
-            props.action === "favorite"
-              ? await client.users.markers.favorite[":targetId"].$put(args)
-              : props.action === "block"
-                ? await client.users.markers.blocked[":targetId"].$put(args)
-                : props.action === "unfavorite"
-                  ? await client.users.markers.favorite[":targetId"].$delete(args)
-                  : props.action === "unblock"
-                    ? await client.users.markers.blocked[":targetId"].$delete(args)
-                    : (props.action satisfies never);
-          if (!resp.ok) throw new Error(`Failed to ${props.action} user: ${await resp.text()}`);
-          setMarkSpinner(false);
-          setUser({
-            ...user,
-            markedAs: props.action === "favorite" ? "favorite" : props.action === "block" ? "blocked" : undefined,
-          });
-          console.log(`${props.action}ed user`);
-        }}
-        disabled={markSpinner}
-      >
-        {markSpinner ? <span className="loading loading-spinner" /> : props.children}
-      </button>
-    );
-  }
-
-  if (loading) return <Loading stage="users.user" />;
-  if (!user) return <div>User not found</div>;
+import { getMyData, getUserData } from "@/data/user.server";
+import { formatUser } from "@/features/format.ts";
+import type { SearchParams } from "@/next/types";
+import { getLocale } from "next-intl/server";
+import { Suspense } from "react";
+import z from "zod";
+import { ClientPage } from "./client.tsx";
+
+const SearchParamsData = z.object({
+  id: z.string(),
+});
+
+export default async function Page({
+  searchParams,
+}: {
+  searchParams: SearchParams;
+}) {
+  const id = SearchParamsData.parse(await searchParams).id;
 
   return (
-    <div className="rounded-3xl p-16 sm:m-16 sm:bg-white">
-      <div className="mb-10 flex flex-col items-center sm:flex-row sm:justify-around">
-        <div className="">
-          <Avatar src={user.imageUrl} alt={user.name} size={300} className="h-12 w-12 rounded-full" />
-        </div>
-        <div className="w-full sm:w-auto">
-          <div className="flex flex-col items-center sm:items-start">
-            <p className="mb-4 break-all font-bold text-5xl">{user.name}</p>
-            <p className="my-4 text-2xl">{t(`users.${user.gender}`)}</p>
-            <p className="my-4 text-2xl">{user.isForeignStudent ? t("users.foreignStudent") : " "}</p>
-          </div>
-          {user.markedAs !== "blocked" && (
-            <div className="flex w-full flex-wrap justify-around sm:w-auto sm:justify-normal sm:gap-10 ">
-              <button
-                type="button"
-                disabled={chatButtonState !== "idle"}
-                onClick={async () => {
-                  setChatButtonState("searching");
-                  // find previous room
-                  const resp = await client.chat.rooms.dmwith[":user"].$get({
-                    param: {
-                      user: user.id,
-                    },
-                    header: { Authorization },
-                  });
-                  if (!resp.ok) throw new Error("failed to find room");
-                  const prevs = await resp.json();
-                  console.log("previous chat rooms:", prevs);
-                  const prev = prevs[0];
-                  if (prev) {
-                    router.push(`/chat/${prev.id}`);
-                    return;
-                  }
-                  setChatButtonState("creating");
-                  // create new if it doesn't exist
-                  const res = await client.chat.rooms.$post({
-                    json: {
-                      members: [me.id, user.id],
-                    },
-                    header: { Authorization },
-                  });
-                  if (!res.ok) throw new Error(`res is not ok; text: ${await res.text()}`);
-                  const room = await res.json();
-                  setChatButtonState("created");
-                  router.push(`/chat/${room.id}`);
-                }}
-                className="btn flex h-10 w-30 items-center justify-center bg-tBlue text-white"
-              >
-                {chatButtonState === "creating" ? (
-                  <span>
-                    <span className="loading loading-spinner" />
-                    {/* 作成中... */}
-                  </span>
-                ) : chatButtonState === "searching" ? (
-                  <span>
-                    <span className="loading loading-spinner " />
-                    {/* 探し中... */}
-                  </span>
-                ) : (
-                  t("users.chatButton")
-                )}
-              </button>
-              <MarkerButton
-                if={user.markedAs !== "favorite"}
-                class={"btn h-10 w-30 border-tYellow bg-white text-tYellow"}
-                action="favorite"
-              >
-                {t("users.favoriteButton")}
-              </MarkerButton>
-              <MarkerButton
-                if={user.markedAs === "favorite"}
-                class={"btn h-10 w-30 bg-tYellow text-white"}
-                action="unfavorite"
-              >
-                {t("users.removeFavoriteButton")}
-              </MarkerButton>
-            </div>
-          )}
-        </div>
-      </div>
-      <div className="sm:mx-24">
-        <div className="mt-24 mb-12">
-          <h2 className="my-3 font-bold text-3xl underline decoration-2">{t("users.universityInformation")}</h2>
-          <p className="my-3 text-lg">
-            <strong>{t("users.campus")} </strong> {user.campus}
-          </p>
-          <p className="my-3 text-lg">
-            <strong>{t("users.divisions")} </strong> {user.division}
-          </p>
-          <p className="my-3 text-lg">
-            <strong>{t("users.grade")} </strong> {user.grade}
-          </p>
-        </div>
-        <div className="my-12">
-          <h2 className="my-3 font-bold text-3xl underline decoration-2">{t("users.language")} </h2>
-          <p className="my-3 text-lg">
-            <strong>{t("users.motherLanguage")} </strong> {user.motherLanguage}
-          </p>
-          <p className="my-3 text-lg">
-            <strong>{t("users.fluentLanguage")} </strong> <br />
-            {user.fluentLanguages.join(", ")}
-          </p>
-          <p className="my-3 text-lg">
-            <strong>{t("users.learningLanguage")} </strong> <br />
-            {user.learningLanguages.join(", ")}
-          </p>
-        </div>
-        <div className="my-12">
-          <h2 className="my-3 font-bold text-3xl underline decoration-2">{t("users.topic")}</h2>
-          <p className="my-3 text-lg">
-            <strong>{t("users.hobby")} </strong>
-            <br />
-            {user.hobby}
-          </p>
-          <p className="my-3 text-lg">
-            <strong>{t("users.introduction")} </strong>
-            <br />
-            {user.introduction}
-          </p>
-        </div>
-        <div>
-          <MarkerButton if={user.markedAs !== "blocked"} class="btn btn-error" action="block">
-            {t("users.blockButton")}
-          </MarkerButton>
-          <MarkerButton if={user.markedAs === "blocked"} class="btn btn-neutral btn-soft" action="unblock">
-            {t("users.removeBlockButton")}
-          </MarkerButton>
-        </div>
-      </div>
-    </div>
+    <Suspense fallback={<Loading stage="user data" />}>
+      <Loader id={id} />
+    </Suspense>
   );
 }
+
+async function Loader({ id }: { id: string }) {
+  const [me, user] = await Promise.all([getMyData(), getUserData(id)]);
+  const locale = await getLocale();
+
+  return <ClientPage me={me} initUser={formatUser(user, locale)} />;
+}
diff --git a/web/src/app/[locale]/loading.tsx b/web/src/app/[locale]/loading.tsx
index 32f542d1..8cd6f0ad 100644
--- a/web/src/app/[locale]/loading.tsx
+++ b/web/src/app/[locale]/loading.tsx
@@ -1,5 +1,5 @@
 import Loading from "@/components/Loading";
 
-export default function Load() {
-  return <Loading stage="layout" />;
+export default function Fallback() {
+  return <Loading stage="/[locale]/loading.tsx" />;
 }
diff --git a/web/src/app/[locale]/login/layout.tsx b/web/src/app/[locale]/login/layout.tsx
index eb44acf5..512e8300 100644
--- a/web/src/app/[locale]/login/layout.tsx
+++ b/web/src/app/[locale]/login/layout.tsx
@@ -4,7 +4,7 @@ import { ToastProvider } from "@/features/toast/ToastProvider";
 export default function Layout({ children }: { children: React.ReactNode }) {
   return (
     <>
-      <Header />
+      <Header user={null} />
       <ToastProvider>{children}</ToastProvider>
     </>
   );
diff --git a/web/src/app/[locale]/page.tsx b/web/src/app/[locale]/page.tsx
index 9e41839e..615ca002 100644
--- a/web/src/app/[locale]/page.tsx
+++ b/web/src/app/[locale]/page.tsx
@@ -14,7 +14,7 @@ export default function LandingPage() {
   const pathname = usePathname();
   return (
     <>
-      <Header />
+      <Header user={null} />
       <main className="flex w-full flex-grow flex-col-reverse justify-center bg-white pt-10 xl:flex-row">
         <div className="m-auto flex max-w-[500px] flex-col items-center justify-center xl:m-0">
           <Image src={pathname.startsWith("/ja") ? samplePicJa : samplePicEn} alt="app sample image" />
diff --git a/web/src/app/[locale]/registration/layout.tsx b/web/src/app/[locale]/registration/layout.tsx
index 8d0ce4c1..03682bff 100644
--- a/web/src/app/[locale]/registration/layout.tsx
+++ b/web/src/app/[locale]/registration/layout.tsx
@@ -1,15 +1,18 @@
 import Header from "@/components/Header";
+import { getGlobalData } from "@/data/formData.server";
 import { AuthProvider } from "@/features/auth/providers/AuthProvider";
 import { UserFormProvider } from "@/features/settings/UserFormController";
 import { ToastProvider } from "@/features/toast/ToastProvider";
 
-export default function Layout({ children }: { children: React.ReactNode }) {
+export default async function Layout({ children }: { children: React.ReactNode }) {
+  const globalData = await getGlobalData();
+
   return (
     <div className="flex h-full flex-col">
-      <Header />
+      <Header user={null} />
       <AuthProvider>
         <ToastProvider>
-          <UserFormProvider loadPreviousData={false}>
+          <UserFormProvider globalData={globalData} personalData={null}>
             <main className="flex-1 overflow-y-auto bg-tGray">{children}</main>
           </UserFormProvider>
         </ToastProvider>
diff --git a/web/src/components/Avatar.tsx b/web/src/components/Avatar.tsx
index 3a688b8c..80baaaa5 100644
--- a/web/src/components/Avatar.tsx
+++ b/web/src/components/Avatar.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import Image from "next/image";
 import { useEffect, useRef, useState } from "react";
 export default function Avatar({
diff --git a/web/src/components/Header.tsx b/web/src/components/Header.tsx
index 8110cc6c..4f1d14f5 100644
--- a/web/src/components/Header.tsx
+++ b/web/src/components/Header.tsx
@@ -1,21 +1,17 @@
 "use client";
+
 import { useUserContext } from "@/features/user/userProvider.tsx";
 import { useNormalizedPathname } from "@/hooks/useNormalizedPath.ts";
 import { Link } from "@/i18n/navigation.ts";
+import type { MYDATA } from "common/zod/schema";
 import { useTranslations } from "next-intl";
 import { AppIcon } from "./AppIcon.tsx";
 import Avatar from "./Avatar.tsx";
 
-export default function Header() {
+export default function Header({ user }: { user: MYDATA | null }) {
   const t = useTranslations();
   const pathname = useNormalizedPathname();
 
-  const { me } =
-    pathname.startsWith("/registration") || pathname === "/login" || pathname === ""
-      ? { me: null }
-      : // eslint-disable-next-line react-hooks/rules-of-hooks
-        useUserContext();
-
   let title = "";
   if (pathname === "") title = "UT-Bridge";
   else if (pathname.startsWith("/chat")) title = t("chat.title");
@@ -31,10 +27,10 @@ export default function Header() {
     <>
       <header className="fixed top-0 z-10 h-16 w-full bg-tBlue">
         <div className="flex h-16 items-center">
-          <Link href={me ? "/community" : "/"} passHref className="px-4">
+          <Link href={user ? "/community" : "/"} passHref className="px-4">
             <AppIcon width={36} height={36} />
           </Link>
-          <Link href={me ? "/community" : "/"} className="hidden cursor-pointer px-4 text-2xl text-white sm:block">
+          <Link href={user ? "/community" : "/"} className="hidden cursor-pointer px-4 text-2xl text-white sm:block">
             UT-Bridge
           </Link>
           {pathname === "/login" || pathname === "/registration" || pathname === "" ? (
@@ -68,10 +64,12 @@ export default function Header() {
                 {t("settings.title")}
               </Link>
               <p className="absolute right-1/2 translate-x-1/2 font-bold text-white text-xl sm:hidden">{title}</p>
-              <Link href="/settings/basic" className="absolute right-4 flex cursor-pointer items-center gap-4">
-                <Avatar size={40} src={me?.imageUrl} />
-                {me?.name && <p className="hidden text-white text-xl sm:block">{me.name}</p>}
-              </Link>
+              {user && (
+                <Link href="/settings/basic" className="absolute right-4 flex cursor-pointer items-center gap-4">
+                  <Avatar size={40} src={user.imageUrl} />
+                  {user.name && <p className="hidden text-white text-xl sm:block">{user.name}</p>}
+                </Link>
+              )}
             </>
           )}
         </div>
diff --git a/web/src/components/Loading.tsx b/web/src/components/Loading.tsx
index 39fb3c76..13bb3a20 100644
--- a/web/src/components/Loading.tsx
+++ b/web/src/components/Loading.tsx
@@ -1,10 +1,17 @@
-const debug_mode = false;
+const DEBUG_MODE = false;
+
 export default function Loading(_props: { stage: string }) {
+  const server = typeof window === "undefined" ? "Server" : "Client";
+
   return (
     <>
       <div className="fixed top-[50vh] left-0 flex w-full flex-row justify-center">
         <span className="loading loading-xl loading-spinner" />
-        {debug_mode && ` loading stage: ${_props.stage}`}
+        {DEBUG_MODE && (
+          <div className="text-gray-500">
+            [{server}] loading stage: {_props.stage}
+          </div>
+        )}
       </div>
     </>
   );
diff --git a/web/src/consts.ts b/web/src/consts.ts
index cf89092a..ddff65e7 100644
--- a/web/src/consts.ts
+++ b/web/src/consts.ts
@@ -5,3 +5,10 @@ export const PATHNAME_LANG_PREFIX_PATTERN = /^\/(ja|en)/;
 export const STEP_1_DATA_SESSION_STORAGE_KEY = "ut_bridge_step_1_data";
 // registration formのimagePreviewUrlをsession storageに保存するkey
 export const IMAGE_PREVIEW_URL_SESSION_STORAGE_KEY = "ut_bridge_image_preview_url";
+
+export const cookieNames = {
+  idToken: "ut-bridge::id-token",
+};
+export const sessionStorageKeys = {
+  communitySessionSeed: "ut-bridge::community-session-seed",
+};
diff --git a/web/src/data/fetchers/fetch-relational-users.ts b/web/src/data/fetchers/fetch-relational-users.ts
new file mode 100644
index 00000000..05d8121d
--- /dev/null
+++ b/web/src/data/fetchers/fetch-relational-users.ts
@@ -0,0 +1,31 @@
+import { client } from "@/client";
+
+export async function getBlockedUsers(idToken: string) {
+  const blockedRes = await client.community.$get({
+    header: {
+      Authorization: idToken,
+      sessionSeed: "", // we don't care about how users are ordered here
+    },
+    query: {
+      marker: "blocked",
+    },
+  });
+  if (!blockedRes.ok) throw new Error("Failed to fetch blocked users");
+  const blockedUsers = await blockedRes.json();
+  return blockedUsers;
+}
+
+export async function getFavoriteUsers(idToken: string) {
+  const favoriteRes = await client.community.$get({
+    header: {
+      Authorization: idToken,
+      sessionSeed: "", // we don't care about how users are ordered here
+    },
+    query: {
+      marker: "favorite",
+    },
+  });
+  if (!favoriteRes.ok) throw new Error("Failed to fetch favorite users");
+  const favoriteUsers = await favoriteRes.json();
+  return favoriteUsers;
+}
diff --git a/web/src/data/formData.client.ts b/web/src/data/formData.client.ts
new file mode 100644
index 00000000..76a37958
--- /dev/null
+++ b/web/src/data/formData.client.ts
@@ -0,0 +1,30 @@
+"use client";
+
+import { client } from "@/client.ts";
+import { useEffect, useState } from "react";
+
+export function useUniversitySpecificData(universityId: string | undefined) {
+  const [loading, setLoading] = useState(false);
+  const [campuses, setCampuses] = useState<{ id: string; jaName: string; enName: string }[] | null>(null);
+  const [divisions, setDivisions] = useState<{ id: string; jaName: string; enName: string }[] | null>(null);
+
+  useEffect(() => {
+    async function go() {
+      if (!universityId) return;
+      setLoading(true);
+      const campusRes = await client.campus.$get({ query: { id: universityId } });
+      const divisionRes = await client.division.$get({ query: { id: universityId } });
+      if (!campusRes.ok || !divisionRes.ok) {
+        throw new Error("キャンパスまたは学部データの取得に失敗しました");
+      }
+      const campuses = await campusRes.json();
+      const divisions = await divisionRes.json();
+      setCampuses(campuses);
+      setDivisions(divisions);
+      setLoading(false);
+    }
+    go();
+  }, [universityId]);
+
+  return { campuses, divisions, loading };
+}
diff --git a/web/src/data/formData.server.ts b/web/src/data/formData.server.ts
new file mode 100644
index 00000000..d3a0b82d
--- /dev/null
+++ b/web/src/data/formData.server.ts
@@ -0,0 +1,50 @@
+import { client } from "@/client";
+import { formatCardUser } from "@/features/format.ts";
+import type { FlatCardUser, MYDATA } from "common/zod/schema";
+import { getLocale } from "next-intl/server";
+import { getBlockedUsers, getFavoriteUsers } from "./fetchers/fetch-relational-users.ts";
+import { getMyData } from "./user.server.ts";
+import { getIdToken } from "./utils.ts";
+
+export async function getGlobalData(): Promise<{
+  universities: { id: string; jaName: string; enName: string }[];
+  languages: { id: string; jaName: string; enName: string }[];
+}> {
+  const universityRes = await client.university.$get();
+  const languageRes = await client.language.$get();
+
+  if (!universityRes.ok || !languageRes.ok) {
+    throw new Error(
+      `データ取得に失敗しました: {
+        university: ${await universityRes.text()}
+        language: ${await languageRes.text()}
+      }`,
+    );
+  }
+
+  const universities = await universityRes.json();
+  const languages = await languageRes.json();
+
+  return { universities, languages };
+}
+
+export async function getPersonalData(): Promise<{
+  blockedUsers: FlatCardUser[];
+  favoriteUsers: FlatCardUser[];
+  savedData: MYDATA | null;
+}> {
+  const idToken = await getIdToken();
+  const locale = await getLocale();
+
+  const [blockedUsers, favoriteUsers, user] = await Promise.all([
+    getBlockedUsers(idToken),
+    getFavoriteUsers(idToken),
+    getMyData(),
+  ]);
+
+  return {
+    blockedUsers: blockedUsers.users.map((user) => formatCardUser(user, locale)),
+    favoriteUsers: favoriteUsers.users.map((user) => formatCardUser(user, locale)),
+    savedData: user,
+  };
+}
diff --git a/web/src/data/room.server.ts b/web/src/data/room.server.ts
new file mode 100644
index 00000000..b502f17e
--- /dev/null
+++ b/web/src/data/room.server.ts
@@ -0,0 +1,32 @@
+import { client } from "@/client";
+import type { ContentfulRoom, RoomPreview } from "common/zod/schema.ts";
+import { getIdToken } from "./utils.ts";
+
+export async function getRoomsPreview(): Promise<RoomPreview[]> {
+  const idToken = await getIdToken();
+
+  const res = await client.chat.rooms.preview.$get({
+    header: { Authorization: idToken },
+  });
+  const json = await res.json();
+  return json;
+}
+
+export async function getRoomData(roomId: string): Promise<ContentfulRoom> {
+  const idToken = await getIdToken();
+
+  const res = await client.chat.rooms[":room"].$get({
+    header: { Authorization: idToken },
+    param: {
+      room: roomId,
+    },
+  });
+  const json = await res.json();
+  return {
+    ...json,
+    messages: json.messages.map((it) => ({
+      ...it,
+      createdAt: new Date(it.createdAt), // json can't even serialize Date
+    })),
+  };
+}
diff --git a/web/src/data/types.ts b/web/src/data/types.ts
new file mode 100644
index 00000000..e69de29b
diff --git a/web/src/data/user.server.ts b/web/src/data/user.server.ts
new file mode 100644
index 00000000..f0108a22
--- /dev/null
+++ b/web/src/data/user.server.ts
@@ -0,0 +1,34 @@
+import { client } from "@/client";
+import type { MYDATA, StructuredUser } from "common/zod/schema";
+import { getIdToken } from "./utils.ts";
+
+export async function getMyData(): Promise<MYDATA> {
+  const idToken = await getIdToken();
+
+  const res = await client.users.me.$get({
+    header: {
+      Authorization: idToken,
+    },
+  });
+  if (!res.ok) throw new Error("Failed to fetch user");
+  const data = await res.json();
+  if (!data) throw new Error("User not found");
+  return data;
+}
+
+export async function getUserData(id: string): Promise<StructuredUser> {
+  const idToken = await getIdToken();
+
+  const res = await client.users.$get({
+    header: {
+      Authorization: idToken,
+    },
+    query: {
+      id,
+    },
+  });
+  if (!res.ok) throw new Error("Failed to fetch user");
+  const data = (await res.json())[0];
+  if (!data) throw new Error("User not found");
+  return data;
+}
diff --git a/web/src/data/utils.ts b/web/src/data/utils.ts
new file mode 100644
index 00000000..18f34edd
--- /dev/null
+++ b/web/src/data/utils.ts
@@ -0,0 +1,9 @@
+import { cookieNames } from "@/consts.ts";
+import { cookies } from "next/headers";
+import { redirect } from "next/navigation";
+
+export async function getIdToken() {
+  const idToken = (await cookies()).get(cookieNames.idToken)?.value;
+  if (!idToken) throw redirect("/login");
+  return idToken;
+}
diff --git a/web/src/features/auth/functions/cookies.ts b/web/src/features/auth/functions/cookies.ts
new file mode 100644
index 00000000..519d96a7
--- /dev/null
+++ b/web/src/features/auth/functions/cookies.ts
@@ -0,0 +1,10 @@
+import { cookieNames } from "@/consts.ts";
+
+const SECONDS_PER_YEAR = 60 * 60 * 24 * 365;
+
+export function setAuthCookies({ idToken }: { idToken: string }) {
+  document.cookie = `${cookieNames.idToken}=${idToken}; path=/; max-age=${SECONDS_PER_YEAR}`;
+}
+export function removeAuthCookies() {
+  document.cookie = `${cookieNames.idToken}=; path=/; max-age=-1`;
+}
diff --git a/web/src/features/auth/functions/login.ts b/web/src/features/auth/functions/login.ts
index 0b156316..a4e3be43 100644
--- a/web/src/features/auth/functions/login.ts
+++ b/web/src/features/auth/functions/login.ts
@@ -3,6 +3,7 @@ import { signInWithPopup } from "firebase/auth";
 import { useRouter } from "next/navigation";
 import { useCallback, useState } from "react";
 import { auth, provider } from "../config.ts";
+import { setAuthCookies } from "./cookies.ts";
 
 async function login() {
   try {
@@ -18,6 +19,8 @@ async function login() {
     });
     const { exists } = await res.json();
 
+    setAuthCookies({ idToken });
+
     return exists ? { status: "hasData", user: result.user } : { status: "auth-nodata", user: result.user };
   } catch (error) {
     console.error("Login Error:", error);
@@ -41,9 +44,16 @@ export function useGoogleSignIn() {
       case "auth-nodata":
         router.push("/registration");
         break;
-      default:
+      case "noAuth":
+        router.push("/login");
+        break;
+      case "error":
+        console.error("Login Error:", response.error);
         router.push("/login");
         break;
+      default:
+        console.error("Login Error: unknown status", response);
+        break;
     }
   }, [router]);
 
diff --git a/web/src/features/auth/functions/logout.ts b/web/src/features/auth/functions/logout.ts
index 4ac6f94d..776caf95 100644
--- a/web/src/features/auth/functions/logout.ts
+++ b/web/src/features/auth/functions/logout.ts
@@ -2,6 +2,7 @@ import { signOut } from "firebase/auth";
 import { useRouter } from "next/navigation";
 import { useCallback } from "react";
 import { auth } from "../config.ts";
+import { removeAuthCookies } from "./cookies.ts";
 
 export function useGoogleLogout() {
   const router = useRouter();
@@ -9,6 +10,7 @@ export function useGoogleLogout() {
   const logout = useCallback(async () => {
     try {
       await signOut(auth);
+      removeAuthCookies();
       router.push("/login");
     } catch (error) {
       console.error("Logout Error:", error);
diff --git a/web/src/features/chat/state.ts b/web/src/features/chat/state.ts
index 6748395c..e3c7af5a 100644
--- a/web/src/features/chat/state.ts
+++ b/web/src/features/chat/state.ts
@@ -1,4 +1,4 @@
-import type { Message } from "server/routes/chat";
+import type { Message } from "common/zod/schema.ts";
 
 export type Handlers = {
   // retval: prevent default if true
diff --git a/web/src/features/image/resize.ts b/web/src/features/image/resize.ts
new file mode 100644
index 00000000..d154741f
--- /dev/null
+++ b/web/src/features/image/resize.ts
@@ -0,0 +1,48 @@
+export const resizeImage = (file: File, maxWidth = 800, maxHeight = 800): Promise<File> => {
+  return new Promise((resolve, reject) => {
+    const img = new Image();
+    const canvas = document.createElement("canvas");
+    const reader = new FileReader();
+
+    reader.onload = (e) => {
+      img.onload = () => {
+        let { width, height } = img;
+
+        // 比率を保ってリサイズ
+        if (width > maxWidth || height > maxHeight) {
+          const scale = Math.min(maxWidth / width, maxHeight / height);
+          width *= scale;
+          height *= scale;
+        }
+
+        canvas.width = width;
+        canvas.height = height;
+
+        const ctx = canvas.getContext("2d");
+        if (!ctx) {
+          reject(new Error("Canvas 2D context is not supported"));
+          return;
+        }
+        ctx.drawImage(img, 0, 0, width, height);
+
+        canvas.toBlob((blob) => {
+          if (blob) {
+            resolve(new File([blob], file.name, { type: file.type }));
+          } else {
+            reject(new Error("Blob conversion failed"));
+          }
+        }, file.type);
+      };
+      img.onerror = reject;
+      const result = e.target?.result;
+      if (typeof result === "string") {
+        img.src = result;
+      } else {
+        reject(new Error("FileReader result is not a string"));
+      }
+    };
+
+    reader.onerror = reject;
+    reader.readAsDataURL(file);
+  });
+};
diff --git a/web/src/features/settings/UserFormController.tsx b/web/src/features/settings/UserFormController.tsx
index 7eb20e3a..8ac12785 100644
--- a/web/src/features/settings/UserFormController.tsx
+++ b/web/src/features/settings/UserFormController.tsx
@@ -1,67 +1,19 @@
 "use client";
+
 import { client } from "@/client";
-import Loading from "@/components/Loading.tsx";
+import { getBlockedUsers, getFavoriteUsers } from "@/data/fetchers/fetch-relational-users.ts";
+import { useUniversitySpecificData } from "@/data/formData.client.ts";
 import { formatCardUser } from "@/features/format";
-import { useUserContext } from "@/features/user/userProvider";
 import type { CreateUser, FlatCardUser, MYDATA } from "common/zod/schema.ts";
 import { useLocale, useTranslations } from "next-intl";
-import { createContext, useCallback, useContext, useEffect, useState } from "react";
-import { useRef } from "react";
+import { createContext, useCallback, useContext, useState } from "react";
 import { useAuthContext } from "../auth/providers/AuthProvider.tsx";
 import { upload } from "../image/ImageUpload.tsx";
+import { resizeImage } from "../image/resize.ts";
 import { useToast } from "../toast/ToastProvider.tsx";
 
 export type Status = "ready" | "error" | "success" | "processing";
 
-const resizeImage = (file: File, maxWidth = 800, maxHeight = 800): Promise<File> => {
-  return new Promise((resolve, reject) => {
-    const img = new Image();
-    const canvas = document.createElement("canvas");
-    const reader = new FileReader();
-
-    reader.onload = (e) => {
-      img.onload = () => {
-        let { width, height } = img;
-
-        // 比率を保ってリサイズ
-        if (width > maxWidth || height > maxHeight) {
-          const scale = Math.min(maxWidth / width, maxHeight / height);
-          width *= scale;
-          height *= scale;
-        }
-
-        canvas.width = width;
-        canvas.height = height;
-
-        const ctx = canvas.getContext("2d");
-        if (!ctx) {
-          reject(new Error("Canvas 2D context is not supported"));
-          return;
-        }
-        ctx.drawImage(img, 0, 0, width, height);
-
-        canvas.toBlob((blob) => {
-          if (blob) {
-            resolve(new File([blob], file.name, { type: file.type }));
-          } else {
-            reject(new Error("Blob conversion failed"));
-          }
-        }, file.type);
-      };
-      img.onerror = reject;
-      const result = e.target?.result;
-      if (typeof result === "string") {
-        img.src = result;
-      } else {
-        reject(new Error("FileReader result is not a string"));
-      }
-    };
-
-    reader.onerror = reject;
-    reader.readAsDataURL(file);
-  });
-};
-
 type UserFormContextType = {
   loadingUniversitySpecificData: boolean;
   formData: Partial<CreateUser>;
@@ -72,7 +24,7 @@ type UserFormContextType = {
   setImagePreviewURL: React.Dispatch<React.SetStateAction<string | null>>;
   handleImageFileChange: (file: File) => void;
   uploadImage: () => Promise<void>;
-  onSuccess: (data: Partial<MYDATA>) => void;
+  onSuccess: (data: MYDATA) => void;
   onFailure: () => void;
   submitPatch: (e: React.FormEvent) => void;
   status: Status;
@@ -98,63 +50,51 @@ export const useUserFormContext = () => {
 
 export const UserFormProvider = ({
   children,
-  loadPreviousData,
+  globalData: { universities, languages },
+  personalData,
 }: {
   children: React.ReactNode;
-  loadPreviousData: boolean;
+  globalData: {
+    universities: { id: string; jaName: string; enName: string }[];
+    languages: { id: string; jaName: string; enName: string }[];
+  };
+  personalData: {
+    savedData: MYDATA | null;
+    blockedUsers: FlatCardUser[];
+    favoriteUsers: FlatCardUser[];
+  } | null;
 }) => {
   const t = useTranslations();
   const toast = useToast();
   const locale = useLocale();
-  let me: MYDATA | null = null;
-  const setMyData = useRef<((data: Partial<MYDATA>) => void) | null>(null);
   const [status, setStatus] = useState<Status>("ready");
-  // HELP: how do I optionally use another context? loadPreviousData will never change
-  if (loadPreviousData) {
-    const usercx = useUserContext();
-    me = usercx.me;
-    setMyData.current = (data) => usercx.updateMyData((prev) => ({ ...prev, ...data }));
-  }
+
   const { idToken: Authorization } = useAuthContext();
 
-  const [formData, setFormData] = useState<Partial<CreateUser & { loading: true }>>({ loading: true });
   const [image, setImage] = useState<File | null>(null);
   const [imagePreviewURL, setImagePreviewURL] = useState<string | null>(null);
 
-  const [universities, setUniversities] = useState<{ id: string; jaName: string; enName: string }[]>([]);
-  const [campuses, setCampuses] = useState<{ id: string; jaName: string; enName: string }[]>([]);
-  const [divisions, setDivisions] = useState<{ id: string; jaName: string; enName: string }[]>([]);
-  const [languages, setLanguages] = useState<{ id: string; jaName: string; enName: string }[]>([]);
-  const [favoriteUsers, setFavoriteUsers] = useState<FlatCardUser[]>([]);
-  const [blockedUsers, setBlockedUsers] = useState<FlatCardUser[]>([]);
-  const [loadingUniversitySpecificData, setLoadingUniversitySpecificData] = useState(false);
-
-  // static データ取得（大学 & 言語）
-  useEffect(() => {
-    const fetchData = async () => {
-      try {
-        const [universityRes, languageRes] = await Promise.all([client.university.$get(), client.language.$get()]);
-
-        if (!universityRes.ok || !languageRes.ok) {
-          throw new Error(
-            `データ取得に失敗しました: {
-              university: ${await universityRes.text()}
-              language: ${await languageRes.text()}
-            }`,
-          );
-        }
-
-        const [universitiesData, languagesData] = await Promise.all([universityRes.json(), languageRes.json()]);
-
-        setUniversities(universitiesData);
-        setLanguages(languagesData);
-      } catch (error) {
-        console.error("大学・言語データの取得に失敗しました", error);
-      }
+  // need help: what the heck
+  const [_userData, setUserData] = useState<MYDATA | null>(personalData?.savedData ?? null);
+  const [formData, setFormData] = useState<Partial<CreateUser>>(() => {
+    return {
+      ...personalData?.savedData,
+      imageUrl: personalData?.savedData?.imageUrl ?? undefined,
+      customEmail: personalData?.savedData?.customEmail ?? undefined,
+      universityId: personalData?.savedData?.campus.university.id ?? undefined,
+      campusId: personalData?.savedData?.campus.id ?? undefined,
+      divisionId: personalData?.savedData?.division.id ?? undefined,
+      motherLanguageId: personalData?.savedData?.motherLanguage.id ?? undefined,
+      fluentLanguageIds: personalData?.savedData?.fluentLanguages.map((lang) => lang.language.id) ?? [],
+      learningLanguageIds: personalData?.savedData?.learningLanguages.map((lang) => lang.language.id) ?? [],
     };
+  });
 
-    fetchData();
-  }, []);
+  const {
+    campuses,
+    divisions,
+    loading: loadingUniversitySpecificData,
+  } = useUniversitySpecificData(formData.universityId);
 
   const submitPatch = async (e: React.FormEvent) => {
     e.preventDefault();
@@ -191,7 +131,9 @@ export const UserFormProvider = ({
         throw new Error(`レスポンスステータス: ${res.status}, response: ${await res.text()}`);
       }
       setStatus("success");
-      onSuccess(await res.json());
+      const data = await res.json();
+      onSuccess(data);
+      setUserData(data);
     } catch (error) {
       console.error("ユーザー情報の更新に失敗しました", error);
       setStatus("error");
@@ -203,134 +145,34 @@ export const UserFormProvider = ({
     }
   };
 
-  // 大学固有の static データを取得
-  useEffect(() => {
-    if (!formData.universityId) return;
-    const fetchCampusAndDivisions = async () => {
-      console.log(`fetching university-specific data for university ${formData.universityId} ...`);
-      setLoadingUniversitySpecificData(true);
-      try {
-        const [campusRes, divisionRes] = await Promise.all([
-          client.campus.$get({ query: { id: formData.universityId } }),
-          client.division.$get({ query: { id: formData.universityId } }),
-        ]);
-
-        if (!campusRes.ok || !divisionRes.ok) {
-          throw new Error("キャンパスまたは学部データの取得に失敗しました");
-        }
-
-        setCampuses(await campusRes.json());
-        setDivisions(await divisionRes.json());
-      } catch (error) {
-        console.error(error);
-      }
-      setLoadingUniversitySpecificData(false);
-    };
-
-    fetchCampusAndDivisions();
-  }, [formData.universityId]);
-
-  // ユーザー情報を取得
-  useEffect(() => {
-    const fetchMyData = async () => {
-      try {
-        if (!loadPreviousData) {
-          setFormData({});
-        } else {
-          const meRes = await client.users.me.$get({ header: { Authorization } });
-          if (!meRes.ok) {
-            throw new Error("Failed to fetch user data!");
-          }
-          const me = await meRes.json();
-          if (!me) {
-            throw new Error("User Not Found in Database!");
-          }
-
-          console.log(
-            `
-            [useFormData] me = 
-            defaultEmail: ${me.defaultEmail}
-            customEmail: ${me.customEmail}
-          `,
-          );
-
-          setFormData({
-            ...me,
-            customEmail: me.customEmail ?? undefined,
-            imageUrl: me.imageUrl ?? undefined,
-            universityId: me.campus.university.id,
-            motherLanguageId: me.motherLanguage.id,
-            fluentLanguageIds: me.fluentLanguages.map((entry) => entry.language.id),
-            learningLanguageIds: me.learningLanguages.map((entry) => entry.language.id),
-            campusId: me.campus.id,
-            divisionId: me.division.id,
-          });
-        }
-      } catch (err) {
-        console.error("ユーザー情報の取得に失敗しました", err);
-      }
-    };
-
-    fetchMyData();
-  }, [loadPreviousData, Authorization]);
+  const [favoriteUsers, setFavoriteUsers] = useState<FlatCardUser[]>(personalData?.favoriteUsers ?? []);
+  const [blockedUsers, setBlockedUsers] = useState<FlatCardUser[]>(personalData?.blockedUsers ?? []);
 
   const refetchFavoriteUsers = useCallback(async () => {
     try {
-      if (!me) return;
-      const res = await client.community.$get({
-        header: { Authorization, sessionSeed: "" }, // we don't care about the order of users here
-        query: {
-          except: me.id,
-          marker: "favorite",
-        },
-      });
-
-      if (!res.ok) {
-        throw new Error(await res.text());
-      }
-
-      const data = await res.json();
+      const data = await getFavoriteUsers(Authorization);
       setFavoriteUsers(data.users.map((user) => formatCardUser(user, locale)));
     } catch (error) {
       console.error("お気に入りユーザーの取得に失敗しました", error);
     }
-  }, [me, Authorization, locale]);
+  }, [Authorization, locale]);
 
   const refetchBlockedUsers = useCallback(async () => {
     try {
-      if (!me) return;
-      const res = await client.community.$get({
-        header: { Authorization, sessionSeed: "" }, // we don't care about how users are ordered here
-        query: {
-          except: me.id,
-          marker: "blocked",
-        },
-      });
-
-      if (!res.ok) {
-        throw new Error(`ブロックユーザーの取得失敗: ${await res.text()}`);
-      }
-
-      const data = await res.json();
+      const data = await getBlockedUsers(Authorization);
       setBlockedUsers(data.users.map((user) => formatCardUser(user, locale)));
     } catch (error) {
       console.error("ブロックユーザーの取得に失敗しました", error);
     }
-  }, [me, Authorization, locale]);
-
-  useEffect(() => {
-    refetchFavoriteUsers();
-    refetchBlockedUsers();
-  }, [refetchFavoriteUsers, refetchBlockedUsers]);
+  }, [Authorization, locale]);
 
   const onSuccess = useCallback(
-    (data: Partial<MYDATA>) => {
-      console.log("ok 1");
+    (data: MYDATA) => {
       toast.push({
         color: "success",
         message: t("settings.success"),
       });
-      setMyData.current?.(data);
+      setUserData(data);
     },
     [toast, t],
   );
@@ -429,7 +271,6 @@ export const UserFormProvider = ({
     });
   };
 
-  if (formData.loading) return <Loading stage="formdata" />;
   return (
     <UserFormContext.Provider
       value={{
@@ -447,8 +288,8 @@ export const UserFormProvider = ({
         status,
         submitPatch,
         universities,
-        campuses,
-        divisions,
+        campuses: campuses || [],
+        divisions: divisions || [],
         languages,
         favoriteUsers,
         blockedUsers,
diff --git a/web/src/features/user/userProvider.tsx b/web/src/features/user/userProvider.tsx
index 17ce1734..81317d3f 100644
--- a/web/src/features/user/userProvider.tsx
+++ b/web/src/features/user/userProvider.tsx
@@ -1,10 +1,7 @@
 "use client";
-import { client } from "@/client";
 import Loading from "@/components/Loading.tsx";
 import type { MYDATA } from "common/zod/schema";
-import { useRouter } from "next/navigation";
-import { type ReactNode, createContext, useCallback, useContext, useEffect, useState } from "react";
-import { useAuthContext } from "../auth/providers/AuthProvider.tsx";
+import { type ReactNode, createContext, useCallback, useContext, useState } from "react";
 
 type ContextProps = {
   me: MYDATA;
@@ -13,32 +10,8 @@ type ContextProps = {
 
 const UserContext = createContext<ContextProps | undefined>(undefined);
 
-export function UserProvider({ children }: { children: ReactNode }) {
-  const [me, setMe] = useState<MYDATA | null>(null);
-  const { idToken: Authorization } = useAuthContext();
-  const router = useRouter();
-
-  useEffect(() => {
-    if (!Authorization) {
-      router.push("/login");
-      return;
-    }
-    client.users.me
-      .$get({
-        header: { Authorization },
-      })
-      .then(async (res) => {
-        if (!res.ok) {
-          throw new Error(await res.text());
-        }
-        const data = await res.json();
-        setMe(data);
-      })
-      .catch((err) => {
-        console.error(err);
-        router.push("/registration");
-      });
-  }, [Authorization, router]);
+export function UserProvider({ children, data }: { children: ReactNode; data: MYDATA }) {
+  const [me, setMe] = useState<MYDATA>(data);
 
   const updateMyData = useCallback((callback: (prev: MYDATA) => MYDATA) => {
     setMe((prev) => (prev ? callback(prev) : prev));
diff --git a/web/src/next/types.ts b/web/src/next/types.ts
new file mode 100644
index 00000000..70232f5f
--- /dev/null
+++ b/web/src/next/types.ts
@@ -0,0 +1,2 @@
+// next can't type searchParams ew
+export type SearchParams = Promise<{ [key: string]: string | string[] | undefined }>;
diff --git a/web/src/react/useData.tsx b/web/src/next/useData.tsx
similarity index 100%
rename from web/src/react/useData.tsx
rename to web/src/next/useData.tsx