diff --git a/hwe/scss/common/bootstrap_sammo.scss b/hwe/scss/common/bootstrap_sammo.scss
index 2a7bcb18..b817a50a 100644
--- a/hwe/scss/common/bootstrap_sammo.scss
+++ b/hwe/scss/common/bootstrap_sammo.scss
@@ -1,67 +1,72 @@
-
-
 @function frontColor($color) {
-    @return color-contrast($color);
+  @return color-contrast($color);
 }
 
-@each $colorType, $color in $nationColors {
-    .sam-color-#{$colorType} {
-        .sam-nation-own-bgcolor{
-            background-color: $color;
-            color: frontColor($color);
-        }
-
-        .btn-sammo-nation{
-            @include button-variant($color, $color);
-
-            &:hover,
-            &:active,
-            &:focus {
-              background-color: $color;
-            }
-
-            &,
-            &:not(.disabled):hover,
-            &:not(.disabled):active,
-            &:focus {
-              border-color: shade-color($color, 10%);
-            }
-        }
+@each $colorType,
+$color in $nationColors {
+  .sam-color-#{$colorType} {
+    .sam-nation-own-bgcolor {
+      background-color: $color;
+      color: frontColor($color);
     }
 
-    .btn-sammo-nation-#{$colorType}{
-        @include button-variant($color, $color);
+    .btn-sammo-nation {
+      @include button-variant($color, $color);
 
-        &:hover,
-        &:active,
-        &:focus {
-          background-color: $color;
-        }
+      &:hover,
+      &:active,
+      &:focus {
+        background-color: $color;
+      }
 
-        &,
-        &:not(.disabled):hover,
-        &:not(.disabled):active,
-        &:focus {
-          border-color: shade-color($color, 10%);
-        }
+      &,
+      &:not(.disabled):hover,
+      &:not(.disabled):active,
+      &:focus {
+        border-color: shade-color($color, 10%);
+      }
     }
+  }
+
+  .sam-nation-bg-#{$colorType} {
+    background-color: $color;
+    color: frontColor($color);
+  }
+
+  .btn-sammo-nation-#{$colorType} {
+    @include button-variant($color, $color);
+
+    &:hover,
+    &:active,
+    &:focus {
+      background-color: $color;
+    }
+
+    &,
+    &:not(.disabled):hover,
+    &:not(.disabled):active,
+    &:focus {
+      border-color: shade-color($color, 10%);
+    }
+  }
 }
 
-@each $colorType, $color in $sammoColors {
-    .btn-sammo-#{$colorType}{
-        @include button-variant($color, $color);
+@each $colorType,
+$color in $sammoColors {
+  .btn-sammo-#{$colorType} {
+    @include button-variant($color, $color);
 
-        &:hover,
-        &:active,
-        &:focus {
-          background-color: $color;
-        }
-
-        &,
-        &:not(.disabled):hover,
-        &:not(.disabled):active,
-        &:focus {
-          border-color: shade-color($color, 10%);
-        }
+    &:hover,
+    &:active,
+    &:focus {
+      background-color: $color;
     }
+
+    &,
+    &:not(.disabled):hover,
+    &:not(.disabled):active,
+    &:focus {
+      border-color: shade-color($color, 10%);
+    }
+  }
 }
\ No newline at end of file
diff --git a/hwe/scss/dipcenter.scss b/hwe/scss/dipcenter.scss
deleted file mode 100644
index a6c65219..00000000
--- a/hwe/scss/dipcenter.scss
+++ /dev/null
@@ -1,23 +0,0 @@
-@import '@scss/common/bootstrap5.scss';
-
-#scoutMsgForm .viewer{
-    max-height:200px;
-    overflow: hidden;
-}
-
-.note-editor.card {
-    background:inherit;
-    color:inherit;
-    border:none;
-}
-
-.note-editor.note-frame .note-editing-area .note-editable {
-    background:inherit;
-    color:inherit;
-    padding:0;
-}
-
-.note-editor.note-frame .note-statusbar{
-    background-color:#444444;
-    border-top: 1px solid rgba(0,0,0,0.125);
-}
\ No newline at end of file
diff --git a/hwe/scss/main.scss b/hwe/scss/main.scss
index da6c9cc6..d3804147 100644
--- a/hwe/scss/main.scss
+++ b/hwe/scss/main.scss
@@ -215,6 +215,10 @@ body {
     }
 }
 
