diff --git a/app/page.tsx b/app/page.tsx
index 171b74b5..ccb6e973 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -2,6 +2,7 @@ import { getUsers } from '@/app/lib/getUsers'
 import {
   CameraIcon,
   CheckCircleIcon,
+  ForwardIcon,
   HandThumbUpIcon,
   PencilSquareIcon,
   PlusIcon,
@@ -22,33 +23,40 @@ export default function Home(): React.JSX.Element {
         <br />
         登録システム
       </h1>
-      <ul className="timeline timeline-vertical lg:timeline-horizontal">
-        <li>
-          <div className="timeline-start">1</div>
-          <div className="timeline-middle">
-            <PencilSquareIcon className="size-5" />
-          </div>
-          <div className="timeline-end timeline-box">必要情報の入力</div>
-          <hr />
-        </li>
-        <li>
-          <hr />
-          <div className="timeline-start">2</div>
-          <div className="timeline-middle">
-            <CheckCircleIcon className="size-5" />
-          </div>
-          <div className="timeline-end timeline-box">入力確認</div>
-          <hr />
-        </li>
-        <li>
-          <hr />
-          <div className="timeline-start">3</div>
-          <div className="timeline-middle">
-            <HandThumbUpIcon className="size-5" />
-          </div>
-          <div className="timeline-end timeline-box">完了</div>
-        </li>
-      </ul>
+      <section>
+        <h2 className="flex font-semibold items-center mb-2 mx-auto text-center text-2xl w-fit">
+          <ForwardIcon className="mr-2 size-8 text-info" />
+          登録手順
+          <ForwardIcon className="mx-2 size-8 text-info" />
+        </h2>
+        <ul className="timeline timeline-vertical lg:timeline-horizontal">
+          <li>
+            <div className="timeline-start">1</div>
+            <div className="timeline-middle">
+              <PencilSquareIcon className="size-5 text-info" />
+            </div>
+            <div className="timeline-end timeline-box">必要情報の入力</div>
+            <hr />
+          </li>
+          <li>
+            <hr />
+            <div className="timeline-start">2</div>
+            <div className="timeline-middle">
+              <CheckCircleIcon className="size-5 text-warning" />
+            </div>
+            <div className="timeline-end timeline-box">入力確認</div>
+            <hr />
+          </li>
+          <li>
+            <hr />
+            <div className="timeline-start">3</div>
+            <div className="timeline-middle">
+              <HandThumbUpIcon className="size-5 text-success" />
+            </div>
+            <div className="timeline-end timeline-box">完了</div>
+          </li>
+        </ul>
+      </section>
       <Link href="/register" className="btn btn-primary hover:scale-110">
         <CameraIcon className="size-6" />
         障がい者手帳画像を提出