diff --git a/spirograph/src/assets/brandingImg/projectoverview.png b/spirograph/src/assets/brandingImg/projectoverview.png
new file mode 100644
index 0000000..328c380
Binary files /dev/null and b/spirograph/src/assets/brandingImg/projectoverview.png differ
diff --git a/spirograph/src/components/Header/Header.jsx b/spirograph/src/components/Header/Header.jsx
index 574cd2d..6563920 100644
--- a/spirograph/src/components/Header/Header.jsx
+++ b/spirograph/src/components/Header/Header.jsx
@@ -1,138 +1,137 @@
 import * as React from "react";
-import '../../pages/main/main.css';
-import './Header.css';
-
+import "../../pages/main/main.css";
+import "./Header.css";
 import { useNavigate } from "react-router-dom";
 
-
 export const Header = () => {
-
-    const navigate = useNavigate();
-    return (
-
-     
-        <div className="flex flex-col px-5 w-full max-md:max-w-full">
-        <div className="flex gap-5 items-start text-sm font-bold text-white max-md:flex-wrap">
-            <div className="flex flex-col">
-            <div className="img-container">
+  const navigate = useNavigate();
+  return (
+    <div className="flex flex-col px-5 w-full max-w-full">
+      <div className="flex gap-5 items-start text-sm font-bold text-white flex-wrap">
+        <div className="flex flex-col">
+          <div className="img-container">
             <img
-                loading="lazy"
-                src="https://cdn.builder.io/api/v1/image/assets/TEMP/e273b21e7a814573f6043f3bb8a5765e678dbd03a7dcdd8675469b73c1b547a1?"
-                className="self-center border border-solid border-stone-500 stroke-[1px] stroke-stone-500 w-[218px]"
-                style={{height: "0px"}}
+              loading="lazy"
+              src="https://cdn.builder.io/api/v1/image/assets/TEMP/e273b21e7a814573f6043f3bb8a5765e678dbd03a7dcdd8675469b73c1b547a1?"
+              className="self-center border border-solid border-stone-500 stroke-[1px] stroke-stone-500 w-[218px]"
+              style={{ height: "0px" }}
             />
-            <div className="mt-1 text-custom text-left mr-14" onClick={()=>navigate('./LogicPage')}>Symbol Logic</div>
+            <div
+              className="mt-1 text-custom text-left"
+              onClick={() => navigate("./LogicPage")}
+            >
+              Symbol Logic
             </div>
-            </div>
-            <div className="flex flex-col whitespace-nowrap">
-            <div className="img-container">
+          </div>
+        </div>
+        <div className="flex flex-col whitespace-nowrap">
+          <div className="img-container">
             <img
-                loading="lazy"
-                src="https://cdn.builder.io/api/v1/image/assets/TEMP/9c39689acba82139b57946ceeac68a4e60177d5b1f6190eb7594a0f5a99471a0?"
-                className="self-center border border-solid border-stone-500 stroke-[1px] stroke-stone-500 w-[217px]"
-                style={{height: "0px"}}
+              loading="lazy"
+              src="https://cdn.builder.io/api/v1/image/assets/TEMP/9c39689acba82139b57946ceeac68a4e60177d5b1f6190eb7594a0f5a99471a0?"
+              className="self-center border border-solid border-stone-500 stroke-[1px] stroke-stone-500 w-[217px]"
+              style={{ height: "0px" }}
             />
             <div className="mt-1 text-custom text-left">ABOUT</div>
-            </div>
-            </div>
-            <div className="flex flex-col">
-            <div className="img-container">
+          </div>
+        </div>
+        <div className="flex flex-col">
+          <div className="img-container">
             <img
-                loading="lazy"
-                src="https://cdn.builder.io/api/v1/image/assets/TEMP/e273b21e7a814573f6043f3bb8a5765e678dbd03a7dcdd8675469b73c1b547a1?"
-                className="self-center border border-solid border-stone-500 stroke-[1px] stroke-stone-500 w-[218px]"
-                style={{height: "0px"}}
+              loading="lazy"
+              src="https://cdn.builder.io/api/v1/image/assets/TEMP/e273b21e7a814573f6043f3bb8a5765e678dbd03a7dcdd8675469b73c1b547a1?"
+              className="self-center border border-solid border-stone-500 stroke-[1px] stroke-stone-500 w-[218px]"
+              style={{ height: "0px" }}
             />
             <div className="mt-1 text-custom text-left">Business Model</div>
-            </div>
-            </div>
-            <div className="flex flex-col whitespace-nowrap">
-            <div className="img-container">
+          </div>
+        </div>
+        <div className="flex flex-col whitespace-nowrap">
+          <div className="img-container">
             <img
-                loading="lazy"
-                src="https://cdn.builder.io/api/v1/image/assets/TEMP/e273b21e7a814573f6043f3bb8a5765e678dbd03a7dcdd8675469b73c1b547a1?"
-                className="self-center border border-solid border-stone-500 stroke-[1px] stroke-stone-500 w-[218px]"
-                style={{height: "0px"}}
+              loading="lazy"
+              src="https://cdn.builder.io/api/v1/image/assets/TEMP/e273b21e7a814573f6043f3bb8a5765e678dbd03a7dcdd8675469b73c1b547a1?"
+              className="self-center border border-solid border-stone-500 stroke-[1px] stroke-stone-500 w-[218px]"
+              style={{ height: "0px" }}
             />
             <div className="mt-1 text-custom text-left">CONTACT</div>
-            </div>
-            </div>
-            <div className="flex flex-col whitespace-nowrap max-md:max-w-full">
-            <div className="img-container">
+          </div>
+        </div>
+        <div className="flex flex-col max-w-full">
+          <div className="img-container">
             <img
-                loading="lazy"
-                src="https://cdn.builder.io/api/v1/image/assets/TEMP/eb85f72d64de93b50a22883e92d0bd681d50f84e866a50349337a0eff12d5a74?"
-                className="w-full border border-solid border-stone-500 stroke-[1px] stroke-stone-500 max-md:max-w-full"
-                style={{height: "0px"}}
+              loading="lazy"
+              src="https://cdn.builder.io/api/v1/image/assets/TEMP/eb85f72d64de93b50a22883e92d0bd681d50f84e866a50349337a0eff12d5a74?"
+              className="w-full border border-solid border-stone-500 stroke-[1px] stroke-stone-500 max-w-full"
+              style={{ height: "0px" }}
             />
-            <div className="mt-1 text-custom max-md:max-w-full text-left">SHOP</div>
-            </div>
-            </div>
-            <div className="flex flex-col self-stretch text-lg">
-            <div className="img-container">
+            <div className="mt-1 text-custom max-w-full text-left">SHOP</div>
+          </div>
+        </div>
+        <div className="flex flex-col self-end text-lg fixed top-[1.5vh] right-[1.5vw] max-w-full">
+          <div className="img-container">
             <img
-                loading="lazy"
-                src="https://cdn.builder.io/api/v1/image/assets/TEMP/7aa30990a4364aea264e71e50ad7f68ba74024395d1b99a9a0c940b6cb3c347f?"
-                className="w-full border border-solid border-stone-500 stroke-[1px] stroke-stone-500"
-                style={{height: "0px"}}
+              loading="lazy"
+              src="https://cdn.builder.io/api/v1/image/assets/TEMP/7aa30990a4364aea264e71e50ad7f68ba74024395d1b99a9a0c940b6cb3c347f?"
+              className="w-full border border-solid border-stone-500 stroke-[1px] stroke-stone-500"
+              style={{ height: "0px" }}
             />
             <div className="mt-1.5 text-left">MADE GRAPHIC &gt;</div>
-            </div>
-            </div>
-        </div>
-        <div className="flex self-start mt-12   max-md:flex-wrap max-md:mt-10 ">
-            {/*(<div className="flex-auto text-9xl italic font-black text-white leading-[77px] max-md:text-4xl max-md:leading-7">*/}
-            
-                <img src="/assets/images/newSymbol.svg" alt="Symbol" className="symbol-img" />
-            
-            {/*</div>*/}
-            <div className="flex-auto self-start ml-4 mt-0 max-md:max-w-full">
-            <div className="flex max-md:flex-col max-md:gap-0">
-                <div className="flex flex-col w-[35%] max-md:ml-0 max-md:w-full">
-                <div className="firstExplanation">
-                <div className="text-custom ml-7 text-left font-medium leading-custom text-neutral-400 max-md:mt-6">
-                    ‘The Symbol’ 은 자신의 아이덴티티를 활용하여 ai 어시스턴트의{" "}
-                    인터페이스를 커스텀을 도와주는 디자인 스튜디오 입니다. {"     "}도형 ‘원'
-                    을 기반으로 그래픽이 생성 되며 추가로 개인의 맞춤 성향을 위한
-                    ai가  커스텀을 도와줍니다. 우리의 ‘The Symbol ’을 통해 자신만의 ‘ai{" "}
-                    
-                    어시스턴트’를 제작해보세요 !
-                </div>
-                </div>
-                </div>
-                <div className="flex flex-col ml-5 w-[50%] max-md:ml-0 max-md:w-full">
-                <div className="text-custom text-left ml-1 font-medium leading-custom text-neutral-400 max-md:mt-6 max-md:max-w-full">
-                    &quot;'The Symbol'은 생년월일, 개인명에 근거하여 생성되는
-                    상징물로서, 하이포 사이클로이드의 {" "}
-                    기하학적 특성에서 착안했다. 하이포 사이클로이드는 큰 원의 내부를
-                    맴도는 작은 원의 경계에 {" "}
-                    위치한 점의 궤적으로 정의된다. 이 궤적은 개별적 존재가 사회에서
-                    자신만의 신념, 가치관, 이데올{" "}로기를 바탕으로 경로를 그려 나가는
-                    과정과 상통합니다. 다양한 이념과 삶의 정의를 지닌 우리는{" "}
-                    서로 연계되어 있음에도 불구하고 조화를 이루며 사회를 형성합니다.{" "}
-                </div>
-                </div>
-            </div>
-            </div>
-            <div className="flex flex-col text-left text-custom text-neutral-400 my-auto font-medium leading-4 mr-14 mb-8">
+          </div>
+          <div className="flex flex-col text-left text-custom text-neutral-400 font-medium leading-4 mb-8">
             <div className="flex">
-                <div className="flex flex-col mr-4">
-                <div className="text-nowrap">_hhesta ©</div>
-                <div className="text-nowrap">1999-2024</div>
-                </div>
-                <div className="text-3xl text-custom font-thin leading-9 text-gray-200 mr-4">/</div>
-                <div className="flex flex-col">
-                <div className="text-nowrap">_hhesta ©</div>
-                <div className="text-nowrap">1999-2024</div>
-                </div>
+              <div className="flex flex-col mr-4">
+                <div className="whitespace-nowrap">_hhesta ©</div>
+                <div className="whitespace-nowrap">1999-2024</div>
+              </div>
+              <div className="text-3xl text-custom font-thin leading-9 text-gray-200 mr-4">
+                /
+              </div>
+              <div className="flex flex-col">
+                <div className="whitespace-nowrap">_hhesta ©</div>
+                <div className="whitespace-nowrap">1999-2024</div>
+              </div>
             </div>
             <div className="mt-6 text-white">
-                INCHEON Metropolitan City, <br />
-                South KOREA
-            </div>
+              INCHEON Metropolitan City, <br />
+              South KOREA
             </div>
+          </div>
         </div>
+      </div>
+      <div className="flex self-start mt-12 flex-wrap mt-10">
+        <img
+          src="/assets/images/newSymbol.svg"
+          alt="Symbol"
+          className="symbol-img"
+        />
+        <div className="flex-auto self-start ml-4 mt-0 max-w-full">
+          <div className="flex flex-col max-w-full">
+            <div className="flex flex-col w-[35%] max-w-full">
+              <div className="firstExplanation">
+                <div className="text-custom ml-7 text-left font-medium leading-custom text-neutral-400 mt-6">
+                  ‘The Symbol’ 은 자신의 아이덴티티를 활용하여 ai 어시스턴트의
+                  인터페이스를 커스텀을 도와주는 디자인 스튜디오 입니다. 도형
+                  ‘원' 을 기반으로 그래픽이 생성 되며 추가로 개인의 맞춤 성향을
+                  위한 ai가 커스텀을 도와줍니다. 우리의 ‘The Symbol ’을 통해
+                  자신만의 ‘ai 어시스턴트’를 제작해보세요 !
+                </div>
+              </div>
+            </div>
+            <div className="flex flex-col ml-5 w-[50%] max-w-full">
+              <div className="text-custom text-left ml-1 font-medium leading-custom text-neutral-400 mt-6 max-w-full">
+                "The Symbol'은 생년월일, 개인명에 근거하여 생성되는 상징물로서,
+                하이포 사이클로이드의 기하학적 특성에서 착안했다. 하이포
+                사이클로이드는 큰 원의 내부를 맴도는 작은 원의 경계에 위치한
+                점의 궤적으로 정의된다. 이 궤적은 개별적 존재가 사회에서
+                자신만의 신념, 가치관, 이데올로기를 바탕으로 경로를 그려 나가는
+                과정과 상통합니다. 다양한 이념과 삶의 정의를 지닌 우리는 서로
+                연계되어 있음에도 불구하고 조화를 이루며 사회를 형성합니다.
+              </div>
+            </div>
+          </div>
         </div>
-        
-    )
-    }
\ No newline at end of file
+      </div>
+    </div>
+  );
+};
diff --git a/spirograph/src/components/NavBar/Navbar.jsx b/spirograph/src/components/NavBar/Navbar.jsx
index 5986a64..975b178 100644
--- a/spirograph/src/components/NavBar/Navbar.jsx
+++ b/spirograph/src/components/NavBar/Navbar.jsx
@@ -3,9 +3,9 @@ import React, { useState, useEffect } from "react";
 import * as S from "./styles";
 import styled from "styled-components";
 import { useNavigate } from "react-router-dom";
