diff --git a/src/views/calendar/CalendarMainStyled.js b/src/views/calendar/CalendarMainStyled.css
similarity index 65%
rename from src/views/calendar/CalendarMainStyled.js
rename to src/views/calendar/CalendarMainStyled.css
index fe48de2..fb6468d 100644
--- a/src/views/calendar/CalendarMainStyled.js
+++ b/src/views/calendar/CalendarMainStyled.css
@@ -1,47 +1,45 @@
-import styled from 'vue-styled-components'
-
-// 전체 컨테이너
-export const PageContainer = styled.div`
+/* 전체 컨테이너 */
+.page-container {
   min-height: 100vh;
   background-color: #fff9f2;
   font-family: 'NanumSquareRound', sans-serif;
   display: flex;
   justify-content: center;
   position: relative;
-`
+}
 
-export const InnerContainer = styled.div`
+.inner-container {
   width: 395px;
   min-width: 340px;
   background-color: #fae8da;
   min-height: 100vh;
   position: relative;
   overflow-y: auto;
-`
+}
 
-// 메인 컨텐츠
-export const MainContent = styled.main`
+/* 메인 컨텐츠 */
+.main-content {
   display: flex;
   flex-direction: column;
   padding: 20px 1.5rem 6rem;
   margin-top: 30px;
-`
+}
 
-export const SectionTitle = styled.h2`
+.section-title {
   font-size: 1.25rem;
   font-weight: 500;
   color: #4a4a4a;
   margin-bottom: 0.5rem;
-`
+}
 
-export const MonthTitle = styled.h3`
+.month-title {
   font-size: 1.5rem;
   font-weight: bold;
   color: #4a4a4a;
-`
+}
 
-// 캘린더 관련 스타일
-export const CalendarContainer = styled.div`
+/* 캘린더 관련 스타일 */
+.calendar-container {
   background-color: #fae8da;
   border-radius: 0.5rem;
   padding: 1rem;
@@ -49,29 +47,29 @@ export const CalendarContainer = styled.div`
   display: flex;
   flex-direction: column;
   align-items: center;
-`
+}
 
-export const CalendarGrid = styled.div`
+.calendar-grid {
   display: grid;
   grid-template-columns: repeat(7, 1fr);
   gap: 1rem;
   text-align: center;
   margin-bottom: 1rem;
-`
+}
 
-export const CalendarDay = styled.span`
+.calendar-day {
   font-size: 0.875rem;
   color: #b3b3b3;
-`
+}
 
-export const CalendarWeek = styled.div`
+.calendar-week {
   display: flex;
   width: 100%;
   justify-content: space-between;
   margin-bottom: 0.25rem;
-`
+}
 
-export const DayButton = styled.button`
+.day-button {
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -81,18 +79,22 @@ export const DayButton = styled.button`
   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'};
-`
+  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;
+}
 
-// 학사 일정 팝업
-export const SchedulePopup = styled.div`
+/* 학사 일정 팝업 */
+.schedule-popup {
   position: fixed;
   bottom: 0;
   left: 0;
@@ -104,9 +106,10 @@ export const SchedulePopup = styled.div`
   max-height: 60vh;
   width: 395px;
   margin: 0 auto;
-`
+}
 
-export const LinkButton = styled.a`
+/* 링크 버튼 */
+.link-button {
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -122,8 +125,8 @@ export const LinkButton = styled.a`
   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;
-  }
-`
+.link-button:hover {
+  background-color: #f1cdb1;
+}
diff --git a/src/views/calendar/CalendarMainView.vue b/src/views/calendar/CalendarMainView.vue
index b327703..55bb0e6 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,
@@ -37,6 +22,7 @@ import {
 } from './CalendarMainScript.js'
 import MainHeader from '@/components/layout/Header.vue'
 import MainFooter from '@/components/layout/Footer.vue'
+import './CalendarMainStyled.css'
 
 onMounted(() => {
   currentDate.value = new Date()
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..3a247c8 100644
--- a/src/views/mainpage/MainpageView.vue
+++ b/src/views/mainpage/MainpageView.vue
@@ -1,14 +1,14 @@
 <template>
-  <PageContainer>
-    <MobileContainer>
+  <div class="page-container">
+    <div class="mobile-container">
       <MainHeader />
 
       <!-- 본문 내용 -->
-      <MainContent>
+      <div class="main-content">
         <h1 class="title">오늘도 우리 아코는 한 걸음씩!</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 +32,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 +55,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 +76,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 +105,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 +132,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 +170,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 +205,9 @@ const getTaskIcon = (taskName) => {
 // onMounted에서 호출하여 초기 데이터 로드
 onMounted(() => {
   fetchQuestStatus()
-  fetchStampsStatus() // 스탬프 상태도 불러오기
+  fetchStampsStatus()
   setElephantIconByLevel()
 })
 </script>
+
+<style src="./MainpageStyled.css"></style>