diff --git a/bun.lockb b/bun.lockb
index e069a49d..bb9cffcf 100755
Binary files a/bun.lockb and b/bun.lockb differ
diff --git a/common/consts.ts b/common/consts.ts
index 17098809..bb92cc12 100644
--- a/common/consts.ts
+++ b/common/consts.ts
@@ -10,4 +10,20 @@ export const DAY_TO_JAPANESE_MAP = new Map<Day, string>([
   ["sun", "日"],
 ]);
 
-export const ACTIVE_DAYS = ["mon", "tue", "wed", "thu", "fri", "sat"] as const;
+export const ACTIVE_DAYS = ["mon", "tue", "wed", "thu", "fri"] as const;
+
+export const sortSlots = (
+  slots: {
+    day: "mon" | "tue" | "wed" | "thu" | "fri" | "sat" | "sun" | "other";
+    period: number;
+  }[],
+) => {
+  const order = ["mon", "tue", "wed", "thu", "fri", "sat", "sun", "other"];
+  return slots.sort((a, b) => {
+    const dayComparison = order.indexOf(a.day) - order.indexOf(b.day);
+    if (dayComparison !== 0) {
+      return dayComparison;
+    }
+    return a.period - b.period;
+  });
+};
diff --git a/package-lock.json b/package-lock.json
deleted file mode 100644
index 6ddf1e62..00000000
--- a/package-lock.json
+++ /dev/null
@@ -1,1313 +0,0 @@
-{
-  "name": "course-mate",
-  "version": "1.0.0",
-  "lockfileVersion": 3,
-  "requires": true,
-  "packages": {
-    "": {
-      "name": "course-mate",
-      "version": "1.0.0",
-      "license": "ISC",
-      "dependencies": {
-        "zod": "^3.23.8"
-      },
-      "devDependencies": {
-        "@biomejs/biome": "^1.9.1",
-        "@types/bun": "^1.1.10",
-        "cspell": "^8.14.4",
-        "lefthook": "^1.8.4",
-        "typescript": "^5.6.2"
-      }
-    },
-    "node_modules/@biomejs/biome": {
-      "version": "1.9.4",
-      "dev": true,
-      "hasInstallScript": true,
-      "license": "MIT OR Apache-2.0",
-      "bin": {
-        "biome": "bin/biome"
-      },
-      "engines": {
-        "node": ">=14.21.3"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/biome"
-      },
-      "optionalDependencies": {
-        "@biomejs/cli-darwin-arm64": "1.9.4",
-        "@biomejs/cli-darwin-x64": "1.9.4",
-        "@biomejs/cli-linux-arm64": "1.9.4",
-        "@biomejs/cli-linux-arm64-musl": "1.9.4",
-        "@biomejs/cli-linux-x64": "1.9.4",
-        "@biomejs/cli-linux-x64-musl": "1.9.4",
-        "@biomejs/cli-win32-arm64": "1.9.4",
-        "@biomejs/cli-win32-x64": "1.9.4"
-      }
-    },
-    "node_modules/@biomejs/cli-darwin-arm64": {
-      "version": "1.9.4",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "license": "MIT OR Apache-2.0",
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "engines": {
-        "node": ">=14.21.3"
-      }
-    },
-    "node_modules/@cspell/cspell-bundled-dicts": {
-      "version": "8.16.0",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@cspell/dict-ada": "^4.0.5",
-        "@cspell/dict-al": "^1.0.3",
-        "@cspell/dict-aws": "^4.0.7",
-        "@cspell/dict-bash": "^4.1.8",
-        "@cspell/dict-companies": "^3.1.7",
-        "@cspell/dict-cpp": "^6.0.1",
-        "@cspell/dict-cryptocurrencies": "^5.0.3",
-        "@cspell/dict-csharp": "^4.0.5",
-        "@cspell/dict-css": "^4.0.16",
-        "@cspell/dict-dart": "^2.2.4",
-        "@cspell/dict-django": "^4.1.3",
-        "@cspell/dict-docker": "^1.1.11",
-        "@cspell/dict-dotnet": "^5.0.8",
-        "@cspell/dict-elixir": "^4.0.6",
-        "@cspell/dict-en_us": "^4.3.26",
-        "@cspell/dict-en-common-misspellings": "^2.0.7",
-        "@cspell/dict-en-gb": "1.1.33",
-        "@cspell/dict-filetypes": "^3.0.8",
-        "@cspell/dict-flutter": "^1.0.3",
-        "@cspell/dict-fonts": "^4.0.3",
-        "@cspell/dict-fsharp": "^1.0.4",
-        "@cspell/dict-fullstack": "^3.2.3",
-        "@cspell/dict-gaming-terms": "^1.0.8",
-        "@cspell/dict-git": "^3.0.3",
-        "@cspell/dict-golang": "^6.0.16",
-        "@cspell/dict-google": "^1.0.4",
-        "@cspell/dict-haskell": "^4.0.4",
-        "@cspell/dict-html": "^4.0.10",
-        "@cspell/dict-html-symbol-entities": "^4.0.3",
-        "@cspell/dict-java": "^5.0.10",
-        "@cspell/dict-julia": "^1.0.4",
-        "@cspell/dict-k8s": "^1.0.9",
-        "@cspell/dict-latex": "^4.0.3",
-        "@cspell/dict-lorem-ipsum": "^4.0.3",
-        "@cspell/dict-lua": "^4.0.6",
-        "@cspell/dict-makefile": "^1.0.3",
-        "@cspell/dict-markdown": "^2.0.7",
-        "@cspell/dict-monkeyc": "^1.0.9",
-        "@cspell/dict-node": "^5.0.5",
-        "@cspell/dict-npm": "^5.1.11",
-        "@cspell/dict-php": "^4.0.13",
-        "@cspell/dict-powershell": "^5.0.13",
-        "@cspell/dict-public-licenses": "^2.0.11",
-        "@cspell/dict-python": "^4.2.12",
-        "@cspell/dict-r": "^2.0.4",
-        "@cspell/dict-ruby": "^5.0.7",
-        "@cspell/dict-rust": "^4.0.9",
-        "@cspell/dict-scala": "^5.0.6",
-        "@cspell/dict-software-terms": "^4.1.13",
-        "@cspell/dict-sql": "^2.1.8",
-        "@cspell/dict-svelte": "^1.0.5",
-        "@cspell/dict-swift": "^2.0.4",
-        "@cspell/dict-terraform": "^1.0.6",
-        "@cspell/dict-typescript": "^3.1.11",
-        "@cspell/dict-vue": "^3.0.3"
-      },
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/@cspell/cspell-json-reporter": {
-      "version": "8.16.0",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@cspell/cspell-types": "8.16.0"
-      },
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/@cspell/cspell-pipe": {
-      "version": "8.16.0",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/@cspell/cspell-resolver": {
-      "version": "8.16.0",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "global-directory": "^4.0.1"
-      },
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/@cspell/cspell-service-bus": {
-      "version": "8.16.0",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/@cspell/cspell-types": {
-      "version": "8.16.0",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/@cspell/dict-ada": {
-      "version": "4.0.5",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/@cspell/dict-al": {
-      "version": "1.0.3",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/@cspell/dict-aws": {
-      "version": "4.0.7",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/@cspell/dict-bash": {
-      "version": "4.1.8",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/@cspell/dict-companies": {
-      "version": "3.1.7",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/@cspell/dict-cpp": {
-      "version": "6.0.2",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/@cspell/dict-cryptocurrencies": {
-      "version": "5.0.3",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/@cspell/dict-csharp": {
-      "version": "4.0.5",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/@cspell/dict-css": {
-      "version": "4.0.16",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/@cspell/dict-dart": {
-      "version": "2.2.4",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/@cspell/dict-data-science": {
-      "version": "2.0.5",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/@cspell/dict-django": {
-      "version": "4.1.3",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/@cspell/dict-docker": {
-      "version": "1.1.11",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/@cspell/dict-dotnet": {
-      "version": "5.0.8",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/@cspell/dict-elixir": {
-      "version": "4.0.6",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/@cspell/dict-en_us": {
-      "version": "4.3.27",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/@cspell/dict-en-common-misspellings": {
-      "version": "2.0.7",
-      "dev": true,
-      "license": "CC BY-SA 4.0"
-    },
-    "node_modules/@cspell/dict-en-gb": {
-      "version": "1.1.33",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/@cspell/dict-filetypes": {
-      "version": "3.0.8",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/@cspell/dict-flutter": {
-      "version": "1.0.3",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/@cspell/dict-fonts": {
-      "version": "4.0.3",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/@cspell/dict-fsharp": {
-      "version": "1.0.4",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/@cspell/dict-fullstack": {
-      "version": "3.2.3",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/@cspell/dict-gaming-terms": {
-      "version": "1.0.8",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/@cspell/dict-git": {
-      "version": "3.0.3",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/@cspell/dict-golang": {
-      "version": "6.0.17",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/@cspell/dict-google": {
-      "version": "1.0.4",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/@cspell/dict-haskell": {
-      "version": "4.0.4",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/@cspell/dict-html": {
-      "version": "4.0.10",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/@cspell/dict-html-symbol-entities": {
-      "version": "4.0.3",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/@cspell/dict-java": {
-      "version": "5.0.10",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/@cspell/dict-julia": {
-      "version": "1.0.4",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/@cspell/dict-k8s": {
-      "version": "1.0.9",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/@cspell/dict-latex": {
-      "version": "4.0.3",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/@cspell/dict-lorem-ipsum": {
-      "version": "4.0.3",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/@cspell/dict-lua": {
-      "version": "4.0.6",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/@cspell/dict-makefile": {
-      "version": "1.0.3",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/@cspell/dict-markdown": {
-      "version": "2.0.7",
-      "dev": true,
-      "license": "MIT",
-      "peerDependencies": {
-        "@cspell/dict-css": "^4.0.16",
-        "@cspell/dict-html": "^4.0.10",
-        "@cspell/dict-html-symbol-entities": "^4.0.3",
-        "@cspell/dict-typescript": "^3.1.11"
-      }
-    },
-    "node_modules/@cspell/dict-monkeyc": {
-      "version": "1.0.9",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/@cspell/dict-node": {
-      "version": "5.0.5",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/@cspell/dict-npm": {
-      "version": "5.1.13",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/@cspell/dict-php": {
-      "version": "4.0.13",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/@cspell/dict-powershell": {
-      "version": "5.0.13",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/@cspell/dict-public-licenses": {
-      "version": "2.0.11",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/@cspell/dict-python": {
-      "version": "4.2.12",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@cspell/dict-data-science": "^2.0.5"
-      }
-    },
-    "node_modules/@cspell/dict-r": {
-      "version": "2.0.4",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/@cspell/dict-ruby": {
-      "version": "5.0.7",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/@cspell/dict-rust": {
-      "version": "4.0.10",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/@cspell/dict-scala": {
-      "version": "5.0.6",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/@cspell/dict-software-terms": {
-      "version": "4.1.17",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/@cspell/dict-sql": {
-      "version": "2.1.8",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/@cspell/dict-svelte": {
-      "version": "1.0.5",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/@cspell/dict-swift": {
-      "version": "2.0.4",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/@cspell/dict-terraform": {
-      "version": "1.0.6",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/@cspell/dict-typescript": {
-      "version": "3.1.11",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/@cspell/dict-vue": {
-      "version": "3.0.3",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/@cspell/dynamic-import": {
-      "version": "8.16.0",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "import-meta-resolve": "^4.1.0"
-      },
-      "engines": {
-        "node": ">=18.0"
-      }
-    },
-    "node_modules/@cspell/filetypes": {
-      "version": "8.16.0",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/@cspell/strong-weak-map": {
-      "version": "8.16.0",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/@cspell/url": {
-      "version": "8.16.0",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=18.0"
-      }
-    },
-    "node_modules/@types/bun": {
-      "version": "1.1.13",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "bun-types": "1.1.34"
-      }
-    },
-    "node_modules/@types/node": {
-      "version": "20.12.14",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "undici-types": "~5.26.4"
-      }
-    },
-    "node_modules/@types/ws": {
-      "version": "8.5.13",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@types/node": "*"
-      }
-    },
-    "node_modules/array-timsort": {
-      "version": "1.0.3",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/braces": {
-      "version": "3.0.3",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "fill-range": "^7.1.1"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/bun-types": {
-      "version": "1.1.34",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@types/node": "~20.12.8",
-        "@types/ws": "~8.5.10"
-      }
-    },
-    "node_modules/callsites": {
-      "version": "3.1.0",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/chalk": {
-      "version": "5.3.0",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": "^12.17.0 || ^14.13 || >=16.0.0"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/chalk?sponsor=1"
-      }
-    },
-    "node_modules/chalk-template": {
-      "version": "1.1.0",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "chalk": "^5.2.0"
-      },
-      "engines": {
-        "node": ">=14.16"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/chalk-template?sponsor=1"
-      }
-    },
-    "node_modules/clear-module": {
-      "version": "4.1.2",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "parent-module": "^2.0.0",
-        "resolve-from": "^5.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/commander": {
-      "version": "12.1.0",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/comment-json": {
-      "version": "4.2.5",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "array-timsort": "^1.0.3",
-        "core-util-is": "^1.0.3",
-        "esprima": "^4.0.1",
-        "has-own-prop": "^2.0.0",
-        "repeat-string": "^1.6.1"
-      },
-      "engines": {
-        "node": ">= 6"
-      }
-    },
-    "node_modules/core-util-is": {
-      "version": "1.0.3",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/cspell": {
-      "version": "8.16.0",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@cspell/cspell-json-reporter": "8.16.0",
-        "@cspell/cspell-pipe": "8.16.0",
-        "@cspell/cspell-types": "8.16.0",
-        "@cspell/dynamic-import": "8.16.0",
-        "@cspell/url": "8.16.0",
-        "chalk": "^5.3.0",
-        "chalk-template": "^1.1.0",
-        "commander": "^12.1.0",
-        "cspell-dictionary": "8.16.0",
-        "cspell-gitignore": "8.16.0",
-        "cspell-glob": "8.16.0",
-        "cspell-io": "8.16.0",
-        "cspell-lib": "8.16.0",
-        "fast-json-stable-stringify": "^2.1.0",
-        "file-entry-cache": "^9.1.0",
-        "get-stdin": "^9.0.0",
-        "semver": "^7.6.3",
-        "tinyglobby": "^0.2.10"
-      },
-      "bin": {
-        "cspell": "bin.mjs",
-        "cspell-esm": "bin.mjs"
-      },
-      "engines": {
-        "node": ">=18"
-      },
-      "funding": {
-        "url": "https://github.com/streetsidesoftware/cspell?sponsor=1"
-      }
-    },
-    "node_modules/cspell-config-lib": {
-      "version": "8.16.0",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@cspell/cspell-types": "8.16.0",
-        "comment-json": "^4.2.5",
-        "yaml": "^2.6.0"
-      },
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/cspell-dictionary": {
-      "version": "8.16.0",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@cspell/cspell-pipe": "8.16.0",
-        "@cspell/cspell-types": "8.16.0",
-        "cspell-trie-lib": "8.16.0",
-        "fast-equals": "^5.0.1"
-      },
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/cspell-gitignore": {
-      "version": "8.16.0",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@cspell/url": "8.16.0",
-        "cspell-glob": "8.16.0",
-        "cspell-io": "8.16.0",
-        "find-up-simple": "^1.0.0"
-      },
-      "bin": {
-        "cspell-gitignore": "bin.mjs"
-      },
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/cspell-glob": {
-      "version": "8.16.0",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@cspell/url": "8.16.0",
-        "micromatch": "^4.0.8"
-      },
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/cspell-grammar": {
-      "version": "8.16.0",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@cspell/cspell-pipe": "8.16.0",
-        "@cspell/cspell-types": "8.16.0"
-      },
-      "bin": {
-        "cspell-grammar": "bin.mjs"
-      },
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/cspell-io": {
-      "version": "8.16.0",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@cspell/cspell-service-bus": "8.16.0",
-        "@cspell/url": "8.16.0"
-      },
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/cspell-lib": {
-      "version": "8.16.0",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@cspell/cspell-bundled-dicts": "8.16.0",
-        "@cspell/cspell-pipe": "8.16.0",
-        "@cspell/cspell-resolver": "8.16.0",
-        "@cspell/cspell-types": "8.16.0",
-        "@cspell/dynamic-import": "8.16.0",
-        "@cspell/filetypes": "8.16.0",
-        "@cspell/strong-weak-map": "8.16.0",
-        "@cspell/url": "8.16.0",
-        "clear-module": "^4.1.2",
-        "comment-json": "^4.2.5",
-        "cspell-config-lib": "8.16.0",
-        "cspell-dictionary": "8.16.0",
-        "cspell-glob": "8.16.0",
-        "cspell-grammar": "8.16.0",
-        "cspell-io": "8.16.0",
-        "cspell-trie-lib": "8.16.0",
-        "env-paths": "^3.0.0",
-        "fast-equals": "^5.0.1",
-        "gensequence": "^7.0.0",
-        "import-fresh": "^3.3.0",
-        "resolve-from": "^5.0.0",
-        "vscode-languageserver-textdocument": "^1.0.12",
-        "vscode-uri": "^3.0.8",
-        "xdg-basedir": "^5.1.0"
-      },
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/cspell-trie-lib": {
-      "version": "8.16.0",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@cspell/cspell-pipe": "8.16.0",
-        "@cspell/cspell-types": "8.16.0",
-        "gensequence": "^7.0.0"
-      },
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/env-paths": {
-      "version": "3.0.0",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/esprima": {
-      "version": "4.0.1",
-      "dev": true,
-      "license": "BSD-2-Clause",
-      "bin": {
-        "esparse": "bin/esparse.js",
-        "esvalidate": "bin/esvalidate.js"
-      },
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/fast-equals": {
-      "version": "5.0.1",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=6.0.0"
-      }
-    },
-    "node_modules/fast-json-stable-stringify": {
-      "version": "2.1.0",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/fdir": {
-      "version": "6.4.2",
-      "dev": true,
-      "license": "MIT",
-      "peerDependencies": {
-        "picomatch": "^3 || ^4"
-      },
-      "peerDependenciesMeta": {
-        "picomatch": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/file-entry-cache": {
-      "version": "9.1.0",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "flat-cache": "^5.0.0"
-      },
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/fill-range": {
-      "version": "7.1.1",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "to-regex-range": "^5.0.1"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/find-up-simple": {
-      "version": "1.0.0",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=18"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/flat-cache": {
-      "version": "5.0.0",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "flatted": "^3.3.1",
-        "keyv": "^4.5.4"
-      },
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/flatted": {
-      "version": "3.3.2",
-      "dev": true,
-      "license": "ISC"
-    },
-    "node_modules/gensequence": {
-      "version": "7.0.0",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/get-stdin": {
-      "version": "9.0.0",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/global-directory": {
-      "version": "4.0.1",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "ini": "4.1.1"
-      },
-      "engines": {
-        "node": ">=18"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/has-own-prop": {
-      "version": "2.0.0",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/import-fresh": {
-      "version": "3.3.0",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "parent-module": "^1.0.0",
-        "resolve-from": "^4.0.0"
-      },
-      "engines": {
-        "node": ">=6"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/import-fresh/node_modules/parent-module": {
-      "version": "1.0.1",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "callsites": "^3.0.0"
-      },
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/import-fresh/node_modules/resolve-from": {
-      "version": "4.0.0",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/import-meta-resolve": {
-      "version": "4.1.0",
-      "dev": true,
-      "license": "MIT",
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/wooorm"
-      }
-    },
-    "node_modules/ini": {
-      "version": "4.1.1",
-      "dev": true,
-      "license": "ISC",
-      "engines": {
-        "node": "^14.17.0 || ^16.13.0 || >=18.0.0"
-      }
-    },
-    "node_modules/is-number": {
-      "version": "7.0.0",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=0.12.0"
-      }
-    },
-    "node_modules/json-buffer": {
-      "version": "3.0.1",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/keyv": {
-      "version": "4.5.4",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "json-buffer": "3.0.1"
-      }
-    },
-    "node_modules/lefthook": {
-      "version": "1.8.4",
-      "resolved": "https://registry.npmjs.org/lefthook/-/lefthook-1.8.4.tgz",
-      "integrity": "sha512-XNyMaTWNRuADOaocYiHidgNkNDz8SCekpdNJ7lqceFcBT2zjumnb28/o7IMaNROpLBZdQkLkJXSeaQWGqn3kog==",
-      "dev": true,
-      "hasInstallScript": true,
-      "license": "MIT",
-      "bin": {
-        "lefthook": "bin/index.js"
-      },
-      "optionalDependencies": {
-        "lefthook-darwin-arm64": "1.8.4",
-        "lefthook-darwin-x64": "1.8.4",
-        "lefthook-freebsd-arm64": "1.8.4",
-        "lefthook-freebsd-x64": "1.8.4",
-        "lefthook-linux-arm64": "1.8.4",
-        "lefthook-linux-x64": "1.8.4",
-        "lefthook-openbsd-arm64": "1.8.4",
-        "lefthook-openbsd-x64": "1.8.4",
-        "lefthook-windows-arm64": "1.8.4",
-        "lefthook-windows-x64": "1.8.4"
-      }
-    },
-    "node_modules/lefthook-darwin-arm64": {
-      "version": "1.8.4",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "darwin"
-      ]
-    },
-    "node_modules/lefthook-darwin-x64": {
-      "version": "1.8.4",
-      "resolved": "https://registry.npmjs.org/lefthook-darwin-x64/-/lefthook-darwin-x64-1.8.4.tgz",
-      "integrity": "sha512-QLRsqK9aTMRcVW8qz4pzI2OWnGCEcaEPJlIiFjwstYsS+wfkooxOS0UkfVMjy+QoGgEcki+cxF/FoY7lE7DDtw==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "darwin"
-      ]
-    },
-    "node_modules/lefthook-freebsd-arm64": {
-      "version": "1.8.4",
-      "resolved": "https://registry.npmjs.org/lefthook-freebsd-arm64/-/lefthook-freebsd-arm64-1.8.4.tgz",
-      "integrity": "sha512-chnQ1m/Cmn9c0sLdk5HL2SToE5LBJv5uQMdH1IGRRcw+nEqWqrMnDXvM75caiJAyjmUGvPH3czKTJDzTFV1E+A==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "freebsd"
-      ]
-    },
-    "node_modules/lefthook-freebsd-x64": {
-      "version": "1.8.4",
-      "resolved": "https://registry.npmjs.org/lefthook-freebsd-x64/-/lefthook-freebsd-x64-1.8.4.tgz",
-      "integrity": "sha512-KQi+WBUdnGLnK0rHOR58kbMH5TDVN1ZjZLu66Pv9FCG7Y7shR1qtaTXu+wmxdRhMvaLeQIXRsUEPjNRC66yMmA==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "freebsd"
-      ]
-    },
-    "node_modules/lefthook-linux-arm64": {
-      "version": "1.8.4",
-      "resolved": "https://registry.npmjs.org/lefthook-linux-arm64/-/lefthook-linux-arm64-1.8.4.tgz",
-      "integrity": "sha512-CXNcqIskLwTwQARidGdFqmNxpvOU3jsWPK4KA7pq2+QmlWJ64w98ebMvNBoUmRUCXqzmUm7Udf/jpfz2fobewQ==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ]
-    },
-    "node_modules/lefthook-linux-x64": {
-      "version": "1.8.4",
-      "resolved": "https://registry.npmjs.org/lefthook-linux-x64/-/lefthook-linux-x64-1.8.4.tgz",
-      "integrity": "sha512-pVNITkFBxUCEtamWSM/res2Gd48+m9YKbNyIBndAuZVC5pKV5aGKZy2DNq6PWUPYiUDPx+7hoAtCJg/tlAiqhw==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ]
-    },
-    "node_modules/lefthook-openbsd-arm64": {
-      "version": "1.8.4",
-      "resolved": "https://registry.npmjs.org/lefthook-openbsd-arm64/-/lefthook-openbsd-arm64-1.8.4.tgz",
-      "integrity": "sha512-l+i/Dg5X36kYzhpMGSPE3rMbWy1KSytbLB9lY1PmxYb6LRH6iQTYIoxvLabVUwSBPSq8HtIFa50+bvC5+scfVA==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "openbsd"
-      ]
-    },
-    "node_modules/lefthook-openbsd-x64": {
-      "version": "1.8.4",
-      "resolved": "https://registry.npmjs.org/lefthook-openbsd-x64/-/lefthook-openbsd-x64-1.8.4.tgz",
-      "integrity": "sha512-CqhDDPPX8oHzMLgNi/Reba823DRzj+eMNWQ8axvSiIG+zmG1w20xZH5QSs/mD3tjrND90yfDd90mWMt181qPyA==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "openbsd"
-      ]
-    },
-    "node_modules/lefthook-windows-arm64": {
-      "version": "1.8.4",
-      "resolved": "https://registry.npmjs.org/lefthook-windows-arm64/-/lefthook-windows-arm64-1.8.4.tgz",
-      "integrity": "sha512-dvpvorICmVjmw29Aiczg7DcaSzkd86bEBomiGq4UsAEk3+7ExLrlWJDLFsI6xLjMKmTxy+F7eXb2uDtuFC1N4g==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "win32"
-      ]
-    },
-    "node_modules/lefthook-windows-x64": {
-      "version": "1.8.4",
-      "resolved": "https://registry.npmjs.org/lefthook-windows-x64/-/lefthook-windows-x64-1.8.4.tgz",
-      "integrity": "sha512-e+y8Jt4/7PnoplhOuK48twjGVJEsU4T3J5kxD4mWfl6Cbit0YSn4bme9nW41eqCqTUqOm+ky29XlfnPHFX5ZNA==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "win32"
-      ]
-    },
-    "node_modules/micromatch": {
-      "version": "4.0.8",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "braces": "^3.0.3",
-        "picomatch": "^2.3.1"
-      },
-      "engines": {
-        "node": ">=8.6"
-      }
-    },
-    "node_modules/micromatch/node_modules/picomatch": {
-      "version": "2.3.1",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=8.6"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/jonschlinkert"
-      }
-    },
-    "node_modules/parent-module": {
-      "version": "2.0.0",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "callsites": "^3.1.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/picomatch": {
-      "version": "4.0.2",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/jonschlinkert"
-      }
-    },
-    "node_modules/repeat-string": {
-      "version": "1.6.1",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=0.10"
-      }
-    },
-    "node_modules/resolve-from": {
-      "version": "5.0.0",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/semver": {
-      "version": "7.6.3",
-      "dev": true,
-      "license": "ISC",
-      "bin": {
-        "semver": "bin/semver.js"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/tinyglobby": {
-      "version": "0.2.10",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "fdir": "^6.4.2",
-        "picomatch": "^4.0.2"
-      },
-      "engines": {
-        "node": ">=12.0.0"
-      }
-    },
-    "node_modules/to-regex-range": {
-      "version": "5.0.1",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "is-number": "^7.0.0"
-      },
-      "engines": {
-        "node": ">=8.0"
-      }
-    },
-    "node_modules/typescript": {
-      "version": "5.7.2",
-      "dev": true,
-      "license": "Apache-2.0",
-      "bin": {
-        "tsc": "bin/tsc",
-        "tsserver": "bin/tsserver"
-      },
-      "engines": {
-        "node": ">=14.17"
-      }
-    },
-    "node_modules/undici-types": {
-      "version": "5.26.5",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/vscode-languageserver-textdocument": {
-      "version": "1.0.12",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/vscode-uri": {
-      "version": "3.0.8",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/xdg-basedir": {
-      "version": "5.1.0",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/yaml": {
-      "version": "2.6.1",
-      "dev": true,
-      "license": "ISC",
-      "bin": {
-        "yaml": "bin.mjs"
-      },
-      "engines": {
-        "node": ">= 14"
-      }
-    },
-    "node_modules/zod": {
-      "version": "3.23.8",
-      "license": "MIT",
-      "funding": {
-        "url": "https://github.com/sponsors/colinhacks"
-      }
-    }
-  }
-}
diff --git a/server/src/seeds/test-data/data.ts b/server/src/seeds/test-data/data.ts
index 64dd2dd4..55dd14f1 100644
--- a/server/src/seeds/test-data/data.ts
+++ b/server/src/seeds/test-data/data.ts
@@ -73,27 +73,27 @@ export const courses = [
   {
     id: "10001",
     name: "国語八列",
-    teacher: "足助太郎",
+    teacher: "八十島漕郎",
   },
   {
     id: "10002",
     name: "数学八列",
-    teacher: "足助太郎",
+    teacher: "八十島漕郎",
   },
   {
     id: "10003",
     name: "英語八列",
-    teacher: "足助太郎",
+    teacher: "八十島漕郎",
   },
   {
     id: "10004",
     name: "理科八列",
-    teacher: "足助太郎",
+    teacher: "八十島漕郎",
   },
   {
     id: "10005",
     name: "社会八列",
-    teacher: "足助太郎",
+    teacher: "八十島漕郎",
   },
 ];
 
