diff --git a/hwe/scss/history.scss b/hwe/scss/history.scss
new file mode 100644
index 00000000..e78a16eb
--- /dev/null
+++ b/hwe/scss/history.scss
@@ -0,0 +1,42 @@
+@import "./common/bootstrap5.scss";
+@import "./editor_component.scss";
+@import "./util.scss";
+
+@include media-1000px {
+  #container {
+      width: 1000px;
+      margin: 0 auto;
+      padding: 0;
+  }
+  .year-selector{
+    margin-left: 100%/24*5;
+  }
+
+  .map_position{
+    flex: 0 0 auto;
+    width: 700px;
+  }
+
+  .nation_position{
+    flex: 0 0 auto;
+    width: 300px;
+  }
+}
+
+@include media-500px {
+  #container {
+      width: 500px;
+      margin: 0 auto;
+      padding: 0;
+  }
+
+  .map_position{
+    flex: 0 0 auto;
+    width: 100%;
+  }
+
+  .nation_position{
+    flex: 0 0 auto;
+    width: 100%;
+  }
+}
diff --git a/hwe/ts/PageHistory.vue b/hwe/ts/PageHistory.vue
index 48c4f52a..223fba80 100644
--- a/hwe/ts/PageHistory.vue
+++ b/hwe/ts/PageHistory.vue
@@ -1,25 +1,53 @@
 <template>
-  <div>연감</div>
-  <div v-if="history">
-    있음
-    <div v-for="date of generateYearMonthList()" :key="date.yearMonth" @click="queryYearMonth = date.yearMonth">
-      {{ date.year }}년 {{ date.month }}월 {{ date.queried ? `선택` : "" }} {{ date.current ? "현재" : "" }}
+  <BContainer v-if="asyncReady" id="container" :toast="{ root: true }" class="bg0 pageHistory">
+    <TopBackBar title="연감" type="close"></TopBackBar>
+    <div class="center row mx-0 s-border-tb">
+      <div class="col-md-1 col-2 year-selector text-end align-self-center">연월 선택:</div>
+      <BButton class="col-md-1 col-2" @click="queryYearMonth -= 1">◀ 이전달</BButton>
+      <div class="col-md-3 col-5 d-grid">
+        <BFormSelect v-model="queryYearMonth" :options="generateYearMonthList()" />
+      </div>
+      <BButton class="col-md-1 col-2" @click="queryYearMonth += 1">다음달 ▶</BButton>
     </div>
-    <div>
-      <template v-for="(item, idx) in history.global_action" :key="idx">
-        <!-- eslint-disable-next-line vue/no-v-html -->
-        <span v-html="formatLog(item)"></span>
-        <br />
-      </template>
+    <div v-if="history" class="mx-0">
+      <div class="row g-0">
+        <div class="map_position">
+          <StaticMapTemplate
+            :server-nick="serverNick"
+            :serverID="queryServerID"
+            :map-name="unwrap(gameConstStore?.gameConst.mapName)"
+            :model-value="history.map"
+            :is-detail-map="true"
+            :city-position="cityPosition"
+            :format-city-info="formatCityInfoText"
+            :image-path="imagePath"
+          />
+        </div>
+        <div class="nation_position"><SimpleNationList :nations="history.nations" /></div>
+      </div>
+      <div class="world_history">
+        <div class="bg1 center s-border-tb"><b>중원 정세</b></div>
+        <div class="content">
+          <template v-for="(item, idx) in history.global_history" :key="idx">
+            <!-- eslint-disable-next-line vue/no-v-html -->
+            <span v-html="formatLog(item)"></span>
+            <br />
+          </template>
+        </div>
+      </div>
+      <div class="general_public_record">
+        <div class="bg1 center s-border-tb"><b>장수 동향</b></div>
+        <div class="content">
+          <template v-for="(item, idx) in history.global_action" :key="idx">
+            <!-- eslint-disable-next-line vue/no-v-html -->
+            <span v-html="formatLog(item)"></span>
+            <br />
+          </template>
+        </div>
+      </div>
     </div>
-    <div>
-      <template v-for="(item, idx) in history.global_history" :key="idx">
-        <!-- eslint-disable-next-line vue/no-v-html -->
-        <span v-html="formatLog(item)"></span>
-        <br />
-      </template>
-    </div>
-  </div>
+    <BottomBar type="close"></BottomBar>
+  </BContainer>
 </template>
 
 <script lang="ts">
@@ -34,50 +62,70 @@ declare const query: {
   yearMonth: number | null;
   serverID: string;
 };
+
+declare const getCityPosition: () => CityPositionMap;
+declare const formatCityInfo: (city: MapCityParsedRaw) => MapCityParsed;
 </script>
 <script lang="ts" setup>
-import { onMounted, ref, watch } from "vue";
+import { onMounted, provide, ref, watch } from "vue";
+import { BContainer, BButton, BFormSelect } from "bootstrap-vue-3";
+import TopBackBar from "@/components/TopBackBar.vue";
+import BottomBar from "@/components/BottomBar.vue";
 import type { HistoryObj } from "./defs/API/Global";
 import { SammoAPI } from "./SammoAPI";
 import { joinYearMonth } from "./util/joinYearMonth";
 import { parseYearMonth } from "./util/parseYearMonth";
 import { formatLog } from "./utilGame/formatLog";
+import SimpleNationList from "./components/SimpleNationList.vue";
+import StaticMapTemplate, { type CityPositionMap, type MapCityParsedRaw, type MapCityParsed} from "./components/StaticMapTemplate.vue";
+import { getGameConstStore, type GameConstStore } from "./GameConstStore";
+import { unwrap } from "@/util/unwrap";
 
 const queryYearMonth = ref<number>();
 const queryServerID = query.serverID;
