diff --git a/package.json b/package.json
index a26079e..8a31dfd 100644
--- a/package.json
+++ b/package.json
@@ -3,7 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "serve": "vue-cli-service serve --port 3000",
+    "serve": "vue-cli-service serve --host 0.0.0.0 --port 3000",
     "build": "vue-cli-service build",
     "lint": "vue-cli-service lint"
   },
diff --git a/src/assets/img/backBtn.png b/src/assets/img/backBtn.png
new file mode 100644
index 0000000..425206e
Binary files /dev/null and b/src/assets/img/backBtn.png differ
diff --git a/src/assets/img/backBtnWhite.png b/src/assets/img/backBtnWhite.png
new file mode 100644
index 0000000..8a016f0
Binary files /dev/null and b/src/assets/img/backBtnWhite.png differ
diff --git a/src/assets/img/beodomiLogoText.png b/src/assets/img/beodomiLogoText.png
new file mode 100644
index 0000000..6878a2c
Binary files /dev/null and b/src/assets/img/beodomiLogoText.png differ
diff --git a/src/assets/img/wholeTextIcon.png b/src/assets/img/wholeTextIcon.png
new file mode 100644
index 0000000..6304a68
Binary files /dev/null and b/src/assets/img/wholeTextIcon.png differ
diff --git a/src/assets/img/wholeTextIconYellow.png b/src/assets/img/wholeTextIconYellow.png
new file mode 100644
index 0000000..c0997ba
Binary files /dev/null and b/src/assets/img/wholeTextIconYellow.png differ
diff --git a/src/assets/scss/_variables.scss b/src/assets/scss/_variables.scss
index 55de0a7..76b9c71 100644
--- a/src/assets/scss/_variables.scss
+++ b/src/assets/scss/_variables.scss
@@ -1,4 +1,4 @@
-$primary: #082220;
+$primary: #152827;
 $secondary: #ffdb1d;
 $lightGray: #f3f3f3;
 $gray: #d9d9d9;