diff --git a/web/app/edit/courses/page.tsx b/web/app/edit/courses/page.tsx
index e55e6ec7..61dcc88a 100644
--- a/web/app/edit/courses/page.tsx
+++ b/web/app/edit/courses/page.tsx
@@ -12,16 +12,16 @@ export default function EditCourses() {
   const error = state.current === "error" ? state.error : null;
 
   return (
-    <div className="mx-auto my-0 flex h-full max-w-[350] flex-col p-5 text-center">
+    <div className="mx-auto my-0 flex h-full max-w-[350] flex-col p-2 text-center">
       <h1 className="mb-2 text-xl">授業編集</h1>
       {loading ? (
         <FullScreenCircularProgress />
       ) : error ? (
         <p>Error: {error.message}</p>
       ) : data ? (
-        <>
+        <div className="flex-1 p-2">
           <EditableCoursesTable userId={data.id} />
-        </>
+        </div>
       ) : (
         <p>データがありません。</p>
       )}
diff --git a/web/app/edit/layout.tsx b/web/app/edit/layout.tsx
index bc1ad10f..be75caf1 100644
--- a/web/app/edit/layout.tsx
+++ b/web/app/edit/layout.tsx
@@ -8,9 +8,9 @@ export default function EditPageLayout({
 }) {
   return (
     <NavigateByAuthState type="toLoginForUnauthenticated">
-      <Header title="編集/Edit" />
-      <div className="absolute top-14 right-0 left-0 overflow-y-auto sm:top-16">
-        {children}
+      <div className="flex h-screen flex-col">
+        <Header title="編集/Edit" />
+        <div className="mt-14 flex-1 sm:mt-16">{children}</div>
       </div>
     </NavigateByAuthState>
   );
diff --git a/web/app/home/components/PersonDetailedMenu.tsx b/web/app/home/components/PersonDetailedMenu.tsx
new file mode 100644
index 00000000..fde360d2
--- /dev/null
+++ b/web/app/home/components/PersonDetailedMenu.tsx
@@ -0,0 +1,153 @@
+import { DAY_TO_JAPANESE_MAP, sortSlots } from "common/consts";
+import type { UserWithCoursesAndSubjects } from "common/types";
+import { useState } from "react";
+import { MdClose } from "react-icons/md";
+import { MdOpenInNew } from "react-icons/md";
+import { MdArrowBack } from "react-icons/md";
+import NonEditableCoursesTable from "~/components/course/NonEditableCoursesTable";
+
+type Props = {
+  onClose: () => void;
+  displayedUser: UserWithCoursesAndSubjects;
+  currentUser: UserWithCoursesAndSubjects;
+};
+
+export default function PersonDetailedMenu({
+  onClose,
+  displayedUser,
+  currentUser,
+}: Props) {
+  const [menuStatus, setMenuStatus] = useState<"detailedInfo" | "coursesTable">(
+    "detailedInfo",
+  );
+
+  return (
+    <dialog
+      id="dialog"
+      className="modal modal-open modal-bottom sm:modal-middle p-0"
+    >
+      <div className="modal-box p-0">
+        <div className="sticky top-0 bg-white p-2">
+          <form method="dialog">
+            <div className="relative flex items-center justify-center">
+              <button
+                type="button"
+                className="btn btn-sm btn-circle btn-ghost absolute top-0 left-0"
+                onClick={onClose}
+              >
+                <MdClose className="text-2xl" />
+              </button>
+              <h3 className="text-lg">
+                {displayedUser.name}の
+                {menuStatus === "detailedInfo" ? "詳細情報" : "時間割表"}
+              </h3>
+              <span />
+            </div>
+          </form>
+        </div>
+        {menuStatus === "detailedInfo" ? (
+          <div className="p-4">
+            <div>
+              <span className="text-gray-500 text-xs">名前</span>
+              <p className="text-lg">{displayedUser.name}</p>
+            </div>
+            <div className="divider m-0" />
+            <div>
+              <span className="text-gray-500 text-xs">性別</span>
+              <p className="text-lg">{displayedUser.gender}</p>
+            </div>
+            <div className="divider m-0" />
+            <div>
+              <span className="text-gray-500 text-xs">自己紹介</span>
+              <p className="text-md">{displayedUser.intro}</p>
+            </div>
+            <div className="divider m-0" />
+            <div>
+              <div className="mt-0.5 mb-1 flex items-center justify-between">
+                <span className="text-gray-500 text-xs">講義</span>
+                <button
+                  type="button"
+                  className="btn btn-xs font-normal text-primary"
+                  onClick={() => setMenuStatus("coursesTable")}
+                >
+                  <MdOpenInNew className="mr-[-4px]" />
+                  時間割表を確認
+                </button>
+              </div>
+              <div className="flex flex-col gap-1">
+                {displayedUser.courses.map(
+                  (course) =>
+                    course.name && (
+                      <div
+                        key={course.id}
+                        className={`flex gap-0.5 rounded-md px-2 py-1 text-md ${
+                          currentUser.courses.some((c) => c.id === course.id)
+                            ? "bg-[#FFF1BF]"
+                            : "bg-[#F7FCFF]"
+                        }`}
+                      >
+                        <span className="w-[12vh]">
+                          {sortSlots(course.slots)
+                            .map(
+                              (slot) =>
+                                `${DAY_TO_JAPANESE_MAP.get(slot.day)}${slot.period}`,
+                            )
+                            .join("・")}
+                        </span>
+                        <span className="flex-1">
+                          {course.name} ({course.teacher}){" "}
+                        </span>
+                        <span>{course.id}</span>
+                      </div>
+                    ),
+                )}
+              </div>
+            </div>
+            <div className="divider m-0" />
+            <div>
+              <span className="text-gray-500 text-xs">興味分野</span>
+              <div className="flex flex-wrap gap-2">
+                {displayedUser.interestSubjects.map(
+                  (subject) =>
+                    subject.name && (
+                      <span
+                        key={subject.id}
+                        className={`rounded-md px-2 py-0.5 text-md text-primary ${
+                          currentUser.interestSubjects.some(
+                            (s) => s.id === subject.id,
+                          )
+                            ? "bg-[#FFF1BF]"
+                            : "bg-[#F7FCFF]"
+                        }`}
+                      >
+                        #{subject.name}
+                      </span>
+                    ),
+                )}
+              </div>
+            </div>
+          </div>
+        ) : (
+          <div className="flex h-[80vh] flex-col">
+            <div className="flex justify-end pr-2">
+              <button
+                type="button"
+                className="btn btn-xs font-normal text-primary"
+                onClick={() => setMenuStatus("detailedInfo")}
+              >
+                <MdArrowBack className="mr-[-4px]" />
+                詳細情報に戻る
+              </button>
+            </div>
+            <div className="flex-1 p-2 pb-6">
+              <NonEditableCoursesTable
+                userId={displayedUser.id}
+                comparisonUserId={currentUser.id}
+              />
+            </div>
+          </div>
+        )}
+      </div>
+    </dialog>
+  );
+}
diff --git a/web/app/home/page.tsx b/web/app/home/page.tsx
index b4824bdf..b2d4a8eb 100644
--- a/web/app/home/page.tsx
+++ b/web/app/home/page.tsx
@@ -11,11 +11,13 @@ import { Card } from "~/components/Card";
 import { DraggableCard } from "~/components/DraggableCard";
 import FullScreenCircularProgress from "~/components/common/FullScreenCircularProgress";
 import { NavigateByAuthState } from "~/components/common/NavigateByAuthState";
+import PersonDetailedMenu from "./components/PersonDetailedMenu";
 
 export default function Home() {
   const { data, error } = useRecommended();
   const controls = useAnimation();
   const [clickedButton, setClickedButton] = useState<string>("");
+  const [openDetailedMenu, setOpenDetailedMenu] = useState(false);
   const {
     state: { data: currentUser },
   } = useAboutMe();
@@ -88,34 +90,54 @@ export default function Home() {
     <NavigateByAuthState type="toLoginForUnauthenticated">
       <div className="flex h-full flex-col items-center justify-center">
         {displayedUser && (
-          <div className="flex h-full flex-col items-center justify-center">
-            {nextUser && (
-              <div className="relative h-full w-full">
-                <div className="-translate-x-4 -translate-y-4 inset-0 z-0 mt-4 transform">
-                  <Card displayedUser={nextUser} currentUser={currentUser} />
+          <>
+            <div className="flex h-full flex-col items-center justify-center">
+              {nextUser && (
+                <div className="relative h-full w-full">
+                  <div className="-translate-x-4 -translate-y-4 inset-0 z-0 mt-4 transform">
+                    <Card displayedUser={nextUser} currentUser={currentUser} />
+                  </div>
+                  <motion.div
+                    animate={controls}
+                    className="absolute inset-0 z-10 mt-4 flex items-center justify-center"
+                  >
+                    <DraggableCard
+                      displayedUser={displayedUser}
+                      currentUser={currentUser}
+                      onSwipeLeft={reject}
+                      onSwipeRight={accept}
+                      clickedButton={clickedButton}
+                    />
+                  </motion.div>
                 </div>
-                <motion.div
-                  animate={controls}
-                  className="absolute inset-0 z-10 mt-4 flex items-center justify-center"
-                >
-                  <DraggableCard
-                    displayedUser={displayedUser}
-                    currentUser={currentUser}
-                    onSwipeLeft={reject}
-                    onSwipeRight={accept}
-                    clickedButton={clickedButton}
-                  />
-                </motion.div>
+              )}
+              <button
+                type="button"
+                onClick={() => setOpenDetailedMenu(!openDetailedMenu)}
+              >
+                てすと
+              </button>
+              <div className="button-container mt-4 mb-4 flex w-full justify-center space-x-8">
+                <CloseButton
+                  onclick={onClickClose}
+                  icon={<CloseIconStyled />}
+                />
+                <GoodButton
+                  onclick={onClickHeart}
+                  icon={<FavoriteIconStyled />}
+                />
               </div>
-            )}
-            <div className="button-container mt-4 mb-4 flex w-full justify-center space-x-8">
-              <CloseButton onclick={onClickClose} icon={<CloseIconStyled />} />
-              <GoodButton
-                onclick={onClickHeart}
-                icon={<FavoriteIconStyled />}
-              />
             </div>
-          </div>
+            {openDetailedMenu && (
+              <PersonDetailedMenu
+                onClose={() => {
+                  setOpenDetailedMenu(false);
+                }}
+                displayedUser={displayedUser}
+                currentUser={currentUser}
+              />
+            )}
+          </>
         )}
       </div>
     </NavigateByAuthState>
diff --git a/web/app/signup/page.tsx b/web/app/signup/page.tsx
index e4d541bb..47d14a1a 100644
--- a/web/app/signup/page.tsx
+++ b/web/app/signup/page.tsx
@@ -77,9 +77,11 @@ function Registration() {
 export default function RegistrationPage() {
   return (
     <NavigateByAuthState type="toHomeForAuthenticated">
-      <div className="absolute top-14 right-0 bottom-0 left-0 overflow-y-auto">
+      <div className="flex h-screen flex-col">
         <Header title="登録/Register" />
-        <Registration />
+        <div className="mt-14 flex-1">
+          <Registration />
+        </div>
       </div>
     </NavigateByAuthState>
   );
diff --git a/web/app/signup/steps/components/MockCardFront.tsx b/web/app/signup/steps/components/MockCardFront.tsx
new file mode 100644
index 00000000..6f7cfe23
--- /dev/null
+++ b/web/app/signup/steps/components/MockCardFront.tsx
@@ -0,0 +1,63 @@
+import type { UserWithCoursesAndSubjects } from "common/types";
+import UserAvatar from "~/components/human/avatar";
+
+// TODO: CardFront との統合
+export default function MockCardFront({
+  displayedUser,
+}: {
+  displayedUser: Omit<
+    UserWithCoursesAndSubjects,
+    "courses" | "interestSubjects"
+  >;
+}) {
+  return (
+    <div
+      className="flex h-full flex-col gap-5 overflow-clip border-2 border-primary bg-secondary p-5"
+      style={{ width: "min(40dvh, 87.5vw)" }}
+    >
+      <div className="grid h-[20%] grid-cols-3 items-center">
+        <UserAvatar
+          pictureUrl={displayedUser.pictureUrl}
+          width="9dvh"
+          height="9dvh"
+        />
+        <div className="col-span-2 grid grid-rows-3 items-center">
+          <p className="col-span-3 font-bold text-1xl">{displayedUser.name}</p>
+          <p className="col-span-1 text-1xl">{displayedUser.grade}</p>
+          <p className="col-span-2 text-1xl">{displayedUser.faculty}</p>
+          <p className="col-span-2 text-1xl">{displayedUser.department}</p>
+        </div>
+      </div>
+
+      <div className="flex h-[70%] w-full flex-col gap-2">
+        <p className="col-span-2 text-1xl">{displayedUser.intro}</p>
+      </div>
+
+      {/* <div className="flex h-[70%] w-full flex-col gap-2" ref={containerRef}>
+        <div
+          ref={interestsContainerRef}
+          className="width-full h-[50%] overflow-hidden"
+        >
+          <div />
+          {isHiddenInterestExist && (
+            <div className="badge badge-outline bg-gray-200 text-gray-700">
+              And More
+            </div>
+          )}
+        </div>
+
+        <div
+          ref={coursesContainerRef}
+          className="width-full h-[50%] overflow-hidden"
+        >
+          <div />
+          {isHiddenCourseExist && (
+            <div className="badge badge-outline bg-gray-200 text-gray-700">
+              And More
+            </div>
+          )}
+        </div>
+      </div> */}
+    </div>
+  );
+}
diff --git a/web/app/signup/steps/step1_profile.tsx b/web/app/signup/steps/step1_profile.tsx
index 8c55a48f..485bffde 100644
--- a/web/app/signup/steps/step1_profile.tsx
+++ b/web/app/signup/steps/step1_profile.tsx
@@ -1,172 +1,167 @@
-import { useState } from "react";
+import { useEffect } from "react";
 
-import {
-  Box,
-  FormControl,
-  InputLabel,
-  MenuItem,
-  Select,
-  TextField,
-  Typography,
-} from "@mui/material";
-import type { SelectChangeEvent } from "@mui/material";
-import { parseStep1UserSchema } from "common/zod/methods";
 import type { Step1User } from "common/zod/types";
 import type { StepProps } from "~/app/signup/common";
 import { facultiesAndDepartments } from "~/app/signup/data";
 
-export default function Step1({ onSave, prev, caller }: StepProps<Step1User>) {
-  const [name, setName] = useState(prev?.name ?? "");
-  const [gender, setGender] = useState(prev?.gender ?? "その他");
-  const [grade, setGrade] = useState(prev?.grade ?? "");
-  const [faculty, setFaculty] = useState(prev?.faculty ?? "");
-  const [department, setDepartment] = useState(prev?.department ?? "");
-  const [intro, setIntro] = useState(prev?.intro ?? "");
-  const [errorMessage, setErrorMessage] = useState("");
-
-  async function save() {
-    try {
-      const data: Step1User = {
-        name: name.trim(),
-        grade: grade,
-        gender: gender,
-        faculty: faculty,
-        department: department,
-        intro: intro.trim(),
-      };
-      parseStep1UserSchema(data);
-      onSave(data);
-    } catch (error) {
-      if (error instanceof Error) {
-        let errorMessages: string;
-        try {
-          const parsedError = JSON.parse(error.message);
-          if (Array.isArray(parsedError)) {
-            errorMessages = parsedError.map((err) => err.message).join(", ");
-          } else {
-            errorMessages = error.message;
-          }
-        } catch {
-          errorMessages = error.message;
-        }
-
-        // エラーメッセージをセット
-        setErrorMessage(errorMessages);
-      } else {
-        console.log("unknown error:", error);
-        setErrorMessage("入力に誤りがあります。");
-      }
-    }
-  }
+import { zodResolver } from "@hookform/resolvers/zod";
+import { Step1UserSchema } from "common/zod/schemas";
+import { type FieldError, type SubmitHandler, useForm } from "react-hook-form";
 
-  const handleFacultyChange = (event: SelectChangeEvent<string>) => {
-    setFaculty(event.target.value);
-  };
-
-  const handleDepartmentChange = (event: SelectChangeEvent<string>) => {
-    setDepartment(event.target.value);
+const faculties = Object.keys(facultiesAndDepartments);
+export default function Step1({ onSave, prev, caller }: StepProps<Step1User>) {
+  const {
+    register,
+    handleSubmit,
+    watch,
+    setValue,
+    resetField,
+    formState: { errors },
+  } = useForm<Step1User>({
+    resolver: zodResolver(Step1UserSchema),
+    defaultValues: prev ?? {
+      name: "",
+      gender: "",
+      grade: "",
+      faculty: "",
+      department: "",
+      intro: "",
+    },
+  });
+  const onSubmit: SubmitHandler<Step1User> = async (data) => {
+    onSave(data);
   };
+  const selectedFaculty = watch("faculty");
 
+  useEffect(() => {
+    if (selectedFaculty) {
+      const defaultDepartment = facultiesAndDepartments[selectedFaculty][0];
+      setValue("department", defaultDepartment);
+    } else {
+      resetField("department");
+    }
+  }, [selectedFaculty, setValue, resetField]);
   return (
     <>
-      <Box mt={2} mx={2} display="flex" flexDirection="column" gap={2}>
-        <Typography variant="h6" component="h1">
-          アカウント設定
-        </Typography>
-        <Box flex={1} display="flex" flexDirection="column" gap={2}>
-          <FormControl fullWidth>
-            <TextField
-              value={name}
-              onChange={(e) => setName(e.target.value)}
-              label="名前"
-              autoComplete="off"
-            />
-          </FormControl>
-          <FormControl fullWidth>
-            <InputLabel>性別</InputLabel>
-            <Select
-              value={gender}
-              label="性別"
-              onChange={(e) => setGender(e.target.value)}
+      <div className="m-4 mb-8 flex flex-col gap-4">
+        <h1 className="text-xl">アカウント設定</h1>
+        <div className="flex flex-col gap-2">
+          <form onSubmit={handleSubmit(onSubmit)}>
+            <Field fieldName="name" fieldLabel="名前" error={errors?.name}>
+              <input
+                className="input input-bordered w-full"
+                {...register("name")}
+              />
+            </Field>
+            <Field fieldName="gender" fieldLabel="性別" error={errors?.gender}>
+              <select
+                className="select select-bordered w-full"
+                {...register("gender")}
+              >
+                <option value={""} disabled>
+                  --選択してください--
+                </option>
+                <option value={"男性"}>男性</option>
+                <option value={"女性"}>女性</option>
+                <option value={"その他"}>その他</option>
+                <option value={"秘密"}>秘密</option>
+              </select>
+            </Field>
+            <Field fieldName="grade" fieldLabel="学年" error={errors?.grade}>
+              <select
+                className="select select-bordered w-full"
+                {...register("grade")}
+              >
+                <option value={""} disabled>
+                  --選択してください--
+                </option>
+                <option value={"B1"}>1年生 (B1)</option>
+                <option value={"B2"}>2年生 (B2)</option>
+                <option value={"B3"}>3年生 (B3)</option>
+                <option value={"B4"}>4年生 (B4)</option>
+                <option value={"M1"}>修士1年 (M1)</option>
+                <option value={"M2"}>修士2年 (M2)</option>
+              </select>
+            </Field>
+            <Field
+              fieldName="faculty"
+              fieldLabel="学部"
+              error={errors?.faculty}
             >
-              <MenuItem value={"男性"}>男性</MenuItem>
-              <MenuItem value={"女性"}>女性</MenuItem>
-              <MenuItem value={"その他"}>その他</MenuItem>
-              <MenuItem value={"秘密"}>秘密</MenuItem>
-            </Select>
-          </FormControl>
-          <FormControl fullWidth>
-            <InputLabel>学年</InputLabel>
-            <Select
-              value={grade}
-              label="学年"
-              onChange={(e) => setGrade(e.target.value)}
+              <select
+                className="select select-bordered w-full"
+                {...register("faculty")}
+              >
+                <option value={""} disabled>
+                  --選択してください--
+                </option>
+                {faculties.map((fac) => (
+                  <option key={fac} value={fac}>
+                    {fac}
+                  </option>
+                ))}
+              </select>
+            </Field>
+            <Field
+              fieldName="department"
+              fieldLabel="学科 (先に学部を選択してください)"
+              error={errors?.department}
             >
-              <MenuItem value={"B1"}>1年生 (B1)</MenuItem>
-              <MenuItem value={"B2"}>2年生 (B2)</MenuItem>
-              <MenuItem value={"B3"}>3年生 (B3)</MenuItem>
-              <MenuItem value={"B4"}>4年生 (B4)</MenuItem>
-              <MenuItem value={"M1"}>修士1年 (M1)</MenuItem>
-              <MenuItem value={"M2"}>修士2年 (M2)</MenuItem>
-            </Select>
-          </FormControl>
-          <FormControl fullWidth>
-            <InputLabel>学部</InputLabel>
-            <Select value={faculty} label="学部" onChange={handleFacultyChange}>
-              {Object.keys(facultiesAndDepartments).map((fac) => (
-                <MenuItem key={fac} value={fac}>
-                  {fac}
-                </MenuItem>
-              ))}
-            </Select>
-          </FormControl>
-          <FormControl fullWidth>
-            <InputLabel>学科 (先に学部を選択して下さい)</InputLabel>
-            <Select
-              value={department}
-              onChange={handleDepartmentChange}
-              disabled={!faculty}
-              label="学科(先に学部を選択して下さい)"
+              <select
+                className="select select-bordered w-full"
+                {...register("department")}
+                disabled={!selectedFaculty}
+              >
+                <option value={""} disabled>
+                  --選択してください--
+                </option>
+                {selectedFaculty &&
+                  facultiesAndDepartments[selectedFaculty].map((dep) => (
+                    <option key={dep} value={dep}>
+                      {dep}
+                    </option>
+                  ))}
+              </select>
+            </Field>
+            <Field
+              fieldName="intro"
+              fieldLabel="自己紹介"
+              error={errors?.intro}
             >
-              {faculty &&
-                facultiesAndDepartments[faculty].map((dep) => (
-                  <MenuItem key={dep} value={dep}>
-                    {dep}
-                  </MenuItem>
-                ))}
-            </Select>
-          </FormControl>
-          <FormControl fullWidth>
-            <TextField
-              multiline
-              label="自己紹介"
-              minRows={3}
-              placeholder="こんにちは！仲良くして下さい！"
-              onChange={(e) => setIntro(e.target.value)}
-            />
-          </FormControl>
-          {errorMessage && (
-            <Box color="red" mb={2}>
-              {errorMessage}
-            </Box>
-          )}
-        </Box>
-      </Box>
-      <Box
-        p={3}
-        sx={{
-          position: "fixed",
-          display: "flex",
-          justifyContent: "space-between",
-          bottom: 0,
-          width: "100%",
-        }}
-      >
-        <span />
-        <button type="button" onClick={save} className="btn btn-primary">
-          {caller === "registration" ? "次へ" : "保存"}
-        </button>
-      </Box>
+              <textarea
+                className="textarea textarea-bordered w-full"
+                rows={5}
+                placeholder="こんにちは！仲良くしてください！"
+                {...register("intro")}
+              />
+            </Field>
+            <div className="flex justify-end">
+              <button type="submit" className="btn btn-primary">
+                {caller === "registration" ? "次へ" : "保存"}
+              </button>
+            </div>
+          </form>
+        </div>
+      </div>
     </>
   );
 }
+
+function Field({
+  fieldLabel,
+  children,
+  error,
+}: {
+  fieldName: string;
+  fieldLabel: string;
+  children: React.ReactNode;
+  error: FieldError | undefined;
+}) {
+  return (
+    <div className="my-2">
+      <div className="text-gray-500 text-sm">{fieldLabel}</div>
+      {children}
+      <div className="text-error text-sm">{error?.message}</div>
+    </div>
+  );
+}
diff --git a/web/app/signup/steps/step2_img.tsx b/web/app/signup/steps/step2_img.tsx
index d9be0c99..29ab191a 100644
--- a/web/app/signup/steps/step2_img.tsx
+++ b/web/app/signup/steps/step2_img.tsx
@@ -1,4 +1,3 @@
-import { Box, Typography } from "@mui/material";
 import { enqueueSnackbar } from "notistack";
 import { useCallback, useState } from "react";
 import type { BackProp, StepProps } from "~/app/signup/common";
@@ -39,11 +38,7 @@ export default function Step2({
 
   return (
     <>
-      <Box m={2} display={"flex"} flexDirection={"column"} gap={2}>
-        <Typography variant="h6" component="h1">
-          アイコンを設定
-        </Typography>
-
+      <div className="g-2 m-2 flex flex-col">
         <div style={{ textAlign: "center", marginTop: "15vh" }}>
           <PhotoModal
             open={open}
@@ -71,24 +66,15 @@ export default function Step2({
             </div>
           </div>
         </div>
-      </Box>
-      <Box
-        p={3}
-        sx={{
-          position: "fixed",
-          display: "flex",
-          justifyContent: "space-between",
-          bottom: 0,
-          width: "100%",
-        }}
-      >
+      </div>
+      <div className="fixed bottom-0 flex w-full justify-between p-6">
         <button type="button" onClick={back} className="btn">
           前へ
         </button>
         <button type="button" onClick={next} className="btn btn-primary">
           {caller === "registration" ? "次へ" : "保存"}
         </button>
-      </Box>
+      </div>
     </>
   );
 }
diff --git a/web/app/signup/steps/step3_confirmation.tsx b/web/app/signup/steps/step3_confirmation.tsx
index 28d50201..e8b9efd3 100644
--- a/web/app/signup/steps/step3_confirmation.tsx
+++ b/web/app/signup/steps/step3_confirmation.tsx
@@ -1,19 +1,8 @@
-import { Box, Typography } from "@mui/material";
 import type { Step1User } from "common/zod/types";
 import type { BackProp, StepProps } from "~/app/signup/common";
-import UserAvatar from "~/components/human/avatar";
+import MockCardFront from "./components/MockCardFront";
 import type { Step2Data } from "./step2_img";
 
-interface UserInfoProp {
-  name: string;
-  gender: string;
-  grade: string;
-  faculty: string;
-  department: string;
-  intro: string;
-  pictureUrl: string;
-}
-
 interface inputDataProps {
   Step1Data: Step1User | undefined;
   Step2Data: Step2Data | undefined;
@@ -37,38 +26,22 @@ export default function Confirmation({
           margin: "20px",
         }}
       >
-        <Typography variant="h6" component="h1" mb={2}>
-          確認
-        </Typography>
-        <Box
-          sx={{
-            display: "flex",
-            flexDirection: "column",
-            alignItems: "center",
-          }}
-        >
-          <CardFront UserInfo={{ ...Step1Data, ...Step2Data }} />
-        </Box>
-        <div
-          style={{
-            display: "flex",
-            flexDirection: "column",
-            alignItems: "center",
-          }}
-        >
+        <h1 className="mb-2 text-xl">確認</h1>
+        <div className="flex flex-col items-center">
+          <MockCardFront
+            displayedUser={{
+              ...Step1Data,
+              ...Step2Data,
+              id: 0,
+              guid: "zero",
+            }}
+          />
+        </div>
+        <div className="flex flex-col items-center">
           <p>この内容で登録しますか？</p>
         </div>
       </div>
-      <Box
-        p={3}
-        sx={{
-          position: "fixed",
-          display: "flex",
-          justifyContent: "space-between",
-          bottom: 0,
-          width: "100%",
-        }}
-      >
+      <div className="fixed bottom-0 flex w-full justify-between p-3">
         <button type="button" onClick={back} className="btn">
           前へ
         </button>
@@ -79,47 +52,7 @@ export default function Confirmation({
         >
           次へ
         </button>
-      </Box>
-    </>
-  );
-}
-
-function CardFront({ UserInfo }: { UserInfo: UserInfoProp }) {
-  return (
-    <div
-      style={{
-        width: "70vw",
-        height: "70vh",
-        position: "relative",
-        backgroundColor: "#F7FCFF",
-        border: "2px solid #3596C6",
-        padding: "10px",
-      }}
-    >
-      <div
-        style={{
-          display: "flex",
-          flexDirection: "row",
-          alignItems: "center",
-          justifyContent: "space-around",
-        }}
-      >
-        <div style={{ width: "50%", maxWidth: "300px", maxHeight: "300px" }}>
-          <UserAvatar
-            pictureUrl={UserInfo?.pictureUrl}
-            width="80%"
-            height="auto"
-          />
-        </div>
-        <p style={{ fontSize: "4vw", fontWeight: "bold" }}>{UserInfo?.name}</p>
       </div>
-      <div style={{ padding: "10px" }}>
-        {UserInfo?.grade && <p>学年： {UserInfo.grade}</p>}
-        {UserInfo?.faculty && <p>学部： {UserInfo.faculty}</p>}
-        {UserInfo?.department && <p>学科： {UserInfo.department}</p>}
-        {UserInfo?.gender && <p>性別： {UserInfo?.gender}</p>}
-        {UserInfo?.intro && <p>自己紹介: {UserInfo.intro}</p>}
-      </div>
-    </div>
+    </>
   );
 }
diff --git a/web/app/signup/steps/step4_course.tsx b/web/app/signup/steps/step4_course.tsx
index a9321dd7..4498e917 100644
--- a/web/app/signup/steps/step4_course.tsx
+++ b/web/app/signup/steps/step4_course.tsx
@@ -6,27 +6,27 @@ import EditableCoursesTable from "~/components/course/EditableCoursesTable";
 export default function Step4() {
   const { state } = useMyID();
   return (
-    <>
-      <div>
+    <div className="flex h-full flex-col">
+      <div className="flex flex-1">
         {state.current === "loading" ? (
           <FullScreenCircularProgress />
         ) : state.current === "error" ? (
           <p>Error: {state.error.message}</p>
         ) : (
-          <div className="mx-4 mt-4 flex flex-col gap-4">
+          <div className="mx-4 mt-4 flex flex-1 flex-col gap-4">
             <h1>授業情報の登録 (スキップ可)</h1>
-            <div>
+            <div className="flex-1">
               <EditableCoursesTable userId={state.data} />
             </div>
           </div>
         )}
       </div>
-      <div className="b-0 fixed flex w-full justify-between p-6">
+      <div className="flex w-full justify-between p-6">
         <span />
         <Link href="/tutorial" className="btn btn-primary">
           次へ
         </Link>
       </div>
-    </>
+    </div>
   );
 }
diff --git a/web/bun.lockb b/web/bun.lockb
index c2057c23..42311a17 100755
Binary files a/web/bun.lockb and b/web/bun.lockb differ
diff --git a/web/components/Card.tsx b/web/components/Card.tsx
index e81fc16c..8b2c2c1e 100644
--- a/web/components/Card.tsx
+++ b/web/components/Card.tsx
@@ -10,7 +10,7 @@ interface CardProps {
   onFlip?: (isBack: boolean) => void;
 }
 
-const CardFront = ({ displayedUser, currentUser }: CardProps) => {
+export const CardFront = ({ displayedUser, currentUser }: CardProps) => {
   const containerRef = useRef<HTMLDivElement>(null);
   const interestsContainerRef = useRef<HTMLDivElement>(null);
   const coursesContainerRef = useRef<HTMLDivElement>(null);
@@ -183,10 +183,12 @@ const CardBack = ({ displayedUser, currentUser }: CardProps) => {
       <div className="flex justify-center">
         <p className="font-bold text-lg">{displayedUser?.name}</p>
       </div>
-      <NonEditableCoursesTable
-        userId={displayedUser.id}
-        comparisonUserId={currentUser.id}
-      />
+      <div className="flex-1">
+        <NonEditableCoursesTable
+          userId={displayedUser.id}
+          comparisonUserId={currentUser.id}
+        />
+      </div>
       <div className="mt-4 flex justify-center">
         <ThreeSixtyIcon className="text-3xl" />
       </div>
diff --git a/web/components/config/PhotoPreview.tsx b/web/components/config/PhotoPreview.tsx
index beb1784f..f8346ca0 100644
--- a/web/components/config/PhotoPreview.tsx
+++ b/web/components/config/PhotoPreview.tsx
@@ -1,4 +1,3 @@
-import { Button } from "@mui/material";
 import {
   type ChangeEvent,
   useCallback,
@@ -19,21 +18,14 @@ type ButtonProps = {
 export function PhotoPreviewButton({ text, onSelect }: ButtonProps) {
   const inputRef: React.LegacyRef<HTMLInputElement> = useRef(null);
   return (
-    <Button
-      variant="contained"
-      component="label"
-      style={{
-        backgroundColor: "#039BE5",
-        color: "white",
-        width: "70vw",
-        maxWidth: "500px",
-        height: "50px",
-        marginTop: "10vh",
-        fontSize: "18px",
-      }}
+    <label
+      className="btn btn-primary mt-[10vh] h-12 w-[70vw] font-normal font-sans text-lg text-white"
       onClick={() => {
         if (inputRef.current) inputRef.current.value = "";
       }}
+      onKeyDown={() => {
+        if (inputRef.current) inputRef.current.value = "";
+      }}
     >
       {text || "写真を選択"}
       <input
@@ -49,7 +41,7 @@ export function PhotoPreviewButton({ text, onSelect }: ButtonProps) {
         accept=".png, .jpeg, .jpg"
         style={{ display: "none" }}
       />
-    </Button>
+    </label>
   );
 }
 
diff --git a/web/components/course/components/CourseDeleteConfirmDialog.tsx b/web/components/course/components/CourseDeleteConfirmDialog.tsx
deleted file mode 100644
index 63397ae9..00000000
--- a/web/components/course/components/CourseDeleteConfirmDialog.tsx
+++ /dev/null
@@ -1,79 +0,0 @@
-import type { Course } from "common/types";
-import { useEffect, useState } from "react";
-import { deleteMyCourse, getMyCoursesOverlapWith } from "~/api/course";
-
-export default function CourseDeleteRegisterConfirmDialog({
-  open,
-  onClose,
-  course,
-  handleSelectDialogClose,
-  handleCoursesUpdate,
-}: {
-  open: boolean;
-  onClose: () => void;
-  course: Course | null;
-  handleSelectDialogClose: () => void;
-  handleCoursesUpdate: (courses: Course[]) => void;
-}) {
-  const [overlapCourses, setOverlapCourses] = useState<Course[]>([]);
-  const [isLoading, setIsLoading] = useState(false);
-
-  useEffect(() => {
-    if (!course) return;
-
-    setIsLoading(true);
-    setOverlapCourses([]);
-
-    (async () => {
-      const courses = await getMyCoursesOverlapWith(course.id);
-      setOverlapCourses(courses);
-      setIsLoading(false);
-    })();
-  }, [course]);
-
-  return (
-    <div className={`modal ${open ? "modal-open" : ""}`}>
-      <div className="modal-box">
-        <h3 className="font-bold text-lg">削除の確認</h3>
-        <p className="py-4">次の授業を削除します。よろしいですか？</p>
-        <div className="mt-2">
-          {isLoading ? (
-            <div className="alert alert-info">読み込み中...</div>
-          ) : (
-            <div className="alert alert-error">
-              {`削除: ${
-                overlapCourses
-                  .map(
-                    (overlapCourse) =>
-                      `${overlapCourse.name} (${overlapCourse.teacher})`,
-                  )
-                  .join("・") || "なし"
-              }`}
-            </div>
-          )}
-        </div>
-        <div className="modal-action">
-          {/* biome-ignore lint/a11y/useButtonType: <explanation> */}
-          <button className="btn btn-ghost" onClick={onClose}>
-            キャンセル
-          </button>
-          {course && (
-            // biome-ignore lint/a11y/useButtonType: <explanation>
-            <button
-              className="btn btn-primary"
-              onClick={async () => {
-                const newCourses = await deleteMyCourse(course.id);
-                handleCoursesUpdate(newCourses);
-
-                onClose();
-                handleSelectDialogClose();
-              }}
-            >
-              確定
-            </button>
-          )}
-        </div>
-      </div>
-    </div>
-  );
-}
diff --git a/web/components/course/components/CourseRegisterConfirmDialog.tsx b/web/components/course/components/CourseRegisterConfirmDialog.tsx
index d6e4eeab..63198846 100644
--- a/web/components/course/components/CourseRegisterConfirmDialog.tsx
+++ b/web/components/course/components/CourseRegisterConfirmDialog.tsx
@@ -1,17 +1,25 @@
 import type { Course } from "common/types";
 import { useEffect, useState } from "react";
-import { addMyCourse, getMyCoursesOverlapWith } from "~/api/course";
+import { MdAddCircleOutline } from "react-icons/md";
+import { MdRemoveCircleOutline } from "react-icons/md";
+import {
+  addMyCourse,
+  deleteMyCourse,
+  getMyCoursesOverlapWith,
+} from "~/api/course";
 
 export default function CourseRegisterConfirmDialog({
   open,
   onClose,
-  course,
+  mode,
+  courseToAddOrDelete,
   handleSelectDialogClose,
   handleCoursesUpdate,
 }: {
   open: boolean;
   onClose: () => void;
-  course: Course | null;
+  mode: "add" | "delete";
+  courseToAddOrDelete: Course;
   handleSelectDialogClose: () => void;
   handleCoursesUpdate: (courses: Course[]) => void;
 }) {
@@ -19,42 +27,61 @@ export default function CourseRegisterConfirmDialog({
   const [isLoading, setIsLoading] = useState(false);
 
   useEffect(() => {
-    if (!course) return;
-
+    if (!courseToAddOrDelete) return;
     setIsLoading(true);
     setOverlapCourses([]);
-
     (async () => {
-      const courses = await getMyCoursesOverlapWith(course.id);
+      const courses = await getMyCoursesOverlapWith(courseToAddOrDelete.id);
       setOverlapCourses(courses);
       setIsLoading(false);
     })();
-  }, [course]);
+  }, [courseToAddOrDelete]);
+
+  const coursesToBeDeletedString = overlapCourses
+    .map((overlapCourse) => `${overlapCourse.name} (${overlapCourse.teacher})`)
+    .join("・");
 
   return (
     <div className={`modal ${open ? "modal-open" : ""}`}>
       <div className="modal-box">
-        <h3 className="font-bold text-lg">変更の確認</h3>
-        <p className="py-4">次のように変更します。よろしいですか？</p>
+        <h3 className="font-bold text-lg">
+          {mode === "add" ? "変更" : "削除"}の確認
+        </h3>
+        <p className="py-4">
+          {mode === "add" ? "次のように変更" : "次の授業を削除"}
+          します。よろしいですか？
+        </p>
         <div className="mt-2 space-y-2">
-          {course && (
-            <div className="alert alert-success">
-              {`追加: ${course.name} (${course.teacher})`}
+          {courseToAddOrDelete && mode === "add" ? (
+            <div className="bg-green-100 px-4 py-2">
+              <div className="flex items-center text-gray-500">
+                <MdAddCircleOutline />
+                <span>追加</span>
+              </div>
+              <p className="text-md">{`${courseToAddOrDelete.name} (${courseToAddOrDelete.teacher})`}</p>
+            </div>
+          ) : (
+            <div className="bg-red-100 px-4 py-2">
+              <div className="flex items-center text-gray-500">
+                <MdRemoveCircleOutline />
+                <span>削除</span>
+              </div>
+              <p className="text-md">{`${courseToAddOrDelete.name} (${courseToAddOrDelete.teacher})`}</p>
             </div>
           )}
           {isLoading ? (
-            <div className="alert alert-info">読み込み中...</div>
+            <div className="px-4 py-2">読み込み中...</div>
           ) : (
-            <div className="alert alert-error">
-              {`削除: ${
-                overlapCourses
-                  .map(
-                    (overlapCourse) =>
-                      `${overlapCourse.name} (${overlapCourse.teacher})`,
-                  )
-                  .join("・") || "なし"
-              }`}
-            </div>
+            mode === "add" &&
+            coursesToBeDeletedString && (
+              <div className="bg-red-100 px-4 py-2">
+                <div className="flex items-center text-gray-500">
+                  <MdRemoveCircleOutline />
+                  <span>削除</span>
+                </div>
+                <p className="text-md">{coursesToBeDeletedString}</p>
+              </div>
+            )
           )}
         </div>
         <div className="modal-action">
@@ -62,13 +89,20 @@ export default function CourseRegisterConfirmDialog({
           <button className="btn btn-ghost" onClick={onClose}>
             キャンセル
           </button>
-          {course && (
+          {courseToAddOrDelete && (
             // biome-ignore lint/a11y/useButtonType: <explanation>
             <button
               className="btn btn-primary"
               onClick={async () => {
-                const newCourses = await addMyCourse(course.id);
-                handleCoursesUpdate(newCourses);
+                if (mode === "add") {
+                  const newCourses = await addMyCourse(courseToAddOrDelete.id);
+                  handleCoursesUpdate(newCourses);
+                } else {
+                  const newCourses = await deleteMyCourse(
+                    courseToAddOrDelete.id,
+                  );
+                  handleCoursesUpdate(newCourses);
+                }
                 onClose();
                 handleSelectDialogClose();
               }}
diff --git a/web/components/course/components/CoursesTableCore/index.tsx b/web/components/course/components/CoursesTableCore/index.tsx
index dba0587e..f338a199 100644
--- a/web/components/course/components/CoursesTableCore/index.tsx
+++ b/web/components/course/components/CoursesTableCore/index.tsx
@@ -1,8 +1,6 @@
 import { ACTIVE_DAYS, DAY_TO_JAPANESE_MAP } from "common/consts";
 import type { Course, Day } from "common/types";
 import { useCallback, useEffect, useState } from "react";
-import { truncateStr } from "./lib";
-import styles from "./styles.module.css";
 
 type Props =
   | {
@@ -87,22 +85,43 @@ export default function CoursesTableCore(props: Props) {
   }, [props.courses, props.comparisonCourses, transformCoursesToRows]);
 
   return (
-    <table className={styles.table}>
-      <thead>
-        <tr>
-          <th />
-          {ACTIVE_DAYS.map((activeDay) => (
-            <th align="center" key={`header-${activeDay}`}>
-              {DAY_TO_JAPANESE_MAP.get(activeDay as Day)}
-            </th>
+    <div className="flex h-full flex-col">
+      <div
+        className="grid h-[3vh] grid-rows-1 gap-1"
+        style={{
+          gridTemplateColumns: `3vh repeat(${ACTIVE_DAYS.length}, minmax(0, 1fr))`,
+        }}
+      >
+        <span className="rounded-sm bg-gray-100" />
+        {ACTIVE_DAYS.map((activeDay) => (
+          <span
+            key={`header-${activeDay}`}
+            className="inline-flex items-center justify-center rounded-sm bg-gray-100 text-center text-xs"
+          >
+            {DAY_TO_JAPANESE_MAP.get(activeDay as Day)}
+          </span>
+        ))}
+      </div>
+      <div className="mt-1 flex flex-1 gap-1">
+        <div className="flex h-full w-[3vh] flex-col gap-1">
+          {Array.from({ length: 6 }, (_, i) => (
+            <span
+              key={`period-${i + 1}`}
+              className="inline-flex flex-1 items-center justify-center rounded-sm bg-gray-100 text-xs"
+            >
+              {i + 1}
+            </span>
           ))}
-        </tr>
-      </thead>
-      <tbody>
-        {rows.map((row, rowIndex) => (
-          <tr key={`period-${rowIndex + 1}`}>
-            <th key={`header-period-${rowIndex + 1}`}>{rowIndex + 1}</th>
-            {ACTIVE_DAYS.map((day) => (
+        </div>
+        <div
+          className="grid flex-1 grid-rows-6 gap-1"
+          style={{
+            gridTemplateColumns: `repeat(${ACTIVE_DAYS.length}, minmax(0, 1fr))`,
+          }}
+        >
+          {/* TODO: grid-auto-flow: column; で縦方向に流すほうが余計な変形ロジックが減りそう */}
+          {rows.map((row, rowIndex) =>
+            ACTIVE_DAYS.map((day) => (
               <Cell
                 key={`cell-${day}-${rowIndex.toString()}`}
                 courseName={row[day]?.name ?? null}
@@ -115,11 +134,11 @@ export default function CoursesTableCore(props: Props) {
                     : undefined
                 }
               />
-            ))}
-          </tr>
-        ))}
-      </tbody>
-    </table>
+            )),
+          )}
+        </div>
+      </div>
+    </div>
   );
 }
 
@@ -138,64 +157,54 @@ function Cell({
 }) {
   const content = (
     <>
-      <p
+      <span
         style={{
           margin: 0,
           overflow: "hidden",
           display: "-webkit-box",
           WebkitBoxOrient: "vertical",
-          WebkitLineClamp: 2,
-          lineClamp: 2,
+          WebkitLineClamp: 3,
+          lineClamp: 3,
           textOverflow: "ellipsis",
         }}
       >
-        {courseName ? truncateStr(courseName ?? "", 16) : ""}
-      </p>
-      <p
+        {courseName}
+      </span>
+      <span
         style={{
           margin: 0,
           overflow: "hidden",
           display: "-webkit-box",
           WebkitBoxOrient: "vertical",
-          WebkitLineClamp: 2,
-          lineClamp: 2,
+          WebkitLineClamp: 1,
+          lineClamp: 1,
           textOverflow: "ellipsis",
         }}
       >
-        {teacherName ? truncateStr(teacherName ?? "", 6) : ""}
-      </p>
+        {teacherName}
+      </span>
     </>
   );
 
   return (
-    <td align="center">
+    <span
+      className={`inline-flex h-full w-full flex-1 items-center justify-center rounded-sm p-0.5 text-xs ${
+        !courseName
+          ? "bg-gray-50"
+          : isOverlapping
+            ? "bg-[#FFF1BF]"
+            : "bg-[#F7FCFF]"
+      }`}
+    >
       {isButton ? (
-        <button
-          type="button"
-          className={
-            isOverlapping
-              ? styles.overlapped
-              : courseName
-                ? styles.enrolled
-                : ""
-          }
-          onClick={onClick}
-        >
+        <button type="button" onClick={onClick} className="h-full w-full">
           {content}
         </button>
       ) : (
-        <div
-          className={
-            isOverlapping
-              ? styles.overlapped
-              : courseName
-                ? styles.enrolled
-                : ""
-          }
-        >
+        <span className="inline-flex h-full w-full flex-col justify-around text-center">
           {content}
-        </div>
+        </span>
       )}
-    </td>
+    </span>
   );
 }
diff --git a/web/components/course/components/CoursesTableCore/lib.ts b/web/components/course/components/CoursesTableCore/lib.ts
deleted file mode 100644
index fc7c4aea..00000000
--- a/web/components/course/components/CoursesTableCore/lib.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export function truncateStr(str: string, maxLength: number) {
-  return str.length > maxLength ? `${str.slice(0, maxLength - 1)}...` : str;
-}
diff --git a/web/components/course/components/CoursesTableCore/styles.module.css b/web/components/course/components/CoursesTableCore/styles.module.css
index cddcdcc5..c3eceaa1 100644
--- a/web/components/course/components/CoursesTableCore/styles.module.css
+++ b/web/components/course/components/CoursesTableCore/styles.module.css
@@ -1,4 +1,4 @@
-.table {
+/* .table {
   width: 100%;
   table-layout: fixed;
   border-collapse: collapse;
@@ -61,4 +61,4 @@
 
 .spaceAround {
   justify-content: space-around;
-}
+} */
diff --git a/web/components/course/components/SelectCourseDialog.tsx b/web/components/course/components/SelectCourseDialog.tsx
index b6f52515..7d5b318d 100644
--- a/web/components/course/components/SelectCourseDialog.tsx
+++ b/web/components/course/components/SelectCourseDialog.tsx
@@ -2,7 +2,6 @@ import { DAY_TO_JAPANESE_MAP } from "common/consts";
 import type { Course, Day } from "common/types";
 import { useEffect, useState } from "react";
 import courseApi from "~/api/course";
-import CourseDeleteConfirmDialog from "./CourseDeleteConfirmDialog";
 import CourseRegisterConfirmDialog from "./CourseRegisterConfirmDialog";
 
 export default function SelectCourseDialog({
@@ -25,9 +24,9 @@ export default function SelectCourseDialog({
     Course[]
   >([]);
   const [newCourse, setNewCourse] = useState<Course | null>(null);
-  const [isConfirmDialogOpen, setIsConfirmDialogOpen] = useState(false);
-  const [isDeleteConfirmDialogOpen, setIsDeleteConfirmDialogOpen] =
-    useState(false);
+  const [confirmDialogStatus, setConfirmDialogStatus] = useState<
+    "closed" | "add" | "delete"
+  >("closed");
 
   useEffect(() => {
     (async () => {
@@ -69,14 +68,13 @@ export default function SelectCourseDialog({
                     currentEdit?.course?.teacher ?? "-"
                   } / ${currentEdit?.course?.id ?? "-"}`}</p>
                 </div>
-                {/* biome-ignore lint/a11y/useButtonType: <explanation> */}
                 <button
-                  className="btn btn-sm btn-error"
+                  type="button"
+                  className="btn btn-sm"
                   onClick={async () => {
                     if (!currentEdit?.course?.id) return;
-
                     setNewCourse(currentEdit.course);
-                    setIsDeleteConfirmDialogOpen(true);
+                    setConfirmDialogStatus("delete");
                   }}
                 >
                   削除
@@ -111,7 +109,7 @@ export default function SelectCourseDialog({
                   className="cursor-pointer rounded-lg border p-2 hover:bg-gray-100"
                   onClick={() => {
                     setNewCourse(course);
-                    setIsConfirmDialogOpen(true);
+                    setConfirmDialogStatus("add");
                   }}
                 >
                   <p>{course.name}</p>
@@ -123,26 +121,20 @@ export default function SelectCourseDialog({
         </div>
 
         <div className="modal-action">
-          {/* biome-ignore lint/a11y/useButtonType: <explanation> */}
-          <button className="btn btn-primary" onClick={onClose}>
+          <button type="button" className="btn btn-primary" onClick={onClose}>
             閉じる
           </button>
         </div>
 
         {newCourse && (
           <CourseRegisterConfirmDialog
-            open={isConfirmDialogOpen}
-            onClose={() => setIsConfirmDialogOpen(false)}
-            course={newCourse}
-            handleSelectDialogClose={onClose}
-            handleCoursesUpdate={handleCoursesUpdate}
-          />
-        )}
-        {newCourse && (
-          <CourseDeleteConfirmDialog
-            open={isDeleteConfirmDialogOpen}
-            onClose={() => setIsDeleteConfirmDialogOpen(false)}
-            course={newCourse}
+            open={confirmDialogStatus !== "closed"}
+            onClose={() => {
+              setConfirmDialogStatus("closed");
+              setNewCourse(null);
+            }}
+            courseToAddOrDelete={newCourse}
+            mode={confirmDialogStatus === "delete" ? "delete" : "add"}
             handleSelectDialogClose={onClose}
             handleCoursesUpdate={handleCoursesUpdate}
           />
diff --git a/web/package.json b/web/package.json
index e7810dca..74a9903d 100644
--- a/web/package.json
+++ b/web/package.json
@@ -13,6 +13,7 @@
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.5",
     "@fontsource/roboto": "^5.0.13",
+    "@hookform/resolvers": "^3.9.1",
     "@mui/icons-material": "^5.16.7",
     "@mui/material": "^5.15.20",
     "devalue": "^5.1.1",
@@ -23,6 +24,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-easy-crop": "^5.0.8",
+    "react-hook-form": "^7.53.2",
     "react-icons": "^5.3.0",
     "socket.io-client": "^4.7.5",
     "swiper": "^11.1.14",