diff --git a/app/[docs_id]/chatForm.tsx b/app/[docs_id]/chatForm.tsx
index 381e014..5f56671 100644
--- a/app/[docs_id]/chatForm.tsx
+++ b/app/[docs_id]/chatForm.tsx
@@ -104,7 +104,7 @@ export function ChatForm({
 
   return (
     <form
-      className="border border-2 border-secondary shadow-lg rounded-lg bg-base-100"
+      className="border border-2 border-secondary shadow-lg rounded-box bg-base-100"
       style={{
         width: "100%",
         textAlign: "center",
@@ -112,7 +112,7 @@ export function ChatForm({
       onSubmit={handleSubmit}
     >
       <textarea
-        className="textarea textarea-ghost textarea-md rounded-lg"
+        className="textarea textarea-ghost textarea-md rounded-box"
         placeholder={
           "質問を入力してください" +
           (exampleData
@@ -138,7 +138,7 @@ export function ChatForm({
         }}
       >
         <button
-          className="btn btn-soft btn-secondary rounded-full"
+          className="btn btn-soft btn-primary rounded-full"
           onClick={close}
           type="button"
         >
@@ -158,7 +158,7 @@ export function ChatForm({
         )}
         <button
           type="submit"
-          className="btn btn-soft btn-circle btn-accent border-2 border-accent rounded-full"
+          className="btn btn-soft btn-circle btn-secondary"
           title="送信"
           disabled={isLoading}
         >
diff --git a/app/[docs_id]/markdown.tsx b/app/[docs_id]/markdown.tsx
index cf8ad75..600e7b4 100644
--- a/app/[docs_id]/markdown.tsx
+++ b/app/[docs_id]/markdown.tsx
@@ -1,18 +1,15 @@
-import Markdown, { Components } from "react-markdown";
+import Markdown, { Components, ExtraProps } from "react-markdown";
 import remarkGfm from "remark-gfm";
 import { EditorComponent, getAceLang } from "../terminal/editor";
 import { ExecFile } from "../terminal/exec";
-import { useChangeTheme } from "./themeToggle";
-import {
-  tomorrow,
-  atomOneDark,
-} from "react-syntax-highlighter/dist/esm/styles/hljs";
-import { ReactNode } from "react";
+import { JSX, ReactNode } from "react";
 import { getRuntimeLang } from "@/terminal/runtime";
 import { ReplTerminal } from "@/terminal/repl";
-import dynamic from "next/dynamic";
-// SyntaxHighlighterはファイルサイズがでかいので & HydrationErrorを起こすので、SSRを無効化する
-const SyntaxHighlighter = dynamic(() => import("react-syntax-highlighter"), { ssr: false });
+import {
+  getSyntaxHighlighterLang,
+  MarkdownLang,
+  StyledSyntaxHighlighter,
+} from "./styledSyntaxHighlighter";
 
 export function StyledMarkdown({ content }: { content: string }) {
   return (
@@ -40,14 +37,14 @@ const components: Components = {
   li: ({ node, ...props }) => <li className="my-1" {...props} />,
   a: ({ node, ...props }) => <a className="link link-info" {...props} />,
   strong: ({ node, ...props }) => (
-    <strong className="text-primary dark:text-secondary" {...props} />
+    <strong className="text-primary" {...props} />
   ),
   table: ({ node, ...props }) => (
-    <div className="w-max max-w-full overflow-x-auto mx-auto my-2 rounded-lg border border-base-content/5 shadow-sm">
+    <div className="w-max max-w-full overflow-x-auto mx-auto my-2 rounded-box border border-current/20 shadow-sm">
       <table className="table w-max" {...props} />
     </div>
   ),
-  hr: ({ node, ...props }) => <hr className="border-primary my-4" {...props} />,
+  hr: ({ node, ...props }) => <hr className="border-accent my-4" {...props} />,
   pre: ({ node, ...props }) => props.children,
   code: ({ node, className, ref, style, ...props }) => (
     <CodeComponent {...{ node, className, ref, style, ...props }} />
@@ -84,20 +81,12 @@ function CodeComponent({
   ref,
   style,
   ...props
-}: {
-  node: unknown;
-  className?: string;
-  ref?: unknown;
-  style?: unknown;
-  [key: string]: unknown;
-}) {
-  const theme = useChangeTheme();
-  const codetheme = theme === "tomorrow" ? tomorrow : atomOneDark;
+}: JSX.IntrinsicElements["code"] & ExtraProps) {
   const match = /^language-(\w+)(-repl|-exec|-readonly)?\:?(.+)?$/.exec(
     className || ""
   );
   if (match) {
-    const runtimeLang = getRuntimeLang(match[1]);
+    const runtimeLang = getRuntimeLang(match[1] as MarkdownLang | undefined);
     if (match[2] === "-exec" && match[3]) {
       /*
       ```python-exec:main.py
@@ -111,13 +100,11 @@ function CodeComponent({
       */
       if (runtimeLang) {
         return (
-          <div className="border border-primary border-2 shadow-md m-2 rounded-lg">
-            <ExecFile
-              language={runtimeLang}
-              filenames={match[3].split(",")}
-              content={String(props.children || "").replace(/\n$/, "")}
-            />
-          </div>
+          <ExecFile
+            language={runtimeLang}
+            filenames={match[3].split(",")}
+            content={String(props.children || "").replace(/\n$/, "")}
+          />
         );
       }
     } else if (match[2] === "-repl") {
@@ -129,57 +116,45 @@ function CodeComponent({
       }
       if (runtimeLang) {
         return (
-          <div className="bg-base-300 border border-primary border-2 shadow-md m-2 p-4 pr-1 rounded-lg">
-            <ReplTerminal
-              terminalId={match[3]}
-              language={runtimeLang}
-              initContent={String(props.children || "").replace(/\n$/, "")}
-            />
-          </div>
+          <ReplTerminal
+            terminalId={match[3]}
+            language={runtimeLang}
+            initContent={String(props.children || "").replace(/\n$/, "")}
+          />
         );
       }
     } else if (match[3]) {
       // ファイル名指定がある場合、ファイルエディター
-      const aceLang = getAceLang(match[1]);
+      const aceLang = getAceLang(match[1] as MarkdownLang | undefined);
       return (
-        <div className="border border-primary border-2 shadow-md m-2 rounded-lg">
-          <EditorComponent
-            language={aceLang}
-            filename={match[3]}
-            readonly={match[2] === "-readonly"}
-            initContent={String(props.children || "").replace(/\n$/, "")}
-          />
-        </div>
+        <EditorComponent
+          language={aceLang}
+          filename={match[3]}
+          readonly={match[2] === "-readonly"}
+          initContent={String(props.children || "").replace(/\n$/, "")}
+        />
       );
     }
+    const syntaxHighlighterLang = getSyntaxHighlighterLang(
+      match[1] as MarkdownLang | undefined
+    );
     return (
-      <SyntaxHighlighter
-        language={match[1]}
-        PreTag="div"
-        className="border border-base-content/50 mx-2 my-2 rounded-lg text-sm p-4!"
-        style={codetheme}
-        {...props}
-      >
+      <StyledSyntaxHighlighter language={syntaxHighlighterLang}>
         {String(props.children || "").replace(/\n$/, "")}
-      </SyntaxHighlighter>
+      </StyledSyntaxHighlighter>
     );
   } else if (String(props.children).includes("\n")) {
     // 言語指定なしコードブロック
     return (
-      <SyntaxHighlighter
-        PreTag="div"
-        className="border border-base-content/50 mx-2 my-2 rounded-lg text-sm p-4!"
-        style={codetheme}
-        {...props}
-      >
+      <StyledSyntaxHighlighter language={undefined}>
         {String(props.children || "").replace(/\n$/, "")}
-      </SyntaxHighlighter>
+      </StyledSyntaxHighlighter>
     );
   } else {
     // inline
     return (
       <code
-        className="bg-base-200/60 border border-base-300 px-1 py-0.5 rounded text-sm "
+        className="bg-current/10 border border-current/20 px-1 py-0.5 mx-0.5 rounded-md"
         {...props}
       />
     );
diff --git a/app/[docs_id]/page.tsx b/app/[docs_id]/page.tsx
index 59202da..c402020 100644
--- a/app/[docs_id]/page.tsx
+++ b/app/[docs_id]/page.tsx
@@ -1,52 +1,75 @@
+import { Metadata } from "next";
 import { notFound } from "next/navigation";
 import { getCloudflareContext } from "@opennextjs/cloudflare";
 import { readFile } from "node:fs/promises";
 import { join } from "node:path";
-import { MarkdownSection, splitMarkdown } from "./splitMarkdown";
+import { splitMarkdown } from "./splitMarkdown";
 import { PageContent } from "./pageContent";
 import { ChatHistoryProvider } from "./chatHistory";
 import { getChatFromCache } from "@/lib/chatHistory";
+import { getLanguageName } from "@/pagesList";
 
-export default async function Page({
+async function getMarkdownContent(docs_id: string): Promise<string> {
+  try {
+    if (process.env.NODE_ENV === "development") {
+      return await readFile(
+        join(process.cwd(), "public", "docs", `${docs_id}.md`),
+        "utf-8"
+      );
+    } else {
+      const cfAssets = getCloudflareContext().env.ASSETS;
+      const res = await cfAssets!.fetch(
+        `https://assets.local/docs/${docs_id}.md`
+      );
+      if (!res.ok) {
+        notFound();
+      }
+      return await res.text();
+    }
+  } catch (e) {
+    console.error(e);
+    notFound();
+  }
+}
+
+export async function generateMetadata({
   params,
 }: {
   params: Promise<{ docs_id: string }>;
-}) {
+}): Promise<Metadata> {
   const { docs_id } = await params;
+  const mdContent = await getMarkdownContent(docs_id);
+  const splitMdContent = splitMarkdown(mdContent);
 
-  let mdContent: Promise<string>;
-  if (process.env.NODE_ENV === "development") {
-    mdContent = readFile(
-      join(process.cwd(), "public", "docs", `${docs_id}.md`),
-      "utf-8"
-    ).catch((e) => {
-      console.error(e);
-      notFound();
-    });
-  } else {
-    const cfAssets = getCloudflareContext().env.ASSETS;
-    mdContent = cfAssets!
-      .fetch(`https://assets.local/docs/${docs_id}.md`)
-      .then(async (res) => {
-        if (!res.ok) {
-          notFound();
-        }
-        return res.text();
-      })
-      .catch((e) => {
-        console.error(e);
-        notFound();
-      });
-  }
+  // 先頭の 第n章: を除いたものをタイトルとする
+  const title = splitMdContent[0]?.title?.split(" ").slice(1).join(" ");
 
-  const splitMdContent: Promise<MarkdownSection[]> = mdContent.then((text) =>
-    splitMarkdown(text)
-  );
+  const description = splitMdContent[0].content;
+
+  const chapter = docs_id.split("-")[1];
+
+  return {
+    title: `${getLanguageName(docs_id)}-${chapter}. ${title}`,
+    description,
+  };
+}
+
+export default async function Page({
+  params,
+}: {
+  params: Promise<{ docs_id: string }>;
+}) {
+  const { docs_id } = await params;
 
+  const mdContent = getMarkdownContent(docs_id);
+  const splitMdContent = mdContent.then((text) => splitMarkdown(text));
   const initialChatHistories = getChatFromCache(docs_id);
 
   return (
-    <ChatHistoryProvider initialChatHistories={await initialChatHistories} docs_id={docs_id}>
+    <ChatHistoryProvider
+      initialChatHistories={await initialChatHistories}
+      docs_id={docs_id}
+    >
       <PageContent
         documentContent={await mdContent}
         splitMdContent={await splitMdContent}
diff --git a/app/[docs_id]/pageContent.tsx b/app/[docs_id]/pageContent.tsx
index 83406c7..0d48c68 100644
--- a/app/[docs_id]/pageContent.tsx
+++ b/app/[docs_id]/pageContent.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { useEffect, useRef, useState } from "react";
+import { Fragment, useEffect, useRef, useState } from "react";
 import { MarkdownSection } from "./splitMarkdown";
 import { ChatForm } from "./chatForm";
 import { Heading, StyledMarkdown } from "./markdown";
@@ -90,10 +90,9 @@ export function PageContent(props: PageContentProps) {
       }}
     >
       {dynamicMdContent.map((section, index) => (
-        <>
+        <Fragment key={index}>
           <div
             className="max-w-200"
-            key={`${index}-content`}
             id={`${index}`} // 目次からaタグで飛ぶために必要
             ref={(el) => {
               sectionRefs.current[index] = el;
@@ -103,14 +102,14 @@ export function PageContent(props: PageContentProps) {
             <Heading level={section.level}>{section.title}</Heading>
             <StyledMarkdown content={section.content} />
           </div>
-          <div key={`${index}-chat`}>
+          <div>
             {/* 右側に表示するチャット履歴欄 */}
             {chatHistories
               .filter((c) => c.sectionId === section.sectionId)
               .map(({ chatId, messages }) => (
                 <div
                   key={chatId}
-                  className="max-w-xs mb-2 p-2 text-sm border border-base-content/10 rounded-sm shadow-sm bg-base-100"
+                  className="max-w-xs mb-2 p-2 text-sm border border-base-content/10 rounded-sm shadow-sm bg-base-200"
                 >
                   <div className="max-h-60 overflow-y-auto">
                     {messages.map((msg, index) => (
@@ -120,12 +119,10 @@ export function PageContent(props: PageContentProps) {
                       >
                         <div
                           className={clsx(
-                            "chat-bubble p-1!",
                             msg.role === "user" &&
-                              "bg-primary text-primary-content",
-                            msg.role === "ai" &&
-                              "bg-secondary-content dark:bg-neutral text-black dark:text-white",
-                            msg.role === "error" && "chat-bubble-error"
+                              "chat-bubble p-0.5! bg-secondary/30",
+                            msg.role === "ai" && "chat-bubble p-0.5!",
+                            msg.role === "error" && "text-error"
                           )}
                           style={{ maxWidth: "100%", wordBreak: "break-word" }}
                         >
@@ -137,7 +134,7 @@ export function PageContent(props: PageContentProps) {
                 </div>
               ))}
           </div>
-        </>
+        </Fragment>
       ))}
       {isFormVisible ? (
         // sidebarの幅が80であることからleft-84 (sidebar.tsx参照)
diff --git a/app/[docs_id]/styledSyntaxHighlighter.tsx b/app/[docs_id]/styledSyntaxHighlighter.tsx
new file mode 100644
index 0000000..42b2e92
--- /dev/null
+++ b/app/[docs_id]/styledSyntaxHighlighter.tsx
@@ -0,0 +1,115 @@
+"use client";
+
+import { useChangeTheme } from "./themeToggle";
+import {
+  tomorrow,
+  tomorrowNight,
+} from "react-syntax-highlighter/dist/esm/styles/hljs";
+import { lazy, Suspense, useEffect, useState } from "react";
+
+// SyntaxHighlighterはファイルサイズがでかいので & HydrationErrorを起こすので、SSRを無効化する
+const SyntaxHighlighter = lazy(() => {
+  if (typeof window !== "undefined") {
+    return import("react-syntax-highlighter");
+  } else {
+    throw new Error("should not try SSR");
+  }
+});
+
+// Markdownで指定される可能性のある言語名を列挙
+export type MarkdownLang =
+  | "python"
+  | "py"
+  | "ruby"
+  | "rb"
+  | "cpp"
+  | "c++"
+  | "javascript"
+  | "js"
+  | "typescript"
+  | "ts"
+  | "bash"
+  | "sh"
+  | "json"
+  | "csv"
+  | "text"
+  | "txt";
+
+// react-syntax-highliter (hljs版) が対応している言語
+// https://github.com/react-syntax-highlighter/react-syntax-highlighter/blob/master/AVAILABLE_LANGUAGES_HLJS.MD を参照
+export type SyntaxHighlighterLang =
+  | "python"
+  | "ruby"
+  | "c"
+  | "cpp"
+  | "javascript"
+  | "typescript"
+  | "bash"
+  | "json";
+export function getSyntaxHighlighterLang(
+  lang: MarkdownLang | undefined
+): SyntaxHighlighterLang | undefined {
+  switch (lang) {
+    case "python":
+    case "py":
+      return "python";
+    case "ruby":
+    case "rb":
+      return "ruby";
+    case "cpp":
+    case "c++":
+      return "cpp";
+    case "javascript":
+    case "js":
+      return "javascript";
+    case "typescript":
+    case "ts":
+      return "typescript";
+    case "bash":
+    case "sh":
+      return "bash";
+    case "json":
+      return "json";
+    case "csv": // not supported
+    case "text":
+    case "txt":
+    case undefined:
+      return undefined;
+    default:
+      lang satisfies never;
+      console.warn(`Language not listed in MarkdownLang: ${lang}`);
+      return undefined;
+  }
+}
+export function StyledSyntaxHighlighter(props: {
+  children: string;
+  language: SyntaxHighlighterLang | undefined;
+}) {
+  const theme = useChangeTheme();
+  const codetheme = theme === "tomorrow" ? tomorrow : tomorrowNight;
+  const [initHighlighter, setInitHighlighter] = useState(false);
+  useEffect(() => {
+    setInitHighlighter(true);
+  }, []);
+  return initHighlighter ? (
+    <Suspense fallback={<FallbackPre>{props.children}</FallbackPre>}>
+      <SyntaxHighlighter
+        language={props.language}
+        PreTag="div"
+        className="border-2 border-current/20 mx-2 my-2 rounded-box p-4! bg-base-300! text-base-content!"
+        style={codetheme}
+      >
+        {props.children}
+      </SyntaxHighlighter>
+    </Suspense>
+  ) : (
+    <FallbackPre>{props.children}</FallbackPre>
+  );
+}
+function FallbackPre({ children }: { children: string }) {
+  return (
+    <pre className="border-2 border-current/20 mx-2 my-2 rounded-box p-4! bg-base-300! text-base-content!">
+      {children}
+    </pre>
+  );
+}
diff --git a/app/[docs_id]/themeToggle.tsx b/app/[docs_id]/themeToggle.tsx
index 1b4fd4a..7bdce16 100644
--- a/app/[docs_id]/themeToggle.tsx
+++ b/app/[docs_id]/themeToggle.tsx
@@ -2,13 +2,14 @@
 import { useState, useEffect } from "react";
 
 export function useChangeTheme() {
-  const [theme, setTheme] = useState("tomorrow");
+  const [theme, setTheme] = useState<"tomorrow" | "tomorrow_night">("tomorrow");
   useEffect(() => {
     const updateTheme = () => {
       const theme = document.documentElement.getAttribute("data-theme");
-      setTheme(theme === "dark" ? "twilight" : "tomorrow");
+      setTheme(theme === "mycdark" ? "tomorrow_night" : "tomorrow");
     };
 
+    updateTheme();
     const observer = new MutationObserver(updateTheme);
     observer.observe(document.documentElement, {
       attributes: true,
@@ -21,20 +22,19 @@ export function useChangeTheme() {
 }
 export function ThemeToggle() {
   const theme = useChangeTheme();
-  const isChecked = theme === "twilight";
+  const isChecked = theme === "tomorrow_night";
   useEffect(() => {
     const checkIsDarkSchemePreferred = () =>
       window?.matchMedia?.("(prefers-color-scheme:dark)")?.matches ?? false;
-    const initialTheme = checkIsDarkSchemePreferred() ? "dark" : "light";
+    const initialTheme = checkIsDarkSchemePreferred() ? "mycdark" : "myclight";
     document.documentElement.setAttribute("data-theme", initialTheme);
   }, []);
 
   return (
-    <label className="flex items-center cursor-pointer gap-2">
+    <label className="flex items-center cursor-pointer gap-1">
       <svg
         xmlns="http://www.w3.org/2000/svg"
-        width="20"
-        height="20"
+        className="w-5 h-5"
         viewBox="0 0 24 24"
         fill="none"
         stroke="currentColor"
@@ -51,14 +51,13 @@ export function ThemeToggle() {
         className="toggle theme-controller"
         onChange={(e) => {
           const isdark = e.target.checked;
-          const theme = isdark ? "dark" : "light";
+          const theme = isdark ? "mycdark" : "myclight";
           document.documentElement.setAttribute("data-theme", theme);
         }}
       />
       <svg
         xmlns="http://www.w3.org/2000/svg"
-        width="20"
-        height="20"
+        className="w-5 h-5"
         viewBox="0 0 24 24"
         fill="none"
         stroke="currentColor"
diff --git a/app/favicon.ico b/app/favicon.ico
new file mode 100644
index 0000000..43b2c99
Binary files /dev/null and b/app/favicon.ico differ
diff --git a/app/globals.css b/app/globals.css
index fc25546..b3dd378 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -1,13 +1,161 @@
 @import "tailwindcss";
 @plugin "daisyui" {
   themes:
-    light --default,
-    dark --prefersdark;
+    myclight --default,
+    mycdark --prefersdark;
 }
 
-@custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *));
+/*
+myclight:
+- 適当に決めたアイコンの背景色が #ba6900 = oklch(0.5999 0.1391 61.15) だったので、それをprimaryとして使う
+- baseやneutralなどをhue=61.15で統一
+- info〜errorはcupcakeのコピペ
+
+mycdark:
+- primary, secondary, accentのchroma, hueをmyclightとあわせる
+- info〜errorはhalloweenのコピペ
+
+*/
+@plugin "daisyui/theme" {
+  name: "myclight";
+  default: true;
+  prefersdark: false;
+  color-scheme: "light";
+  --color-base-100: oklch(98% 0.01 61.15);
+  --color-base-200: oklch(95% 0.013 61.15);
+  --color-base-300: oklch(92% 0.016 61.15);
+  --color-base-content: oklch(21% 0.006 61.15);
+  --color-primary: oklch(60% 0.139 61.15);
+  --color-primary-content: oklch(98% 0.02 61.15);
+  --color-secondary: oklch(55% 0.262 315);
+  --color-secondary-content: oklch(98% 0.02 315);
+  --color-accent: oklch(51% 0.181 190);
+  --color-accent-content: oklch(98% 0.02 190);
+  --color-neutral: oklch(33% 0.07 61.15);
+  --color-neutral-content: oklch(98% 0.003 61.15);
+  --color-info: oklch(68% 0.169 237.323);
+  --color-info-content: oklch(29% 0.066 243.157);
+  --color-success: oklch(69% 0.17 162.48);
+  --color-success-content: oklch(26% 0.051 172.552);
+  --color-warning: oklch(79% 0.184 86.047);
+  --color-warning-content: oklch(28% 0.066 53.813);
+  --color-error: oklch(64% 0.246 16.439);
+  --color-error-content: oklch(27% 0.105 12.094);
+  --radius-selector: 0.5rem;
+  --radius-field: 0.5rem;
+  --radius-box: 1rem;
+  --size-selector: 0.25rem;
+  --size-field: 0.25rem;
+  --border: 1px;
+  --depth: 1;
+  --noise: 0;
+}
+
+@plugin "daisyui/theme" {
+  name: "mycdark";
+  default: false;
+  prefersdark: true;
+  color-scheme: "dark";
+  --color-base-100: oklch(23.0% 0.020 61.15);
+  --color-base-200: oklch(19.0% 0.020 61.15);
+  --color-base-300: oklch(10.0% 0.020 61.15);
+  --color-base-content: oklch(85% 0.01 61.15);
+  --color-primary: oklch(70% 0.139 61.15);
+  --color-primary-content: oklch(26% 0.07 61.15);
+  --color-secondary: oklch(65% 0.262 315);
+  --color-secondary-content: oklch(18% 0.191 315);
+  --color-accent: oklch(61% 0.181 190);
+  --color-accent-content: oklch(18% 0.152 190);
+  --color-neutral: oklch(33.0% 0.070 61.15);
+  --color-neutral-content: oklch(85% 0.01 61.15);
+  --color-info: oklch(54.615% 0.215 262.88);
+  --color-info-content: oklch(90.923% 0.043 262.88);
+  --color-success: oklch(62.705% 0.169 149.213);
+  --color-success-content: oklch(12.541% 0.033 149.213);
+  --color-warning: oklch(66.584% 0.157 58.318);
+  --color-warning-content: oklch(13.316% 0.031 58.318);
+  --color-error: oklch(65.72% 0.199 27.33);
+  --color-error-content: oklch(13.144% 0.039 27.33);
+  --radius-selector: 0.5rem;
+  --radius-field: 0.5rem;
+  --radius-box: 1rem;
+  --size-selector: 0.25rem;
+  --size-field: 0.25rem;
+  --border: 1px;
+  --depth: 1;
+  --noise: 0;
+}
+
+@custom-variant dark (&:where([data-theme=mycdark], [data-theme=mycdark] *));
+
+/* Aceの背景色と文字色を上書き */
+.ace_editor {
+  background-color: var(--color-base-300) !important;
+  color: var(--color-base-content) !important;
+}
+.ace_gutter {
+  /* editorと同じにする */
+  background: inherit !important;
+  color: inherit !important;
+}
+.ace_active-line {
+  /* bg-base-content/10 このdivにはテキストが入らないので、opacity:0.1で代用可能 */
+  background: var(--color-base-content) !important;
+  opacity: 0.1;
+}
+.ace_gutter-active-line {
+  /* bg-base-content/20 --color-base-contentにa=0.2を追加する方法がなさそうなのでcolor-mixで代用する */
+  background-color: color-mix(in oklch, var(--color-base-content) 20%, var(--color-base-300)) !important;
+}
+.ace_bracket {
+  border: 1px solid var(--color-primary) !important;
+}
+.ace_cursor {
+  color: var(--color-primary) !important;
+}
+.ace_selection {
+  background: var(--color-primary) !important;
+  opacity: 0.4;
+}
+.ace_selected-word {
+  border: 1px solid var(--color-primary) !important;
+}
 
 /* CDNからダウンロードするURLを指定したらなんかエラー出るので、npmでインストールしてlayout.tsxでimportすることにした */
 @theme {
-  --font-mono: "Inconsolata Variable", "Noto Sans JP Variable", monospace;
+  /*
+  Variable がついているほうはlayout.tsxでインポートしているwebフォント、
+  それ以外はフォールバック (インストールされていればwebフォントをダウンロードする必要はないため)
+
+  UbuntuでシステムにインストールされたInconsolataには、太字がなかったので、Inconsolataは除外
+  それに加えて、 "Inconsolata", "Inconsolata Variable" という指定にしたとしても
+  terminal.tsxで Inconsolata Variable をloadしているので意味ない...
+
+  NotoSansJPの指定は正直なくても良い気はするが、
+  あまり変なフォントが選ばれるとxtermやaceエディターの表示が崩れる可能性があるので、
+  確実にフォントを統一するために適当に指定している
+  */
+  --font-mono:
+    "Inconsolata Variable",
+    /* Inconsolataのfallbackとしての欧文フォント */ "Inconsolata",
+    "Noto Sans Mono", "Roboto Mono", "SFMono-Regular", "Menlo", "Monaco",
+    "Consolas", "Liberation Mono", "Courier New",
+    /* 日本語用にNotoSans */ "Noto Sans Mono CJK JP", "Noto Sans JP",
+    "Noto Sans CJK JP", "Source Han Sans JP", "Noto Sans JP Variable", monospace;
+  /*
+  本家のフォント名は Rounded M+ 1c 、または1pでもいいかも
+  layout.tsxでインポートしているwebフォントが M PLUS Rounded 1c
+
+  それ以下はM+をダウンロードするまでの間表示されるswap用フォールバックとしてM+に見た目が近いものを指定。
+  Hiragino Maru Gothic は見た目はめっちゃきれいなんだけど太字がない :cry:
+  Meiryo は日本語の形がM+に近いが、英数がダメ
+  */
+  --font-sans:
+    "Rounded M+ 1c", "Rounded M+ 1p", "M PLUS Rounded 1c",
+    /* 以下fallback */ "M+ 1c", "MigMix 1c", "Migu 1c",
+    "Hiragino Maru Gothic ProN", "Noto Sans", "Arial", "Liberation Sans",
+    "Meiryo", sans-serif,
+    /* TailwindCSSでデフォルトで指定されていた絵文字フォントは一応残しておく */
+      "Apple Color Emoji",
+    "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
 }
diff --git a/app/icon.png b/app/icon.png
new file mode 100644
index 0000000..d389683
Binary files /dev/null and b/app/icon.png differ
diff --git a/app/icon.svg b/app/icon.svg
new file mode 100644
index 0000000..d0001c3
--- /dev/null
+++ b/app/icon.svg
@@ -0,0 +1,39 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   viewBox="0 0 1000 1000"
+   version="1.1"
+   xml:space="preserve"
+   style="clip-rule:evenodd;fill-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2"
+   id="svg7"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"><defs
+     id="defs7" /><g
+     id="g7"><path
+       d="m 890.745,946.777 c 0,29.395 -23.828,53.223 -53.223,53.223 H 301.023 c -29.392,0 -53.221,-23.828 -53.221,-53.223 v -384.28 c 0,-29.396 -23.828,-53.224 -53.22,-53.224 h -32.108 c -29.393,0 -53.219,-23.828 -53.219,-53.211 V 53.22 c 0,-14.115 5.606,-27.651 15.587,-37.633 C 134.823,5.607 148.359,0 162.474,0 h 675.048 c 14.116,0 27.663,5.607 37.635,15.587 9.984,9.982 15.588,23.518 15.588,37.633 z"
+       style="fill:#ba6900;fill-opacity:1"
+       id="path1" /></g><path
+     d="m 565.12003,281.12013 12.32001,11.73334 q -33.44002,59.84003 -76.85338,59.84003 -17.60001,0 -27.57335,-9.38667 -9.38667,-9.97334 -9.38667,-25.81334 0,-16.42668 19.36001,-55.73337 19.36001,-39.30669 20.53335,-59.84003 0.58666,-9.38667 -5.86667,-15.25334 -5.86667,-5.86667 -16.42668,-5.86667 -10.56001,0 -21.70668,5.28 -10.56,4.69334 -21.12001,15.84001 -9.97334,11.14667 -18.77334,21.70668 -8.21334,10.56 -18.77335,29.92001 -9.97334,19.36001 -17.01334,32.26669 -12.32001,24.05334 -35.20002,72.16004 L 313.43989,345.6535 q 0,-1.76 19.36001,-66.29337 19.36001,-64.53337 19.36001,-76.85338 0,-12.32 -5.86667,-17.6 -5.86667,-5.86667 -14.66667,-5.86667 -26.40002,0 -73.33338,65.7067 -46.34669,65.7067 -59.25336,112.05339 L 165.59981,345.6535 q 2.93333,-31.09335 27.57335,-111.46673 24.64001,-80.96004 41.65335,-110.29339 l 26.40002,9.38667 q -18.18668,40.48002 -25.22668,68.64004 -7.04001,27.57335 -12.32001,59.25336 50.45336,-72.16004 84.48005,-100.90672 34.02668,-29.33335 61.60003,-29.33335 29.92002,0 29.92002,29.92002 0,11.73334 -10.56001,46.34669 -9.97334,34.61335 -15.84001,54.56003 80.96005,-130.24007 144.90675,-130.24007 15.84001,0 25.22668,9.97334 9.38667,9.38667 9.38667,28.74668 0,18.77334 -22.29334,62.77337 Q 508.8,277.01346 508.8,288.7468 q 0,11.14668 4.69333,16.42668 4.69334,5.28 11.73334,5.28 15.25335,0 39.89336,-29.33335 z m 267.52022,39.30669 1.76,15.25334 q -2.34667,1.76 -54.56003,21.12001 -7.04,38.72003 -18.18668,76.26671 -10.56,38.13336 -21.70668,57.49337 -10.56,19.94668 -25.22668,39.30669 -29.33335,38.72002 -79.20004,38.72002 -24.64001,0 -39.30669,-15.25334 -14.66667,-15.25335 -14.66667,-41.65336 0,-101.49339 170.13342,-163.09342 l 31.68002,-111.46673 q -50.45336,75.68004 -90.93338,93.28005 -19.94668,9.38667 -42.24003,9.38667 -21.70667,0 -35.20002,-14.08001 -12.90667,-14.08 -12.90667,-41.06669 0,-26.98668 18.18668,-75.09337 18.77334,-48.69336 41.65335,-81.54671 l 28.74669,12.32 q -1.76,1.76 -16.42668,31.09335 -25.81335,53.3867 -25.81335,79.20005 0,25.81335 9.97334,34.61335 9.97334,8.80001 29.33335,8.80001 19.36001,0 43.41336,-22.88002 24.64001,-23.46668 75.68004,-92.10671 l 21.12001,12.32 q -4.69333,19.36001 -21.12001,70.40004 -15.84001,50.45336 -21.70668,77.44004 z m -84.48005,45.76003 q -36.96002,17.01334 -65.12003,38.72002 -52.80003,39.89335 -52.80003,77.44004 0,14.08001 8.21333,22.88001 8.21334,8.80001 20.53335,8.80001 58.6667,0 89.17338,-147.84008 z"
+     id="text12"
+     style="font-size:586.667px;line-height:0.9;font-family:'Marck Script';-inkscape-font-specification:'Marck Script';text-align:center;text-anchor:middle;fill:#ffffff"
+     aria-label="my" /><g
+     id="g11"
+     transform="translate(-3.1460103,17.026622)"><g
+       style="clip-rule:evenodd;fill:none;fill-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2"
+       id="g10"
+       transform="matrix(13.333368,0,0,13.333368,544.0081,660.93585)"><path
+         fill-rule="evenodd"
+         clip-rule="evenodd"
+         d="m 3,14 a 1,1 0 0 1 1,-1 h 12 a 3,3 0 0 0 3,-3 V 6 a 1,1 0 1 1 2,0 v 4 a 5,5 0 0 1 -5,5 H 4 A 1,1 0 0 1 3,14 Z"
+         fill="#0d0d0d"
+         id="path1-8"
+         style="fill:#ffffff;fill-opacity:1" /><path
+         fill-rule="evenodd"
+         clip-rule="evenodd"
+         d="m 3.293,14.707 a 1,1 0 0 1 0,-1.414 l 4,-4 a 1,1 0 0 1 1.414,1.414 L 5.414,14 8.707,17.293 a 1,1 0 1 1 -1.414,1.414 z"
+         fill="#0d0d0d"
+         id="path2-5"
+         style="fill:#ffffff;fill-opacity:1" /></g><path
+       d="m 327.86981,842.04 q -7.04,-7.04001 -7.04,-17.01335 0,-9.97334 7.04,-17.01334 7.04,-7.04 17.01334,-7.04 9.97334,0 17.01335,7.04 7.04,7.04 7.04,17.01334 0,9.97334 -7.04,17.01335 -7.04001,7.04 -17.01335,7.04 -9.97334,0 -17.01334,-7.04 z m 235.25377,-79.78672 14.08001,11.73334 q -14.08001,32.26669 -45.17336,51.6267 -31.09335,19.36001 -60.4267,19.36001 -28.74668,0 -48.10669,-18.18668 -18.77335,-18.18667 -18.77335,-49.86669 0,-31.68002 27.57335,-68.64004 27.57335,-36.96002 70.98671,-61.01337 44.00002,-24.05334 86.24005,-24.05334 5.86667,0 17.60001,1.17333 l -1.76,22.88001 q -64.53337,2.93334 -107.36006,39.30669 -42.24003,36.37336 -42.24003,77.44005 0,17.01334 10.56001,27.57334 10.56,10.56001 27.57335,10.56001 26.98668,0 69.2267,-39.89336 z"
+       id="text13"
+       style="font-size:586.667px;line-height:0.9;font-family:'Marck Script';-inkscape-font-specification:'Marck Script';text-align:center;text-anchor:middle;fill:#ffffff"
+       aria-label=".c" /></g></svg>
diff --git a/app/layout.tsx b/app/layout.tsx
index fcf18de..53e50cc 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -1,6 +1,8 @@
 import type { Metadata } from "next";
 import "@fontsource-variable/noto-sans-jp";
 import "@fontsource-variable/inconsolata";
+import "@fontsource/m-plus-rounded-1c/400.css";
+import "@fontsource/m-plus-rounded-1c/700.css";
 import "./globals.css";
 import { Navbar } from "./navbar";
 import { Sidebar } from "./sidebar";
@@ -11,8 +13,10 @@ import { SidebarMdProvider } from "./sidebar";
 import { RuntimeProvider } from "./terminal/runtime";
 
 export const metadata: Metadata = {
-  title: "Create Next App",
-  description: "Generated by create next app",
+  title: {
+    template: "%s - my.code();",
+    default: "my.code();",
+  },
 };
 
 export default function RootLayout({
@@ -20,7 +24,8 @@ export default function RootLayout({
 }: Readonly<{ children: ReactNode }>) {
   return (
     <html lang="ja">
-      <body className="w-screen h-screen">
+      <body className="w-screen h-screen bg-inherit! text-inherit! m-0!">
+        {/* mocha.css がbodyに背景色などを設定してしまうので、それを上書きしている */}
         <AutoAnonymousLogin />
         <SidebarMdProvider>
           <div className="drawer lg:drawer-open">
diff --git a/app/manifest.ts b/app/manifest.ts
new file mode 100644
index 0000000..5c42b34
--- /dev/null
+++ b/app/manifest.ts
@@ -0,0 +1,32 @@
+import type { MetadataRoute } from "next";
+import { metadata as pageMetadata } from "./page";
+
+export default function manifest(): MetadataRoute.Manifest {
+  return {
+    name: "my.code();",
+    short_name: "my.code();",
+    description: pageMetadata.description as string,
+    start_url: "/",
+    display: "standalone",
+    // TODO:
+    // background_color: "#fff",
+    // theme_color: "#fff",
+    icons: [
+      {
+        src: "/favicon.ico",
+        sizes: "any",
+        type: "image/x-icon",
+      },
+      {
+        src: "/icon.svg",
+        sizes: "any",
+        type: "image/svg+xml",
+      },
+      {
+        src: "/icon.png",
+        sizes: "512x512",
+        type: "image/png",
+      },
+    ],
+  };
+}
diff --git a/app/navbar.tsx b/app/navbar.tsx
index 2955d59..7a759e0 100644
--- a/app/navbar.tsx
+++ b/app/navbar.tsx
@@ -1,40 +1,77 @@
+"use client";
+
 import Link from "next/link";
 import { AccountMenu } from "./accountMenu";
 import { ThemeToggle } from "./[docs_id]/themeToggle";
+import { usePathname } from "next/navigation";
+import { pagesList } from "./pagesList";
+
+function PageTitle() {
+  const pathname = usePathname();
+
+  if(pathname === "/"){
+    return <>へようこそ</>;
+  }
+
+  const currentDocsId = pathname.replace(/^\//, "");
+  const currentGroup = pagesList.find((group) => currentDocsId.startsWith(group.id));
+  const currentPage = currentGroup?.pages.find((page) => `${currentGroup.id}-${page.id}` === currentDocsId);
+  if(currentPage){
+    return <>
+      <span className="text-base mr-2">{currentGroup?.lang}-{currentPage.id}.</span>
+      <span>{currentPage.title}</span>
+    </>
+  }
+
+  console.warn(`navbar page name is not defined for pathname ${pathname}`);
+  return null;
+}
 export function Navbar() {
+
   return (
     <>
-    {/* fixedのヘッダーの分だけスクロールするコンテンツを下に移動するためのdiv */}
-    <div className="h-16 lg:hidden" />
+      {/* fixedのヘッダーの分だけスクロールするコンテンツを下に移動するためのdiv */}
+      <div className="h-16 lg:hidden" />
 
-    <div className="h-16 navbar bg-base-200 w-full fixed lg:hidden flex gap-4 z-40 shadow-md">
-      <div className="flex-none">
-        {/* サイドバーを開閉するボタン */}
-        <label
-          htmlFor="drawer-toggle"
-          aria-label="open sidebar"
-          className="btn btn-square btn-ghost"
-        >
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            fill="none"
-            viewBox="0 0 24 24"
-            className="inline-block h-6 w-6 stroke-current"
+      <div className="h-16 navbar bg-base-300/60 w-full fixed lg:hidden flex gap-4 z-40 shadow-md backdrop-blur-xs">
+        <div className="flex-none">
+          {/* サイドバーを開閉するボタン */}
+          <label
+            htmlFor="drawer-toggle"
+            aria-label="open sidebar"
+            className="btn btn-square btn-ghost"
           >
-            <path
-              strokeLinecap="round"
-              strokeLinejoin="round"
-              strokeWidth="2"
-              d="M4 6h16M4 12h16M4 18h16"
-            />
-          </svg>
-        </label>
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              fill="none"
+              viewBox="0 0 24 24"
+              className="inline-block h-6 w-6 stroke-current"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth="2"
+                d="M4 6h16M4 12h16M4 18h16"
+              />
+            </svg>
+          </label>
+        </div>
+        {/* サイドバーが表示されていない場合のみ */}
+        <Link href="/" className="flex items-center">
+          <img
+            src="/icon.svg"
+            alt="my.code(); Logo"
+            className="inline-block w-8 h-8 mr-2"
+          />
+          <span className="font-bold text-xl font-mono">my.code();</span>
+        </Link>
+        <div className="flex-1 hidden md:inline text-nowrap overflow-hidden text-ellipsis font-bold text-xl">
+          <PageTitle />
+        </div>
+        <div className="flex-1 md:hidden" />
+        <ThemeToggle />
+        <AccountMenu />
       </div>
-      {/* サイドバーが常時表示されている場合のみ */}
-      <Link href="/" className="flex-1 font-bold text-xl">my.code();</Link>
-      <ThemeToggle />
-      <AccountMenu />
-    </div>
     </>
   );
 }
diff --git a/app/page.tsx b/app/page.tsx
index 97da6d4..c9788d1 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,19 +1,29 @@
+import { Metadata } from "next";
 import Link from "next/link";
 import { pagesList } from "./pagesList";
+import clsx from "clsx";
+
+export const metadata: Metadata = {
+  title: "my.code(); へようこそ",
+  description:
+    "環境構築不要、その場で実践。AIアシスタントとの対話履歴があなただけの教材へと進化する、新しいプログラミング学習サイトです。",
+};
 
 export default function Home() {
   return (
     <div className="p-4">
-      <div className="hero bg-gradient-to-br from-primary/20 via-secondary/10 to-accent/20 rounded-lg my-6 py-12">
+      <div className="hero bg-gradient-to-br from-primary/30 via-secondary/15 to-accent/30 rounded-lg my-6 py-8 sm:px-4">
         <div className="hero-content text-center">
-          <div className="max-w-2xl">
-            <h1 className="text-5xl font-bold mb-6">my.code(); へようこそ</h1>
-            <p className="text-lg mb-4">
-              my.code();
-              はプログラミング言語のチュートリアルを提供するウェブサイトです。
+          <div className="">
+            <h1 className="text-5xl font-bold mb-8">
+              <span className="font-mono mr-4">my.code();</span>
+              へようこそ
+            </h1>
+            <p className="text-3xl font-bold mb-4">
+              環境構築不要、その場で実践。
             </p>
-            <p className="text-base opacity-80">
-              ブラウザ上で動かせる実行環境とAIアシスタントで、あなたの学習を強力にサポートします。
+            <p className="text-lg opacity-80">
+              AIアシスタントとの対話履歴があなただけの教材へと進化する、新しいプログラミング学習サイトです。
             </p>
           </div>
         </div>
@@ -32,7 +42,10 @@ export default function Home() {
             <Link
               key={group.id}
               href={`${group.id}-${group.pages[0].id}`}
-              className="card card-border bg-base-100 card-md shadow-lg hover:shadow-xl transition-all hover:-translate-y-1"
+              className={clsx(
+                "card card-border card-md bg-base-200 shadow-lg",
+                "hover:shadow-xl transition-all hover:-translate-y-1",
+              )}
             >
               <div className="card-body">
                 <h2 className="card-title">{group.lang}</h2>
@@ -52,41 +65,42 @@ export default function Home() {
           gridTemplateColumns: "repeat(auto-fit, minmax(16rem, 1fr))",
         }}
       >
-        <div className="card bg-gradient-to-br from-primary/10 to-primary/5 shadow-lg hover:shadow-xl transition-shadow">
+        <div className="card bg-gradient-to-br from-primary/30 to-primary/15 shadow-lg hover:shadow-xl transition-shadow">
           <div className="card-body">
             <h3 className="card-title text-primary">📚 豊富なチュートリアル</h3>
             <p>
               my.code();
-              ではさまざまなプログラミング言語やフレームワークのチュートリアルを提供しています。
+              では数多くのプログラミング言語のチュートリアルを提供しています。
               初心者向けの基礎から上級者向けの応用まで、幅広いレベルに対応したチュートリアルが揃っています。
+              あなたがまだ触ったことのない言語も、気軽に体験してみることができます。
             </p>
           </div>
         </div>
-        <div className="card bg-gradient-to-br from-secondary/10 to-secondary/5 shadow-lg hover:shadow-xl transition-shadow">
+        <div className="card bg-gradient-to-br from-secondary/30 to-secondary/15 shadow-lg hover:shadow-xl transition-shadow">
           <div className="card-body">
             <h3 className="card-title text-secondary">
               ⚡ すぐに動かせる実行環境
             </h3>
             <p>
-              my.code();
-              ではブラウザ上でコードを実行できる環境を整備しており、環境構築の手間なくすぐにコードを実行することができます。
+              環境構築の手間なくブラウザ上ですぐにコードを実行することができます。
               チュートリアル内のサンプルコードはそのまま実行するだけでなく、自由に編集して試すことも可能です。
+              さらに、エラーメッセージの解説やエラー箇所のハイライト表示など、初心者に優しい機能も充実しています。
             </p>
           </div>
         </div>
-        <div className="card bg-gradient-to-br from-accent/10 to-accent/5 shadow-lg hover:shadow-xl transition-shadow">
+        <div className="card bg-gradient-to-br from-accent/30 to-accent/15 shadow-lg hover:shadow-xl transition-shadow">
           <div className="card-body">
             <h3 className="card-title text-accent">
               🤖 AIアシスタントによるサポート
             </h3>
             <p>
-              my.code(); ではAIアシスタントが学習をサポートします。
-              チュートリアルを読んでいてわからないことがあれば、AIアシスタントに質問してみてください。
-              さらに、実行したサンプルコードの解説やエラーの原因調査、改善提案まで、AIアシスタントがあなたの学習を強力に支援します。
+              わからないことがあれば、AIアシスタントに質問してみてください。
+              AIとの対話履歴により教材そのものがアップデートされ、あなた専用の学習コンテンツとして蓄積・進化します。
+              実行したコードの解説やエラーの原因調査、改善提案まで、AIアシスタントがあなたの学習を強力に支援します。
             </p>
           </div>
         </div>
-        <div className="card bg-gradient-to-br from-info/10 to-info/5 shadow-lg hover:shadow-xl transition-shadow">
+        <div className="card bg-gradient-to-br from-info/30 to-info/15 shadow-lg hover:shadow-xl transition-shadow">
           <div className="card-body">
             <h3 className="card-title text-info">✏️ 実践的な練習問題</h3>
             <p>
diff --git a/app/sidebar.tsx b/app/sidebar.tsx
index 4ee2f06..6347af1 100644
--- a/app/sidebar.tsx
+++ b/app/sidebar.tsx
@@ -13,6 +13,7 @@ import {
   useState,
 } from "react";
 import { DynamicMarkdownSection } from "./[docs_id]/pageContent";
+import clsx from "clsx";
 
 export interface ISidebarMdContext {
   loadedDocsId: string;
@@ -107,11 +108,15 @@ export function Sidebar() {
 
   return (
     <div className="bg-base-200 h-full w-80 overflow-y-auto">
-      {/* todo: 背景色ほんとにこれでいい？ */}
       <h2 className="hidden lg:flex flex-row items-center p-4 gap-2">
-        {/* サイドバーが常時表示されている場合のみ */}
-        <Link href="/" className="flex-1 text-xl font-bold">
-          my.code();
+        {/* サイドバーが常時表示されているlg以上の場合のみ */}
+        <Link href="/" className="flex-1 flex items-center">
+          <img
+            src="/icon.svg"
+            alt="my.code(); Logo"
+            className="inline-block w-8 h-8 mr-1"
+          />
+          <span className="text-xl font-bold font-mono">my.code();</span>
         </Link>
         <ThemeToggle />
         <AccountMenu />
@@ -158,7 +163,13 @@ export function Sidebar() {
               <ul>
                 {group.pages.map((page) => (
                   <li key={page.id}>
-                    <Link href={`${group.id}-${page.id}`}>
+                    <Link
+                      href={`${group.id}-${page.id}`}
+                      className={clsx(
+                        `${group.id}-${page.id}` === currentDocsId &&
+                          "menu-active"
+                      )}
+                    >
                       <span className="mr-0">{page.id}.</span>
                       {page.title}
                     </Link>
diff --git a/app/terminal/editor.css b/app/terminal/editor.css
deleted file mode 100644
index e50868b..0000000
--- a/app/terminal/editor.css
+++ /dev/null
@@ -1,11 +0,0 @@
-.embedded-editor > .ace_gutter {
-  border-bottom-left-radius: 0.5rem;
-}
-.embedded-editor > .ace_scroller {
-  border-bottom-right-radius: 0.5rem;
-  border-top-right-radius: 0.5rem;
-}
-.embedded-editor > .ace_editor {
-  border-bottom-left-radius: 0.5rem;
-  border-bottom-right-radius: 0.5rem;
-}
diff --git a/app/terminal/editor.tsx b/app/terminal/editor.tsx
index 70ebd3f..a191512 100644
--- a/app/terminal/editor.tsx
+++ b/app/terminal/editor.tsx
@@ -1,13 +1,20 @@
 "use client";
 
-import dynamic from "next/dynamic";
+import { lazy, Suspense, useEffect, useState } from "react";
+import clsx from "clsx";
+import { useChangeTheme } from "../[docs_id]/themeToggle";
+import { useEmbedContext } from "./embedContext";
+import { langConstants } from "./runtime";
+import { MarkdownLang } from "@/[docs_id]/styledSyntaxHighlighter";
+
 // https://github.com/securingsincity/react-ace/issues/27 により普通のimportができない
-const AceEditor = dynamic(
-  async () => {
+const AceEditor = lazy(async () => {
+  if (typeof window !== "undefined") {
     const ace = await import("react-ace");
+    // snippetを有効化するにはsnippetもimportする必要がある: import "ace-builds/src-min-noconflict/snippets/python";
     // テーマは色分けが今のTerminal側のハイライト(highlight.js)の実装に近いものを適当に選んだ
     await import("ace-builds/src-min-noconflict/theme-tomorrow");
-    await import("ace-builds/src-min-noconflict/theme-twilight");
+    await import("ace-builds/src-min-noconflict/theme-tomorrow_night");
     await import("ace-builds/src-min-noconflict/ext-language_tools");
     await import("ace-builds/src-min-noconflict/ext-searchbox");
     await import("ace-builds/src-min-noconflict/mode-python");
@@ -19,16 +26,10 @@ const AceEditor = dynamic(
     await import("ace-builds/src-min-noconflict/mode-csv");
     await import("ace-builds/src-min-noconflict/mode-text");
     return ace;
-  },
-  { ssr: false }
-);
-import "./editor.css";
-import { useEffect } from "react";
-import clsx from "clsx";
-import { useChangeTheme } from "../[docs_id]/themeToggle";
-import { useEmbedContext } from "./embedContext";
-import { langConstants } from "./runtime";
-// snippetを有効化するにはsnippetもimportする必要がある: import "ace-builds/src-min-noconflict/snippets/python";
+  } else {
+    throw new Error("should not try SSR");
+  }
+});
 
 // mode-xxxx.js のファイル名と、AceEditorの mode プロパティの値が対応する
 export type AceLang =
@@ -40,7 +41,7 @@ export type AceLang =
   | "json"
   | "csv"
   | "text";
-export function getAceLang(lang: string | undefined): AceLang {
+export function getAceLang(lang: MarkdownLang | undefined): AceLang {
   // Markdownで指定される可能性のある言語名からAceLangを取得
   switch (lang) {
     case "python":
@@ -62,13 +63,16 @@ export function getAceLang(lang: string | undefined): AceLang {
       return "json";
     case "csv":
       return "csv";
+    case "sh":
+    case "bash":
     case "text":
     case "txt":
+    case undefined:
+      console.warn(`Ace editor mode not implemented for language: ${lang}`);
       return "text";
     default:
-      console.warn(
-        `Unsupported language for ace editor: ${lang}, fallback to text mode.`
-      );
+      lang satisfies never;
+      console.warn(`Language not listed in MarkdownLang: ${lang}`);
       return "text";
   }
 }
@@ -89,9 +93,20 @@ export function EditorComponent(props: EditorProps) {
     }
   }, [files, props.filename, props.initContent, writeFile]);
 
+  const [fontSize, setFontSize] = useState<number>();
+  const [initAce, setInitAce] = useState(false);
+  useEffect(() => {
+    setFontSize(
+      parseFloat(getComputedStyle(document.documentElement).fontSize)
+    ); // 1rem
+    setInitAce(true);
+  }, []);
+  // 最小8行 or 初期内容+1行
+  const editorHeight = Math.max(props.initContent.split("\n").length + 1, 8);
+
   return (
-    <div className="embedded-editor">
-      <div className="flex flex-row items-center">
+    <div className="border border-accent border-2 shadow-md m-2 rounded-box overflow-hidden">
+      <div className="flex flex-row items-center bg-base-200">
         <div className="font-mono text-sm mt-2 mb-1 ml-4 mr-2">
           {props.filename}
           {props.readonly && <span className="font-sans ml-2">(編集不可)</span>}
@@ -127,24 +142,55 @@ export function EditorComponent(props: EditorProps) {
           元の内容に戻す
         </button>
       </div>
-      <AceEditor
-        name={`ace-editor-${props.filename}`}
-        mode={props.language}
-        theme={theme}
-        tabSize={langConstants(props.language || "text").tabSize}
-        width="100%"
-        height={
-          Math.max((props.initContent.split("\n").length + 2) * 14, 128) + "px"
-        }
-        className="font-mono!" // Aceのデフォルトフォントを上書き
-        readOnly={props.readonly}
-        fontSize={14}
-        enableBasicAutocompletion={true}
-        enableLiveAutocompletion={true}
-        enableSnippets={false}
-        value={code}
-        onChange={(code: string) => writeFile({ [props.filename]: code })}
-      />
+      {fontSize !== undefined && initAce ? (
+        <Suspense
+          fallback={
+            <FallbackPre editorHeight={editorHeight}>{code}</FallbackPre>
+          }
+        >
+          <AceEditor
+            name={`ace-editor-${props.filename}`}
+            mode={props.language}
+            theme={theme}
+            tabSize={langConstants(props.language || "text").tabSize}
+            width="100%"
+            height={editorHeight * (fontSize + 1) + "px"}
+            className="font-mono!" // Aceのデフォルトフォントを上書き
+            readOnly={props.readonly}
+            fontSize={fontSize}
+            showPrintMargin={false}
+            enableBasicAutocompletion={false}
+            enableLiveAutocompletion={false}
+            enableSnippets={false}
+            value={code}
+            onChange={(code: string) => writeFile({ [props.filename]: code })}
+          />
+        </Suspense>
+      ) : (
+        <FallbackPre editorHeight={editorHeight}>{code}</FallbackPre>
+      )}
     </div>
   );
 }
+
+function FallbackPre({
+  children,
+  editorHeight,
+}: {
+  children: string;
+  editorHeight: number;
+}) {
+  // AceEditorはなぜかline-heightが小さい
+  // fontSize + 1px になるっぽい?
+  return (
+    <pre
+      className="font-mono overflow-auto bg-base-300 px-2 cursor-wait"
+      style={{
+        height: `calc((1em + 1px) * ${editorHeight})`,
+        lineHeight: "calc(1em + 1px)",
+      }}
+    >
+      {children}
+    </pre>
+  );
+}
diff --git a/app/terminal/exec.tsx b/app/terminal/exec.tsx
index 73c1448..1307080 100644
--- a/app/terminal/exec.tsx
+++ b/app/terminal/exec.tsx
@@ -11,6 +11,7 @@ import { writeOutput } from "./repl";
 import { useEffect, useState } from "react";
 import { useEmbedContext } from "./embedContext";
 import { RuntimeLang, useRuntime } from "./runtime";
+import clsx from "clsx";
 
 interface ExecProps {
   /*
@@ -72,10 +73,10 @@ export function ExecFile(props: ExecProps) {
   ]);
 
   return (
-    <div className="relative">
-      <div>
+    <div className="border border-accent border-2 shadow-md m-2 rounded-box overflow-hidden relative">
+      <div className="bg-base-200">
         <button
-          className="btn btn-soft btn-primary rounded-tl-lg rounded-none"
+          className="btn btn-soft btn-accent rounded-none"
           onClick={() => {
             if (!ready) {
               clearTerminal(terminalInstanceRef.current!);
@@ -95,8 +96,28 @@ export function ExecFile(props: ExecProps) {
           {getCommandlineStr?.(props.filenames)}
         </code>
       </div>
-      <div className="bg-base-300 p-4 pt-2 rounded-b-lg">
-        <div ref={terminalRef} />
+      <div className="bg-base-300 p-4 pt-2 relative">
+        {/*
+      ターミナル表示の初期化が完了するまでの間、ターミナルは隠し、内容をそのまま表示する。
+      可能な限りレイアウトが崩れないようにするため & SSRでも内容が読めるように(SEO?)という意味もある
+      */}
+        <pre
+          className={clsx(
+            "font-mono overflow-auto cursor-wait",
+            "min-h-26", // xterm.jsで5行分の高さ
+            termReady && "hidden"
+          )}
+        >
+          {props.content}
+        </pre>
+        <div
+          className={clsx(
+            !termReady &&
+              /* "hidden" だとterminalがdivのサイズを取得しようとしたときにバグる*/
+              "absolute invisible"
+          )}
+          ref={terminalRef}
+        />
       </div>
       {executionState !== "idle" && (
         <div className="absolute z-10 inset-0 cursor-wait" />
diff --git a/app/terminal/layout.tsx b/app/terminal/layout.tsx
new file mode 100644
index 0000000..0da01b7
--- /dev/null
+++ b/app/terminal/layout.tsx
@@ -0,0 +1,17 @@
+import { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "Runtime Test Page",
+  robots: {
+    index: false,
+    follow: false,
+  },
+};
+
+export default function TerminalLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return children;
+}
diff --git a/app/terminal/page.tsx b/app/terminal/page.tsx
index 3125790..4f57ac9 100644
--- a/app/terminal/page.tsx
+++ b/app/terminal/page.tsx
@@ -1,4 +1,5 @@
 "use client";
+
 import { Heading } from "@/[docs_id]/markdown";
 import "mocha/mocha.css";
 import { Fragment, useEffect, useRef, useState } from "react";
@@ -13,6 +14,7 @@ import { ReplTerminal } from "./repl";
 import { EditorComponent, getAceLang } from "./editor";
 import { ExecFile } from "./exec";
 import { useTypeScript } from "./typescript/runtime";
+import { useTerminal } from "./terminal";
 
 export default function RuntimeTestPage() {
   return (
@@ -30,13 +32,16 @@ export default function RuntimeTestPage() {
               className="tab"
               aria-label={lang}
             />
-            <div className="tab-content border-base-300 bg-base-100 p-4">
+            <div className="tab-content border-base-300 bg-base-200 p-4">
               <RuntimeSample lang={lang as RuntimeLang} config={config} />
             </div>
           </Fragment>
         ))}
       </div>
 
+      <Heading level={2}>Xterm.js Colors</Heading>
+      <AnsiColorSample />
+
       <Heading level={2}>自動テスト</Heading>
       <MochaTest />
     </div>
@@ -52,7 +57,7 @@ interface SampleConfig {
 const sampleConfig: Record<RuntimeLang, SampleConfig> = {
   python: {
     repl: true,
-    replInitContent: '>>> print("Hello, World!")\nHello, World!',
+    replInitContent: '>>> print("Hello, World!")\x1b[0m\nHello, World!',
     editor: {
       "main.py": 'print("Hello, World!")',
     },
@@ -60,7 +65,8 @@ const sampleConfig: Record<RuntimeLang, SampleConfig> = {
   },
   ruby: {
     repl: true,
-    replInitContent: 'irb(main):001:0> puts "Hello, World!"\nHello, World!',
+    replInitContent:
+      'irb(main):001:0> puts "Hello, World!"\x1b[0m\nHello, World!',
     editor: {
       "main.rb": 'puts "Hello, World!"',
     },
@@ -68,7 +74,7 @@ const sampleConfig: Record<RuntimeLang, SampleConfig> = {
   },
   javascript: {
     repl: true,
-    replInitContent: '> console.log("Hello, World!");\nHello, World!',
+    replInitContent: '> console.log("Hello, World!");\x1b[0m\nHello, World!',
     editor: {
       "main.js": 'console.log("Hello, World!");',
     },
@@ -77,7 +83,8 @@ const sampleConfig: Record<RuntimeLang, SampleConfig> = {
   typescript: {
     repl: false,
     editor: {
-      "main.ts": 'function greet(name: string): void {\n  console.log("Hello, " + name + "!");\n}\n\ngreet("World");',
+      "main.ts":
+        'function greet(name: string): void {\x1b[0m\n  console.log("Hello, " + name + "!");\x1b[0m\n}\x1b[0m\n\x1b[0m\ngreet("World");',
     },
     exec: ["main.ts"],
   },
@@ -104,7 +111,7 @@ function RuntimeSample({
   config: SampleConfig;
 }) {
   return (
-    <div className="flex flex-col gap-4">
+    <div className="flex flex-col">
       {config.repl && (
         <ReplTerminal
           terminalId="1"
@@ -128,6 +135,44 @@ function RuntimeSample({
   );
 }
 
+function AnsiColorSample() {
+  const { terminalRef, terminalInstanceRef } = useTerminal({
+    getRows: () => 6,
+    onReady: () => {
+      for (let i = 0; i <= 7; i++) {
+        terminalInstanceRef.current!.write(`\x1b[0;${30 + i}m${30 + i}`);
+      }
+      terminalInstanceRef.current!.write("\x1b[0m\n");
+      terminalInstanceRef.current!.write("\x1b[1m1;");
+      for (let i = 0; i <= 7; i++) {
+        terminalInstanceRef.current!.write(`\x1b[1;${30 + i}m${30 + i}`);
+      }
+      terminalInstanceRef.current!.write("\x1b[0m\n");
+      for (let i = 0; i <= 7; i++) {
+        terminalInstanceRef.current!.write(`\x1b[0;${90 + i}m${90 + i}`);
+      }
+      terminalInstanceRef.current!.write("\x1b[0m\n");
+      terminalInstanceRef.current!.write("\x1b[1m1;");
+      for (let i = 0; i <= 7; i++) {
+        terminalInstanceRef.current!.write(`\x1b[1;${90 + i}m${90 + i}`);
+      }
+      terminalInstanceRef.current!.write("\x1b[0m\n");
+      for (let i = 0; i <= 7; i++) {
+        terminalInstanceRef.current!.write(`\x1b[0;${40 + i}m${40 + i}`);
+      }
+      terminalInstanceRef.current!.write("\x1b[0m\n");
+      for (let i = 0; i <= 7; i++) {
+        terminalInstanceRef.current!.write(`\x1b[0;${100 + i}m${100 + i}`);
+      }
+    },
+  });
+  return (
+    <div className="bg-base-300 border border-accent border-2 shadow-md m-2 p-4 pr-1 rounded-box relative h-max">
+      <div ref={terminalRef} />
+    </div>
+  );
+}
+
 function MochaTest() {
   const pyodide = usePyodide();
   const ruby = useRuby();
@@ -155,9 +200,9 @@ function MochaTest() {
   filesRef.current = files;
 
   const runTest = async () => {
-    if(typeof window !== "undefined") {
+    if (typeof window !== "undefined") {
       setMochaState("running");
-      
+
       await import("mocha/mocha.js");
 
       mocha.setup("bdd");
@@ -177,7 +222,7 @@ function MochaTest() {
     <div className="border-1 border-transparent translate-x-0">
       {/* margin collapseさせない & fixedの対象をviewportではなくこのdivにする */}
       {mochaState === "idle" ? (
-        <button className="btn btn-primary mt-4" onClick={runTest}>
+        <button className="btn btn-accent mt-4" onClick={runTest}>
           テストを実行
         </button>
       ) : mochaState === "running" ? (
diff --git a/app/terminal/repl.tsx b/app/terminal/repl.tsx
index 4134580..89bb31a 100644
--- a/app/terminal/repl.tsx
+++ b/app/terminal/repl.tsx
@@ -14,6 +14,7 @@ import {
 import type { Terminal } from "@xterm/xterm";
 import { useEmbedContext } from "./embedContext";
 import { emptyMutex, langConstants, RuntimeLang, useRuntime } from "./runtime";
+import clsx from "clsx";
 
 export interface ReplOutput {
   type: "stdout" | "stderr" | "error" | "return" | "trace" | "system"; // 出力の種類
@@ -309,7 +310,8 @@ export function ReplTerminal({
       runtimeReady &&
       initCommandState === "triggered"
     ) {
-      // ユーザーがクリックした時(triggered) && ランタイムが準備できた時に、実際にinitCommandを実行する(executing)      setInitCommandState("executing");
+      // ユーザーがクリックした時(triggered) && ランタイムが準備できた時に、実際にinitCommandを実行する(executing)
+      setInitCommandState("executing");
       (async () => {
         if (initCommand) {
           // 初期化時に実行するコマンドがある場合はそれを実行
@@ -352,7 +354,20 @@ export function ReplTerminal({
   ]);
 
   return (
-    <div className={"relative h-max"}>
+    <div className="bg-base-300 border border-accent border-2 shadow-md m-2 p-4 pr-1 rounded-box relative h-max">
+      {/*
+      ターミナル表示の初期化が完了するまでの間、ターミナルは隠し、内容をそのまま表示する。
+      可能な限りレイアウトが崩れないようにするため & SSRでも内容が読めるように(SEO?)という意味もある
+      */}
+      <pre
+        className={clsx(
+          "font-mono overflow-auto cursor-wait",
+          "min-h-26", // xterm.jsで5行分の高さ
+          initCommandState !== "initializing" && "hidden"
+        )}
+      >
+        {initContent + "\n\n"}
+      </pre>
       {terminalInstanceRef.current &&
         termReady &&
         initCommandState === "idle" && (
@@ -376,7 +391,14 @@ export function ReplTerminal({
         initCommandState === "executing") && (
         <div className="absolute z-10 inset-0 cursor-wait" />
       )}
-      <div ref={terminalRef} />
+      <div
+        className={clsx(
+          initCommandState === "initializing" &&
+            /* "hidden" だとterminalがdivのサイズを取得しようとしたときにバグる*/
+            "absolute invisible"
+        )}
+        ref={terminalRef}
+      />
     </div>
   );
 }
diff --git a/app/terminal/runtime.tsx b/app/terminal/runtime.tsx
index 2778ca6..8789dcf 100644
--- a/app/terminal/runtime.tsx
+++ b/app/terminal/runtime.tsx
@@ -8,6 +8,7 @@ import { RubyContext, useRuby } from "./worker/ruby";
 import { JSEvalContext, useJSEval } from "./worker/jsEval";
 import { WorkerProvider } from "./worker/runtime";
 import { TypeScriptProvider, useTypeScript } from "./typescript/runtime";
+import { MarkdownLang } from "@/[docs_id]/styledSyntaxHighlighter";
 
 /**
  * Common runtime context interface for different languages
@@ -24,7 +25,10 @@ export interface RuntimeContext {
   checkSyntax?: (code: string) => Promise<SyntaxStatus>;
   splitReplExamples?: (content: string) => ReplCommand[];
   // file
-  runFiles: (filenames: string[], files: Readonly<Record<string, string>>) => Promise<ReplOutput[]>;
+  runFiles: (
+    filenames: string[],
+    files: Readonly<Record<string, string>>
+  ) => Promise<ReplOutput[]>;
   getCommandlineStr?: (filenames: string[]) => string;
 }
 export interface LangConstants {
@@ -41,7 +45,7 @@ export type RuntimeLang =
   | "typescript";
 
 export function getRuntimeLang(
-  lang: string | undefined
+  lang: MarkdownLang | undefined
 ): RuntimeLang | undefined {
   // markdownで指定される可能性のある言語名からRuntimeLangを取得
   switch (lang) {
@@ -60,8 +64,18 @@ export function getRuntimeLang(
     case "typescript":
     case "ts":
       return "typescript";
+    case "bash":
+    case "sh":
+    case "json":
+    case "csv":
+    case "text":
+    case "txt":
+    case undefined:
+      // unsupported languages
+      return undefined;
     default:
-      console.warn(`Unsupported language for runtime: ${lang}`);
+      lang satisfies never;
+      console.warn(`Language not listed in MarkdownLang: ${lang}`);
       return undefined;
   }
 }
diff --git a/app/terminal/terminal.tsx b/app/terminal/terminal.tsx
index 0ce015b..f1c40b3 100644
--- a/app/terminal/terminal.tsx
+++ b/app/terminal/terminal.tsx
@@ -53,6 +53,36 @@ export function showCursor(term: Terminal) {
 
 export const systemMessageColor = chalk.blue.bold.italic;
 
+function computeTerminalTheme() {
+  const fromCSS = (varName: string) =>
+    window.getComputedStyle(document.body).getPropertyValue(varName);
+  // "--color-" + color_name のように文字列を分割するとTailwindCSSが認識せずCSSの値として出力されない場合があるので注意
+  return {
+    // DaisyUIの変数を使用してテーマを設定している
+    background: fromCSS("--color-base-300"),
+    foreground: fromCSS("--color-base-content"),
+    cursor: fromCSS("--color-primary"),
+    selectionBackground: fromCSS("--color-primary"),
+    selectionForeground: fromCSS("--color-primary-content"),
+    black: fromCSS("--color-black"),
+    red: fromCSS("--color-red-600"),
+    green: fromCSS("--color-green-700"),
+    yellow: fromCSS("--color-yellow-700"),
+    blue: fromCSS("--color-indigo-600"),
+    magenta: fromCSS("--color-fuchsia-500"),
+    cyan: fromCSS("--color-cyan-600"),
+    white: fromCSS("--color-neutral-100"),
+    brightBlack: fromCSS("--color-neutral-500"),
+    brightRed: fromCSS("--color-red-400"),
+    brightGreen: fromCSS("--color-green-500"),
+    brightYellow: fromCSS("--color-yellow-500"),
+    brightBlue: fromCSS("--color-indigo-400"),
+    brightMagenta: fromCSS("--color-fuchsia-300"),
+    brightCyan: fromCSS("--color-cyan-400"),
+    brightWhite: fromCSS("--color-white"),
+  } as const;
+}
+
 interface TerminalProps {
   getRows?: (cols: number) => number;
   onReady?: () => void;
@@ -72,57 +102,46 @@ export function useTerminal(props: TerminalProps) {
   useEffect(() => {
     if (typeof window !== "undefined") {
       const abortController = new AbortController();
-      // globals.cssでフォントを指定し読み込んでいるが、
-      // それが読み込まれる前にterminalを初期化してしまうとバグる。
+      const resizeTerminal = () => {
+        // fitAddon.fit();
+        const dims = fitAddonRef.current?.proposeDimensions();
+        if (dims && !isNaN(dims.cols)) {
+          const rows = Math.max(5, getRowsRef.current?.(dims.cols) ?? 0);
+          terminalInstanceRef.current?.resize(dims.cols, rows);
+        }
+      }
+      /*
+      globals.cssでフォントを指定し読み込んでいるが、
+      それが読み込まれる前にterminalを初期化してしまうとバグるので、
+      ここで fonts.load() をawaitしている。
+      */
       Promise.all([
         import("@xterm/xterm"),
         import("@xterm/addon-fit"),
-        document.fonts.load("0.875rem Inconsolata Variable"),
+        document.fonts.load("1rem Inconsolata Variable"),
       ]).then(([{ Terminal }, { FitAddon }]) => {
         if (!abortController.signal.aborted) {
-          const fromCSS = (varName: string) =>
-            window.getComputedStyle(document.body).getPropertyValue(varName);
-          // "--color-" + color_name のように文字列を分割するとTailwindCSSが認識せずCSSの値として出力されない場合があるので注意
           const term = new Terminal({
             cursorBlink: true,
             convertEol: true,
             cursorStyle: "bar",
+            cursorWidth: 2,
             cursorInactiveStyle: "none",
-            fontSize: 14,
-            lineHeight: 1.4,
+            fontSize: parseFloat(
+              getComputedStyle(document.documentElement).fontSize
+            ), // 1rem
+            lineHeight: 1.2,
             letterSpacing: 0,
-            fontFamily: "'Inconsolata Variable','Noto Sans JP Variable'",
-            theme: {
-              // DaisyUIの変数を使用してテーマを設定している
-              // TODO: ダークテーマ/ライトテーマを切り替えたときに再設定する?
-              background: fromCSS("--color-base-300"),
-              foreground: fromCSS("--color-base-content"),
-              cursor: fromCSS("--color-base-content"),
-              selectionBackground: fromCSS("--color-primary"),
-              selectionForeground: fromCSS("--color-primary-content"),
-              black: fromCSS("--color-black"),
-              brightBlack: fromCSS("--color-neutral-500"),
-              red: fromCSS("--color-red-600"),
-              brightRed: fromCSS("--color-red-400"),
-              green: fromCSS("--color-green-600"),
-              brightGreen: fromCSS("--color-green-400"),
-              yellow: fromCSS("--color-yellow-700"),
-              brightYellow: fromCSS("--color-yellow-400"),
-              blue: fromCSS("--color-indigo-600"),
-              brightBlue: fromCSS("--color-indigo-400"),
-              magenta: fromCSS("--color-fuchsia-600"),
-              brightMagenta: fromCSS("--color-fuchsia-400"),
-              cyan: fromCSS("--color-cyan-600"),
-              brightCyan: fromCSS("--color-cyan-400"),
-              white: fromCSS("--color-base-100"),
-              brightWhite: fromCSS("--color-white"),
-            },
+            fontFamily:
+              "'Inconsolata Variable', 'Noto Sans JP', 'Noto Sans CJK JP', 'Source Han Sans JP', '源ノ角ゴシック', 'Noto Sans JP Variable', monospace",
+            theme: computeTerminalTheme(),
           });
           terminalInstanceRef.current = term;
 
           fitAddonRef.current = new FitAddon();
           term.loadAddon(fitAddonRef.current);
-          // fitAddon.fit();
+          // fitAddonRef.current.fit();
+          resizeTerminal();
 
           term.open(terminalRef.current);
 
@@ -151,14 +170,7 @@ export function useTerminal(props: TerminalProps) {
         }
       });
 
-      const observer = new ResizeObserver(() => {
-        // fitAddon.fit();
-        const dims = fitAddonRef.current?.proposeDimensions();
-        if (dims && !isNaN(dims.cols)) {
-          const rows = Math.max(5, getRowsRef.current?.(dims.cols) ?? 0);
-          terminalInstanceRef.current?.resize(dims.cols, rows);
-        }
-      });
+      const observer = new ResizeObserver(resizeTerminal);
       observer.observe(terminalRef.current);
 
       return () => {
@@ -179,16 +191,8 @@ export function useTerminal(props: TerminalProps) {
   // テーマが変わったときにterminalのテーマを更新する
   useEffect(() => {
     if (terminalInstanceRef.current) {
-      const fromCSS = (varName: string) =>
-        window.getComputedStyle(document.body).getPropertyValue(varName);
-
       terminalInstanceRef.current.options = {
-        theme: {
-          background: fromCSS(
-            theme === "tomorrow" ? "--color-base-300" : "--color-neutral-900"
-          ),
-          foreground: fromCSS("--color-base-content"),
-        },
+        theme: computeTerminalTheme(),
       };
     }
   }, [theme]);
diff --git a/package-lock.json b/package-lock.json
index a053403..46bb386 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,6 +10,7 @@
       "dependencies": {
         "@fontsource-variable/inconsolata": "^5.2.7",
         "@fontsource-variable/noto-sans-jp": "^5.2.6",
+        "@fontsource/m-plus-rounded-1c": "^5.2.9",
         "@google/genai": "^1.21.0",
         "@opennextjs/cloudflare": "^1.7.1",
         "@ruby/wasm-wasi": "^2.7.2",
@@ -8923,6 +8924,15 @@
         "url": "https://github.com/sponsors/ayuhito"
       }
     },
+    "node_modules/@fontsource/m-plus-rounded-1c": {
+      "version": "5.2.9",
+      "resolved": "https://registry.npmjs.org/@fontsource/m-plus-rounded-1c/-/m-plus-rounded-1c-5.2.9.tgz",
+      "integrity": "sha512-zvgI9lzoZNtRxD3JKcECfPJDRGJfNpFEsWBkGQkBEOKM0pArTmjTwsTPCz3UttNX6EvQyYlSqklhXnLt056cAA==",
+      "license": "OFL-1.1",
+      "funding": {
+        "url": "https://github.com/sponsors/ayuhito"
+      }
+    },
     "node_modules/@google/genai": {
       "version": "1.21.0",
       "resolved": "https://registry.npmjs.org/@google/genai/-/genai-1.21.0.tgz",
diff --git a/package.json b/package.json
index e48da7b..5f50b18 100644
--- a/package.json
+++ b/package.json
@@ -18,6 +18,7 @@
   "dependencies": {
     "@fontsource-variable/inconsolata": "^5.2.7",
     "@fontsource-variable/noto-sans-jp": "^5.2.6",
+    "@fontsource/m-plus-rounded-1c": "^5.2.9",
     "@google/genai": "^1.21.0",
     "@opennextjs/cloudflare": "^1.7.1",
     "@ruby/wasm-wasi": "^2.7.2",
diff --git a/public/docs/python-1.md b/public/docs/python-1.md
index d3e744d..17010e2 100644
--- a/public/docs/python-1.md
+++ b/public/docs/python-1.md
@@ -49,7 +49,7 @@ macOSでは、**Homebrew** というパッケージマネージャを使って
 ### ブラウザで今すぐ試す
 
 このウェブサイトではドキュメント内にPython3の実行環境を埋め込んでいます。
-以下のように青枠で囲われたコード例には自由にPythonコードを書いて試すことができます。気軽に利用してください。
+以下のように緑枠で囲われたコード例には自由にPythonコードを書いて試すことができます。気軽に利用してください。
 
 ```python-repl:1
 >>> message = "Hello, Python!"