+#nation-msg{
+    word-break: break-all;
+}
+
 #nation-msg-box {
     position: relative;
     overflow: hidden;
diff --git a/hwe/scss/nationStratFinan.scss b/hwe/scss/nationStratFinan.scss
new file mode 100644
index 00000000..b68cde2a
--- /dev/null
+++ b/hwe/scss/nationStratFinan.scss
@@ -0,0 +1,91 @@
+@import '@scss/common/bootstrap5.scss';
+@import "@scss/game_bg.scss";
+@import "@scss/util.scss";
+@import "@scss/editor_component.scss";
+
+.diplomacyTitle {
+    background-color: $blue;
+    text-align: center;
+    font-size: 1.4em;
+}
+
+.noticeTitle {
+    background-color: $white;
+    text-align: center;
+    color: black;
+    font-size: 1.4em;
+}
+
+.financeTitle{
+    background-color: $green;
+    text-align: center;
+    font-size: 1.4em;
+}
+
+#app {
+    width: 100%;
+    overflow-x: hidden;
+}
+
+.tiptap-editor{
+    width: 100%;
+    overflow: hidden;
+}
+
+@include media-1000px {
+    #container {
+        width: 1000px;
+        margin: 0 auto;
+        position: relative;
+    }
+}
+
+@include media-500px {
+    #container {
+        position: relative;
+        width: 500px;
+        margin: auto;
+        overflow-x: hidden;
+    }
+
+
+
+    #noticeForm .ProseMirror {
+        transform: scale(0.5);
+        transform-origin: left top;
+        width: 1000px;
+    }
+
+    #scoutMsgForm .ProseMirror {
+        transform: scale(calc(500/ 870));
+        transform-origin: left top;
+        width: 870px;
+    }
+
+}
+
+.diplomacyTable {
+    .tRow {
+        display: grid;
+        grid-template-columns: minmax(130px, 3fr) 1.5fr 1fr 1fr 2fr 1fr 2fr;
+        text-align: center;
+    }
+}
+
+
+.note-editor.card {
+    background: inherit;
+    color: inherit;
+    border: none;
+}
+
+.note-editor.note-frame .note-editing-area .note-editable {
+    background: inherit;
+    color: inherit;
+    padding: 0;
+}
+
+.note-editor.note-frame .note-statusbar {
+    background-color: #444444;
+    border-top: 1px solid rgba(0, 0, 0, 0.125);
+}
\ No newline at end of file
diff --git a/hwe/scss/util.scss b/hwe/scss/util.scss
index eb044ae3..67f0d4e2 100644
--- a/hwe/scss/util.scss
+++ b/hwe/scss/util.scss
@@ -1,5 +1,3 @@
-
-
 .s-border-t {
     border-top: gray solid 1px;
 }
diff --git a/hwe/ts/PageJoin.vue b/hwe/ts/PageJoin.vue
index 0f301023..8d8298cc 100644
--- a/hwe/ts/PageJoin.vue
+++ b/hwe/ts/PageJoin.vue
@@ -549,7 +549,9 @@ export default defineComponent({
   },
 });
 </script>
-<style>
+<style lang="scss">
+@import "@scss/common/bootstrap5.scss";
+@import "@scss/editor_component.scss";
 #container {
   width: 100%;
   max-width: 1000px;
diff --git a/hwe/ts/PageNationStratFinan.vue b/hwe/ts/PageNationStratFinan.vue
index f38fcbd8..d1795de6 100644
--- a/hwe/ts/PageNationStratFinan.vue
+++ b/hwe/ts/PageNationStratFinan.vue
@@ -1,64 +1,134 @@
 <template>