-import Horizon from "./horizon";
-import Logo from "../../assets/brandingImg/RealSymbol.png";
-export const ImageWrapper = styled.div`
+import Horizon from "../../components/NavBar/horizon";
+import Logo from "../../assets/brandingImg/Logoo.svg";
+const ImageWrapper = styled.div`
   display: flex;
   width: 100%;
   //원래 1.69
@@ -14,22 +14,23 @@ export const ImageWrapper = styled.div`
   margin-left: 2.5rem;
   height: 100%;
 `;
-export const Image = styled.img`
+const Image = styled.img`
   display: block;
   width: auto;
 `;
-export const Group = styled.div`
+const Group = styled.div`
   display: flex;
   flex-direction: column;
   width: 100%;
   margin-right: 1.25rem;
   margin-bottom: 7.94rem;
+  text-align: start;
   &:hover {
     background-color: #fff;
     transition: background-color 0.8s;
   }
 `;
-export function Nav() {
+const Navbar = () => {
   const navigate = useNavigate();
   const [topOffset, setTopOffset] = useState(0);
   const [lastScrollY, setLastScrollY] = useState(0);
@@ -99,6 +100,6 @@ export function Nav() {
       </Group>
     </S.NavBar>
   );
-}
+};
 
-export default Nav;
+export default Navbar;
diff --git a/spirograph/src/components/NavBar/styles.jsx b/spirograph/src/components/NavBar/styles.jsx
index 29f959b..c161a4f 100644
--- a/spirograph/src/components/NavBar/styles.jsx
+++ b/spirograph/src/components/NavBar/styles.jsx
@@ -22,7 +22,6 @@ export const NavMenu = styled.div`
   cursor: pointer;
   font-size: 1rem;
   font-family: "Pretendard-Regular";
-  height: 1rem;
   padding: 0.5rem 0;
   &:hover {
     background-color: #fff;
diff --git a/spirograph/src/components/UnderBar/Bar.jsx b/spirograph/src/components/UnderBar/Bar.jsx
new file mode 100644
index 0000000..9162762
--- /dev/null
+++ b/spirograph/src/components/UnderBar/Bar.jsx
@@ -0,0 +1,76 @@
+import React from "react";
+
+const Bar = () => {
+  return (
+    <div className="flex justify-center items-center px-16 py-1.5 mt-20 w-full text-xs font-bold whitespace-nowrap bg-neutral-900 text-zinc-500 max-md:px-5 max-md:mt-10 max-md:max-w-full">
+      <div className="flex gap-5 justify-between items-center w-full max-w-[1688px] max-md:flex-wrap max-md:max-w-full">
+        <div className="self-stretch my-auto text-neutral-400">Cooperation</div>
+        <img
+          loading="lazy"
+          src="/assets/images/underbar6.png"
+          className="shrink-0 self-stretch my-auto max-w-full aspect-[5.56] w-[108px]"
+          alt=""
+        />
+        <div className="shrink-0 self-stretch my-auto aspect-[2.7] w-[38px] text-neutral-400">
+          PBG
+        </div>
+        <img
+          loading="lazy"
+          src="/assets/images/underbar3.png"
+          className="shrink-0 self-stretch my-auto w-11 aspect-[1.3]"
+          alt=""
+        />
+        <img
+          loading="lazy"
+          src="/assets/images/underbar8.png"
+          className="shrink-0 self-stretch my-auto w-11 aspect-[1.22]"
+          alt=""
+        />
+        <img
+          loading="lazy"
+          src="https://cdn.builder.io/api/v1/image/assets/TEMP/6a42bfc30eb6305c7456a0f42dd7fbe1f7ca1ec10490ed4b86f4050ba7559cc0?"
+          className="shrink-0 self-stretch my-auto w-10 aspect-[1.59]"
+          alt=""
+        />
+        <img
+          loading="lazy"
+          src="/assets/images/underbar5.png"
+          className="shrink-0 self-stretch my-auto aspect-[0.88] w-[23px]"
+          alt=""
+        />
+        <img
+          loading="lazy"
+          src="/assets/images/underbar7.png"
+          className="shrink-0 self-stretch my-auto aspect-[2.56] w-[66px]"
+          alt=""
+        />
+        <img
+          loading="lazy"
+          src="/assets/images/underbar4.png"
+          className="shrink-0 self-stretch my-auto aspect-[0.93] w-[30px]"
+          alt=""
+        />
+        <img
+          loading="lazy"
+          src="/assets/images/underbar111.svg"
+          className="shrink-0 self-stretch bg-blend-multiply aspect-square w-[41px]"
+          alt=""
+        />
+        <img
+          loading="lazy"
+          src="/assets/images/underbar12.png"
+          className="shrink-0 self-stretch my-auto aspect-[3.85] w-[84px]"
+          alt=""
+        />
+        <img
+          loading="lazy"
+          src="/assets/images/underbar2.png"
+          className="shrink-0 self-stretch my-auto aspect-[1.75] w-[51px]"
+          alt=""
+        />
+      </div>
+    </div>
+  );
+};
+
+export default Bar;
diff --git a/spirograph/src/pages/brandingPage/index.jsx b/spirograph/src/pages/brandingPage/index.jsx
index a7de166..f3fe5e1 100644
--- a/spirograph/src/pages/brandingPage/index.jsx
+++ b/spirograph/src/pages/brandingPage/index.jsx
@@ -1,6 +1,8 @@
 import React, { useEffect, useState } from "react";
 import * as S from "./styles";
 import NavBar from "../../components/NavBar/Navbar";
+import Project from "../../assets/brandingImg/projectoverview.png";
+
 import BlueGradient from "../../assets/brandingImg/blueGradient.png";
 import BrownBackground from "../../assets/brandingImg/brownBackground.png";
 import Animal from "../../assets/brandingImg/animal.png";
@@ -21,7 +23,6 @@ import DevelopmentOfSymbol from "../../assets/brandingImg/DevelopmentOfSymbol.pn
 import Beauty from "../../assets/brandingImg/BeautyAnd.png";
 import BrandEssence from "../../assets/brandingImg/BrandEssence.png";
 import BuildASymbol from "../../assets/brandingImg/BuildASymbol.png";
-
 import BrandCoreValues from "../../assets/brandingImg/BrandCoreValues.png";
 import DesignConcept from "../../assets/brandingImg/DesignConcept.png";
 import ShapeAnalydid from "../../assets/brandingImg/Analydid.png";
@@ -33,10 +34,8 @@ import Sym3 from "../../assets/brandingImg/sym3.webp";
 import Sym4 from "../../assets/brandingImg/sym4.webp";
 import Sym5 from "../../assets/brandingImg/sym5.webp";
 import Sym6 from "../../assets/brandingImg/sym6.webp";
-// import Sym7 from "../../assets/brandingImg/sym7.webp";
-// import Sym8 from "../../assets/brandingImg/last.webp";
+import Bar from "../../components/UnderBar/Bar";
 
-// import colors from "../../fonts/color";
 export default function BrandingPage() {
   const [position, setPosition] = useState(0);
   function onScroll() {
@@ -55,36 +54,11 @@ export default function BrandingPage() {
     <>
       <S.FirstPage>
         <NavBar />
-        <S.TextWrapper>
-          <S.HugeT>
-            {" "}
-            PROJECT <br />
-            OVERVIEW
-          </S.HugeT>
-
-          <S.SmallT>
-            ‘The Symbol’은 곧 다가올 AI혁명을 대비하여 기존 ‘시리’와 ‘빅스비'와
-            같은
-            <br />
-            AI 어시스던트를 개인의 고유의 정보를 토대로 그래픽을 생성하여
-            인터페이스
-            <br />
-            및 이름의 커스터마이징이 가능하다. 이는 AI 어시스턴트가 각
-            사용자에게 더욱
-            <br />
-            친근하게 다가갈 수 있도록 하며, 정교한 맞춤 알고리즘을 통해 편리함을
-            제공한다.
-            <br />
-            <br />
-            <br />
-            우리의 브랜드는 ‘The Symbol’을 통해 자신만이 가질 수 있는 고유의
-            <br />
-            AI 어시스던트를 창조하여 삶을 더욱 더 특별하고 놀라운 경험을
-            선사한다.
-            <br />
-            이를 통해 사용자의 일상에 깊이 통합되는 개인화된 동반자를 제공한다.
-          </S.SmallT>
-        </S.TextWrapper>
+        <S.ImageContainerFull
+          src={Project}
+          alt="Project Overview"
+          loading="lazy"
+        ></S.ImageContainerFull>
       </S.FirstPage>
       {/* =================================================================== */}
       <S.SecondPage>
@@ -177,9 +151,10 @@ export default function BrandingPage() {
             height: window.innerHeight <= 900 ? "40vw" : "50vh",
           }}
           alt="갈색 배경"
+          loading="lazy"
         >
-          <S.ThirdPerAni src={Person} alt="사람"></S.ThirdPerAni>
-          <S.ThirdPerAni src={Animal} alt="동물"></S.ThirdPerAni>
+          <S.ThirdPerAni src={Person} alt="사람" loading="lazy"></S.ThirdPerAni>
+          <S.ThirdPerAni src={Animal} alt="동물" loading="lazy"></S.ThirdPerAni>
         </div>
         <div style={{ display: "flex" }}>
           <S.ThirdT style={{ color: "#848484" }}>
@@ -232,6 +207,7 @@ export default function BrandingPage() {
         <S.ImageContainerFull
           src={DiscoveryOfFireR}
           alt="불의 발견"
+          loading="lazy"
         ></S.ImageContainerFull>
       </S.FifthPage>
       <S.SixthPage>
@@ -241,6 +217,7 @@ export default function BrandingPage() {
           <S.ImageContainerFull
             src={AgriculturalEvolution}
             alt="농업혁명"
+            loading="lazy"
           ></S.ImageContainerFull>
         </div>
       </S.SixthPage>
@@ -250,6 +227,7 @@ export default function BrandingPage() {
           // style={{ height: "200vh", marginBottom: "50vh" }}
           src={DiscoveryOfCivil}
           alt="문명의 발전"
+          loading="lazy"
         ></S.ImageContainerFull>
         {/* </div> */}
       </S.SeventhPage>
@@ -259,6 +237,7 @@ export default function BrandingPage() {
           // style={{ height: "200vh", width: "100vw" }}
           src={Mankind}
           alt="인류사 발명품"
+          loading="lazy"
         ></S.ImageContainerFull>
       </S.EighthPage>
       {/* 상징의 발전 */}
@@ -266,6 +245,7 @@ export default function BrandingPage() {
         <S.ImageContainerFull
           src={DevelopmentOfSymbol}
           alt="상징의 발전"
+          loading="lazy"
         ></S.ImageContainerFull>
       </S.NinethPage>
       {/* 산업혁명*/}
@@ -273,6 +253,7 @@ export default function BrandingPage() {
         <S.ImageContainerFull
           src={IndustryEvolution}
           alt="산업혁명"
+          loading="lazy"
         ></S.ImageContainerFull>
       </S.TenthPage>
       {/* AI발전 */}
@@ -281,10 +262,12 @@ export default function BrandingPage() {
           <S.ImageContainerFull
             src={AIEvolution}
             alt="AI혁명"
+            loading="lazy"
           ></S.ImageContainerFull>
           <S.ImageContainerFull
             src={AIEvol}
             alt="AI혁명 밑 글씨"
+            loading="lazy"
           ></S.ImageContainerFull>
         </S.BackGradient>
       </S.EleventhPage>
@@ -300,6 +283,7 @@ export default function BrandingPage() {
           <S.ImageContainerFull
             src={Gradient1}
             alt="그라데이션1"
+            loading="lazy"
           ></S.ImageContainerFull>
           <div
             style={{
@@ -334,6 +318,7 @@ export default function BrandingPage() {
             <S.ImageContainerFull
               src={Gradient2}
               alt="그라데이션2"
+              loading="lazy"
             ></S.ImageContainerFull>
           </div>
         </div>
@@ -354,6 +339,7 @@ export default function BrandingPage() {
           style={{ width: "95vw", height: "auto" }}
           src={BrandCoreValues}
           alt="brandcorevalues"
+          loading="lazy"
         ></img>
       </S.ThirteenPage>
       {/* co-creative 효과 */}
@@ -407,9 +393,14 @@ export default function BrandingPage() {
           style={{ marginRight: "0.5rem", marginLeft: "0.5rem" }}
           src={DesignConcept}
           alt="DesignConcept"
+          loading="lazy"
         />
 
-        <S.ImageContainerFull src={Beauty} alt="각자의 아름다움" />
+        <S.ImageContainerFull
+          src={Beauty}
+          alt="각자의 아름다움"
+          loading="lazy"
+        />
       </div>{" "}
       {/* Graphic Motive-물방울 */}
       <S.SeventeenthPage>
@@ -417,11 +408,15 @@ export default function BrandingPage() {
           src={GraphicMotive}
           alt="GraphicMotive"
         ></S.ImageContainerFull>
-        <S.ImageContainerFull src={ShapeAnalydid} alt="ShapeAnalydid" />
+        <S.ImageContainerFull
+          src={ShapeAnalydid}
+          alt="ShapeAnalydid"
+          loading="lazy"
+        />
       </S.SeventeenthPage>
       <div>
-        <S.ImageContainerFull src={Sym1} alt="Sym1" />
-        <S.ImageContainerFull src={Sym2} alt="Sym2" />
+        <S.ImageContainerFull src={Sym1} alt="Sym1" loading="lazy" />
+        <S.ImageContainerFull src={Sym2} alt="Sym2" loading="lazy" />
       </div>
       <div style={{ backgroundColor: "#fff" }}>
         <S.ImageContainerFull
@@ -429,21 +424,27 @@ export default function BrandingPage() {
           src={Sym3}
           alt="Sym3"
         />
-        <S.ImageContainerFull src={Sym4} alt="Sym4" />
+        <S.ImageContainerFull src={Sym4} alt="Sym4" loading="lazy" />
       </div>
       <div>
-        <S.ImageContainerFull src={Sym5} alt="Sym5" />
+        <S.ImageContainerFull src={Sym5} alt="Sym5" loading="lazy" />
 
-        <S.ImageContainerFull src={Sym6} alt="Sym6" />
+        <S.ImageContainerFull src={Sym6} alt="Sym6" loading="lazy" />
         {/* <S.ImageContainerFull src={Sym7} alt="Sym7" />
         <S.ImageContainerFull src={Sym8} alt="last" /> */}
-        <S.ImageContainerFull src={Typography} alt="Typography" />
+        <S.ImageContainerFull
+          src={Typography}
+          alt="Typography"
+          loading="lazy"
+        />
 
         <S.ImageContainerFull
           src={GradientBackground}
           alt="GradientBackground"
+          loading="lazy"
         />
       </div>
+      <Bar />
     </>
   );
 }
diff --git a/spirograph/src/pages/businessPage/index.jsx b/spirograph/src/pages/businessPage/index.jsx
index f0b3c5c..53f5185 100644
--- a/spirograph/src/pages/businessPage/index.jsx
+++ b/spirograph/src/pages/businessPage/index.jsx
@@ -1,5 +1,8 @@
 import React from "react";
 import * as S from "./styles";
+import { useNavigate } from "react-router-dom";
+import styled from "styled-components";
+
 import One from "../../assets/businessImg/1.png";
 import Two from "../../assets/businessImg/2.png";
 import Three from "../../assets/businessImg/3.png";
@@ -15,49 +18,65 @@ import Twelve from "../../assets/businessImg/12.png";
 import Thirteen from "../../assets/businessImg/13.png";
 import Fourteen from "../../assets/businessImg/14.png";
 import Nav from "../../components/NavBar/Navbar";
+import Bar from "../../components/UnderBar/Bar";
+
+const images = [
+  { src: One, alt: "1" },
+  { src: Two, alt: "2" },
+  { src: Three, alt: "3" },
+  { src: Four, alt: "4" },
+  { src: Five, alt: "5" },
+  { src: Six, alt: "6" },
+  { src: Seven, alt: "7" },
+];
+const whiteImages = [
+  { src: Eight, alt: "8" },
+  { src: Nine, alt: "9HowToUse" },
+  { src: Ten, alt: "10" },
+  { src: Eleven, alt: "11" },
+  { src: Twelve, alt: "12" },
+  { src: Thirteen, alt: "13" },
+  { src: Fourteen, alt: "14" },
+];
 export default function BrandingPage() {
+  const navigate = useNavigate();
+
+  const Container = styled.div`
+    width: 100vw;
+    height: auto;
+    border-color: #ebebeb;
+    background-image: url(${(props) => props.src});
+  `;
+
   return (
-    <>
+    <div style={{ backgroundColor: "#f1f1f1" }}>
       <Nav />
       <S.FirstPage>
-        <S.ImageContainerFull src={One} alt="1"></S.ImageContainerFull>
-        <S.ImageContainerFull src={Two} alt="2"></S.ImageContainerFull>
-        <S.ImageContainerFull src={Three} alt="3"></S.ImageContainerFull>
-        <S.ImageContainerFull src={Four} alt="4"></S.ImageContainerFull>
-        <S.ImageContainerFull src={Five} alt="5"></S.ImageContainerFull>
-        <S.ImageContainerFull src={Six} alt="6"></S.ImageContainerFull>
-        <S.ImageContainerFull src={Seven} alt="7"></S.ImageContainerFull>
+        {images.map((image, index) => (
+          <S.ImageContainerFull key={index} src={image.src} alt={image.alt} />
+        ))}
       </S.FirstPage>
       <S.SecondPage>
-        <S.ImageContainerFullWhite
-          src={Eight}
-          alt="8"
-        ></S.ImageContainerFullWhite>
-        <S.ImageContainerFullWhite
-          src={Nine}
-          alt="9HowToUse"
-        ></S.ImageContainerFullWhite>
-        <S.ImageContainerFullWhite
-          src={Ten}
-          alt="10"
-        ></S.ImageContainerFullWhite>
-        <S.ImageContainerFullWhite
-          src={Eleven}
-          alt="11"
-        ></S.ImageContainerFullWhite>
-        <S.ImageContainerFullWhite
-          src={Twelve}
-          alt="12"
-        ></S.ImageContainerFullWhite>
-        <S.ImageContainerFullWhite
-          src={Thirteen}
-          alt="13"
-        ></S.ImageContainerFullWhite>
-        <S.ImageContainerFullWhite
-          src={Fourteen}
-          alt="14"
-        ></S.ImageContainerFullWhite>
+        {whiteImages.map((image, index) => (
+          <S.ImageContainerFullWhite
+            key={index}
+            src={image.src}
+            alt={image.alt}
+          />
+        ))}
+        <Container src={Fourteen}></Container>
+        <div style={{ display: "flex", justifyContent: "center" }}>
+          <S.LastButton
+            style={{ backgroundColor: "#000" }}
+            onClick={() => {
+              navigate("/sketch");
+            }}
+          >
+            AI 비서 생성하기
+          </S.LastButton>
+        </div>
       </S.SecondPage>
-    </>
+      <Bar />
+    </div>
   );
 }
diff --git a/spirograph/src/pages/businessPage/styles.jsx b/spirograph/src/pages/businessPage/styles.jsx
index 2076d4e..8a7dab1 100644
--- a/spirograph/src/pages/businessPage/styles.jsx
+++ b/spirograph/src/pages/businessPage/styles.jsx
@@ -30,6 +30,7 @@ export const Container = styled.div`
   width: 100vw;
   height: auto;
   border-color: #ebebeb;
