diff --git a/.idea/workspace.xml b/.idea/workspace.xml
index 8420c17..669ed0d 100644
--- a/.idea/workspace.xml
+++ b/.idea/workspace.xml
@@ -4,18 +4,42 @@
     <option name="autoReloadType" value="SELECTIVE" />
   </component>
   <component name="ChangeListManager">
-    <list default="true" id="2d2d0bb8-6a4c-4a72-97ca-0d46282dbdea" name="Changes" comment="모바일, 데스크탑 버전 모두 언어 변경 기능 추가, 모바일 메뉴 기본 세팅 완료">
+    <list default="true" id="2d2d0bb8-6a4c-4a72-97ca-0d46282dbdea" name="Changes" comment="한국어, 영어 적용 완료">
+      <change afterPath="$PROJECT_DIR$/src/assets/css/pages/projects.scss" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/src/components/AwardBox.tsx" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/src/components/ProjectComponent.tsx" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/src/components/layout/Layout.tsx" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/src/lib/getProjectPropsData.tsx" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/src/screens/RecoilCounter.tsx" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/src/screens/RecoilTodo.tsx" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/src/states/recoilCounterState.ts" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/src/states/recoilModalState.ts" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/src/states/recoilTodoState.ts" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/package-lock.json" beforeDir="false" afterPath="$PROJECT_DIR$/package-lock.json" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/package.json" beforeDir="false" afterPath="$PROJECT_DIR$/package.json" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/assets/css/components/navBar.scss" beforeDir="false" afterPath="$PROJECT_DIR$/src/assets/css/components/navBar.scss" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/App.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/App.tsx" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/assets/css/app.scss" beforeDir="false" afterPath="$PROJECT_DIR$/src/assets/css/app.scss" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/assets/css/common.scss" beforeDir="false" afterPath="$PROJECT_DIR$/src/assets/css/common.scss" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/assets/css/pages/awards.scss" beforeDir="false" afterPath="$PROJECT_DIR$/src/assets/css/pages/awards.scss" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/assets/css/pages/introduce.scss" beforeDir="false" afterPath="$PROJECT_DIR$/src/assets/css/pages/introduce.scss" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/assets/css/variable.scss" beforeDir="false" afterPath="$PROJECT_DIR$/src/assets/css/variable.scss" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/components/VideoModal.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/VideoModal.tsx" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/components/common/DashTitle.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/common/DashTitle.tsx" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/components/common/Footer.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/layout/Footer.tsx" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/src/components/common/LangToast.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/common/LangToast.tsx" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/lang/locale/en.json" beforeDir="false" afterPath="$PROJECT_DIR$/src/lang/locale/en.json" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/lang/locale/jp.json" beforeDir="false" afterPath="$PROJECT_DIR$/src/lang/locale/jp.json" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/components/common/NavBar.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/layout/NavBar.tsx" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/index.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/index.tsx" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/src/lang/locale/ko.json" beforeDir="false" afterPath="$PROJECT_DIR$/src/lang/locale/ko.json" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/lib/EducationData.ts" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/pages/Activity.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/Activity.tsx" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/pages/Awards.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/Awards.tsx" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/pages/Gallery.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/Gallery.tsx" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/src/pages/Home.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/Home.tsx" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/src/pages/Introduce.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/Introduce.tsx" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/utils/introduceRandomTextList.ts" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/pages/Projects.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/Projects.tsx" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/types/enum.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/types/enum.ts" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/types/type.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/types/type.ts" afterDir="false" />
     </list>
     <option name="SHOW_DIALOG" value="false" />
     <option name="HIGHLIGHT_CONFLICTS" value="true" />
@@ -42,11 +66,11 @@
   <component name="Git.Settings">
     <option name="RECENT_GIT_ROOT_PATH" value="$PROJECT_DIR$" />
   </component>
