diff --git a/public/index.html b/public/index.html
index 5f1393c..ab0ea5c 100644
--- a/public/index.html
+++ b/public/index.html
@@ -6,6 +6,10 @@
     <meta name="viewport" content="width=device-width,initial-scale=1.0" />
     <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
     <title><%= htmlWebpackPlugin.options.title %></title>
+    <link
+      href="https://fonts.googleapis.com/css2?family=Nanum+Square+Round:wght@400;700&display=swap"
+      rel="stylesheet"
+    />
   </head>
   <body>
     <noscript>
diff --git a/src/views/calendar/CalendarMainStyled.js b/src/views/calendar/CalendarMainStyled.js
deleted file mode 100644
index fe48de2..0000000
--- a/src/views/calendar/CalendarMainStyled.js
+++ /dev/null
@@ -1,129 +0,0 @@
-import styled from 'vue-styled-components'
-
-// 전체 컨테이너
-export const PageContainer = styled.div`
-  min-height: 100vh;
-  background-color: #fff9f2;
-  font-family: 'NanumSquareRound', sans-serif;
-  display: flex;
-  justify-content: center;
-  position: relative;
-`
-
-export const InnerContainer = styled.div`
-  width: 395px;
-  min-width: 340px;
-  background-color: #fae8da;
-  min-height: 100vh;
-  position: relative;
-  overflow-y: auto;
-`
-
-// 메인 컨텐츠
-export const MainContent = styled.main`
-  display: flex;
-  flex-direction: column;
-  padding: 20px 1.5rem 6rem;
-  margin-top: 30px;
-`
-
-export const SectionTitle = styled.h2`
-  font-size: 1.25rem;
-  font-weight: 500;
-  color: #4a4a4a;
-  margin-bottom: 0.5rem;
-`
-
-export const MonthTitle = styled.h3`
-  font-size: 1.5rem;
-  font-weight: bold;
-  color: #4a4a4a;
-`
-
-// 캘린더 관련 스타일
-export const CalendarContainer = styled.div`
-  background-color: #fae8da;
-  border-radius: 0.5rem;
-  padding: 1rem;
-  margin-bottom: 1rem;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-`
-
-export const CalendarGrid = styled.div`
-  display: grid;
-  grid-template-columns: repeat(7, 1fr);
-  gap: 1rem;
-  text-align: center;
-  margin-bottom: 1rem;
-`
-
-export const CalendarDay = styled.span`
-  font-size: 0.875rem;
-  color: #b3b3b3;
-`
-
-export const CalendarWeek = styled.div`
-  display: flex;
-  width: 100%;
-  justify-content: space-between;
-  margin-bottom: 0.25rem;
-`
-
-export const DayButton = styled.button`
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  width: 2rem;
-  height: 2rem;
-  font-size: 0.75rem;
-  border-radius: 0.5rem;
-  margin: 0.125rem;
-  background-color: ${(props) =>
-    props.isSelected ? '#FF7F00' : 'transparent'};
-  color: ${(props) =>
-    props.isSundayOrSaturday
-      ? '#17A1FA'
-      : props.isSelected
-      ? 'white'
-      : '#B3B3B3'};
-`
-
-// 학사 일정 팝업
-export const SchedulePopup = styled.div`
-  position: fixed;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  background-color: #ffffff;
-  border-radius: 1.5rem 1.5rem 0 0;
-  padding: 1.5rem;
-  overflow-y: auto;
-  max-height: 60vh;
-  width: 395px;
-  margin: 0 auto;
-`
-
-export const LinkButton = styled.a`
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  text-align: left;
-  padding: 0.5rem 1rem;
-  background-color: #ffd9bb;
-  color: #000000;
-  font-size: 0.875rem;
-  font-weight: 500;
-  border-radius: 0.5rem;
-  text-decoration: none;
-  max-width: 80%;
-  margin: 0 auto 0.625rem;
-  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
-  transition: background-color 0.3s ease;
-
-  &:hover {
-    background-color: #f1cdb1;
-  }
-`
diff --git a/src/views/calendar/CalendarMainView.vue b/src/views/calendar/CalendarMainView.vue
index b327703..bf39f61 100644
--- a/src/views/calendar/CalendarMainView.vue
+++ b/src/views/calendar/CalendarMainView.vue
@@ -1,19 +1,4 @@
 <script setup>
