diff --git a/application/client/babel.config.js b/application/client/babel.config.js
index c3c574591a..6a0079da4e 100644
--- a/application/client/babel.config.js
+++ b/application/client/babel.config.js
@@ -4,16 +4,15 @@ module.exports = {
     [
       "@babel/preset-env",
       {
-        targets: "ie 11",
-        corejs: "3",
-        modules: "commonjs",
+        targets: "last 1 Chrome version",
+        modules: false,
         useBuiltIns: false,
       },
     ],
     [
       "@babel/preset-react",
       {
-        development: true,
+        development: process.env.NODE_ENV !== "production",
         runtime: "automatic",
       },
     ],
diff --git a/application/client/package.json b/application/client/package.json
index 9f8e80a6a8..a899353261 100644
--- a/application/client/package.json
+++ b/application/client/package.json
@@ -5,7 +5,7 @@
   "license": "MPL-2.0",
   "author": "CyberAgent, Inc.",
   "scripts": {
-    "build": "NODE_ENV=development webpack",
+    "build": "NODE_ENV=production webpack",
     "typecheck": "tsc"
   },
   "dependencies": {
@@ -57,6 +57,7 @@
     "@babel/preset-env": "7.28.3",
     "@babel/preset-react": "7.27.1",
     "@babel/preset-typescript": "7.27.1",
+    "@tailwindcss/postcss": "4.2.2",
     "@tsconfig/strictest": "2.0.8",
     "@types/bluebird": "3.5.42",
     "@types/common-tags": "1.8.4",
@@ -83,6 +84,7 @@
     "postcss-loader": "8.2.0",
     "postcss-preset-env": "10.4.0",
     "react-markdown": "10.1.0",
+    "tailwindcss": "4.2.2",
     "typescript": "5.9.3",
     "webpack": "5.102.1",
     "webpack-cli": "6.0.1",
diff --git a/application/client/postcss.config.js b/application/client/postcss.config.js
index d7ee920b94..bcb66acf3f 100644
--- a/application/client/postcss.config.js
+++ b/application/client/postcss.config.js
@@ -1,9 +1,11 @@
+const tailwindcss = require("@tailwindcss/postcss");
 const postcssImport = require("postcss-import");
 const postcssPresetEnv = require("postcss-preset-env");
 
 module.exports = {
   plugins: [
     postcssImport(),
+    tailwindcss(),
     postcssPresetEnv({
       stage: 3,
     }),
diff --git a/application/client/src/auth/validation.ts b/application/client/src/auth/validation.ts
index 2a83bbfb15..7a9a8f0ff6 100644
--- a/application/client/src/auth/validation.ts
+++ b/application/client/src/auth/validation.ts
@@ -1,9 +1,9 @@
-import { FormErrors } from "redux-form";
-
 import { AuthFormData } from "@web-speed-hackathon-2026/client/src/auth/types";
 
-export const validate = (values: AuthFormData): FormErrors<AuthFormData> => {
-  const errors: FormErrors<AuthFormData> = {};
+export type AuthFormErrors = Partial<Record<keyof AuthFormData, string>>;
+
+export const validate = (values: AuthFormData): AuthFormErrors => {
+  const errors: AuthFormErrors = {};
 
   const normalizedName = values.name?.trim() || "";
   const normalizedPassword = values.password?.trim() || "";
diff --git a/application/client/src/buildinfo.ts b/application/client/src/buildinfo.ts
index 48b5dbef9b..6302960b67 100644
--- a/application/client/src/buildinfo.ts
+++ b/application/client/src/buildinfo.ts
@@ -3,6 +3,7 @@ declare global {
     BUILD_DATE: string | undefined;
     COMMIT_HASH: string | undefined;
   };
+  var __BOOTSTRAP_DATA__: Record<string, unknown> | undefined;
 }
 
 /** @note 競技用サーバーで参照します。可能な限りコード内に含めてください */
diff --git a/application/client/src/components/application/AccountMenu.tsx b/application/client/src/components/application/AccountMenu.tsx
index b6df12bbab..2fe03f34c2 100644
--- a/application/client/src/components/application/AccountMenu.tsx
+++ b/application/client/src/components/application/AccountMenu.tsx
@@ -40,7 +40,10 @@ export const AccountMenu = ({ user, onLogout }: Props) => {
         <img
           alt={user.profileImage.alt}
           className="h-10 w-10 shrink-0 rounded-full object-cover"
+          decoding="async"
+          height="40"
           src={getProfileImagePath(user.profileImage.id)}
+          width="40"
         />
         <div className="hidden min-w-0 flex-1 text-left lg:block">
           <div className="text-cax-text truncate text-sm font-bold">{user.name}</div>
diff --git a/application/client/src/components/application/SearchPage.tsx b/application/client/src/components/application/SearchPage.tsx
index e99045de45..9d86945521 100644
--- a/application/client/src/components/application/SearchPage.tsx
+++ b/application/client/src/components/application/SearchPage.tsx
@@ -9,7 +9,6 @@ import {
 } from "@web-speed-hackathon-2026/client/src/search/services";
 import { SearchFormData } from "@web-speed-hackathon-2026/client/src/search/types";
 import { validate } from "@web-speed-hackathon-2026/client/src/search/validation";
-import { analyzeSentiment } from "@web-speed-hackathon-2026/client/src/utils/negaposi_analyzer";
 
 import { Button } from "../foundation/Button";
 
@@ -22,6 +21,7 @@ const SearchInput = ({ input, meta }: WrappedFieldProps) => (
   <div className="flex flex-1 flex-col">
     <input
       {...input}
+      aria-label="検索 (例: キーワード since:2025-01-01 until:2025-12-31)"
       className={`flex-1 rounded border px-4 py-2 focus:outline-none ${
         meta.touched && meta.error
           ? "border-cax-danger focus:border-cax-danger"
@@ -53,20 +53,32 @@ const SearchPageComponent = ({
     }
 
     let isMounted = true;
-    analyzeSentiment(parsed.keywords)
-      .then((result) => {
-        if (isMounted) {
-          setIsNegative(result.label === "negative");
-        }
-      })
-      .catch(() => {
-        if (isMounted) {
-          setIsNegative(false);
-        }
-      });
+    const run = () => {
+      void import("@web-speed-hackathon-2026/client/src/utils/negaposi_analyzer")
+        .then(({ analyzeSentiment }) => analyzeSentiment(parsed.keywords))
+        .then((result) => {
+          if (isMounted) {
+            setIsNegative(result.label === "negative");
+          }
+        })
+        .catch(() => {
+          if (isMounted) {
+            setIsNegative(false);
+          }
+        });
+    };
+
+    const timerId = window.setTimeout(() => {
+      if ("requestIdleCallback" in window) {
+        window.requestIdleCallback(run, { timeout: 5000 });
+      } else {
+        run();
+      }
+    }, 2000);
 
     return () => {
       isMounted = false;
+      window.clearTimeout(timerId);
     };
   }, [parsed.keywords]);
 
@@ -82,7 +94,7 @@ const SearchPageComponent = ({
       parts.push(`${parsed.untilDate} 以前`);
     }
     return parts.join(" ");
-  }, [parsed]);
+  }, [parsed.keywords, parsed.sinceDate, parsed.untilDate]);
 
   const onSubmit = (values: SearchFormData) => {
     const sanitizedText = sanitizeSearchText(values.searchText.trim());
diff --git a/application/client/src/components/auth_modal/AuthModalPage.tsx b/application/client/src/components/auth_modal/AuthModalPage.tsx
index 08996f9afd..1035b0afd2 100644
--- a/application/client/src/components/auth_modal/AuthModalPage.tsx
+++ b/application/client/src/components/auth_modal/AuthModalPage.tsx
@@ -1,82 +1,134 @@
-import { useSelector } from "react-redux";
-import { Field, formValueSelector, InjectedFormProps, reduxForm } from "redux-form";
+import { ChangeEvent, FormEvent, useCallback, useMemo, useState } from "react";
 
 import { AuthFormData } from "@web-speed-hackathon-2026/client/src/auth/types";
 import { validate } from "@web-speed-hackathon-2026/client/src/auth/validation";
-import { FormInputField } from "@web-speed-hackathon-2026/client/src/components/foundation/FormInputField";
+import { Input } from "@web-speed-hackathon-2026/client/src/components/foundation/Input";
 import { Link } from "@web-speed-hackathon-2026/client/src/components/foundation/Link";
 import { ModalErrorMessage } from "@web-speed-hackathon-2026/client/src/components/modal/ModalErrorMessage";
 import { ModalSubmitButton } from "@web-speed-hackathon-2026/client/src/components/modal/ModalSubmitButton";
 
 interface Props {
   onRequestCloseModal: () => void;
+  onSubmit: (values: AuthFormData) => Promise<string | null>;
 }
 
-const AuthModalPageComponent = ({
-  onRequestCloseModal,
-  handleSubmit,
-  error,
-  invalid,
-  submitting,
-  initialValues,
-  change,
-}: Props & InjectedFormProps<AuthFormData, Props>) => {
-  const currentType: "signin" | "signup" = useSelector((state) =>
-    // @ts-ignore: formValueSelectorの型付けが弱いため、型に嘘をつく
-    formValueSelector("auth")(state, "type"),
+const INITIAL_VALUES: AuthFormData = {
+  type: "signin",
+  username: "",
+  name: "",
+  password: "",
+};
+
+export const AuthModalPage = ({ onRequestCloseModal, onSubmit }: Props) => {
+  const [values, setValues] = useState<AuthFormData>(INITIAL_VALUES);
+  const [submitError, setSubmitError] = useState<string | null>(null);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  const errors = useMemo(() => validate(values), [values]);
+  const isInvalid = Object.values(errors).some(Boolean);
+
+  const handleChange = useCallback(
+    (key: keyof AuthFormData) => (event: ChangeEvent<HTMLInputElement>) => {
+      const nextValue = event.target.value;
+      setSubmitError(null);
+      setValues((current) => ({
+        ...current,
+        [key]: nextValue,
+      }));
+    },
+    [],
+  );
+
+  const handleToggleType = useCallback(() => {
+    setSubmitError(null);
+    setValues((current) => ({
+      ...INITIAL_VALUES,
+      type: current.type === "signin" ? "signup" : "signin",
+    }));
+  }, []);
+
+  const handleSubmit = useCallback(
+    async (event: FormEvent<HTMLFormElement>) => {
+      event.preventDefault();
+      if (isSubmitting || isInvalid) {
+        return;
+      }
+
+      setIsSubmitting(true);
+      setSubmitError(null);
+      try {
+        const error = await onSubmit(values);
+        if (error !== null) {
+          setSubmitError(error);
+        }
+      } finally {
+        setIsSubmitting(false);
+      }
+    },
+    [isInvalid, isSubmitting, onSubmit, values],
   );
-  const type = currentType ?? initialValues.type;
 
   return (
     <form className="grid gap-y-6" onSubmit={handleSubmit}>
       <h2 className="text-center text-2xl font-bold">
-        {type === "signin" ? "サインイン" : "新規登録"}
+        {values.type === "signin" ? "サインイン" : "新規登録"}
       </h2>
 
       <div className="flex justify-center">
-        <button
-          className="text-cax-brand underline"
-          onClick={() => change("type", type === "signin" ? "signup" : "signin")}
-          type="button"
-        >
-          {type === "signin" ? "初めての方はこちら" : "サインインはこちら"}
+        <button className="text-cax-brand underline" onClick={handleToggleType} type="button">
+          {values.type === "signin" ? "初めての方はこちら" : "サインインはこちら"}
         </button>
       </div>
 
       <div className="grid gap-y-2">
-        <Field
-          name="username"
-          component={FormInputField}
-          props={{
-            label: "ユーザー名",
-            leftItem: <span className="text-cax-text-subtle leading-none">@</span>,
-            autoComplete: "username",
-          }}
-        />
-
-        {type === "signup" && (
-          <Field
-            name="name"
-            component={FormInputField}
-            props={{
-              label: "名前",
-              autoComplete: "nickname",
-            }}
+        <div className="flex flex-col gap-y-1">
+          <label className="block text-sm" htmlFor="auth-username">
+            ユーザー名
+          </label>
+          <Input
+            id="auth-username"
+            aria-invalid={errors.username ? true : undefined}
+            autoComplete="username"
+            leftItem={<span className="text-cax-text-subtle leading-none">@</span>}
+            value={values.username}
+            onChange={handleChange("username")}
+          />
+          {errors.username ? <span className="text-cax-danger text-xs">{errors.username}</span> : null}
+        </div>
+
+        {values.type === "signup" ? (
+          <div className="flex flex-col gap-y-1">
+            <label className="block text-sm" htmlFor="auth-name">
+              名前
+            </label>
+            <Input
+              id="auth-name"
+              aria-invalid={errors.name ? true : undefined}
+              autoComplete="nickname"
+              value={values.name}
+              onChange={handleChange("name")}
+            />
+            {errors.name ? <span className="text-cax-danger text-xs">{errors.name}</span> : null}
+          </div>
+        ) : null}
+
+        <div className="flex flex-col gap-y-1">
+          <label className="block text-sm" htmlFor="auth-password">
+            パスワード
+          </label>
+          <Input
+            id="auth-password"
+            aria-invalid={errors.password ? true : undefined}
+            autoComplete={values.type === "signup" ? "new-password" : "current-password"}
+            type="password"
+            value={values.password}
+            onChange={handleChange("password")}
           />
-        )}
-
-        <Field
-          name="password"
-          component={FormInputField}
-          props={{
-            label: "パスワード",
-            type: "password",
-            autoComplete: type === "signup" ? "new-password" : "current-password",
-          }}
-        />
+          {errors.password ? <span className="text-cax-danger text-xs">{errors.password}</span> : null}
+        </div>
       </div>
 
-      {type === "signup" ? (
+      {values.type === "signup" ? (
         <p>
           <Link className="text-cax-brand underline" onClick={onRequestCloseModal} to="/terms">
             利用規約
@@ -85,19 +137,11 @@ const AuthModalPageComponent = ({
         </p>
       ) : null}
 
-      <ModalSubmitButton disabled={submitting || invalid} loading={submitting}>
-        {type === "signin" ? "サインイン" : "登録する"}
+      <ModalSubmitButton disabled={isSubmitting || isInvalid} loading={isSubmitting}>
+        {values.type === "signin" ? "サインイン" : "登録する"}
       </ModalSubmitButton>
 
-      <ModalErrorMessage>{error}</ModalErrorMessage>
+      <ModalErrorMessage>{submitError}</ModalErrorMessage>
     </form>
   );
 };
-
-export const AuthModalPage = reduxForm<AuthFormData, Props>({
-  form: "auth",
-  validate,
-  initialValues: {
-    type: "signin",
-  },
-})(AuthModalPageComponent);
diff --git a/application/client/src/components/crok/AssistantMarkdown.tsx b/application/client/src/components/crok/AssistantMarkdown.tsx
new file mode 100644
index 0000000000..b1e7b668ae
--- /dev/null
+++ b/application/client/src/components/crok/AssistantMarkdown.tsx
@@ -0,0 +1,24 @@
+import "katex/dist/katex.min.css";
+
+import Markdown from "react-markdown";
+import rehypeKatex from "rehype-katex";
+import remarkGfm from "remark-gfm";
+import remarkMath from "remark-math";
+
+import { CodeBlock } from "@web-speed-hackathon-2026/client/src/components/crok/CodeBlock";
+
+interface Props {
+  content: string;
+}
+
+export const AssistantMarkdown = ({ content }: Props) => {
+  return (
+    <Markdown
+      components={{ pre: CodeBlock }}
+      rehypePlugins={[rehypeKatex]}
+      remarkPlugins={[remarkMath, remarkGfm]}
+    >
+      {content}
+    </Markdown>
+  );
+};
diff --git a/application/client/src/components/crok/ChatInput.tsx b/application/client/src/components/crok/ChatInput.tsx
index 6f8c17796b..c334d5be38 100644
--- a/application/client/src/components/crok/ChatInput.tsx
+++ b/application/client/src/components/crok/ChatInput.tsx
@@ -80,10 +80,12 @@ export const ChatInput = ({ isStreaming, onSendMessage }: Props) => {
   const textareaRef = useRef<HTMLTextAreaElement>(null);
   const suggestionsRef = useRef<HTMLDivElement>(null);
   const [tokenizer, setTokenizer] = useState<Tokenizer<IpadicFeatures> | null>(null);
+  const [shouldInitTokenizer, setShouldInitTokenizer] = useState(false);
   const [inputValue, setInputValue] = useState("");
   const [suggestions, setSuggestions] = useState<string[]>([]);
   const [queryTokens, setQueryTokens] = useState<string[]>([]);
   const [showSuggestions, setShowSuggestions] = useState(false);
+  const trimmedInputValue = inputValue.trim();
 
   // サジェストが更新されたら一番下にスクロール
   useLayoutEffect(() => {
@@ -92,8 +94,30 @@ export const ChatInput = ({ isStreaming, onSendMessage }: Props) => {
     }
   }, [suggestions, showSuggestions]);
 
-  // 初回にkuromojiトークナイザーを構築
   useEffect(() => {
+    const enableTokenizer = () => {
+      setShouldInitTokenizer(true);
+    };
+
+    if ("requestIdleCallback" in window) {
+      const idleId = window.requestIdleCallback(enableTokenizer, { timeout: 2000 });
+      return () => {
+        window.cancelIdleCallback(idleId);
+      };
+    }
+
+    const timeoutId = globalThis.setTimeout(enableTokenizer, 300);
+    return () => {
+      globalThis.clearTimeout(timeoutId);
+    };
+  }, []);
+
+  // 初回の入力導線を邪魔しないよう、形態素解析器は idle 後に構築する
+  useEffect(() => {
+    if (!shouldInitTokenizer || tokenizer !== null) {
+      return;
+    }
+
     let mounted = true;
 
     const init = async () => {
@@ -108,13 +132,12 @@ export const ChatInput = ({ isStreaming, onSendMessage }: Props) => {
     return () => {
       mounted = false;
     };
-  }, []);
+  }, [shouldInitTokenizer, tokenizer]);
 
   useEffect(() => {
     let cancelled = false;
-
     const updateSuggestions = async () => {
-      if (!tokenizer || !inputValue.trim()) {
+      if (!tokenizer || trimmedInputValue.length < 8) {
         setSuggestions([]);
         setQueryTokens([]);
         setShowSuggestions(false);
@@ -140,12 +163,15 @@ export const ChatInput = ({ isStreaming, onSendMessage }: Props) => {
       setShowSuggestions(results.length > 0);
     };
 
-    void updateSuggestions();
+    const timeoutId = window.setTimeout(() => {
+      void updateSuggestions();
+    }, 600);
 
     return () => {
       cancelled = true;
+      window.clearTimeout(timeoutId);
     };
-  }, [inputValue, tokenizer]);
+  }, [inputValue, tokenizer, trimmedInputValue]);
 
   const adjustTextareaHeight = () => {
     const textarea = textareaRef.current;
@@ -163,6 +189,9 @@ export const ChatInput = ({ isStreaming, onSendMessage }: Props) => {
 
   const handleInputChange = (e: ChangeEvent<HTMLTextAreaElement>) => {
     const value = e.target.value;
+    if (!shouldInitTokenizer) {
+      setShouldInitTokenizer(true);
+    }
     setInputValue(value);
     adjustTextareaHeight();
   };
@@ -220,6 +249,7 @@ export const ChatInput = ({ isStreaming, onSendMessage }: Props) => {
             ref={textareaRef}
             className="text-cax-text placeholder-cax-text-subtle max-h-[200px] min-h-[52px] flex-1 resize-none overflow-y-auto bg-transparent py-3 pr-2 pl-4 focus:outline-none"
             onChange={handleInputChange}
+            onFocus={() => setShouldInitTokenizer(true)}
             onKeyDown={handleKeyDown}
             placeholder="メッセージを入力..."
             lang="ja"
diff --git a/application/client/src/components/crok/ChatMessage.tsx b/application/client/src/components/crok/ChatMessage.tsx
index ea4a10d027..ad3315d70b 100644
--- a/application/client/src/components/crok/ChatMessage.tsx
+++ b/application/client/src/components/crok/ChatMessage.tsx
@@ -1,17 +1,18 @@
-import "katex/dist/katex.min.css";
-import Markdown from "react-markdown";
-import rehypeKatex from "rehype-katex";
-import remarkGfm from "remark-gfm";
-import remarkMath from "remark-math";
+import { Suspense, lazy } from "react";
 
-import { CodeBlock } from "@web-speed-hackathon-2026/client/src/components/crok/CodeBlock";
 import { TypingIndicator } from "@web-speed-hackathon-2026/client/src/components/crok/TypingIndicator";
 import { CrokLogo } from "@web-speed-hackathon-2026/client/src/components/foundation/CrokLogo";
 
 interface Props {
+  isStreaming?: boolean;
   message: Models.ChatMessage;
 }
 
+const LazyAssistantMarkdown = lazy(async () => {
+  const module = await import("@web-speed-hackathon-2026/client/src/components/crok/AssistantMarkdown");
+  return { default: module.AssistantMarkdown };
+});
+
 const UserMessage = ({ content }: { content: string }) => {
   return (
     <div className="mb-6 flex justify-end">
@@ -22,7 +23,7 @@ const UserMessage = ({ content }: { content: string }) => {
   );
 };
 
-const AssistantMessage = ({ content }: { content: string }) => {
+const AssistantMessage = ({ content, isStreaming = false }: { content: string; isStreaming?: boolean }) => {
   return (
     <div className="mb-6 flex gap-4">
       <div className="h-8 w-8 shrink-0">
@@ -32,14 +33,13 @@ const AssistantMessage = ({ content }: { content: string }) => {
         <div className="text-cax-text mb-1 text-sm font-medium">Crok</div>
         <div className="markdown text-cax-text max-w-none">
           {content ? (
-            <Markdown
-              components={{ pre: CodeBlock }}
-              key={content}
-              rehypePlugins={[rehypeKatex]}
-              remarkPlugins={[remarkMath, remarkGfm]}
-            >
-              {content}
-            </Markdown>
+            isStreaming ? (
+              <p className="whitespace-pre-wrap">{content}</p>
+            ) : (
+              <Suspense fallback={<p className="whitespace-pre-wrap">{content}</p>}>
+                <LazyAssistantMarkdown content={content} />
+              </Suspense>
+            )
           ) : (
             <TypingIndicator />
           )}
@@ -49,9 +49,9 @@ const AssistantMessage = ({ content }: { content: string }) => {
   );
 };
 
-export const ChatMessage = ({ message }: Props) => {
+export const ChatMessage = ({ message, isStreaming = false }: Props) => {
   if (message.role === "user") {
     return <UserMessage content={message.content} />;
   }
-  return <AssistantMessage content={message.content} />;
+  return <AssistantMessage content={message.content} isStreaming={isStreaming} />;
 };
diff --git a/application/client/src/components/crok/CrokPage.tsx b/application/client/src/components/crok/CrokPage.tsx
index 0be7678f84..ed6707caf4 100644
--- a/application/client/src/components/crok/CrokPage.tsx
+++ b/application/client/src/components/crok/CrokPage.tsx
@@ -28,7 +28,11 @@ export const CrokPage = ({ messages, isStreaming, onSendMessage }: Props) => {
           {messages.length === 0 && <WelcomeScreen />}
 
           {messages.map((message, index) => (
-            <ChatMessage key={index} message={message} />
+            <ChatMessage
+              key={index}
+              isStreaming={isStreaming && index === messages.length - 1 && message.role === "assistant"}
+              message={message}
+            />
           ))}
           <div ref={messagesEndRef} />
         </div>
diff --git a/application/client/src/components/direct_message/DirectMessageListPage.tsx b/application/client/src/components/direct_message/DirectMessageListPage.tsx
index 5a373e918e..b7f524c35e 100644
--- a/application/client/src/components/direct_message/DirectMessageListPage.tsx
+++ b/application/client/src/components/direct_message/DirectMessageListPage.tsx
@@ -1,10 +1,11 @@
-import moment from "moment";
 import { useCallback, useEffect, useState } from "react";
 
 import { Button } from "@web-speed-hackathon-2026/client/src/components/foundation/Button";
 import { FontAwesomeIcon } from "@web-speed-hackathon-2026/client/src/components/foundation/FontAwesomeIcon";
 import { Link } from "@web-speed-hackathon-2026/client/src/components/foundation/Link";
 import { useWs } from "@web-speed-hackathon-2026/client/src/hooks/use_ws";
+import { consumeBootstrapData, peekBootstrapData } from "@web-speed-hackathon-2026/client/src/utils/bootstrap_data";
+import { formatRelativeFromNowJa } from "@web-speed-hackathon-2026/client/src/utils/date_format";
 import { fetchJSON } from "@web-speed-hackathon-2026/client/src/utils/fetchers";
 import { getProfileImagePath } from "@web-speed-hackathon-2026/client/src/utils/get_path";
 
@@ -14,8 +15,9 @@ interface Props {
 }
 
 export const DirectMessageListPage = ({ activeUser, newDmModalId }: Props) => {
-  const [conversations, setConversations] =
-    useState<Array<Models.DirectMessageConversation> | null>(null);
+  const [conversations, setConversations] = useState<Array<Models.DirectMessageConversation> | null>(
+    () => peekBootstrapData<Array<Models.DirectMessageConversation>>("/api/v1/dm"),
+  );
   const [error, setError] = useState<Error | null>(null);
 
   const loadConversations = useCallback(async () => {
@@ -34,12 +36,25 @@ export const DirectMessageListPage = ({ activeUser, newDmModalId }: Props) => {
   }, [activeUser]);
 
   useEffect(() => {
+    const bootstrapConversations = consumeBootstrapData<Array<Models.DirectMessageConversation>>(
+      "/api/v1/dm",
+    );
+    if (bootstrapConversations !== null) {
+      setConversations(bootstrapConversations);
+      setError(null);
+      return;
+    }
+
     void loadConversations();
   }, [loadConversations]);
 
-  useWs("/api/v1/dm/unread", () => {
-    void loadConversations();
-  });
+  useWs(
+    "/api/v1/dm/unread",
+    () => {
+      void loadConversations();
+    },
+    { delayMs: 5000 },
+  );
 
   if (conversations == null) {
     return null;
@@ -81,13 +96,21 @@ export const DirectMessageListPage = ({ activeUser, newDmModalId }: Props) => {
               .some((m) => !m.isRead);
 
             return (
-              <li className="grid" key={conversation.id}>
+              <li
+                className="grid"
+                key={conversation.id}
+                style={{ containIntrinsicSize: "120px", contentVisibility: "auto" }}
+              >
                 <Link className="hover:bg-cax-surface-subtle px-4" to={`/dm/${conversation.id}`}>
                   <div className="border-cax-border flex gap-4 border-b px-4 pt-2 pb-4">
                     <img
                       alt={peer.profileImage.alt}
                       className="w-12 shrink-0 self-start rounded-full"
+                      decoding="async"
+                      height="48"
+                      loading="lazy"
                       src={getProfileImagePath(peer.profileImage.id)}
+                      width="48"
                     />
                     <div className="flex flex-1 flex-col">
                       <div className="flex items-center justify-between">
@@ -100,7 +123,7 @@ export const DirectMessageListPage = ({ activeUser, newDmModalId }: Props) => {
                             className="text-cax-text-subtle text-xs"
                             dateTime={lastMessage.createdAt}
                           >
-                            {moment(lastMessage.createdAt).locale("ja").fromNow()}
+                            {formatRelativeFromNowJa(lastMessage.createdAt)}
                           </time>
                         )}
                       </div>
diff --git a/application/client/src/components/direct_message/DirectMessageNotificationBadge.tsx b/application/client/src/components/direct_message/DirectMessageNotificationBadge.tsx
index 84b62972fa..e50d40fb84 100644
--- a/application/client/src/components/direct_message/DirectMessageNotificationBadge.tsx
+++ b/application/client/src/components/direct_message/DirectMessageNotificationBadge.tsx
@@ -13,9 +13,13 @@ export const DirectMessageNotificationBadge = () => {
   const [unreadCount, updateUnreadCount] = useState(0);
   const displayCount = unreadCount > 99 ? "99+" : String(unreadCount);
 
-  useWs("/api/v1/dm/unread", (event: DmUnreadEvent) => {
-    updateUnreadCount(event.payload.unreadCount);
-  });
+  useWs(
+    "/api/v1/dm/unread",
+    (event: DmUnreadEvent) => {
+      updateUnreadCount(event.payload.unreadCount);
+    },
+    { delayMs: 5000 },
+  );
 
   if (unreadCount === 0) {
     return null;
diff --git a/application/client/src/components/direct_message/DirectMessagePage.tsx b/application/client/src/components/direct_message/DirectMessagePage.tsx
index 098c7d2894..ea3f818b27 100644
--- a/application/client/src/components/direct_message/DirectMessagePage.tsx
+++ b/application/client/src/components/direct_message/DirectMessagePage.tsx
@@ -1,5 +1,4 @@
 import classNames from "classnames";
-import moment from "moment";
 import {
   ChangeEvent,
   useCallback,
@@ -13,6 +12,7 @@ import {
 
 import { FontAwesomeIcon } from "@web-speed-hackathon-2026/client/src/components/foundation/FontAwesomeIcon";
 import { DirectMessageFormData } from "@web-speed-hackathon-2026/client/src/direct_message/types";
+import { formatTimeJa } from "@web-speed-hackathon-2026/client/src/utils/date_format";
 import { getProfileImagePath } from "@web-speed-hackathon-2026/client/src/utils/get_path";
 
 interface Props {
@@ -43,8 +43,6 @@ export const DirectMessagePage = ({
   const [text, setText] = useState("");
   const textAreaRows = Math.min((text || "").split("\n").length, 5);
   const isInvalid = text.trim().length === 0;
-  const scrollHeightRef = useRef(0);
-
   const handleChange = useCallback(
     (event: ChangeEvent<HTMLTextAreaElement>) => {
       setText(event.target.value);
@@ -74,16 +72,8 @@ export const DirectMessagePage = ({
   );
 
   useEffect(() => {
-    const id = setInterval(() => {
-      const height = Number(window.getComputedStyle(document.body).height.replace("px", ""));
-      if (height !== scrollHeightRef.current) {
-        scrollHeightRef.current = height;
-        window.scrollTo(0, height);
-      }
-    }, 1);
-
-    return () => clearInterval(id);
-  }, []);
+    window.scrollTo(0, document.body.scrollHeight);
+  }, [conversation.messages.length, isPeerTyping]);
 
   if (conversationError != null) {
     return (
@@ -99,7 +89,11 @@ export const DirectMessagePage = ({
         <img
           alt={peer.profileImage.alt}
           className="h-12 w-12 rounded-full object-cover"
+          decoding="async"
+          fetchPriority="high"
+          height="48"
           src={getProfileImagePath(peer.profileImage.id)}
+          width="48"
         />
         <div className="min-w-0">
           <h1 className="overflow-hidden text-xl font-bold text-ellipsis whitespace-nowrap">
@@ -140,9 +134,7 @@ export const DirectMessagePage = ({
                   {message.body}
                 </p>
                 <div className="flex gap-1 text-xs">
-                  <time dateTime={message.createdAt}>
-                    {moment(message.createdAt).locale("ja").format("HH:mm")}
-                  </time>
+                  <time dateTime={message.createdAt}>{formatTimeJa(message.createdAt)}</time>
                   {isActiveUserSend && message.isRead && (
                     <span className="text-cax-text-muted">既読</span>
                   )}
diff --git a/application/client/src/components/foundation/AspectRatioBox.tsx b/application/client/src/components/foundation/AspectRatioBox.tsx
index 0ae891963c..df7c4d6635 100644
--- a/application/client/src/components/foundation/AspectRatioBox.tsx
+++ b/application/client/src/components/foundation/AspectRatioBox.tsx
@@ -1,4 +1,4 @@
-import { ReactNode, useEffect, useRef, useState } from "react";
+import { ReactNode } from "react";
 
 interface Props {
   aspectHeight: number;
@@ -10,28 +10,12 @@ interface Props {
  * 親要素の横幅を基準にして、指定したアスペクト比のブロック要素を作ります
  */
 export const AspectRatioBox = ({ aspectHeight, aspectWidth, children }: Props) => {
-  const ref = useRef<HTMLDivElement>(null);
-  const [clientHeight, setClientHeight] = useState(0);
-
-  useEffect(() => {
-    // clientWidth とアスペクト比から clientHeight を計算する
-    function calcStyle() {
-      const clientWidth = ref.current?.clientWidth ?? 0;
-      setClientHeight((clientWidth / aspectWidth) * aspectHeight);
-    }
-    setTimeout(() => calcStyle(), 500);
-
-    // ウィンドウサイズが変わるたびに計算する
-    window.addEventListener("resize", calcStyle, { passive: false });
-    return () => {
-      window.removeEventListener("resize", calcStyle);
-    };
-  }, [aspectHeight, aspectWidth]);
-
   return (
-    <div ref={ref} className="relative h-1 w-full" style={{ height: clientHeight }}>
-      {/* 高さが計算できるまで render しない */}
-      {clientHeight !== 0 ? <div className="absolute inset-0">{children}</div> : null}
+    <div
+      className="relative h-auto w-full overflow-hidden"
+      style={{ aspectRatio: `${aspectWidth} / ${aspectHeight}` }}
+    >
+      <div className="absolute inset-0">{children}</div>
     </div>
   );
 };
diff --git a/application/client/src/components/foundation/CoveredImage.tsx b/application/client/src/components/foundation/CoveredImage.tsx
index 8ad9cc1f7d..6c51292ed1 100644
--- a/application/client/src/components/foundation/CoveredImage.tsx
+++ b/application/client/src/components/foundation/CoveredImage.tsx
@@ -1,70 +1,61 @@
-import classNames from "classnames";
-import sizeOf from "image-size";
 import { load, ImageIFD } from "piexifjs";
-import { MouseEvent, RefCallback, useCallback, useId, useMemo, useState } from "react";
+import { MouseEvent, useCallback, useId, useState } from "react";
 
 import { Button } from "@web-speed-hackathon-2026/client/src/components/foundation/Button";
 import { Modal } from "@web-speed-hackathon-2026/client/src/components/modal/Modal";
-import { useFetch } from "@web-speed-hackathon-2026/client/src/hooks/use_fetch";
 import { fetchBinary } from "@web-speed-hackathon-2026/client/src/utils/fetchers";
 
 interface Props {
+  alt?: string;
+  decoding?: "async" | "auto" | "sync";
+  fetchPriority?: "auto" | "high" | "low";
+  loading?: "eager" | "lazy";
   src: string;
 }
 
 /**
  * アスペクト比を維持したまま、要素のコンテンツボックス全体を埋めるように画像を拡大縮小します
  */
-export const CoveredImage = ({ src }: Props) => {
+export const CoveredImage = ({
+  alt = "",
+  decoding = "async",
+  fetchPriority = "auto",
+  loading = "lazy",
+  src,
+}: Props) => {
   const dialogId = useId();
   // ダイアログの背景をクリックしたときに投稿詳細ページに遷移しないようにする
   const handleDialogClick = useCallback((ev: MouseEvent<HTMLDialogElement>) => {
     ev.stopPropagation();
   }, []);
 
-  const { data, isLoading } = useFetch(src, fetchBinary);
+  const [description, setDescription] = useState(alt);
 
-  const imageSize = useMemo(() => {
-    return data != null ? sizeOf(Buffer.from(data)) : { height: 0, width: 0 };
-  }, [data]);
+  const handleOpenDescription = useCallback(() => {
+    if (description !== "") {
+      return;
+    }
 
-  const alt = useMemo(() => {
-    const exif = data != null ? load(Buffer.from(data).toString("binary")) : null;
-    const raw = exif?.["0th"]?.[ImageIFD.ImageDescription];
-    return raw != null ? new TextDecoder().decode(Buffer.from(raw, "binary")) : "";
-  }, [data]);
-
-  const blobUrl = useMemo(() => {
-    return data != null ? URL.createObjectURL(new Blob([data])) : null;
-  }, [data]);
-
-  const [containerSize, setContainerSize] = useState({ height: 0, width: 0 });
-  const callbackRef = useCallback<RefCallback<HTMLDivElement>>((el) => {
-    setContainerSize({
-      height: el?.clientHeight ?? 0,
-      width: el?.clientWidth ?? 0,
-    });
-  }, []);
-
-  if (isLoading || data === null || blobUrl === null) {
-    return null;
-  }
-
-  const containerRatio = containerSize.height / containerSize.width;
-  const imageRatio = imageSize?.height / imageSize?.width;
+    void fetchBinary(src)
+      .then((data) => {
+        const exif = load(Buffer.from(data).toString("binary"));
+        const raw = exif?.["0th"]?.[ImageIFD.ImageDescription];
+        if (raw != null) {
+          setDescription(new TextDecoder().decode(Buffer.from(raw, "binary")));
+        }
+      })
+      .catch(() => {});
+  }, [description, src]);
 
   return (
-    <div ref={callbackRef} className="relative h-full w-full overflow-hidden">
+    <div className="relative h-full w-full overflow-hidden">
       <img
         alt={alt}
-        className={classNames(
-          "absolute left-1/2 top-1/2 max-w-none -translate-x-1/2 -translate-y-1/2",
-          {
-            "w-auto h-full": containerRatio > imageRatio,
-            "w-full h-auto": containerRatio <= imageRatio,
-          },
-        )}
-        src={blobUrl}
+        className="h-full w-full object-cover"
+        decoding={decoding}
+        fetchPriority={fetchPriority}
+        loading={loading}
+        src={src}
       />
 
       <button
@@ -72,6 +63,7 @@ export const CoveredImage = ({ src }: Props) => {
         type="button"
         command="show-modal"
         commandfor={dialogId}
+        onClick={handleOpenDescription}
       >
         ALT を表示する
       </button>
@@ -80,7 +72,7 @@ export const CoveredImage = ({ src }: Props) => {
         <div className="grid gap-y-6">
           <h1 className="text-center text-2xl font-bold">画像の説明</h1>
 
-          <p className="text-sm">{alt}</p>
+          <p className="text-sm">{description}</p>
 
           <Button variant="secondary" command="close" commandfor={dialogId}>
             閉じる
diff --git a/application/client/src/components/foundation/InfiniteScroll.tsx b/application/client/src/components/foundation/InfiniteScroll.tsx
index 408f24c107..f59bde8ea0 100644
--- a/application/client/src/components/foundation/InfiniteScroll.tsx
+++ b/application/client/src/components/foundation/InfiniteScroll.tsx
@@ -2,48 +2,41 @@ import { ReactNode, useEffect, useRef } from "react";
 
 interface Props {
   children: ReactNode;
-  items: any[];
+  hasMore: boolean;
+  items: unknown[];
   fetchMore: () => void;
 }
 
-export const InfiniteScroll = ({ children, fetchMore, items }: Props) => {
-  const latestItem = items[items.length - 1];
-
-  const prevReachedRef = useRef(false);
+export const InfiniteScroll = ({ children, fetchMore, hasMore, items }: Props) => {
+  const sentinelRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
-    const handler = () => {
-      // 念の為 2の18乗 回、最下部かどうかを確認する
-      const hasReached = Array.from(Array(2 ** 18), () => {
-        return window.innerHeight + Math.ceil(window.scrollY) >= document.body.offsetHeight;
-      }).every(Boolean);
-
-      // 画面最下部にスクロールしたタイミングで、登録したハンドラを呼び出す
-      if (hasReached && !prevReachedRef.current) {
-        // アイテムがないときは追加で読み込まない
-        if (latestItem !== undefined) {
+    const element = sentinelRef.current;
+    if (element == null || !hasMore || items.length === 0) {
+      return;
+    }
+
+    const observer = new IntersectionObserver(
+      (entries) => {
+        if (entries.some((entry) => entry.isIntersecting)) {
           fetchMore();
         }
-      }
-
-      prevReachedRef.current = hasReached;
-    };
-
-    // 最初は実行されないので手動で呼び出す
-    prevReachedRef.current = false;
-    handler();
+      },
+      {
+        rootMargin: "200px 0px",
+      },
+    );
 
-    document.addEventListener("wheel", handler, { passive: false });
-    document.addEventListener("touchmove", handler, { passive: false });
-    document.addEventListener("resize", handler, { passive: false });
-    document.addEventListener("scroll", handler, { passive: false });
+    observer.observe(element);
     return () => {
-      document.removeEventListener("wheel", handler);
-      document.removeEventListener("touchmove", handler);
-      document.removeEventListener("resize", handler);
-      document.removeEventListener("scroll", handler);
+      observer.disconnect();
     };
-  }, [latestItem, fetchMore]);
-
-  return <>{children}</>;
+  }, [fetchMore, hasMore, items.length]);
+
+  return (
+    <>
+      {children}
+      {hasMore ? <div ref={sentinelRef} className="h-px w-full" aria-hidden="true" /> : null}
+    </>
+  );
 };
diff --git a/application/client/src/components/foundation/PausableMovie.tsx b/application/client/src/components/foundation/PausableMovie.tsx
index 98b0df55b0..bf80199b6f 100644
--- a/application/client/src/components/foundation/PausableMovie.tsx
+++ b/application/client/src/components/foundation/PausableMovie.tsx
@@ -1,11 +1,12 @@
 import classNames from "classnames";
 import { Animator, Decoder } from "gifler";
 import { GifReader } from "omggif";
-import { RefCallback, useCallback, useRef, useState } from "react";
+import { RefCallback, useCallback, useEffect, useRef, useState } from "react";
 
 import { AspectRatioBox } from "@web-speed-hackathon-2026/client/src/components/foundation/AspectRatioBox";
 import { FontAwesomeIcon } from "@web-speed-hackathon-2026/client/src/components/foundation/FontAwesomeIcon";
 import { useFetch } from "@web-speed-hackathon-2026/client/src/hooks/use_fetch";
+import { useVisibility } from "@web-speed-hackathon-2026/client/src/hooks/use_visibility";
 import { fetchBinary } from "@web-speed-hackathon-2026/client/src/utils/fetchers";
 
 interface Props {
@@ -16,7 +17,15 @@ interface Props {
  * クリックすると再生・一時停止を切り替えます。
  */
 export const PausableMovie = ({ src }: Props) => {
-  const { data, isLoading } = useFetch(src, fetchBinary);
+  const { isVisible, ref } = useVisibility();
+  const [shouldLoad, setShouldLoad] = useState(false);
+  useEffect(() => {
+    if (isVisible) {
+      setShouldLoad(true);
+    }
+  }, [isVisible]);
+
+  const { data, isLoading } = useFetch(shouldLoad ? src : "", fetchBinary);
 
   const animatorRef = useRef<Animator>(null);
   const canvasCallbackRef = useCallback<RefCallback<HTMLCanvasElement>>(
@@ -61,28 +70,37 @@ export const PausableMovie = ({ src }: Props) => {
     });
   }, []);
 
-  if (isLoading || data === null) {
-    return null;
-  }
-
   return (
     <AspectRatioBox aspectHeight={1} aspectWidth={1}>
       <button
         aria-label="動画プレイヤー"
         className="group relative block h-full w-full"
-        onClick={handleClick}
+        onClick={() => {
+          setShouldLoad(true);
+          if (data !== null && !isLoading) {
+            handleClick();
+          }
+        }}
+        ref={ref as unknown as RefCallback<HTMLButtonElement>}
         type="button"
       >
-        <canvas ref={canvasCallbackRef} className="w-full" />
+        {data !== null ? (
+          <canvas ref={canvasCallbackRef} className="w-full" />
+        ) : (
+          <div className="bg-cax-surface-subtle h-full w-full" />
+        )}
         <div
           className={classNames(
             "absolute left-1/2 top-1/2 flex items-center justify-center w-16 h-16 text-cax-surface-raised text-3xl bg-cax-overlay/50 rounded-full -translate-x-1/2 -translate-y-1/2",
             {
-              "opacity-0 group-hover:opacity-100": isPlaying,
+              "opacity-0 group-hover:opacity-100": isPlaying && data !== null,
             },
           )}
         >
-          <FontAwesomeIcon iconType={isPlaying ? "pause" : "play"} styleType="solid" />
+          <FontAwesomeIcon
+            iconType={data !== null && isPlaying ? "pause" : "play"}
+            styleType="solid"
+          />
         </div>
       </button>
     </AspectRatioBox>
diff --git a/application/client/src/components/foundation/SoundPlayer.tsx b/application/client/src/components/foundation/SoundPlayer.tsx
index 2fb4784189..d92991561b 100644
--- a/application/client/src/components/foundation/SoundPlayer.tsx
+++ b/application/client/src/components/foundation/SoundPlayer.tsx
@@ -1,9 +1,8 @@
-import { ReactEventHandler, useCallback, useMemo, useRef, useState } from "react";
+import { ReactEventHandler, useCallback, useRef, useState } from "react";
 
 import { AspectRatioBox } from "@web-speed-hackathon-2026/client/src/components/foundation/AspectRatioBox";
 import { FontAwesomeIcon } from "@web-speed-hackathon-2026/client/src/components/foundation/FontAwesomeIcon";
 import { SoundWaveSVG } from "@web-speed-hackathon-2026/client/src/components/foundation/SoundWaveSVG";
-import { useFetch } from "@web-speed-hackathon-2026/client/src/hooks/use_fetch";
 import { fetchBinary } from "@web-speed-hackathon-2026/client/src/utils/fetchers";
 import { getSoundPath } from "@web-speed-hackathon-2026/client/src/utils/get_path";
 
@@ -12,11 +11,7 @@ interface Props {
 }
 
 export const SoundPlayer = ({ sound }: Props) => {
-  const { data, isLoading } = useFetch(getSoundPath(sound.id), fetchBinary);
-
-  const blobUrl = useMemo(() => {
-    return data !== null ? URL.createObjectURL(new Blob([data])) : null;
-  }, [data]);
+  const [waveformData, setWaveformData] = useState<ArrayBuffer | null>(null);
 
   const [currentTimeRatio, setCurrentTimeRatio] = useState(0);
   const handleTimeUpdate = useCallback<ReactEventHandler<HTMLAudioElement>>((ev) => {
@@ -31,19 +26,28 @@ export const SoundPlayer = ({ sound }: Props) => {
       if (isPlaying) {
         audioRef.current?.pause();
       } else {
-        audioRef.current?.play();
+        void audioRef.current?.play();
+        if (waveformData === null) {
+          void fetchBinary(getSoundPath(sound.id))
+            .then((data) => {
+              setWaveformData(data);
+            })
+            .catch(() => {});
+        }
       }
       return !isPlaying;
     });
-  }, []);
-
-  if (isLoading || data === null || blobUrl === null) {
-    return null;
-  }
+  }, [sound.id, waveformData]);
 
   return (
     <div className="bg-cax-surface-subtle flex h-full w-full items-center justify-center">
-      <audio ref={audioRef} loop={true} onTimeUpdate={handleTimeUpdate} src={blobUrl} />
+      <audio
+        ref={audioRef}
+        loop={true}
+        onTimeUpdate={handleTimeUpdate}
+        preload="none"
+        src={getSoundPath(sound.id)}
+      />
       <div className="p-2">
         <button
           className="bg-cax-accent text-cax-surface-raised flex h-8 w-8 items-center justify-center rounded-full text-sm hover:opacity-75"
@@ -64,7 +68,11 @@ export const SoundPlayer = ({ sound }: Props) => {
           <AspectRatioBox aspectHeight={1} aspectWidth={10}>
             <div className="relative h-full w-full">
               <div className="absolute inset-0 h-full w-full">
-                <SoundWaveSVG soundData={data} />
+                {waveformData !== null ? (
+                  <SoundWaveSVG soundData={waveformData} />
+                ) : (
+                  <div className="bg-cax-border/30 h-full w-full rounded-sm" />
+                )}
               </div>
               <div
                 className="bg-cax-surface-subtle absolute inset-0 h-full w-full opacity-75"
diff --git a/application/client/src/components/new_post_modal/NewPostModalPage.tsx b/application/client/src/components/new_post_modal/NewPostModalPage.tsx
index e337c46b74..bdbd6dd541 100644
--- a/application/client/src/components/new_post_modal/NewPostModalPage.tsx
+++ b/application/client/src/components/new_post_modal/NewPostModalPage.tsx
@@ -1,18 +1,19 @@
-import { MagickFormat } from "@imagemagick/magick-wasm";
 import { ChangeEventHandler, FormEventHandler, useCallback, useState } from "react";
 
 import { FontAwesomeIcon } from "@web-speed-hackathon-2026/client/src/components/foundation/FontAwesomeIcon";
 import { ModalErrorMessage } from "@web-speed-hackathon-2026/client/src/components/modal/ModalErrorMessage";
 import { ModalSubmitButton } from "@web-speed-hackathon-2026/client/src/components/modal/ModalSubmitButton";
 import { AttachFileInputButton } from "@web-speed-hackathon-2026/client/src/components/new_post_modal/AttachFileInputButton";
-import { convertImage } from "@web-speed-hackathon-2026/client/src/utils/convert_image";
-import { convertMovie } from "@web-speed-hackathon-2026/client/src/utils/convert_movie";
-import { convertSound } from "@web-speed-hackathon-2026/client/src/utils/convert_sound";
 
 const MAX_UPLOAD_BYTES_LIMIT = 10 * 1024 * 1024;
 
+interface ImageUpload {
+  alt: string;
+  file: File;
+}
+
 interface SubmitParams {
-  images: File[];
+  images: ImageUpload[];
   movie: File | undefined;
   sound: File | undefined;
   text: string;
@@ -53,13 +54,20 @@ export const NewPostModalPage = ({ id, hasError, isLoading, onResetError, onSubm
     if (isValid) {
       setIsConverting(true);
 
-      Promise.all(
-        files.map((file) =>
-          convertImage(file, { extension: MagickFormat.Jpg }).then(
-            (blob) => new File([blob], "converted.jpg", { type: "image/jpeg" }),
+      void Promise.all([
+        import("@imagemagick/magick-wasm"),
+        import("@web-speed-hackathon-2026/client/src/utils/convert_image"),
+      ])
+        .then(([{ MagickFormat }, { convertImage }]) =>
+          Promise.all(
+            files.map((file) =>
+              convertImage(file, { extension: MagickFormat.Jpg }).then(({ alt, blob }) => ({
+                alt,
+                file: new File([blob], "converted.jpg", { type: "image/jpeg" }),
+              })),
+            ),
           ),
-        ),
-      )
+        )
         .then((convertedFiles) => {
           setParams((params) => ({
             ...params,
@@ -67,10 +75,14 @@ export const NewPostModalPage = ({ id, hasError, isLoading, onResetError, onSubm
             movie: undefined,
             sound: undefined,
           }));
-
-          setIsConverting(false);
         })
-        .catch(console.error);
+        .catch((error) => {
+          console.error(error);
+          setHasFileError(true);
+        })
+        .finally(() => {
+          setIsConverting(false);
+        });
     }
   }, []);
 
@@ -82,16 +94,23 @@ export const NewPostModalPage = ({ id, hasError, isLoading, onResetError, onSubm
     if (isValid) {
       setIsConverting(true);
 
-      convertSound(file, { extension: "mp3" }).then((converted) => {
-        setParams((params) => ({
-          ...params,
-          images: [],
-          movie: undefined,
-          sound: new File([converted], "converted.mp3", { type: "audio/mpeg" }),
-        }));
-
-        setIsConverting(false);
-      });
+      void import("@web-speed-hackathon-2026/client/src/utils/convert_sound")
+        .then(({ convertSound }) => convertSound(file, { extension: "mp3" }))
+        .then((converted) => {
+          setParams((params) => ({
+            ...params,
+            images: [],
+            movie: undefined,
+            sound: new File([converted], "converted.mp3", { type: "audio/mpeg" }),
+          }));
+        })
+        .catch((error) => {
+          console.error(error);
+          setHasFileError(true);
+        })
+        .finally(() => {
+          setIsConverting(false);
+        });
     }
   }, []);
 
@@ -103,7 +122,8 @@ export const NewPostModalPage = ({ id, hasError, isLoading, onResetError, onSubm
     if (isValid) {
       setIsConverting(true);
 
-      convertMovie(file, { extension: "gif", size: undefined })
+      void import("@web-speed-hackathon-2026/client/src/utils/convert_movie")
+        .then(({ convertMovie }) => convertMovie(file, { extension: "gif", size: undefined }))
         .then((converted) => {
           setParams((params) => ({
             ...params,
@@ -113,10 +133,14 @@ export const NewPostModalPage = ({ id, hasError, isLoading, onResetError, onSubm
             }),
             sound: undefined,
           }));
-
-          setIsConverting(false);
         })
-        .catch(console.error);
+        .catch((error) => {
+          console.error(error);
+          setHasFileError(true);
+        })
+        .finally(() => {
+          setIsConverting(false);
+        });
     }
   }, []);
 
diff --git a/application/client/src/components/post/CommentItem.tsx b/application/client/src/components/post/CommentItem.tsx
index cb5bd38bda..9bad2d3f00 100644
--- a/application/client/src/components/post/CommentItem.tsx
+++ b/application/client/src/components/post/CommentItem.tsx
@@ -1,7 +1,9 @@
-import moment from "moment";
-
 import { Link } from "@web-speed-hackathon-2026/client/src/components/foundation/Link";
 import { TranslatableText } from "@web-speed-hackathon-2026/client/src/components/post/TranslatableText";
+import {
+  formatLongDateJa,
+  toISOString,
+} from "@web-speed-hackathon-2026/client/src/utils/date_format";
 import { getProfileImagePath } from "@web-speed-hackathon-2026/client/src/utils/get_path";
 
 interface Props {
@@ -10,7 +12,10 @@ interface Props {
 
 export const CommentItem = ({ comment }: Props) => {
   return (
-    <article className="hover:bg-cax-surface-subtle px-1 sm:px-4">
+    <article
+      className="hover:bg-cax-surface-subtle px-1 sm:px-4"
+      style={{ containIntrinsicSize: "220px", contentVisibility: "auto" }}
+    >
       <div className="border-cax-border flex border-b px-2 pt-2 pb-4 sm:px-4">
         <div className="shrink-0 grow-0 pr-2 sm:pr-4">
           <Link
@@ -19,7 +24,11 @@ export const CommentItem = ({ comment }: Props) => {
           >
             <img
               alt={comment.user.profileImage.alt}
+              decoding="async"
+              height="48"
+              loading="lazy"
               src={getProfileImagePath(comment.user.profileImage.id)}
+              width="48"
             />
           </Link>
         </div>
@@ -42,9 +51,7 @@ export const CommentItem = ({ comment }: Props) => {
             <TranslatableText text={comment.text} />
           </div>
           <p className="text-cax-text-muted pt-1 text-xs">
-            <time dateTime={moment(comment.createdAt).toISOString()}>
-              {moment(comment.createdAt).locale("ja").format("LL")}
-            </time>
+            <time dateTime={toISOString(comment.createdAt)}>{formatLongDateJa(comment.createdAt)}</time>
           </p>
         </div>
       </div>
diff --git a/application/client/src/components/post/ImageArea.tsx b/application/client/src/components/post/ImageArea.tsx
index 27fe9c018c..adea805fa0 100644
--- a/application/client/src/components/post/ImageArea.tsx
+++ b/application/client/src/components/post/ImageArea.tsx
@@ -6,9 +6,10 @@ import { getImagePath } from "@web-speed-hackathon-2026/client/src/utils/get_pat
 
 interface Props {
   images: Models.Image[];
+  priority?: boolean;
 }
 
-export const ImageArea = ({ images }: Props) => {
+export const ImageArea = ({ images, priority = false }: Props) => {
   return (
     <AspectRatioBox aspectHeight={9} aspectWidth={16}>
       <div className="border-cax-border grid h-full w-full grid-cols-2 grid-rows-2 gap-1 overflow-hidden rounded-lg border">
@@ -24,7 +25,13 @@ export const ImageArea = ({ images }: Props) => {
                 "row-span-2": images.length <= 2 || (images.length === 3 && idx === 0),
               })}
             >
-              <CoveredImage src={getImagePath(image.id)} />
+              <CoveredImage
+                alt={image.alt}
+                decoding={priority && idx === 0 ? "sync" : "async"}
+                fetchPriority={priority && idx === 0 ? "high" : "auto"}
+                loading={priority || idx === 0 ? "eager" : "lazy"}
+                src={getImagePath(image.id)}
+              />
             </div>
           );
         })}
diff --git a/application/client/src/components/post/PostItem.tsx b/application/client/src/components/post/PostItem.tsx
index 5fa904c91a..5cdfa98d68 100644
--- a/application/client/src/components/post/PostItem.tsx
+++ b/application/client/src/components/post/PostItem.tsx
@@ -1,10 +1,12 @@
-import moment from "moment";
-
 import { Link } from "@web-speed-hackathon-2026/client/src/components/foundation/Link";
 import { ImageArea } from "@web-speed-hackathon-2026/client/src/components/post/ImageArea";
 import { MovieArea } from "@web-speed-hackathon-2026/client/src/components/post/MovieArea";
 import { SoundArea } from "@web-speed-hackathon-2026/client/src/components/post/SoundArea";
 import { TranslatableText } from "@web-speed-hackathon-2026/client/src/components/post/TranslatableText";
+import {
+  formatLongDateJa,
+  toISOString,
+} from "@web-speed-hackathon-2026/client/src/utils/date_format";
 import { getProfileImagePath } from "@web-speed-hackathon-2026/client/src/utils/get_path";
 
 interface Props {
@@ -21,11 +23,16 @@ export const PostItem = ({ post }: Props) => {
               className="border-cax-border bg-cax-surface-subtle block h-14 w-14 overflow-hidden rounded-full border hover:opacity-95 sm:h-16 sm:w-16"
               to={`/users/${post.user.username}`}
             >
-              <img
-                alt={post.user.profileImage.alt}
-                src={getProfileImagePath(post.user.profileImage.id)}
-              />
-            </Link>
+            <img
+              alt={post.user.profileImage.alt}
+              decoding="async"
+              fetchPriority="high"
+              height="64"
+              loading="eager"
+              src={getProfileImagePath(post.user.profileImage.id)}
+              width="64"
+            />
+          </Link>
           </div>
           <div className="min-w-0 shrink grow overflow-hidden text-ellipsis whitespace-nowrap">
             <p>
@@ -52,7 +59,7 @@ export const PostItem = ({ post }: Props) => {
           </div>
           {post.images?.length > 0 ? (
             <div className="relative mt-2 w-full">
-              <ImageArea images={post.images} />
+              <ImageArea images={post.images} priority={true} />
             </div>
           ) : null}
           {post.movie ? (
@@ -67,9 +74,7 @@ export const PostItem = ({ post }: Props) => {
           ) : null}
           <p className="mt-2 text-sm sm:mt-4">
             <Link className="text-cax-text-muted hover:underline" to={`/posts/${post.id}`}>
-              <time dateTime={moment(post.createdAt).toISOString()}>
-                {moment(post.createdAt).locale("ja").format("LL")}
-              </time>
+              <time dateTime={toISOString(post.createdAt)}>{formatLongDateJa(post.createdAt)}</time>
             </Link>
           </p>
         </div>
diff --git a/application/client/src/components/post/TranslatableText.tsx b/application/client/src/components/post/TranslatableText.tsx
index d772529d92..b099174f0a 100644
--- a/application/client/src/components/post/TranslatableText.tsx
+++ b/application/client/src/components/post/TranslatableText.tsx
@@ -1,7 +1,5 @@
 import { useCallback, useState } from "react";
 
-import { createTranslator } from "@web-speed-hackathon-2026/client/src/utils/create_translator";
-
 type State =
   | { type: "idle"; text: string }
   | { type: "loading" }
@@ -20,6 +18,9 @@ export const TranslatableText = ({ text }: Props) => {
         (async () => {
           updateState({ type: "loading" });
           try {
+            const { createTranslator } = await import(
+              "@web-speed-hackathon-2026/client/src/utils/create_translator"
+            );
             using translator = await createTranslator({
               sourceLanguage: "ja",
               targetLanguage: "en",
diff --git a/application/client/src/components/timeline/Timeline.tsx b/application/client/src/components/timeline/Timeline.tsx
index 752a4d973b..8540ca6034 100644
--- a/application/client/src/components/timeline/Timeline.tsx
+++ b/application/client/src/components/timeline/Timeline.tsx
@@ -7,8 +7,8 @@ interface Props {
 export const Timeline = ({ timeline }: Props) => {
   return (
     <section>
-      {timeline.map((post) => {
-        return <TimelineItem key={post.id} post={post} />;
+      {timeline.map((post, index) => {
+        return <TimelineItem key={post.id} post={post} priority={index < 2} />;
       })}
     </section>
   );
diff --git a/application/client/src/components/timeline/TimelineItem.tsx b/application/client/src/components/timeline/TimelineItem.tsx
index 21b88980f8..f87de5b280 100644
--- a/application/client/src/components/timeline/TimelineItem.tsx
+++ b/application/client/src/components/timeline/TimelineItem.tsx
@@ -1,4 +1,3 @@
-import moment from "moment";
 import { MouseEventHandler, useCallback } from "react";
 import { Link, useNavigate } from "react-router";
 
@@ -6,6 +5,10 @@ import { ImageArea } from "@web-speed-hackathon-2026/client/src/components/post/
 import { MovieArea } from "@web-speed-hackathon-2026/client/src/components/post/MovieArea";
 import { SoundArea } from "@web-speed-hackathon-2026/client/src/components/post/SoundArea";
 import { TranslatableText } from "@web-speed-hackathon-2026/client/src/components/post/TranslatableText";
+import {
+  formatLongDateJa,
+  toISOString,
+} from "@web-speed-hackathon-2026/client/src/utils/date_format";
 import { getProfileImagePath } from "@web-speed-hackathon-2026/client/src/utils/get_path";
 
 const isClickedAnchorOrButton = (target: EventTarget | null, currentTarget: Element): boolean => {
@@ -28,9 +31,10 @@ const isClickedAnchorOrButton = (target: EventTarget | null, currentTarget: Elem
  */
 interface Props {
   post: Models.Post;
+  priority?: boolean;
 }
 
-export const TimelineItem = ({ post }: Props) => {
+export const TimelineItem = ({ post, priority = false }: Props) => {
   const navigate = useNavigate();
 
   /**
@@ -47,7 +51,11 @@ export const TimelineItem = ({ post }: Props) => {
   );
 
   return (
-    <article className="hover:bg-cax-surface-subtle px-1 sm:px-4" onClick={handleClick}>
+    <article
+      className="hover:bg-cax-surface-subtle px-1 sm:px-4"
+      onClick={handleClick}
+      style={{ containIntrinsicSize: "420px", contentVisibility: "auto" }}
+    >
       <div className="border-cax-border flex border-b px-2 pt-2 pb-4 sm:px-4">
         <div className="shrink-0 grow-0 pr-2 sm:pr-4">
           <Link
@@ -56,7 +64,12 @@ export const TimelineItem = ({ post }: Props) => {
           >
             <img
               alt={post.user.profileImage.alt}
+              decoding="async"
+              fetchPriority={priority ? "high" : "auto"}
+              height="64"
+              loading={priority ? "eager" : "lazy"}
               src={getProfileImagePath(post.user.profileImage.id)}
+              width="64"
             />
           </Link>
         </div>
@@ -76,9 +89,7 @@ export const TimelineItem = ({ post }: Props) => {
             </Link>
             <span className="text-cax-text-muted pr-1">-</span>
             <Link className="text-cax-text-muted pr-1 hover:underline" to={`/posts/${post.id}`}>
-              <time dateTime={moment(post.createdAt).toISOString()}>
-                {moment(post.createdAt).locale("ja").format("LL")}
-              </time>
+              <time dateTime={toISOString(post.createdAt)}>{formatLongDateJa(post.createdAt)}</time>
             </Link>
           </p>
           <div className="text-cax-text leading-relaxed">
@@ -86,7 +97,7 @@ export const TimelineItem = ({ post }: Props) => {
           </div>
           {post.images?.length > 0 ? (
             <div className="relative mt-2 w-full">
-              <ImageArea images={post.images} />
+              <ImageArea images={post.images} priority={priority} />
             </div>
           ) : null}
           {post.movie ? (
diff --git a/application/client/src/components/user_profile/UserProfileHeader.tsx b/application/client/src/components/user_profile/UserProfileHeader.tsx
index c1c3355e19..65ffbf4672 100644
--- a/application/client/src/components/user_profile/UserProfileHeader.tsx
+++ b/application/client/src/components/user_profile/UserProfileHeader.tsx
@@ -1,8 +1,11 @@
 import { FastAverageColor } from "fast-average-color";
-import moment from "moment";
 import { ReactEventHandler, useCallback, useState } from "react";
 
 import { FontAwesomeIcon } from "@web-speed-hackathon-2026/client/src/components/foundation/FontAwesomeIcon";
+import {
+  formatLongDateJa,
+  toISOString,
+} from "@web-speed-hackathon-2026/client/src/utils/date_format";
 import { getProfileImagePath } from "@web-speed-hackathon-2026/client/src/utils/get_path";
 
 interface Props {
@@ -30,8 +33,12 @@ export const UserProfileHeader = ({ user }: Props) => {
         <img
           alt=""
           crossOrigin="anonymous"
+          decoding="async"
+          fetchPriority="high"
+          height="128"
           onLoad={handleLoadImage}
           src={getProfileImagePath(user.profileImage.id)}
+          width="128"
         />
       </div>
       <div className="px-4 pt-20">
@@ -43,9 +50,7 @@ export const UserProfileHeader = ({ user }: Props) => {
             <FontAwesomeIcon iconType="calendar-alt" styleType="regular" />
           </span>
           <span>
-            <time dateTime={moment(user.createdAt).toISOString()}>
-              {moment(user.createdAt).locale("ja").format("LL")}
-            </time>
+            <time dateTime={toISOString(user.createdAt)}>{formatLongDateJa(user.createdAt)}</time>
             からサービスを利用しています
           </span>
         </p>
diff --git a/application/client/src/containers/AppContainer.tsx b/application/client/src/containers/AppContainer.tsx
index d66858a949..1266dd4f38 100644
--- a/application/client/src/containers/AppContainer.tsx
+++ b/application/client/src/containers/AppContainer.tsx
@@ -1,10 +1,9 @@
-import { useCallback, useEffect, useId, useState } from "react";
-import { Helmet, HelmetProvider } from "react-helmet";
-import { Route, Routes, useLocation, useNavigate } from "react-router";
+import { Suspense, lazy, useCallback, useEffect, useId, useRef, useState } from "react";
+import { HelmetProvider } from "react-helmet";
+import { Route, Routes, useLocation } from "react-router";
 
 import { AppPage } from "@web-speed-hackathon-2026/client/src/components/application/AppPage";
 import { AuthModalContainer } from "@web-speed-hackathon-2026/client/src/containers/AuthModalContainer";
-import { CrokContainer } from "@web-speed-hackathon-2026/client/src/containers/CrokContainer";
 import { DirectMessageContainer } from "@web-speed-hackathon-2026/client/src/containers/DirectMessageContainer";
 import { DirectMessageListContainer } from "@web-speed-hackathon-2026/client/src/containers/DirectMessageListContainer";
 import { NewPostModalContainer } from "@web-speed-hackathon-2026/client/src/containers/NewPostModalContainer";
@@ -14,45 +13,103 @@ import { SearchContainer } from "@web-speed-hackathon-2026/client/src/containers
 import { TermContainer } from "@web-speed-hackathon-2026/client/src/containers/TermContainer";
 import { TimelineContainer } from "@web-speed-hackathon-2026/client/src/containers/TimelineContainer";
 import { UserProfileContainer } from "@web-speed-hackathon-2026/client/src/containers/UserProfileContainer";
+import { consumeBootstrapData, peekBootstrapData } from "@web-speed-hackathon-2026/client/src/utils/bootstrap_data";
 import { fetchJSON, sendJSON } from "@web-speed-hackathon-2026/client/src/utils/fetchers";
 
+const LazyCrokContainer = lazy(async () => {
+  const module = await import("@web-speed-hackathon-2026/client/src/containers/CrokContainer");
+  return { default: module.CrokContainer };
+});
+
 export const AppContainer = () => {
   const { pathname } = useLocation();
-  const navigate = useNavigate();
   useEffect(() => {
     window.scrollTo(0, 0);
   }, [pathname]);
 
-  const [activeUser, setActiveUser] = useState<Models.User | null>(null);
-  const [isLoadingActiveUser, setIsLoadingActiveUser] = useState(true);
+  const initialBootstrapUser =
+    (pathname.startsWith("/dm") || pathname === "/crok") ? peekBootstrapData<Models.User>("/api/v1/me") : null;
+  const [activeUser, setActiveUser] = useState<Models.User | null>(initialBootstrapUser);
+  const [isLoadingActiveUser, setIsLoadingActiveUser] = useState(initialBootstrapUser === null);
+  const activeUserRequestIdRef = useRef(0);
+
+  const applyActiveUser = useCallback((user: Models.User | null) => {
+    activeUserRequestIdRef.current += 1;
+    setActiveUser(user);
+    setIsLoadingActiveUser(false);
+  }, []);
+
   useEffect(() => {
-    void fetchJSON<Models.User>("/api/v1/me")
-      .then((user) => {
-        setActiveUser(user);
-      })
-      .finally(() => {
+    const shouldPrioritizeAuth = pathname.startsWith("/dm") || pathname === "/crok";
+    let cancelled = false;
+
+    const requestId = activeUserRequestIdRef.current + 1;
+    activeUserRequestIdRef.current = requestId;
+
+    const loadActiveUser = () => {
+      const bootstrapUser = consumeBootstrapData<Models.User>("/api/v1/me");
+      if (bootstrapUser !== null) {
+        setActiveUser(bootstrapUser);
         setIsLoadingActiveUser(false);
-      });
-  }, [setActiveUser, setIsLoadingActiveUser]);
+        return;
+      }
+
+      void fetchJSON<Models.User>("/api/v1/me")
+        .then((user) => {
+          if (cancelled || activeUserRequestIdRef.current !== requestId) {
+            return;
+          }
+          setActiveUser(user);
+        })
+        .catch(() => {
+          if (cancelled || activeUserRequestIdRef.current !== requestId) {
+            return;
+          }
+          setActiveUser(null);
+        })
+        .finally(() => {
+          if (cancelled || activeUserRequestIdRef.current !== requestId) {
+            return;
+          }
+          setIsLoadingActiveUser(false);
+        });
+    };
+
+    if (shouldPrioritizeAuth) {
+      if (activeUser == null) {
+        setIsLoadingActiveUser(true);
+      }
+      loadActiveUser();
+      return () => {
+        cancelled = true;
+      };
+    }
+
+    let idleCallbackId: number | null = null;
+    const timeoutId = window.setTimeout(() => {
+      if ("requestIdleCallback" in window) {
+        idleCallbackId = window.requestIdleCallback(loadActiveUser, { timeout: 3000 });
+      } else {
+        loadActiveUser();
+      }
+    }, 1000);
+
+    return () => {
+      cancelled = true;
+      window.clearTimeout(timeoutId);
+      if (idleCallbackId !== null && "cancelIdleCallback" in window) {
+        window.cancelIdleCallback(idleCallbackId);
+      }
+    };
+  }, [activeUser, pathname]);
   const handleLogout = useCallback(async () => {
     await sendJSON("/api/v1/signout", {});
-    setActiveUser(null);
-    navigate("/");
-  }, [navigate]);
+    applyActiveUser(null);
+  }, [applyActiveUser]);
 
   const authModalId = useId();
   const newPostModalId = useId();
 
-  if (isLoadingActiveUser) {
-    return (
-      <HelmetProvider>
-        <Helmet>
-          <title>読込中 - CaX</title>
-        </Helmet>
-      </HelmetProvider>
-    );
-  }
-
   return (
     <HelmetProvider>
       <AppPage
@@ -65,12 +122,18 @@ export const AppContainer = () => {
           <Route element={<TimelineContainer />} path="/" />
           <Route
             element={
-              <DirectMessageListContainer activeUser={activeUser} authModalId={authModalId} />
+              isLoadingActiveUser ? null : (
+                <DirectMessageListContainer activeUser={activeUser} authModalId={authModalId} />
+              )
             }
             path="/dm"
           />
           <Route
-            element={<DirectMessageContainer activeUser={activeUser} authModalId={authModalId} />}
+            element={
+              isLoadingActiveUser ? null : (
+                <DirectMessageContainer activeUser={activeUser} authModalId={authModalId} />
+              )
+            }
             path="/dm/:conversationId"
           />
           <Route element={<SearchContainer />} path="/search" />
@@ -78,14 +141,20 @@ export const AppContainer = () => {
           <Route element={<PostContainer />} path="/posts/:postId" />
           <Route element={<TermContainer />} path="/terms" />
           <Route
-            element={<CrokContainer activeUser={activeUser} authModalId={authModalId} />}
+            element={
+              <Suspense fallback={null}>
+                {!isLoadingActiveUser ? (
+                  <LazyCrokContainer activeUser={activeUser} authModalId={authModalId} />
+                ) : null}
+              </Suspense>
+            }
             path="/crok"
           />
           <Route element={<NotFoundContainer />} path="*" />
         </Routes>
       </AppPage>
 
-      <AuthModalContainer id={authModalId} onUpdateActiveUser={setActiveUser} />
+      <AuthModalContainer id={authModalId} onUpdateActiveUser={applyActiveUser} />
       <NewPostModalContainer id={newPostModalId} />
     </HelmetProvider>
   );
diff --git a/application/client/src/containers/AuthModalContainer.tsx b/application/client/src/containers/AuthModalContainer.tsx
index 8d159f3528..1b626d05df 100644
--- a/application/client/src/containers/AuthModalContainer.tsx
+++ b/application/client/src/containers/AuthModalContainer.tsx
@@ -1,10 +1,9 @@
 import { useCallback, useEffect, useRef, useState } from "react";
-import { SubmissionError } from "redux-form";
 
 import { AuthFormData } from "@web-speed-hackathon-2026/client/src/auth/types";
 import { AuthModalPage } from "@web-speed-hackathon-2026/client/src/components/auth_modal/AuthModalPage";
 import { Modal } from "@web-speed-hackathon-2026/client/src/components/modal/Modal";
-import { sendJSON } from "@web-speed-hackathon-2026/client/src/utils/fetchers";
+import { HTTPError, sendJSON } from "@web-speed-hackathon-2026/client/src/utils/fetchers";
 
 interface Props {
   id: string;
@@ -16,14 +15,14 @@ const ERROR_MESSAGES: Record<string, string> = {
   USERNAME_TAKEN: "ユーザー名が使われています",
 };
 
-function getErrorCode(err: JQuery.jqXHR<unknown>, type: "signin" | "signup"): string {
-  const responseJSON = err.responseJSON;
+function getErrorCode(err: unknown, type: "signin" | "signup"): string {
+  const responseJSON = err instanceof HTTPError ? err.responseJSON : null;
   if (
     typeof responseJSON !== "object" ||
     responseJSON === null ||
     !("code" in responseJSON) ||
-    typeof responseJSON.code !== "string" ||
-    !Object.keys(ERROR_MESSAGES).includes(responseJSON.code)
+    typeof responseJSON["code"] !== "string" ||
+    !Object.keys(ERROR_MESSAGES).includes(responseJSON["code"])
   ) {
     if (type === "signup") {
       return "登録に失敗しました";
@@ -32,7 +31,7 @@ function getErrorCode(err: JQuery.jqXHR<unknown>, type: "signin" | "signup"): st
     }
   }
 
-  return ERROR_MESSAGES[responseJSON.code]!;
+  return ERROR_MESSAGES[responseJSON["code"]]!;
 }
 
 export const AuthModalContainer = ({ id, onUpdateActiveUser }: Props) => {
@@ -57,7 +56,7 @@ export const AuthModalContainer = ({ id, onUpdateActiveUser }: Props) => {
   }, [ref]);
 
   const handleSubmit = useCallback(
-    async (values: AuthFormData) => {
+    async (values: AuthFormData): Promise<string | null> => {
       try {
         if (values.type === "signup") {
           const user = await sendJSON<Models.User>("/api/v1/signup", values);
@@ -67,11 +66,9 @@ export const AuthModalContainer = ({ id, onUpdateActiveUser }: Props) => {
           onUpdateActiveUser(user);
         }
         handleRequestCloseModal();
+        return null;
       } catch (err: unknown) {
-        const error = getErrorCode(err as JQuery.jqXHR<unknown>, values.type);
-        throw new SubmissionError({
-          _error: error,
-        });
+        return getErrorCode(err, values.type);
       }
     },
     [handleRequestCloseModal, onUpdateActiveUser],
diff --git a/application/client/src/containers/DirectMessageContainer.tsx b/application/client/src/containers/DirectMessageContainer.tsx
index 245deac8a6..f2f3ad5978 100644
--- a/application/client/src/containers/DirectMessageContainer.tsx
+++ b/application/client/src/containers/DirectMessageContainer.tsx
@@ -27,6 +27,8 @@ interface Props {
 
 export const DirectMessageContainer = ({ activeUser, authModalId }: Props) => {
   const { conversationId = "" } = useParams<{ conversationId: string }>();
+  const optimisticMessagesRef = useRef<Models.DirectMessage[]>([]);
+  const optimisticRequestSeqRef = useRef(0);
 
   const [conversation, setConversation] = useState<Models.DirectMessageConversation | null>(null);
   const [conversationError, setConversationError] = useState<Error | null>(null);
@@ -35,6 +37,18 @@ export const DirectMessageContainer = ({ activeUser, authModalId }: Props) => {
   const [isPeerTyping, setIsPeerTyping] = useState(false);
   const peerTypingTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
 
+  const mergeConversationMessages = useCallback(
+    (messages: Models.DirectMessage[]) => {
+      const seen = new Set(messages.map((message) => message.id));
+      const pending = optimisticMessagesRef.current.filter((message) => !seen.has(message.id));
+
+      return [...messages, ...pending].sort((a, b) => {
+        return new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime();
+      });
+    },
+    [],
+  );
+
   const loadConversation = useCallback(async () => {
     if (activeUser == null) {
       return;
@@ -44,64 +58,136 @@ export const DirectMessageContainer = ({ activeUser, authModalId }: Props) => {
       const data = await fetchJSON<Models.DirectMessageConversation>(
         `/api/v1/dm/${conversationId}`,
       );
-      setConversation(data);
+      setConversation({
+        ...data,
+        messages: mergeConversationMessages(data.messages),
+      });
       setConversationError(null);
     } catch (error) {
       setConversation(null);
       setConversationError(error as Error);
     }
-  }, [activeUser, conversationId]);
+  }, [activeUser, conversationId, mergeConversationMessages]);
 
   const sendRead = useCallback(async () => {
+    if (activeUser == null || conversationId === "") {
+      return;
+    }
     await sendJSON(`/api/v1/dm/${conversationId}/read`, {});
-  }, [conversationId]);
+  }, [activeUser, conversationId]);
 
   useEffect(() => {
+    if (activeUser == null || conversationId === "") {
+      return;
+    }
     void loadConversation();
     void sendRead();
-  }, [loadConversation, sendRead]);
+  }, [activeUser, conversationId, loadConversation, sendRead]);
 
   const handleSubmit = useCallback(
     async (params: DirectMessageFormData) => {
+      if (activeUser == null) {
+        return;
+      }
+
       setIsSubmitting(true);
+      const requestSeq = optimisticRequestSeqRef.current + 1;
+      optimisticRequestSeqRef.current = requestSeq;
+      const createdAt = new Date().toISOString();
+      const optimisticMessage = {
+        body: params.body,
+        createdAt,
+        id: `optimistic-${requestSeq}`,
+        isRead: false,
+        sender: {
+          id: activeUser.id,
+        },
+      } as Models.DirectMessage;
+      optimisticMessagesRef.current = [...optimisticMessagesRef.current, optimisticMessage];
+      setConversation((current) => {
+        if (current == null) {
+          return current;
+        }
+
+        return {
+          ...current,
+          messages: mergeConversationMessages([...current.messages, optimisticMessage]),
+        };
+      });
+
       try {
-        await sendJSON(`/api/v1/dm/${conversationId}/messages`, {
+        const sentMessage = await sendJSON<Models.DirectMessage>(`/api/v1/dm/${conversationId}/messages`, {
           body: params.body,
         });
-        loadConversation();
+        optimisticMessagesRef.current = optimisticMessagesRef.current.filter(
+          (message) => message.id !== optimisticMessage.id,
+        );
+        setConversation((current) => {
+          if (current == null) {
+            return current;
+          }
+
+          const nextMessages = current.messages
+            .filter((message) => message.id !== optimisticMessage.id)
+            .concat(sentMessage);
+          return {
+            ...current,
+            messages: mergeConversationMessages(nextMessages),
+          };
+        });
+        void loadConversation();
+      } catch (error) {
+        optimisticMessagesRef.current = optimisticMessagesRef.current.filter(
+          (message) => message.id !== optimisticMessage.id,
+        );
+        setConversation((current) => {
+          if (current == null) {
+            return current;
+          }
+
+          return {
+            ...current,
+            messages: current.messages.filter((message) => message.id !== optimisticMessage.id),
+          };
+        });
+        throw error;
       } finally {
         setIsSubmitting(false);
       }
     },
-    [conversationId, loadConversation],
+    [activeUser, conversationId, loadConversation, mergeConversationMessages],
   );
 
   const handleTyping = useCallback(async () => {
     void sendJSON(`/api/v1/dm/${conversationId}/typing`, {});
   }, [conversationId]);
 
-  useWs(`/api/v1/dm/${conversationId}`, (event: DmUpdateEvent | DmTypingEvent) => {
-    if (event.type === "dm:conversation:message") {
-      void loadConversation().then(() => {
-        if (event.payload.sender.id !== activeUser?.id) {
-          setIsPeerTyping(false);
-          if (peerTypingTimeoutRef.current !== null) {
-            clearTimeout(peerTypingTimeoutRef.current);
+  useWs(
+    `/api/v1/dm/${conversationId}`,
+    (event: DmUpdateEvent | DmTypingEvent) => {
+      if (event.type === "dm:conversation:message") {
+        void loadConversation().then(() => {
+          if (event.payload.sender.id !== activeUser?.id) {
+            setIsPeerTyping(false);
+            if (peerTypingTimeoutRef.current !== null) {
+              clearTimeout(peerTypingTimeoutRef.current);
+            }
+            peerTypingTimeoutRef.current = null;
           }
-          peerTypingTimeoutRef.current = null;
+        });
+        void sendRead();
+      } else if (event.type === "dm:conversation:typing") {
+        setIsPeerTyping(true);
+        if (peerTypingTimeoutRef.current !== null) {
+          clearTimeout(peerTypingTimeoutRef.current);
         }
-      });
-      void sendRead();
-    } else if (event.type === "dm:conversation:typing") {
-      setIsPeerTyping(true);
-      if (peerTypingTimeoutRef.current !== null) {
-        clearTimeout(peerTypingTimeoutRef.current);
+        peerTypingTimeoutRef.current = setTimeout(() => {
+          setIsPeerTyping(false);
+        }, TYPING_INDICATOR_DURATION_MS);
       }
-      peerTypingTimeoutRef.current = setTimeout(() => {
-        setIsPeerTyping(false);
-      }, TYPING_INDICATOR_DURATION_MS);
-    }
-  });
+    },
+    { delayMs: 5000, enabled: activeUser != null && conversationId !== "" },
+  );
 
   if (activeUser === null) {
     return (
diff --git a/application/client/src/containers/NewPostModalContainer.tsx b/application/client/src/containers/NewPostModalContainer.tsx
index ae9484e878..8e956dd71d 100644
--- a/application/client/src/containers/NewPostModalContainer.tsx
+++ b/application/client/src/containers/NewPostModalContainer.tsx
@@ -1,12 +1,23 @@
-import { useCallback, useEffect, useId, useRef, useState } from "react";
+import { Suspense, lazy, useCallback, useEffect, useId, useRef, useState } from "react";
 import { useNavigate } from "react-router";
 
 import { Modal } from "@web-speed-hackathon-2026/client/src/components/modal/Modal";
-import { NewPostModalPage } from "@web-speed-hackathon-2026/client/src/components/new_post_modal/NewPostModalPage";
 import { sendFile, sendJSON } from "@web-speed-hackathon-2026/client/src/utils/fetchers";
 
+const LazyNewPostModalPage = lazy(async () => {
+  const module = await import(
+    "@web-speed-hackathon-2026/client/src/components/new_post_modal/NewPostModalPage"
+  );
+  return { default: module.NewPostModalPage };
+});
+
+interface ImageUpload {
+  alt: string;
+  file: File;
+}
+
 interface SubmitParams {
-  images: File[];
+  images: ImageUpload[];
   movie: File | undefined;
   sound: File | undefined;
   text: string;
@@ -15,7 +26,13 @@ interface SubmitParams {
 async function sendNewPost({ images, movie, sound, text }: SubmitParams): Promise<Models.Post> {
   const payload = {
     images: images
-      ? await Promise.all(images.map((image) => sendFile("/api/v1/images", image)))
+      ? await Promise.all(
+          images.map(({ alt, file }) =>
+            sendFile("/api/v1/images", file, {
+              "X-Image-Alt": encodeURIComponent(alt),
+            }),
+          ),
+        )
       : [],
     movie: movie ? await sendFile("/api/v1/movies", movie) : undefined,
     sound: sound ? await sendFile("/api/v1/sounds", sound) : undefined,
@@ -32,6 +49,7 @@ interface Props {
 export const NewPostModalContainer = ({ id }: Props) => {
   const dialogId = useId();
   const ref = useRef<HTMLDialogElement>(null);
+  const [hasOpened, setHasOpened] = useState(false);
   const [resetKey, setResetKey] = useState(0);
   useEffect(() => {
     const element = ref.current;
@@ -42,6 +60,7 @@ export const NewPostModalContainer = ({ id }: Props) => {
     const handleToggle = () => {
       // モーダル開閉時にkeyを更新することでフォームの状態をリセットする
       setResetKey((key) => key + 1);
+      setHasOpened((current) => current || element.open);
     };
     element.addEventListener("toggle", handleToggle);
     return () => {
@@ -76,14 +95,18 @@ export const NewPostModalContainer = ({ id }: Props) => {
 
   return (
     <Modal aria-labelledby={dialogId} id={id} ref={ref} closedby="any">
-      <NewPostModalPage
-        key={resetKey}
-        id={dialogId}
-        hasError={hasError}
-        isLoading={isLoading}
-        onResetError={handleResetError}
-        onSubmit={handleSubmit}
-      />
+      {hasOpened ? (
+        <Suspense fallback={null}>
+          <LazyNewPostModalPage
+            key={resetKey}
+            id={dialogId}
+            hasError={hasError}
+            isLoading={isLoading}
+            onResetError={handleResetError}
+            onSubmit={handleSubmit}
+          />
+        </Suspense>
+      ) : null}
     </Modal>
   );
 };
diff --git a/application/client/src/containers/PostContainer.tsx b/application/client/src/containers/PostContainer.tsx
index c296554ead..53bb60de72 100644
--- a/application/client/src/containers/PostContainer.tsx
+++ b/application/client/src/containers/PostContainer.tsx
@@ -1,4 +1,5 @@
 import { Helmet } from "react-helmet";
+import { useEffect, useState } from "react";
 import { useParams } from "react-router";
 
 import { InfiniteScroll } from "@web-speed-hackathon-2026/client/src/components/foundation/InfiniteScroll";
@@ -14,9 +15,35 @@ const PostContainerContent = ({ postId }: { postId: string | undefined }) => {
     fetchJSON,
   );
 
-  const { data: comments, fetchMore } = useInfiniteFetch<Models.Comment>(
+  const [shouldLoadComments, setShouldLoadComments] = useState(false);
+
+  useEffect(() => {
+    if (isLoadingPost || post == null) {
+      setShouldLoadComments(false);
+      return;
+    }
+
+    const loadComments = () => {
+      setShouldLoadComments(true);
+    };
+
+    if ("requestIdleCallback" in window) {
+      const idleId = window.requestIdleCallback(loadComments, { timeout: 1500 });
+      return () => {
+        window.cancelIdleCallback(idleId);
+      };
+    }
+
+    const timeoutId = globalThis.setTimeout(loadComments, 300);
+    return () => {
+      globalThis.clearTimeout(timeoutId);
+    };
+  }, [isLoadingPost, post]);
+
+  const { data: comments, fetchMore, hasMore } = useInfiniteFetch<Models.Comment>(
     `/api/v1/posts/${postId}/comments`,
     fetchJSON,
+    { enabled: shouldLoadComments, limit: 4 },
   );
 
   if (isLoadingPost) {
@@ -32,7 +59,7 @@ const PostContainerContent = ({ postId }: { postId: string | undefined }) => {
   }
 
   return (
-    <InfiniteScroll fetchMore={fetchMore} items={comments}>
+    <InfiniteScroll fetchMore={fetchMore} hasMore={hasMore} items={comments}>
       <Helmet>
         <title>{post.user.name} さんのつぶやき - CaX</title>
       </Helmet>
diff --git a/application/client/src/containers/SearchContainer.tsx b/application/client/src/containers/SearchContainer.tsx
index f5cdd4148f..c3c67ed34e 100644
--- a/application/client/src/containers/SearchContainer.tsx
+++ b/application/client/src/containers/SearchContainer.tsx
@@ -10,13 +10,14 @@ export const SearchContainer = () => {
   const [searchParams] = useSearchParams();
   const query = searchParams.get("q") || "";
 
-  const { data: posts, fetchMore } = useInfiniteFetch<Models.Post>(
+  const { data: posts, fetchMore, hasMore } = useInfiniteFetch<Models.Post>(
     query ? `/api/v1/search?q=${encodeURIComponent(query)}` : "",
     fetchJSON,
+    { limit: 8 },
   );
 
   return (
-    <InfiniteScroll fetchMore={fetchMore} items={posts}>
+    <InfiniteScroll fetchMore={fetchMore} hasMore={hasMore} items={posts}>
       <Helmet>
         <title>検索 - CaX</title>
       </Helmet>
diff --git a/application/client/src/containers/TimelineContainer.tsx b/application/client/src/containers/TimelineContainer.tsx
index 3b0ca03356..a46a52135d 100644
--- a/application/client/src/containers/TimelineContainer.tsx
+++ b/application/client/src/containers/TimelineContainer.tsx
@@ -6,10 +6,14 @@ import { useInfiniteFetch } from "@web-speed-hackathon-2026/client/src/hooks/use
 import { fetchJSON } from "@web-speed-hackathon-2026/client/src/utils/fetchers";
 
 export const TimelineContainer = () => {
-  const { data: posts, fetchMore } = useInfiniteFetch<Models.Post>("/api/v1/posts", fetchJSON);
+  const { data: posts, fetchMore, hasMore } = useInfiniteFetch<Models.Post>(
+    "/api/v1/posts",
+    fetchJSON,
+    { limit: 4 },
+  );
 
   return (
-    <InfiniteScroll fetchMore={fetchMore} items={posts}>
+    <InfiniteScroll fetchMore={fetchMore} hasMore={hasMore} items={posts}>
       <Helmet>
         <title>タイムライン - CaX</title>
       </Helmet>
diff --git a/application/client/src/containers/UserProfileContainer.tsx b/application/client/src/containers/UserProfileContainer.tsx
index dae135e89c..31838ab769 100644
--- a/application/client/src/containers/UserProfileContainer.tsx
+++ b/application/client/src/containers/UserProfileContainer.tsx
@@ -15,9 +15,10 @@ export const UserProfileContainer = () => {
     `/api/v1/users/${username}`,
     fetchJSON,
   );
-  const { data: posts, fetchMore } = useInfiniteFetch<Models.Post>(
+  const { data: posts, fetchMore, hasMore } = useInfiniteFetch<Models.Post>(
     `/api/v1/users/${username}/posts`,
     fetchJSON,
+    { limit: 8 },
   );
 
   if (isLoadingUser) {
@@ -33,7 +34,7 @@ export const UserProfileContainer = () => {
   }
 
   return (
-    <InfiniteScroll fetchMore={fetchMore} items={posts}>
+    <InfiniteScroll fetchMore={fetchMore} hasMore={hasMore} items={posts}>
       <Helmet>
         <title>{user.name} さんのタイムライン - CaX</title>
       </Helmet>
diff --git a/application/client/src/hooks/use_fetch.ts b/application/client/src/hooks/use_fetch.ts
index 36039ed35d..5921d6e6c5 100644
--- a/application/client/src/hooks/use_fetch.ts
+++ b/application/client/src/hooks/use_fetch.ts
@@ -1,5 +1,7 @@
 import { useEffect, useState } from "react";
 
+import { consumeBootstrapData, peekBootstrapData } from "@web-speed-hackathon-2026/client/src/utils/bootstrap_data";
+
 interface ReturnValues<T> {
   data: T | null;
   error: Error | null;
@@ -10,19 +12,39 @@ export function useFetch<T>(
   apiPath: string,
   fetcher: (apiPath: string) => Promise<T>,
 ): ReturnValues<T> {
-  const [result, setResult] = useState<ReturnValues<T>>({
-    data: null,
+  const initialBootstrapData = apiPath ? peekBootstrapData<T>(apiPath) : null;
+  const [result, setResult] = useState<ReturnValues<T>>(() => ({
+    data: initialBootstrapData,
     error: null,
-    isLoading: true,
-  });
+    isLoading: apiPath !== "" && initialBootstrapData === null,
+  }));
 
   useEffect(() => {
+    if (!apiPath) {
+      setResult(() => ({
+        data: null,
+        error: null,
+        isLoading: false,
+      }));
+      return;
+    }
+
     setResult(() => ({
       data: null,
       error: null,
       isLoading: true,
     }));
 
+    const bootstrapData = consumeBootstrapData<T>(apiPath);
+    if (bootstrapData !== null) {
+      setResult(() => ({
+        data: bootstrapData,
+        error: null,
+        isLoading: false,
+      }));
+      return;
+    }
+
     void fetcher(apiPath).then(
       (data) => {
         setResult((cur) => ({
diff --git a/application/client/src/hooks/use_infinite_fetch.ts b/application/client/src/hooks/use_infinite_fetch.ts
index 394fccd9ea..479470ef9c 100644
--- a/application/client/src/hooks/use_infinite_fetch.ts
+++ b/application/client/src/hooks/use_infinite_fetch.ts
@@ -1,10 +1,25 @@
 import { useCallback, useEffect, useRef, useState } from "react";
 
-const LIMIT = 30;
+import { consumeBootstrapData, peekBootstrapData } from "@web-speed-hackathon-2026/client/src/utils/bootstrap_data";
+
+const DEFAULT_LIMIT = 12;
+
+interface Options {
+  enabled?: boolean;
+  limit?: number;
+}
+
+function createRequestPath(apiPath: string, limit: number, offset: number) {
+  const requestUrl = new URL(apiPath, window.location.origin);
+  requestUrl.searchParams.set("limit", String(limit));
+  requestUrl.searchParams.set("offset", String(offset));
+  return `${requestUrl.pathname}${requestUrl.search}`;
+}
 
 interface ReturnValues<T> {
   data: Array<T>;
   error: Error | null;
+  hasMore: boolean;
   isLoading: boolean;
   fetchMore: () => void;
 }
@@ -12,18 +27,35 @@ interface ReturnValues<T> {
 export function useInfiniteFetch<T>(
   apiPath: string,
   fetcher: (apiPath: string) => Promise<T[]>,
+  { enabled = true, limit = DEFAULT_LIMIT }: Options = {},
 ): ReturnValues<T> {
-  const internalRef = useRef({ isLoading: false, offset: 0 });
+  const initialRequestPath = apiPath && enabled ? createRequestPath(apiPath, limit, 0) : "";
+  const initialBootstrapData =
+    initialRequestPath !== "" ? peekBootstrapData<T[]>(initialRequestPath) : null;
+  const initialHasMore = initialBootstrapData !== null ? initialBootstrapData.length === limit : true;
+  const internalRef = useRef({
+    hasMore: initialBootstrapData !== null ? initialHasMore : true,
+    isLoading: false,
+    offset: initialBootstrapData?.length ?? 0,
+  });
 
-  const [result, setResult] = useState<Omit<ReturnValues<T>, "fetchMore">>({
-    data: [],
+  const [result, setResult] = useState<Omit<ReturnValues<T>, "fetchMore">>(() => ({
+    data: initialBootstrapData ?? [],
     error: null,
-    isLoading: true,
-  });
+    hasMore: initialBootstrapData !== null ? initialHasMore : true,
+    isLoading: apiPath !== "" && enabled && initialBootstrapData === null,
+  }));
+
+  const buildRequestPath = useCallback(
+    (offset: number) => {
+      return createRequestPath(apiPath, limit, offset);
+    },
+    [apiPath, limit],
+  );
 
   const fetchMore = useCallback(() => {
-    const { isLoading, offset } = internalRef.current;
-    if (isLoading) {
+    const { hasMore, isLoading, offset } = internalRef.current;
+    if (!apiPath || !enabled || isLoading || !hasMore) {
       return;
     }
 
@@ -32,20 +64,26 @@ export function useInfiniteFetch<T>(
       isLoading: true,
     }));
     internalRef.current = {
+      hasMore,
       isLoading: true,
       offset,
     };
 
-    void fetcher(apiPath).then(
-      (allData) => {
+    const requestPath = buildRequestPath(offset);
+
+    void fetcher(requestPath).then(
+      (pageData) => {
+        const nextHasMore = pageData.length === limit;
         setResult((cur) => ({
           ...cur,
-          data: [...cur.data, ...allData.slice(offset, offset + LIMIT)],
+          data: [...cur.data, ...pageData],
+          hasMore: nextHasMore,
           isLoading: false,
         }));
         internalRef.current = {
+          hasMore: nextHasMore,
           isLoading: false,
-          offset: offset + LIMIT,
+          offset: offset + pageData.length,
         };
       },
       (error) => {
@@ -55,26 +93,74 @@ export function useInfiniteFetch<T>(
           isLoading: false,
         }));
         internalRef.current = {
+          hasMore,
           isLoading: false,
           offset,
         };
       },
     );
-  }, [apiPath, fetcher]);
+  }, [apiPath, buildRequestPath, enabled, fetcher, limit]);
 
   useEffect(() => {
+    if (!apiPath || !enabled) {
+      setResult(() => ({
+        data: [],
+        error: null,
+        hasMore: false,
+        isLoading: false,
+      }));
+      internalRef.current = {
+        hasMore: false,
+        isLoading: false,
+        offset: 0,
+      };
+      return;
+    }
+
     setResult(() => ({
       data: [],
       error: null,
+      hasMore: true,
       isLoading: true,
     }));
     internalRef.current = {
+      hasMore: true,
       isLoading: false,
       offset: 0,
     };
 
+    const bootstrapData = consumeBootstrapData<T[]>(buildRequestPath(0));
+    if (bootstrapData !== null) {
+      const nextHasMore = bootstrapData.length === limit;
+      setResult((current) => {
+        if (
+          current.data === bootstrapData ||
+          (current.data.length === bootstrapData.length && current.error === null && !current.isLoading)
+        ) {
+          return {
+            ...current,
+            hasMore: nextHasMore,
+            isLoading: false,
+          };
+        }
+
+        return {
+          data: bootstrapData,
+          error: null,
+          hasMore: nextHasMore,
+          isLoading: false,
+        };
+      });
+      internalRef.current = {
+        hasMore: nextHasMore,
+        isLoading: false,
+        offset: bootstrapData.length,
+      };
+      return;
+    }
+
     fetchMore();
-  }, [fetchMore]);
+  }, [apiPath, buildRequestPath, enabled, fetchMore, limit]);
 
   return {
     ...result,
diff --git a/application/client/src/hooks/use_visibility.ts b/application/client/src/hooks/use_visibility.ts
new file mode 100644
index 0000000000..dc5a34d9fe
--- /dev/null
+++ b/application/client/src/hooks/use_visibility.ts
@@ -0,0 +1,33 @@
+import { useEffect, useRef, useState } from "react";
+
+interface Options {
+  rootMargin?: string;
+}
+
+export function useVisibility({ rootMargin = "200px 0px" }: Options = {}) {
+  const ref = useRef<HTMLElement | null>(null);
+  const [isVisible, setIsVisible] = useState(false);
+
+  useEffect(() => {
+    const element = ref.current;
+    if (element == null || isVisible) {
+      return;
+    }
+
+    const observer = new IntersectionObserver(
+      (entries) => {
+        if (entries.some((entry) => entry.isIntersecting)) {
+          setIsVisible(true);
+        }
+      },
+      { rootMargin },
+    );
+
+    observer.observe(element);
+    return () => {
+      observer.disconnect();
+    };
+  }, [isVisible, rootMargin]);
+
+  return { isVisible, ref };
+}
diff --git a/application/client/src/hooks/use_ws.ts b/application/client/src/hooks/use_ws.ts
index a7a9800ddc..453ba88056 100644
--- a/application/client/src/hooks/use_ws.ts
+++ b/application/client/src/hooks/use_ws.ts
@@ -1,17 +1,34 @@
 import { useEffect, useEffectEvent } from "react";
 
-export function useWs<T>(url: string, onMessage: (event: T) => void) {
+interface Options {
+  delayMs?: number;
+  enabled?: boolean;
+}
+
+export function useWs<T>(
+  url: string,
+  onMessage: (event: T) => void,
+  { delayMs = 0, enabled = true }: Options = {},
+) {
   const handleMessage = useEffectEvent((event: MessageEvent) => {
     onMessage(JSON.parse(event.data));
   });
 
   useEffect(() => {
-    const ws = new WebSocket(url);
-    ws.addEventListener("message", handleMessage);
+    if (!enabled) {
+      return;
+    }
+
+    let ws: WebSocket | null = null;
+    const timerId = window.setTimeout(() => {
+      ws = new WebSocket(url);
+      ws.addEventListener("message", handleMessage);
+    }, delayMs);
 
     return () => {
-      ws.removeEventListener("message", handleMessage);
-      ws.close();
+      window.clearTimeout(timerId);
+      ws?.removeEventListener("message", handleMessage);
+      ws?.close();
     };
-  }, [url]);
+  }, [delayMs, enabled, url]);
 }
diff --git a/application/client/src/index.css b/application/client/src/index.css
index 8612ebcdd2..e206e8a1b5 100644
--- a/application/client/src/index.css
+++ b/application/client/src/index.css
@@ -1,25 +1,205 @@
 @layer normalize, theme, base, components, utilities;
 
 @import "normalize.css" layer(normalize);
-
-@font-face {
-  /* Source Han Serif JP Regular の Y 軸を 1/1.43 に縮小した改変フォント */
-  font-family: "Rei no Are Mincho";
-  font-display: block;
-  src: url(/fonts/ReiNoAreMincho-Regular.otf) format("opentype");
-  font-weight: normal;
-}
-
-@font-face {
-  /* Source Han Serif JP Heavy の Y 軸を 1/1.43 に縮小した改変フォント */
-  font-family: "Rei no Are Mincho";
-  font-display: block;
-  src: url(/fonts/ReiNoAreMincho-Heavy.otf) format("opentype");
-  font-weight: bold;
-}
+@import "tailwindcss";
+@source "./**/*.{ts,tsx,html}";
 
 .font-awesome {
   height: 1em;
   vertical-align: -0.125em;
   width: 1em;
 }
+
+@layer base {
+  button:not(:disabled),
+  [role="button"]:not(:disabled) {
+    cursor: pointer;
+  }
+
+  body[data-has-prerender="1"][data-app-mounted="0"] #app {
+    visibility: hidden;
+  }
+
+  body[data-app-mounted="1"] #prerender-shell {
+    display: none;
+  }
+}
+
+@theme {
+  --color-cax-canvas: var(--color-stone-100);
+  --color-cax-surface: var(--color-white);
+  --color-cax-surface-raised: var(--color-white);
+  --color-cax-surface-subtle: var(--color-stone-50);
+  --color-cax-overlay: var(--color-slate-950);
+  --color-cax-border: var(--color-stone-300);
+  --color-cax-border-strong: var(--color-stone-400);
+  --color-cax-text: var(--color-teal-950);
+  --color-cax-text-muted: var(--color-teal-700);
+  --color-cax-text-subtle: var(--color-slate-500);
+  --color-cax-brand: var(--color-teal-700);
+  --color-cax-brand-strong: var(--color-teal-800);
+  --color-cax-brand-soft: var(--color-teal-100);
+  --color-cax-accent: var(--color-orange-700);
+  --color-cax-accent-soft: var(--color-orange-100);
+  --color-cax-danger: var(--color-red-600);
+  --color-cax-danger-soft: var(--color-red-100);
+  --color-cax-highlight: var(--color-amber-200);
+  --color-cax-highlight-ink: var(--color-amber-950);
+}
+
+@utility markdown {
+  @apply text-sm wrap-anywhere;
+  line-break: strict;
+
+  :where(a) {
+    @apply text-cax-accent decoration-cax-accent underline underline-offset-2;
+  }
+
+  :where(strong) {
+    @apply font-bold;
+  }
+
+  :where(em) {
+    @apply italic;
+  }
+
+  :where(code):not(:where(pre > code)) {
+    @apply bg-cax-surface-subtle text-cax-text rounded px-1 py-0.5 font-mono;
+  }
+
+  :where(del) {
+    @apply decoration-cax-text-subtle line-through;
+  }
+
+  :where(p) {
+    @apply text-cax-text my-6;
+  }
+
+  :where(blockquote) {
+    @apply border-cax-border text-cax-text-muted my-6 border-l-4 pl-4;
+  }
+
+  :where(hr) {
+    @apply border-cax-border my-10 border-t;
+  }
+
+  :where(ol) {
+    @apply my-6 list-decimal pl-6;
+  }
+
+  :where(ul) {
+    @apply my-6 list-disc pl-6;
+  }
+
+  :where(li) {
+    @apply my-2;
+  }
+
+  :where(ol > li, ul > li)::marker {
+    @apply text-cax-text-muted;
+  }
+
+  :where(ol ol, ul ul, ol ul, ul ol) {
+    @apply my-2;
+  }
+
+  :where(table) {
+    @apply text-cax-text my-6 w-full table-auto text-sm;
+  }
+
+  :where(thead) {
+    @apply border-cax-border border-b;
+  }
+
+  :where(thead th) {
+    @apply px-2 pb-1.5 font-bold;
+  }
+
+  :where(tbody tr) {
+    @apply border-cax-border border-b;
+  }
+
+  :where(tbody tr:last-child) {
+    @apply border-b-0;
+  }
+
+  :where(tbody td) {
+    @apply align-baseline;
+  }
+
+  :where(tfoot) {
+    @apply border-cax-border border-t;
+  }
+
+  :where(tfoot td) {
+    @apply align-top;
+  }
+
+  :where(th, td) {
+    @apply text-left;
+  }
+
+  :where(tbody td, tfoot td) {
+    @apply px-2 py-1.5;
+  }
+
+  :where(tbody tr:last-child td, tfoot tr:last-child td) {
+    @apply pb-0;
+  }
+
+  :where(h1, h2, h3, h4, h5, h6) {
+    @apply text-cax-text text-pretty;
+  }
+
+  :where(h1, h2, h3, h4) {
+    @apply font-bold;
+  }
+
+  :where(h1, h2) {
+    @apply mt-10 mb-8 text-2xl;
+  }
+
+  :where(h3) {
+    @apply mt-8 mb-6 text-xl;
+  }
+
+  :where(h4) {
+    @apply mt-6 mb-4 text-lg;
+  }
+
+  :where(h5) {
+    @apply border-cax-border mt-6 mb-4 border-b py-0.5 pl-2 font-bold;
+  }
+
+  :where(h6) {
+    @apply border-cax-border mt-6 mb-4 border-b py-0.5 pl-2;
+  }
+
+  :where(h1 + *, h2 + *, h3 + *, h4 + *, h5 + *, h6 + *) {
+    @apply mt-0;
+  }
+
+  :where(.footnotes) {
+    @apply border-cax-border mt-8 border-t;
+  }
+
+  :where(.footnotes h2) {
+    @apply sr-only;
+  }
+
+  :where(.footnotes ol) {
+    @apply mt-8 mb-0 text-sm;
+  }
+
+  :where(.footnotes ol li p) {
+    @apply my-0;
+  }
+
+  & > *:first-child {
+    @apply mt-0;
+  }
+
+  & > *:last-child {
+    @apply mb-0;
+  }
+}
diff --git a/application/client/src/index.html b/application/client/src/index.html
index 3d949e7473..cd9c781883 100644
--- a/application/client/src/index.html
+++ b/application/client/src/index.html
@@ -4,174 +4,8 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>CaX</title>
-    <script src="/scripts/main.js"></script>
+    <script defer src="/scripts/main.js"></script>
     <link rel="stylesheet" href="/styles/main.css" />
-    <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4.2.1"></script>
-    <style type="text/tailwindcss">
-      @layer base {
-        button:not(:disabled),
-        [role="button"]:not(:disabled) {
-          cursor: pointer;
-        }
-      }
-
-      @theme {
-        --color-cax-canvas: var(--color-stone-100);
-        --color-cax-surface: var(--color-white);
-        --color-cax-surface-raised: var(--color-white);
-        --color-cax-surface-subtle: var(--color-stone-50);
-        --color-cax-overlay: var(--color-slate-950);
-        --color-cax-border: var(--color-stone-300);
-        --color-cax-border-strong: var(--color-stone-400);
-        --color-cax-text: var(--color-teal-950);
-        --color-cax-text-muted: var(--color-teal-700);
-        --color-cax-text-subtle: var(--color-slate-500);
-        --color-cax-brand: var(--color-teal-700);
-        --color-cax-brand-strong: var(--color-teal-800);
-        --color-cax-brand-soft: var(--color-teal-100);
-        --color-cax-accent: var(--color-orange-700);
-        --color-cax-accent-soft: var(--color-orange-100);
-        --color-cax-danger: var(--color-red-600);
-        --color-cax-danger-soft: var(--color-red-100);
-        --color-cax-highlight: var(--color-amber-200);
-        --color-cax-highlight-ink: var(--color-amber-950);
-      }
-
-      @utility markdown {
-        @apply text-sm wrap-anywhere;
-        line-break: strict;
-
-        /* インライン要素 */
-        :where(a) {
-          @apply text-cax-accent decoration-cax-accent underline underline-offset-2;
-        }
-        :where(strong) {
-          @apply font-bold;
-        }
-        :where(em) {
-          @apply italic;
-        }
-        :where(code):not(:where(pre > code)) {
-          @apply bg-cax-surface-subtle text-cax-text rounded px-1 py-0.5 font-mono;
-        }
-        :where(del) {
-          @apply decoration-cax-text-subtle line-through;
-        }
-
-        /* ブロック要素 */
-        :where(p) {
-          @apply text-cax-text my-6;
-        }
-        :where(blockquote) {
-          @apply border-cax-border text-cax-text-muted my-6 border-l-4 pl-4;
-        }
-        :where(hr) {
-          @apply border-cax-border my-10 border-t;
-        }
-
-        /* リスト */
-        :where(ol) {
-          @apply my-6 list-decimal pl-6;
-        }
-        :where(ul) {
-          @apply my-6 list-disc pl-6;
-        }
-        :where(li) {
-          @apply my-2;
-        }
-        :where(ol > li, ul > li)::marker {
-          @apply text-cax-text-muted;
-        }
-        :where(ol ol, ul ul, ol ul, ul ol) {
-          @apply my-2;
-        }
-
-        /* テーブル */
-        :where(table) {
-          @apply text-cax-text my-6 w-full table-auto text-sm;
-        }
-        :where(thead) {
-          @apply border-cax-border border-b;
-        }
-        :where(thead th) {
-          @apply px-2 pb-1.5 font-bold;
-        }
-        :where(tbody tr) {
-          @apply border-cax-border border-b;
-        }
-        :where(tbody tr:last-child) {
-          @apply border-b-0;
-        }
-        :where(tbody td) {
-          @apply align-baseline;
-        }
-        :where(tfoot) {
-          @apply border-cax-border border-t;
-        }
-        :where(tfoot td) {
-          @apply align-top;
-        }
-        :where(th, td) {
-          @apply text-left;
-        }
-        :where(tbody td, tfoot td) {
-          @apply px-2 py-1.5;
-        }
-        :where(tbody tr:last-child td, tfoot tr:last-child td) {
-          @apply pb-0;
-        }
-
-        /* 見出し */
-        :where(h1, h2, h3, h4, h5, h6) {
-          @apply text-cax-text text-pretty;
-        }
-        :where(h1, h2, h3, h4) {
-          @apply font-bold;
-        }
-        :where(h1, h2) {
-          @apply mt-10 mb-8 text-2xl;
-        }
-        :where(h3) {
-          @apply mt-8 mb-6 text-xl;
-        }
-        :where(h4) {
-          @apply mt-6 mb-4 text-lg;
-        }
-        :where(h5) {
-          @apply border-cax-border mt-6 mb-4 border-b py-0.5 pl-2 font-bold;
-        }
-        :where(h6) {
-          @apply border-cax-border mt-6 mb-4 border-b py-0.5 pl-2;
-        }
-        :where(h1 + *, h2 + *, h3 + *, h4 + *, h5 + *, h6 + *) {
-          @apply mt-0;
-        }
-
-        /* 注釈 */
-        :where(.footnotes) {
-          @apply border-cax-border mt-8 border-t;
-        }
-        :where(.footnotes h2) {
-          @apply sr-only;
-        }
-        :where(.footnotes ol) {
-          @apply mt-8 mb-0 text-sm;
-        }
-        :where(.footnotes ol li p) {
-          @apply my-0;
-        }
-
-        /* 最初の要素はマージンを0にする */
-        & > *:first-child {
-          @apply mt-0;
-        }
-
-        /* 最後の要素はマージンを0にする */
-        & > *:last-child {
-          @apply mb-0;
-        }
-      }
-    </style>
   </head>
   <body class="bg-cax-canvas text-cax-text">
     <div id="app"></div>
diff --git a/application/client/src/index.tsx b/application/client/src/index.tsx
index b1833b0af3..bbc0624226 100644
--- a/application/client/src/index.tsx
+++ b/application/client/src/index.tsx
@@ -5,12 +5,21 @@ import { BrowserRouter } from "react-router";
 import { AppContainer } from "@web-speed-hackathon-2026/client/src/containers/AppContainer";
 import { store } from "@web-speed-hackathon-2026/client/src/store";
 
-window.addEventListener("load", () => {
-  createRoot(document.getElementById("app")!).render(
+const appNode = document.getElementById("app");
+
+if (appNode != null) {
+  createRoot(appNode).render(
     <Provider store={store}>
       <BrowserRouter>
         <AppContainer />
       </BrowserRouter>
     </Provider>,
   );
-});
+
+  if (document.body.dataset["hasPrerender"] === "1") {
+    window.requestAnimationFrame(() => {
+      document.body.dataset["appMounted"] = "1";
+      document.getElementById("prerender-shell")?.remove();
+    });
+  }
+}
diff --git a/application/client/src/search/services.ts b/application/client/src/search/services.ts
index 77f9de5de9..5d704ebbd7 100644
--- a/application/client/src/search/services.ts
+++ b/application/client/src/search/services.ts
@@ -1,39 +1,77 @@
-export const sanitizeSearchText = (input: string): string => {
-  let text = input;
+const DATE_PREFIXES = ["since", "until"] as const;
+
+function normalizeDateToken(token: string): string {
+  const trimmed = token.trim();
+
+  for (const prefix of ["from", ...DATE_PREFIXES]) {
+    const normalizedPrefix = prefix === "from" ? "since" : prefix;
+    const lower = trimmed.toLowerCase();
+
+    if (!lower.startsWith(prefix)) {
+      continue;
+    }
+
+    const remainder = trimmed.slice(prefix.length).replace(/^:/, "");
+    const match = /\d{4}-\d{2}-\d{2}/.exec(remainder);
+    if (match != null) {
+      return `${normalizedPrefix}:${match[0]}`;
+    }
+  }
 
-  text = text.replace(
-    /\b(from|until)\s*:?\s*(\d{4}-\d{2}-\d{2})\d*/gi,
-    (_m, key, date) => `${key}:${date}`,
-  );
+  return trimmed;
+}
 
-  return text;
+function extractDateToken(token: string, prefix: (typeof DATE_PREFIXES)[number]): string | null {
+  const normalizedPrefix = `${prefix}:`;
+  if (!token.toLowerCase().startsWith(normalizedPrefix)) {
+    return null;
+  }
+
+  const candidate = token.slice(normalizedPrefix.length);
+  const match = /\d{4}-\d{2}-\d{2}/.exec(candidate);
+  return match?.[0] ?? null;
+}
+
+export const sanitizeSearchText = (input: string): string => {
+  return input
+    .trim()
+    .split(/\s+/)
+    .filter(Boolean)
+    .map(normalizeDateToken)
+    .join(" ");
 };
 
 export const parseSearchQuery = (query: string) => {
-  const sincePattern = /since:((\d|\d\d|\d\d\d\d-\d\d-\d\d)+)+$/;
-  const untilPattern = /until:((\d|\d\d|\d\d\d\d-\d\d-\d\d)+)+$/;
+  const tokens = query.trim().split(/\s+/).filter(Boolean).map(normalizeDateToken);
 
-  const sincePart = query.match(/since:[^\s]*/)?.[0] || "";
-  const untilPart = query.match(/until:[^\s]*/)?.[0] || "";
+  const keywordTokens: string[] = [];
+  let sinceDate: string | null = null;
+  let sinceToken: string | null = null;
+  let untilDate: string | null = null;
+  let untilToken: string | null = null;
 
-  const sinceMatch = sincePattern.exec(sincePart);
-  const untilMatch = untilPattern.exec(untilPart);
+  for (const token of tokens) {
+    if (token.toLowerCase().startsWith("since:")) {
+      sinceToken = token;
+      sinceDate = extractDateToken(token, "since");
+      continue;
+    }
 
-  const keywords = query
-    .replace(/since:.*(\d{4}-\d{2}-\d{2}).*/g, "")
-    .replace(/until:.*(\d{4}-\d{2}-\d{2}).*/g, "")
-    .trim();
+    if (token.toLowerCase().startsWith("until:")) {
+      untilToken = token;
+      untilDate = extractDateToken(token, "until");
+      continue;
+    }
 
-  const extractDate = (s: string | null) => {
-    if (!s) return null;
-    const m = /(\d{4}-\d{2}-\d{2})/.exec(s);
-    return m ? m[1] : null;
-  };
+    keywordTokens.push(token);
+  }
 
   return {
-    keywords,
-    sinceDate: extractDate(sinceMatch ? sinceMatch[1]! : null),
-    untilDate: extractDate(untilMatch ? untilMatch[1]! : null),
+    keywords: keywordTokens.join(" "),
+    sinceDate,
+    sinceToken,
+    untilDate,
+    untilToken,
   };
 };
 
diff --git a/application/client/src/search/validation.ts b/application/client/src/search/validation.ts
index 1da46e6d8d..6daca7da53 100644
--- a/application/client/src/search/validation.ts
+++ b/application/client/src/search/validation.ts
@@ -15,20 +15,20 @@ export const validate = (values: SearchFormData): FormErrors<SearchFormData> =>
     return errors;
   }
 
-  const { keywords, sinceDate, untilDate } = parseSearchQuery(raw);
+  const { keywords, sinceDate, sinceToken, untilDate, untilToken } = parseSearchQuery(raw);
 
   if (!keywords && !sinceDate && !untilDate) {
     errors.searchText = "検索キーワードまたは日付範囲を指定してください";
     return errors;
   }
 
-  if (sinceDate && !isValidDate(sinceDate)) {
-    errors.searchText = `since: の日付形式が不正です: ${sinceDate}`;
+  if (sinceToken && (!sinceDate || !isValidDate(sinceDate))) {
+    errors.searchText = `since: の日付形式が不正です: ${sinceToken.replace(/^since:/i, "")}`;
     return errors;
   }
 
-  if (untilDate && !isValidDate(untilDate)) {
-    errors.searchText = `until: の日付形式が不正です: ${untilDate}`;
+  if (untilToken && (!untilDate || !isValidDate(untilDate))) {
+    errors.searchText = `until: の日付形式が不正です: ${untilToken.replace(/^until:/i, "")}`;
     return errors;
   }
 
diff --git a/application/client/src/utils/bootstrap_data.ts b/application/client/src/utils/bootstrap_data.ts
new file mode 100644
index 0000000000..4b9cd086c5
--- /dev/null
+++ b/application/client/src/utils/bootstrap_data.ts
@@ -0,0 +1,19 @@
+export function consumeBootstrapData<T>(key: string): T | null {
+  const data = window.__BOOTSTRAP_DATA__;
+  if (data == null || !(key in data)) {
+    return null;
+  }
+
+  const value = data[key] as T;
+  delete data[key];
+  return value;
+}
+
+export function peekBootstrapData<T>(key: string): T | null {
+  const data = window.__BOOTSTRAP_DATA__;
+  if (data == null || !(key in data)) {
+    return null;
+  }
+
+  return data[key] as T;
+}
diff --git a/application/client/src/utils/convert_image.ts b/application/client/src/utils/convert_image.ts
index 9fce086d9c..8535fe035c 100644
--- a/application/client/src/utils/convert_image.ts
+++ b/application/client/src/utils/convert_image.ts
@@ -6,7 +6,12 @@ interface Options {
   extension: MagickFormat;
 }
 
-export async function convertImage(file: File, options: Options): Promise<Blob> {
+interface ConvertedImage {
+  alt: string;
+  blob: Blob;
+}
+
+export async function convertImage(file: File, options: Options): Promise<ConvertedImage> {
   await initializeImageMagick(magickWasm);
 
   const byteArray = new Uint8Array(await file.arrayBuffer());
@@ -19,7 +24,10 @@ export async function convertImage(file: File, options: Options): Promise<Blob>
 
       img.write((output) => {
         if (comment == null) {
-          resolve(new Blob([output as Uint8Array<ArrayBuffer>]));
+          resolve({
+            alt: "",
+            blob: new Blob([output as Uint8Array<ArrayBuffer>]),
+          });
           return;
         }
 
@@ -35,7 +43,10 @@ export async function convertImage(file: File, options: Options): Promise<Blob>
         const exifStr = dump({ "0th": { [ImageIFD.ImageDescription]: descriptionBinary } });
         const outputWithExif = insert(exifStr, binary);
         const bytes = Uint8Array.from(outputWithExif.split("").map((c) => c.charCodeAt(0)));
-        resolve(new Blob([bytes]));
+        resolve({
+          alt: comment,
+          blob: new Blob([bytes]),
+        });
       });
     });
   });
diff --git a/application/client/src/utils/date_format.ts b/application/client/src/utils/date_format.ts
new file mode 100644
index 0000000000..167d0cdf15
--- /dev/null
+++ b/application/client/src/utils/date_format.ts
@@ -0,0 +1,49 @@
+const longDateFormatter = new Intl.DateTimeFormat("ja-JP", {
+  dateStyle: "long",
+});
+
+const timeFormatter = new Intl.DateTimeFormat("ja-JP", {
+  hour: "2-digit",
+  minute: "2-digit",
+});
+
+const relativeTimeFormatter = new Intl.RelativeTimeFormat("ja-JP", {
+  numeric: "auto",
+});
+
+function toDate(value: Date | string): Date {
+  return value instanceof Date ? value : new Date(value);
+}
+
+export function toISOString(value: Date | string): string {
+  return toDate(value).toISOString();
+}
+
+export function formatLongDateJa(value: Date | string): string {
+  return longDateFormatter.format(toDate(value));
+}
+
+export function formatTimeJa(value: Date | string): string {
+  return timeFormatter.format(toDate(value));
+}
+
+export function formatRelativeFromNowJa(value: Date | string): string {
+  const target = toDate(value).getTime();
+  const diffMs = target - Date.now();
+
+  const units: Array<[Intl.RelativeTimeFormatUnit, number]> = [
+    ["year", 1000 * 60 * 60 * 24 * 365],
+    ["month", 1000 * 60 * 60 * 24 * 30],
+    ["day", 1000 * 60 * 60 * 24],
+    ["hour", 1000 * 60 * 60],
+    ["minute", 1000 * 60],
+  ];
+
+  for (const [unit, size] of units) {
+    if (Math.abs(diffMs) >= size) {
+      return relativeTimeFormatter.format(Math.round(diffMs / size), unit);
+    }
+  }
+
+  return relativeTimeFormatter.format(Math.round(diffMs / 1000), "second");
+}
diff --git a/application/client/src/utils/fetchers.ts b/application/client/src/utils/fetchers.ts
index 92a14f408f..ff90c0bb06 100644
--- a/application/client/src/utils/fetchers.ts
+++ b/application/client/src/utils/fetchers.ts
@@ -1,40 +1,100 @@
-import $ from "jquery";
 import { gzip } from "pako";
 
+type ResponseJSON = Record<string, unknown> | null;
+
+export class HTTPError extends Error {
+  responseJSON: ResponseJSON;
+  status: number;
+
+  constructor({
+    message,
+    responseJSON,
+    status,
+  }: {
+    message: string;
+    responseJSON: ResponseJSON;
+    status: number;
+  }) {
+    super(message);
+    this.name = "HTTPError";
+    this.responseJSON = responseJSON;
+    this.status = status;
+  }
+}
+
+async function parseJSONResponse<T>(response: Response): Promise<T> {
+  const text = await response.text();
+  if (text === "") {
+    return null as T;
+  }
+  return JSON.parse(text) as T;
+}
+
+async function parseErrorResponse(response: Response): Promise<never> {
+  let responseJSON: ResponseJSON = null;
+
+  try {
+    responseJSON = await parseJSONResponse<ResponseJSON>(response);
+  } catch {
+    responseJSON = null;
+  }
+
+  throw new HTTPError({
+    message:
+      typeof responseJSON?.["message"] === "string"
+        ? responseJSON["message"]
+        : response.statusText,
+    responseJSON,
+    status: response.status,
+  });
+}
+
 export async function fetchBinary(url: string): Promise<ArrayBuffer> {
-  const result = await $.ajax({
-    async: false,
-    dataType: "binary",
+  const response = await fetch(url, {
+    credentials: "same-origin",
     method: "GET",
-    responseType: "arraybuffer",
-    url,
   });
-  return result;
+
+  if (!response.ok) {
+    return parseErrorResponse(response);
+  }
+
+  return response.arrayBuffer();
 }
 
 export async function fetchJSON<T>(url: string): Promise<T> {
-  const result = await $.ajax({
-    async: false,
-    dataType: "json",
+  const response = await fetch(url, {
+    credentials: "same-origin",
     method: "GET",
-    url,
   });
-  return result;
+
+  if (!response.ok) {
+    return parseErrorResponse(response);
+  }
+
+  return parseJSONResponse<T>(response);
 }
 
-export async function sendFile<T>(url: string, file: File): Promise<T> {
-  const result = await $.ajax({
-    async: false,
-    data: file,
-    dataType: "json",
+export async function sendFile<T>(
+  url: string,
+  file: File,
+  headers?: Record<string, string>,
+): Promise<T> {
+  const response = await fetch(url, {
+    body: file,
+    credentials: "same-origin",
     headers: {
       "Content-Type": "application/octet-stream",
+      ...headers,
     },
     method: "POST",
-    processData: false,
-    url,
   });
-  return result;
+
+  if (!response.ok) {
+    return parseErrorResponse(response);
+  }
+
+  return parseJSONResponse<T>(response);
 }
 
 export async function sendJSON<T>(url: string, data: object): Promise<T> {
@@ -42,17 +102,19 @@ export async function sendJSON<T>(url: string, data: object): Promise<T> {
   const uint8Array = new TextEncoder().encode(jsonString);
   const compressed = gzip(uint8Array);
 
-  const result = await $.ajax({
-    async: false,
-    data: compressed,
-    dataType: "json",
+  const response = await fetch(url, {
+    body: compressed,
+    credentials: "same-origin",
     headers: {
       "Content-Encoding": "gzip",
       "Content-Type": "application/json",
     },
     method: "POST",
-    processData: false,
-    url,
   });
-  return result;
+
+  if (!response.ok) {
+    return parseErrorResponse(response);
+  }
+
+  return parseJSONResponse<T>(response);
 }
diff --git a/application/client/webpack.config.js b/application/client/webpack.config.js
index 9fae72647f..945c1c32f3 100644
--- a/application/client/webpack.config.js
+++ b/application/client/webpack.config.js
@@ -10,6 +10,7 @@ const SRC_PATH = path.resolve(__dirname, "./src");
 const PUBLIC_PATH = path.resolve(__dirname, "../public");
 const UPLOAD_PATH = path.resolve(__dirname, "../upload");
 const DIST_PATH = path.resolve(__dirname, "../dist");
+const isProduction = process.env.NODE_ENV === "production";
 
 /** @type {import('webpack').Configuration} */
 const config = {
@@ -25,18 +26,15 @@ const config = {
     ],
     static: [PUBLIC_PATH, UPLOAD_PATH],
   },
-  devtool: "inline-source-map",
+  devtool: isProduction ? false : "inline-source-map",
   entry: {
     main: [
-      "core-js",
-      "regenerator-runtime/runtime",
-      "jquery-binarytransport",
       path.resolve(SRC_PATH, "./index.css"),
       path.resolve(SRC_PATH, "./buildinfo.ts"),
       path.resolve(SRC_PATH, "./index.tsx"),
     ],
   },
-  mode: "none",
+  mode: isProduction ? "production" : "development",
   module: {
     rules: [
       {
@@ -60,7 +58,6 @@ const config = {
   },
   output: {
     chunkFilename: "scripts/chunk-[contenthash].js",
-    chunkFormat: false,
     filename: "scripts/[name].js",
     path: DIST_PATH,
     publicPath: "auto",
@@ -68,10 +65,8 @@ const config = {
   },
   plugins: [
     new webpack.ProvidePlugin({
-      $: "jquery",
       AudioContext: ["standardized-audio-context", "AudioContext"],
       Buffer: ["buffer", "Buffer"],
-      "window.jQuery": "jquery",
     }),
     new webpack.EnvironmentPlugin({
       BUILD_DATE: new Date().toISOString(),
@@ -127,15 +122,17 @@ const config = {
       url: false,
     },
   },
-  optimization: {
-    minimize: false,
-    splitChunks: false,
-    concatenateModules: false,
-    usedExports: false,
-    providedExports: false,
-    sideEffects: false,
-  },
-  cache: false,
+  optimization: isProduction
+    ? undefined
+    : {
+        minimize: false,
+        splitChunks: false,
+        concatenateModules: false,
+        usedExports: false,
+        providedExports: false,
+        sideEffects: false,
+      },
+  cache: isProduction ? { type: "filesystem" } : false,
   ignoreWarnings: [
     {
       module: /@ffmpeg/,
diff --git a/application/pnpm-lock.yaml b/application/pnpm-lock.yaml
index 510570f5c9..4d9d56849e 100644
--- a/application/pnpm-lock.yaml
+++ b/application/pnpm-lock.yaml
@@ -62,7 +62,7 @@ importers:
         version: 9.5.0
       gifler:
         specifier: github:themadcreator/gifler#v0.3.0
-        version: https://codeload.github.com/themadcreator/gifler/tar.gz/c3259b071c7782f85d4928a5f03d0b378ed003b5
+        version: https://codeload.github.com/themadcreator/gifler/tar.gz/89484cb3db174c584a3138e89664f0167a7760c1
       image-size:
         specifier: 2.0.2
         version: 2.0.2
@@ -160,6 +160,9 @@ importers:
       '@babel/preset-typescript':
         specifier: 7.27.1
         version: 7.27.1(@babel/core@7.28.4)
+      '@tailwindcss/postcss':
+        specifier: 4.2.2
+        version: 4.2.2
       '@tsconfig/strictest':
         specifier: 2.0.8
         version: 2.0.8
@@ -238,6 +241,9 @@ importers:
       react-markdown:
         specifier: 10.1.0
         version: 10.1.0(@types/react@19.2.2)(react@19.2.0)
+      tailwindcss:
+        specifier: 4.2.2
+        version: 4.2.2
       typescript:
         specifier: 5.9.3
         version: 5.9.3
@@ -268,6 +274,9 @@ importers:
       '@tsconfig/strictest':
         specifier: 2.0.8
         version: 2.0.8
+      '@types/compression':
+        specifier: 1.8.1
+        version: 1.8.1
       '@web-speed-hackathon-2026/server':
         specifier: workspace:*
         version: 'link:'
@@ -277,6 +286,9 @@ importers:
       body-parser:
         specifier: 2.2.0
         version: 2.2.0
+      compression:
+        specifier: 1.8.1
+        version: 1.8.1
       connect-history-api-fallback:
         specifier: 2.0.0
         version: 2.0.0
@@ -350,6 +362,10 @@ importers:
 
 packages:
 
+  '@alloc/quick-lru@5.2.0':
+    resolution: {integrity: sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==}
+    engines: {node: '>=10'}
+
   '@babel/code-frame@7.27.1':
     resolution: {integrity: sha512-cjQ7ZlQ0Mv3b47hABuTevyTuYN4i+loJKGeV9flcCgIK37cCXRh+L1bd3iBHlynerhQ7BhCkn2BPbQUL+rGqFg==}
     engines: {node: '>=6.9.0'}
@@ -1608,6 +1624,98 @@ packages:
     engines: {node: '>=18'}
     hasBin: true
 
+  '@tailwindcss/node@4.2.2':
+    resolution: {integrity: sha512-pXS+wJ2gZpVXqFaUEjojq7jzMpTGf8rU6ipJz5ovJV6PUGmlJ+jvIwGrzdHdQ80Sg+wmQxUFuoW1UAAwHNEdFA==}
+
+  '@tailwindcss/oxide-android-arm64@4.2.2':
+    resolution: {integrity: sha512-dXGR1n+P3B6748jZO/SvHZq7qBOqqzQ+yFrXpoOWWALWndF9MoSKAT3Q0fYgAzYzGhxNYOoysRvYlpixRBBoDg==}
+    engines: {node: '>= 20'}
+    cpu: [arm64]
+    os: [android]
+
+  '@tailwindcss/oxide-darwin-arm64@4.2.2':
+    resolution: {integrity: sha512-iq9Qjr6knfMpZHj55/37ouZeykwbDqF21gPFtfnhCCKGDcPI/21FKC9XdMO/XyBM7qKORx6UIhGgg6jLl7BZlg==}
+    engines: {node: '>= 20'}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@tailwindcss/oxide-darwin-x64@4.2.2':
+    resolution: {integrity: sha512-BlR+2c3nzc8f2G639LpL89YY4bdcIdUmiOOkv2GQv4/4M0vJlpXEa0JXNHhCHU7VWOKWT/CjqHdTP8aUuDJkuw==}
+    engines: {node: '>= 20'}
+    cpu: [x64]
+    os: [darwin]
+
+  '@tailwindcss/oxide-freebsd-x64@4.2.2':
+    resolution: {integrity: sha512-YUqUgrGMSu2CDO82hzlQ5qSb5xmx3RUrke/QgnoEx7KvmRJHQuZHZmZTLSuuHwFf0DJPybFMXMYf+WJdxHy/nQ==}
+    engines: {node: '>= 20'}
+    cpu: [x64]
+    os: [freebsd]
+
+  '@tailwindcss/oxide-linux-arm-gnueabihf@4.2.2':
+    resolution: {integrity: sha512-FPdhvsW6g06T9BWT0qTwiVZYE2WIFo2dY5aCSpjG/S/u1tby+wXoslXS0kl3/KXnULlLr1E3NPRRw0g7t2kgaQ==}
+    engines: {node: '>= 20'}
+    cpu: [arm]
+    os: [linux]
+
+  '@tailwindcss/oxide-linux-arm64-gnu@4.2.2':
+    resolution: {integrity: sha512-4og1V+ftEPXGttOO7eCmW7VICmzzJWgMx+QXAJRAhjrSjumCwWqMfkDrNu1LXEQzNAwz28NCUpucgQPrR4S2yw==}
+    engines: {node: '>= 20'}
+    cpu: [arm64]
+    os: [linux]
+    libc: [glibc]
+
+  '@tailwindcss/oxide-linux-arm64-musl@4.2.2':
+    resolution: {integrity: sha512-oCfG/mS+/+XRlwNjnsNLVwnMWYH7tn/kYPsNPh+JSOMlnt93mYNCKHYzylRhI51X+TbR+ufNhhKKzm6QkqX8ag==}
+    engines: {node: '>= 20'}
+    cpu: [arm64]
+    os: [linux]
+    libc: [musl]
+
+  '@tailwindcss/oxide-linux-x64-gnu@4.2.2':
+    resolution: {integrity: sha512-rTAGAkDgqbXHNp/xW0iugLVmX62wOp2PoE39BTCGKjv3Iocf6AFbRP/wZT/kuCxC9QBh9Pu8XPkv/zCZB2mcMg==}
+    engines: {node: '>= 20'}
+    cpu: [x64]
+    os: [linux]
+    libc: [glibc]
+
+  '@tailwindcss/oxide-linux-x64-musl@4.2.2':
+    resolution: {integrity: sha512-XW3t3qwbIwiSyRCggeO2zxe3KWaEbM0/kW9e8+0XpBgyKU4ATYzcVSMKteZJ1iukJ3HgHBjbg9P5YPRCVUxlnQ==}
+    engines: {node: '>= 20'}
+    cpu: [x64]
+    os: [linux]
+    libc: [musl]
+
+  '@tailwindcss/oxide-wasm32-wasi@4.2.2':
+    resolution: {integrity: sha512-eKSztKsmEsn1O5lJ4ZAfyn41NfG7vzCg496YiGtMDV86jz1q/irhms5O0VrY6ZwTUkFy/EKG3RfWgxSI3VbZ8Q==}
+    engines: {node: '>=14.0.0'}
+    cpu: [wasm32]
+    bundledDependencies:
+      - '@napi-rs/wasm-runtime'
+      - '@emnapi/core'
+      - '@emnapi/runtime'
+      - '@tybys/wasm-util'
+      - '@emnapi/wasi-threads'
+      - tslib
+
+  '@tailwindcss/oxide-win32-arm64-msvc@4.2.2':
+    resolution: {integrity: sha512-qPmaQM4iKu5mxpsrWZMOZRgZv1tOZpUm+zdhhQP0VhJfyGGO3aUKdbh3gDZc/dPLQwW4eSqWGrrcWNBZWUWaXQ==}
+    engines: {node: '>= 20'}
+    cpu: [arm64]
+    os: [win32]
+
+  '@tailwindcss/oxide-win32-x64-msvc@4.2.2':
+    resolution: {integrity: sha512-1T/37VvI7WyH66b+vqHj/cLwnCxt7Qt3WFu5Q8hk65aOvlwAhs7rAp1VkulBJw/N4tMirXjVnylTR72uI0HGcA==}
+    engines: {node: '>= 20'}
+    cpu: [x64]
+    os: [win32]
+
+  '@tailwindcss/oxide@4.2.2':
+    resolution: {integrity: sha512-qEUA07+E5kehxYp9BVMpq9E8vnJuBHfJEC0vPC5e7iL/hw7HR61aDKoVoKzrG+QKp56vhNZe4qwkRmMC0zDLvg==}
+    engines: {node: '>= 20'}
+
+  '@tailwindcss/postcss@4.2.2':
+    resolution: {integrity: sha512-n4goKQbW8RVXIbNKRB/45LzyUqN451deQK0nzIeauVEqjlI49slUlgKYJM2QyUzap/PcpnS7kzSUmPb1sCRvYQ==}
+
   '@tokenizer/inflate@0.4.1':
     resolution: {integrity: sha512-2mAv+8pkG6GIZiF1kNg1jAjh27IDxEPKwdGul3snfztFerfPGI1LjDezZp3i7BElXompqEtPmoPx6c2wgtWsOA==}
     engines: {node: '>=18'}
@@ -1637,6 +1745,9 @@ packages:
   '@types/common-tags@1.8.4':
     resolution: {integrity: sha512-S+1hLDJPjWNDhcGxsxEbepzaxWqURP/o+3cP4aa2w7yBXgdcmKGQtZzP8JbyfOd0m+33nh+8+kvxYE2UJtBDkg==}
 
+  '@types/compression@1.8.1':
+    resolution: {integrity: sha512-kCFuWS0ebDbmxs0AXYn6e2r2nrGAb5KwQhknjSPSPgJcGd8+HVSILlUyFhGqML2gk39HcG7D1ydW9/qpYkN00Q==}
+
   '@types/connect-history-api-fallback@1.5.4':
     resolution: {integrity: sha512-n6Cr2xS1h4uAulPRdlw6Jl6s1oG8KrVilPN2yUITEs+K48EzMJJ3W1xy8K5eWuFvjp3R74AOIGSmp2UfBJ8HFw==}
 
@@ -2426,6 +2537,10 @@ packages:
     resolution: {integrity: sha512-d4lC8xfavMeBjzGr2vECC3fsGXziXZQyJxD868h2M/mBI3PwAuODxAkLkq5HYuvrPYcUtiLzsTo8U3PgX3Ocww==}
     engines: {node: '>=10.13.0'}
 
+  enhanced-resolve@5.20.1:
+    resolution: {integrity: sha512-Qohcme7V1inbAfvjItgw0EaxVX5q2rdVEZHRBrEQdRZTssLDGsL8Lwrznl8oQ/6kuTJONLaDcGjkNP247XEhcA==}
+    engines: {node: '>=10.13.0'}
+
   entities@2.2.0:
     resolution: {integrity: sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==}
 
@@ -2667,8 +2782,8 @@ packages:
   get-tsconfig@4.13.0:
     resolution: {integrity: sha512-1VKTZJCwBrvbd+Wn3AOgQP/2Av+TfTCOlE4AcRJE72W1ksZXbAx8PPBR9RzgTeSPzlPMHrbANMH3LbltH73wxQ==}
 
-  gifler@https://codeload.github.com/themadcreator/gifler/tar.gz/c3259b071c7782f85d4928a5f03d0b378ed003b5:
-    resolution: {tarball: https://codeload.github.com/themadcreator/gifler/tar.gz/c3259b071c7782f85d4928a5f03d0b378ed003b5}
+  gifler@https://codeload.github.com/themadcreator/gifler/tar.gz/89484cb3db174c584a3138e89664f0167a7760c1:
+    resolution: {tarball: https://codeload.github.com/themadcreator/gifler/tar.gz/89484cb3db174c584a3138e89664f0167a7760c1}
     version: 0.3.0
 
   github-from-package@0.0.0:
@@ -3075,6 +3190,80 @@ packages:
   launch-editor@2.11.1:
     resolution: {integrity: sha512-SEET7oNfgSaB6Ym0jufAdCeo3meJVeCaaDyzRygy0xsp2BFKCprcfHljTq4QkzTLUxEKkFK6OK4811YM2oSrRg==}
 
+  lightningcss-android-arm64@1.32.0:
+    resolution: {integrity: sha512-YK7/ClTt4kAK0vo6w3X+Pnm0D2cf2vPHbhOXdoNti1Ga0al1P4TBZhwjATvjNwLEBCnKvjJc2jQgHXH0NEwlAg==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [android]
+
+  lightningcss-darwin-arm64@1.32.0:
+    resolution: {integrity: sha512-RzeG9Ju5bag2Bv1/lwlVJvBE3q6TtXskdZLLCyfg5pt+HLz9BqlICO7LZM7VHNTTn/5PRhHFBSjk5lc4cmscPQ==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [darwin]
+
+  lightningcss-darwin-x64@1.32.0:
+    resolution: {integrity: sha512-U+QsBp2m/s2wqpUYT/6wnlagdZbtZdndSmut/NJqlCcMLTWp5muCrID+K5UJ6jqD2BFshejCYXniPDbNh73V8w==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [darwin]
+
+  lightningcss-freebsd-x64@1.32.0:
+    resolution: {integrity: sha512-JCTigedEksZk3tHTTthnMdVfGf61Fky8Ji2E4YjUTEQX14xiy/lTzXnu1vwiZe3bYe0q+SpsSH/CTeDXK6WHig==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [freebsd]
+
+  lightningcss-linux-arm-gnueabihf@1.32.0:
+    resolution: {integrity: sha512-x6rnnpRa2GL0zQOkt6rts3YDPzduLpWvwAF6EMhXFVZXD4tPrBkEFqzGowzCsIWsPjqSK+tyNEODUBXeeVHSkw==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm]
+    os: [linux]
+
+  lightningcss-linux-arm64-gnu@1.32.0:
+    resolution: {integrity: sha512-0nnMyoyOLRJXfbMOilaSRcLH3Jw5z9HDNGfT/gwCPgaDjnx0i8w7vBzFLFR1f6CMLKF8gVbebmkUN3fa/kQJpQ==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [linux]
+    libc: [glibc]
+
+  lightningcss-linux-arm64-musl@1.32.0:
+    resolution: {integrity: sha512-UpQkoenr4UJEzgVIYpI80lDFvRmPVg6oqboNHfoH4CQIfNA+HOrZ7Mo7KZP02dC6LjghPQJeBsvXhJod/wnIBg==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [linux]
+    libc: [musl]
+
+  lightningcss-linux-x64-gnu@1.32.0:
+    resolution: {integrity: sha512-V7Qr52IhZmdKPVr+Vtw8o+WLsQJYCTd8loIfpDaMRWGUZfBOYEJeyJIkqGIDMZPwPx24pUMfwSxxI8phr/MbOA==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [linux]
+    libc: [glibc]
+
+  lightningcss-linux-x64-musl@1.32.0:
+    resolution: {integrity: sha512-bYcLp+Vb0awsiXg/80uCRezCYHNg1/l3mt0gzHnWV9XP1W5sKa5/TCdGWaR/zBM2PeF/HbsQv/j2URNOiVuxWg==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [linux]
+    libc: [musl]
+
+  lightningcss-win32-arm64-msvc@1.32.0:
+    resolution: {integrity: sha512-8SbC8BR40pS6baCM8sbtYDSwEVQd4JlFTOlaD3gWGHfThTcABnNDBda6eTZeqbofalIJhFx0qKzgHJmcPTnGdw==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [win32]
+
+  lightningcss-win32-x64-msvc@1.32.0:
+    resolution: {integrity: sha512-Amq9B/SoZYdDi1kFrojnoqPLxYhQ4Wo5XiL8EVJrVsB8ARoC1PWW6VGtT0WKCemjy8aC+louJnjS7U18x3b06Q==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [win32]
+
+  lightningcss@1.32.0:
+    resolution: {integrity: sha512-NXYBzinNrblfraPGyrbPoD19C1h9lfI/1mzgWYvXUTe414Gz/X1FD2XBZSZM7rRTrMA8JL3OtAaGifrIKhQ5yQ==}
+    engines: {node: '>= 12.0.0'}
+
   lines-and-columns@1.2.4:
     resolution: {integrity: sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==}
 
@@ -3120,6 +3309,9 @@ packages:
     resolution: {integrity: sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==}
     engines: {node: '>=10'}
 
+  magic-string@0.30.21:
+    resolution: {integrity: sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==}
+
   make-fetch-happen@9.1.0:
     resolution: {integrity: sha512-+zopwDy7DNknmwPQplem5lAZX/eCOzSvSNNcSKm5eVwTkOBzoktEfXsa9L23J/GIRhxRsaxzkPEhrJEpE2F4Gg==}
     engines: {node: '>= 10'}
@@ -4343,6 +4535,9 @@ packages:
     resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==}
     engines: {node: '>= 0.4'}
 
+  tailwindcss@4.2.2:
+    resolution: {integrity: sha512-KWBIxs1Xb6NoLdMVqhbhgwZf2PGBpPEiwOqgI4pFIYbNTfBXiKYyWoTsXgBQ9WFg/OlhnvHaY+AEpW7wSmFo2Q==}
+
   tapable@2.3.0:
     resolution: {integrity: sha512-g9ljZiwki/LfxmQADO3dEY1CbpmXT5Hm2fJ+QaGKwSXUylMybePR7/67YW7jOrrvjEgL1Fmz5kzyAjWVWLlucg==}
     engines: {node: '>=6'}
@@ -4691,6 +4886,8 @@ packages:
 
 snapshots:
 
+  '@alloc/quick-lru@5.2.0': {}
+
   '@babel/code-frame@7.27.1':
     dependencies:
       '@babel/helper-validator-identifier': 7.27.1
@@ -5972,6 +6169,75 @@ snapshots:
     dependencies:
       playwright: 1.50.1
 
+  '@tailwindcss/node@4.2.2':
+    dependencies:
+      '@jridgewell/remapping': 2.3.5
+      enhanced-resolve: 5.20.1
+      jiti: 2.6.1
+      lightningcss: 1.32.0
+      magic-string: 0.30.21
+      source-map-js: 1.2.1
+      tailwindcss: 4.2.2
+
+  '@tailwindcss/oxide-android-arm64@4.2.2':
+    optional: true
+
+  '@tailwindcss/oxide-darwin-arm64@4.2.2':
+    optional: true
+
+  '@tailwindcss/oxide-darwin-x64@4.2.2':
+    optional: true
+
+  '@tailwindcss/oxide-freebsd-x64@4.2.2':
+    optional: true
+
+  '@tailwindcss/oxide-linux-arm-gnueabihf@4.2.2':
+    optional: true
+
+  '@tailwindcss/oxide-linux-arm64-gnu@4.2.2':
+    optional: true
+
+  '@tailwindcss/oxide-linux-arm64-musl@4.2.2':
+    optional: true
+
+  '@tailwindcss/oxide-linux-x64-gnu@4.2.2':
+    optional: true
+
+  '@tailwindcss/oxide-linux-x64-musl@4.2.2':
+    optional: true
+
+  '@tailwindcss/oxide-wasm32-wasi@4.2.2':
+    optional: true
+
+  '@tailwindcss/oxide-win32-arm64-msvc@4.2.2':
+    optional: true
+
+  '@tailwindcss/oxide-win32-x64-msvc@4.2.2':
+    optional: true
+
+  '@tailwindcss/oxide@4.2.2':
+    optionalDependencies:
+      '@tailwindcss/oxide-android-arm64': 4.2.2
+      '@tailwindcss/oxide-darwin-arm64': 4.2.2
+      '@tailwindcss/oxide-darwin-x64': 4.2.2
+      '@tailwindcss/oxide-freebsd-x64': 4.2.2
+      '@tailwindcss/oxide-linux-arm-gnueabihf': 4.2.2
+      '@tailwindcss/oxide-linux-arm64-gnu': 4.2.2
+      '@tailwindcss/oxide-linux-arm64-musl': 4.2.2
+      '@tailwindcss/oxide-linux-x64-gnu': 4.2.2
+      '@tailwindcss/oxide-linux-x64-musl': 4.2.2
+      '@tailwindcss/oxide-wasm32-wasi': 4.2.2
+      '@tailwindcss/oxide-win32-arm64-msvc': 4.2.2
+      '@tailwindcss/oxide-win32-x64-msvc': 4.2.2
+
+  '@tailwindcss/postcss@4.2.2':
+    dependencies:
+      '@alloc/quick-lru': 5.2.0
+      '@tailwindcss/node': 4.2.2
+      '@tailwindcss/oxide': 4.2.2
+      postcss: 8.5.6
+      tailwindcss: 4.2.2
+
   '@tokenizer/inflate@0.4.1':
     dependencies:
       debug: 4.4.3
@@ -6003,6 +6269,11 @@ snapshots:
 
   '@types/common-tags@1.8.4': {}
 
+  '@types/compression@1.8.1':
+    dependencies:
+      '@types/express': 5.0.3
+      '@types/node': 22.18.8
+
   '@types/connect-history-api-fallback@1.5.4':
     dependencies:
       '@types/express-serve-static-core': 5.1.0
@@ -6856,6 +7127,11 @@ snapshots:
       graceful-fs: 4.2.11
       tapable: 2.3.0
 
+  enhanced-resolve@5.20.1:
+    dependencies:
+      graceful-fs: 4.2.11
+      tapable: 2.3.0
+
   entities@2.2.0: {}
 
   entities@6.0.1: {}
@@ -7161,7 +7437,7 @@ snapshots:
     dependencies:
       resolve-pkg-maps: 1.0.0
 
-  gifler@https://codeload.github.com/themadcreator/gifler/tar.gz/c3259b071c7782f85d4928a5f03d0b378ed003b5:
+  gifler@https://codeload.github.com/themadcreator/gifler/tar.gz/89484cb3db174c584a3138e89664f0167a7760c1:
     dependencies:
       bluebird: 3.7.2
       omggif: 1.0.10
@@ -7593,6 +7869,55 @@ snapshots:
       picocolors: 1.1.1
       shell-quote: 1.8.3
 
+  lightningcss-android-arm64@1.32.0:
+    optional: true
+
+  lightningcss-darwin-arm64@1.32.0:
+    optional: true
+
+  lightningcss-darwin-x64@1.32.0:
+    optional: true
+
+  lightningcss-freebsd-x64@1.32.0:
+    optional: true
+
+  lightningcss-linux-arm-gnueabihf@1.32.0:
+    optional: true
+
+  lightningcss-linux-arm64-gnu@1.32.0:
+    optional: true
+
+  lightningcss-linux-arm64-musl@1.32.0:
+    optional: true
+
+  lightningcss-linux-x64-gnu@1.32.0:
+    optional: true
+
+  lightningcss-linux-x64-musl@1.32.0:
+    optional: true
+
+  lightningcss-win32-arm64-msvc@1.32.0:
+    optional: true
+
+  lightningcss-win32-x64-msvc@1.32.0:
+    optional: true
+
+  lightningcss@1.32.0:
+    dependencies:
+      detect-libc: 2.1.2
+    optionalDependencies:
+      lightningcss-android-arm64: 1.32.0
+      lightningcss-darwin-arm64: 1.32.0
+      lightningcss-darwin-x64: 1.32.0
+      lightningcss-freebsd-x64: 1.32.0
+      lightningcss-linux-arm-gnueabihf: 1.32.0
+      lightningcss-linux-arm64-gnu: 1.32.0
+      lightningcss-linux-arm64-musl: 1.32.0
+      lightningcss-linux-x64-gnu: 1.32.0
+      lightningcss-linux-x64-musl: 1.32.0
+      lightningcss-win32-arm64-msvc: 1.32.0
+      lightningcss-win32-x64-msvc: 1.32.0
+
   lines-and-columns@1.2.4: {}
 
   loader-runner@4.3.1: {}
@@ -7635,6 +7960,10 @@ snapshots:
       yallist: 4.0.0
     optional: true
 
+  magic-string@0.30.21:
+    dependencies:
+      '@jridgewell/sourcemap-codec': 1.5.5
+
   make-fetch-happen@9.1.0:
     dependencies:
       agentkeepalive: 4.6.0
@@ -9320,6 +9649,8 @@ snapshots:
 
   supports-preserve-symlinks-flag@1.0.0: {}
 
+  tailwindcss@4.2.2: {}
+
   tapable@2.3.0: {}
 
   tar-fs@2.1.4:
diff --git a/application/server/package.json b/application/server/package.json
index 9482575df7..a5467c16ab 100644
--- a/application/server/package.json
+++ b/application/server/package.json
@@ -14,9 +14,11 @@
   },
   "dependencies": {
     "@tsconfig/strictest": "2.0.8",
+    "@types/compression": "1.8.1",
     "@web-speed-hackathon-2026/server": "workspace:*",
     "bcrypt": "6.0.0",
     "body-parser": "2.2.0",
+    "compression": "1.8.1",
     "connect-history-api-fallback": "2.0.0",
     "express": "5.1.0",
     "express-session": "1.18.2",
diff --git a/application/server/src/app.ts b/application/server/src/app.ts
index 671fb424cc..bd430d4d48 100644
--- a/application/server/src/app.ts
+++ b/application/server/src/app.ts
@@ -1,4 +1,5 @@
 import bodyParser from "body-parser";
+import compression from "compression";
 import Express from "express";
 
 import { apiRouter } from "@web-speed-hackathon-2026/server/src/routes/api";
@@ -12,12 +13,19 @@ app.set("trust proxy", true);
 app.use(sessionMiddleware);
 app.use(bodyParser.json());
 app.use(bodyParser.raw({ limit: "10mb" }));
+app.use(
+  compression({
+    filter: (req, res) => {
+      if (req.path === "/api/v1/crok") {
+        return false;
+      }
+      return compression.filter(req, res);
+    },
+  }),
+);
 
-app.use((_req, res, next) => {
-  res.header({
-    "Cache-Control": "max-age=0, no-transform",
-    Connection: "close",
-  });
+app.use("/api/v1", (_req, res, next) => {
+  res.setHeader("Cache-Control", "no-store");
   return next();
 });
 
diff --git a/application/server/src/models/Comment.ts b/application/server/src/models/Comment.ts
index 41e9e4e094..f7d512e98a 100644
--- a/application/server/src/models/Comment.ts
+++ b/application/server/src/models/Comment.ts
@@ -47,8 +47,8 @@ export function initComment(sequelize: Sequelize) {
         include: [
           {
             association: "user",
-            attributes: { exclude: ["profileImageId"] },
-            include: [{ association: "profileImage" }],
+            attributes: ["id", "name", "username"],
+            include: [{ association: "profileImage", attributes: ["alt", "id"] }],
           },
         ],
         order: [["createdAt", "ASC"]],
diff --git a/application/server/src/models/DirectMessage.ts b/application/server/src/models/DirectMessage.ts
index e4565ba1c4..b16f226020 100644
--- a/application/server/src/models/DirectMessage.ts
+++ b/application/server/src/models/DirectMessage.ts
@@ -64,7 +64,8 @@ export function initDirectMessage(sequelize: Sequelize) {
         include: [
           {
             association: "sender",
-            include: [{ association: "profileImage" }],
+            attributes: ["id", "name", "username"],
+            include: [{ association: "profileImage", attributes: ["alt", "id"] }],
           },
         ],
         order: [["createdAt", "ASC"]],
@@ -73,7 +74,10 @@ export function initDirectMessage(sequelize: Sequelize) {
   );
 
   DirectMessage.addHook("afterSave", "onDmSaved", async (message) => {
-    const directMessage = await DirectMessage.findByPk(message.get().id);
+    const directMessage = await DirectMessage.unscoped().findByPk(message.get().id, {
+      attributes: ["body", "conversationId", "createdAt", "id", "isRead", "senderId"],
+      include: [{ association: "sender", attributes: ["id"] }],
+    });
     const conversation = await DirectMessageConversation.findByPk(directMessage?.conversationId);
 
     if (directMessage == null || conversation == null) {
diff --git a/application/server/src/models/DirectMessageConversation.ts b/application/server/src/models/DirectMessageConversation.ts
index 99ebb2425b..87415caea9 100644
--- a/application/server/src/models/DirectMessageConversation.ts
+++ b/application/server/src/models/DirectMessageConversation.ts
@@ -48,11 +48,26 @@ export function initDirectMessageConversation(sequelize: Sequelize) {
       sequelize,
       defaultScope: {
         include: [
-          { association: "initiator", include: [{ association: "profileImage" }] },
-          { association: "member", include: [{ association: "profileImage" }] },
+          {
+            association: "initiator",
+            attributes: ["id", "name", "username"],
+            include: [{ association: "profileImage", attributes: ["alt", "id"] }],
+          },
+          {
+            association: "member",
+            attributes: ["id", "name", "username"],
+            include: [{ association: "profileImage", attributes: ["alt", "id"] }],
+          },
           {
             association: "messages",
-            include: [{ association: "sender", include: [{ association: "profileImage" }] }],
+            attributes: ["body", "createdAt", "id", "isRead"],
+            include: [
+              {
+                association: "sender",
+                attributes: ["id", "name", "username"],
+                include: [{ association: "profileImage", attributes: ["alt", "id"] }],
+              },
+            ],
             order: [["createdAt", "ASC"]],
             required: false,
           },
diff --git a/application/server/src/models/Post.ts b/application/server/src/models/Post.ts
index 6f86442eb1..d7d401ed18 100644
--- a/application/server/src/models/Post.ts
+++ b/application/server/src/models/Post.ts
@@ -49,15 +49,16 @@ export function initPost(sequelize: Sequelize) {
         include: [
           {
             association: "user",
-            attributes: { exclude: ["profileImageId"] },
-            include: [{ association: "profileImage" }],
+            attributes: ["id", "name", "username"],
+            include: [{ association: "profileImage", attributes: ["alt", "id"] }],
           },
           {
             association: "images",
+            attributes: ["alt", "id"],
             through: { attributes: [] },
           },
-          { association: "movie" },
-          { association: "sound" },
+          { association: "movie", attributes: ["id"] },
+          { association: "sound", attributes: ["artist", "id", "title"] },
         ],
         order: [
           ["id", "DESC"],
diff --git a/application/server/src/models/User.ts b/application/server/src/models/User.ts
index 9085a287a3..97479760d0 100644
--- a/application/server/src/models/User.ts
+++ b/application/server/src/models/User.ts
@@ -79,7 +79,10 @@ export function initUser(sequelize: Sequelize) {
       sequelize,
       defaultScope: {
         attributes: { exclude: ["profileImageId"] },
-        include: { association: "profileImage" },
+        include: {
+          association: "profileImage",
+          attributes: ["alt", "id"],
+        },
       },
     },
   );
diff --git a/application/server/src/routes/api/direct_message.ts b/application/server/src/routes/api/direct_message.ts
index 2993a2d6be..e2db0307e8 100644
--- a/application/server/src/routes/api/direct_message.ts
+++ b/application/server/src/routes/api/direct_message.ts
@@ -1,6 +1,6 @@
 import { Router } from "express";
 import httpErrors from "http-errors";
-import { col, where, Op } from "sequelize";
+import { Op } from "sequelize";
 
 import { eventhub } from "@web-speed-hackathon-2026/server/src/eventhub";
 import {
@@ -11,25 +11,78 @@ import {
 
 export const directMessageRouter = Router();
 
+const conversationListInclude = [
+  {
+    association: "initiator",
+    attributes: ["id", "name", "username"],
+    include: [{ association: "profileImage", attributes: ["alt", "id"] }],
+  },
+  {
+    association: "member",
+    attributes: ["id", "name", "username"],
+    include: [{ association: "profileImage", attributes: ["alt", "id"] }],
+  },
+  {
+    association: "messages",
+    attributes: ["body", "createdAt", "id", "isRead"],
+    include: [{ association: "sender", attributes: ["id"] }],
+    required: true,
+  },
+];
+
+const conversationDetailInclude = [
+  {
+    association: "initiator",
+    attributes: ["id", "name", "username"],
+    include: [{ association: "profileImage", attributes: ["alt", "id"] }],
+  },
+  {
+    association: "member",
+    attributes: ["id", "name", "username"],
+    include: [{ association: "profileImage", attributes: ["alt", "id"] }],
+  },
+  {
+    association: "messages",
+    attributes: ["body", "createdAt", "id", "isRead"],
+    include: [{ association: "sender", attributes: ["id"] }],
+    required: false,
+  },
+];
+
 directMessageRouter.get("/dm", async (req, res) => {
   if (req.session.userId === undefined) {
     throw new httpErrors.Unauthorized();
   }
 
-  const conversations = await DirectMessageConversation.findAll({
+  const conversations = await DirectMessageConversation.unscoped().findAll({
+    attributes: ["id"],
+    include: conversationListInclude,
     where: {
-      [Op.and]: [
-        { [Op.or]: [{ initiatorId: req.session.userId }, { memberId: req.session.userId }] },
-        where(col("messages.id"), { [Op.not]: null }),
-      ],
+      [Op.or]: [{ initiatorId: req.session.userId }, { memberId: req.session.userId }],
     },
-    order: [[col("messages.createdAt"), "DESC"]],
   });
 
-  const sorted = conversations.map((c) => ({
-    ...c.toJSON(),
-    messages: c.messages?.reverse(),
-  }));
+  const sorted = conversations
+    .map((conversation) => {
+      const json = conversation.toJSON();
+      const messages = [...(json.messages ?? [])].sort((a, b) => {
+        return new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime();
+      });
+
+      return {
+        ...json,
+        messages,
+      };
+    })
+    .sort((a, b) => {
+      const aLast = a.messages.at(-1);
+      const bLast = b.messages.at(-1);
+      if (aLast == null || bLast == null) {
+        return 0;
+      }
+
+      return new Date(bLast.createdAt).getTime() - new Date(aLast.createdAt).getTime();
+    });
 
   return res.status(200).type("application/json").send(sorted);
 });
@@ -56,9 +109,8 @@ directMessageRouter.post("/dm", async (req, res) => {
       memberId: peer.id,
     },
   });
-  await conversation.reload();
 
-  return res.status(200).type("application/json").send(conversation);
+  return res.status(200).type("application/json").send({ id: conversation.id });
 });
 
 directMessageRouter.ws("/dm/unread", async (req, _res) => {
@@ -100,7 +152,9 @@ directMessageRouter.get("/dm/:conversationId", async (req, res) => {
     throw new httpErrors.Unauthorized();
   }
 
-  const conversation = await DirectMessageConversation.findOne({
+  const conversation = await DirectMessageConversation.unscoped().findOne({
+    attributes: ["id"],
+    include: conversationDetailInclude,
     where: {
       id: req.params.conversationId,
       [Op.or]: [{ initiatorId: req.session.userId }, { memberId: req.session.userId }],
@@ -175,7 +229,6 @@ directMessageRouter.post("/dm/:conversationId/messages", async (req, res) => {
     conversationId: conversation.id,
     senderId: req.session.userId,
   });
-  await message.reload();
 
   return res.status(201).type("application/json").send(message);
 });
diff --git a/application/server/src/routes/api/image.ts b/application/server/src/routes/api/image.ts
index d5c23e209d..97df1e5db2 100644
--- a/application/server/src/routes/api/image.ts
+++ b/application/server/src/routes/api/image.ts
@@ -27,10 +27,13 @@ imageRouter.post("/images", async (req, res) => {
   }
 
   const imageId = uuidv4();
+  const imageAltHeader = req.get("X-Image-Alt");
+  const alt =
+    imageAltHeader != null ? decodeURIComponent(imageAltHeader).slice(0, 1024) : "";
 
   const filePath = path.resolve(UPLOAD_PATH, `./images/${imageId}.${EXTENSION}`);
   await fs.mkdir(path.resolve(UPLOAD_PATH, "images"), { recursive: true });
   await fs.writeFile(filePath, req.body);
 
-  return res.status(200).type("application/json").send({ id: imageId });
+  return res.status(200).type("application/json").send({ alt, id: imageId });
 });
diff --git a/application/server/src/routes/api/search.ts b/application/server/src/routes/api/search.ts
index 48e99856b4..fee075ea58 100644
--- a/application/server/src/routes/api/search.ts
+++ b/application/server/src/routes/api/search.ts
@@ -70,6 +70,7 @@ searchRouter.get("/search", async (req, res) => {
       ],
       limit,
       offset,
+      subQuery: false,
       where: dateWhere,
     });
   }
diff --git a/application/server/src/routes/static.ts b/application/server/src/routes/static.ts
index b5820c986e..768f72b620 100644
--- a/application/server/src/routes/static.ts
+++ b/application/server/src/routes/static.ts
@@ -1,4 +1,3 @@
-import history from "connect-history-api-fallback";
 import { Router } from "express";
 import serveStatic from "serve-static";
 
@@ -10,26 +9,43 @@ import {
 
 export const staticRouter = Router();
 
-// SPA 対応のため、ファイルが存在しないときに index.html を返す
-staticRouter.use(history());
-
 staticRouter.use(
   serveStatic(UPLOAD_PATH, {
-    etag: false,
-    lastModified: false,
+    immutable: true,
+    maxAge: "1y",
   }),
 );
 
 staticRouter.use(
   serveStatic(PUBLIC_PATH, {
-    etag: false,
-    lastModified: false,
+    immutable: true,
+    maxAge: "1y",
   }),
 );
 
 staticRouter.use(
   serveStatic(CLIENT_DIST_PATH, {
-    etag: false,
-    lastModified: false,
+    index: false,
+    maxAge: "1h",
   }),
 );
+
+staticRouter.get("/{*splat}", async (req, res, next) => {
+  if (/\.[^/]+$/.test(req.path)) {
+    return next();
+  }
+
+  try {
+    const { renderAppHtml } = await import(
+      "@web-speed-hackathon-2026/server/src/utils/render_app_html"
+    );
+    const html = await renderAppHtml(req);
+    return res
+      .status(200)
+      .set("Cache-Control", "no-cache")
+      .type("text/html")
+      .send(html);
+  } catch (error) {
+    return next(error);
+  }
+});
diff --git a/application/server/src/utils/render_app_html.ts b/application/server/src/utils/render_app_html.ts
new file mode 100644
index 0000000000..eadc0f04d3
--- /dev/null
+++ b/application/server/src/utils/render_app_html.ts
@@ -0,0 +1,483 @@
+import { readFile } from "fs/promises";
+import path from "path";
+
+import type { Request } from "express";
+import { Op } from "sequelize";
+
+import {
+  DirectMessageConversation,
+  Post,
+  User,
+} from "@web-speed-hackathon-2026/server/src/models";
+import { CLIENT_DIST_PATH } from "@web-speed-hackathon-2026/server/src/paths";
+import { parseSearchQuery } from "@web-speed-hackathon-2026/server/src/utils/parse_search_query";
+
+const TIMELINE_LIMIT = 4;
+const SEARCH_LIMIT = 8;
+const USER_POSTS_LIMIT = 8;
+type HydratedPost = {
+  user?: { profileImage?: { id?: string | null } | null } | null;
+  images?: Array<{ id: string }> | null;
+  movie?: { id: string } | null;
+};
+type HydratedConversation = {
+  initiator: { id: string; profileImage?: { id?: string | null } | null };
+  member: { id: string; profileImage?: { id?: string | null } | null };
+  messages: Array<{ createdAt: string }>;
+};
+const DM_LIST_INCLUDE = [
+  {
+    association: "initiator",
+    attributes: ["id", "name", "username"],
+    include: [{ association: "profileImage", attributes: ["alt", "id"] }],
+  },
+  {
+    association: "member",
+    attributes: ["id", "name", "username"],
+    include: [{ association: "profileImage", attributes: ["alt", "id"] }],
+  },
+  {
+    association: "messages",
+    attributes: ["body", "createdAt", "id", "isRead"],
+    include: [{ association: "sender", attributes: ["id"] }],
+    required: true,
+  },
+];
+const DM_DETAIL_INCLUDE = [
+  {
+    association: "initiator",
+    attributes: ["id", "name", "username"],
+    include: [{ association: "profileImage", attributes: ["alt", "id"] }],
+  },
+  {
+    association: "member",
+    attributes: ["id", "name", "username"],
+    include: [{ association: "profileImage", attributes: ["alt", "id"] }],
+  },
+  {
+    association: "messages",
+    attributes: ["body", "createdAt", "id", "isRead"],
+    include: [{ association: "sender", attributes: ["id"] }],
+    required: false,
+  },
+];
+
+let indexHtmlPromise: Promise<string> | null = null;
+
+function getImagePath(imageId: string): string {
+  return `/images/${imageId}.jpg`;
+}
+
+function getProfileImagePath(profileImageId: string): string {
+  return `/images/profiles/${profileImageId}.jpg`;
+}
+
+function getMoviePath(movieId: string): string {
+  return `/movies/${movieId}.gif`;
+}
+
+function serializeForInlineScript(value: unknown): string {
+  return JSON.stringify(value).replace(/</g, "\\u003c");
+}
+
+function escapeHtml(text: string): string {
+  return text
+    .replaceAll("&", "&amp;")
+    .replaceAll("<", "&lt;")
+    .replaceAll(">", "&gt;")
+    .replaceAll('"', "&quot;")
+    .replaceAll("'", "&#39;");
+}
+
+function addPostPreloads(
+  preloads: Set<string>,
+  post: HydratedPost | null | undefined,
+) {
+  if (post == null) {
+    return;
+  }
+
+  if (post.user?.profileImage?.id) {
+    preloads.add(getProfileImagePath(post.user.profileImage.id));
+  }
+  if (post.images?.[0]?.id) {
+    preloads.add(getImagePath(post.images[0].id));
+    return;
+  }
+  if (post.movie?.id) {
+    preloads.add(getMoviePath(post.movie.id));
+  }
+}
+
+async function getIndexHtmlTemplate() {
+  indexHtmlPromise ??= readFile(path.join(CLIENT_DIST_PATH, "index.html"), "utf8");
+  return indexHtmlPromise;
+}
+
+async function getDmConversations(userId: string) {
+  const conversations = await DirectMessageConversation.unscoped().findAll({
+    attributes: ["id"],
+    include: DM_LIST_INCLUDE,
+    where: {
+      [Op.or]: [{ initiatorId: userId }, { memberId: userId }],
+    },
+  });
+
+  return conversations
+    .map((conversation) => {
+      const json = conversation.toJSON();
+      const messages = [...(json.messages ?? [])].sort((a, b) => {
+        return new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime();
+      });
+
+      return {
+        ...json,
+        messages,
+      };
+    })
+    .sort((a, b) => {
+      const aLast = a.messages.at(-1);
+      const bLast = b.messages.at(-1);
+      if (aLast == null || bLast == null) {
+        return 0;
+      }
+
+      return new Date(bLast.createdAt).getTime() - new Date(aLast.createdAt).getTime();
+    });
+}
+
+function renderAppShell(content: string): string {
+  return [
+    '<div class="relative z-0 flex justify-center font-sans">',
+    '<div class="bg-cax-surface text-cax-text flex min-h-screen max-w-full">',
+    '<aside class="relative z-10">',
+    '<nav class="border-cax-border bg-cax-surface fixed right-0 bottom-0 left-0 z-10 h-12 border-t lg:relative lg:h-full lg:w-48 lg:border-t-0 lg:border-r"></nav>',
+    "</aside>",
+    '<main class="relative z-0 w-screen max-w-screen-sm min-w-0 shrink pb-12 lg:pb-0">',
+    content,
+    "</main>",
+    "</div>",
+    "</div>",
+  ].join("");
+}
+
+function renderTimelineShell(posts: Array<any>): string {
+  return posts
+    .slice(0, 1)
+    .map((post, index) => {
+      const profileImage = post.user?.profileImage?.id
+        ? `<img alt="${escapeHtml(post.user.profileImage.alt ?? "")}" class="h-full w-full object-cover" decoding="${index === 0 ? "sync" : "async"}" fetchpriority="${index === 0 ? "high" : "auto"}" height="64" loading="${index === 0 ? "eager" : "lazy"}" src="${getProfileImagePath(post.user.profileImage.id)}" width="64" />`
+        : "";
+      const heroImage = post.images?.[0]?.id
+        ? `<div class="relative mt-2 w-full"><div class="border-cax-border grid h-full w-full grid-cols-2 grid-rows-2 gap-1 overflow-hidden rounded-lg border" style="aspect-ratio:16 / 9"><div class="${post.images.length === 1 ? "col-span-2 row-span-2" : "col-span-1 row-span-2"} bg-cax-surface-subtle"><img alt="${escapeHtml(post.images[0].alt ?? "")}" class="h-full w-full object-cover" decoding="${index === 0 ? "sync" : "async"}" fetchpriority="${index === 0 ? "high" : "auto"}" loading="${index === 0 ? "eager" : "lazy"}" src="${getImagePath(post.images[0].id)}" /></div></div></div>`
+        : "";
+      const heroMovie = !post.images?.[0]?.id && post.movie?.id
+        ? `<div class="relative mt-2 w-full"><div class="border-cax-border overflow-hidden rounded-lg border" style="aspect-ratio:1 / 1"><img alt="" class="h-full w-full object-cover" decoding="${index === 0 ? "sync" : "async"}" fetchpriority="${index === 0 ? "high" : "auto"}" loading="${index === 0 ? "eager" : "lazy"}" src="${getMoviePath(post.movie.id)}" /></div></div>`
+        : "";
+
+      return [
+        '<article class="hover:bg-cax-surface-subtle px-1 sm:px-4">',
+        '<div class="border-cax-border flex border-b px-2 pt-2 pb-4 sm:px-4">',
+        '<div class="shrink-0 grow-0 pr-2 sm:pr-4">',
+        `<a class="border-cax-border bg-cax-surface-subtle block h-12 w-12 overflow-hidden rounded-full border sm:h-16 sm:w-16" href="/users/${escapeHtml(post.user.username)}">${profileImage}</a>`,
+        "</div>",
+        '<div class="min-w-0 shrink grow">',
+        '<p class="overflow-hidden text-sm text-ellipsis whitespace-nowrap">',
+        `<a class="text-cax-text pr-1 font-bold" href="/users/${escapeHtml(post.user.username)}">${escapeHtml(post.user.name)}</a>`,
+        `<a class="text-cax-text-muted pr-1" href="/users/${escapeHtml(post.user.username)}">@${escapeHtml(post.user.username)}</a>`,
+        "</p>",
+        `<div class="text-cax-text leading-relaxed">${escapeHtml(post.text ?? "")}</div>`,
+        heroImage,
+        heroMovie,
+        "</div>",
+        "</div>",
+        "</article>",
+      ].join("");
+    })
+    .join("");
+}
+
+function renderPostShell(post: any): string {
+  const profileImage = post.user?.profileImage?.id
+    ? `<img alt="${escapeHtml(post.user.profileImage.alt ?? "")}" class="h-full w-full object-cover" decoding="sync" fetchpriority="high" height="64" loading="eager" src="${getProfileImagePath(post.user.profileImage.id)}" width="64" />`
+    : "";
+  const heroImage = post.images?.[0]?.id
+    ? `<div class="relative mt-2 w-full"><div class="border-cax-border grid h-full w-full grid-cols-2 grid-rows-2 gap-1 overflow-hidden rounded-lg border" style="aspect-ratio:16 / 9"><div class="${post.images.length === 1 ? "col-span-2 row-span-2" : "col-span-1 row-span-2"} bg-cax-surface-subtle"><img alt="${escapeHtml(post.images[0].alt ?? "")}" class="h-full w-full object-cover" decoding="sync" fetchpriority="high" loading="eager" src="${getImagePath(post.images[0].id)}" /></div></div></div>`
+    : "";
+  const heroMovie = !post.images?.[0]?.id && post.movie?.id
+    ? `<div class="relative mt-2 w-full"><div class="border-cax-border overflow-hidden rounded-lg border" style="aspect-ratio:1 / 1"><img alt="" class="h-full w-full object-cover" decoding="sync" fetchpriority="high" loading="eager" src="${getMoviePath(post.movie.id)}" /></div></div>`
+    : "";
+
+  return [
+    '<article class="px-1 sm:px-4">',
+    '<div class="border-cax-border border-b px-4 pt-4 pb-4">',
+    '<div class="flex items-center justify-center">',
+    '<div class="shrink-0 grow-0 pr-2">',
+    `<a class="border-cax-border bg-cax-surface-subtle block h-14 w-14 overflow-hidden rounded-full border sm:h-16 sm:w-16" href="/users/${escapeHtml(post.user.username)}">${profileImage}</a>`,
+    "</div>",
+    '<div class="min-w-0 shrink grow overflow-hidden text-ellipsis whitespace-nowrap">',
+    `<p><a class="text-cax-text font-bold" href="/users/${escapeHtml(post.user.username)}">${escapeHtml(post.user.name)}</a></p>`,
+    `<p><a class="text-cax-text-muted" href="/users/${escapeHtml(post.user.username)}">@${escapeHtml(post.user.username)}</a></p>`,
+    "</div>",
+    "</div>",
+    '<div class="pt-2 sm:pt-4">',
+    `<div class="text-cax-text text-xl leading-relaxed">${escapeHtml(post.text ?? "")}</div>`,
+    heroImage,
+    heroMovie,
+    "</div>",
+    "</div>",
+    "</article>",
+  ].join("");
+}
+
+function renderDmListShell(conversations: Array<any>, activeUserId: string): string {
+  const items = conversations
+    .slice(0, 1)
+    .map((conversation) => {
+      const peer =
+        conversation.initiator.id !== activeUserId ? conversation.initiator : conversation.member;
+      const lastMessage = conversation.messages?.at(-1);
+      return [
+        '<li class="grid" style="contain-intrinsic-size:120px;content-visibility:auto">',
+        `<a class="hover:bg-cax-surface-subtle px-4" href="/dm/${escapeHtml(conversation.id)}">`,
+        '<div class="border-cax-border flex gap-4 border-b px-4 pt-2 pb-4">',
+        `<img alt="${escapeHtml(peer.profileImage?.alt ?? "")}" class="w-12 shrink-0 self-start rounded-full object-cover" decoding="sync" fetchpriority="high" height="48" loading="eager" src="${getProfileImagePath(peer.profileImage.id)}" width="48" />`,
+        '<div class="flex flex-1 flex-col">',
+        `<div><p class="font-bold">${escapeHtml(peer.name)}</p><p class="text-cax-text-muted text-xs">@${escapeHtml(peer.username)}</p></div>`,
+        `<p class="mt-1 line-clamp-2 text-sm wrap-anywhere">${escapeHtml(lastMessage?.body ?? "")}</p>`,
+        "</div></div></a></li>",
+      ].join("");
+    })
+    .join("");
+
+  return [
+    '<section><header class="border-cax-border flex flex-col gap-4 border-b px-4 pt-6 pb-4">',
+    '<h1 class="text-2xl font-bold">ダイレクトメッセージ</h1>',
+    '<div class="flex flex-wrap items-center gap-4"><button class="flex items-center justify-center gap-2 rounded-full px-4 py-2 border bg-cax-brand text-cax-surface-raised border-transparent" type="button"><span>新しくDMを始める</span></button></div>',
+    "</header>",
+    `<ul data-testid="dm-list">${items}</ul>`,
+    "</section>",
+  ].join("");
+}
+
+function renderDmDetailShell(conversation: any, activeUserId: string): string {
+  const peer = conversation.initiator.id !== activeUserId ? conversation.initiator : conversation.member;
+  const messages = (conversation.messages ?? []).slice(-6);
+
+  return [
+    '<section class="bg-cax-surface flex min-h-[calc(100vh-(--spacing(12)))] flex-col lg:min-h-screen">',
+    '<header class="border-cax-border bg-cax-surface sticky top-0 z-10 flex items-center gap-2 border-b px-4 py-3">',
+    `<img alt="${escapeHtml(peer.profileImage?.alt ?? "")}" class="h-12 w-12 rounded-full object-cover" decoding="sync" fetchpriority="high" height="48" loading="eager" src="${getProfileImagePath(peer.profileImage.id)}" width="48" />`,
+    `<div class="min-w-0"><h1 class="overflow-hidden text-xl font-bold text-ellipsis whitespace-nowrap">${escapeHtml(peer.name)}</h1><p class="text-cax-text-muted overflow-hidden text-xs text-ellipsis whitespace-nowrap">@${escapeHtml(peer.username)}</p></div>`,
+    "</header>",
+    '<div class="bg-cax-surface-subtle flex-1 space-y-4 overflow-y-auto px-4 pt-4 pb-8"><ul class="grid gap-3" data-testid="dm-message-list">',
+    ...messages.map((message: any) => {
+      const isMine = message.sender.id === activeUserId;
+      return [
+        `<li class="flex flex-col w-full ${isMine ? "items-end" : "items-start"}">`,
+        `<p class="max-w-3/4 rounded-xl border px-4 py-2 text-sm whitespace-pre-wrap leading-relaxed wrap-anywhere ${isMine ? "rounded-br-sm border-transparent bg-cax-brand text-cax-surface-raised" : "rounded-bl-sm border-cax-border bg-cax-surface text-cax-text"}">${escapeHtml(message.body)}</p>`,
+        "</li>",
+      ].join("");
+    }).join(""),
+    "</ul></div></section>",
+  ].join("");
+}
+
+async function buildBootstrapData(req: Request) {
+  const bootstrapData: Record<string, unknown> = {};
+  const preloads = new Set<string>();
+  let shellMarkup = "";
+  const url = new URL(req.originalUrl, "http://localhost");
+  const pathname = url.pathname;
+
+  if (req.session.userId !== undefined && (pathname.startsWith("/dm") || pathname === "/crok")) {
+    const activeUser = await User.findByPk(req.session.userId);
+    if (activeUser != null) {
+      bootstrapData["/api/v1/me"] = activeUser;
+      if (activeUser.profileImage?.id) {
+        preloads.add(getProfileImagePath(activeUser.profileImage.id));
+      }
+    }
+  }
+
+  if (pathname === "/") {
+    const posts = await Post.findAll({ limit: TIMELINE_LIMIT, offset: 0 });
+    bootstrapData[`/api/v1/posts?limit=${TIMELINE_LIMIT}&offset=0`] = posts;
+    addPostPreloads(preloads, posts[0]?.toJSON() as unknown as HydratedPost | undefined);
+    shellMarkup = renderAppShell(renderTimelineShell(posts.map((post) => post.toJSON())));
+  } else if (pathname.startsWith("/posts/")) {
+    const postId = decodeURIComponent(pathname.slice("/posts/".length));
+    const post = await Post.findByPk(postId);
+    if (post != null) {
+      bootstrapData[`/api/v1/posts/${postId}`] = post;
+      addPostPreloads(preloads, post.toJSON() as unknown as HydratedPost);
+      shellMarkup = renderAppShell(renderPostShell(post.toJSON()));
+    }
+  } else if (pathname.startsWith("/users/")) {
+    const username = decodeURIComponent(pathname.slice("/users/".length));
+    const user = await User.findOne({ where: { username } });
+    if (user != null) {
+      bootstrapData[`/api/v1/users/${username}`] = user;
+      const posts = await Post.findAll({
+        limit: USER_POSTS_LIMIT,
+        offset: 0,
+        where: { userId: user.id },
+      });
+      bootstrapData[`/api/v1/users/${username}/posts?limit=${USER_POSTS_LIMIT}&offset=0`] = posts;
+      addPostPreloads(preloads, posts[0]?.toJSON() as unknown as HydratedPost | undefined);
+      shellMarkup = renderAppShell(renderTimelineShell(posts.map((post) => post.toJSON())));
+    }
+  } else if (pathname === "/search") {
+    const query = url.searchParams.get("q")?.trim() ?? "";
+    if (query !== "") {
+      const { keywords, sinceDate, untilDate } = parseSearchQuery(query);
+      if (keywords || sinceDate || untilDate) {
+        const searchTerm = keywords ? `%${keywords}%` : null;
+        const dateConditions: Record<symbol, Date>[] = [];
+        if (sinceDate) {
+          dateConditions.push({ [Op.gte]: sinceDate });
+        }
+        if (untilDate) {
+          dateConditions.push({ [Op.lte]: untilDate });
+        }
+        const dateWhere =
+          dateConditions.length > 0 ? { createdAt: Object.assign({}, ...dateConditions) } : {};
+        const textWhere = searchTerm ? { text: { [Op.like]: searchTerm } } : {};
+
+        const postsByText = await Post.findAll({
+          limit: SEARCH_LIMIT,
+          offset: 0,
+          where: {
+            ...textWhere,
+            ...dateWhere,
+          },
+        });
+
+        let postsByUser: typeof postsByText = [];
+        if (searchTerm) {
+          postsByUser = await Post.findAll({
+            include: [
+              {
+                association: "user",
+                attributes: ["id", "name", "username"],
+                include: [{ association: "profileImage", attributes: ["alt", "id"] }],
+                required: true,
+                where: {
+                  [Op.or]: [
+                    { username: { [Op.like]: searchTerm } },
+                    { name: { [Op.like]: searchTerm } },
+                  ],
+                },
+              },
+              {
+                association: "images",
+                attributes: ["alt", "id"],
+                through: { attributes: [] },
+              },
+              { association: "movie", attributes: ["id"] },
+              { association: "sound", attributes: ["artist", "id", "title"] },
+            ],
+            limit: SEARCH_LIMIT,
+            offset: 0,
+            subQuery: false,
+            where: dateWhere,
+          });
+        }
+
+        const mergedPosts: typeof postsByText = [];
+        const seen = new Set<string>();
+        for (const post of [...postsByText, ...postsByUser]) {
+          if (!seen.has(post.id)) {
+            seen.add(post.id);
+            mergedPosts.push(post);
+          }
+        }
+
+        mergedPosts.sort((a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime());
+        bootstrapData[
+          `/api/v1/search?q=${encodeURIComponent(query)}&limit=${SEARCH_LIMIT}&offset=0`
+        ] = mergedPosts.slice(0, SEARCH_LIMIT);
+        addPostPreloads(preloads, mergedPosts[0]?.toJSON() as unknown as HydratedPost | undefined);
+      }
+    }
+  } else if (pathname === "/dm" && req.session.userId !== undefined) {
+    const conversations = await getDmConversations(req.session.userId);
+    bootstrapData["/api/v1/dm"] = conversations;
+    const firstConversation = conversations[0] as unknown as HydratedConversation | undefined;
+    const peer =
+      firstConversation?.initiator.id !== req.session.userId
+        ? firstConversation?.initiator
+        : firstConversation?.member;
+    if (peer?.profileImage?.id) {
+      preloads.add(getProfileImagePath(peer.profileImage.id));
+    }
+    shellMarkup = renderAppShell(renderDmListShell(conversations, req.session.userId));
+  } else if (pathname.startsWith("/dm/") && req.session.userId !== undefined) {
+    const conversationId = decodeURIComponent(pathname.slice("/dm/".length));
+    const conversation = await DirectMessageConversation.unscoped().findOne({
+      attributes: ["id"],
+      include: DM_DETAIL_INCLUDE,
+      where: {
+        id: conversationId,
+        [Op.or]: [{ initiatorId: req.session.userId }, { memberId: req.session.userId }],
+      },
+    });
+
+    if (conversation != null) {
+      const json = conversation.toJSON() as unknown as HydratedConversation;
+      const messages = [...(json.messages ?? [])].sort((a, b) => {
+        return new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime();
+      });
+      bootstrapData[`/api/v1/dm/${conversationId}`] = {
+        ...json,
+        messages,
+      };
+
+      const peer =
+        json.initiator.id !== req.session.userId ? json.initiator : json.member;
+      if (peer.profileImage?.id) {
+        preloads.add(getProfileImagePath(peer.profileImage.id));
+      }
+      shellMarkup = renderAppShell(
+        renderDmDetailShell(
+          {
+            ...json,
+            messages,
+          },
+          req.session.userId,
+        ),
+      );
+    }
+  }
+
+  return { bootstrapData, preloads, shellMarkup };
+}
+
+export async function renderAppHtml(req: Request) {
+  const [template, { bootstrapData, preloads, shellMarkup }] = await Promise.all([
+    getIndexHtmlTemplate(),
+    buildBootstrapData(req),
+  ]);
+
+  const preloadTags = [...preloads]
+    .map((href) => `<link rel="preload" as="image" href="${href}" />`)
+    .join("");
+  const bootstrapScript =
+    Object.keys(bootstrapData).length > 0
+      ? `<script>window.__BOOTSTRAP_DATA__=${serializeForInlineScript(bootstrapData)};</script>`
+      : "";
+  const appShell =
+    shellMarkup !== ""
+      ? `<div id="prerender-shell">${shellMarkup}</div><div id="app"></div>`
+      : '<div id="app"></div>';
+
+  return template
+    .replace(
+      '<body class="bg-cax-canvas text-cax-text">',
+      `<body class="bg-cax-canvas text-cax-text"${
+        shellMarkup !== "" ? ' data-has-prerender="1" data-app-mounted="0"' : ""
+      }>`,
+    )
+    .replace('<div id="app"></div>', appShell)
+    .replace("</head>", `${preloadTags}${bootstrapScript}</head>`);
+}