diff --git a/web/README.md b/web/README.md
deleted file mode 100644
index bb156850..00000000
--- a/web/README.md
+++ /dev/null
@@ -1,30 +0,0 @@
-# React + TypeScript + Vite
-
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
-
-Currently, two official plugins are available:
-
-- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
-
-## Expanding the ESLint configuration
-
-If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
-
-- Configure the top-level `parserOptions` property like this:
-
-```js
-export default {
-  // other rules...
-  parserOptions: {
-    ecmaVersion: "latest",
-    sourceType: "module",
-    project: ["./tsconfig.json", "./tsconfig.node.json"],
-    tsconfigRootDir: __dirname,
-  },
-};
-```
-
-- Replace `plugin:@typescript-eslint/recommended` to `plugin:@typescript-eslint/recommended-type-checked` or `plugin:@typescript-eslint/strict-type-checked`
-- Optionally add `plugin:@typescript-eslint/stylistic-type-checked`
-- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and add `plugin:react/recommended` & `plugin:react/jsx-runtime` to the `extends` list
diff --git a/web/app/chat/layout.tsx b/web/app/chat/layout.tsx
index e2ec6414..a2c62fd9 100644
--- a/web/app/chat/layout.tsx
+++ b/web/app/chat/layout.tsx
@@ -11,7 +11,7 @@ export default function Layout({
     <>
       <Header title="チャット" />
       <NavigateByAuthState type="toLoginForUnauthenticated">
-        <div className="flex-1 overflow-hidden">{children}</div>
+        <div className="h-full overflow-y-auto pt-12 pb-12">{children}</div>
       </NavigateByAuthState>
       <BottomBar activeTab="3_chat" />
     </>
diff --git a/web/app/friends/layout.tsx b/web/app/friends/layout.tsx
index 3d04d451..b5295993 100644
--- a/web/app/friends/layout.tsx
+++ b/web/app/friends/layout.tsx
@@ -11,7 +11,7 @@ export default function Layout({
     <>
       <Header title="フレンド" />
       <NavigateByAuthState type="toLoginForUnauthenticated">
-        <div className="grow overflow-y-auto">{children}</div>
+        <div className="h-full overflow-y-auto pt-12 pb-12">{children}</div>
       </NavigateByAuthState>
       <BottomBar activeTab="1_friends" />
     </>
diff --git a/web/app/friends/page.tsx b/web/app/friends/page.tsx
index 6a105cdc..ce2a859e 100644
--- a/web/app/friends/page.tsx
+++ b/web/app/friends/page.tsx
@@ -15,11 +15,11 @@ export default function Friends() {
   const [activeTab, setActiveTab] = useState("matching");
 
   return (
-    <div className="w-full">
-      <div className="flex w-full border-gray-200 border-b">
+    <div className="relative w-full">
+      <div className="fixed top-12 flex h-10 w-full border-gray-200 border-b bg-white">
         <button
           type="button"
-          className={`relative flex-1 py-3 text-center ${
+          className={`relative flex-1 text-center ${
             activeTab === "matching" ? "text-primary" : "text-gray-600"
           }`}
           onClick={() => setActiveTab("matching")}
@@ -31,7 +31,7 @@ export default function Friends() {
         </button>
         <button
           type="button"
-          className={`relative flex-1 py-2 text-center ${
+          className={`relative flex-1 text-center ${
             activeTab === "request" ? "text-primary" : "text-gray-600"
           }`}
           onClick={() => setActiveTab("request")}
@@ -43,7 +43,7 @@ export default function Friends() {
         </button>
       </div>
 
-      <div className="text-center text-gray-700 text-lg">
+      <div className="pt-10 text-center text-gray-700 text-lg">
         {activeTab === "matching" ? <NoSSRMatchings /> : <NoSSRRequests />}
       </div>
     </div>
diff --git a/web/app/home/components/RoundButton.tsx b/web/app/home/components/RoundButton.tsx
new file mode 100644
index 00000000..c1b92116
--- /dev/null
+++ b/web/app/home/components/RoundButton.tsx
@@ -0,0 +1,16 @@
+interface RoundButtonProps {
+  onclick: () => void;
+  icon: React.ReactNode;
+}
+
+export default function RoundButton({ onclick, icon }: RoundButtonProps) {
+  return (
+    <button
+      type="button"
+      onClick={onclick}
+      className="btn btn-circle bg-white shadow-md"
+    >
+      {icon}
+    </button>
+  );
+}
diff --git a/web/app/home/layout.tsx b/web/app/home/layout.tsx
index cea0d39f..ec50a110 100644
--- a/web/app/home/layout.tsx
+++ b/web/app/home/layout.tsx
@@ -11,7 +11,7 @@ export default function Layout({
     <>
       <Header />
       <NavigateByAuthState type="toLoginForUnauthenticated">
-        <div className="grow overflow-y-auto ">{children}</div>
+        <div className="h-full pt-12 pb-12">{children}</div>
       </NavigateByAuthState>
       <BottomBar activeTab="0_home" />
     </>
diff --git a/web/app/home/page.tsx b/web/app/home/page.tsx
index 274721ec..aed25364 100644
--- a/web/app/home/page.tsx
+++ b/web/app/home/page.tsx
@@ -1,10 +1,9 @@
 "use client";
 
-import CloseIcon from "@mui/icons-material/Close";
 import type { UserWithCoursesAndSubjects } from "common/types";
 import { motion, useAnimation } from "framer-motion";
 import { useCallback, useEffect, useState } from "react";
-import { MdThumbUp } from "react-icons/md";
+import { MdClose, MdThumbUp } from "react-icons/md";
 import request from "~/api/request";
 import { useAboutMe, useRecommended } from "~/api/user";
 import { Card } from "~/components/Card";
@@ -12,6 +11,7 @@ import { DraggableCard } from "~/components/DraggableCard";
 import FullScreenCircularProgress from "~/components/common/FullScreenCircularProgress";
 import NoMoreUser from "./components/NoMoreUser";
 import PersonDetailedMenu from "./components/PersonDetailedMenu";
+import RoundButton from "./components/RoundButton";
 
 export default function Home() {
   const { data, error } = useRecommended();
@@ -133,14 +133,14 @@ export default function Home() {
               </motion.div>
             </div>
           )}
-          <div className="button-container mt-4 mb-4 flex w-full justify-center space-x-8">
-            <CloseButton
+          <div className="mt-2 mb-4 flex w-full justify-around px-8">
+            <RoundButton
               onclick={() => handleAction("reject")}
-              icon={<CloseIconStyled />}
+              icon={<MdClose className="text-3xl text-gray-500" />}
             />
-            <GoodButton
+            <RoundButton
               onclick={() => handleAction("accept")}
-              icon={<FavoriteIconStyled />}
+              icon={<MdThumbUp className="text-3xl text-primary" />}
             />
           </div>
           {openDetailedMenu && (
@@ -158,36 +158,6 @@ export default function Home() {
   );
 }
 
-interface RoundButtonProps {
-  onclick: () => void;
-  icon: JSX.Element;
-}
-
-const CloseButton = ({ onclick, icon }: RoundButtonProps) => (
-  <button
-    type="button"
-    onClick={onclick}
-    className="btn btn-circle bg-white shadow-md"
-  >
-    {icon}
-  </button>
-);
-const GoodButton = ({ onclick, icon }: RoundButtonProps) => (
-  <button
-    type="button"
-    onClick={onclick}
-    className="btn btn-circle bg-white shadow-md"
-  >
-    {icon}
-  </button>
-);
-
-const CloseIconStyled = () => <CloseIcon className="text-4xl text-gray-500" />;
-
-const FavoriteIconStyled = () => (
-  <MdThumbUp className="text-3xl text-primary" />
-);
-
 class Queue<T> {
   private store: T[];
   constructor(initial: T[]) {
diff --git a/web/app/layout.tsx b/web/app/layout.tsx
index f1825a4a..254ffcf8 100644
--- a/web/app/layout.tsx
+++ b/web/app/layout.tsx
@@ -30,14 +30,14 @@ export default function RootLayout({
   children: React.ReactNode;
 }) {
   return (
-    <html lang="en">
+    <html lang="en" className="h-full">
       <head>
         <meta charSet="UTF-8" />
         <link rel="icon" type="image/svg+xml" href="/course-mate-icon.svg" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
         <title>CourseMate</title>
       </head>
-      <body>
+      <body className="h-full">
         <ThemeProvider theme={theme}>
           <CssBaseline />
           <SnackbarProvider
@@ -50,7 +50,7 @@ export default function RootLayout({
                 <AlertProvider>
                   <ModalProvider>
                     <BanLandscape />
-                    <div className="flex h-screen flex-col">{children}</div>
+                    {children}
                   </ModalProvider>
                 </AlertProvider>
               </AuthProvider>
diff --git a/web/app/search/layout.tsx b/web/app/search/layout.tsx
index 05bcccd1..3f75b04d 100644
--- a/web/app/search/layout.tsx
+++ b/web/app/search/layout.tsx
@@ -11,7 +11,7 @@ export default function Layout({
     <>
       <Header title="検索" />
       <NavigateByAuthState type="toLoginForUnauthenticated">
-        <div className="grow overflow-y-auto">{children}</div>
+        <div className="h-full overflow-y-auto pt-12 pb-12">{children}</div>
       </NavigateByAuthState>
       <BottomBar activeTab="2_search" />
     </>
diff --git a/web/app/search/page.tsx b/web/app/search/page.tsx
index 0eab8192..f1114915 100644
--- a/web/app/search/page.tsx
+++ b/web/app/search/page.tsx
@@ -54,7 +54,7 @@ export default function SearchPage({
   );
 
   return (
-    <div className="flex min-h-screen justify-center ">
+    <div className="flex justify-center">
       <div className="w-full">
         <h2 className="m-5 mb-4 font-bold text-2xl">ユーザー検索</h2>
         <Search placeholder="検索" setSearchString={setQuery} />
diff --git a/web/app/settings/card/page.tsx b/web/app/settings/card/page.tsx
index 9db4c642..888c6df6 100644
--- a/web/app/settings/card/page.tsx
+++ b/web/app/settings/card/page.tsx
@@ -35,7 +35,7 @@ export default function SettingsProfile() {
                 style={{
                   // (画面幅 - カード幅) / 2 - profile の padding
                   marginRight:
-                    "calc(calc(calc(100vw - min(40dvh, 87.5vw)) / 2) - 8px)",
+                    "calc(calc(calc(100vw - min(50dvh, 87.5vw)) / 2) - 8px)",
                 }}
               >
                 <MdEdit className="text-lg" />
diff --git a/web/app/settings/courses/page.tsx b/web/app/settings/courses/page.tsx
index 66e20fe7..b86b3e86 100644
--- a/web/app/settings/courses/page.tsx
+++ b/web/app/settings/courses/page.tsx
@@ -14,7 +14,7 @@ export default function EditCourses() {
   if (error) throw error;
 
   return (
-    <div className="mx-auto my-0 flex h-full max-w-[350] flex-col p-2 text-center">
+    <div className="my-0 flex h-full max-w-[350] flex-col p-2 text-center">
       <h1 className="mb-2 text-xl">授業編集</h1>
       {loading ? (
         <FullScreenCircularProgress />
diff --git a/web/app/settings/layout.tsx b/web/app/settings/layout.tsx
index 51944af2..0dfbe9fc 100644
--- a/web/app/settings/layout.tsx
+++ b/web/app/settings/layout.tsx
@@ -11,7 +11,7 @@ export default function Layout({
     <>
       <Header title="設定" />
       <NavigateByAuthState type="toLoginForUnauthenticated">
-        <div className="grow overflow-y-auto">{children}</div>
+        <div className="h-full overflow-y-auto pt-12 pb-12">{children}</div>
       </NavigateByAuthState>
       <BottomBar activeTab="4_settings" />
     </>
diff --git a/web/app/settings/profile/page.tsx b/web/app/settings/profile/page.tsx
index 09290079..e4971a47 100644
--- a/web/app/settings/profile/page.tsx
+++ b/web/app/settings/profile/page.tsx
@@ -82,7 +82,7 @@ function EditProfile({ defaultValues }: { defaultValues: User }) {
 
   const values = getValues();
   return (
-    <div className="flex h-full flex-col">
+    <div>
       <form onSubmit={handleSubmit(submit)}>
         <div className="flex flex-col gap-2 p-2">
           <div>
diff --git a/web/app/signup/page.tsx b/web/app/signup/page.tsx
index 9b8dbf11..99b3e3d9 100644
--- a/web/app/signup/page.tsx
+++ b/web/app/signup/page.tsx
@@ -79,13 +79,13 @@ function Registration() {
 }
 export default function RegistrationPage() {
   return (
-    <NavigateByAuthState type="toHomeForAuthenticated">
-      <div className="flex h-screen flex-col">
-        <Header title="登録" />
-        <div className="flex-1">
+    <>
+      <Header title="登録" />
+      <NavigateByAuthState type="toHomeForAuthenticated">
+        <div className="h-full pt-12">
           <Registration />
         </div>
-      </div>
-    </NavigateByAuthState>
+      </NavigateByAuthState>
+    </>
   );
 }
diff --git a/web/app/signup/steps/components/MockCardFront.tsx b/web/app/signup/steps/components/MockCardFront.tsx
deleted file mode 100644
index 6f7cfe23..00000000
--- a/web/app/signup/steps/components/MockCardFront.tsx
+++ /dev/null
@@ -1,63 +0,0 @@
-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 4b84521e..d31ac639 100644
--- a/web/app/signup/steps/step1_profile.tsx
+++ b/web/app/signup/steps/step1_profile.tsx
@@ -43,7 +43,7 @@ export default function Step1({ onSave, prev, caller }: StepProps<Step1User>) {
   }, [selectedFaculty, setValue, resetField]);
   return (
     <>
-      <div className="m-4 flex h-full flex-col gap-4">
+      <div className="flex h-full flex-col gap-4 p-4">
         <h1 className="text-xl">アカウント設定</h1>
         <div className="flex flex-col gap-2">
           <form onSubmit={handleSubmit(onSubmit)}>
diff --git a/web/app/signup/steps/step2_img.tsx b/web/app/signup/steps/step2_img.tsx
index 29ab191a..e392051e 100644
--- a/web/app/signup/steps/step2_img.tsx
+++ b/web/app/signup/steps/step2_img.tsx
@@ -38,7 +38,7 @@ export default function Step2({
 
   return (
     <>
-      <div className="g-2 m-2 flex flex-col">
+      <div className="g-2 flex flex-col p-2">
         <div style={{ textAlign: "center", marginTop: "15vh" }}>
           <PhotoModal
             open={open}
diff --git a/web/app/signup/steps/step3_confirmation.tsx b/web/app/signup/steps/step3_confirmation.tsx
index e8b9efd3..47f669ad 100644
--- a/web/app/signup/steps/step3_confirmation.tsx
+++ b/web/app/signup/steps/step3_confirmation.tsx
@@ -1,6 +1,6 @@
 import type { Step1User } from "common/zod/types";
 import type { BackProp, StepProps } from "~/app/signup/common";
-import MockCardFront from "./components/MockCardFront";
+import CardBasicInfo from "~/components/CardBasicInfo";
 import type { Step2Data } from "./step2_img";
 
 interface inputDataProps {
@@ -18,30 +18,28 @@ export default function Confirmation({
     throw new Error("don't skip the steps");
   }
   return (
-    <>
-      <div
-        style={{
-          display: "flex",
-          flexDirection: "column",
-          margin: "20px",
-        }}
-      >
-        <h1 className="mb-2 text-xl">確認</h1>
-        <div className="flex flex-col items-center">
-          <MockCardFront
+    <div className="px-8 py-2">
+      <h1 className="mb-2 text-xl">確認</h1>
+      <p>以下の内容で登録する場合は「次へ」を押してください。</p>
+      <h3 className="pt-4 text-lg">基本情報</h3>
+      <div className="flex flex-col items-center py-4">
+        <div
+          className="rounded-md border-2 border-primary bg-secondary p-5"
+          style={{ width: "min(50dvh, 87.5vw)" }}
+        >
+          <CardBasicInfo
             displayedUser={{
               ...Step1Data,
               ...Step2Data,
-              id: 0,
-              guid: "zero",
+              id: 0, // dummy
+              guid: "zero", // dummy
             }}
           />
         </div>
-        <div className="flex flex-col items-center">
-          <p>この内容で登録しますか？</p>
-        </div>
       </div>
-      <div className="fixed bottom-0 flex w-full justify-between p-3">
+      <h3 className="pt-4 text-lg">自己紹介</h3>
+      <p className="pt-2">{Step1Data.intro}</p>
+      <div className="fixed bottom-0 left-0 flex w-full justify-between p-3">
         <button type="button" onClick={back} className="btn">
           前へ
         </button>
@@ -53,6 +51,6 @@ export default function Confirmation({
           次へ
         </button>
       </div>
-    </>
+    </div>
   );
 }
diff --git a/web/app/tutorial/layout.tsx b/web/app/tutorial/layout.tsx
index 0d7bf051..1e86f9cb 100644
--- a/web/app/tutorial/layout.tsx
+++ b/web/app/tutorial/layout.tsx
@@ -1,4 +1,3 @@
-import Link from "next/link";
 import Header from "~/components/Header";
 import { NavigateByAuthState } from "~/components/common/NavigateByAuthState";
 
@@ -11,13 +10,8 @@ export default function Layout({
     <>
       <Header title="チュートリアル" />
       <NavigateByAuthState type="toLoginForUnauthenticated">
-        <div className="flex-1">{children}</div>
+        <div className="h-full overflow-y-auto pt-12">{children}</div>
       </NavigateByAuthState>
-      <div className="m-4 text-center">
-        <Link href="/home" className="btn btn-primary w-full">
-          ホーム画面へ
-        </Link>
-      </div>
     </>
   );
 }
diff --git a/web/app/tutorial/page.tsx b/web/app/tutorial/page.tsx
index bf7123fa..1efeacf1 100644
--- a/web/app/tutorial/page.tsx
+++ b/web/app/tutorial/page.tsx
@@ -1,5 +1,7 @@
 "use client";
 
+import Link from "next/link";
+
 const tutorialSteps = [
   {
     label: "CourseMateの使い方",
@@ -33,37 +35,44 @@ const tutorialSteps = [
 
 export default function Tutorial() {
   return (
-    <div className="carousel h-full w-full">
-      {tutorialSteps.map((step, i) => (
-        <div
-          key={step.imgPath}
-          id={`slide${i + 1}`}
-          className="carousel-item relative w-full"
-        >
-          <div className="mx-auto flex max-w-[30vh] flex-col justify-center gap-8">
-            <h2 className="text-center text-2xl">{step.label}</h2>
-            <img
-              src={step.imgPath}
-              alt={step.label}
-              className="w-full object-contain"
-            />
-          </div>
-          <div className="-translate-y-1/2 absolute top-1/2 right-5 left-5 flex transform justify-between">
-            <a
-              href={`#slide${i === 0 ? tutorialSteps.length - 1 : i}`}
-              className="btn btn-circle"
-            >
-              ❮
-            </a>
-            <a
-              href={`#slide${i === tutorialSteps.length - 1 ? 1 : i + 2}`}
-              className="btn btn-circle"
-            >
-              ❯
-            </a>
+    <div className="flex h-full flex-col">
+      <div className="carousel w-full flex-1">
+        {tutorialSteps.map((step, i) => (
+          <div
+            key={step.imgPath}
+            id={`slide${i + 1}`}
+            className="carousel-item relative w-full"
+          >
+            <div className="mx-auto flex max-w-[30vh] flex-col justify-center gap-8">
+              <h2 className="text-center text-xl">{step.label}</h2>
+              <img
+                src={step.imgPath}
+                alt={step.label}
+                className="w-full object-contain"
+              />
+            </div>
+            <div className="-translate-y-1/2 absolute top-1/2 right-5 left-5 flex transform justify-between">
+              <a
+                href={`#slide${i === 0 ? tutorialSteps.length - 1 : i}`}
+                className="btn btn-circle"
+              >
+                ❮
+              </a>
+              <a
+                href={`#slide${i === tutorialSteps.length - 1 ? 1 : i + 2}`}
+                className="btn btn-circle"
+              >
+                ❯
+              </a>
+            </div>
           </div>
-        </div>
-      ))}
+        ))}
+      </div>
+      <div className="p-4 text-center">
+        <Link href="/home" className="btn btn-primary w-full">
+          ホーム画面へ
+        </Link>
+      </div>
     </div>
   );
 }
diff --git a/web/components/BanLandscape.tsx b/web/components/BanLandscape.tsx
index 525488f2..8f61339f 100644
--- a/web/components/BanLandscape.tsx
+++ b/web/components/BanLandscape.tsx
@@ -24,34 +24,36 @@ const BanLandscape = () => {
   }, [checkOrientation]);
 
   return (
-    <div style={{ position: "relative", width: "100%", height: "100%" }}>
+    <div className="ban-landscape">
       {isLandscape && (
-        <div
-          style={{
-            position: "fixed",
-            top: 0,
-            left: 0,
-            right: 0,
-            bottom: 0,
-            backgroundColor: "rgba(0, 0, 0, 0.7)",
-            display: "flex",
-            justifyContent: "center",
-            alignItems: "center",
-            zIndex: 1000,
-          }}
-        >
+        <div style={{ position: "absolute", width: "100%", height: "100%" }}>
           <div
             style={{
-              backgroundColor: "white",
-              padding: "20px",
-              borderRadius: "10px",
-              boxShadow: "0 2px 10px rgba(0, 0, 0, 0.5)",
-              textAlign: "center",
-              fontSize: "20px",
-              color: "#333",
+              position: "fixed",
+              top: 0,
+              left: 0,
+              right: 0,
+              bottom: 0,
+              backgroundColor: "rgba(0, 0, 0, 0.7)",
+              display: "flex",
+              justifyContent: "center",
+              alignItems: "center",
+              zIndex: 1000,
             }}
           >
-            このアプリは縦画面で使用してください
+            <div
+              style={{
+                backgroundColor: "white",
+                padding: "20px",
+                borderRadius: "10px",
+                boxShadow: "0 2px 10px rgba(0, 0, 0, 0.5)",
+                textAlign: "center",
+                fontSize: "20px",
+                color: "#333",
+              }}
+            >
+              このアプリは縦画面で使用してください
+            </div>
           </div>
         </div>
       )}
diff --git a/web/components/BottomBar.tsx b/web/components/BottomBar.tsx
index dbde3aef..b644eb15 100644
--- a/web/components/BottomBar.tsx
+++ b/web/components/BottomBar.tsx
@@ -36,7 +36,7 @@ function BottomBarCell({
 export default function BottomBar(props: Props) {
   const { activeTab } = props;
   return (
-    <div className="flex w-full flex-row items-center justify-around">
+    <div className="fixed bottom-0 z-30 flex h-12 w-full flex-row items-center justify-around border-gray-200 border-t bg-white">
       <BottomBarCell
         href="/home"
         iconComponent={
diff --git a/web/components/Card.tsx b/web/components/Card.tsx
index c1291864..d65dccb1 100644
--- a/web/components/Card.tsx
+++ b/web/components/Card.tsx
@@ -1,6 +1,6 @@
 import type { UserWithCoursesAndSubjects } from "common/types";
 import React, { useRef, useEffect, useCallback } from "react";
-import UserAvatar from "./human/avatar";
+import CardBasicInfo from "./CardBasicInfo";
 
 interface CardProps {
   displayedUser: UserWithCoursesAndSubjects;
@@ -28,7 +28,7 @@ export const CardFront = ({ displayedUser, currentUser }: CardProps) => {
     coursesContainer.classList.add(
       "flex",
       "flex-wrap",
-      "gap-3",
+      "gap-1",
       "justify-start",
     );
     container.appendChild(coursesContainer);
@@ -61,17 +61,14 @@ export const CardFront = ({ displayedUser, currentUser }: CardProps) => {
 
       const element = document.createElement("div");
       element.textContent = course.name;
-
       element.classList.add(
         "rounded-full",
         "text-center",
-        "px-4",
-        "py-2",
+        "px-3",
+        "py-1",
         "text-base",
-        isMatching ? "font-bold" : "font-normal",
+        isMatching ? "bg-[#FFF1BF]" : "bg-base-200",
       );
-      element.style.backgroundColor = "gray";
-      element.style.color = "white";
       element.style.flexShrink = "0";
 
       coursesContainer.insertBefore(element, andMoreElement);
@@ -125,7 +122,7 @@ export const CardFront = ({ displayedUser, currentUser }: CardProps) => {
     container.innerHTML = "";
 
     const flexContainer = document.createElement("div");
-    flexContainer.classList.add("flex", "flex-wrap", "gap-3", "justify-start");
+    flexContainer.classList.add("flex", "flex-wrap", "gap-1", "justify-start");
     container.appendChild(flexContainer);
 
     // `And More` 要素を作成して追加 (最初は非表示)
@@ -158,18 +155,15 @@ export const CardFront = ({ displayedUser, currentUser }: CardProps) => {
       );
 
       const element = document.createElement("div");
-      element.textContent = interest.name;
-
+      element.textContent = `#${interest.name}`;
       element.classList.add(
-        "rounded-full",
+        "rounded-md",
         "text-center",
-        "px-4",
-        "py-2",
-        "text-base",
-        isMatching ? "font-bold" : "font-normal",
+        "px-3",
+        "py-1",
+        "text-primary",
+        isMatching ? "bg-[#FFF1BF]" : "bg-[#F7FCFF]",
       );
-      element.style.backgroundColor = "#FFF1BF";
-      element.style.color = "#039BE5";
       element.style.flexShrink = "0";
 
       flexContainer.insertBefore(element, andMoreElement);
@@ -247,34 +241,23 @@ export const CardFront = ({ displayedUser, currentUser }: CardProps) => {
   }, [calculateVisibleInterests, calculateVisibleCourses]);
 
   return (
-    <div className="flex h-full flex-col gap-5 overflow-clip border-2 border-primary bg-secondary p-5">
-      <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>
-
-      <p className="text-center font-bold text-lg">履修している科目</p>
-      <div className="flex h-[70%] w-full flex-col gap-2" ref={containerRef}>
+    <div className="flex h-full flex-col gap-5 overflow-clip rounded-md border-2 border-primary bg-secondary p-5">
+      <CardBasicInfo displayedUser={displayedUser} />
+      <div
+        className="mt-2 flex h-[70%] w-full flex-col gap-2"
+        ref={containerRef}
+      >
+        <p className="text-gray-500 text-sm">授業</p>
         <div
           ref={coursesContainerRef}
-          className="width-full h-[50%] overflow-hidden"
+          className="h-[50%] w-full overflow-hidden"
         >
           <div />
         </div>
-
-        <p className="text-center font-bold text-lg">興味のある分野</p>
+        <p className="text-gray-500 text-sm">興味分野</p>
         <div
           ref={interestsContainerRef}
-          className="width-full h-[50%] overflow-hidden"
+          className="h-[50%] w-full overflow-hidden"
         >
           <div />
         </div>
@@ -292,7 +275,7 @@ export function Card({
     <button
       type="button"
       className="perspective-[1000px] relative block appearance-none text-left"
-      style={{ width: "min(40dvh, 87.5vw)", height: "70dvh" }}
+      style={{ width: "min(50dvh, 87.5vw)", height: "70dvh" }}
       onClick={
         setOpenDetailedMenu ? () => setOpenDetailedMenu(true) : undefined
       }
@@ -301,9 +284,7 @@ export function Card({
         id="card"
         className="transform-style-preserve-3d absolute top-0 left-0 h-full w-full transition-transform duration-600"
       >
-        <div className="absolute h-full w-full">
-          <CardFront displayedUser={displayedUser} currentUser={currentUser} />
-        </div>
+        <CardFront displayedUser={displayedUser} currentUser={currentUser} />
       </div>
     </button>
   );
diff --git a/web/components/CardBasicInfo.tsx b/web/components/CardBasicInfo.tsx
new file mode 100644
index 00000000..2234c576
--- /dev/null
+++ b/web/components/CardBasicInfo.tsx
@@ -0,0 +1,28 @@
+import type { UserWithCoursesAndSubjects } from "common/types";
+import UserAvatar from "./human/avatar";
+
+export default function CardBasicInfo({
+  displayedUser,
+}: {
+  displayedUser: Omit<
+    UserWithCoursesAndSubjects,
+    "courses" | "interestSubjects"
+  >;
+}) {
+  return (
+    <div className="flex h-18 items-center gap-6">
+      <UserAvatar
+        pictureUrl={displayedUser.pictureUrl}
+        width="72px"
+        height="72px"
+      />
+      <div className="flex h-full flex-col justify-center py-1">
+        <p className="text-2xl">{displayedUser.name}</p>
+        <p className="text-lg">{displayedUser.grade}</p>
+        <p
+          className={`text-${displayedUser.faculty.length + displayedUser.department.length > 10 ? "xs" : "md"}`}
+        >{`${displayedUser.faculty} ${displayedUser.department}`}</p>
+      </div>
+    </div>
+  );
+}
diff --git a/web/components/DraggableCard.tsx b/web/components/DraggableCard.tsx
index 05e61f62..4856f86e 100644
--- a/web/components/DraggableCard.tsx
+++ b/web/components/DraggableCard.tsx
@@ -1,9 +1,7 @@
-import CloseIcon from "@mui/icons-material/Close";
-import { Box, Typography } from "@mui/material";
 import type { UserWithCoursesAndSubjects } from "common/types";
 import { motion, useMotionValue, useMotionValueEvent } from "framer-motion";
 import { useCallback, useState } from "react";
-import { MdThumbUp } from "react-icons/md";
+import { MdClose, MdThumbUp } from "react-icons/md";
 import { Card } from "./Card";
 
 const SWIPE_THRESHOLD = 30;
@@ -52,55 +50,18 @@ export const DraggableCard = ({
     return (
       <div>
         {dragProgress > SWIPE_THRESHOLD || clickedButton === "heart" ? (
-          <div
-            className="pointer-events-none absolute z-20 flex h-[70dvh] w-[min(40dvh,87.5vw)] items-center justify-center"
-            style={{ backgroundColor: "rgba(3, 155, 229, 0.4)" }}
-          >
-            <Box
-              display="flex"
-              justifyContent="center"
-              alignItems="center"
-              flexDirection={"column"}
-              borderRadius={"50%"}
-              bgcolor={"white"}
-              width={"16dvh"}
-              height={"16dvh"}
-            >
+          <div className="pointer-events-none absolute z-20 flex h-[70dvh] w-[min(50dvh,87.5vw)] items-center justify-center rounded-md bg-[rgba(3,155,229,0.4)]">
+            <div className="flex h-[16dvh] w-[16dvh] flex-col items-center justify-center rounded-full bg-white">
               <MdThumbUp className="text-5xl text-primary" />
-              <Typography variant="h5" component="h1" mb={1}>
-                いいね！
-              </Typography>
-            </Box>
+              <span className="text-lg">いいね！</span>
+            </div>
           </div>
         ) : dragProgress < -SWIPE_THRESHOLD || clickedButton === "cross" ? (
-          <div
-            style={{
-              position: "absolute",
-              zIndex: 2,
-              backgroundColor: "rgba(0, 0, 0, 0.3)",
-              width: "min(40dvh, 87.5vw)",
-              height: "70dvh",
-              pointerEvents: "none",
-              display: "flex",
-              justifyContent: "center",
-              alignItems: "center",
-            }}
-          >
-            <Box
-              display="flex"
-              justifyContent="center"
-              alignItems="center"
-              flexDirection={"column"}
-              borderRadius={"50%"}
-              bgcolor={"white"}
-              width={"16dvh"}
-              height={"16dvh"}
-            >
-              <CloseIcon style={{ color: "black", fontSize: "4.5dvh" }} />
-              <Typography variant="h5" component="h1" mb={1}>
-                スキップ
-              </Typography>
-            </Box>
+          <div className="pointer-events-none absolute z-20 flex h-[70dvh] w-[min(50dvh,87.5vw)] items-center justify-center rounded-md bg-[rgba(0,0,0,0.3)]">
+            <div className="flex h-[16dvh] w-[16dvh] flex-col items-center justify-center rounded-full bg-white">
+              <MdClose className="text-5xl text-gray-500" />
+              <span className="text-lg">スキップ</span>
+            </div>
           </div>
         ) : null}
       </div>
diff --git a/web/components/Header.tsx b/web/components/Header.tsx
index a6a418b8..f66d3714 100644
--- a/web/components/Header.tsx
+++ b/web/components/Header.tsx
@@ -10,7 +10,7 @@ type Props = {
 export default function Header(props: Props) {
   const { title, info } = props;
   return (
-    <header className="relative flex h-12 w-full items-center justify-center border-gray-200 border-b">
+    <header className="fixed top-0 z-30 flex h-12 w-full items-center justify-center border-gray-200 border-b bg-white">
       {title && (
         <Link
           href="/home"
diff --git a/web/tailwind.config.js b/web/tailwind.config.js
index df376d37..49f0f340 100644
--- a/web/tailwind.config.js
+++ b/web/tailwind.config.js
@@ -16,6 +16,7 @@ export default {
           accent: "#FFC700",
           neutral: "#000000",
           "base-100": "#ffffff",
+          "base-200": "#f3f3f3", // base の薄いグレー
 
           "--rounded-btn": "0.25rem",
           "--rounded-box": "0.25rem",