-  <div>위쪽버튼</div>
-  <div>외교관계</div>
-
-  <div>국 가 방 침 &amp; 임관 권유 메시지</div>
-  <div id="noticeForm">
-    <div class="bg1" style="display: flex; justify-content: space-around">
-      <div style="flex: 1 1 auto">국가 방침</div>
-      <div>
-        <b-button
-          @click="enableEditNationMsg"
-          v-if="editable && !inEditNationMsg"
-          >국가방침 수정</b-button
-        >
-        <b-button @click="saveNationMsg" v-if="editable && inEditNationMsg"
-          >저장</b-button
-        >
-        <b-button v-if="editable && inEditNationMsg" @click="rollbackNationMsg"
-          >취소</b-button
-        >
+  <div id="container" class="pageNationStratFinan bg0">
+    <TopBackBar title="내무부" />
+    <div class="diplomacyTitle">외교관계</div>
+    <div class="diplomacyTable">
+      <div class="diplomacyHeader tRow bg1">
+        <div>국가명</div>
+        <div>국력</div>
+        <div>장수</div>
+        <div>속령</div>
+        <div>상태</div>
+        <div>기간</div>
+        <div>종료 시점</div>
+      </div>
+      <div
+        :class="['diplomacyItem', 'tRow', 's-border-b']"
+        v-for="nation in nationsList"
+        :key="nation.nation"
+      >
+        <div :class="`sam-nation-bg-${nation.color.slice(1)}`">
+          {{ nation.name }}
+        </div>
+        <div>{{ nation.power.toLocaleString() }}</div>
+        <div>{{ nation.gennum.toLocaleString() }}</div>
+        <div>{{ nation.cityCnt.toLocaleString() }}</div>
+        <template v-if="nation.nation == nationID">
+          <div>-</div>
+        </template>
+        <template v-else>
+          <div
+            :style="{
+              color:
+                diplomacyStateInfo[nation.diplomacy.state].color ?? undefined,
+            }"
+          >
+            {{ diplomacyStateInfo[nation.diplomacy.state].name }}
+          </div>
+          <div>
+            {{
+              nation.diplomacy.term == 0 ? "-" : `${nation.diplomacy.term}개월`
+            }}
+          </div>
+          <div
+            v-for="([endYear, endMonth], _idx) in [
+              parseYearMonth(
+                joinYearMonth(year, month) + nation.diplomacy.term
+              ),
+            ]"
+            :key="_idx"
+          >
+            {{
+              nation.diplomacy.term == 0 ? "-" : `${endYear}년 ${endMonth}월`
+            }}
+          </div>
+        </template>
       </div>
     </div>
-    <TipTap v-model="nationMsg" :editable="inEditNationMsg" />
-  </div>
+    <div class="noticeTitle">국가 방침 &amp; 임관 권유 메시지</div>
+    <div id="noticeForm">
+      <div class="bg1" style="display: flex; justify-content: space-around">
+        <div style="flex: 1 1 auto">국가 방침</div>
+        <div>
+          <b-button
+            @click="enableEditNationMsg"
+            v-if="editable && !inEditNationMsg"
+            >국가방침 수정</b-button
+          >
+          <b-button @click="saveNationMsg" v-if="editable && inEditNationMsg"
+            >저장</b-button
+          >
+          <b-button
+            v-if="editable && inEditNationMsg"
+            @click="rollbackNationMsg"
+            >취소</b-button
+          >
+        </div>
+      </div>
+      <TipTap
+        v-model="nationMsg"
+        :editable="inEditNationMsg"
+        @ready="trackNationMsgHeight"
+        @update:modelValue="trackNationMsgHeight"
+      />
+    </div>
 