+  background-image: url(${(props) => props.src});
 `;
 
 export const ImageContainerFullWhite = styled.img`
@@ -42,9 +43,15 @@ export const ImageContainerFullWhite = styled.img`
 `;
 
 export const LastButton = styled.button`
-  background-color: gray 95;
-  width: 21rem;
-  height: 5rem;
-  color: #fff;
+  width: 25rem;
+  height: 7rem;
+  justify-content: center;
+  align-items: center;
+  display: flex;
+  color: #f1f1f1;
+  margin: 0 auto;
+  position: absolute;
   border-radius: 20px;
+  font-size: 2rem;
+  font-weight: 700;
 `;
diff --git a/spirograph/src/pages/main/main.jsx b/spirograph/src/pages/main/main.jsx
index d279daf..ea14e63 100644
--- a/spirograph/src/pages/main/main.jsx
+++ b/spirograph/src/pages/main/main.jsx
@@ -257,6 +257,9 @@ export default function Main() {
             <div
               className="button-text justify-center items-center px-16 py-7 whitespace-nowrap rounded-3xl max-md:px-5"
               style={{ color: "#b4acac" }}
+              onClick={() => {
+                navigate("/branding");
+              }}
             >
               브랜드 보러가기 &gt;
             </div>
@@ -265,6 +268,9 @@ export default function Main() {
             <div
               className="button-text justify-center items-center px-16 py-7 whitespace-nowrap rounded-3xl max-md:px-5"
               style={{ color: "#b4acac" }}
+              onClick={() => {
+                navigate("/business");
+              }}
             >
               브랜드 비지니스 모델 &gt;
             </div>
@@ -273,6 +279,9 @@ export default function Main() {
             <div
               className="button-text justify-center items-center px-16 py-7 whitespace-nowrap rounded-3xl max-md:px-5"
               style={{ color: "#b4acac" }}
+              onClick={() => {
+                navigate("/salelist");
+              }}
             >
               상징 판매장
             </div>
@@ -281,6 +290,9 @@ export default function Main() {
             <div
               className="button-text justify-center items-center px-16 py-7 whitespace-nowrap rounded-3xl max-md:px-5"
               style={{ color: "#b4acac" }}
+              onClick={() => {
+                navigate("/salelist");
+              }}
             >
               CONTACT
             </div>