-import {
-  PageContainer,
-  InnerContainer,
-  MainContent,
-  SectionTitle,
-  MonthTitle,
-  CalendarContainer,
-  CalendarGrid,
-  CalendarDay,
-  CalendarWeek,
-  DayButton,
-  SchedulePopup,
-  LinkButton
-} from './CalendarMainStyled.js'
-
 import { ref, onMounted } from 'vue'
 import {
   DAY_LIST,
@@ -46,14 +31,27 @@ onMounted(() => {
 </script>
 
 <template>
-  <PageContainer>
-    <InnerContainer>
+  <div class="page-container">
+    <div
+      class="inner-container"
+      style="margin-top: 60px; font-family: 'NanumSquareRound', sans-serif"
+    >
       <MainHeader />
-      <MainContent>
+      <div class="main-content">
         <div>
-          <SectionTitle>{{ currentYear }} at 동국대학교</SectionTitle>
+          <h2
+            class="section-title"
+            style="font-family: 'NanumSquareRound', sans-serif"
+          >
+            {{ currentYear }} at 동국대학교
+          </h2>
           <div class="flex items-center justify-between">
-            <MonthTitle>{{ currentMonth }}월</MonthTitle>
+            <h3
+              class="month-title"
+              style="font-family: 'NanumSquareRound', sans-serif"
+            >
+              {{ currentMonth }}월
+            </h3>
             <div class="flex space-x-6">
               <button @click="goToPrevMonth">
                 <img
@@ -72,31 +70,42 @@ onMounted(() => {
           </div>
         </div>
 
-        <CalendarContainer>
-          <CalendarGrid>
-            <CalendarDay v-for="day in DAY_LIST" :key="day">{{
-              day
-            }}</CalendarDay>
-          </CalendarGrid>
-          <CalendarWeek v-for="week in weekCalendarList" :key="week.toString()">
-            <DayButton
+        <div class="calendar-container">
+          <div class="calendar-grid">
+            <div class="calendar-day" v-for="day in DAY_LIST" :key="day">
+              {{ day }}
+            </div>
+          </div>
+          <div
+            class="calendar-week"
+            v-for="week in weekCalendarList"
+            :key="week.toString()"
+          >
+            <button
+              class="day-button"
+              :class="{
+                selected: day === selectedDay,
+                'sunday-saturday': isSundayOrSaturday(day)
+              }"
               v-for="day in week"
               :key="day"
-              :isSelected="day === selectedDay"
-              :isSundayOrSaturday="isSundayOrSaturday(day)"
               @click="selectDay(day)"
             >
               {{ day !== 0 ? day : '' }}
-            </DayButton>
-          </CalendarWeek>
-        </CalendarContainer>
+            </button>
+          </div>
+        </div>
 
-        <SchedulePopup v-if="isScheduleOpen && selectedEvents.length > 0">
-          <!-- 일정 내용 -->
-        </SchedulePopup>
+        <div
+          class="schedule-popup"
+          v-if="isScheduleOpen && selectedEvents.length > 0"
+        >
+          <!-- 학사 일정 내용 -->
+        </div>
 
         <div>
-          <LinkButton
+          <a
+            class="link-button"
             v-for="(link, index) in links"
             :key="index"
             :href="link.url"
@@ -107,10 +116,140 @@ onMounted(() => {
               src="@/assets/Icons/akoming/arrowright.svg"
               alt="arrow right"
             />
-          </LinkButton>
+          </a>
         </div>
-      </MainContent>
+      </div>
       <MainFooter />
-    </InnerContainer>
-  </PageContainer>
+    </div>
+  </div>
 </template>
+
+<style scoped>
+.page-container {
+  min-height: 100vh;
+  background-color: #fff9f2;
+  font-family: 'NanumSquareRound', sans-serif;
+  display: flex;
+  justify-content: center;
+  position: relative;
+}
+
+.inner-container {
+  width: 395px;
+  min-width: 340px;
+  background-color: #fae8da;
+  min-height: 100vh;
+  position: relative;
+  overflow-y: auto;
+}
+
+.main-content {
+  display: flex;
+  flex-direction: column;
+  padding: 20px 1.5rem 6rem;
+  margin-top: 30px;
+}
+
+.section-title {
+  font-size: 1.25rem;
+  font-weight: 500;
+  color: #4a4a4a;
+  margin-bottom: 0.5rem;
+}
+
+.month-title {
+  font-size: 1.5rem;
+  font-weight: bold;
+  color: #4a4a4a;
+}
+
+.calendar-container {
+  background-color: #fae8da;
+  border-radius: 0.5rem;
+  padding: 1rem;
+  margin-bottom: 1rem;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.calendar-grid {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  gap: 1rem;
+  text-align: center;
+  margin-bottom: 1rem;
+}
+
+.calendar-day {
+  font-size: 0.875rem;
+  color: #b3b3b3;
+}
+
+.calendar-week {
+  display: flex;
+  width: 100%;
+  justify-content: space-between;
+  margin-bottom: 0.25rem;
+}
+
+.day-button {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 2rem;
+  height: 2rem;
+  font-size: 0.75rem;
+  border-radius: 0.5rem;
+  margin: 0.125rem;
+  background-color: transparent;
+  color: #b3b3b3;
+  transition: background-color 0.3s, color 0.3s;
+}
+
+.day-button.selected {
+  background-color: #ff7f00;
+  color: white;
+}
+
+.day-button.sunday-saturday {
+  color: #17a1fa;
+}
+
+.schedule-popup {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background-color: #ffffff;
+  border-radius: 1.5rem 1.5rem 0 0;
+  padding: 1.5rem;
+  overflow-y: auto;
+  max-height: 60vh;
+  width: 395px;
+  margin: 0 auto;
+}
+
+.link-button {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  text-align: left;
+  padding: 0.5rem 1rem;
+  background-color: #ffd9bb;
+  color: #000000;
+  font-size: 0.875rem;
+  font-weight: 500;
+  border-radius: 0.5rem;
+  text-decoration: none;
+  max-width: 80%;
+  margin: 0 auto 0.625rem;
+  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
+  transition: background-color 0.3s ease;
+}
+
+.link-button:hover {
+  background-color: #f1cdb1;
+}
+</style>
diff --git a/src/views/login/login/LoginScript.js b/src/views/login/login/LoginScript.js
index a8fa531..d3bd2ea 100644
--- a/src/views/login/login/LoginScript.js
+++ b/src/views/login/login/LoginScript.js
@@ -49,7 +49,7 @@ export default {
 
           alert('로그인 성공!')
           // 로그인 성공 후 MyPage로 리다이렉트
-          this.$router.push('/mypage')
+          this.$router.push('/main')
         }
       } catch (error) {
         // 로그인 실패 처리
diff --git a/src/views/login/login/LoginView.vue b/src/views/login/login/LoginView.vue
index 8ffd087..6751563 100644
--- a/src/views/login/login/LoginView.vue
+++ b/src/views/login/login/LoginView.vue
@@ -1,34 +1,5 @@
-<script>
-import LogoLoading from '@/components/LogoLoading.vue'
-import LoginScript from './LoginScript.js'
-
-export default {
-  components: {
-    LogoLoading
-  },
-  data() {
-    return {
-      showLoading: true,
-      email: '',
-      password: '',
-      isEmailValid: true
-    }
-  },
-  methods: {
-    ...LoginScript.methods,
-    validateEmail() {
-      this.isEmailValid = this.email.endsWith('@dgu.ac.kr')
-    },
-    onSubmit() {
-      this.validateEmail()
-      LoginScript.methods.onSubmit.call(this)
-    }
-  }
-}
-</script>
-
 <template>
-  <div class="page-container">
+  <div class="login-page page-container">
     <div class="mobile-container">
       <!-- 로고 로딩 화면 -->
       <LogoLoading
@@ -88,144 +59,183 @@ export default {
   </div>
 </template>
 
-<style scoped>
-/* 외부 컨테이너 */
-.page-container {
-  min-height: 100vh;
-  background-color: #fff9f2;
-  font-family: 'NanumSquareRound', sans-serif;
-  display: flex;
-  justify-content: center;
-}
+<script>
+import LogoLoading from '@/components/LogoLoading.vue'
+import LoginScript from './LoginScript.js'
 
-/* 모바일 컨테이너 */
-.mobile-container {
-  width: 395px;
-  min-width: 340px;
-  background-color: #fae8da;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  position: relative;
+export default {
+  components: {
+    LogoLoading
+  },
+  data() {
+    return {
+      showLoading: true,
+      email: '',
+      password: '',
+      isEmailValid: true
+    }
+  },
+  methods: {
+    ...LoginScript.methods,
+    validateEmail() {
+      this.isEmailValid = this.email.endsWith('@dgu.ac.kr')
+    },
+    onSubmit() {
+      this.validateEmail()
+      LoginScript.methods.onSubmit.call(this)
+    }
+  }
 }
+</script>
 
-/* 헤더 */
-.header {
-  background-color: #ffffff;
-  padding: 0.5rem 1rem;
-  position: fixed;
-  top: 0;
-  left: 50%;
-  transform: translateX(-50%);
-  width: 395px;
-  min-width: 340px;
-  z-index: 10;
-}
+<style scoped>
+/* login-page 네임스페이스로 스타일 제한 */
+.login-page {
+  /* 외부 컨테이너 */
+  .page-container {
+    min-height: 100vh;
+    background-color: #fff9f2;
+    font-family: 'Nanum Square Round', sans-serif;
+    display: flex;
+    justify-content: center;
+  }
 
-.header-content {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
+  /* 모바일 컨테이너 */
+  .mobile-container {
+    width: 395px;
+    min-width: 340px;
+    background-color: #fae8da;
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+    position: relative;
+  }
 
-.logo {
-  height: 3rem;
-}
+  /* 헤더 */
+  .header {
+    background-color: #ffffff;
+    padding: 0.5rem 1rem;
+    position: fixed;
+    top: 0;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 395px;
+    min-width: 340px;
+    z-index: 10;
+  }
 
-.signup-button {
-  color: #f6b87a;
-  background-color: transparent;
-  padding: 0.25rem 0.5rem;
-  border-radius: 9999px;
-  transition: background-color 0.3s ease;
-}
+  .header-content {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
 
-.signup-button:hover {
-  background-color: rgba(246, 184, 122, 0.1);
-}
+  .logo {
+    height: 3rem;
+  }
 
-/* 메인 컨텐츠 */
-.main-content {
-  margin-top: 160px;
-  flex-grow: 1;
-  padding: 4rem 3rem 2rem;
-}
+  .signup-button {
+    color: #f6b87a;
+    background-color: transparent;
+    padding: 0.25rem 0.5rem;
+    border-radius: 9999px;
+    transition: background-color 0.3s ease;
+  }
 
-.title {
-  margin-bottom: 1rem;
-  font-size: 1.5rem;
-  font-weight: bold;
-  text-align: center;
-}
+  .signup-button:hover {
+    background-color: rgba(246, 184, 122, 0.1);
+  }
 
-/* 폼 */
-.form {
-  margin: 2rem 0;
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-}
+  /* 메인 컨텐츠 */
+  .main-content {
+    margin-top: 160px;
+    flex-grow: 1;
+    padding: 4rem 3rem 2rem;
+  }
 
-.form-group {
-  display: flex;
-  flex-direction: column;
-  gap: 0.25rem;
-}
+  .title {
+    margin-bottom: 1rem;
+    font-size: 1.5rem;
+    font-weight: bold;
+    text-align: center;
+    font-family: 'Nanum Square Round', sans-serif;
+  }
 
-.form-group label {
-  font-size: 0.875rem;
-  font-weight: 500;
-  color: #4a4a4a;
-}
+  /* 폼 */
+  .form {
+    margin: 2rem 0;
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+  }
 
-.form-group input {
-  width: 100%;
-  padding: 0.5rem 1rem;
-  background-color: #ddd7d3;
-  border: 1px solid #e5e5e5;
-  border-radius: 9999px;
-  font-size: 0.875rem;
-  outline: none;
-  transition: border-color 0.2s ease, box-shadow 0.2s ease;
-}
+  .form-group {
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+  }
 
-.form-group input:focus {
-  border-color: transparent;
-  box-shadow: 0 0 0 2px #f6b87a;
-}
+  .form-group label {
+    font-size: 0.875rem;
+    font-weight: 500;
+    color: #4a4a4a;
+  }
 
-.form-group input.invalid {
-  border-color: #ff6b6b;
-}
+  .form-group input {
+    width: 100%;
+    padding: 0.5rem 1rem;
+    background-color: #ddd7d3;
+    border: 1px solid #e5e5e5;
+    border-radius: 9999px;
+    font-size: 0.875rem;
+    outline: none;
+    transition: border-color 0.2s ease, box-shadow 0.2s ease;
+  }
 
-.error-message {
-  margin-top: 0.25rem;
-  font-size: 0.75rem;
-  color: #ff6b6b;
-}
+  .form-group input:focus {
+    border-color: transparent;
+    box-shadow: 0 0 0 2px #f6b87a;
+  }
 
-/* 버튼 */
-.submit-button {
-  width: 100%;
-  max-width: 10rem;
-  padding: 0.5rem 1rem;
-  height: 2.5rem;
-  background-color: #f6b87a;
-  color: #ffffff;
-  font-size: 0.875rem;
-  font-weight: 500;
-  border-radius: 9999px;
-  text-align: center;
-  transition: background-color 0.3s ease;
-  cursor: pointer;
-}
+  .form-group input.invalid {
+    border-color: #ff6b6b;
+  }
 
-.submit-button:hover {
-  background-color: #e5a769;
-}
+  .error-message {
+    margin-top: 0.25rem;
+    font-size: 0.75rem;
+    color: #ff6b6b;
+  }
+
+  .form-actions {
+    margin-top: 20px;
+    display: flex;
+    justify-content: center;
+  }
+
+  /* 버튼 */
+  .submit-button {
+    width: 100%;
+    max-width: 10rem;
+    padding: 0.5rem 1rem;
+    height: 2.5rem;
+    background-color: #f6b87a;
+    color: #ffffff;
+    font-size: 0.875rem;
+    font-weight: 500;
+    border-radius: 9999px;
+    text-align: center;
+    transition: background-color 0.3s ease;
+    cursor: pointer;
+  }
 
-.submit-button:disabled {
-  background-color: #cccccc;
-  cursor: not-allowed;
+  .submit-button:hover {
+    background-color: #e5a769;
+  }
+
+  .submit-button:disabled {
+    background-color: #cccccc;
+    cursor: not-allowed;
+  }
 }
 </style>
diff --git a/src/views/login/mypage/MyAkoGoals.vue b/src/views/login/mypage/MyAkoGoals.vue
index 791640f..cec7e80 100644
--- a/src/views/login/mypage/MyAkoGoals.vue
+++ b/src/views/login/mypage/MyAkoGoals.vue
@@ -1,24 +1,13 @@
-<!-- src/components/MyAkoGoals.vue -->
 <template>
-  <section class="mt-8">
-    <h2 class="mb-2 text-lg font-semibold font-nanum-square-round">
-      나의 아코자국들
-    </h2>
-    <ul v-if="goals.length > 0" class="space-y-3">
-      <li
-        v-for="(goal, index) in goals"
-        :key="index"
-        class="p-3 bg-white rounded-lg"
-      >
-        <p class="text-sm font-nanum-square-round">{{ goal.content }}</p>
-        <p class="text-xs text-gray-500">
-          {{ formatDate(goal.createdAt) }}
-        </p>
+  <section class="my-ako-goals">
+    <h2 class="goals-title">나의 아코자국들</h2>
+    <ul v-if="goals.length > 0" class="goals-list">
+      <li v-for="(goal, index) in goals" :key="index" class="goal-item">
+        <p class="goal-content">{{ goal.content }}</p>
+        <p class="goal-date">{{ formatDate(goal.createdAt) }}</p>
       </li>
     </ul>
-    <p v-else class="text-sm font-nanum-square-round">
-      아직 목표 기록이 없습니다.
-    </p>
+    <p v-else class="no-goals">아직 목표 기록이 없습니다.</p>
   </section>
 </template>
 
@@ -37,4 +26,42 @@ export default {
 }
 </script>
 
-<style scoped></style>
+<style scoped>
+.my-ako-goals {
+  margin-top: 2rem;
+}
+
+.goals-title {
+  margin-bottom: 0.5rem;
+  font-size: 1.125rem;
+  font-weight: 600;
+  font-family: 'NanumSquareRound', sans-serif;
+}
+
+.goals-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.goal-item {
+  padding: 0.75rem;
+  background-color: white;
+  border-radius: 0.5rem;
+}
+
+.goal-content {
+  font-size: 0.875rem;
+  font-family: 'NanumSquareRound', sans-serif;
+}
+
+.goal-date {
+  font-size: 0.75rem;
+  color: #6b7280;
+}
+
+.no-goals {
+  font-size: 0.875rem;
+  font-family: 'NanumSquareRound', sans-serif;
+}
+</style>
diff --git a/src/views/login/mypage/MypageScript.js b/src/views/login/mypage/MypageScript.js
index ba37c4b..a87d458 100644
--- a/src/views/login/mypage/MypageScript.js
+++ b/src/views/login/mypage/MypageScript.js
@@ -1,4 +1,5 @@
 import { reactive, ref } from 'vue'
+import { useRouter } from 'vue-router'
 
 // user 객체를 reactive로 설정
 export const user = reactive({
@@ -15,15 +16,13 @@ export const confirmPassword = ref('')
 export const currentPassword = ref('')
 export const passwordVerified = ref(false)
 
-// 로그아웃 함수
-export async function handleLogout() {
+export async function handleLogout(router) {
   try {
-    // 로그아웃 요청
     const response = await fetch(
       `${process.env.VUE_APP_BE_API_URL}/api/users/logout`,
       {
         method: 'POST',
-        credentials: 'include' // 세션을 포함하여 로그아웃 요청
+        credentials: 'include' // 세션 포함
       }
     )
 
@@ -34,16 +33,15 @@ export async function handleLogout() {
       document.cookie =
         'JSESSIONID=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;'
 
-      // 로그아웃 후 리디렉트
-      window.location.href = '/auth/login'
+      // 로그아웃 후 로그인 페이지로 리다이렉트
+      router.push('/auth/login')
     } else {
-      alert('로그아웃 실패.')
       console.error('로그아웃 실패:', response.status, response.statusText)
+      router.push('/auth/login') // 오류 발생 시에도 리다이렉트
     }
   } catch (error) {
-    alert('로그아웃 오류.')
     console.error('로그아웃 오류:', error)
-    this.$router.push('/auth/login')
+    router.push('/auth/login') // 오류 발생 시에도 리다이렉트
   }
 }
 
diff --git a/src/views/login/mypage/MypageView.vue b/src/views/login/mypage/MypageView.vue
index ef7d8f0..a57f314 100644
--- a/src/views/login/mypage/MypageView.vue
+++ b/src/views/login/mypage/MypageView.vue
@@ -10,7 +10,7 @@
       <!-- 로그아웃 버튼 -->
       <div class="absolute top-4 right-4">
         <button
-          @click="handleLogout"
+          @click="logout"
           class="px-4 py-2 bg-[#F6B87A] text-black text-sm font-medium rounded-full hover:bg-[#e5a769] transition-colors duration-300"
           style="margin-top: 60px"
         >
@@ -242,6 +242,7 @@
 import MainHeader from '@/components/layout/Header.vue'
 import MainFooter from '@/components/layout/Footer.vue'
 import { ref, computed, onMounted } from 'vue'
+import { useRouter } from 'vue-router' // Vue Router 가져오기
 import axios from 'axios'
 
 // MyPageScript.js에서 필요한 데이터와 함수 가져오기
@@ -251,17 +252,23 @@ import {
   confirmPassword,
   currentPassword,
   passwordVerified,
-  handleLogout,
+  handleLogout, // 로그아웃 함수
   fetchUser,
   verifyCurrentPassword,
   updatePassword,
   updateProfile
 } from './MypageScript.js'
 
+const router = useRouter() // Vue Router 인스턴스 가져오기
 const goals = ref([]) // 목표 데이터
 const isExpanded = ref(false) // 더보기 상태 관리
 const maxVisibleGoals = 3 // 기본 표시할 목표 수
 
+// 로그아웃 버튼 클릭 시 호출
+const logout = () => {
+  handleLogout(router) // router를 handleLogout 함수에 전달
+}
+
 // 목표 기록 가져오기
 const fetchGoals = async () => {
   try {
diff --git a/src/views/login/signup/SignupStyled.js b/src/views/login/signup/SignupStyled.js
deleted file mode 100644
index f8a1db8..0000000
--- a/src/views/login/signup/SignupStyled.js
+++ /dev/null
@@ -1,158 +0,0 @@
-import styled from 'vue-styled-components'
-
-// 외부 컨테이너
-export const PageContainer = styled.div`
-  min-height: 100vh;
-  background-color: #fff9f2;
-  font-family: 'NanumSquareRound', sans-serif;
-  display: flex;
-  justify-content: center;
-`
-
-// 모바일 영역
-export const MobileContainer = styled.div`
-  width: 395px;
-  min-width: 340px;
-  background-color: #fae8da;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  position: relative;
-`
-
-// 헤더
-export const Header = styled.header`
-  background-color: #ffffff;
-  padding: 0.5rem 1rem;
-  position: fixed;
-  top: 0;
-  left: 50%;
-  transform: translateX(-50%);
-  width: 395px;
-  min-width: 340px;
-  z-index: 10;
-
-  .logo {
-    height: 3rem;
-  }
-
-  .back-button {
-    color: #f6b87a;
-    background-color: transparent;
-    padding: 0.25rem 0.5rem;
-    border-radius: 9999px;
-    transition: background-color 0.3s ease;
-
-    &:hover {
-      background-color: rgba(246, 184, 122, 0.1);
-    }
-  }
-`
-
-// 메인 컨텐츠
-export const MainContent = styled.main`
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  flex-grow: 1;
-  padding: 4rem 3rem 2rem;
-  font-family: 'NanumSquareRound', sans-serif;
-
-  .title {
-    margin-bottom: 0.5rem;
-    font-size: 1.5rem;
-    font-weight: bold;
-    text-align: center;
-  }
-
-  .form {
-    margin: 2rem 0;
-    display: flex;
-    flex-direction: column;
-    gap: 1rem;
-  }
-
-  .form-group {
-    display: flex;
-    flex-direction: column;
-    gap: 0.25rem;
-
-    label {
-      font-size: 0.875rem;
-      font-weight: 500;
-      color: #4a4a4a;
-    }
-
-    input {
-      width: 100%;
-      padding: 0.5rem 1rem;
-      background-color: #ddd7d3;
-      border: 1px solid #e5e5e5;
-      border-radius: 9999px;
-      font-size: 0.875rem;
-      outline: none;
-      transition: border-color 0.2s ease, box-shadow 0.2s ease;
-
-      &:focus {
-        border-color: transparent;
-        box-shadow: 0 0 0 2px #f6b87a;
-      }
-
-      &.invalid {
-        border-color: #ff6b6b;
-      }
-    }
-
-    .error-message {
-      margin-top: 0.25rem;
-      font-size: 0.75rem;
-      color: #ff6b6b;
-    }
-  }
-`
-
-// 인증하기 버튼
-export const VerificationButton = styled.button`
-  padding: 0.5rem 1rem;
-  background-color: #f6b87a;
-  color: #ffffff;
-  font-size: 0.875rem;
-  border-radius: 9999px;
-  text-align: center;
-  transition: background-color 0.3s ease;
-  cursor: pointer;
-
-  &:hover {
-    background-color: #e5a769;
-  }
-
-  &:disabled {
-    background-color: #cccccc;
-    cursor: not-allowed;
-  }
-`
-
-// 가입하기 버튼
-export const SubmitButton = styled.button`
-  width: 100%;
-  max-width: 10rem;
-  padding: 0.5rem 1rem;
-  height: 2.5rem;
-  background-color: #f6b87a;
-  color: #ffffff;
-  font-size: 0.875rem;
-  font-weight: 500;
-  border-radius: 9999px;
-  text-align: center;
-  transition: background-color 0.3s ease;
-  cursor: pointer;
-
-  &:hover {
-    background-color: #e5a769;
-  }
-
-  &:disabled {
-    background-color: #cccccc;
-    cursor: not-allowed;
-  }
-`
diff --git a/src/views/login/signup/SignupView.vue b/src/views/login/signup/SignupView.vue
index 4917f6f..ba7e028 100644
--- a/src/views/login/signup/SignupView.vue
+++ b/src/views/login/signup/SignupView.vue
@@ -1,7 +1,10 @@
 <template>
   <div class="page-container">
     <!-- 모바일 영역 -->
-    <div class="mobile-container">
+    <div
+      class="mobile-container"
+      style="font-family: 'NanumSquareRound', sans-serif"
+    >
       <!-- 상단바 -->
       <header class="header">
         <div class="header-content">
@@ -14,7 +17,9 @@
 
       <!-- 본문 내용 -->
       <main class="main-content">
-        <h1 class="title">회원가입</h1>
+        <h1 class="title" style="font-family: 'NanumSquareRound', sans-serif">
+          회원가입
+        </h1>
         <form @submit.prevent="onSubmit" class="form">
           <!-- 이메일 입력란 및 인증하기 버튼 -->
           <div class="form-group">
@@ -283,4 +288,17 @@ input.invalid {
   background-color: #cccccc;
   cursor: not-allowed;
 }
+.form-inline {
+  display: flex;
+  gap: 0.5rem;
+  align-items: center; /* 높이를 맞추기 위해 추가 */
+}
+
+input#email {
+  height: 2.5rem; /* 버튼 높이와 동일하게 설정 */
+}
+
+.verification-button {
+  height: 2.5rem; /* 입력란 높이와 동일하게 설정 */
+}
 </style>
diff --git a/src/views/mainpage/MainpageStyled.css b/src/views/mainpage/MainpageStyled.css
new file mode 100644
index 0000000..26690ee
--- /dev/null
+++ b/src/views/mainpage/MainpageStyled.css
@@ -0,0 +1,130 @@
+/* 외부 컨테이너 */
+.page-container {
+  min-height: 100vh;
+  background-color: #fff9f2;
+  font-family: 'NanumSquareRound', sans-serif;
+  display: flex;
+  justify-content: center;
+}
+
+/* 모바일 컨테이너 */
+.mobile-container {
+  width: 395px;
+  min-width: 340px;
+  background-color: #fae8da;
+  min-height: 100vh;
+  position: relative;
+  overflow-y: auto;
+}
+
+/* 메인 컨텐츠 */
+.main-content {
+  display: flex;
+  flex-direction: column;
+  padding: 6rem 1.5rem 6rem;
+  font-family: 'NanumSquareRound', sans-serif;
+}
+
+.main-content .title {
+  margin-bottom: 70px;
+  font-size: 1.25rem;
+  font-weight: 500;
+  text-align: center;
+  color: #4a4a4a;
+  font-family: 'UhBeeSehyun', sans-serif;
+}
+
+/* 스탬프 영역 */
+.stamp-container {
+  position: relative;
+  width: 390px;
+  height: 520px;
+  margin: 0 auto;
+}
+
+.stamp-container .stamp {
+  position: absolute;
+  width: 95px;
+  height: 95px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.stamp-container .stamp img {
+  width: 100%;
+  height: 100%;
+}
+
+/* 할 일 표시 영역 */
+.task-container {
+  margin-top: -80px;
+  margin-bottom: 3rem;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+.task-container .task-row {
+  display: flex;
+  gap: 0.75rem;
+  width: 100%;
+  max-width: 290px;
+}
+
+.task-container .task-row .task {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex: 1;
+  height: 40px;
+  padding: 0 1rem;
+  background-color: white;
+  border-radius: 17px;
+}
+
+.task-container .task-row .task span {
+  font-size: 0.875rem;
+  font-family: 'NanumSquareRound', sans-serif;
+  color: var(--task-color, #b3b3b3);
+}
+
+.task-container .task-row .task img {
+  width: 20px;
+  height: 20px;
+  filter: var(--task-filter, grayscale(100%));
+}
+
+/* 아코 이미지 영역 */
+.ako-image-container {
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-top: 2.5rem;
+}
+
+.ako-image-container .ako-status {
+  display: flex;
+  align-items: center;
+  margin-bottom: 0.5rem;
+}
+
+.ako-image-container .ako-status img {
+  width: 32px;
+  height: 32px;
+  margin-right: 0.5rem;
+}
+
+.ako-image-container .ako-status p {
+  font-size: 0.875rem;
+  color: #757575;
+  font-family: 'NanumSquareRound', sans-serif;
+}
+
+.ako-image-container .ako-image {
+  width: 256px;
+  height: 256px;
+  margin: 0 auto;
+}
diff --git a/src/views/mainpage/MainpageStyled.js b/src/views/mainpage/MainpageStyled.js
deleted file mode 100644
index 47b09da..0000000
--- a/src/views/mainpage/MainpageStyled.js
+++ /dev/null
@@ -1,132 +0,0 @@
-import styled from 'vue-styled-components'
-
-// 외부 컨테이너
-export const PageContainer = styled.div`
-  min-height: 100vh;
-  background-color: #fff9f2;
-  font-family: 'NanumSquareRound', sans-serif;
-  display: flex;
-  justify-content: center;
-`
-
-// 모바일 컨테이너
-export const MobileContainer = styled.div`
-  width: 395px;
-  min-width: 340px;
-  background-color: #fae8da;
-  min-height: 100vh;
-  position: relative;
-  overflow-y: auto;
-`
-
-// 메인 컨텐츠
-export const MainContent = styled.main`
-  display: flex;
-  flex-direction: column;
-  padding: 6rem 1.5rem 6rem;
-  font-family: 'NanumSquareRound', sans-serif;
-
-  .title {
-    margin-bottom: 70px;
-    font-size: 1.25rem;
-    font-weight: 500;
-    text-align: center;
-    color: #4a4a4a;
-    font-family: 'UhBeeSehyun', sans-serif;
-  }
-`
-
-// 스탬프 영역
-export const StampContainer = styled.div`
-  position: relative;
-  width: 390px;
-  height: 520px;
-  margin: 0 auto;
-
-  .stamp {
-    position: absolute;
-    width: 95px;
-    height: 95px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-
-    img {
-      width: 100%;
-      height: 100%;
-    }
-  }
-`
-
-// 할 일 표시 영역
-export const TaskContainer = styled.div`
-  margin-top: -80px;
-  margin-bottom: 3rem;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 0.75rem;
-
-  .task-row {
-    display: flex;
-    gap: 0.75rem;
-    width: 100%;
-    max-width: 290px;
-
-    .task {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      flex: 1;
-      height: 40px;
-      padding: 0 1rem;
-      background-color: white;
-      border-radius: 17px;
-
-      span {
-        font-size: 0.875rem;
-        font-family: 'NanumSquareRound', sans-serif;
-        color: ${(props) => (props.completed ? '#FF7F00' : '#B3B3B3')};
-      }
-
-      img {
-        width: 20px;
-        height: 20px;
-        filter: ${(props) => (props.completed ? 'none' : 'grayscale(100%)')};
-      }
-    }
-  }
-`
-
-// 아코 이미지 영역
-export const AkoImageContainer = styled.div`
-  text-align: center;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  margin-top: 2.5rem;
-
-  .ako-status {
-    display: flex;
-    align-items: center;
-    margin-bottom: 0.5rem;
-
-    img {
-      width: 32px;
-      height: 32px;
-      margin-right: 0.5rem;
-    }
-
-    p {
-      font-size: 0.875rem;
-      color: #757575;
-      font-family: 'NanumSquareRound', sans-serif;
-    }
-  }
-
-  .ako-image {
-    width: 256px;
-    height: 256px;
-    margin: 0 auto;
-  }
-`
diff --git a/src/views/mainpage/MainpageView.vue b/src/views/mainpage/MainpageView.vue
index 3a29fc1..eab74ce 100644
--- a/src/views/mainpage/MainpageView.vue
+++ b/src/views/mainpage/MainpageView.vue
@@ -1,14 +1,16 @@
 <template>
-  <PageContainer>
-    <MobileContainer>
+  <div class="page-container">
+    <div class="mobile-container" style="margin-top: 20px">
       <MainHeader />
 
       <!-- 본문 내용 -->
-      <MainContent>
-        <h1 class="title">오늘도 우리 아코는 한 걸음씩!</h1>
+      <div class="main-content">
+        <h1 class="title" style="font-family: 'UhBeeSe_hyun', sans-serif">
+          오늘도 우리 아코는 한 걸음씩!
+        </h1>
 
         <!-- 스탬프 영역 -->
-        <StampContainer>
+        <div class="stamp-container">
           <svg viewBox="0 0 390 520" class="path">
             <path
               d="M 60 25 L 195 25 Q 330 25, 330 107.5 Q 330 190, 195 190 L 60 190 A 75 75 0 0 0 60 340 L 270 340"
@@ -32,15 +34,19 @@
               alt="stamp"
             />
           </div>
-        </StampContainer>
+        </div>
 
         <!-- 할 일 표시 -->
-        <TaskContainer>
+        <div class="task-container">
           <div class="task-row">
             <div
               v-for="(task, index) in tasks.slice(0, 2)"
               :key="index"
               class="task"
+              :style="{
+                '--task-color': task.completed ? '#FF7F00' : '#B3B3B3',
+                '--task-filter': task.completed ? 'none' : 'grayscale(100%)'
+              }"
             >
               <span>{{ task.name }}</span>
               <img :src="getTaskIcon(task.name)" />
@@ -51,15 +57,19 @@
               v-for="(task, index) in tasks.slice(2)"
               :key="index"
               class="task"
+              :style="{
+                '--task-color': task.completed ? '#FF7F00' : '#B3B3B3',
+                '--task-filter': task.completed ? 'none' : 'grayscale(100%)'
+              }"
             >
               <span>{{ task.name }}</span>
               <img :src="getTaskIcon(task.name)" />
             </div>
           </div>
-        </TaskContainer>
+        </div>
 
         <!-- 아코 이미지 -->
-        <AkoImageContainer>
+        <div class="ako-image-container">
           <div class="ako-status">
             <img
               src="@/assets/Icons/akoming/mainpage/minielephanticon.svg"
@@ -68,23 +78,15 @@
             <p>토실토실 아코가 자라는 중</p>
           </div>
           <img :src="akoImage" alt="아코 이미지" class="ako-image" />
-        </AkoImageContainer>
-      </MainContent>
+        </div>
+      </div>
 
       <MainFooter />
-    </MobileContainer>
-  </PageContainer>
+    </div>
+  </div>
 </template>
 
 <script setup>
-import {
-  PageContainer,
-  MobileContainer,
-  MainContent,
-  StampContainer,
-  TaskContainer,
-  AkoImageContainer
-} from './MainpageStyled.js'
 import { ref, onMounted } from 'vue'
 import axios from 'axios'
 import MainHeader from '@/components/layout/Header.vue'
@@ -105,14 +107,14 @@ const tasks = ref([
 // 각 퀘스트의 상태를 받아와서 tasks에 업데이트하는 함수
 const fetchQuestStatus = async () => {
   try {
-    const userId = 'user-id' // 실제 사용자 ID로 설정해야 함
+    const userId = 'user-id'
     const response = await axios.get(`/api/quests/${userId}`)
     const { quest1, quest2, quest3, quest4 } = response.data
 
-    tasks.value[0].completed = quest1 // 아코밍 출석
-    tasks.value[1].completed = quest2 // 아코자국
-    tasks.value[2].completed = quest3 // 댓글 남기기
-    tasks.value[3].completed = quest4 // 아코폴리오
+    tasks.value[0].completed = quest1
+    tasks.value[1].completed = quest2
+    tasks.value[2].completed = quest3
+    tasks.value[3].completed = quest4
   } catch (error) {
     console.error('퀘스트 상태를 가져오는 중 오류 발생:', error)
   }
@@ -132,18 +134,18 @@ const stamps = ref([
 // 각 스탬프의 상태를 받아와서 stamps에 업데이트하는 함수
 const fetchStampsStatus = async () => {
   try {
-    const userId = 'user-id' // 실제 사용자 ID로 설정해야 함
+    const userId = 'user-id'
     const response = await axios.get(`/api/quests/${userId}`)
     const { stamp1, stamp2, stamp3, stamp4, stamp5, stamp6, stamp7 } =
       response.data
 
-    stamps.value[0].completed = stamp1 // 스탬프 A
-    stamps.value[1].completed = stamp2 // 스탬프 K
-    stamps.value[2].completed = stamp3 // 스탬프 O
-    stamps.value[3].completed = stamp4 // 스탬프 M
-    stamps.value[4].completed = stamp5 // 스탬프 I
-    stamps.value[5].completed = stamp6 // 스탬프 N
-    stamps.value[6].completed = stamp7 // 스탬프 G
+    stamps.value[0].completed = stamp1
+    stamps.value[1].completed = stamp2
+    stamps.value[2].completed = stamp3
+    stamps.value[3].completed = stamp4
+    stamps.value[4].completed = stamp5
+    stamps.value[5].completed = stamp6
+    stamps.value[6].completed = stamp7
   } catch (error) {
     console.error('스탬프 상태를 가져오는 중 오류 발생:', error)
   }
@@ -170,11 +172,11 @@ const setElephantIconByLevel = async () => {
       akoImage.value = elephantIcons[level - 1]
     } else {
       console.warn('유효한 level 값이 아닙니다:', level)
-      akoImage.value = elephantIcons[0] // 기본 이미지로 설정
+      akoImage.value = elephantIcons[0]
     }
   } catch (error) {
     console.error('아코 이미지를 가져오는 중 오류 발생:', error)
-    akoImage.value = elephantIcons[0] // 오류 시 기본 이미지로 설정
+    akoImage.value = elephantIcons[0]
   }
 }
 
@@ -205,7 +207,9 @@ const getTaskIcon = (taskName) => {
 // onMounted에서 호출하여 초기 데이터 로드
 onMounted(() => {
   fetchQuestStatus()
-  fetchStampsStatus() // 스탬프 상태도 불러오기
+  fetchStampsStatus()
   setElephantIconByLevel()
 })
 </script>
+
+<style scoped src="./MainpageStyled.css"></style>
