diff --git a/src/components/organisms/About.tsx b/src/components/organisms/About.tsx
index d56c66e..fd76a3d 100644
--- a/src/components/organisms/About.tsx
+++ b/src/components/organisms/About.tsx
@@ -14,33 +14,32 @@ const About = () => {
         <div className={styles.about}>
             <div className={styles.container} id='about'>
                 <div className={styles.box}>
-                    <div className={styles.leftBox}>
-                        <p className={styles.subTitle}>ここごはんについて</p>
-                        <h1 className={styles.title}>ABOUT</h1>
-                        <p className={styles.text}>
-                            これまでの地図は情報がすでにあるのが当たり前。<br />
-                            このサービスでは自分たちの会社・団体で地図を１から作り上げます。<br />
-                            <br />
-                            行きつけのおすすめのご飯やさん。ランチで穴場のお店。<br />
-                            自分の属している会社・団体ごとにその地図はどんどん進化します。<br />
-                            <br />
-                            あなたも地図を作るメンバーになりませんか？<br />
-                        </p>
-                        <Link
-                            className={styles.link}
-                            href='/about'
-                        >
-                            VIEW MORE
-                        </Link>
-                    </div>
-                    <div className={styles.rightBox}>
-                        <Image
-                            className={styles.image}
-                            src={"/assets/images/phone.png"}
-                            width={600}
-                            height={600}
-                            alt='serviceImg'
-                        />
+                    <div className={styles.flexBox}>
+                        <div className={styles.leftBox}>
+                        <div className={styles.titleBox}>
+                            <span className={styles.jaTitle}>ここごはんについて</span>
+                            <h1 className={styles.enTitle}>ABOUT</h1>
+                        </div>
+                            <p className={styles.text}>
+                                これまでの地図は情報がすでにあるのが当たり前。<br />
+                                このサービスでは自分たちの会社・団体で地図を１から作り上げます。<br />
+                                <br />
+                                行きつけのおすすめのご飯やさん。ランチで穴場のお店。<br />
+                                自分の属している会社・団体ごとにその地図はどんどん進化します。<br />
+                                <br />
+                                あなたも地図を作るメンバーになりませんか？<br />
+                            </p>
+                            {/* TODO: 詳しくみるボタンの追加 */}
+                        </div>
+                        <div className={styles.rightBox}>
+                            <Image
+                                className={styles.image}
+                                src={"/assets/images/tech.png"}
+                                width={700}
+                                height={500}
+                                alt='aboutImage'
+                            />
+                        </div>
                     </div>
                 </div>
             </div>
diff --git a/src/components/organisms/styles/About.module.scss b/src/components/organisms/styles/About.module.scss
index cfb8e4c..4bcafb5 100644
--- a/src/components/organisms/styles/About.module.scss
+++ b/src/components/organisms/styles/About.module.scss
@@ -1,63 +1,145 @@
 .about {
+    position: relative;
     width: 100%;
     height: 1100px;
     margin-top: -90px;
-    border-radius: 40px 40px 0 0;
+    border-radius: 100px 100px 0 0;
     background-color: var(--main-red-color);
+    z-index: -1;
     .container {
-        width: 90%;
+        width: 70%;
+        max-width: 1900px;
+        height: 100%;
         margin: 0 auto;
-        border: 1px solid white;
         .box {
-            width: 100%;
-            padding-top: calc(100vh - 800px);
+            position: absolute;
+            top: 500px;
+            width: 70%;
             box-sizing: border-box;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            border: 1px solid white;
-            .leftBox {
-                width: 60%;
-                height: 600px;
-                padding: 50px 0px;
-                border: 1px solid white;
-                .subTitle {
-                    display: block;
-                    font-size: 20px;
-                    font-weight: 500;
-                    margin-bottom: 10px;
-                    color: var(--main-white-color);
-                }
-                .title {
-                    font-size: 90px;
-                    font-weight: 900;
-                    line-height: 100px;
-                    color: var(--main-white-color);
-                    font-family: 'Roboto', sans-serif;
+            .flexBox {
+                width: 100%;
+                display: flex;
+                align-items: center;
+                .titleBox {
                     margin-bottom: 30px;
+                    .jaTitle {
+                        color: var(--main-white-color);
+                        font-size: 16px;
+                        font-weight: 700;
+                        display: block;
+                    }
+                    .enTitle {
+                        font-size: 70px;
+                        line-height: 46px;
+                        margin-top: 30px;
+                        font-weight: 700;
+                        color: var(--main-white-color);
+                    }
                 }
-                .text {
-                    font-size: 20px;
-                    font-weight: 500;
-                    line-height: 30px;
-                    color: var(--main-white-color);
-                    font-family: 'Roboto', sans-serif;
-                    margin-bottom: 60px;
+                .leftBox {
+                    width: 50%;
+                    border: 1px solid whtie;
+                    .text {
+                        font-size: 20px;
+                        line-height: 37px;
+                        color: var(--main-white-color);
+                    }
+                    .moreButton {
+                        display: block;
+                        margin-top: 60px;
+                        display: flex;
+                        align-items: center;
+                        .arrow {
+                            display: block;
+                            content: '';
+                            width: 50px;
+                            height: 50px;
+                            border-radius: 50px;
+                            background-color: var(--main-white-color);
+                        }
+                    }
                 }
-                .link {
-                    border: 1px solid var(--main-white-color);
-                    border-radius: 20px;
-                    padding: 20px 30px;
+                .rightBox {
+                    width: 50%;
+                    .image {
+                        height: 100%;
+                    }
                 }
             }
-            .rightBox {
-                width: 40%;
-                border: 1px solid white;
-                .image {
-                    width: 700px;
-                    height: 700px;
+        }
+    }
+}
+
+@media screen and (max-width: 1026px) {
+    .about {
+        position: relative;
+        width: 100%;
+        height: 1300px;
+        margin-top: -90px;
+        border-radius: 30px 30px 0 0;
+        background-color: var(--main-red-color);
+        z-index: -1;
+        .container {
+            width: 90%;
+            max-width: 1900px;
+            height: 100%;
+            margin: 0 auto;
+            .box {
+                position: absolute;
+                top: 500px;
+                width: 90%;
+                box-sizing: border-box;
+                .flexBox {
+                    width: 100%;
+                    display: block;
+                    .titleBox {
+                        margin-bottom: 30px;
+                        .jaTitle {
+                            color: var(--main-white-color);
+                            font-size: 14px;
+                            font-weight: 700;
+                            display: block;
+                        }
+                        .enTitle {
+                            font-size: 55px;
+                            line-height: 60px;
+                            margin-top: 30px;
+                            font-weight: 700;
+                            color: var(--main-white-color);
+                        }
+                    }
+                    .leftBox {
+                        width: 100%;
+                        border: 1px solid whtie;
+                        margin-bottom: 70px;
+                        .text {
+                            font-size: 14px;
+                            line-height: 26px;
+                            color: var(--main-white-color);
+                        }
+                        .moreButton {
+                            display: block;
+                            margin-top: 60px;
+                            display: flex;
+                            align-items: center;
+                            .arrow {
+                                display: block;
+                                content: '';
+                                width: 50px;
+                                height: 50px;
+                                border-radius: 50px;
+                                background-color: var(--main-white-color);
+                            }
+                        }
+                    }
+                    .rightBox {
+                        width: 100%;
+                        .image {
+                            width: 100%;
+                        }
+                    }
                 }
             }
         }
     }
-}
\ No newline at end of file
+}
diff --git a/src/components/organisms/styles/Header.module.scss b/src/components/organisms/styles/Header.module.scss
index ab615de..5f26da9 100644
--- a/src/components/organisms/styles/Header.module.scss
+++ b/src/components/organisms/styles/Header.module.scss
@@ -5,7 +5,7 @@
   background-color: #fff;
   .container {
     width: 95%;
-    max-width: 1400px;
+    max-width: 1900px;
     margin: 0 auto;
     display: flex;
     align-items: center;
diff --git a/src/components/organisms/styles/Hero.module.scss b/src/components/organisms/styles/Hero.module.scss
index f41de2f..5aff87d 100644
--- a/src/components/organisms/styles/Hero.module.scss
+++ b/src/components/organisms/styles/Hero.module.scss
@@ -4,7 +4,7 @@
   box-sizing: border-box;
   .container {
     width: 95%;
-    max-width: 1400px;
+    max-width: 1900px;
     margin: 0 auto;
     height: 100%;
     .title {
diff --git a/src/styles/globals.css b/src/styles/globals.css
index 8b6de86..b855128 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -2,7 +2,7 @@
   /* color */
   --main-color: #ff0211;
   --main-red-color: #ff0211;
-  --main-black-color: #000000;
+  --main-black-color:  #333333;
   --main-white-color: #ffffff;
 
   /* fontSize */