-  <component name="GitHubPullRequestSearchHistory"><![CDATA[{
-  "lastFilter": {
-    "state": "OPEN"
+  <component name="GitHubPullRequestSearchHistory">{
+  &quot;lastFilter&quot;: {
+    &quot;state&quot;: &quot;OPEN&quot;
   }
-}]]></component>
+}</component>
   <component name="GitToolBoxStore">
     <option name="projectConfigVersion" value="5" />
   </component>
@@ -98,11 +122,11 @@
       <recent name="$PROJECT_DIR$/src/components" />
     </key>
     <key name="MoveFile.RECENT_KEYS">
+      <recent name="$PROJECT_DIR$/src/components/layout" />
       <recent name="$PROJECT_DIR$/src/components/common" />
       <recent name="$PROJECT_DIR$/src/components" />
       <recent name="$PROJECT_DIR$/src/utils" />
       <recent name="$PROJECT_DIR$/src/assets/css/pages" />
-      <recent name="$PROJECT_DIR$/src/assets/css/components" />
     </key>
   </component>
   <component name="SpellCheckerSettings" RuntimeDictionaries="0" Folders="0" CustomDictionaries="0" DefaultDictionary="application-level" UseSingleDictionary="true" transferred="true" />
@@ -119,7 +143,8 @@
       <workItem from="1704865434546" duration="9788000" />
       <workItem from="1704935531192" duration="11265000" />
       <workItem from="1704950670806" duration="6918000" />
-      <workItem from="1704960544323" duration="12619000" />
+      <workItem from="1704960544323" duration="13506000" />
+      <workItem from="1705020707489" duration="24523000" />
     </task>
     <task id="LOCAL-00001" summary="공통 코드 리팩토링, css 변수화">
       <created>1704883368802</created>
@@ -170,7 +195,14 @@
       <option name="project" value="LOCAL" />
       <updated>1704969707329</updated>
     </task>
-    <option name="localTasksCounter" value="8" />
+    <task id="LOCAL-00008" summary="한국어, 영어 적용 완료">
+      <created>1704974033999</created>
+      <option name="number" value="00008" />
+      <option name="presentableId" value="LOCAL-00008" />
+      <option name="project" value="LOCAL" />
+      <updated>1704974033999</updated>
+    </task>
+    <option name="localTasksCounter" value="9" />
     <servers />
   </component>
   <component name="TypeScriptGeneratedFilesManager">
@@ -195,7 +227,8 @@
     <MESSAGE value="topbar 폴더 수정" />
     <MESSAGE value="navbar 모바일 버수정, lang change 기능 적용" />
     <MESSAGE value="모바일, 데스크탑 버전 모두 언어 변경 기능 추가, 모바일 메뉴 기본 세팅 완료" />
-    <option name="LAST_COMMIT_MESSAGE" value="모바일, 데스크탑 버전 모두 언어 변경 기능 추가, 모바일 메뉴 기본 세팅 완료" />
+    <MESSAGE value="한국어, 영어 적용 완료" />
+    <option name="LAST_COMMIT_MESSAGE" value="한국어, 영어 적용 완료" />
   </component>
   <component name="XSLT-Support.FileAssociations.UIState">
     <expand />
diff --git a/src/assets/css/pages/introduce.scss b/src/assets/css/pages/introduce.scss
index c0a562d..ffee489 100644
--- a/src/assets/css/pages/introduce.scss
+++ b/src/assets/css/pages/introduce.scss
@@ -3,7 +3,8 @@
 .introduce-page {
     overflow: hidden;
 
-    .introduce-page-title-font {
+    .title-font {
+        margin: 0 8rem;
         font-family: iceJaram-Rg;
         font-size: 10rem;
         line-height: 8.875rem;
diff --git a/src/components/common/LangToast.tsx b/src/components/common/LangToast.tsx
index 8edfdf3..fec3a69 100644
--- a/src/components/common/LangToast.tsx
+++ b/src/components/common/LangToast.tsx
@@ -51,18 +51,19 @@ const LangToast = (props: any) => {
         }
       >
         <ul>
-          {langOptions.map((el) => {
-            if (el.value === loadLocalData(AppConfig.KEYS.LANG)) {
-              return (
-                <section className="checked-lang-wrapper">
-                  <img src={checkedIcon} />
-                  <li onClick={() => changeLangOption(el)}>{el.label}</li>
-                </section>
-              );
-            }
-            // @ts-ignore
-            return <li onClick={() => changeLangOption(el)}>{el.label}</li>;
-          })}
+          {langOptions &&
+            langOptions.map((el) => {
+              if (el.value === loadLocalData(AppConfig.KEYS.LANG)) {
+                return (
+                  <section className="checked-lang-wrapper">
+                    <img src={checkedIcon} />
+                    <li onClick={() => changeLangOption(el)}>{el.label}</li>
+                  </section>
+                );
+              }
+              // @ts-ignore
+              return <li onClick={() => changeLangOption(el)}>{el.label}</li>;
+            })}
         </ul>
       </div>
     </>
diff --git a/src/lib/EducationData.ts b/src/lib/EducationData.ts
deleted file mode 100644
index eef3aec..0000000
--- a/src/lib/EducationData.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import { EducationData } from "@src/types/type";
-
-export const educationList: EducationData[] = [
-  {
-    period: "2018 ~ 2020",
-    name: "포항장성고등학교",
-  },
-  {
-    period: "2019",
-    name: "경상북도교육청 과학 영재 교육원",
-  },
-  {
-    period: "2021~",
-    name: "경희대학교 컴퓨터공학과",
-  },
-  {
-    period: "2024",
-    name: "애플디벨로퍼아카데미",
-  },
-];
diff --git a/src/pages/Gallery.tsx b/src/pages/Gallery.tsx
index 8cf8987..ec20709 100644
--- a/src/pages/Gallery.tsx
+++ b/src/pages/Gallery.tsx
@@ -1,6 +1,6 @@
 import React from "react";
-import NavBar from "src/components/common/NavBar";
-import Footer from "src/components/common/Footer";
+import NavBar from "src/components/layout/NavBar";
+import Footer from "src/components/layout/Footer";
 
 export default function Gallery() {
   return (
diff --git a/src/pages/Introduce.tsx b/src/pages/Introduce.tsx
index f4a8924..de10f7f 100644
--- a/src/pages/Introduce.tsx
+++ b/src/pages/Introduce.tsx
@@ -1,18 +1,19 @@
 import React, { useEffect, useState } from "react";
-import NavBar from "src/components/common/NavBar";
+import NavBar from "src/components/layout/NavBar";
 import { NavLink } from "react-router-dom";
 import { motion } from "framer-motion";
 import profile_image_8 from "src/assets/images/profile_image/profile_image_8.webp";
 import pic1 from "src/assets/images/profile_image/profile_image_2.webp";
 import pic2 from "src/assets/images/profile_image/profile_image_4.webp";
 import pic3 from "src/assets/images/profile_image/profile_image_3.webp";
-import Footer from "src/components/common/Footer";
+import Footer from "src/components/layout/Footer";
 import "../assets/css/pages/introduce.scss";
 import { EducationData } from "src/types/type";
 import DashTitle from "src/components/common/DashTitle";
 import SkillsContainer from "src/components/SkillsContainer";
 import TopBar from "src/components/common/TopBar";
 import { useTranslation } from "react-i18next";
+import Layout from "src/components/layout/Layout";
 
 export default function Introduce() {
   const { t } = useTranslation();
@@ -100,96 +101,101 @@ export default function Introduce() {
   photolistAnimationList.forEach((el) => observer.observe(el));
 
   return (
-    <section className="introduce-page">
-      <NavBar></NavBar>
-      <TopBar color="#ffd400" />
-      <div className="introduce-profile-image">
-        <motion.img alt="profile_image_8" src={profile_image_8}></motion.img>
-      </div>
-      <motion.div className="introduce-profile-name">
-        <div className="introduce-page-title-font">Jeong Hye In</div>
-      </motion.div>
-
-      <div className="introduce-page-desc">
-        <div>
-          {t("introduce.desc.1p-1")}
-          <br />
-          {t("introduce.desc.1p-2")}
-        </div>
-        <div>
-          {t("introduce.desc.2p-1")}
-          <br />
-          {t("introduce.desc.2p-2")}
-          <br />
-          {t("introduce.desc.2p-3")}
+    <Layout>
+      <section className="introduce-page">
+        <TopBar color="#ffd400" />
+        <div className="introduce-profile-image">
+          <motion.img alt="profile_image_8" src={profile_image_8}></motion.img>
         </div>
-        <div>
-          {t("introduce.desc.3p-1")}
-          <br />
-          {t("introduce.desc.3p-2")}
+        <motion.div className="introduce-profile-name">
+          <div className="title-font">Jeong Hye In</div>
+        </motion.div>
+
+        <div className="introduce-page-desc">
+          <div>
+            {t("introduce.desc.1p-1")}
+            <br />
+            {t("introduce.desc.1p-2")}
+          </div>
+          <div>
+            {t("introduce.desc.2p-1")}
+            <br />
+            {t("introduce.desc.2p-2")}
+            <br />
+            {t("introduce.desc.2p-3")}
+          </div>
+          <div>
+            {t("introduce.desc.3p-1")}
+            <br />
+            {t("introduce.desc.3p-2")}
+          </div>
+          <div>
+            {t("introduce.desc.4p-1")}
+            <br />
+            {t("introduce.desc.4p-2")}
+          </div>
         </div>
-        <div>
-          {t("introduce.desc.4p-1")}
-          <br />
-          {t("introduce.desc.4p-2")}
+        <div className="my-photo-list">
+          <img alt="pic1" src={pic1}></img>
+          <img alt="pic2" src={pic2}></img>
+          <img alt="pic3" src={pic3}></img>
         </div>
-      </div>
-      <div className="my-photo-list">
-        <img alt="pic1" src={pic1}></img>
-        <img alt="pic2" src={pic2}></img>
-        <img alt="pic3" src={pic3}></img>
-      </div>
 
-      <div className="typing-section-wrapper">
-        <div className="my-interested-text">{t("introduce.typing.hello")}</div>
-        <div className="my-interested-text">
-          <strong>
-            <div className="typing-text">{landingTitle}</div>{" "}
-            {t("introduce.typing.my-name")}
-          </strong>
+        <div className="typing-section-wrapper">
+          <div className="my-interested-text">
+            {t("introduce.typing.hello")}
+          </div>
+          <div className="my-interested-text">
+            <strong>
+              <div className="typing-text">{landingTitle}</div>{" "}
+              {t("introduce.typing.my-name")}
+            </strong>
+          </div>
         </div>
-      </div>
 
-      <div className="my-interested-wrapper">
-        <div className="my-interested-text">
-          👩🏻‍💻 {t("introduce.interest.1-desc")}
-          <strong>{t("introduce.interest.1-name")}</strong>
-          {t("introduce.interest.1-like")}
-        </div>
-        <div className="my-interested-text">
-          📸 {t("introduce.interest.2-desc")}
-          <strong>{t("introduce.interest.2-name")}</strong>
-          {t("introduce.interest.2-like")}
+        <div className="my-interested-wrapper">
+          <div className="my-interested-text">
+            👩🏻‍💻 {t("introduce.interest.1-desc")}
+            <strong>{t("introduce.interest.1-name")}</strong>
+            {t("introduce.interest.1-like")}
+          </div>
+          <div className="my-interested-text">
+            📸 {t("introduce.interest.2-desc")}
+            <strong>{t("introduce.interest.2-name")}</strong>
+            {t("introduce.interest.2-like")}
+          </div>
+          <div className="my-interested-text">
+            🥁 {t("introduce.interest.3-desc")}
+            <strong>{t("introduce.interest.3-name")}</strong>
+            {t("introduce.interest.3-like")}
+          </div>
         </div>
-        <div className="my-interested-text">
-          🥁 {t("introduce.interest.3-desc")}
-          <strong>{t("introduce.interest.3-name")}</strong>
-          {t("introduce.interest.3-like")}
+        <div className="contact-wrapper">
+          <div className="my-interested-text">
+            📧 CONTACT | jhi2359@gmail.com
+          </div>
+          <div className="my-interested-text">
+            🐱 GITHUB |{" "}
+            <NavLink className="link-text" to="https://github.com/happyhyep">
+              @happyhyep
+            </NavLink>
+          </div>
         </div>
-      </div>
-      <div className="contact-wrapper">
-        <div className="my-interested-text">📧 CONTACT | jhi2359@gmail.com</div>
-        <div className="my-interested-text">
-          🐱 GITHUB |{" "}
-          <NavLink className="link-text" to="https://github.com/happyhyep">
-            @happyhyep
-          </NavLink>
+        <DashTitle name="Education"></DashTitle>
+        <div className="education-wrapper">
+          {educationList &&
+            educationList.map(function (el: EducationData) {
+              return (
+                <div className="education-text">
+                  {el.name} ({el.period})
+                </div>
+              );
+            })}
         </div>
-      </div>
-      <DashTitle name="Education"></DashTitle>
-      <div className="education-wrapper">
-        {educationList.map(function (el: EducationData) {
-          return (
-            <div className="education-text">
-              {el.name} ({el.period})
-            </div>
-          );
-        })}
-      </div>
-      <DashTitle name="Skills"></DashTitle>
-      <SkillsContainer />
-      <Footer />
-    </section>
+        <DashTitle name="Skills"></DashTitle>
+        <SkillsContainer />
+      </section>
+    </Layout>
   );
 }