diff --git a/hwe/scss/map.scss b/hwe/scss/map.scss
index 26d500ba..178436a7 100644
--- a/hwe/scss/map.scss
+++ b/hwe/scss/map.scss
@@ -1,3 +1,5 @@
+@charset 'utf-8';
+
 .map_title_tooltiptext .tooltip-inner {
   max-width: 220px;
   width: 220px;
diff --git a/hwe/ts/PageFront.vue b/hwe/ts/PageFront.vue
index 465dc2ff..020e1109 100644
--- a/hwe/ts/PageFront.vue
+++ b/hwe/ts/PageFront.vue
@@ -18,34 +18,55 @@
           <div class="commonToolbar">툴바?</div>
           <div class="scenarioName">시나리오</div>
           <div v-if="frontInfo" class="gameInfo">
-            <div class="subScenarioName">{{globalInfo.scenarioText}}</div>
-            <div class="subNPCType">NPC 수, 상성: {{globalInfo.extendedGeneral?'확장':'표준'}} {{globalInfo.isFiction?'가상':'사실'}}</div>
-            <div class="subNPCMode">NPC선택: {{['불가능','가능','선택 생성'][globalInfo.npcMode]}}</div>
-            <div class="subTournamentMode">토너먼트: 경기당 {{calcTournamentTerm(globalInfo.turnterm)}}분</div>
+            <div class="subScenarioName">{{ globalInfo.scenarioText }}</div>
+            <div class="subNPCType">
+              NPC 수, 상성: {{ globalInfo.extendedGeneral ? "확장" : "표준" }}
+              {{ globalInfo.isFiction ? "가상" : "사실" }}
+            </div>
+            <div class="subNPCMode">NPC선택: {{ ["불가능", "가능", "선택 생성"][globalInfo.npcMode] }}</div>
+            <div class="subTournamentMode">토너먼트: 경기당 {{ calcTournamentTerm(globalInfo.turnterm) }}분</div>
             <div class="subOtherSetting">기타 설정: (TODO)자율행동[내정, 훈련/사기진작, 사령턴, 24시간 유효]</div>
-            <div class="subYearMonth">현재: {{globalInfo.year}}年 {{globalInfo.month}}月 ({{globalInfo.turnterm}}분 턴 서버)</div>
-            <div class="subOnlineUserCnt">전체 접속자 수: {{globalInfo.onlineUserCnt.toLocaleString()}}명</div>
-            <div class="subAPILimit">턴당 갱신횟수: {{globalInfo.apiLimit.toLocaleString()}}회</div>
+            <div class="subYearMonth">
+              현재: {{ globalInfo.year }}年 {{ globalInfo.month }}月 ({{ globalInfo.turnterm }}분 턴 서버)
+            </div>
+            <div class="subOnlineUserCnt">전체 접속자 수: {{ globalInfo.onlineUserCnt.toLocaleString() }}명</div>
+            <div class="subAPILimit">턴당 갱신횟수: {{ globalInfo.apiLimit.toLocaleString() }}회</div>
             <div class="subGeneralCnt">
               등록 장수: 유저
-              {{globalInfo.genCount.toLocaleString()}} / {{globalInfo.generalCntLimit.toLocaleString()}}
+              {{ globalInfo.genCount.toLocaleString() }} / {{ globalInfo.generalCntLimit.toLocaleString() }}
               + NPC TODO:NPC Cnt 명
             </div>
             <div class="subTournamentState">TODO: tournament Text</div>
-            <div class="subLastExecuted" :style="{color:serverLocked?'magenta':'cyan'}">동작 시각: {{formatTime(lastExecuted).substring(5)}}</div>
-            <div v-if="globalInfo.auctionCount" class="subAuctionState" style="color:cyan">{{globalInfo.auctionCount.toLocaleString()}}건 거래 진행중</div>
-            <div v-else class="subAcutionState" style="color:magenta">진행중인 거래 없음</div>
-            <div v-if="globalInfo.lastVote" class="subVoteState">
-              <span style="color:cyan">설문 진행 중: </span><span>{{globalInfo.lastVote.title}}</span>
+            <div class="subLastExecuted" :style="{ color: serverLocked ? 'magenta' : 'cyan' }">
+              동작 시각: {{ formatTime(lastExecuted).substring(5) }}
             </div>
-            <div v-else class="subVoteState" style="color:magenta">진행중인 설문 없음</div>
+            <div v-if="globalInfo.auctionCount" class="subAuctionState" style="color: cyan">
+              {{ globalInfo.auctionCount.toLocaleString() }}건 거래 진행중
+            </div>
+            <div v-else class="subAcutionState" style="color: magenta">진행중인 거래 없음</div>
+            <div v-if="globalInfo.lastVote" class="subVoteState">
+              <span style="color: cyan">설문 진행 중: </span><span>{{ globalInfo.lastVote.title }}</span>
+            </div>
+            <div v-else class="subVoteState" style="color: magenta">진행중인 설문 없음</div>
           </div>
-          <div class="onlineNations">접속중인 국가: {{globalInfo.onlineNations}}</div>
+          <div class="onlineNations">접속중인 국가: {{ globalInfo.onlineNations }}</div>
           <div class="nationNotice">국가 방침</div>
           <div>접속자</div>
           <div class="d-grid"><BButton @click="tryRefresh">갱신</BButton></div>
           <!-- TODO: 운영자 툴바는 어디에?-->
-          <div class="mapView">지도</div>
+          <div class="mapView">
+            <MapViewer
+              v-if="map"
+              :serverNick="serverNick"
+              :serverID="serverID"
+              :mapName="unwrap(gameConstStore?.gameConst.mapName)"
+              :isDetailMap="true"
+              :cityPosition="cityPosition"
+              :imagePath="imagePath"
+              :formatCityInfo="formatCityInfoText"
+              :mapData="map"
+            />
+          </div>
           <div class="reservedCommandZone">예턴</div>
           <div v-if="frontInfo" class="cityInfo">
             <CityBasicCard :city="frontInfo.city" />
@@ -86,7 +107,14 @@
             </template>
           </div>
           <div class="commonToolbar">툴바?</div>
-          <MessagePanel v-if="generalInfo" :generalID="generalInfo.no" :generalName="generalInfo.name" :nationID="generalInfo.nation" :permissionLevel="generalInfo.permission" ref="msgPanel" />
+          <MessagePanel
+            v-if="generalInfo"
+            :generalID="generalInfo.no"
+            :generalName="generalInfo.name"
+            :nationID="generalInfo.nation"
+            :permissionLevel="generalInfo.permission"
+            ref="msgPanel"
+          />
           <div class="commonToolbar">툴바?</div>
         </main>
       </BContainer>
@@ -106,6 +134,10 @@ declare const staticValues: {
   mapName: string;
   unitSet: string;
 };
+
+declare const getCityPosition: () => CityPositionMap;
+declare const formatCityInfo: (city: MapCityParsedRaw) => MapCityParsed;
+
 </script>
 <script lang="ts" setup>
 import { BContainer, BButton, useToast } from "bootstrap-vue-3";
@@ -124,9 +156,10 @@ import NationBasicCard from "./components/NationBasicCard.vue";
 import GeneralBasicCard from "./components/GeneralBasicCard.vue";
 import MessagePanel from "./components/MessagePanel.vue";
 import type { GeneralListItemP1 } from "./defs/API/Nation";
-import type { NationStaticItem } from "./defs";
+import type { MapResult, NationStaticItem } from "./defs";
 import { formatTime } from "./util/formatTime";
 import { calcTournamentTerm } from "./utilGame";
+import MapViewer, { type CityPositionMap, type MapCityParsed, type MapCityParsedRaw } from "./components/MapViewer.vue";
 
 const { serverName, serverNick, serverID } = staticValues;
 
@@ -150,7 +183,6 @@ let responseLock = false;
 const msgPanel = ref<InstanceType<typeof MessagePanel>>();
 
 async function tryRefresh() {
-
   msgPanel.value?.tryRefresh();
 
   if (responseLock) {
@@ -225,6 +257,7 @@ watch(refreshCounter, async () => {
   }
   try {
     recordLock = true;
+
     const response = await SammoAPI.Global.GetRecentRecord({
       lastGeneralRecordID: lastGeneralRecordID.value,
       lastWorldHistoryID: lastWorldHistoryID.value,
@@ -294,8 +327,8 @@ watch(refreshCounter, async () => {
 });
 
 const frontInfo = ref<GetFrontInfoResponse>();
-const globalInfo = ref<GetFrontInfoResponse['global']>({} as GetFrontInfoResponse['global'])
-const generalInfo = ref<GetFrontInfoResponse['general']>();
+const globalInfo = ref<GetFrontInfoResponse["global"]>({} as GetFrontInfoResponse["global"]);
+const generalInfo = ref<GetFrontInfoResponse["general"]>();
 const nationStaticInfo = ref<NationStaticItem>();
 
 let generalInfoLock = false;
@@ -338,6 +371,27 @@ watch(refreshCounter, async () => {
     });
   }
 });
+
+const map = ref<MapResult>();
+
+const cityPosition = getCityPosition();
+const formatCityInfoText = formatCityInfo;
+const imagePath = window.pathConfig.gameImage;
+
+watch(refreshCounter, async () => {
+  try {
+    map.value = await SammoAPI.Global.GetMap({
+      neutralView: 0,
+      showMe: 1,
+    });
+  } catch (e) {
+    console.error(e);
+    toasts.danger({
+      title: "지도 갱신 실패",
+      body: `${e}`,
+    });
+  }
+});
 </script>
 <style lang="scss" scoped>
 @import "@scss/common/break_500px.scss";
diff --git a/hwe/v_front.php b/hwe/v_front.php
index 0af1d43e..af0578b4 100644
--- a/hwe/v_front.php
+++ b/hwe/v_front.php
@@ -18,6 +18,7 @@ Session::requireGameLogin()->setReadOnly();
 //TODO: 국가정보 받아오기
 
 //TODO: 시나리오 정보는 gameConst 받아올때 가져오기
+$mapName = GameConst::$mapName;
 
 ?>
 <!DOCTYPE html>
@@ -38,6 +39,7 @@ Session::requireGameLogin()->setReadOnly();
         ]
     ], false) ?>
     <?= WebUtil::printJS('../d_shared/common_path.js') ?>
+    <?= WebUtil::printJS("js/map/theme_{$mapName}.js") ?>
     <?= WebUtil::printCSS('../d_shared/common.css') ?>
     <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css" />
     <?= WebUtil::printDist('vue', 'v_front', true) ?>