diff --git a/src/components/NavComp.vue b/src/components/NavComp.vue
new file mode 100644
index 0000000..f268dc2
--- /dev/null
+++ b/src/components/NavComp.vue
@@ -0,0 +1,129 @@
+<template>
+  <div class="nav">
+    <div class="wholeText" ref="htmlElement"></div>
+    <img
+      class="backBtn"
+      @click="goBack"
+      v-if="pageName !== 'main'"
+      :src="theme === 'light' ? require('@/assets/img/backBtn.png') : require('@/assets/img/backBtnWhite.png')"
+      alt="뒤로가기 버튼"
+      height="15"
+    />
+    <img v-if="pageName === 'main'" class="beodomi" src="@/assets/img/beodomiLogoText.png" alt="버도미 로고와 텍스트" width="89" />
+    <span v-else class="beodomi">{{ title }}</span>
+    <img
+      @click="readWholeText"
+      class="wholeBtn"
+      :src="theme === 'dark' ? require('@/assets/img/wholeTextIcon.png') : require('@/assets/img/wholeTextIconYellow.png')"
+      alt="전체 읽어주는 버튼"
+      height="20"
+    />
+  </div>
+</template>
+
+<script>
+  import {computed, ref} from 'vue';
+  import {useRouter} from 'vue-router';
+  export default {
+    name: 'NavComp',
+    props: {
+      content: {
+        type: String,
+        default: '',
+      },
+      backgroundColor: {
+        type: String,
+        default: '#152827',
+      },
+      btnBackgroundColor: {
+        type: String,
+        default: '#FFDB1D',
+      },
+      color: {
+        type: String,
+        default: 'white',
+      },
+      pageName: {
+        type: String,
+        default: '',
+      },
+      title: {
+        type: String,
+        default: '',
+      },
+      theme: {
+        type: String,
+        default: 'dark',
+      },
+    },
+    setup(props) {
+      const htmlElement = ref(null);
+
+      // 전체 읽어주는 버튼 클릭 이벤트
+      const readWholeText = async () => {
+        console.log(props.content);
+        htmlElement.value.setAttribute('aria-live', 'assertive');
+        htmlElement.value.innerText = props.content;
+
+        setTimeout(function () {
+          htmlElement.value.removeAttribute('aria-live');
+          htmlElement.value.innerText = '';
+        }, 1);
+      };
+
+      console.log(props.btnBackgroundColor);
+
+      // 뒤로 가기 버튼 클릭 이벤트
+      const router = useRouter();
+      const goBack = () => {
+        router.go(-1);
+      };
+
+      return {
+        htmlElement,
+        readWholeText,
+        goBack,
+      };
+    },
+  };
+</script>
+
+<style lang="scss" scoped>
+  .nav {
+    height: 60px;
+    position: relative;
+    border-bottom: 2px solid #8d8d8d;
+    background-color: v-bind(backgroundColor);
+
+    //뒤로가기 버튼
+    .backBtn {
+      position: absolute;
+      top: 50%;
+      left: 25px;
+      transform: translate(-50%, -50%);
+    }
+
+    .beodomi {
+      font-weight: 700;
+      font-size: 20px;
+      line-height: 24px;
+
+      color: v-bind(color);
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+    }
+
+    .wholeBtn {
+      position: absolute;
+      top: 50%;
+      right: 0;
+      transform: translate(-50%, -50%);
+      background-color: v-bind(btnBackgroundColor);
+      border-radius: 5px;
+      border: none;
+      padding: 6px 12px;
+    }
+  }
+</style>
diff --git a/src/store/passsengerStore.js b/src/store/passsengerStore.js
index 862b28f..ca28b62 100644
--- a/src/store/passsengerStore.js
+++ b/src/store/passsengerStore.js
@@ -11,12 +11,9 @@ export const usePassengerStore = defineStore('passenger', () => {
    */
   function announcePageContent(content, htmlElement) {
     htmlElement.setAttribute('aria-live', 'assertive');
-    htmlElement.innerText = content;
-    console.log(content);
 
     setTimeout(function () {
-      htmlElement.removeAttribute(htmlElement);
-      htmlElement.innerText('');
+      htmlElement.removeAttribute('aria-live');
     }, 100);
   }
   return {
diff --git a/src/views/passenger/BusSearchView.vue b/src/views/passenger/BusSearchView.vue
index 93bad3d..c38cf23 100644
--- a/src/views/passenger/BusSearchView.vue
+++ b/src/views/passenger/BusSearchView.vue
@@ -1,19 +1,26 @@
 <template>
-  <div class="bus-search" id="container">
-    <ToggleComp style="margin-top: 40px" @getSearchType="getSearchType" />
-    <template v-if="searchType == 'voice'">
-      <h2 class="title">{{ title }}</h2>
-      <VoiceComp @click="voice_result()" style="margin-top: 40px" />
-      <div id="contentDiv" :aria-live="ariaLive" :aria-hidden="ariaHidden">
-        {{ pageContent }}
-      </div>
-    </template>
-    <template v-else>
-      <div class="form-control">
-        <input type="value" required="" placeholder="검색어를 입력하세요" @keyup.enter="search_keyboard" v-model="input" />
-        <img src="@/assets/img/searchBtn.png" alt="역에서 탑승가능한 버스를 보는 버튼" width="32" height="32" style="margin-left: 20px" />
-      </div>
-    </template>
+  <div>
+    <NavComp
+      :content="wholeText"
+      :backgroundColor="searchType === 'voice' ? 'white' : '#152827'"
+      :btnBackgroundColor="searchType === 'voice' ? '#152827' : '#FFDB1D'"
+      :color="searchType === 'voice' ? 'black' : '#FFDB1D'"
+      :theme="searchType === 'voice' ? 'light' : 'dark'"
+      title="버스 노선 검색"
+    />
+    <div class="bus-search" id="container">
+      <ToggleComp style="margin-top: 40px" @getSearchType="getSearchType" />
+      <template v-if="searchType == 'voice'">
+        <h2 class="title">{{ title }}</h2>
+        <VoiceComp @click="voice_result()" style="margin-top: 40px" />
+      </template>
+      <template v-else>
+        <div class="form-control">
+          <input type="value" required="" placeholder="검색어를 입력하세요" @keyup.enter="search_keyboard" v-model="input" />
+          <img src="@/assets/img/searchBtn.png" alt="역에서 탑승가능한 버스를 보는 버튼" width="32" height="32" style="margin-left: 20px" />
+        </div>
+      </template>
+    </div>
   </div>
 </template>
 
@@ -22,14 +29,19 @@
   import VoiceComp from '@/components/VoiceComp.vue';
   import ToggleComp from '@/components/ToggleComp.vue';
   import {useRouter} from 'vue-router';
+  import NavComp from '@/components/NavComp.vue';
 
   export default {
     name: 'BusSearchView',
     components: {
       VoiceComp,
       ToggleComp,
+      NavComp,
     },
     setup() {
+      // 읽어줄 전체 텍스트
+      const wholeText = ref('버튼을 누른 후 검색어를 말해주세요. 음성 검색 버튼 ');
+
       const title = ref('버튼을 누른 후 검색어를 말해주세요');
       const input = ref('');
       const searchType = ref('voice');
@@ -59,39 +71,14 @@
           }, 3000);
         };
       };
-
-      // 전체 읽어주기 기능
-      const ariaLive = ref('polite');
-      const ariaHidden = ref('');
-      const pageContent = ref('');
-
-      const readWholeText = () => {
-        const contentElement = document.getElementById('container');
-        const content = contentElement.innerText;
-
-        // 읽어주기 전 잠시 숨김처리
-        ariaHidden.value = true;
-
-        // 스크린 리더에게 전체 내용을 읽어달라는 요청
-        ariaLive.value = 'assertive';
-        pageContent.value = content;
-
-        console.log(pageContent.value);
-        // pageContent.value = '';
-
-        // 읽기가 완료된 후 다시 숨김처리 해제
-        setTimeout(() => {
-          ariaLive.value = 'polite';
-          ariaHidden.value = '';
-        }, 100);
-      };
-
       const getSearchType = value => {
         searchType.value = value;
         if (searchType.value == 'voice') {
           bg_color.value = '#fff';
+          wholeText.value = '음성으로 버스 노선 검색. 버튼을 누른 후 검색어를 말해주세요. 음성 검색 버튼 ';
         } else {
           bg_color.value = '#082220';
+          wholeText.value = '키보드로 버스 노선 검색. 검색어를 입력하세요.';
         }
       };
 
@@ -103,15 +90,12 @@
       };
 
       return {
+        wholeText,
         title,
         searchType,
         input,
         bg_color,
         voice_result,
-        ariaLive,
-        ariaHidden,
-        pageContent,
-        readWholeText,
         getSearchType,
         search_keyboard,
       };
