diff --git a/public/global.css b/public/global.css
index 93ffb03..0535db0 100644
--- a/public/global.css
+++ b/public/global.css
@@ -12,7 +12,7 @@ body {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
-  background: linear-gradient(0deg, #3c3d3c, #cde027, #1038bd);
+  background: linear-gradient(0deg, #3c3d3c, #cde027, #04460e);
   background-attachment: fixed;
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
     Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
@@ -26,12 +26,9 @@ body {
 }
 
 a {
-  color: rgb(0, 100, 200);
-  text-decoration: none;
-}
-
-a:hover {
+  color: rgb(0, 23, 200);
   text-decoration: underline;
+  cursor: pointer;
 }
 
 a:visited {
@@ -65,6 +62,14 @@ button {
   background-color: #aaa;
   outline: none;
   margin: 0;
+  cursor: pointer;
+  padding: 0.2rem 1rem;
+}
+
+button:disabled {
+  color: #555;
+  background-color: #ccc;
+  cursor: initial;
 }
 
 h1,
diff --git a/src/App.svelte b/src/App.svelte
index c1725a8..3ccdac0 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -1,11 +1,13 @@
 <script lang="ts">
   import Router from "svelte-spa-router";
   import Chat from "./pages/Chat.svelte";
+  import Top from "./pages/Top.svelte";
   import Home from "./pages/Home.svelte";
   import Donts from "./pages/Donts.svelte";
 
   const routes = {
-    "/": Home,
+    "/": Top,
+    "/home": Home,
     "/bekarazu": Donts,
     "/chat": Chat,
   };
diff --git a/src/components/BackToHome.spec.ts b/src/components/BackToHome.spec.ts
new file mode 100644
index 0000000..e7e3c9e
--- /dev/null
+++ b/src/components/BackToHome.spec.ts
@@ -0,0 +1,15 @@
+// import { render } from "@testing-library/svelte";
+// import Component from './BackToHome.svelte';
+
+// todo テストのみだと validate でエラーが出るため空 export を追加
+export {};
+
+describe('BackToHome', () => {
+  // NOTE: svelte-spa-router が解決できずエラーになるため、一旦コメントアウトしておく
+  // it('戻るボタンのリンクに /home が設定されている', () => {
+  //   const { getByText } = render(Component);
+
+  //   expect(getByText('戻る').getAttribute('href')).toBe('/home');
+  // });
+  it.todo('戻るボタンのリンクに /home が設定されている');
+})
diff --git a/src/components/BackToHome.svelte b/src/components/BackToHome.svelte
new file mode 100644
index 0000000..c99eca7
--- /dev/null
+++ b/src/components/BackToHome.svelte
@@ -0,0 +1,13 @@
+<script lang="ts">
+  import { link } from "svelte-spa-router";
+</script>
+
+<div class="back-link">
+  <a href={"javascript:void(0)"} use:link={"/home"}>戻る</a>
+</div>
+
+<style>
+  .back-link {
+    margin: 5px auto;
+  }
+</style>
diff --git a/src/components/BackToTop.spec.ts b/src/components/BackToTop.spec.ts
deleted file mode 100644
index 79d3dc4..0000000
--- a/src/components/BackToTop.spec.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { render } from "@testing-library/svelte";
-import Component from './BackToTop.svelte';
-
-describe('BackToTop', () => {
-  it('戻るボタンのリンクに / が設定されている', () => {
-    const { getByText } = render(Component);
-
-    expect(getByText('戻る').getAttribute('href')).toBe('/');
-  });
-})
diff --git a/src/components/BackToTop.svelte b/src/components/BackToTop.svelte
deleted file mode 100644
index e7618f5..0000000
--- a/src/components/BackToTop.svelte
+++ /dev/null
@@ -1,9 +0,0 @@
-<div class="back-link">
-  <a href="/">戻る</a>
-</div>
-
-<style>
-  .back-link {
-    margin: 5px auto;
-  }
-</style>
diff --git a/src/components/Counter.svelte b/src/components/Counter.svelte
index e703f1f..b7f1fe4 100644
--- a/src/components/Counter.svelte
+++ b/src/components/Counter.svelte
@@ -33,5 +33,6 @@
     width: 25px;
     color: rgb(21, 172, 114);
     font-weight: bold;
+    font-size: 18px;
   }
 </style>
diff --git a/src/components/Description.svelte b/src/components/Description.svelte
index f4eed0d..0dcce11 100644
--- a/src/components/Description.svelte
+++ b/src/components/Description.svelte
@@ -8,6 +8,7 @@
     <Counter />
     <span>人目の大事なお客様です。</span>
   </div>
+  <div>前回のキリ番は <span class="highlight">{name}</span> さんでした。</div>
 </div>
 
 <style>
diff --git a/src/components/Entrance.spec.ts b/src/components/Entrance.spec.ts
new file mode 100644
index 0000000..dd0d5fa
--- /dev/null
+++ b/src/components/Entrance.spec.ts
@@ -0,0 +1,9 @@
+import { render } from "@testing-library/svelte";
+import Component from './Entrance.svelte';
+
+describe('Entrance', () => {
+  it('10件の入口が表示される', () => {
+    const { container } = render(Component);
+    expect(container.querySelectorAll('.entrance-item')).toHaveLength(10);
+  });
+})
diff --git a/src/components/Links.svelte b/src/components/Entrance.svelte
similarity index 69%
rename from src/components/Links.svelte
rename to src/components/Entrance.svelte
index b3806cc..094fa47 100644
--- a/src/components/Links.svelte
+++ b/src/components/Entrance.svelte
@@ -17,10 +17,10 @@
 
 <div>
   <div>↓のどれかに本当の入口があるよ！</div>
-  <div class="links">
+  <div class="entrance">
     {#each [...Array(max).keys()] as _, i}
-      <a href={"javascript:void(0)"} on:click={() => click(i + 1)} class="link"
-        >{i + 1}</a
+      <button on:click={() => click(i + 1)} class="entrance-item"
+        >{i + 1}</button
       >
     {/each}
   </div>
@@ -28,21 +28,24 @@
 </div>
 
 <style>
-  .links {
+  .entrance {
     margin: 5px auto;
-    max-width: 400px;
+    max-width: 350px;
     display: flex;
     align-items: center;
     justify-content: center;
     flex-wrap: wrap;
   }
 
-  .link {
+  .entrance-item {
+    flex-basis: 60px;
     display: block;
     margin: 3px;
-    width: 20px;
-    height: 20px;
-    border: 1px solid #00f;
-    border-bottom-width: 2px;
+    border: 1px solid black;
+    background-color: transparent;
+  }
+
+  .entrance-item:nth-child(even) {
+    background-color: #999;
   }
 </style>
diff --git a/src/components/Table.svelte b/src/components/Table.svelte
index 3b39944..e332523 100644
--- a/src/components/Table.svelte
+++ b/src/components/Table.svelte
@@ -17,8 +17,9 @@
   {#each items as item}
     <tr>
       <td>
-        <!-- svelte-ignore a11y-missing-attribute -->
-        <a on:click={() => click(item)}>{item.label}</a>
+        <a href={"javascript:void(0)"} on:click={() => click(item)}
+          >{item.label}</a
+        >
         {#if item.isNew}
           <span class="is-new">NEW!</span>
         {/if}
diff --git a/src/pages/Chat.svelte b/src/pages/Chat.svelte
index 020ae14..d29336f 100644
--- a/src/pages/Chat.svelte
+++ b/src/pages/Chat.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
   import { onMount } from "svelte";
-  import BackToTop from "../components/BackToTop.svelte";
+  import BackToHome from "../components/BackToHome.svelte";
   import dayjs from "../helpers/dayjs";
   import MessageRepository from "../repositories/message";
 
@@ -37,7 +37,7 @@
 </script>
 
 <div class="container">
-  <div class="title">チャットページ</div>
+  <div class="title">Inishie チャットページ</div>
   <form class="form" on:submit|preventDefault={submit}>
     <div class="form-row">
       <div class="form-control">
@@ -74,7 +74,7 @@
       </li>
     {/each}
   </ul>
-  <BackToTop />
+  <BackToHome />
 </div>
 
 <style>
@@ -144,6 +144,8 @@
   }
 
   .messages {
+    max-width: 800px;
+    margin: auto;
     padding-left: 0;
     list-style: none;
   }
@@ -152,6 +154,7 @@
     display: flex;
     flex-direction: column;
     justify-content: stretch;
+    padding: 0.3rem 0;
     text-align: left;
     border-bottom: 2px solid #000;
   }
diff --git a/src/pages/Donts.svelte b/src/pages/Donts.svelte
index d569893..e84275b 100644
--- a/src/pages/Donts.svelte
+++ b/src/pages/Donts.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import BackToTop from "../components/BackToTop.svelte";
+  import BackToHome from "../components/BackToHome.svelte";
 </script>
 
 <h1>べからず集</h1>
@@ -18,7 +18,7 @@
   <li>チャット・掲示板の荒らし行為は厳禁です</li>
   <li>ルールやマナーがわからない、守れない場合は半年 ROM りましょう</li>
 </ul>
-<BackToTop />
+<BackToHome />
 
 <style>
   h1 {
diff --git a/src/pages/Home.svelte b/src/pages/Home.svelte
index 74f30e5..de747ec 100644
--- a/src/pages/Home.svelte
+++ b/src/pages/Home.svelte
@@ -1,22 +1,15 @@
 <script lang="ts">
-  import { onMount } from "svelte";
-  import AppDescription from "../components/Description.svelte";
+  import { link } from "svelte-spa-router";
   import AppFooter from "../components/Footer.svelte";
-  import AppLinks from "../components/Links.svelte";
   import AppTable from "../components/Table.svelte";
-  import AccessLogRepository from "../repositories/access_log";
 
-  const repo = new AccessLogRepository();
-
-  const names = ["太郎", "次郎", "三郎"];
-  const name = names[Math.floor(Math.random() * names.length)];
   const items = [
     {
       isNew: true,
       link: "/chat",
       label: "チャット",
       description:
-        "チャット開設しました。<br/>お気軽にコメントしていってください！",
+        "チャット開設しました。<br/>お気軽にコメントしていってください！<br/>キリ番報告もこちらからどうぞ！",
     },
     {
       isNew: true,
@@ -29,48 +22,19 @@
       label: "メインコンテンツ",
       description: "当サイトのメインコンテンツです",
     },
-    {
-      isNew: false,
-      label: "掲示板",
-      description: "キリ番報告はこちらからどうぞ",
-    },
     { isNew: false, label: "リンク集", description: "相互リンク歓迎！" },
   ];
-
-  let isShowTable = false;
-  const showTable = () => {
-    isShowTable = true;
-  };
-  const hideTable = () => {
-    isShowTable = false;
-  };
-
-  if (!process.env.DEBUG) {
-    onMount(async () => {
-      const userAgent = window.navigator.userAgent;
-      return repo.create(userAgent).catch(console.error);
-    });
-  }
 </script>
 
 <h1>-Inishie-</h1>
-<AppDescription />
-<div>前回のキリ番は <span class="highlight">{name}</span> さんでした。</div>
-<div class="marquee">
-  <div class="marquee-inner">
-    Inishie へようこそ！ゆっくりしていってください。
-  </div>
-</div>
-{#if isShowTable}
-  <center>
+<div>
+  <div class="table">
     <AppTable {items} />
-  </center>
+  </div>
   <div class="back-link">
-    <a href={"javascript:void(0)"} on:click={hideTable}>戻る</a>
+    <a href={"javascript:void(0)"} use:link={"/"}>戻る</a>
   </div>
-{:else}
-  <AppLinks on:show={showTable} />
-{/if}
+</div>
 <AppFooter />
 
 <style>
@@ -83,28 +47,10 @@
     letter-spacing: 1.2rem;
   }
 
-  .highlight {
-    font-weight: bold;
-    font-style: italic;
-    font-size: 120%;
-    color: red;
-  }
-
-  .marquee {
-    margin: 5px auto;
-    overflow: hidden;
-  }
-
-  .marquee-inner {
-    animation-name: marqueeAnimation;
-    animation-timing-function: linear;
-    animation-duration: 20s;
-    animation-iteration-count: infinite;
-
-    margin: 0;
-    padding: 0;
-    display: block;
-    white-space: nowrap;
+  .table {
+    display: flex;
+    align-items: center;
+    justify-content: center;
   }
 
   .back-link {
diff --git a/src/pages/Top.svelte b/src/pages/Top.svelte
new file mode 100644
index 0000000..6441f39
--- /dev/null
+++ b/src/pages/Top.svelte
@@ -0,0 +1,83 @@
+<script lang="ts">
+  import { onMount } from "svelte";
+  import { push } from "svelte-spa-router";
+  import AppDescription from "../components/Description.svelte";
+  import AppFooter from "../components/Footer.svelte";
+  import AppEntrance from "../components/Entrance.svelte";
+  import AccessLogRepository from "../repositories/access_log";
+
+  const repo = new AccessLogRepository();
+
+  const names = ["太郎", "次郎", "三郎"];
+  const name = names[Math.floor(Math.random() * names.length)];
+
+  const moveToHome = () => push("/home");
+
+  if (!process.env.DEBUG) {
+    onMount(async () => {
+      const userAgent = window.navigator.userAgent;
+      return repo.create(userAgent).catch(console.error);
+    });
+  }
+</script>
+
+<h1>-Inishie-</h1>
+<AppDescription />
+<div>前回のキリ番は <span class="highlight">{name}</span> さんでした。</div>
+<div class="marquee">
+  <div class="marquee-inner">
+    Inishie へようこそ！ゆっくりしていってください。
+  </div>
+</div>
+<AppEntrance on:show={moveToHome} />
+<AppFooter />
+
+<style>
+  h1 {
+    color: #ff3e00;
+    font-style: italic;
+    font-weight: bold;
+    text-transform: uppercase;
+    font-size: 6rem;
+    letter-spacing: 1.2rem;
+  }
+
+  .highlight {
+    font-weight: bold;
+    font-style: italic;
+    font-size: 120%;
+    color: red;
+  }
+
+  .marquee {
+    margin: 5px auto;
+    overflow: hidden;
+  }
+
+  .marquee-inner {
+    animation-name: marqueeAnimation;
+    animation-timing-function: linear;
+    animation-duration: 20s;
+    animation-iteration-count: infinite;
+
+    margin: 0;
+    padding: 0;
+    display: block;
+    white-space: nowrap;
+  }
+
+  @keyframes marqueeAnimation {
+    0% {
+      transform: translate(65%);
+    }
+    100% {
+      transform: translate(-65%);
+    }
+  }
+
+  @media (max-width: 639px) {
+    h1 {
+      font-size: 2rem;
+    }
+  }
+</style>