diff --git a/src/page/index.html b/src/page/index.html
index a23e720..0f8e76b 100644
--- a/src/page/index.html
+++ b/src/page/index.html
@@ -31,7 +31,305 @@ <h1>練習プログラム集</h1>
     <!-- /ナビゲーションバー -->
     <!-- メイン -->
     <main>
-      <section id="mocha"></section>
+      <main>
+        <div class="py-4">
+          <div class="container">
+            <div class="carousel slide" data-ride="carousel" id="main_visual">
+              <ol class="carousel-indicators">
+                <li
+                  class="active"
+                  data-slide-to="0"
+                  data-target="#main_visual"
+                ></li>
+                <li data-slide-to="1" data-target="#main_visual"></li>
+                <li data-slide-to="2" data-target="#main_visual"></li>
+              </ol>
+              <div class="carousel-inner">
+                <div class="carousel-item active">
+                  <img
+                    alt="映画1"
+                    class="img-fluid"
+                    src="https://placehold.jp/1440x488.png"
+                  />
+                  <div class="carousel-caption d-none d-md-block">
+                    <h2>映画1</h2>
+                    <p>
+                      1枚目のスライド画像とキャプションが入ります
+                    </p>
+                  </div>
+                </div>
+                <div class="carousel-item">
+                  <img
+                    alt="映画2"
+                    class="img-fluid"
+                    src="https://placehold.jp/1440x488.png"
+                  />
+                  <div class="carousel-caption d-none d-md-block">
+                    <h2>映画2</h2>
+                    <p>
+                      2枚目のスライド画層とキャプションが入ります
+                    </p>
+                  </div>
+                </div>
+                <div class="carousel-item">
+                  <img
+                    alt="映画3"
+                    class="img-fluid"
+                    src="https://placehold.jp/1440x488.png"
+                  />
+                  <div class="carousel-caption d-none d-md-block">
+                    <h2>映画3</h2>
+                    <p>
+                      3枚目のスライド画層とキャプションが入ります
+                    </p>
+                  </div>
+                </div>
+              </div>
+              <a
+                class="carousel-control-prev"
+                data-slide="prev"
+                href="#main_visual"
+                role="button"
+              >
+                <span
+                  aria-hidden="true"
+                  class="carousel-control-prev-icon"
+                ></span>
+                <span class="sr-only">前に戻る</span>
+              </a>
+              <a
+                class="carousel-control-next"
+                data-slide="next"
+                href="#main_visual"
+                role="button"
+              >
+                <span
+                  aria-hidden="true"
+                  class="carousel-control-next-icon"
+                ></span>
+                <span class="sr-only">次に進む</span>
+              </a>
+            </div>
+          </div>
+        </div>
+
+        <div class="py-4">
+          <section id="news">
+            <div class="container">
+              <div class="row">
+                <div class="col-md-2">
+                  <h3>News</h3>
+                </div>
+                <div class="col-md-10">
+                  <dl class="row">
+                    <dt class="col-md-3">2019年○月○日</dt>
+                    <dd class="col-md-9">お知らせが入る</dd>
+                  </dl>
+                </div>
+              </div>
+            </div>
+          </section>
+        </div>
+
+        <div class="py-4 bg-light">
+          <section id="about">
+            <div class="container">
+              <div class="row mb-4">
+                <div class="col-md-8 mb-3">
+                  <h3 class="mb-3">今月のおすすめ</h3>
+                  <p>
+                    今月のおすすめ内容が入る
+                  </p>
+                </div>
+                <div class="col-md-4">
+                  <img
+                    alt="今月のおすすめ"
+                    class="img-fluid"
+                    src="https://placehold.jp/400x400.png"
+                  />
+                </div>
+              </div>
+
+              <div class="row">
+                <div class="col-md-4">
+                  <div class="card mb-3">
+                    <img
+                      alt=""
+                      class="img-fluid"
+                      src="https://placehold.jp/380x160.png"
+                    />
+                    <div class="card-body d-flex justify-content-between">
+                      <h4 class="card-title">映画1</h4>
+                      <button
+                        class="btn btn-secondary"
+                        data-target="#modal01"
+                        data-toggle="modal"
+                      >
+                        詳しく見る
+                      </button>
+                    </div>
+                  </div>
+                </div>
+                <div class="col-md-4">
+                  <div class="card mb-3">
+                    <img
+                      alt=""
+                      class="img-fluid"
+                      src="https://placehold.jp/380x160.png"
+                    />
+                    <div class="card-body d-flex justify-content-between">
+                      <h4 class="card-title">映画2</h4>
+                      <button
+                        class="btn btn-secondary"
+                        data-target="#modal02"
+                        data-toggle="modal"
+                      >
+                        詳しく見る
+                      </button>
+                    </div>
+                  </div>
+                </div>
+                <div class="col-md-4">
+                  <div class="card mb-3">
+                    <img
+                      alt=""
+                      class="img-fluid"
+                      src="https://placehold.jp/380x160.png"
+                    />
+                    <div class="card-body d-flex justify-content-between">
+                      <h4 class="card-title">映画3</h4>
+                      <button
+                        class="btn btn-secondary"
+                        data-target="#modal03"
+                        data-toggle="modal"
+                      >
+                        詳しく見る
+                      </button>
+                    </div>
+                  </div>
+                </div>
+                <div class="col-md-4">
+                  <div class="card mb-3">
+                    <img
+                      alt=""
+                      class="img-fluid"
+                      src="https://placehold.jp/380x160.png"
+                    />
+                    <div class="card-body d-flex justify-content-between">
+                      <h4 class="card-title">映画4</h4>
+                      <button
+                        class="btn btn-secondary"
+                        data-target="#modal04"
+                        data-toggle="modal"
+                      >
+                        詳しく見る
+                      </butto>
+                    </div>
+                  </div>
+                </div>
+                <div class="col-md-4">
+                  <div class="card mb-3">
+                    <img
+                      alt=""
+                      class="img-fluid"
+                      src="https://placehold.jp/380x160.png"
+                    />
+                    <div class="card-body d-flex justify-content-between">
+                      <h4 class="card-title">映画5</h4>
+                      <button
+                        class="btn btn-secondary"
+                        data-target="#modal05"
+                        data-toggle="modal"
+                      >
+                        詳しく見る
+                      </button>
+                    </div>
+                  </div>
+                </div>
+                <div class="col-md-4">
+                  <div class="card mb-3">
+                    <img
+                      alt=""
+                      class="img-fluid"
+                      src="https://placehold.jp/380x160.png"
+                    />
+                    <div class="card-body d-flex justify-content-between">
+                      <h4 class="card-title">映画6</h4>
+                      <button
+                        class="btn btn-secondary"
+                        data-target="#modal06"
+                        data-toggle="modal"
+                      >
+                        詳しく見る
+                      </button>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div
+                aria-hidden="true"
+                aria-labelledby="modal01-label"
+                class="modal fade"
+                id="modal01"
+                role="dialog"
+                tabindex="-1"
+              >
+                <div class="modal-dialog modal-dialog-centered" role="document">
+                  <div class="modal-content">
+                    <div class="modal-header">
+                      <h5 class="modal-title" id="modal01-label">映画1</h5>
+                      <button
+                        aria-label="Close"
+                        class="close"
+                        data-dismiss="modal"
+                        type="button"
+                      >
+                        <span aria-hidden="true">&times;</span>
+                      </button>
+                    </div>
+                    <div class="modal-body">
+                      <p class="text-center">
+                        <img
+                          alt="#"
+                          class="img-fluid"
+                          src="https://placehold.jp/380x300.png"
+                        />
+                      </p>
+                      <p>
+                        映画1の説明
+                      </p>
+                    </div>
+                    <div class="modal-footer">
+                      <button
+                        class="btn btn-secondary"
+                        data-dismiss="modal"
+                        type="button"
+                      >
+                        Close
+                      </button>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </section>
+        </div>
+
+        <div class="py-4">
+          <section id="statement">
+            <div class="container">
+             <div class="row">
+               <div id="statement-detail"></div>
+             </div>
+             <div class="row">
+               <a class="btn btn-info" href="#">レンタルする</a>
+             </div>
+            </div>
+          </section>
+        </div>
+
+      </main>
+
       <!-- コンテンツ01 -->
       <div id="app-dev"></div>
       <!-- /コンテンツ01 -->
@@ -41,6 +339,7 @@ <h1>練習プログラム集</h1>
     <div id="footer"></div>
     <!-- /フッター -->
     <div id="dev">
+      <section id="mocha"></section>
       <!-- Optional JavaScript -->
       <!-- jQuery first, then Popper.js, then Bootstrap JS -->
       <script
@@ -780,7 +1079,7 @@ <h2>アプリケーション</h2>
         customer.addRental(rental);
 
         document.querySelector(
-          "#video-rental-app"
+          "#statement-detail"
         ).innerHTML = customer.htmlStatement();
       </script>
       <script src="./lib/markdown.js"></script>