-  <div id="scoutMsgForm">
-    <div class="bg1" style="display: flex; justify-content: space-around">
-      <div style="flex: 1 1 auto">임관 권유</div>
-      <div>
-        <b-button @click="enableEditScoutMsg" v-if="editable && !inEditScoutMsg"
-          >임관 권유문 수정</b-button
-        >
-        <b-button @click="saveScoutMsg" v-if="editable && inEditScoutMsg"
-          >저장</b-button
-        >
-        <b-button v-if="editable && inEditScoutMsg" @click="rollbackScoutMsg"
-          >취소</b-button
-        >
+    <div id="scoutMsgForm">
+      <div class="bg1" style="display: flex; justify-content: space-around">
+        <div style="flex: 1 1 auto">임관 권유</div>
+        <div>
+          <b-button
+            @click="enableEditScoutMsg"
+            v-if="editable && !inEditScoutMsg"
+            >임관 권유문 수정</b-button
+          >
+          <b-button @click="saveScoutMsg" v-if="editable && inEditScoutMsg"
+            >저장</b-button
+          >
+          <b-button v-if="editable && inEditScoutMsg" @click="rollbackScoutMsg"
+            >취소</b-button
+          >
+        </div>
+      </div>
+      <div style="border-bottom: solid gray 0.5px">
+        870px x 200px를 넘어서는 내용은 표시되지 않습니다.
+      </div>
+      <div style="width: 870px; margin-left: auto">
+        <TipTap
+          v-model="scoutMsg"
+          :editable="inEditScoutMsg"
+          @ready="trackScoutMsgHeight"
+          @update:modelValue="trackScoutMsgHeight"
+        />
       </div>
     </div>
-    <div style="border-bottom: solid gray 0.5px">
-      870px x 200px를 넘어서는 내용은 표시되지 않습니다.
-    </div>
-    <div style="width: 870px; margin-left: auto">
-      <TipTap v-model="scoutMsg" :editable="inEditScoutMsg" />
-    </div>
-  </div>
 
-  <div>예산&amp;정책</div>
-  <div>추가 설정</div>
-  <div>돌아가기</div>
+    <div class="financeTitle">예산&amp;정책</div>
+    <div>추가 설정</div>
+    <BottomBar title="내무부" />
+  </div>
 </template>
 <script lang="ts">
-import "@scss/dipcenter.scss";
-import "@scss/common_legacy.scss";
-import "@scss/editor_component.scss";
 import TipTap from "./components/TipTap.vue";
 import { defineComponent, reactive, ref, toRefs } from "vue";
 import { isString } from "lodash";
-import { diplomacyState, NationStaticItem } from "./defs";
+import { diplomacyState, diplomacyStateInfo, NationStaticItem } from "./defs";
 import { SammoAPI } from "./SammoAPI";
