diff --git a/package-lock.json b/package-lock.json
index 86e3cdb..5ea5462 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,6 +11,7 @@
         "@testing-library/jest-dom": "^5.14.1",
         "@testing-library/react": "^13.0.0",
         "@testing-library/user-event": "^13.2.1",
+        "axios": "^1.3.4",
         "immer": "^9.0.19",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
@@ -4813,6 +4814,29 @@
         "node": ">=4"
       }
     },
+    "node_modules/axios": {
+      "version": "1.3.4",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.3.4.tgz",
+      "integrity": "sha512-toYm+Bsyl6VC5wSkfkbbNB6ROv7KY93PEBBL6xyDczaIHasAiv4wPqQ/c4RjoQzipxRD2W5g21cOqQulZ7rHwQ==",
+      "dependencies": {
+        "follow-redirects": "^1.15.0",
+        "form-data": "^4.0.0",
+        "proxy-from-env": "^1.1.0"
+      }
+    },
+    "node_modules/axios/node_modules/form-data": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
+      "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
+      "dependencies": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "mime-types": "^2.1.12"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/axobject-query": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-3.1.1.tgz",
@@ -12896,6 +12920,11 @@
         "node": ">= 0.10"
       }
     },
+    "node_modules/proxy-from-env": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
+      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
+    },
     "node_modules/psl": {
       "version": "1.9.0",
       "resolved": "https://registry.npmjs.org/psl/-/psl-1.9.0.tgz",
@@ -19384,6 +19413,28 @@
       "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.6.3.tgz",
       "integrity": "sha512-/BQzOX780JhsxDnPpH4ZiyrJAzcd8AfzFPkv+89veFSr1rcMjuq2JDCwypKaPeB6ljHp9KjXhPpjgCvQlWYuqg=="
     },
+    "axios": {
+      "version": "1.3.4",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.3.4.tgz",
+      "integrity": "sha512-toYm+Bsyl6VC5wSkfkbbNB6ROv7KY93PEBBL6xyDczaIHasAiv4wPqQ/c4RjoQzipxRD2W5g21cOqQulZ7rHwQ==",
+      "requires": {
+        "follow-redirects": "^1.15.0",
+        "form-data": "^4.0.0",
+        "proxy-from-env": "^1.1.0"
+      },
+      "dependencies": {
+        "form-data": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
+          "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
+          "requires": {
+            "asynckit": "^0.4.0",
+            "combined-stream": "^1.0.8",
+            "mime-types": "^2.1.12"
+          }
+        }
+      }
+    },
     "axobject-query": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-3.1.1.tgz",
@@ -24624,6 +24675,11 @@
         }
       }
     },