diff --git a/src/views/passenger/FavoriteStopView.vue b/src/views/passenger/FavoriteStopView.vue
index 153a7cb..c160cf1 100644
--- a/src/views/passenger/FavoriteStopView.vue
+++ b/src/views/passenger/FavoriteStopView.vue
@@ -1,17 +1,19 @@
 <template>
-  <div class="favorite-stop">
-    <div class="none-favorite" v-if="false">
-      <h1>사용한 승차벨 &nbsp; 이력이 없습니다.</h1>
-      <button class="search-btn" @click="goBusSearchView">
-        <span class="text">정류장 검색하기</span>
-        <span class="icon">&gt;</span>
-      </button>
-    </div>
-    <div class="favorite" v-else>
-      <h1>승차벨 사용 정류장</h1>
-      <div class="stops">
-        <div class="stop" v-for="i in [1, 2, 3, 4, 5, 6, 7]" :key="i">
-          {{ i }}
+  <div>
+    <NavComp :content="wholeText" title="승차벨 사용 이력" />
+
+    <div class="favorite-stop">
+      <div class="none-favorite" v-if="true">
+        <h1>이력이 없습니다.</h1>
+        <button class="search-btn" @click="goBusSearchView">
+          <span class="text">버스 노선 검색</span>
+        </button>
+      </div>
+      <div class="favorite" v-else>
+        <div class="stops">
+          <div class="stop" v-for="i in [1, 2, 3, 4, 5, 6, 7]" :key="i">
+            {{ i }}
+          </div>
         </div>
       </div>
     </div>
@@ -20,8 +22,12 @@
 
 <script>
   import {useRouter} from 'vue-router';
+  import NavComp from '@/components/NavComp.vue';
+  import {ref} from 'vue';
+
   export default {
     name: 'FavoriteStopView',
+    components: {NavComp},
     setup() {
       const router = useRouter();
 
@@ -30,8 +36,17 @@
         router.push('/search');
       };
 
+      // TODO: 승차벨 사용 이력 받아오면 if문으로 지정
+      const wholeText = ref('');
+      // 승차벨 사용 이력이 없는 경우
+      // wholeText.value = '승차벨 사용 이력이 없습니다. 버스 노선 검색 버튼';
+
+      // 승차벨 사용 이력이 있는 경우
+      wholeText.value = '승차벨 사용 이력이 있습니다. 사용 이력 목록 조회';
+
       return {
         goBusSearchView,
+        wholeText,
       };
     },
   };
