diff --git a/src/app/[userScreenName]/edit/page.tsx b/src/app/[userScreenName]/edit/page.tsx
index 5cb7bce..07bbf94 100644
--- a/src/app/[userScreenName]/edit/page.tsx
+++ b/src/app/[userScreenName]/edit/page.tsx
@@ -17,10 +17,10 @@ export default async function Page({
   if (session.user.id !== user.id) notFound();
 
   return (
-    <main className="container prose mx-auto px-4">
-      <h1 className="text-center">{user.name} のプロフィールを編集</h1>
+    <div className="container prose mx-auto mb-10 mt-5 px-4">
+      <h1 className="text-center">{user.name}のプロフィールを編集</h1>
       <EditForm user={user} />
       <DeleteUserLink />
-    </main>
+    </div>
   );
 }
diff --git a/src/app/[userScreenName]/page.tsx b/src/app/[userScreenName]/page.tsx
index f241d57..c9de67c 100644
--- a/src/app/[userScreenName]/page.tsx
+++ b/src/app/[userScreenName]/page.tsx
@@ -43,7 +43,7 @@ export default async function Page({
   const socials = user.avatars.map((avatar) => avatar.social).sort(compare);
   const posts = await api.post.getAllByUserId(user.id);
   return (
-    <div className="container prose mx-auto px-4">
+    <div className="container prose mx-auto mb-10 mt-5 px-4">
       <div className="not-prose avatar">
         <div className="w-24 rounded-full">
           <Image
diff --git a/src/app/_components/avatars.tsx b/src/app/_components/avatars.tsx
index 68f5d6a..85c8371 100644
--- a/src/app/_components/avatars.tsx
+++ b/src/app/_components/avatars.tsx
@@ -11,7 +11,7 @@ export function Avatars({
   return (
     <ul className="list-none pl-0">
       {avatars.map((avatar) => (
-        <li key={avatar.id} className="mb-0 mt-1 pl-0">
+        <li key={avatar.id} className="mb-0 mt-0.5 pl-0">
           <Avatar avatar={avatar} loginAvatarId={loginAvatarId} />
         </li>
       ))}
diff --git a/src/app/_components/social-detail.tsx b/src/app/_components/social-detail.tsx
index f5647d5..4adb9a4 100644
--- a/src/app/_components/social-detail.tsx
+++ b/src/app/_components/social-detail.tsx
@@ -35,7 +35,7 @@ export function SocialDetail({
   });
 
   return (
-    <main className="container prose mx-auto px-4">
+    <>
       <div className="not-prose avatar">
         <div className="w-24 rounded-full">
           <Image
@@ -100,6 +100,6 @@ export function SocialDetail({
         </div>
       )}
       <Posts posts={posts} />
-    </main>
+    </>
   );
 }
diff --git a/src/app/_components/social-edit.tsx b/src/app/_components/social-edit.tsx
index 660c3b5..7e72171 100644
--- a/src/app/_components/social-edit.tsx
+++ b/src/app/_components/social-edit.tsx
@@ -40,7 +40,7 @@ export function SocialEdit({
   const urlErrors = updateSocial.error?.data?.zodError?.fieldErrors.url;
 
   return (
-    <main className="container prose mx-auto px-4">
+    <>
       <h1>{social.name} を編集</h1>
       <form
         onSubmit={(e) => {
@@ -137,6 +137,6 @@ export function SocialEdit({
           キャンセル
         </button>
       </form>
-    </main>
+    </>
   );
 }
diff --git a/src/app/_components/users.tsx b/src/app/_components/users.tsx
index 28bb0b9..77addf6 100644
--- a/src/app/_components/users.tsx
+++ b/src/app/_components/users.tsx
@@ -5,7 +5,7 @@ export function Users({ users }: { users: UserEntity[] }) {
   return (
     <ul className="list-none pl-0">
       {users.map((user) => (
-        <li key={user.screenName} className="mb-0 mt-1 pl-0">
+        <li key={user.screenName} className="mb-0 mt-0.5 pl-0">
           <User user={user} />
         </li>
       ))}
diff --git a/src/app/contact/page.tsx b/src/app/contact/page.tsx
index f0ce559..6d01585 100644
--- a/src/app/contact/page.tsx
+++ b/src/app/contact/page.tsx
@@ -1,7 +1,7 @@
 export default function Page() {
   return (
-    <main className="container prose mx-auto my-6 px-4">
+    <div className="container prose mx-auto mb-10 mt-5 px-4">
       <h1>Contact</h1>
-    </main>
+    </div>
   );
 }
diff --git a/src/app/not-found.tsx b/src/app/not-found.tsx
index 197d95c..056d669 100644
--- a/src/app/not-found.tsx
+++ b/src/app/not-found.tsx
@@ -1,7 +1,7 @@
 export default function NotFound() {
   return (
-    <main className="container prose mx-auto px-4">
+    <div className="container prose mx-auto mb-10 mt-5 px-4">
       <h1>404 Not Found</h1>
-    </main>
+    </div>
   );
 }
diff --git a/src/app/page.tsx b/src/app/page.tsx
index b2c15c7..9c6059b 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -2,7 +2,6 @@ import { getServerAuthSession } from "~/server/auth";
 import { api } from "~/trpc/server";
 import { Hero } from "./_components/hero";
 import { redirect } from "next/navigation";
-import { clsx } from "clsx";
 import { Home } from "./_components/home";
 import Link from "next/link";
 
@@ -13,24 +12,20 @@ export default async function Page() {
   const avatars =
     session === null ? null : await api.avatar.getMyAvatarsWithSocial();
 
-  return (
-    <div className={clsx({ "container prose mx-auto px-4": session !== null })}>
-      {session === null ? (
-        <Hero />
+  return session === null ? (
+    <Hero />
+  ) : (
+    <div className="container prose mx-auto mb-10 mt-5 px-4">
+      {user !== null && avatars !== null && avatars.length >= 1 ? (
+        <Home user={user} avatars={avatars} />
       ) : (
-        <div className="mt-10">
-          {user !== null && avatars !== null && avatars.length >= 1 ? (
-            <Home user={user} avatars={avatars} />
-          ) : (
-            <p>
-              まだ
-              <Link href="/socials" className="not-prose link-hover link">
-                ソーシャル
-              </Link>
-              に参加していません
-            </p>
-          )}
-        </div>
+        <p>
+          まだ
+          <Link href="/socials" className="not-prose link-hover link">
+            ソーシャル
+          </Link>
+          に参加していません
+        </p>
       )}
     </div>
   );
diff --git a/src/app/privacy-policy/page.tsx b/src/app/privacy-policy/page.tsx
index 7b03746..614125a 100644
--- a/src/app/privacy-policy/page.tsx
+++ b/src/app/privacy-policy/page.tsx
@@ -6,7 +6,7 @@ export const metadata: Metadata = {
 
 export default function Page() {
   return (
-    <main className="container prose mx-auto my-6 px-4">
+    <div className="container prose mx-auto mb-10 mt-5 px-4">
       <h1 className="text-center">プライバシーポリシー</h1>
       <p className="text-right">2024 年 6 月 2 日</p>
       <ol>
@@ -29,6 +29,6 @@ export default function Page() {
           当サイトのユーザーがご自身のアカウントを削除された場合、当サイトが保有する当該のユーザー情報（個人情報）および当該ユーザーが作成したポストはすべて削除されます
         </li>
       </ol>
-    </main>
+    </div>
   );
 }
diff --git a/src/app/search/page.tsx b/src/app/search/page.tsx
index 84e5e08..b0dcc5a 100644
--- a/src/app/search/page.tsx
+++ b/src/app/search/page.tsx
@@ -33,8 +33,8 @@ export default async function Page({
       : await api.post.searchInCurrentSocial(q);
 
   return (
-    <main className="container prose mx-auto px-4">
+    <div className="container prose mx-auto mb-10 mt-5 px-4">
       <Posts posts={posts} />
-    </main>
+    </div>
   );
 }
diff --git a/src/app/signup/page.tsx b/src/app/signup/page.tsx
index 293feb5..32bd690 100644
--- a/src/app/signup/page.tsx
+++ b/src/app/signup/page.tsx
@@ -7,9 +7,9 @@ export default async function Page() {
     return null;
   }
   return (
-    <main className="container prose mx-auto px-4">
+    <div className="container prose mx-auto mb-10 mt-5 px-4">
       <h1>サインアップ</h1>
       <SignupForm />
-    </main>
+    </div>
   );
 }
diff --git a/src/app/socials/[screenName]/[avatarScreenName]/followers/page.tsx b/src/app/socials/[screenName]/[avatarScreenName]/followers/page.tsx
index aca3547..a2cb421 100644
--- a/src/app/socials/[screenName]/[avatarScreenName]/followers/page.tsx
+++ b/src/app/socials/[screenName]/[avatarScreenName]/followers/page.tsx
@@ -44,12 +44,12 @@ export default async function Page({
           (loginAvatar) => loginAvatar.socialId === avatar.social.id,
         );
   return (
-    <main className="container prose mx-auto px-4">
+    <div className="container prose mx-auto px-4">
       <h1>
         {avatar.user.name}（{avatar.user.screenName}.{avatar.social.screenName}
         ）さんのフォロワー
       </h1>
       <Avatars avatars={following} loginAvatarId={loginAvatar?.id} />
-    </main>
+    </div>
   );
 }
diff --git a/src/app/socials/[screenName]/[avatarScreenName]/following/page.tsx b/src/app/socials/[screenName]/[avatarScreenName]/following/page.tsx
index fbc425f..e757eba 100644
--- a/src/app/socials/[screenName]/[avatarScreenName]/following/page.tsx
+++ b/src/app/socials/[screenName]/[avatarScreenName]/following/page.tsx
@@ -44,12 +44,12 @@ export default async function Page({
           (loginAvatar) => loginAvatar.socialId === avatar.social.id,
         );
   return (
-    <main className="container prose mx-auto px-4">
+    <div className="container prose mx-auto px-4">
       <h1>
         {avatar.user.name}（{avatar.user.screenName}.{avatar.social.screenName}
         ）さんがフォロー中
       </h1>
       <Avatars avatars={following} loginAvatarId={loginAvatar?.id} />
-    </main>
+    </div>
   );
 }
diff --git a/src/app/socials/[screenName]/[avatarScreenName]/page.tsx b/src/app/socials/[screenName]/[avatarScreenName]/page.tsx
index 5d12364..6ddb33c 100644
--- a/src/app/socials/[screenName]/[avatarScreenName]/page.tsx
+++ b/src/app/socials/[screenName]/[avatarScreenName]/page.tsx
@@ -38,7 +38,7 @@ export default async function Page({
   const posts = avatar.posts.reverse();
 
   return (
-    <main className="container prose mx-auto px-4">
+    <div className="container prose mx-auto mb-10 mt-5 px-4">
       <div className="not-prose avatar">
         <div className="w-24 rounded-full">
           <Image
@@ -99,6 +99,6 @@ export default async function Page({
         </Link>
       </p>
       <Posts posts={posts} />
-    </main>
+    </div>
   );
 }
diff --git a/src/app/socials/[screenName]/[avatarScreenName]/posts/[postId]/page.tsx b/src/app/socials/[screenName]/[avatarScreenName]/posts/[postId]/page.tsx
index e4a2372..2fdf38e 100644
--- a/src/app/socials/[screenName]/[avatarScreenName]/posts/[postId]/page.tsx
+++ b/src/app/socials/[screenName]/[avatarScreenName]/posts/[postId]/page.tsx
@@ -16,8 +16,8 @@ export default async function Page({
   if (post === null) notFound();
   const isAuthor = post.createdBy.userId === session.user.id;
   return (
-    <main className="container prose mx-auto px-4 pt-5">
+    <div className="container prose mx-auto mb-10 mt-5 px-4 pt-5">
       <PostDetailOrEdit post={post} isAuthor={isAuthor} />
-    </main>
+    </div>
   );
 }
diff --git a/src/app/socials/[screenName]/avatars/page.tsx b/src/app/socials/[screenName]/avatars/page.tsx
index 6d792f5..24ae893 100644
--- a/src/app/socials/[screenName]/avatars/page.tsx
+++ b/src/app/socials/[screenName]/avatars/page.tsx
@@ -34,9 +34,9 @@ export default async function Page({
       ? undefined
       : loginUser.avatars.find((avatar) => avatar.socialId === social.id);
   return (
-    <main className="container prose mx-auto px-4">
-      <h1>{social.name}のメンバー</h1>
+    <div className="container prose mx-auto mb-10 mt-5 px-4">
+      <h1 className="text-center">{social.name}のメンバー</h1>
       <Avatars avatars={social.avatars} loginAvatarId={loginAvatar?.id} />
-    </main>
+    </div>
   );
 }
diff --git a/src/app/socials/[screenName]/page.tsx b/src/app/socials/[screenName]/page.tsx
index e19dea5..445e34a 100644
--- a/src/app/socials/[screenName]/page.tsx
+++ b/src/app/socials/[screenName]/page.tsx
@@ -32,11 +32,13 @@ export default async function Page({
   const avatar =
     user === null ? null : await api.avatar.getMyAvatarBySocialId(social.id);
   return (
-    <SocialDetailOrEdit
-      social={social}
-      user={user}
-      avatar={avatar}
-      posts={posts}
-    />
+    <div className="container prose mx-auto mb-10 mt-5 px-4">
+      <SocialDetailOrEdit
+        social={social}
+        user={user}
+        avatar={avatar}
+        posts={posts}
+      />
+    </div>
   );
 }
diff --git a/src/app/socials/new/page.tsx b/src/app/socials/new/page.tsx
index 001dd63..3d2ded6 100644
--- a/src/app/socials/new/page.tsx
+++ b/src/app/socials/new/page.tsx
@@ -2,9 +2,9 @@ import { CreateSocialForm } from "~/app/_components/socials/create-social-form";
 
 export default function Page() {
   return (
-    <main className="container prose mx-auto px-4">
+    <div className="container prose mx-auto mb-10 mt-5 px-4">
       <h1>ソーシャルを作成</h1>
       <CreateSocialForm />
-    </main>
+    </div>
   );
 }
diff --git a/src/app/socials/page.tsx b/src/app/socials/page.tsx
index bffb5f7..5a82e3f 100644
--- a/src/app/socials/page.tsx
+++ b/src/app/socials/page.tsx
@@ -13,7 +13,7 @@ export default async function Page() {
   const socials = await api.social.getAll();
   const avatars = await api.avatar.getMyAvatars();
   return (
-    <div className="container prose mx-auto my-10 px-4">
+    <div className="container prose mx-auto mb-10 mt-5 px-4">
       <h1 className="text-center">ソーシャル</h1>
       {session !== null && (
         <Link href="/socials/new" className="btn btn-primary">
diff --git a/src/app/terms-of-service/page.tsx b/src/app/terms-of-service/page.tsx
index 144cd57..528c07d 100644
--- a/src/app/terms-of-service/page.tsx
+++ b/src/app/terms-of-service/page.tsx
@@ -6,7 +6,7 @@ export const metadata: Metadata = {
 
 export default function Page() {
   return (
-    <div className="container prose mx-auto my-6 px-4">
+    <div className="container prose mx-auto mb-10 mt-5 px-4">
       <h1 className="text-center">利用規約</h1>
       <p className="text-right">2024 年 6 月 2 日</p>
       <ol>
diff --git a/src/app/users/page.tsx b/src/app/users/page.tsx
index 59bf0d6..856b450 100644
--- a/src/app/users/page.tsx
+++ b/src/app/users/page.tsx
@@ -9,9 +9,9 @@ export const metadata: Metadata = {
 export default async function Page() {
   const users = await api.user.getAll();
   return (
-    <main className="container prose mx-auto px-4">
-      <h1>ユーザー</h1>
+    <div className="container prose mx-auto mb-10 mt-5 px-4">
+      <h1 className="text-center">ユーザー</h1>
       <Users users={users} />
-    </main>
+    </div>
   );
 }