+    "proxy-from-env": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
+      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
+    },
     "psl": {
       "version": "1.9.0",
       "resolved": "https://registry.npmjs.org/psl/-/psl-1.9.0.tgz",
diff --git a/package.json b/package.json
index c1fbc13..bfc1d7f 100644
--- a/package.json
+++ b/package.json
@@ -6,13 +6,19 @@
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^13.0.0",
     "@testing-library/user-event": "^13.2.1",
+    "axios": "^1.3.4",
+    "global": "^4.4.0",
     "immer": "^9.0.19",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-icons": "^4.8.0",
     "react-minimal-side-navigation": "^1.9.2",
     "react-router-dom": "^6.9.0",
-    "react-scripts": "5.0.1",
+    "react-scripts": "^5.0.1",
+    "react-slick": "^0.29.0",
+    "slick-carousel": "^1.8.1",
+    "styled-components": "^5.3.10",
+    "swiper": "^9.2.0",
     "use": "^3.1.1",
     "use-immer": "^0.8.1",
     "web-vitals": "^2.1.0"
diff --git a/public/images/banner1.png b/public/images/banner1.png
new file mode 100644
index 0000000..fc55b16
Binary files /dev/null and b/public/images/banner1.png differ
diff --git a/public/images/banner2.png b/public/images/banner2.png
new file mode 100644
index 0000000..f7022ac
Binary files /dev/null and b/public/images/banner2.png differ
diff --git a/src/App.js b/src/App.js
index 22a4eb3..b968e87 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,14 +1,14 @@
 import { Outlet } from 'react-router-dom';
 import Navbar from './components/Navbar';
-
+import Footer from './components/Footer';
 function App() {
     return (
     <>
-        <Navbar />
+        <Navbar/>
         <Outlet />
+        <Footer />
     </>
     );
 }
-
 export default App;
 
diff --git a/src/Hooks/useScrollCount.jsx b/src/Hooks/useScrollCount.jsx
new file mode 100644
index 0000000..31b4c65
--- /dev/null
+++ b/src/Hooks/useScrollCount.jsx
@@ -0,0 +1,41 @@
+import { useRef, useEffect, useCallback } from 'react';
+
+const useScrollCount = (end, start = 0, duration = 3000, delay = 0) => {
+const elementRef = useRef();
+const observerRef = useRef(null);
+const stepTime = Math.abs(Math.floor(duration / (end - start)));
+
+const handleScroll = useCallback(
+    ([entry]) => {
+    const { current } = elementRef;
+    if (entry.isIntersecting) {
+        let currentNumber = start;
+        const counter = setInterval(() => {
+        currentNumber += 1;
+        current.innerHTML = currentNumber;
+        if (currentNumber === end) {
+            clearInterval(counter);
+            observerRef.current.disconnect(elementRef.current);
+        }
+        }, stepTime);
+    }
+    },
+    [end, start, stepTime]
+);
+
+useEffect(() => {
+    if (elementRef.current) {
+    observerRef.current = new IntersectionObserver(handleScroll, { threshold: 0.7 });
+    observerRef.current.observe(elementRef.current);
+    }
+
+    return () => observerRef.current && observerRef.current.disconnect();
+}, [handleScroll]);
+
+return {
+    ref: elementRef
+};
+};
+
+export default useScrollCount;
+
diff --git a/src/Hooks/useScrollFadeIn.jsx b/src/Hooks/useScrollFadeIn.jsx
new file mode 100644
index 0000000..c9959df
--- /dev/null
+++ b/src/Hooks/useScrollFadeIn.jsx
@@ -0,0 +1,70 @@
+import { useRef, useEffect } from 'react';
+// 스크롤 내릴 때 Fade in 효과 Hook
+const useScrollFadeIn = (direction = 'up', duration = 1, delay = 0) => {
+    const ref = useRef();
+    
+    useEffect(() => {
+    const element = ref.current;
+    if (element) {
+        const handleScroll = () => {
+        const { top, bottom } = element.getBoundingClientRect();
+        const { innerHeight } = window;
+        if (top < innerHeight && bottom >= 0) {
+            element.style.transitionProperty = 'opacity transform';
+            element.style.transitionDuration = `${duration}s`;
+            element.style.transitionTimingFunction = 'cubic-bezier(0, 0, 0.2, 1)';
+            element.style.transitionDelay = `${delay}s`;
+            element.style.opacity = 1;
+            element.style.transform = 'translateY(0)';
+        }
+        };
+        window.addEventListener('scroll', handleScroll);
+        return () => {
+        window.removeEventListener('scroll', handleScroll);
+        };
+    }
+    }, [delay, duration]);
+
+    if (direction === 'up') {
+    return {
+        ref,
+        style: {
+        opacity: 0,
+        transform: 'translateY(50px)',
+        },
+        };
+    }
+
+    if (direction === 'right') {
+    return {
+        ref,
+        style: {
+        opacity: 0,
+        transform: 'translateX(-50px)',
+        },
+        };
+    }
+
+    if (direction === 'down') {
+    return {
+        ref,
+        style: {
+        opacity: 0,
+        transform: 'translateY(-50px)',
+        },
+    };
+    }
+
+    if (direction === 'left') {
+    return {
+        ref,
+        style: {
+        opacity: 0,
+        transform: 'translateX(50px)',
+        },
+    };
+    }
+};
+
+export default useScrollFadeIn;
+
diff --git a/src/components/Banner.css b/src/components/Banner.css
new file mode 100644
index 0000000..8a8b36f
--- /dev/null
+++ b/src/components/Banner.css
@@ -0,0 +1,12 @@
+
+.swiper-container {
+    --swiper-navigation-color: #b9bcc175;
+    --swiper-pagination-color: #b9bcc175;
+}
+
+.slide .BannerImage{
+    width : 100%;
+    height: 200px;
+    object-fit: fill;
+}
+
diff --git a/src/components/Banner.jsx b/src/components/Banner.jsx
new file mode 100644
index 0000000..e44a354
--- /dev/null
+++ b/src/components/Banner.jsx
@@ -0,0 +1,31 @@
+import React from 'react';
+import { Swiper, SwiperSlide } from "swiper/react"; // basic
+import SwiperCore, { Navigation, Pagination, Autoplay } from "swiper";
+import 'swiper/css';
+import 'swiper/css/navigation';
+import 'swiper/css/pagination';
+import './Banner.css';
+SwiperCore.use([Navigation, Pagination, Autoplay]);
+
+export default function Banner() {
+    return (
+            <div className="swiper-container">
+                <Swiper
+                spaceBetween={0} // 슬라이드간의 간격
+                slidesPerView={1} // 한 번에 보여지는 슬라이드 개수
+                loop={true} // 루프 슬라이드
+                autoplay={{ delay: 3000 }} // 자동
+                navigation
+                pagination={{ clickable: true }}
+                >
+                    <SwiperSlide className='slide'>
+                    <img src="/images/banner1.png" alt="banner1" className='BannerImage'/>
+                    </SwiperSlide>
+                    <SwiperSlide className='slide'>
+                    <img src="/images/banner2.png" alt="banner2" className='BannerImage'/>
+                    </SwiperSlide>
+                </Swiper>
+            </div>
+    );
+}
+
diff --git a/src/components/Bot.jsx b/src/components/Bot.jsx
new file mode 100644
index 0000000..5cf354b
--- /dev/null
+++ b/src/components/Bot.jsx
@@ -0,0 +1,56 @@
+import React, { useState } from "react";
+import axios from "axios";
+import "./Room.css";
+
+export default function Bot(props) {
+  const [input, setInput] = useState("");
+
+  const handleChange = (event) => {
+    setInput(event.target.value);
+  };
+
+  const handleSubmit = async (event) => {
+    event.preventDefault();
+
+    if (!input) {
+      return;
+    }
+
+    const message = `You: ${input}`;
+    props.onMessage(message);
+
+    try {
+      const response = await axios.post("http://localhost:5000/generate", {
+        input_text: input,
+      });
+
+      const reply = `Bot: ${response.data.text}`;
+      props.onMessage(reply);
+
+      if (response.data.other_results) {
+        props.onOtherResult(response.data.other_results);
+      }
+    } catch (error) {
+      console.error(error);
+    }
+
+    setInput("");
+  };
+
+  return (
+    <div className="input_chat">
+      <form onSubmit={handleSubmit}>
+        <input
+          type="text"
+          value={input}
+          onChange={handleChange}
+          style={{ color: "black" }}
+          className="textinput"
+        />
+        <button type="submit" style={{ color: "white" }} className="sendbtn">
+          Send
+        </button>
+      </form>
+    </div>
+  );
+}
diff --git a/src/components/DownloadCount.jsx b/src/components/DownloadCount.jsx
new file mode 100644
index 0000000..2fec9d5
--- /dev/null
+++ b/src/components/DownloadCount.jsx
@@ -0,0 +1,29 @@
+import React from 'react';
+import useScrollCount from '../Hooks/useScrollCount';
+
+const DownloadCountPage = () => {
+const { ref } = useScrollCount(650, 0, 3000, 0);
+
+return (
+    <div style={{ textAlign: 'center' }}>
+        
+        <p
+        ref={ref}
+        style={{
+            fontSize: '2rem',
+            fontWeight: 'bold',
+            color: 'black',
+            display: 'inline-block',
+        }}
+        >
+        0
+        </p>
+        <span style={{ fontSize: '2rem', fontWeight: 'bold', color: 'black' }}>
+        +
+        </span>
+        <h1 style={{ color: 'black' }}>누적 다운로드 수</h1>
+    </div>
+    );
+};
+
+export default DownloadCountPage;
\ No newline at end of file
diff --git a/src/components/Footer.css b/src/components/Footer.css
new file mode 100644
index 0000000..ea33753
--- /dev/null
+++ b/src/components/Footer.css
@@ -0,0 +1,106 @@
+.footer {
+width: 100%;
+display: flex;
+justify-content: center;
+flex-flow: column;
+}
+
+.footer .fcontainer {
+    display: flex;
+    justify-content: center;
+    border-top: 1px solid color-lightgray;
+    padding: 40px 0;
+    gap: 100px;
+}
+
+.footer .fcontainer .left h3 {
+    font-size: 16px;
+    line-height: 28px;
+    color: #136dd4;
+}
+
+.footer .fcontainer .left h2 {
+    padding-bottom: 10px;
+    font-size: 27px;
+    line-height: 50px;
+    font-weight: bold;
+    color: #136dd4;
+}
+
+.footer .fcontainer .left h2 span {
+    font-size: 14px;
+    margin-left: 8px;
+
+} 
+
+.footer .fcontainer .left .btnContent {
+    display: flex;
+    align-items: center;
+    margin-bottom: 15px;
+}
+.footer .fcontainer .left .btnContent span {
+    width: 110px;
+    height: 40px;
+    border: 1px solid #0c0c0c;
+    border-radius: 3px;
+    line-height: 40px;
+    text-align: center;
+    margin-right: 12px;
+    font-size: 12px;
+    cursor: pointer;
+    color: black;
+}
+
+.footer .fcontainer .left .btnContent p {
+    font-size: 12px;
+    color: #a1a1a1;
+    line-height: 16px;
+
+}
+
+.footer .fcontainer .right .navbar {
+    display: flex;
+    margin-bottom: 25px;
+    gap: 25px;
+    line-height: 28px;
+
+}
+.footer .fcontainer .right .navbar li {
+        font-size: 14px;
+        cursor: pointer;
+        color: #a1a1a1;
+
+}
+        
+.footer .fcontainer .right .notice {
+        font-size: 12px;
+        color: #a1a1a1;
+        line-height: 18px;
+}
+
+.footer .fcontainer .right .notice span {
+        width: 1px;
+        height: 10px;
+        margin: 0 5px;
+        display: inline-block;
+        background: #dadada;
+}
+        
+.footer .fcontainer .right .sns {
+    display: flex;
+    margin-top: 35px;
+    gap: 10px;
+}
+
+.footer .fcontainer .right .sns li {
+    cursor: pointer;
+    color: #136dd4;
+}
+
+.footer .copy {
+    width: 100%;
+    text-align: center;
+    padding: 22px 0 30px;
+    font-size: 12px;
+    color: rgb(32, 32, 32)
+}
diff --git a/src/components/Footer.jsx b/src/components/Footer.jsx
new file mode 100644
index 0000000..f2ae3de
--- /dev/null
+++ b/src/components/Footer.jsx
@@ -0,0 +1,49 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import { RiInstagramFill, RiFacebookBoxFill, RiYoutubeFill, RiGithubFill } from 'react-icons/ri';
+import './Footer.css';
+
+export default function Footer() {
+    let date = new Date();
+    let year = date.getFullYear();
+    return (
+        <div className='footer'>
+        <div className='fcontainer'>
+        <div className='left'>
+            <h3>AIng 고객센터</h3>
+            <h2>8282-8282<span>공휴일 제외 오전 9시 - 오후 6시</span></h2>
+            <div className='btnContent'>
+            <span>카카오톡 문의</span><p>공휴일 제외 오전 9시 - 오후 6시</p>
+            </div>
+            <div className='btnContent'>
+            <span>1:1 문의</span><p>365일<br/>고객센터 운영시간에 순차적으로 답변드리겠습니다.</p>
+            </div>
+        </div>
+
+        <div className='right'>
+            <ul className='navbar'>
+            <li><Link to="/">AIng소개</Link></li>
+            <li>마이페이지</li>
+            <li>이용약관</li>
+            <li>개인정보처리방침</li>
+            <li>이용안내</li>
+            </ul>
+            <p className='notice'>
+            법인명 : AIng <span className='line'></span> 사업자등록번호 : 119-82-1234<br/>
+            통신판매업 : 한성대학교 1234 호 <span className='line'></span> 개인정보보호책임자 : AIng<br/>
+            주소 : 서울특별시 성북구 1234로, 10층 <span className='line'></span> 대표이사 : AIng<br/>
+            입점문의 : 8282-8282 <span className='line'></span> 채용문의 : 8282-8282
+            </p>
+            <ul className='sns'>
+            <li><RiInstagramFill size="30" title="인스타그램" /></li>
+            <li><RiFacebookBoxFill size="30" title="페이스북"/></li>
+            <li><RiYoutubeFill size="30" title="유튜브"/></li>
+            <li><RiGithubFill size="30" title="github"/></li>
+            </ul>
+            </div>
+        </div>
+        <p className='copy'>© {year}.All rights reserved.</p>
+    </div>
+    );
+}
+
diff --git a/src/components/HomeServe.jsx b/src/components/HomeServe.jsx
new file mode 100644
index 0000000..cf0f923
--- /dev/null
+++ b/src/components/HomeServe.jsx
@@ -0,0 +1,60 @@
+import React from 'react';
+import styled from 'styled-components';
+import  useScrollFadeIn  from '../Hooks/useScrollFadeIn';
+import { Link } from 'react-router-dom';
+
+const S = { // css
+    Wrapper: styled.section`
+    width: 100%;
+    padding: 120px 0;
+    background-color: white;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    color: #136dd4;
+    `,
+    Label: styled.p`
+    display: inline-block;
+    margin-bottom: 1rem;
+    font-family: "Lato", sans-serif;
+    font-weight: 700;
+    `,
+    Title: styled.h2`
+    margin-bottom: 2rem;
+    text-align: center;
+    font-family: "Gelasio", serif;
+    font-size: 2.5rem;
+    font-weight: 600;
+    line-height: 1.1;
+    color:black;
+    `,
+};
+export default function HomeServe() {
+    const animatedItem = {
+        0: useScrollFadeIn('up', 1, 0),
+        1: useScrollFadeIn('up', 1, 0.2),
+        2: useScrollFadeIn('up', 1, 0.3),
+    };
+    return (
+        <S.Wrapper>
+    <S.Label {...animatedItem[0]}>Get Started</S.Label>
+    <S.Title {...animatedItem[1]}>
+        AIng is AI Tutor
+        <br />
+        Speak English Out Loud Now
+    </S.Title>
+    <div {...animatedItem[2]}>
+        <S.Label>
+            <Link to='/TopicChoice'>
+        <button>
+        Select Topic
+        </button>
+        </Link>
+        </S.Label>
+    </div>
+    </S.Wrapper>
+    );
+}
+
+
+
diff --git a/src/components/MypageMenu.css b/src/components/MypageMenu.css
new file mode 100644
index 0000000..599d297
--- /dev/null
+++ b/src/components/MypageMenu.css
@@ -0,0 +1,27 @@
+.MyContainer {
+    font-weight: 500;
+    font-size: 17px;
+    background-color: white;
+    color:rgb(146, 146, 146);
+    padding: 5%;
+    width: auto;
+    height: 793px;
+    margin-right: auto;
+    margin-left: auto;
+    border-radius: 5px;
+}
+
+.MyPageMenuBar{
+    float:left;
+    width: 200px;
+    padding: 10px;
+    margin-left: 10px;
+}
+
+.MyPageContent{
+    float:left;
+    padding: 10px;
+    margin-left: 10px;
+}
+
+
diff --git a/src/components/MypageMenu.jsx b/src/components/MypageMenu.jsx
new file mode 100644
index 0000000..8c1fb19
--- /dev/null
+++ b/src/components/MypageMenu.jsx
@@ -0,0 +1,30 @@
+import React from 'react';
+import { Link,Route,Routes } from 'react-router-dom';
+import Mypage from '../pages/Mypage';
+import Deep from '../pages/Deep';
+import './MypageMenu.css';
+
+
+export default function MypageMenu() {
+    return (
+        <div className='MyContainer'>
+            <div className='MyPageMenuBar'>
+                <div className='p-2'>마이 페이지</div>
+                <div className='p-3 h-10 w-20 hover:bg-gray-200'>
+                    <Link to="MyPage">내 정보</Link></div>
+                <div className='p-3 h-10 w-20 hover:bg-gray-200'>
+                    <Link to="Deep">분석</Link></div>
+            </div>
+                <div className='MyPageContent'>
+                <div className='p-2'>
+                    <Routes>
+                        <Route path="MyPage" element={<Mypage/>}/>
+                        <Route path="Deep" element={<Deep/>}/>
+                        <Route/>
+                    </Routes>
+                </div> 
+            </div>
+        </div>
+    );
+}
+
diff --git a/src/components/Navbar.css b/src/components/Navbar.css
new file mode 100644
index 0000000..369178a
--- /dev/null
+++ b/src/components/Navbar.css
@@ -0,0 +1,43 @@
+.line{ 
+    width: 1px;
+    height: 10px;
+    margin: 0 5px;
+    display: inline-block;
+    background: #dadada;
+}
+
+.LogSign-container{
+    font-weight: 600;
+    text-align: center;
+    color: rgba(0, 0, 0, 0.68);
+    padding-top: 1.25rem;
+    padding-bottom: 1.25rem;
+    
+}
+
+.LogIn-text{
+    color: rgba(0, 0, 0, 0.68);
+
+}
+
+.LogSign-text{ 
+    transition: all 0.4s linear;
+    padding-left: 0.75rem;
+    padding-right: 0.75rem;
+}
+.LogSign-text:hover {
+    color: #136dd4;
+}
+.LogSign-text:active {
+    color: #136dd4;
+}
+
+.AIng-text{
+    display: flex;
+    align-items: center;
+    font-size: 3.125rem;
+    font-weight: bold;
+    color: #136dd4;
+    padding-top: 1.25rem;
+    padding-bottom: 1.25rem;
+}
\ No newline at end of file
diff --git a/src/components/Navbar.jsx b/src/components/Navbar.jsx
index 8b1a96e..77eedba 100644
--- a/src/components/Navbar.jsx
+++ b/src/components/Navbar.jsx
@@ -1,62 +1,124 @@
-import React,{useState} from 'react';
+import React, { useState , useEffect} from 'react';
 import { Link } from 'react-router-dom';
-import { BsRobot} from 'react-icons/bs';
-import { BsPen} from 'react-icons/bs';
-import { GiTalk} from 'react-icons/gi';
+import { BsRobot } from 'react-icons/bs';
+import { GiTalk } from 'react-icons/gi';
+import { AiOutlineUser } from 'react-icons/ai'; 
+import axios from 'axios';
+import './Navbar.css';
 
 export default function Navbar() {
+  const [user, setUser]=useState();
+  useEffect(() => {
+    const fetchUser = async () => {
+      try {
+        const token = localStorage.getItem('auth_token');
+        const response = await axios.get('http://localhost:8080/mypage', {
+          headers: {
+            'Authorization': `Bearer ${token}`
+          }
+        });
+        setUser(response.data);
+      } catch (error) {
+        console.error(error);
+      }
+    };
+  
+    fetchUser();
+  }, []);
+
+  const handleLogout =()=> {
+    try {
+      localStorage.removeItem('auth_token');
+      alert("로그아웃 완료.");
+      setUser(null);
+    } catch (error) {
+      console.error(error);
+    }
+  };
+
+
   const menus = [
-    {name:"TEST", link:'/Test',icon:BsPen},
-    {name:"Interview", link:'/Interview',icon:GiTalk}
+    { name: 'TOPIC', link: '/TopicChoice', icon: GiTalk },
+    { name: 'MyPage', link: '/MypageMenu', icon: AiOutlineUser }, 
   ];
 
-const [open, setOpen] = useState(true);
+  const [open, setOpen] = useState(false);
   return (
-  <>
+    <>
       <header className='flex justify-between p-2 border-b border-zinc-300'>
-    <section className='flex gap-6'>
-    <div 
-    className={`bg-back h-50 w-40 ${open ? 'h-75':'h-16'}
-    duration-500 text-grey-100`}>
-        <div className='py-4 flex justify-start'>
-          <BsRobot size={40} className='cursor-pointer'
-            onClick={()=>setOpen(!open)}/>
+        <section className='flex gap-6'>
+          <div
+            className={`bg-back h-50 w-40 ${open ? 'h-75 ' : 'h-16'}
+            duration-500 text-grey-100`}>
+
+            <div className='bg-back text-basic px-3 py-9 flex justify-start'>
+              <BsRobot
+                size={40}
+                className='cursor-pointer'
+                onClick={() => setOpen(!open)}
+              />
+            </div>
+
+            <div
+              className={`mt-4 flex flex-col gap-4 relatvie whitespace-pre duration-500 
+              ${!open && 'opacity-0 translate-x-28 overflow-hidden'}
+              `}
+            >
+              {menus?.map((menu, i) => (
+                <div className='text-gray-500 hover:bg-gray-100 transition-all duration-100
+                ease-linear hover:text-basic active:text-basic'>
+                <Link
+                  to={menu?.link}
+                  key={i}
+                  className='group flex items-center text-sm gap-3.5 
+                  font-medium p-2'>
+                  <div>
+                    {React.createElement(menu?.icon, { size: '20' })}
+                  </div>
+                  <h2 className='font-bold'
+                    style={{
+                      transitionDelay: `${i + 3}00ms`,
+                    }}
+                  >
+                    {menu?.name}
+                  </h2>
+                </Link>
+                </div>
+              ))}
+            </div>
+          </div>
+        </section>
+
+        <div>
+        <Link to='/'>
+          <h1 className='AIng-text'>AIng</h1>
+        </Link>
+        </div>
+
+        <div className='flex justify-end space-x-3 font-semibold p-5 px-3 '>
+          {user ? (
+          <>
+        <div className='LogSign-container'>
+          <Link to='/MypageMenu'>
+        <button className='LogSign-text'>{user.name}님</button><span className='line'></span>
+        </Link>
+        <button className='LogSign-text'onClick={handleLogout}>로그아웃</button>
         </div>
-      
-      <div
-      className={`mt-4 flex flex-col gap-4 relatvie whitespace-pre duration-500 ${
-          !open && "opacity-0 translate-x-28 overflow-hidden"
-      }`}>
-        {menus?.map((menu,i)=>(
-          <Link 
-          to={menu?.link}
-          key={i} 
-          className="group flex items-center text-sm gap-3.5 font-medium p-2 hover:bg-gray-800 rounded-md">
-        <div>{React.createElement(menu?.icon,{size:"20"})}</div>
-        <h2
-        style={{
-          transitionDelay:`${i+3}00ms`,
-        }} 
-      >
-          {menu?.name}
-          </h2>
-          </Link>
-        ))}
+        </>
+        ) : (
+        <>
+        <div className='LogSign-container'>
+        <Link to='/signup'>
+        <button className='LogSign-text'>회원가입</button><span className='line'></span>
+        </Link>
+        <Link to='/login'>
+          <button className='LogSign-text'>로그인</button>
+        </Link></div>
+        </>
+        )}
         </div>
-      </div>
-      </section>
-      <Link to='/' className='flex items-center'>
-        <h1 className='flex items-center text-3xl font-bold m-auto'>AIng</h1> 
-      </Link>
-      
-      <div className='flex justify-end space-x-3 font-semibold p-5 px-3 '>
-      <Link to='/Signup'>
-      <div className='font-semibold text-center px-3'>회원가입</div></Link>
-      <Link to='/Login'>
-      <div className=' font-semibold text-center'>로그인</div></Link>
-      </div>
-    </header>
+          
+      </header>
     </>
   );
 }
-
diff --git a/src/components/Room.css b/src/components/Room.css
new file mode 100644
index 0000000..66c6b32
--- /dev/null
+++ b/src/components/Room.css
@@ -0,0 +1,107 @@
+.input_data {
+  height: 40px;
+  position: relative;
+  margin-bottom: 20px;
+}
+.input_data input {
+  height: 30px;
+  width: 100%;
+  border: none;
+  border-bottom: 2px solid silver;
+}
+.input_data label {
+  font-size: 15px;
+  position: absolute;
+  bottom: 10px;
+  left: 0;
+  color: gray;
+  pointer-events: none;
+  transition: all 0.3 ease;
+}
+.input_data input:focus ~ label {
+  transform: translateY(-30px);
+  font-size: 13px;
+  color: rgb(45, 72, 132);
+}
+.parent-container {
+  display: flex;
+  flex-wrap: wrap;
+}
+.chatwrap {
+  position: relative;
+  width: 50%;
+  background-color: #ddd;
+  height: 500px;
+  border: 1px solid #ddd;
+}
+
+.chatwrap {
+  display: flex;
+  flex-direction: column;
+  height: 50vh;
+  justify-content: flex-end;
+}
+
+.chat {
+  overflow-y: auto;
+  flex-grow: 1;
+  display: flex;
+  flex: 1;
+  padding: 10px;
+  display: flex;
+  flex-direction: column;
+  overflow-y: scroll;
+  scroll-behavior: smooth;
+}
+
+.chat div {
+  margin: 10px;
+  padding: 10px;
+  max-width: 60%;
+  border-radius: 10px;
+  color: white;
+  background-color: #0077cc;
+  align-self: flex-end;
+}
+
+.chat .bot {
+  align-self: flex-start;
+  background-color: #e6e6e6;
+  color: black;
+}
+
+.input-wrap {
+  display: flex;
+  background-color: #ddd;
+}
+.input_chat {
+  width: 100%;
+
+  padding: 20px;
+  justify-content: center;
+
+  background-color: #ffff;
+}
+
+.input_chat input {
+  width: 90%;
+  flex: 1;
+  margin-right: 10px;
+  border-radius: 5px;
+  padding: 5px;
+  border: none;
+}
+
+.input_chat button {
+  border: none;
+  border-radius: 5px;
+  padding: 5px;
+  background-color: #0077cc;
+  color: white;
+}
+.input_chat form {
+  width: 100%;
+}
+.info {
+  width: 50%;
+}
diff --git a/src/components/Room.jsx b/src/components/Room.jsx
new file mode 100644
index 0000000..0f633fa
--- /dev/null
+++ b/src/components/Room.jsx
@@ -0,0 +1,42 @@
+import React, { useState } from "react";
+import Bot from "./Bot";
+import "./Room.css";
+export default function Room() {
+  const [messages, setMessages] = useState([]);
+  const [otherResults, setOtherResults] = useState([]);
+
+  const addMessage = (message) => {
+    setMessages((messages) => [...messages, message]);
+  };
+
+  const addOtherResult = (result) => {
+    setOtherResults((otherResults) => [...otherResults, result]);
+  };
+
+  return (
+    <div className="parent-container">
+      <div className="chatwrap">
+        <div className="chat">
+          {messages.map((message, index) => (
+            <div
+              key={index}
+              className={`message ${
+                message.startsWith("You:") ? "user" : "bot"
+              }`}
+            >
+              {message}
+            </div>
+          ))}
+        </div>
+        <div className="inputwrap">
+          <Bot onMessage={addMessage} onOtherResult={addOtherResult} />
+        </div>
+      </div>
+      <div className="info">
+        {otherResults.map((result, index) => (
+          <div key={index}>{result}</div>
+        ))}
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/Topic.css b/src/components/Topic.css
new file mode 100644
index 0000000..7267832
--- /dev/null
+++ b/src/components/Topic.css
@@ -0,0 +1,35 @@
+.TopicContainer {
+    width: 200px;
+    padding: 1rem;
+    background-color: #ffffff;
+    border-radius: 10px;
+    box-shadow: 7px 5px 23px -9px rgba(0, 0, 0, 0.75);
+    margin-bottom: 1rem;
+    -webkit-box-shadow: 7px 5px 23px -9px rgba(0, 0, 0, 0.75);
+    -moz-box-shadow: 7px 5px 23px -9px rgba(0, 0, 0, 0.75);
+    cursor: default;
+}
+.TopicContainer p {
+    color: #000000;
+    font-weight: 800;
+    font-size: 20px;
+}
+
+.TopicContainer div {
+    text-align: center;
+    color: #000000;
+    font-weight: 800;
+    font-size: 20px;
+}
+
+.TopicContainer:hover {
+    transform: translateY(-5px);
+}
+
+div .emoticon {
+    font-size: 80px;
+    width: 100px;
+    height: 150px;
+    margin-left: 50px;
+    margin-top: 10px;
+}
diff --git a/src/components/Topic.jsx b/src/components/Topic.jsx
new file mode 100644
index 0000000..0838ca4
--- /dev/null
+++ b/src/components/Topic.jsx
@@ -0,0 +1,45 @@
+import React , { useState }from 'react';
+import './Topic.css';
+import { useNavigate } from 'react-router-dom';
+
+export default function Topic({topic,emoticon}) {
+
+    const navigate = useNavigate();
+    const [showComponent, setShowComponent] = useState(false);
+
+    const handleMouseEnter = () => {
+        setShowComponent(true);
+    }
+
+    const handleMouseLeave = () => {
+        setShowComponent(false);
+    };
+    /*const handleClick = () => {
+        setShowComponent(false);
+    };*/
+
+    return (
+        <div className='parentContainer'>
+        <div className='TopicContainer'
+        onClick={handleMouseEnter}
+        onMouseLeave={handleMouseLeave}>
+            {showComponent ? (<> 
+            
+            <div>
+                <div onClick={()=>{navigate(`/Speak`,{state:{topic}})}}> {/* /Test페이지로 이동하며 상태 객체 topic 전달 */}
+                    SPEAK GO👄</div>
+                <br></br>
+                <div onClick={()=>{navigate(`/Chat`,{state:{topic}})}}>
+                    CHAT GO💬</div>
+            </div>
+            </>):
+            (
+                <>
+                <p>{topic}</p> 
+            <div className='emoticon'>{emoticon}</div>
+            </>)}
+        </div>
+    </div>
+    );
+}
+
diff --git a/src/index.js b/src/index.js
index ba03160..16a5e90 100644
--- a/src/index.js
+++ b/src/index.js
@@ -6,10 +6,14 @@ import { createBrowserRouter, RouterProvider } from 'react-router-dom';
 import App from './App';
 import NotFound from './pages/NotFound';
 import Home from './pages/Home';
-import Test from './pages/Test';
-import Interview from './pages/Interview';
+import Chat from './pages/Chat';
+import Speak from './pages/Speak';
+import TopicChoice from './pages/TopicChoice';
 import Signup from './pages/Signup';
 import Login from './pages/Login';
+import MyPage from './pages/Mypage'; // 추가
+import MypageMenu from './components/MypageMenu';
+import Deep from './pages/Deep';
 
 const router = createBrowserRouter([
   {
@@ -18,15 +22,25 @@ const router = createBrowserRouter([
     errorElement: <NotFound />,
     children: [
       { index: true, element: <Home /> },
-      { path: '/Test', element: <Test /> },
-      { path: '/Interview', element: <Interview /> },
+      { path: '/Chat', element: <Chat /> },
+      { path: '/TopicChoice', element: <TopicChoice /> },
       { path: '/Signup', element: <Signup /> },
       { path: '/Login', element: <Login /> },
-    ],
-  },
+      { path: '/Speak', element: <Speak /> },
+      { path: '/MypageMenu', element: <MypageMenu />,
+      children:[
+        {
+          path:'/MypageMenu/MyPage', element: <MyPage />,
+        },
+        {
+          path:'/MypageMenu/Deep', element: <Deep />,
+        },
+      ] },
+  
+      ],
+    },
 ]);
 
-
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
   <React.StrictMode>
diff --git a/src/pages/Chat.jsx b/src/pages/Chat.jsx
new file mode 100644
index 0000000..a50d1d7
--- /dev/null
+++ b/src/pages/Chat.jsx
@@ -0,0 +1,16 @@
+import React from 'react';
+import { useLocation } from 'react-router-dom';
+import Room from "../components/Room";
+
+export default function Chat() {
+    const {state: {topic}, // topic 값 추출 
+    }=useLocation();
+    return (
+        <div className='text-black'>
+            {topic}에 대해서 CHAT 
+            <br></br>
+            <Room/>
+        </div>
+    );
+}
+
diff --git a/src/pages/Test.jsx b/src/pages/Deep.jsx
similarity index 57%
rename from src/pages/Test.jsx
rename to src/pages/Deep.jsx
index 28c910c..4801fa4 100644
--- a/src/pages/Test.jsx
+++ b/src/pages/Deep.jsx
@@ -1,9 +1,9 @@
 import React from 'react';
 
-export default function Test() {
+export default function Deep() {
     return (
         <div>
-            Test!
+            분석 결과
         </div>
     );
 }
diff --git a/src/pages/Home.jsx b/src/pages/Home.jsx
index 9fc1771..979c5d1 100644
--- a/src/pages/Home.jsx
+++ b/src/pages/Home.jsx
@@ -1,5 +1,14 @@
 import React from 'react';
+import Banner from '../components/Banner';
+import HomeServe from '../components/HomeServe';
+import DownloadCountPage from '../components/DownloadCount';
 
 export default function Home() {
-    return <div>Main Home!</div>;
+    return (
+        <>
+        <Banner/>
+        <HomeServe/>
+        <DownloadCountPage/>
+        </>
+    )
 }
diff --git a/src/pages/Interview.jsx b/src/pages/Interview.jsx
deleted file mode 100644
index 64b1dc1..0000000
--- a/src/pages/Interview.jsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import React from 'react';
-
-export default function Interview() {
-    return (
-        <div>
-            Interview!
-        </div>
-    );
-}
-
diff --git a/src/pages/Login.jsx b/src/pages/Login.jsx
index f38b83e..a8edbc3 100644
--- a/src/pages/Login.jsx
+++ b/src/pages/Login.jsx
@@ -1,20 +1,49 @@
-import React from 'react';
+import React, { useState } from 'react';
+import { Link,useNavigate } from 'react-router-dom'
 import './pages.css';
+import axios from 'axios';
 
 export default function Login() {
+    const navigate = useNavigate();
+    const [email, setEmail] = useState('');
+    const [password, setPassword] = useState('');
+    const [authError, setAuthError] = useState(null);
+
+    const handleSubmit = async (e) => {
+        e.preventDefault();
+        try {
+            const response = await axios.post('http://localhost:8080/login', {
+                email: email,
+                password: password
+            });
+            const token = response.data.token;
+            localStorage.setItem('auth_token', token);
+            navigate("/"); 
+            alert("로그인 완료");
+            window.location.reload();
+        } catch (error) {
+            console.error(error);
+            setAuthError('잘못된 이메일 혹은 비밀번호입니다.');
+            alert("이메일과 비밀번호를 확인해주세요");
+
+        }
+    }
+
     return (
         <div className='container'>
             <h1>로그인하기</h1>
-            <form className='input_data'>
-                <input type="text"/>
-                <label>이메일을 입력해주세요</label>
+            {authError && <div className='alert alert-danger'>{authError}</div>}
+            <form className='input_data' onSubmit={handleSubmit}>
+                <input type="text" value={email} onChange={(e) => setEmail(e.target.value)} 
+                placeholder='이메일을 입력해주세요.'/>
             </form>
-            <form className='input_data'>
-                <input type="password"/>
-                <label>비밀번호를 입력해주세요</label>
+            <form className='input_data' onSubmit={handleSubmit}>
+                <input type="password" value={password} onChange={(e) => setPassword(e.target.value)} 
+                placeholder='비밀번호를 입력해주세요.'/>
             </form>
-            <button className='btn'>로그인</button>
+            <button className='btn' onClick={handleSubmit}>로그인</button>
+            <Link to='/Signup'><button className='btn'>회원가입</button>
+            </Link>
         </div>
     );
 }
-
diff --git a/src/pages/Mypage.jsx b/src/pages/Mypage.jsx
new file mode 100644
index 0000000..c07d3f3
--- /dev/null
+++ b/src/pages/Mypage.jsx
@@ -0,0 +1,35 @@
+import React, { useState, useEffect } from 'react';
+import axios from 'axios';
+
+export default function Mypage() {
+    const [user, setUser] = useState(null);
+
+    useEffect(() => {
+        const fetchUser = async () => {
+            try {
+                const token = localStorage.getItem('auth_token');
+                const response = await axios.get('http://localhost:8080/mypage', {
+                    headers: {
+                        'Authorization': `Bearer ${token}`
+                    }
+                });
+                setUser(response.data);
+            } catch (error) {
+                console.error(error);
+            }
+        }
+        fetchUser();
+    }, []);
+
+    if (!user) {
+        return <div>Loading...</div>;
+    }
+
+    return (
+        <div>
+            <h1>MyPage</h1>
+            <p>Name: {user.name}</p>
+            <p>Email: {user.email}</p>
+        </div>
+    );
+}
\ No newline at end of file
diff --git a/src/pages/Signup.jsx b/src/pages/Signup.jsx
index c505976..2466367 100644
--- a/src/pages/Signup.jsx
+++ b/src/pages/Signup.jsx
@@ -1,28 +1,210 @@
-import React from 'react';
+import React, { useState } from 'react';
+import { useNavigate } from 'react-router-dom'
 import './pages.css';
+import axios from 'axios';
 
 export default function Signup() {
-    return (
-        <div className='container'>
-            <h1>회원가입</h1>
-            <form className='input_data'>
-                <input type="text"/>
-                <label>이름을 입력해주세요</label>
-            </form>
-            <form className='input_data'>
-                <input type="text"/>
-                <label>이메일을 입력해주세요</label>
-            </form>
-            <form className='input_data'>
-                <input type="password"/>
-                <label>비밀번호 설정(최소 8자리)</label>
-            </form>
-            <form className='input_data'>
-                <input type="password"/>
-                <label>비밀번호 재입력</label>
-            </form>
-            <button className='btn'>가입 완료</button>
-        </div>
+  const navigate = useNavigate();
+  const [user, setUser] = useState({
+    name: '',
+    email: '',
+    password: '',
+    password2: '',
+  });
+
+  const [errorMessage, setErrorMessage] = useState({
+    name: '',
+    email: '',
+    password: '',
+    password2: '',
+  });
+
+  const [labelsVisible, setLabelsVisible] = useState({
+    name: true,
+    email: true,
+    password: true,
+    password2: true
+  });
+
+  const [isSignUpSuccessful, setIsSignUpSuccessful] = useState(false); // Add this state variable
+
+  const handleFocus = (event) => {
+    const name = event.target.name;
+    setLabelsVisible({ ...labelsVisible, [name]: false });
+  };
+
+  const handleBlur = (event) => {
+    const name = event.target.name;
+    if (user[name] === '') {
+        setLabelsVisible({ ...labelsVisible, [name]: true });
+    }
+  };
+
+  const handleChange = (event) => {
+    const name = event.target.name;
+    const value = event.target.value;
+
+    setUser({ ...user, [name]: value });
+
+    // 유효성 검사
+    const message = {};
+    switch (name) {
+      case 'name':
+        if (value.length < 2) {
+          message.name = '이름은 2글자 이상이어야 합니다.';
+        } else if (value.length > 6) {
+          message.name = '이름은 6글자 이하이어야 합니다.';
+        } else {
+          message.name = '';
+        }
+        break;
+      case 'email':
+        const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+        if (!emailRegex.test(value)) {
+          message.email = '이메일 형식이 올바르지 않습니다.';
+        } else {
+          message.email = '';
+        }
+        break;
+      case 'password':
+        if (value.length < 8) {
+          message.password = '비밀번호는 최소 8자리 이상이어야 합니다.';
+        } else {
+          message.password = '';
+        }
+        break;
+      case 'password2':
+        if (value !== user.password) {
+          message.password2 = '비밀번호가 일치하지 않습니다.';
+        } else {
+          message.password2 = '';
+        }
+        break;
+      default:
+        break;
+    }
+    setErrorMessage({ ...errorMessage, ...message });
+  };
+
+  const handleSubmit = (event) => {
+    event.preventDefault();
+
+    // 유효성 검사
+    const message = {};
+    Object.keys(user).forEach((name) => {
+      switch (name) {
+        case 'name':
+          if (user[name].length < 2) {
+            message.name = '이름은 2글자 이상이어야 합니다.';
+          } else if (user[name].length > 6) {
+            message.name = '이름은 6글자 이하이어야 합니다.';
+          }
+          break;
+        case 'email':
+          const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+          if (!emailRegex.test(user[name])) {
+            message.email = '이메일 형식이 올바르지 않습니다.';
+          }
+          break;
+        case 'password':
+          if (user[name].length < 8) {
+            message.password = '비밀번호는 최소 8자리 이상이어야 합니다.';
+          }
+          break;
+        case 'password2':
+          if (user[name] !== user.password) {
+            message.password2 = '비밀번호가 일치하지 않습니다.';
+          }
+          break;
+        default:
+          break;
+      }
+    });
+
+    // 에러 메시지가 있으면 보여주고 종료
+    if (Object.keys(message).length > 0) {
+      setErrorMessage({ ...errorMessage, ...message });
+      return;
+    }
+
+    // 비밀번호 재입력 검사
+    if (user.password !== user.password2) {
+      setErrorMessage({ ...errorMessage, password2: '비밀번호가 일치하지 않습니다.' });
+      return;
+    }
+
+    // 회원가입 요청 보내기
+    axios
+      .post('http://localhost:8080/signup', user)
+      .then((response) => {
+        console.log(response.data);
+        // 회원가입 성공 처리
+        setIsSignUpSuccessful(true);
+        navigate("/Login");
+        alert("회원가입 완료.");
+      })
+      .catch((error) => {
+        console.log(error.response.data);
+        // 회원가입 실패 처리
+        setIsSignUpSuccessful(false);
+      });
+  };
+
+
+  return (
+    <div className='container'>
+  <h1>회원가입</h1>
+  <form className='input_data' onSubmit={handleSubmit}>
+    <input
+      type="text"
+      name="name"
+      value={user.name}
+      onChange={handleChange}
+      onFocus={handleFocus}
+      onBlur={handleBlur}
+    />
+    {labelsVisible.name && <label>이름을 입력해주세요</label>}
+    {errorMessage.name && <p className='error_message'>{errorMessage.name}</p>}
+  </form>
+  <form className='input_data' onSubmit={handleSubmit}>
+    <input
+      type="text"
+      name="email"
+      value={user.email}
+      onChange={handleChange}
+      onFocus={handleFocus}
+      onBlur={handleBlur}
+    />
+    {labelsVisible.email && <label>이메일을 입력해주세요</label>}
+    {errorMessage.email && <p className='error_message'>{errorMessage.email}</p>}
+  </form>
+  <form className='input_data' onSubmit={handleSubmit}>
+    <input
+      type="password"
+      name="password"
+      value={user.password}
+      onChange={handleChange}
+      onFocus={handleFocus}
+      onBlur={handleBlur}
+    />
+    {labelsVisible.password && <label>비밀번호 설정(최소 8자리)</label>}
+    {errorMessage.password && <p className='error_message'>{errorMessage.password}</p>}
+  </form>
+  <form className='input_data' onSubmit={handleSubmit}>
+    <input
+      type="password"
+      name="password2"
+      value={user.password2}
+      onChange={handleChange}
+      onFocus={handleFocus}
+      onBlur={handleBlur}
+    />
+    {labelsVisible.password2 && <label>비밀번호 재입력</label>}
+    {errorMessage.password2 && <p className='error_message'>{errorMessage.password2}</p>}
+  </form>
+  <button className='btn' onClick={handleSubmit}>가입 완료</button>
+  {isSignUpSuccessful && <p>가입이 완료됐습니다!</p>}
+</div>
+
     );
 }
-
diff --git a/src/pages/Speak.jsx b/src/pages/Speak.jsx
new file mode 100644
index 0000000..801cfe0
--- /dev/null
+++ b/src/pages/Speak.jsx
@@ -0,0 +1,13 @@
+import React from "react";
+import { useLocation } from "react-router-dom";
+export default function Speak() {
+  const {
+    state: { topic }, // topic 값 추출
+  } = useLocation();
+  return (
+    <div className="text-black">
+      {topic}에 대해서 SPEAK 
+      <br></br>
+    </div>
+  );
+}
diff --git a/src/pages/TopicChoice.css b/src/pages/TopicChoice.css
new file mode 100644
index 0000000..04e3df3
--- /dev/null
+++ b/src/pages/TopicChoice.css
@@ -0,0 +1,16 @@
+.TopicChoiceContainer{
+    display: flex;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    gap: 5rem;
+    padding: 3rem;
+}
+
+h1{
+    font-size: 27px;
+    font-weight: semi-bold;
+    text-align: center;
+    color: black;
+    padding: 10px;
+    font-family: "Lato", sans-serif;
+}
\ No newline at end of file
diff --git a/src/pages/TopicChoice.jsx b/src/pages/TopicChoice.jsx
new file mode 100644
index 0000000..34db178
--- /dev/null
+++ b/src/pages/TopicChoice.jsx
@@ -0,0 +1,23 @@
+import React from "react";
+import Topic from "../components/Topic";
+import "./TopicChoice.css";
+
+export default function TopicChoice() {
+  return (
+    <>
+      <h1>주제를 클릭해주세요!</h1>
+      <div className="TopicChoiceContainer">
+        <Topic id="1" topic="Business" emoticon="🧑🏻‍💼" />        
+        <Topic id="2" topic="Entertainment" emoticon="🎤" />
+        <Topic id="3" topic="Food" emoticon="🍚" />
+        <Topic id="4" topic="Graphics" emoticon="🖼️"/>
+        <Topic id="5" topic="Medical" emoticon="💊" />
+        <Topic id="6" topic="Politics " emoticon="🫱🏻‍🫲🏻" />
+        <Topic id="7" topic="Space " emoticon="🚀" />
+        <Topic id="8" topic="Sport " emoticon="🏊🏻" />
+        <Topic id="9" topic="Technologie " emoticon="⚡" />
+        <Topic id="10" topic="Free Topic" emoticon="🧐" />
+      </div>
+    </>
+  );
+}
diff --git a/src/pages/pages.css b/src/pages/pages.css
index 90fcab6..fab4fdc 100644
--- a/src/pages/pages.css
+++ b/src/pages/pages.css
@@ -2,7 +2,7 @@
     font-weight:800;
     font-size: 15px;
     margin-bottom: 40px;
-    color:rgb(110, 115, 119)
+    color:#000000ad
 
 }
 
@@ -24,12 +24,12 @@
 .btn{
     font-weight:500;
     font-size:15px;
-    color:rgb(125, 120, 120);
+    color:rgb(255, 255, 255);
     border-radius: 2px;
     width: 100%;
     height: 45px;
     margin-top: 10px;
-    background-color: rgb(216, 216, 216);
+    background-color: #005ac1c5;
     
 }
 .input_data{
diff --git a/tailwind.config.js b/tailwind.config.js
index 3f279dd..757a91b 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -4,7 +4,8 @@ module.exports = {
   theme: {
     extend: {
       colors:{
-        back:'#274071',
+        back:'#FFFFFF',
+        basic:'#136dd4',
       },
     },
   },
diff --git a/yarn.lock b/yarn.lock
index a556704..bac3995 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -31,6 +31,13 @@
   dependencies:
     "@babel/highlight" "^7.18.6"
 
+"@babel/code-frame@^7.21.4":
+  version "7.21.4"
+  resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.21.4.tgz#d0fa9e4413aca81f2b23b9442797bda1826edb39"
+  integrity sha512-LYvhNKfwWSPpocw8GI7gpK2nq3HSDuEPC/uSYaALSJu9xjsalaaYFOq0Pwt5KmVqwEbZlDu81aLXwBOmD/Fv9g==
+  dependencies:
+    "@babel/highlight" "^7.18.6"
+
 "@babel/compat-data@^7.17.7", "@babel/compat-data@^7.20.1", "@babel/compat-data@^7.20.5":
   version "7.20.14"
   resolved "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.20.14.tgz"
@@ -75,7 +82,17 @@
     "@jridgewell/gen-mapping" "^0.3.2"
     jsesc "^2.5.1"
 
-"@babel/helper-annotate-as-pure@^7.18.6":
+"@babel/generator@^7.21.5":
+  version "7.21.5"
+  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.21.5.tgz#c0c0e5449504c7b7de8236d99338c3e2a340745f"
+  integrity sha512-SrKK/sRv8GesIW1bDagf9cCG38IOMYZusoe1dfg0D8aiUe3Amvoj1QtjTPAWcfrZFvIwlleLb0gxzQidL9w14w==
+  dependencies:
+    "@babel/types" "^7.21.5"
+    "@jridgewell/gen-mapping" "^0.3.2"
+    "@jridgewell/trace-mapping" "^0.3.17"
+    jsesc "^2.5.1"
+
+"@babel/helper-annotate-as-pure@^7.16.0", "@babel/helper-annotate-as-pure@^7.18.6":
   version "7.18.6"
   resolved "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.18.6.tgz"
   integrity sha512-duORpUiYrEpzKIop6iNbjnwKLAKnJ47csTyRACyEmWj0QdUrm5aqNJGHSSEQSUAvNW0ojX0dOmK9dZduvkfeXA==
@@ -140,6 +157,11 @@
   resolved "https://registry.npmjs.org/@babel/helper-environment-visitor/-/helper-environment-visitor-7.18.9.tgz"
   integrity sha512-3r/aACDJ3fhQ/EVgFy0hpj8oHyHpQc+LPtJoY9SzTThAsStm4Ptegq92vqKoE3vD706ZVFWITnMnxucw+S9Ipg==
 
+"@babel/helper-environment-visitor@^7.21.5":
+  version "7.21.5"
+  resolved "https://registry.yarnpkg.com/@babel/helper-environment-visitor/-/helper-environment-visitor-7.21.5.tgz#c769afefd41d171836f7cb63e295bedf689d48ba"
+  integrity sha512-IYl4gZ3ETsWocUWgsFZLM5i1BYx9SoemminVEXadgLBa9TdeorzgLKm8wWLA6J1N/kT3Kch8XIk1laNzYoHKvQ==
+
 "@babel/helper-explode-assignable-expression@^7.18.6":
   version "7.18.6"
   resolved "https://registry.npmjs.org/@babel/helper-explode-assignable-expression/-/helper-explode-assignable-expression-7.18.6.tgz"
@@ -155,6 +177,14 @@
     "@babel/template" "^7.18.10"
     "@babel/types" "^7.19.0"
 
+"@babel/helper-function-name@^7.21.0":
+  version "7.21.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-function-name/-/helper-function-name-7.21.0.tgz#d552829b10ea9f120969304023cd0645fa00b1b4"
+  integrity sha512-HfK1aMRanKHpxemaY2gqBmL04iAPOPRj7DxtNbiDOrJK+gdwkiNRVpCpUJYbUT+aZyemKN8brqTOxzCaG6ExRg==
+  dependencies:
+    "@babel/template" "^7.20.7"
+    "@babel/types" "^7.21.0"
+
 "@babel/helper-hoist-variables@^7.18.6":
   version "7.18.6"
   resolved "https://registry.npmjs.org/@babel/helper-hoist-variables/-/helper-hoist-variables-7.18.6.tgz"
@@ -169,6 +199,13 @@
   dependencies:
     "@babel/types" "^7.20.7"
 
+"@babel/helper-module-imports@^7.0.0", "@babel/helper-module-imports@^7.16.0":
+  version "7.21.4"
+  resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.21.4.tgz#ac88b2f76093637489e718a90cec6cf8a9b029af"
+  integrity sha512-orajc5T2PsRYUN3ZryCEFeMDYwyw09c/pZeaQEZPH0MpKzSvn3e0uXsDBu3k03VI+9DBiRo+l22BfKTpKwa/Wg==
+  dependencies:
+    "@babel/types" "^7.21.4"
+
 "@babel/helper-module-imports@^7.10.4", "@babel/helper-module-imports@^7.18.6":
   version "7.18.6"
   resolved "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.18.6.tgz"
@@ -250,6 +287,11 @@
   resolved "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.19.4.tgz"
   integrity sha512-nHtDoQcuqFmwYNYPz3Rah5ph2p8PFeFCsZk9A/48dPc/rGocJ5J3hAAZ7pb76VWX3fZKu+uEr/FhH5jLx7umrw==
 
+"@babel/helper-string-parser@^7.21.5":
+  version "7.21.5"
+  resolved "https://registry.yarnpkg.com/@babel/helper-string-parser/-/helper-string-parser-7.21.5.tgz#2b3eea65443c6bdc31c22d037c65f6d323b6b2bd"
+  integrity sha512-5pTUx3hAJaZIdW99sJ6ZUUgWq/Y+Hja7TowEnLNMm1VivRgZQL3vpBY3qUACVsvw+yQU6+YgfBVmcbLaZtrA1w==
+
 "@babel/helper-validator-identifier@^7.18.6", "@babel/helper-validator-identifier@^7.19.1":
   version "7.19.1"
   resolved "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.19.1.tgz"
@@ -293,6 +335,11 @@
   resolved "https://registry.npmjs.org/@babel/parser/-/parser-7.20.15.tgz"
   integrity sha512-DI4a1oZuf8wC+oAJA9RW6ga3Zbe8RZFt7kD9i4qAspz3I/yHet1VvC3DiSy/fsUvv5pvJuNPh0LPOdCcqinDPg==
 
+"@babel/parser@^7.21.5":
+  version "7.21.8"
+  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.21.8.tgz#642af7d0333eab9c0ad70b14ac5e76dbde7bfdf8"
+  integrity sha512-6zavDGdzG3gUqAdWvlLFfk+36RilI+Pwyuuh7HItyeScCWP3k6i8vKclAQ0bM/0y/Kz/xiwvxhMv9MgTJP5gmA==
+
 "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@^7.18.6":
   version "7.18.6"
   resolved "https://registry.npmjs.org/@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression/-/plugin-bugfix-safari-id-destructuring-collision-in-function-expression-7.18.6.tgz"
@@ -1073,6 +1120,22 @@
     debug "^4.1.0"
     globals "^11.1.0"
 
+"@babel/traverse@^7.4.5":
+  version "7.21.5"
+  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.21.5.tgz#ad22361d352a5154b498299d523cf72998a4b133"
+  integrity sha512-AhQoI3YjWi6u/y/ntv7k48mcrCXmus0t79J9qPNlk/lAsFlCiJ047RmbfMOawySTHtywXhbXgpx/8nXMYd+oFw==
+  dependencies:
+    "@babel/code-frame" "^7.21.4"
+    "@babel/generator" "^7.21.5"
+    "@babel/helper-environment-visitor" "^7.21.5"
+    "@babel/helper-function-name" "^7.21.0"
+    "@babel/helper-hoist-variables" "^7.18.6"
+    "@babel/helper-split-export-declaration" "^7.18.6"
+    "@babel/parser" "^7.21.5"
+    "@babel/types" "^7.21.5"
+    debug "^4.1.0"
+    globals "^11.1.0"
+
 "@babel/types@^7.0.0", "@babel/types@^7.12.6", "@babel/types@^7.18.6", "@babel/types@^7.18.9", "@babel/types@^7.19.0", "@babel/types@^7.20.0", "@babel/types@^7.20.2", "@babel/types@^7.20.5", "@babel/types@^7.20.7", "@babel/types@^7.3.0", "@babel/types@^7.3.3", "@babel/types@^7.4.4":
   version "7.20.7"
   resolved "https://registry.npmjs.org/@babel/types/-/types-7.20.7.tgz"
@@ -1082,6 +1145,15 @@
     "@babel/helper-validator-identifier" "^7.19.1"
     to-fast-properties "^2.0.0"
 
+"@babel/types@^7.21.0", "@babel/types@^7.21.4", "@babel/types@^7.21.5":
+  version "7.21.5"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.21.5.tgz#18dfbd47c39d3904d5db3d3dc2cc80bedb60e5b6"
+  integrity sha512-m4AfNvVF2mVC/F7fDEdH2El3HzUg9It/XsCxZiOTTA3m3qYfcSVSbTfM6Q9xG+hYDniZssYhlXKKUMD5m8tF4Q==
+  dependencies:
+    "@babel/helper-string-parser" "^7.21.5"
+    "@babel/helper-validator-identifier" "^7.19.1"
+    to-fast-properties "^2.0.0"
+
 "@bcoe/v8-coverage@^0.2.3":
   version "0.2.3"
   resolved "https://registry.npmjs.org/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz"
@@ -1198,6 +1270,28 @@
   resolved "https://registry.npmjs.org/@csstools/selector-specificity/-/selector-specificity-2.1.1.tgz"
   integrity sha512-jwx+WCqszn53YHOfvFMJJRd/B2GqkCBt+1MJSG6o5/s8+ytHMvDZXsJgUEWLk12UnLd7HYKac4BYU5i/Ron1Cw==
 
+"@emotion/is-prop-valid@^1.1.0":
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-1.2.0.tgz#7f2d35c97891669f7e276eb71c83376a5dc44c83"
+  integrity sha512-3aDpDprjM0AwaxGE09bOPkNxHpBd+kA6jty3RnaEXdweX1DF1U3VQpPYb0g1IStAuK7SVQ1cy+bNBBKp4W3Fjg==
+  dependencies:
+    "@emotion/memoize" "^0.8.0"
+
+"@emotion/memoize@^0.8.0":
+  version "0.8.0"
+  resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.8.0.tgz#f580f9beb67176fa57aae70b08ed510e1b18980f"
+  integrity sha512-G/YwXTkv7Den9mXDO7AhLWkE3q+I92B+VqAE+dYG4NGPaHZGvt3G8Q0p9vmE+sq7rTGphUbAvmQ9YpbfMQGGlA==
+
+"@emotion/stylis@^0.8.4":
+  version "0.8.5"
+  resolved "https://registry.yarnpkg.com/@emotion/stylis/-/stylis-0.8.5.tgz#deacb389bd6ee77d1e7fcaccce9e16c5c7e78e04"
+  integrity sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ==
+
+"@emotion/unitless@^0.7.4":
+  version "0.7.5"
+  resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.7.5.tgz#77211291c1900a700b8a78cfafda3160d76949ed"
+  integrity sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==
+
 "@eslint/eslintrc@^1.4.1":
   version "1.4.1"
   resolved "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-1.4.1.tgz"
@@ -1532,6 +1626,14 @@
     "@jridgewell/resolve-uri" "3.1.0"
     "@jridgewell/sourcemap-codec" "1.4.14"
 
+"@jridgewell/trace-mapping@^0.3.17":
+  version "0.3.18"
+  resolved "https://registry.yarnpkg.com/@jridgewell/trace-mapping/-/trace-mapping-0.3.18.tgz#25783b2086daf6ff1dcb53c9249ae480e4dd4cd6"
+  integrity sha512-w+niJYzMHdd7USdiH2U6869nqhD2nbfZXND5Yp93qIbEmnDNk7PD48o+YchRVpzMU7M6jVCbenTR7PA1FLQ9pA==
+  dependencies:
+    "@jridgewell/resolve-uri" "3.1.0"
+    "@jridgewell/sourcemap-codec" "1.4.14"
+
 "@leichtgewicht/ip-codec@^2.0.1":
   version "2.0.4"
   resolved "https://registry.npmjs.org/@leichtgewicht/ip-codec/-/ip-codec-2.0.4.tgz"
@@ -2660,6 +2762,15 @@ axe-core@^4.6.2:
   resolved "https://registry.npmjs.org/axe-core/-/axe-core-4.6.3.tgz"
   integrity sha512-/BQzOX780JhsxDnPpH4ZiyrJAzcd8AfzFPkv+89veFSr1rcMjuq2JDCwypKaPeB6ljHp9KjXhPpjgCvQlWYuqg==
 
+axios@^1.3.4:
+  version "1.3.4"
+  resolved "https://registry.npmjs.org/axios/-/axios-1.3.4.tgz"
+  integrity sha512-toYm+Bsyl6VC5wSkfkbbNB6ROv7KY93PEBBL6xyDczaIHasAiv4wPqQ/c4RjoQzipxRD2W5g21cOqQulZ7rHwQ==
+  dependencies:
+    follow-redirects "^1.15.0"
+    form-data "^4.0.0"
+    proxy-from-env "^1.1.0"
+
 axobject-query@^3.1.1:
   version "3.1.1"
   resolved "https://registry.npmjs.org/axobject-query/-/axobject-query-3.1.1.tgz"
@@ -2750,6 +2861,22 @@ babel-plugin-polyfill-regenerator@^0.4.1:
   dependencies:
     "@babel/helper-define-polyfill-provider" "^0.3.3"
 
+"babel-plugin-styled-components@>= 1.12.0":
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/babel-plugin-styled-components/-/babel-plugin-styled-components-2.1.1.tgz#cd977cc0ff8410d5cbfdd142e42576e9c8794b87"
+  integrity sha512-c8lJlszObVQPguHkI+akXv8+Jgb9Ccujx0EetL7oIvwU100LxO6XAGe45qry37wUL40a5U9f23SYrivro2XKhA==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.16.0"
+    "@babel/helper-module-imports" "^7.16.0"
+    babel-plugin-syntax-jsx "^6.18.0"
+    lodash "^4.17.21"
+    picomatch "^2.3.0"
+
+babel-plugin-syntax-jsx@^6.18.0:
+  version "6.18.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz#0af32a9a6e13ca7a3fd5069e62d7b0f58d0d8946"
+  integrity sha512-qrPaCSo9c8RHNRHIotaufGbuOBN8rtdC4QrrFFc43vyWCCz7Kl7GL1PGaXtMGQZUXrkCjNEgxDfmAuAabr/rlw==
+
 babel-plugin-transform-react-remove-prop-types@^0.4.24:
   version "0.4.24"
   resolved "https://registry.npmjs.org/babel-plugin-transform-react-remove-prop-types/-/babel-plugin-transform-react-remove-prop-types-0.4.24.tgz"
@@ -2971,6 +3098,11 @@ camelcase@^6.2.0, camelcase@^6.2.1:
   resolved "https://registry.npmjs.org/camelcase/-/camelcase-6.3.0.tgz"
   integrity sha512-Gmy6FhYlCY7uOElZUSbxo2UCDH8owEk996gkbrpsgGtrJLM3J7jGxl9Ic7Qwwj4ivOE5AWZWRMecDdF7hqGjFA==
 
+camelize@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/camelize/-/camelize-1.0.1.tgz#89b7e16884056331a35d6b5ad064332c91daa6c3"
+  integrity sha512-dU+Tx2fsypxTgtLoE36npi3UqcjSSMNYfkqgmoEhtZrraP5VWq0K7FkWVTYa8eMPtnU/G2txVsfdCJTn9uzpuQ==
+
 caniuse-api@^3.0.0:
   version "3.0.0"
   resolved "https://registry.npmjs.org/caniuse-api/-/caniuse-api-3.0.0.tgz"
@@ -3061,6 +3193,11 @@ cjs-module-lexer@^1.0.0:
   resolved "https://registry.npmjs.org/cjs-module-lexer/-/cjs-module-lexer-1.2.2.tgz"
   integrity sha512-cOU9usZw8/dXIXKtwa8pM0OTJQuJkxMN6w30csNRUerHfeQ5R6U3kkU/FtJeIf3M202OHfY2U8ccInBG7/xogA==
 
+classnames@^2.2.5:
+  version "2.3.2"
+  resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.3.2.tgz#351d813bf0137fcc6a76a16b88208d2560a0d924"
+  integrity sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw==
+
 clean-css@^5.2.2:
   version "5.3.2"
   resolved "https://registry.npmjs.org/clean-css/-/clean-css-5.3.2.tgz"
@@ -3294,6 +3431,11 @@ css-blank-pseudo@^3.0.3:
   dependencies:
     postcss-selector-parser "^6.0.9"
 
+css-color-keywords@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/css-color-keywords/-/css-color-keywords-1.0.0.tgz#fea2616dc676b2962686b3af8dbdbe180b244e05"
+  integrity sha512-FyyrDHZKEjXDpNJYvVsV960FiqQyXc/LlYmsxl2BcdMb2WPx0OGRVgTg55rPSyLSNMqP52R9r8geSp7apN3Ofg==
+
 css-declaration-sorter@^6.3.1:
   version "6.3.1"
   resolved "https://registry.npmjs.org/css-declaration-sorter/-/css-declaration-sorter-6.3.1.tgz"
@@ -3363,6 +3505,15 @@ css-select@^4.1.3:
     domutils "^2.8.0"
     nth-check "^2.0.1"
 
+css-to-react-native@^3.0.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/css-to-react-native/-/css-to-react-native-3.2.0.tgz#cdd8099f71024e149e4f6fe17a7d46ecd55f1e32"
+  integrity sha512-e8RKaLXMOFii+02mOlqwjbD00KSEKqblnpO9e++1aXS1fPQOpS1YoqdVHBqPjHNoxeF2mimzVqawm2KCbEdtHQ==
+  dependencies:
+    camelize "^1.0.0"
+    css-color-keywords "^1.0.0"
+    postcss-value-parser "^4.0.2"
+
 css-tree@1.0.0-alpha.37:
   version "1.0.0-alpha.37"
   resolved "https://registry.npmjs.org/css-tree/-/css-tree-1.0.0-alpha.37.tgz"
@@ -3714,6 +3865,11 @@ dom-serializer@^1.0.1:
     domhandler "^4.2.0"
     entities "^2.0.0"
 
+dom-walk@^0.1.0:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/dom-walk/-/dom-walk-0.1.2.tgz#0c548bef048f4d1f2a97249002236060daa3fd84"
+  integrity sha512-6QvTW9mrGeIegrFXdtQi9pk7O/nSK6lSdXW2eqUspN5LWD7UTji2Fqw5V2YLjBpHEoU9Xl/eUWNpDeZvoyOv2w==
+
 domelementtype@1:
   version "1.3.1"
   resolved "https://registry.npmjs.org/domelementtype/-/domelementtype-1.3.1.tgz"
@@ -3833,6 +3989,11 @@ enhanced-resolve@^5.10.0:
     graceful-fs "^4.2.4"
     tapable "^2.2.0"
 
+enquire.js@^2.1.6:
+  version "2.1.6"
+  resolved "https://registry.yarnpkg.com/enquire.js/-/enquire.js-2.1.6.tgz#3e8780c9b8b835084c3f60e166dbc3c2a3c89814"
+  integrity sha512-/KujNpO+PT63F7Hlpu4h3pE3TokKRHN26JYmQpPyjkRD/N57R7bPDNojMXdi7uveAKjYB7yQnartCxZnFWr0Xw==
+
 entities@^2.0.0:
   version "2.2.0"
   resolved "https://registry.npmjs.org/entities/-/entities-2.2.0.tgz"
@@ -4474,7 +4635,7 @@ flatted@^3.1.0:
   resolved "https://registry.npmjs.org/flatted/-/flatted-3.2.7.tgz"
   integrity sha512-5nqDSxl8nn5BSNxyR3n4I6eDmbolI6WT+QqR547RwxQapgjQBmtktdP+HTBb/a/zLsbzERTONyUB5pefh5TtjQ==
 
-follow-redirects@^1.0.0:
+follow-redirects@^1.0.0, follow-redirects@^1.15.0:
   version "1.15.2"
   resolved "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.2.tgz"
   integrity sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==
@@ -4514,6 +4675,15 @@ form-data@^3.0.0:
     combined-stream "^1.0.8"
     mime-types "^2.1.12"
 
+form-data@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz"
+  integrity sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==
+  dependencies:
+    asynckit "^0.4.0"
+    combined-stream "^1.0.8"
+    mime-types "^2.1.12"
+
 forwarded@0.2.0:
   version "0.2.0"
   resolved "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz"
@@ -4672,6 +4842,14 @@ global-prefix@^3.0.0:
     kind-of "^6.0.2"
     which "^1.3.1"
 
+global@^4.4.0:
+  version "4.4.0"
+  resolved "https://registry.yarnpkg.com/global/-/global-4.4.0.tgz#3e7b105179006a323ed71aafca3e9c57a5cc6406"
+  integrity sha512-wv/LAoHdRE3BeTGz53FAamhGlPLhlssK45usmGFThIi4XqnBmjKQ16u+RNbP7WvigRZDxUsM0J3gcQ5yicaL0w==
+  dependencies:
+    min-document "^2.19.0"
+    process "^0.11.10"
+
 globals@^11.1.0:
   version "11.12.0"
   resolved "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz"
@@ -4788,6 +4966,13 @@ he@^1.2.0:
   resolved "https://registry.npmjs.org/he/-/he-1.2.0.tgz"
   integrity sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==
 
+hoist-non-react-statics@^3.0.0:
+  version "3.3.2"
+  resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"
+  integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==
+  dependencies:
+    react-is "^16.7.0"
+
 hoopy@^0.1.4:
   version "0.1.4"
   resolved "https://registry.npmjs.org/hoopy/-/hoopy-0.1.4.tgz"
@@ -5959,6 +6144,13 @@ json-stable-stringify-without-jsonify@^1.0.1:
   resolved "https://registry.npmjs.org/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz"
   integrity sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==
 
+json2mq@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/json2mq/-/json2mq-0.2.0.tgz#b637bd3ba9eabe122c83e9720483aeb10d2c904a"
+  integrity sha512-SzoRg7ux5DWTII9J2qkrZrqV1gt+rTaoufMxEzXbS26Uid0NwaJd123HcoB80TgubEppxxIGdNxCx50fEoEWQA==
+  dependencies:
+    string-convert "^0.2.0"
+
 json5@^1.0.1:
   version "1.0.2"
   resolved "https://registry.npmjs.org/json5/-/json5-1.0.2.tgz"
@@ -6248,6 +6440,13 @@ mimic-fn@^2.1.0:
   resolved "https://registry.npmjs.org/mimic-fn/-/mimic-fn-2.1.0.tgz"
   integrity sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==
 
+min-document@^2.19.0:
+  version "2.19.0"
+  resolved "https://registry.yarnpkg.com/min-document/-/min-document-2.19.0.tgz#7bd282e3f5842ed295bb748cdd9f1ffa2c824685"
+  integrity sha512-9Wy1B3m3f66bPPmU5hdA4DR4PB2OfDU/+GS3yAB7IQozE3tqXaVv2zOjgla7MEGSRv95+ILmOuvhLkOK6wJtCQ==
+  dependencies:
+    dom-walk "^0.1.0"
+
 min-indent@^1.0.0:
   version "1.0.1"
   resolved "https://registry.npmjs.org/min-indent/-/min-indent-1.0.1.tgz"
@@ -6691,7 +6890,7 @@ picocolors@^1.0.0:
   resolved "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz"
   integrity sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==
 
-picomatch@^2.0.4, picomatch@^2.2.1, picomatch@^2.2.2, picomatch@^2.2.3, picomatch@^2.3.1:
+picomatch@^2.0.4, picomatch@^2.2.1, picomatch@^2.2.2, picomatch@^2.2.3, picomatch@^2.3.0, picomatch@^2.3.1:
   version "2.3.1"
   resolved "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz"
   integrity sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==
@@ -7250,7 +7449,7 @@ postcss-unique-selectors@^5.1.1:
   dependencies:
     postcss-selector-parser "^6.0.5"
 
-postcss-value-parser@^4.0.0, postcss-value-parser@^4.1.0, postcss-value-parser@^4.2.0:
+postcss-value-parser@^4.0.0, postcss-value-parser@^4.0.2, postcss-value-parser@^4.1.0, postcss-value-parser@^4.2.0:
   version "4.2.0"
   resolved "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz"
   integrity sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==
@@ -7328,6 +7527,11 @@ process-nextick-args@~2.0.0:
   resolved "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz"
   integrity sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==
 
+process@^0.11.10:
+  version "0.11.10"
+  resolved "https://registry.yarnpkg.com/process/-/process-0.11.10.tgz#7332300e840161bda3e69a1d1d91a7d4bc16f182"
+  integrity sha512-cdGef/drWFoydD1JsMzuFf8100nZl+GT+yacc2bEced5f9Rjk4z+WtFUTBu9PhOi9j/jfmBPu0mMEY4wIdAF8A==
+
 promise@^8.1.0:
   version "8.3.0"
   resolved "https://registry.npmjs.org/promise/-/promise-8.3.0.tgz"
@@ -7360,6 +7564,11 @@ proxy-addr@~2.0.7:
     forwarded "0.2.0"
     ipaddr.js "1.9.1"
 
+proxy-from-env@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz"
+  integrity sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==
+
 psl@^1.1.33:
   version "1.9.0"
   resolved "https://registry.npmjs.org/psl/-/psl-1.9.0.tgz"
@@ -7483,10 +7692,10 @@ react-error-overlay@^6.0.11:
 
 react-icons@^4.8.0:
   version "4.8.0"
-  resolved "https://registry.yarnpkg.com/react-icons/-/react-icons-4.8.0.tgz#621e900caa23b912f737e41be57f27f6b2bff445"
+  resolved "https://registry.npmjs.org/react-icons/-/react-icons-4.8.0.tgz"
   integrity sha512-N6+kOLcihDiAnj5Czu637waJqSnwlMNROzVZMhfX68V/9bu9qHaMIJC4UdozWoOk57gahFCNHwVvWzm0MTzRjg==
 
-react-is@^16.13.1:
+react-is@^16.13.1, react-is@^16.7.0:
   version "16.13.1"
   resolved "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
@@ -7529,9 +7738,9 @@ react-router@6.9.0:
   dependencies:
     "@remix-run/router" "1.4.0"
 
-react-scripts@5.0.1:
+react-scripts@^5.0.1:
   version "5.0.1"
-  resolved "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz"
+  resolved "https://registry.yarnpkg.com/react-scripts/-/react-scripts-5.0.1.tgz#6285dbd65a8ba6e49ca8d651ce30645a6d980003"
   integrity sha512-8VAmEm/ZAwQzJ+GOMLbBsTdDKOpuZh7RPs0UymvBR2vRk4iZWCskjbFnxqjrzoIvlNNRZ3QJFx6/qDSi6zSnaQ==
   dependencies:
     "@babel/core" "^7.16.0"
@@ -7584,6 +7793,17 @@ react-scripts@5.0.1:
   optionalDependencies:
     fsevents "^2.3.2"
 
+react-slick@^0.29.0:
+  version "0.29.0"
+  resolved "https://registry.yarnpkg.com/react-slick/-/react-slick-0.29.0.tgz#0bed5ea42bf75a23d40c0259b828ed27627b51bb"
+  integrity sha512-TGdOKE+ZkJHHeC4aaoH85m8RnFyWqdqRfAGkhd6dirmATXMZWAxOpTLmw2Ll/jPTQ3eEG7ercFr/sbzdeYCJXA==
+  dependencies:
+    classnames "^2.2.5"
+    enquire.js "^2.1.6"
+    json2mq "^0.2.0"
+    lodash.debounce "^4.0.8"
+    resize-observer-polyfill "^1.5.0"
+
 react@^18.2.0:
   version "18.2.0"
   resolved "https://registry.npmjs.org/react/-/react-18.2.0.tgz"
@@ -7735,6 +7955,11 @@ requires-port@^1.0.0:
   resolved "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz"
   integrity sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==
 
+resize-observer-polyfill@^1.5.0:
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz#0e9020dd3d21024458d4ebd27e23e40269810464"
+  integrity sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==
+
 resolve-cwd@^3.0.0:
   version "3.0.0"
   resolved "https://registry.npmjs.org/resolve-cwd/-/resolve-cwd-3.0.0.tgz"
@@ -8010,6 +8235,11 @@ setprototypeof@1.2.0:
   resolved "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz"
   integrity sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==
 
+shallowequal@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/shallowequal/-/shallowequal-1.1.0.tgz#188d521de95b9087404fd4dcb68b13df0ae4e7f8"
+  integrity sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==
+
 shebang-command@^2.0.0:
   version "2.0.0"
   resolved "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz"
@@ -8056,6 +8286,11 @@ slash@^4.0.0:
   resolved "https://registry.npmjs.org/slash/-/slash-4.0.0.tgz"
   integrity sha512-3dOsAHXXUkQTpOYcoAxLIorMTp4gIQr5IW3iVb7A7lFIp0VHhnynm9izx6TssdrIcVIESAlVjtnO2K8bg+Coew==
 
+slick-carousel@^1.8.1:
+  version "1.8.1"
+  resolved "https://registry.yarnpkg.com/slick-carousel/-/slick-carousel-1.8.1.tgz#a4bfb29014887bb66ce528b90bd0cda262cc8f8d"
+  integrity sha512-XB9Ftrf2EEKfzoQXt3Nitrt/IPbT+f1fgqBdoxO3W/+JYvtEOW6EgxnWfr9GH6nmULv7Y2tPmEX3koxThVmebA==
+
 sockjs@^0.3.24:
   version "0.3.24"
   resolved "https://registry.npmjs.org/sockjs/-/sockjs-0.3.24.tgz"
@@ -8142,6 +8377,11 @@ sprintf-js@~1.0.2:
   resolved "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz"
   integrity sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g==
 
+ssr-window@^4.0.2:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/ssr-window/-/ssr-window-4.0.2.tgz#dc6b3ee37be86ac0e3ddc60030f7b3bc9b8553be"
+  integrity sha512-ISv/Ch+ig7SOtw7G2+qkwfVASzazUnvlDTwypdLoPoySv+6MqlOV10VwPSE6EWkGjhW50lUmghPmpYZXMu/+AQ==
+
 stable@^0.1.8:
   version "0.1.8"
   resolved "https://registry.npmjs.org/stable/-/stable-0.1.8.tgz"
@@ -8176,6 +8416,11 @@ stop-iteration-iterator@^1.0.0:
   dependencies:
     internal-slot "^1.0.4"
 
+string-convert@^0.2.0:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/string-convert/-/string-convert-0.2.1.tgz#6982cc3049fbb4cd85f8b24568b9d9bf39eeff97"
+  integrity sha512-u/1tdPl4yQnPBjnVrmdLo9gtuLvELKsAoRapekWggdiQNvvvum+jYF329d84NAa660KQw7pB2n36KrIKVoXa3A==
+
 string-length@^4.0.1:
   version "4.0.2"
   resolved "https://registry.npmjs.org/string-length/-/string-length-4.0.2.tgz"
@@ -8312,6 +8557,22 @@ style-loader@^3.3.1:
   resolved "https://registry.npmjs.org/style-loader/-/style-loader-3.3.1.tgz"
   integrity sha512-GPcQ+LDJbrcxHORTRes6Jy2sfvK2kS6hpSfI/fXhPt+spVzxF6LJ1dHLN9zIGmVaaP044YKaIatFaufENRiDoQ==
 
+styled-components@^5.3.10:
+  version "5.3.10"
+  resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-5.3.10.tgz#42f7245f58fe960362a63f543dda23c0ac107c0f"
+  integrity sha512-3kSzSBN0TiCnGJM04UwO1HklIQQSXW7rCARUk+VyMR7clz8XVlA3jijtf5ypqoDIdNMKx3la4VvaPFR855SFcg==
+  dependencies:
+    "@babel/helper-module-imports" "^7.0.0"
+    "@babel/traverse" "^7.4.5"
+    "@emotion/is-prop-valid" "^1.1.0"
+    "@emotion/stylis" "^0.8.4"
+    "@emotion/unitless" "^0.7.4"
+    babel-plugin-styled-components ">= 1.12.0"
+    css-to-react-native "^3.0.0"
+    hoist-non-react-statics "^3.0.0"
+    shallowequal "^1.1.0"
+    supports-color "^5.5.0"
+
 stylehacks@^5.1.1:
   version "5.1.1"
   resolved "https://registry.npmjs.org/stylehacks/-/stylehacks-5.1.1.tgz"
@@ -8320,7 +8581,7 @@ stylehacks@^5.1.1:
     browserslist "^4.21.4"
     postcss-selector-parser "^6.0.4"
 
-supports-color@^5.3.0:
+supports-color@^5.3.0, supports-color@^5.5.0:
   version "5.5.0"
   resolved "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz"
   integrity sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==
@@ -8391,6 +8652,13 @@ svgo@^2.7.0:
     picocolors "^1.0.0"
     stable "^0.1.8"
 
+swiper@^9.2.0:
+  version "9.2.0"
+  resolved "https://registry.yarnpkg.com/swiper/-/swiper-9.2.0.tgz#40e950b1c0d516403b3bf7083560ebac22a6f325"
+  integrity sha512-lWK9toYumUQss+YuTL+Mt0+8twiMJEyzioER4bbS4rrGHlkeLrDM8uhtAmnpdijELrNscuNUujDgKoMQZfQGlQ==
+  dependencies:
+    ssr-window "^4.0.2"
+
 symbol-tree@^3.2.4:
   version "3.2.4"
   resolved "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz"