diff --git a/check-and-talk/src/App.css b/check-and-talk/src/App.css
index 74b5e05..cce58bc 100644
--- a/check-and-talk/src/App.css
+++ b/check-and-talk/src/App.css
@@ -1,16 +1,69 @@
 .App {
-  text-align: center;
+  display: flex;
+  justify-content: center;
 }
 
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
+.navigationHeader {
+  display: flex;
+  justify-content: space-between; /* 로고와 로그아웃 버튼 사이의 공간을 최대로 확장 */
+  align-items: center;
+  position: relative;
+  overflow: hidden; /* 배경이 넘치지 않도록 설정 */
+  width: 100%; /* 너비를 화면 전체로 설정 */
 }
 
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
+.navigationHeader::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.5); /* 반투명한 검은색 배경 */
+  backdrop-filter: blur(12px); /* 블러 처리 */
+  z-index: -1; /* 블러 배경을 맨 아래로 보냄 */
+}
+
+.catLogo {
+  width: 160px; /* 로고의 너비를 2배로 조정하세요 */
+  margin-left: 40px; /* 로고를 오른쪽으로 100px 고정 */
+  margin-top: 20px;
+  margin-bottom: 20px;
+}
+
+.navigationArea {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: absolute;
+  top: 50%; /* 화면 상단으로부터 50% 위치에 정렬 */
+  left: 50%; /* 화면 좌측으로부터 50% 위치에 정렬 */
+  transform: translate(-50%, -50%); /* 중앙 정렬 */
+}
+
+.navigationArea button:not(:focus) {
+  /* 색상 변경 코드 추가, 선택되지 않은 버튼 */
+}
+
+.navigationTalk {
+  margin: 0 10px; /* 네비게이션 항목 간의 간격을 조정하세요 */
+  text-decoration: none; /* 링크의 밑줄 제거 */
+  color: #fff; /* 글자색을 흰색으로 변경 */
+  font-weight: bold;
+  font-size: 32px;
+}
+
+.signOutButton {
+  position: absolute;
+  top: 50%; /* 수직으로 가운데 정렬 */
+  right: 40px; /* 로그아웃 버튼을 오른쪽으로 100px 고정 */
+  transform: translateY(-50%); /* 수직 가운데 정렬을 위한 이동 */
+  text-decoration: none; /* 링크의 밑줄 제거 */
+  color: #fff; /* 글자색을 흰색으로 변경 */
+  display: inline-block;
+  padding: 5px 10px;
+  border: 1px solid #fff;
+  border-radius: 24px;
 }
 
 .App-header {
@@ -24,15 +77,12 @@
   color: white;
 }
 
-.App-link {
-  color: #61dafb;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
+@media (max-width: 600px) {
+  .catLogo {
+    width: 80px; /* 너비를 절반으로 조정 */
   }
-  to {
-    transform: rotate(360deg);
+
+  .navigationTalk {
+    font-size: 24px;
   }
-}
+}
\ No newline at end of file
diff --git a/check-and-talk/src/App.js b/check-and-talk/src/App.js
index a96bc18..7f30f14 100644
--- a/check-and-talk/src/App.js
+++ b/check-and-talk/src/App.js
@@ -3,22 +3,36 @@ import './App.css';
 
 function App() {
   return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
+    <div class="App">
+      <header class="navigationHeader">
+        <img src={logo} alt="Logo" class="catLogo" />
+        <nav class="navigationArea">
+          <a href="연결할링크#" class="navigationTalk">Check</a>
+          <a href="연결할링크#" class="navigationTalk">Talk</a>
+        </nav>
+        <a href="#" class="signOutButton">로그아웃</a>
       </header>
     </div>
+
+
+
+
+    // <div className="App">
+    //   <header className="App-header">
+    //     <img src={logo} className="App-logo" alt="logo" />
+    //     <p>
+    //       Edit <code>src/App.js</code> and save to reload.
+    //     </p>
+    //     <a
+    //       className="App-link"
+    //       href="https://reactjs.org"
+    //       target="_blank"
+    //       rel="noopener noreferrer"
+    //     >
+    //       Learn React
+    //     </a>
+    //   </header>
+    // </div>
   );
 }
 
diff --git a/check-and-talk/src/assets/logo.svg b/check-and-talk/src/assets/logo.svg
index 9dfc1c0..2fcd791 100644
--- a/check-and-talk/src/assets/logo.svg
+++ b/check-and-talk/src/assets/logo.svg
@@ -1 +1,10 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3"><g fill="#61DAFB"><path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/><circle cx="420.9" cy="296.5" r="45.7"/><path d="M520.5 78.1z"/></g></svg>
\ No newline at end of file
+<svg width="250" height="85" viewBox="0 0 250 85" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M29.0281 81.5C15.6734 77.426 6.03368 71.015 2.52809 57.5C1.88326 55.014 1.52809 51 1.52809 51C1.52809 51 0.33989 44.0146 1.52809 40.5C2.60401 37.3175 2.52809 34.5 4.02809 32.5C6.38584 29.3563 13.5 25.5 13.5 25.5C18 14.5 18 13 22.0281 2L35.5 24.5C35.5 24.5 40.7383 25.0273 44.5 25.5C53.9719 26.5 62.5 24.5 62.5 24.5L77.5 2L84 25.5C84 25.5 91.6586 33.6332 94.0281 40.5C96.6395 48.0679 96.0281 56 94.0281 61C92.0281 66 85.2454 74.3263 76.5281 78.5C68.3581 82.4116 62.6977 82.8613 53.5281 83.5C43.9516 84.1669 38.1796 84.2917 29.0281 81.5Z" fill="#D9D9D9" stroke="black"/>
+<circle cx="28" cy="54" r="4" fill="black"/>
+<circle cx="68" cy="54" r="4" fill="black"/>
+<path d="M31 54.5C31 55.0523 30.5523 55.5 30 55.5C29.4477 55.5 29 55.0523 29 54.5C29 53.9477 29.4477 53.5 30 53.5C30.5523 53.5 31 53.9477 31 54.5Z" fill="white"/>
+<path d="M67 55C67 55.5523 66.5523 56 66 56C65.4477 56 65 55.5523 65 55C65 54.4477 65.4477 54 66 54C66.5523 54 67 54.4477 67 55Z" fill="white"/>
+<path d="M166.555 29.575C166.555 31.1632 165.221 32.7515 162.637 32.7515C161.22 32.7515 160.136 32.5007 159.552 31.9156C157.135 29.157 155.384 27.4016 154.384 26.8165C152.633 25.3118 150.465 24.6431 148.048 24.7267C139.794 25.7298 135.292 31.7484 134.542 42.866C134.792 49.3862 135.959 54.0673 138.127 56.993C140.378 60.3366 143.462 62.0084 147.214 61.9249C151.799 61.9249 155.551 61.0053 158.469 59.2499C159.136 58.7484 159.886 58.4976 160.72 58.4976C162.47 58.4976 163.637 59.1663 164.221 60.4202C164.721 61.1725 164.971 61.8413 164.971 62.3428C164.971 64.4326 164.221 65.8536 162.637 66.606C158.052 68.8629 152.383 69.9496 145.797 69.9496C139.044 69.5317 134.125 67.0239 130.874 62.51C127.289 56.9094 125.538 50.2221 125.788 42.5317C125.788 35.8444 127.873 29.9094 131.958 24.8103C136.126 19.6276 141.378 17.0363 147.631 17.0363C155.051 17.0363 160.886 19.962 165.138 25.7298C166.055 26.4821 166.555 27.8196 166.555 29.575Z" fill="#FFB341"/>
+<path d="M197.156 55.2375C197.073 52.3118 196.49 48.9682 195.406 45.3738C193.989 41.7793 191.404 39.9403 187.736 39.9403C184.401 40.6927 182.15 42.2809 181.066 44.705C180.316 47.4635 179.983 50.3892 180.149 53.4821C180.9 58.1632 183.317 60.671 187.319 61.0889C189.32 61.0889 191.321 60.5038 193.405 59.2499C195.489 57.9961 196.74 56.6586 197.156 55.2375ZM201.825 37.349C204.243 41.1106 205.66 46.2097 206.077 52.479C206.327 55.4047 208.161 58.2468 211.746 61.0053C212.496 62.0084 212.913 62.8444 212.913 63.5967C213.08 64.767 212.83 65.8536 212.079 66.9403C211.246 68.027 209.912 68.6122 208.161 68.6122C205.577 67.6927 203.242 65.6865 201.325 62.7608C200.825 63.6803 199.658 64.767 197.823 65.9372C193.905 68.6957 189.737 69.6153 185.318 68.8629C180.566 68.445 176.981 66.8567 174.731 64.0982C172.396 60.9218 171.062 57.1601 170.646 52.8134C170.395 48.9682 171.146 45.123 172.73 41.2778C174.314 38.3521 176.481 36.0951 179.316 34.4233C182.234 32.6679 184.985 31.832 187.653 31.832C191.738 31.5812 195.322 32.2499 198.324 33.8382C199.741 34.7577 200.908 35.9279 201.825 37.349Z" fill="white"/>
+<path d="M249.765 23.2221C249.765 25.0611 249.431 26.3149 248.764 26.9837C247.931 27.9032 246.18 28.3211 243.429 28.2375C239.01 28.3211 234.759 28.2375 230.59 27.9032C230.424 39.8567 230.424 51.9775 230.674 64.349C230.674 68.1106 229.256 69.9496 226.339 69.9496C223.337 69.9496 221.837 67.7762 221.837 63.3459C221.753 52.897 221.67 40.7762 221.587 27.0673C218.919 26.6493 214.667 26.0642 208.915 25.2283C204.496 24.3087 202.245 22.3861 202.245 19.2933C202.245 17.0363 203.913 15.9496 207.247 15.9496L208.331 16.284C212.75 17.5379 218.419 18.5409 225.171 19.2097C232.758 20.1292 239.844 20.2964 246.597 19.7112C248.681 19.962 249.765 21.1323 249.765 23.2221Z" fill="#FFDC5F"/>
+</svg>
diff --git a/check-and-talk/src/assets/logo1000.png b/check-and-talk/src/assets/logo1000.png
new file mode 100644
index 0000000..2d4d1c2
Binary files /dev/null and b/check-and-talk/src/assets/logo1000.png differ
diff --git a/check-and-talk/src/assets/logo400.png b/check-and-talk/src/assets/logo400.png
new file mode 100644
index 0000000..001bf23
Binary files /dev/null and b/check-and-talk/src/assets/logo400.png differ