diff --git a/public/img/app.png b/public/img/app.png
deleted file mode 100644
index 58adc5b..0000000
Binary files a/public/img/app.png and /dev/null differ
diff --git a/public/img/app.webp b/public/img/app.webp
new file mode 100644
index 0000000..d520b47
Binary files /dev/null and b/public/img/app.webp differ
diff --git a/public/img/blur.png b/public/img/blur.png
deleted file mode 100644
index 6a1d41e..0000000
Binary files a/public/img/blur.png and /dev/null differ
diff --git a/public/img/blur.webp b/public/img/blur.webp
new file mode 100644
index 0000000..ae358c3
Binary files /dev/null and b/public/img/blur.webp differ
diff --git a/public/img/competition.png b/public/img/competition.png
deleted file mode 100644
index d63f685..0000000
Binary files a/public/img/competition.png and /dev/null differ
diff --git a/public/img/competition.webp b/public/img/competition.webp
new file mode 100644
index 0000000..21dd223
Binary files /dev/null and b/public/img/competition.webp differ
diff --git a/public/img/completed1.png b/public/img/completed1.png
deleted file mode 100644
index 245f31a..0000000
Binary files a/public/img/completed1.png and /dev/null differ
diff --git a/public/img/completed1.webp b/public/img/completed1.webp
new file mode 100644
index 0000000..6e374c3
Binary files /dev/null and b/public/img/completed1.webp differ
diff --git a/public/img/completed2.png b/public/img/completed2.png
deleted file mode 100644
index 0f500ec..0000000
Binary files a/public/img/completed2.png and /dev/null differ
diff --git a/public/img/completed2.webp b/public/img/completed2.webp
new file mode 100644
index 0000000..cd1a3b1
Binary files /dev/null and b/public/img/completed2.webp differ
diff --git a/public/img/copyGoal.png b/public/img/copyGoal.png
deleted file mode 100644
index 5cffb48..0000000
Binary files a/public/img/copyGoal.png and /dev/null differ
diff --git a/public/img/copyGoal.webp b/public/img/copyGoal.webp
new file mode 100644
index 0000000..e465397
Binary files /dev/null and b/public/img/copyGoal.webp differ
diff --git a/public/img/create.png b/public/img/create.png
deleted file mode 100644
index 84ea0cf..0000000
Binary files a/public/img/create.png and /dev/null differ
diff --git a/public/img/create.webp b/public/img/create.webp
new file mode 100644
index 0000000..2257e28
Binary files /dev/null and b/public/img/create.webp differ
diff --git a/public/img/failed.png b/public/img/failed.png
deleted file mode 100644
index 7a3182f..0000000
Binary files a/public/img/failed.png and /dev/null differ
diff --git a/public/img/failed.webp b/public/img/failed.webp
new file mode 100644
index 0000000..b3f21ad
Binary files /dev/null and b/public/img/failed.webp differ
diff --git a/public/img/notification.jpg b/public/img/notification.jpg
deleted file mode 100644
index 86c764f..0000000
Binary files a/public/img/notification.jpg and /dev/null differ
diff --git a/public/img/notification.webp b/public/img/notification.webp
new file mode 100644
index 0000000..990c6ed
Binary files /dev/null and b/public/img/notification.webp differ
diff --git a/public/img/post.png b/public/img/post.png
deleted file mode 100644
index 109fb13..0000000
Binary files a/public/img/post.png and /dev/null differ
diff --git a/public/img/post.webp b/public/img/post.webp
new file mode 100644
index 0000000..1d628d1
Binary files /dev/null and b/public/img/post.webp differ
diff --git a/public/img/todoListImage.jpg b/public/img/todoListImage.jpg
deleted file mode 100644
index 4274154..0000000
Binary files a/public/img/todoListImage.jpg and /dev/null differ
diff --git a/public/img/todoListImage.webp b/public/img/todoListImage.webp
new file mode 100644
index 0000000..9ac467e
Binary files /dev/null and b/public/img/todoListImage.webp differ
diff --git a/src/app/page.module.scss b/src/app/page.module.scss
index 016781c..72761cf 100644
--- a/src/app/page.module.scss
+++ b/src/app/page.module.scss
@@ -49,5 +49,5 @@
   background-color: var(--primary-color);
   color: white;
   margin: 0 2px;