+const serverNick = staticValues.serverNick;
 
 const lastYearMonth = ref(staticValues.lastYearMonth);
 const firstYearMonth = ref(staticValues.fisrtYearMonth);
 const currentYearMonth = ref(staticValues.currentYearMonth);
 
+const asyncReady = ref<boolean>(false);
+const gameConstStore = ref<GameConstStore>();
+provide("gameConstStore", gameConstStore);
+const storeP = getGameConstStore().then((store) => {
+  gameConstStore.value = store;
+});
+
+void Promise.all([storeP]).then(() => {
+  asyncReady.value = true;
+});
+
+const cityPosition = getCityPosition();
+const formatCityInfoText = formatCityInfo;
+const imagePath = window.pathConfig.gameImage;
+
 const history = ref<HistoryObj>();
 
-function* generateYearMonthList(): Generator<{
-  year: number;
-  month: number;
-  yearMonth: number;
-  current?: true;
-  queried: boolean;
-}> {
+function generateYearMonthList(): { text: string; value: number }[] {
+  const result: { text: string; value: number }[] = [];
   let yearMonth = firstYearMonth.value;
   while (yearMonth <= lastYearMonth.value) {
     const [year, month] = parseYearMonth(yearMonth);
-    yield {
-      year,
-      month,
-      yearMonth,
-      queried: queryYearMonth.value === yearMonth,
-    };
-    yearMonth++;
+    const info: string[] = [];
+    if (queryYearMonth.value === yearMonth) {
+      info.push("선택");
+    }
+    result.push({ text: `${year}년 ${month}월 ${info.length > 0 ? `(${info.join(", ")})` : ""}`, value: yearMonth });
+    yearMonth += 1;
   }
   const [year, month] = parseYearMonth(yearMonth);
-  yield {
-    year,
-    month,
-    yearMonth,
-    current: true,
-    queried: queryYearMonth.value === yearMonth,
-  };
+  const info: string[] = [];
+  if (queryYearMonth.value === yearMonth) {
+    info.push("선택");
+  }
+  info.push("현재");
+  result.push({ text: `${year}년 ${month}월 ${info.length > 0 ? `(${info.join(", ")})` : ""}`, value: yearMonth });
+  return result;
 }
 
 watch(queryYearMonth, async (yearMonth) => {
@@ -85,6 +133,15 @@ watch(queryYearMonth, async (yearMonth) => {
     return;
   }
 
+  if (yearMonth < firstYearMonth.value) {
+    queryYearMonth.value = firstYearMonth.value;
+    return;
+  }
+  if (yearMonth > lastYearMonth.value + 1) {
+    queryYearMonth.value = lastYearMonth.value + 1;
+    return;
+  }
+
   if (yearMonth > lastYearMonth.value) {
     try {
       const result = await SammoAPI.Global.GetCurrentHistory();
diff --git a/hwe/ts/v_history.ts b/hwe/ts/v_history.ts
index 938f1a28..507870c7 100644
--- a/hwe/ts/v_history.ts
+++ b/hwe/ts/v_history.ts
@@ -1,7 +1,7 @@
-import "@scss/board.scss";
+import "@scss/history.scss";
 import { createApp } from 'vue'
 import PageHistory from '@/PageHistory.vue';
-import BootstrapVue3 from 'bootstrap-vue-3'
+import { BootstrapVue3, BToastPlugin } from 'bootstrap-vue-3'
 import { setAxiosXMLHttpRequest } from '@util/setAxiosXMLHttpRequest';
 import { auto500px } from "./util/auto500px";
 import { htmlReady } from "./util/htmlReady";
@@ -13,4 +13,4 @@ auto500px();
 htmlReady(() => {
   insertCustomCSS();
 });
-createApp(PageHistory).use(BootstrapVue3).mount('#app');
\ No newline at end of file
+createApp(PageHistory).use(BootstrapVue3).use(BToastPlugin).mount('#app');
\ No newline at end of file
diff --git a/hwe/v_history.php b/hwe/v_history.php
index 5c937d5f..bcad74e6 100644
--- a/hwe/v_history.php
+++ b/hwe/v_history.php
@@ -15,6 +15,11 @@ $serverID = Util::getReq('serverID', 'string', null);
 if (!$serverID) {
   $serverID = UniqueConst::$serverID;
 }
+if ($serverID !== UniqueConst::$serverID) {
+  $mapName = $db->queryFirstField('SELECT map FROM ng_games WHERE server_id=%s', $serverID) ?: 'che';
+} else {
+  $mapName = GameConst::$mapName;
+}
 
 [$f_year, $f_month] = $db->queryFirstList('SELECT year, month FROM ng_history WHERE server_id = %s ORDER BY year ASC, month ASC LIMIT 1', $serverID);
 [$l_year, $l_month] = $db->queryFirstList('SELECT year, month FROM ng_history WHERE server_id = %s ORDER BY year DESC, month DESC LIMIT 1', $serverID);
@@ -32,6 +37,8 @@ $me = $db->queryFirstRow('SELECT con, turntime FROM general WHERE owner = %i', $
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=500" />
   <?= WebUtil::printJS('../d_shared/common_path.js', true) ?>
+  <?= WebUtil::printJS("js/map/theme_{$mapName}.js") ?>
+  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css" />
   <?= WebUtil::printStaticValues([
     'staticValues' => [
       'fisrtYearMonth' => Util::joinYearMonth($f_year, $f_month),