+import TopBackBar from "@/components/TopBackBar.vue";
+import BottomBar from "@/components/BottomBar.vue";
+import { joinYearMonth } from "@/util/joinYearMonth";
+import { parseYearMonth } from "@/util/parseYearMonth";
+
 type NationItem = NationStaticItem & {
   cityCnt: number;
   diplomacy: {
@@ -106,8 +176,11 @@ declare const staticValues: {
 export default defineComponent({
   components: {
     TipTap,
+    TopBackBar,
+    BottomBar,
   },
   setup() {
+    staticValues;
     const self = reactive(staticValues);
 
     let oldNationMsg = staticValues.nationMsg;
@@ -122,8 +195,6 @@ export default defineComponent({
       self.nationMsg = oldNationMsg;
     }
 
-    console.log(SammoAPI.Nation.SetScoutMsg);
-
     async function saveNationMsg() {
       const msg = self.nationMsg;
       try {
@@ -166,7 +237,28 @@ export default defineComponent({
       }
     }
 
+    const trackTiptapFormHeight = (target: string) => {
+      let form: HTMLElement | null = null;
+      let outerForm: HTMLElement | null = null;
+      return () => {
+        if (!form) {
+          form = document.querySelector(`${target} .ProseMirror`);
+        }
+        if (!outerForm) {
+          outerForm = document.querySelector(`${target} .tiptap-editor`);
+        }
+        if (!form || !outerForm) {
+          return;
+        }
 
+        const { height: clientHeight } = form.getBoundingClientRect();
+        const { height: parentHeight } = outerForm.getBoundingClientRect();
+
+        if (parentHeight != clientHeight) {
+          outerForm.style.height = `${clientHeight}px`;
+        }
+      };
+    };
 
     return {
       ...toRefs(self),
@@ -178,8 +270,18 @@ export default defineComponent({
       enableEditScoutMsg,
       rollbackScoutMsg,
       saveScoutMsg,
+      diplomacyStateInfo,
+      joinYearMonth,
+      parseYearMonth,
+
+      trackNationMsgHeight: trackTiptapFormHeight("#noticeForm"),
+      trackScoutMsgHeight: trackTiptapFormHeight("#scoutMsgForm"),
     };
   },
   methods: {},
 });
-</script>
\ No newline at end of file
+</script>
+
+<style lang="scss">
+@import "@scss/nationStratFinan.scss";
+</style>
\ No newline at end of file
diff --git a/hwe/ts/components/TipTap.vue b/hwe/ts/components/TipTap.vue
index db0ea843..cb09cd20 100644
--- a/hwe/ts/components/TipTap.vue
+++ b/hwe/ts/components/TipTap.vue
@@ -223,7 +223,9 @@
       </b-button-group>
       <b-button-group class="mx-1">
         <b-button
-          @click="editor.chain().focus().setImage({ align: 'float-left' }).run()"
+          @click="
+            editor.chain().focus().setImage({ align: 'float-left' }).run()
+          "
           :class="{
             'is-active': editor.isActive('custom-image', {
               float: 'float-left',
@@ -267,7 +269,9 @@
           ><i class="bi bi-align-end"></i
         ></b-button>
         <b-button
-          @click="editor.chain().focus().setImage({ align: 'float-right' }).run()"
+          @click="
+            editor.chain().focus().setImage({ align: 'float-right' }).run()
+          "
           :class="{
             'is-active': editor.isActive('custom-image', {
               float: 'float-right',
@@ -280,7 +284,7 @@
       </b-button-group>
     </b-button-toolbar>
   </bubble-menu>
-  <editor-content :editor="editor" />
+  <editor-content :editor="editor" class="tiptap-editor" />
   <b-modal
     v-model="showImageModal"
     title="이미지 추가"
@@ -367,6 +371,7 @@ const compoment = defineComponent({
     BDropdownItem,
     BDropdownDivider,
   },
+  emits: ["ready", "update:modelValue"],
   methods: {
     chooseImage(e: Event) {
       const target = unwrap(e.target) as HTMLInputElement;
@@ -515,6 +520,9 @@ const compoment = defineComponent({
       onUpdate: () => {
         this.$emit("update:modelValue", this.editor.getHTML());
       },
+      onCreate: () => {
+        this.$emit("ready");
+      }
     });
     this.editor = editor;
   },
diff --git a/hwe/ts/v_join.ts b/hwe/ts/v_join.ts
index 748ea326..66abce02 100644
--- a/hwe/ts/v_join.ts
+++ b/hwe/ts/v_join.ts
@@ -1,7 +1,5 @@
 import { createApp } from 'vue'
 import PageJoin from '@/PageJoin.vue';
 import BootstrapVue3 from 'bootstrap-vue-3'
-import "@scss/common/bootstrap5.scss";
-import "@scss/editor_component.scss";
 
 createApp(PageJoin).use(BootstrapVue3).mount('#app')
\ No newline at end of file
diff --git a/hwe/ts/v_nationStratFinan.ts b/hwe/ts/v_nationStratFinan.ts
index 7461b256..87da3e98 100644
--- a/hwe/ts/v_nationStratFinan.ts
+++ b/hwe/ts/v_nationStratFinan.ts
@@ -7,4 +7,4 @@ import { auto500px } from './util/auto500px';
 
 
 auto500px();
-createApp(PageNationStratFinan).use(BootstrapVue3).mount('#container');
\ No newline at end of file
+createApp(PageNationStratFinan).use(BootstrapVue3).mount('#app');
\ No newline at end of file
diff --git a/hwe/v_nationStratFinan.php b/hwe/v_nationStratFinan.php
index 7e0589c0..1ccba237 100644
--- a/hwe/v_nationStratFinan.php
+++ b/hwe/v_nationStratFinan.php
@@ -157,7 +157,7 @@ $outcome = getOutcome(100, $dedicationList);
 </head>
 
 <body>
-    <div id="container"></div>
+    <div id="app"></div>
 </body>
 
 </html>
\ No newline at end of file