-  padding: 2px 3px 0;
+  padding: 1px 3px 0;
 }
diff --git a/src/app/page.tsx b/src/app/page.tsx
index c641a29..86f4504 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -33,7 +33,7 @@ export default function Top() {
           <FormatListBulletedIcon className={styles.svg} />
           <StyledTypography level="h1">TODO REAL</StyledTypography>
         </div>
-        <img src="/img/app.png" />
+        <img src="/img/app.webp" />
       </div>
 
       <div>
@@ -42,7 +42,7 @@ export default function Top() {
           やりたいことがつい後回しになってしまったり、毎日続けたいと思っていた習慣が途切れてしまったり…そんな経験はありませんか?
           <br />
           TODO REALはあなたの目標達成・継続を手助けします!
-          <img src="/img/todoListImage.jpg" />
+          <img src="/img/todoListImage.webp" />
           TODO REALでは目標を完了したら写真を投稿することができ、
           <Highlight>
             SNS感覚でTODOリストを使ったり友達と共有できます!
@@ -61,7 +61,7 @@ export default function Top() {
         <StyledTypography level="body-md">
           完了したTODOリストは友達に公開されます。友達に共有することで、達成感を共有できます。
         </StyledTypography>
-        <img src="/img/completed1.png" />
+        <img src="/img/completed1.webp" />
       </div>
 
       <div>
@@ -71,7 +71,7 @@ export default function Top() {
         <StyledTypography level="body-md">
           失敗してもペナルティの無いTODOリストとは異なり、期限内に完了しなかったTODOリストも公開されます。なんて恥ずかしい。
         </StyledTypography>
-        <img src="/img/failed.png" />
+        <img src="/img/failed.webp" />
       </div>
 
       <div>
@@ -82,7 +82,7 @@ export default function Top() {
           5分前になると通知を送信します。通知を受け取ることで、TODOリストの達成を手助けします。
           {/* TODO: 画像を差し替える */}
         </StyledTypography>
-        <img src="/img/notification.jpg" />
+        <img src="/img/notification.webp" />
       </div>
 
       <div>
@@ -94,7 +94,7 @@ export default function Top() {
           <br />
           また、達成率や達成回数で友達と競うこともできます!
         </StyledTypography>
-        <img src="/img/competition.png" />
+        <img src="/img/competition.webp" />
       </div>
 
       <div>
@@ -106,7 +106,7 @@ export default function Top() {
           <br />
           完了投稿をすると投稿ボタンが変化して同じ目標をワンクリックで複製できるように!
         </StyledTypography>
-        <img src="/img/copyGoal.png" />
+        <img src="/img/copyGoal.webp" />
       </div>
 
       <div>
@@ -117,7 +117,7 @@ export default function Top() {
           友達の投稿を表示するには、あなたの完了した目標をシェアしましょう。あなたが最後に投稿した時間より後の目標の画像はモザイクがかかっています。
         </StyledTypography>
         {/* TODO: 正式に実装したら画像を新しくする */}
-        <img src="/img/blur.png" />
+        <img src="/img/blur.webp" />
       </div>
 
       <div>
@@ -130,7 +130,7 @@ export default function Top() {
         <StyledTypography level="body-md">
           画面右下の+ボタンから目標を作成できます。
         </StyledTypography>
-        <img src="/img/create.png" style={{ marginBottom: "15px" }} />
+        <img src="/img/create.webp" style={{ marginBottom: "15px" }} />
 
         <StyledTypography level="h4" component="h3">
           2. 投稿
@@ -138,12 +138,12 @@ export default function Top() {
         <StyledTypography level="body-md">
           目標を完了したら写真をアップロードして共有しましょう!
         </StyledTypography>
-        <img src="/img/post.png" style={{ marginBottom: "10px" }} />
+        <img src="/img/post.webp" style={{ marginBottom: "10px" }} />
 
         <StyledTypography level="body-md">
           アップロードしたら自動で友達に公開されます!
         </StyledTypography>
-        <img src="/img/completed2.png" />
+        <img src="/img/completed2.webp" />
       </div>
 
       <div>