diff --git a/src/assets/fonts/fonts.css b/src/assets/fonts/fonts.css
new file mode 100644
index 0000000..318998f
--- /dev/null
+++ b/src/assets/fonts/fonts.css
@@ -0,0 +1,8 @@
+/* src/assets/fonts.css */
+@font-face {
+  font-family: 'UhBeeSe_hyun';
+  src: url('https://gcore.jsdelivr.net/gh/projectnoonnu/noonfonts_five@.2.0/UhBeeSe_hyun.woff')
+    format('woff');
+  font-weight: normal;
+  font-style: normal;
+}
diff --git a/src/components/layout/FeedLayout.vue b/src/components/layout/FeedLayout.vue
index 7c72d89..2c4351e 100644
--- a/src/components/layout/FeedLayout.vue
+++ b/src/components/layout/FeedLayout.vue
@@ -8,8 +8,8 @@
 </template>
 
 <script>
-import MainHeader from '@/views/mainpage/Header.vue'
-import MainFooter from '@/views/mainpage/Footer.vue'
+import MainHeader from '@/components/layout/Header.vue'
+import MainFooter from '@/components/layout/Footer.vue'
 
 export default {
   name: 'FeedLayout'
diff --git a/src/views/mainpage/Footer.vue b/src/components/layout/Footer.vue
similarity index 100%
rename from src/views/mainpage/Footer.vue
rename to src/components/layout/Footer.vue
diff --git a/src/views/mainpage/Header.vue b/src/components/layout/Header.vue
similarity index 85%
rename from src/views/mainpage/Header.vue
rename to src/components/layout/Header.vue
index 0290694..15c818f 100644
--- a/src/views/mainpage/Header.vue
+++ b/src/components/layout/Header.vue
@@ -16,6 +16,6 @@
 
 <script>
 export default {
-  name: 'MainHeader' // Header 컴포넌트를 다른 파일에서 사용하기 위해 export
+  name: 'HeaderComponent' // Header 컴포넌트를 다른 파일에서 사용하기 위해 export
 }
 </script>
diff --git a/src/main.js b/src/main.js
index f16b06b..2f8a672 100644
--- a/src/main.js
+++ b/src/main.js
@@ -7,6 +7,8 @@ import axios from 'axios'
 import './assets/styles/global.css'
 import 'tailwindcss/tailwind.css'
 import 'bootstrap/dist/css/bootstrap.min.css'
+import './assets/fonts/fonts.css'
+
 import VCalendar from 'v-calendar' // v-calendar를 불러오기
 axios.defaults.withCredentials = true
 
diff --git a/src/views/calendar/CalendarMainView.vue b/src/views/calendar/CalendarMainView.vue
index 90bb920..4d4da13 100644
--- a/src/views/calendar/CalendarMainView.vue
+++ b/src/views/calendar/CalendarMainView.vue
@@ -65,8 +65,8 @@
 import { ref } from 'vue'
 import { format } from 'date-fns'
 import 'v-calendar/dist/style.css'
-import MainHeader from '@/views/mainpage/Header.vue'
-import MainFooter from '@/views/mainpage/Footer.vue'
+import MainHeader from '@/components/layout/Header.vue'
+import MainFooter from '@/components/layout/Footer.vue'
 
 // 현재 날짜를 기준으로 연도와 월을 가져옴
 const currentDate = new Date()
diff --git a/src/views/feed/AkoStampWriteView.vue b/src/views/feed/AkoStampWriteView.vue
index 37557c2..7836889 100644
--- a/src/views/feed/AkoStampWriteView.vue
+++ b/src/views/feed/AkoStampWriteView.vue
@@ -62,7 +62,7 @@
 <script setup>
 import { ref } from 'vue'
 import axios from 'axios'
-import MainFooter from '@/views/mainpage/Footer.vue'
+import MainFooter from '@/components/layout/Footer.vue'
 
 const currentDate = ref(
   new Date().toLocaleDateString('ko-KR', {
diff --git a/src/views/login/mypage/MypageView.vue b/src/views/login/mypage/MypageView.vue
index b7dd2b5..9e539cf 100644
--- a/src/views/login/mypage/MypageView.vue
+++ b/src/views/login/mypage/MypageView.vue
@@ -158,121 +158,20 @@
         </section>
       </main>
       <!-- 하단바 -->
-      <footer
-        class="bg-white shadow-sm py-3 px-4 fixed bottom-0 left-1/2 transform -translate-x-1/2 w-[395px] min-w-[340px] z-10"
-      >
-        <div class="flex items-center justify-between">
-          <h1 class="text-xl font-bold">{{ user.nickname }}님의 마이페이지</h1>
-          <button
-            @click="handleLogout"
-            class="text-[#F6B87A] hover:bg-[#F6B87A] hover:bg-opacity-10 px-2 py-1 rounded-full transition-colors duration-300 text-sm"
-          >
-            로그아웃
-          </button>
-        </div>
-      </footer>
+      <MainFooter />
     </div>
   </div>
 </template>
 
-<script src="./MypageScript.js"></script>
-
-<style scoped>
-/* .mypage-container {
-  max-width: 600px;
-  margin: 0 auto;
-  padding: 20px;
-  background-color: #f9f9f9;
-  border-radius: 10px;
-  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
-}
-
-h1 {
-  text-align: center;
-  color: #333;
-  margin-bottom: 30px;
-  font-size: 24px;
-}
-
-.logout-button {
-  background-color: #ff4d4f;
-  color: white;
-  border: none;
-  padding: 10px 20px;
-  border-radius: 5px;
-  cursor: pointer;
-  display: block;
-  margin: 10px auto;
-  width: 150px;
-  text-align: center;
-}
-
-.logout-button:hover {
-  background-color: #ff7875;
-}
-
-.intro-section,
-.profile-section {
-  background-color: white;
-  padding: 20px;
-  border-radius: 10px;
-  margin-bottom: 20px;
-  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
-}
-
-h2 {
-  color: #666;
-  margin-bottom: 15px;
-  font-size: 20px;
-}
-
-.introduce-text {
-  font-style: italic;
-  color: #555;
-  margin-bottom: 10px;
-}
-
-.edit-button {
-  background-color: #40a9ff;
-  color: white;
-  border: none;
-  padding: 8px 15px;
-  border-radius: 5px;
-  cursor: pointer;
-}
-
-.edit-button:hover {
-  background-color: #69c0ff;
-}
-
-.form-group {
-  margin-bottom: 15px;
-}
-
-label {
-  display: block;
-  margin-bottom: 5px;
-  color: #555;
-}
-
-input {
-  width: 100%;
-  padding: 8px;
-  border: 1px solid #ddd;
-  border-radius: 5px;
-}
+<script src="./MypageScript.js">
+import MainFooter from '@/components/layout/Footer.vue'
+import './MypageScript.js';
 
-.save-button {
-  background-color: #52c41a;
-  color: white;
-  border: none;
-  padding: 10px 20px;
-  border-radius: 5px;
-  cursor: pointer;
-  margin-top: 10px;
+export default {
+  components: {
+    MainFooter
+  }
 }
+</script>
 
-.save-button:hover {
-  background-color: #73d13d;
-} */
-</style>
+<style scoped></style>
diff --git a/src/views/mainpage/MainpageScript.js b/src/views/mainpage/MainpageScript.js
new file mode 100644
index 0000000..e69de29
diff --git a/src/views/mainpage/MainpageView.vue b/src/views/mainpage/MainpageView.vue
index 1e3caab..3f6368c 100644
--- a/src/views/mainpage/MainpageView.vue
+++ b/src/views/mainpage/MainpageView.vue
@@ -7,7 +7,9 @@
       <!-- 본문 내용 -->
       <main class="flex flex-col px-6 pt-20 pb-24">
         <!-- 제목 -->
-        <h1 class="mb-6 text-2xl font-bold text-center text-gray-800">
+        <h1
+          class="mb-6 text-xl font-medium text-center text-gray-800 font-uhbeesehyun"
+        >
           오늘도 우리 아코는 한 걸음씩!
         </h1>
 
@@ -97,8 +99,8 @@
 
 <script setup>
 import { ref } from 'vue'
-import MainHeader from '@/views/mainpage/Header.vue'
-import MainFooter from '@/views/mainpage/Footer.vue'
+import MainHeader from '@/components/layout/Header.vue'
+import MainFooter from '@/components/layout/Footer.vue'
 import minielephanticon from '@/assets/Icons/akoming/mainpage/minielephanticon.svg'
 
 const stamps = ref([
@@ -118,3 +120,13 @@ const tasks = ref([
   { name: '아코폴리오', completed: false }
 ])
 </script>
+
+<style scoped>
+@font-face {
+  font-family: 'UhBeeSe_hyun';
+  src: url('https://gcore.jsdelivr.net/gh/projectnoonnu/noonfonts_five@.2.0/UhBeeSe_hyun.woff')
+    format('woff');
+  font-weight: normal;
+  font-style: normal;
+}
+</style>
diff --git a/tailwind.config.js b/tailwind.config.js
index 8becf89..1894f5d 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -5,7 +5,8 @@ module.exports = {
   theme: {
     extend: {
       fontFamily: {
-        pretendard: ['Pretendard', 'sans-serif'] // Pretendard 폰트 추가
+        pretendard: ['Pretendard', 'sans-serif'], // Pretendard 폰트 추가
+        uhbeesehyun: ['UhBeeSe_hyun', 'sans-serif'] // UhBeeSe_hyun 폰트 추가
       },
       colors: {
         customBg: '#FFF9F2'