@@ -47,9 +62,7 @@
     margin-top: 50%;
 
     h1 {
-      display: flex;
-      align-items: center;
-
+      color: $white;
       width: 249px;
       font-weight: 700;
       font-size: 30px;
@@ -59,19 +72,19 @@
 
     // 정류장 검색 버튼
     .search-btn {
-      height: 106px;
-      background-color: $lightGray;
+      height: 140px;
+      background-color: $secondary;
       display: flex;
       justify-content: space-around;
       align-items: center;
       width: calc(100vw - 32px);
-      border-radius: 10px;
+      border-radius: 20px;
       border: none;
 
       .text {
         font-weight: 700;
-        font-size: 28px;
-        line-height: 34.16px;
+        font-size: 36px;
+        line-height: 22px;
       }
 
       .icon {
@@ -84,18 +97,11 @@
   // 사용한 승차벨 이력이 있는 경우
   .favorite {
     text-align: center;
-    margin-top: 105px;
+    margin-top: 32px;
     padding: 0px 16px;
 
-    h1 {
-      font-weight: 700;
-      font-size: 30px;
-      line-height: 48px;
-      margin-bottom: 31px;
-    }
-
     .stops {
-      height: calc(122px * 5);
+      height: calc(122px * 6);
       overflow: auto;
 
       .stop {
diff --git a/src/views/passenger/KeyboardSearchView.vue b/src/views/passenger/KeyboardSearchView.vue
index ddd1f8d..075feb9 100644
--- a/src/views/passenger/KeyboardSearchView.vue
+++ b/src/views/passenger/KeyboardSearchView.vue
@@ -1,5 +1,6 @@
 <template>
   <div>
+    <NavComp :content="wholeText" title="버스 노선 검색" />
     <div id="title">'{{ this.$route.params.keyword }}' 검색결과</div>
     <div class="order">
       <p @click="bus" class="bus_text">노 선</p>
@@ -28,20 +29,24 @@
 
 <script>
   import axios from '@/service/axios.js';
+  import NavComp from '@/components/NavComp.vue';
 
   export default {
     name: 'KeyboardSearchView',
+    components: {NavComp},
     data() {
       return {
         keyword: '',
         route_color: '#fff',
         station_color: '#ffdb1d',
         search_data: [],
+        wholeText: '',
       };
     },
     mounted() {
       console.log(this.$route.params.keyword);
       this.keyword = this.$route.params.keyword;
+      this.wholeText = `${this.$route.params.keyword} 검색 결과`;
       this.station();
     },
     methods: {
diff --git a/src/views/passenger/MainView.vue b/src/views/passenger/MainView.vue
index a58ae5f..2dd39a6 100644
--- a/src/views/passenger/MainView.vue
+++ b/src/views/passenger/MainView.vue
@@ -1,18 +1,26 @@
 <template>
-  <div class="main">
-    <button class="btn" @click="goSearchView">버스 노선 검색</button>
-    <button class="btn" @click="goFavoriteStopView">승차벨 사용 이력</button>
-    <button class="btn" @click="goNearStopView">가까운 정류장</button>
-    <button class="btn" @click="goBusDriverPageView">버스 기사 페이지</button>
+  <div>
+    <NavComp :content="wholeText" pageName="main" />
+
+    <div class="main">
+      <button class="btn" @click="goSearchView">버스 노선 검색</button>
+      <button class="btn" @click="goFavoriteStopView">승차벨 사용 이력</button>
+      <button class="btn" @click="goNearStopView">가까운 정류장</button>
+    </div>
   </div>
 </template>
 
 <script>
   import router from '@/router/index';
-
+  import NavComp from '@/components/NavComp.vue';
   export default {
     name: 'MainView',
+
+    components: {NavComp},
     setup() {
+      // 읽어줄 전체 텍스트
+      const wholeText = '버스 노선 검색 버튼   승차벨 사용 이력 버튼   가까운 정류장 버튼';
+
       // 버스 노선 검색 페이지로 이동
       const goSearchView = () => {
         router.push('/search');
@@ -28,16 +36,11 @@
         router.push('/nearStop');
       };
 
-      // 버스 기사 페이지로 이동
-      const goBusDriverPageView = () => {
-        router.push({name: 'driverCodeView'});
-      };
-
       return {
+        wholeText,
         goSearchView,
         goFavoriteStopView,
         goNearStopView,
-        goBusDriverPageView,
       };
     },
   };
@@ -47,20 +50,24 @@
   .main {
     display: flex;
     flex-direction: column;
-    height: 100vh;
+    height: calc(100vh - 70px);
     justify-content: center;
     font-family: 'KoddiUDOnGothic-Regular';
+    padding: 0px 16px;
 
     .btn {
-      height: 186px;
-      background-color: $primary;
-      color: $secondary;
-      font-size: 30px;
+      height: 140px;
+      width: 100%;
+      border-radius: 20px;
+      border: none;
+      background-color: $secondary;
+      color: $black;
+      font-size: 36px;
       font-weight: 700;
       line-height: 22px;
       text-align: center;
       letter-spacing: -0.408px;
-      margin-bottom: 6px;
+      margin-bottom: 32px;
     }
   }
 </style>
diff --git a/src/views/passenger/NearStopView.vue b/src/views/passenger/NearStopView.vue
index 6822f3b..fd0d98a 100644
--- a/src/views/passenger/NearStopView.vue
+++ b/src/views/passenger/NearStopView.vue
@@ -1,28 +1,32 @@
 <template>
-  <div class="near-stop">
-    <div class="scroll">
-      <div v-for="stop in stops" :key="stop.arsId">
-        <div id="route_container">
-          <!-- <div class="stops" >
+  <div>
+    <NavComp :content="wholeText" title="가까운 정류장" />
+
+    <div class="near-stop">
+      <div class="scroll">
+        <div v-for="stop in stops" :key="stop.arsId">
+          <div id="route_container">
+            <!-- <div class="stops" >
           <span class="stop-name">{{ stop.stationNm }}</span>
           <span class="stop-distance">{{ stop.dist }}m</span>
           <img src="@/assets/img/detailBtn.png" alt="역에서 탑승가능한 버스를 보는 버튼" width="31" />
         </div> -->
-          <div id="route_info" @click="showAvailableBus(stop)">
-            <div style="font-weight: 700">{{ stop.stationNm }}</div>
-            <div>{{ stop.dist }} m</div>
+            <div id="route_info" @click="showAvailableBus(stop)">
+              <div style="font-weight: 700">{{ stop.stationNm }}</div>
+              <div>{{ stop.dist }} m</div>
+            </div>
+            <img src="@/assets/img/busIcon.png" alt="역에서 탑승가능한 버스를 보는 버튼" width="31" />
           </div>
-          <img src="@/assets/img/busIcon.png" alt="역에서 탑승가능한 버스를 보는 버튼" width="31" />
-        </div>
-        <div class="available-bus" v-if="clickStop === stop.arsId">
-          <div class="display" @click="goStopBusListView(stop.arsId, stop.stationId)">
-            <div style="width: 100%">
-              <span class="title">탑승 가능 버스</span>
-              <div class="buses">
-                <span v-for="bus in buses" :key="bus.busRouteId">{{ bus.busRouteNm }} &nbsp;</span>
+          <div class="available-bus" v-if="clickStop === stop.arsId">
+            <div class="display" @click="goStopBusListView(stop.arsId, stop.stationId)">
+              <div style="width: 100%">
+                <span class="title">탑승 가능 버스</span>
+                <div class="buses">
+                  <span v-for="bus in buses" :key="bus.busRouteId">{{ bus.busRouteNm }} &nbsp;</span>
+                </div>
               </div>
+              <img src="@/assets/img/rightArrow.png" alt="역에서 탑승가능한 버스를 보는 버튼" width="31" />
             </div>
-            <img src="@/assets/img/rightArrow.png" alt="역에서 탑승가능한 버스를 보는 버튼" width="31" />
           </div>
         </div>
       </div>
@@ -34,9 +38,11 @@
   import router from '@/router';
   import {ref} from 'vue';
   import axios from 'axios';
+  import NavComp from '@/components/NavComp.vue';
 
   export default {
     name: 'testView',
+    components: {NavComp},
     setup() {
       const userLat = ref(0);
       const userLng = ref(0);
@@ -106,12 +112,16 @@
         });
       };
 
+      // 읽을 전체 text
+      const wholeText = '가까운 정류장 목록입니다.';
+
       return {
         stops,
         clickStop,
         buses,
         showAvailableBus,
         goStopBusListView,
+        wholeText,
       };
     },
   };