diff --git a/hwe/sammo/API/General/GetFrontInfo.php b/hwe/sammo/API/General/GetFrontInfo.php
index 36508e4b..054a1fcb 100644
--- a/hwe/sammo/API/General/GetFrontInfo.php
+++ b/hwe/sammo/API/General/GetFrontInfo.php
@@ -378,7 +378,7 @@ class GetFrontInfo extends \sammo\BaseAPI
       $nationColor = $staticNation['color'];
     }
 
-    $rawOfficerList = $db->query('SELECT officer_level, name, npc FROM general WHERE city = %i AND officer_level IN (4,3,2)', $cityID);
+    $rawOfficerList = $db->query('SELECT officer_level, name, npc FROM general WHERE officer_city = %i AND officer_level IN (4,3,2)', $cityID);
     $officerList = [4 => null, 3 => null, 2 => null];
     foreach ($rawOfficerList as $officer) {
       $officerLevel = $officer['officer_level'];
diff --git a/hwe/ts/PageFront.vue b/hwe/ts/PageFront.vue
index 524cef20..c5cbe190 100644
--- a/hwe/ts/PageFront.vue
+++ b/hwe/ts/PageFront.vue
@@ -25,7 +25,9 @@
           <!-- TODO: 운영자 툴바는 어디에?-->
           <div class="mapView">지도</div>
           <div class="reservedCommandZone">예턴</div>
-          <div class="cityInfo">도시 정보</div>
+          <div v-if="frontInfo" class="cityInfo">
+            <CityBasicCard :city="frontInfo.city" />
+          </div>
           <div v-if="frontInfo" class="nationInfo col-12 col-md-6">
             <NationBasicCard :nation="frontInfo.nation" :global="frontInfo.global" />
           </div>
@@ -99,6 +101,7 @@ import Denque from "denque";
 import { formatLog } from "@/utilGame/formatLog";
 import type { ExecuteResponse, GetFrontInfoResponse } from "./defs/API/Global";
 import { delay } from "./util/delay";
+import CityBasicCard from "./components/CityBasicCard.vue";
 import NationBasicCard from "./components/NationBasicCard.vue";
 import GeneralBasicCard from "./components/GeneralBasicCard.vue";
 import type { GeneralListItemP1 } from "./defs/API/Nation";
diff --git a/hwe/ts/components/CityBasicCard.vue b/hwe/ts/components/CityBasicCard.vue
new file mode 100644
index 00000000..1584e311
--- /dev/null
+++ b/hwe/ts/components/CityBasicCard.vue
@@ -0,0 +1,228 @@
+<template>
+  <div class="city-card-basic bg2">
+    <div
+      class="cityNamePanel"
+      :style="{
+        color: isBrightColor(city.nationInfo.color) ? 'black' : 'white',
+        backgroundColor: city.nationInfo.color,
+      }"
+    >
+      <div>【{{ cityRegionText }} | {{ cityLevelText }}】 {{ city.name }}</div>
+    </div>
+    <div
+      class="nationNamePanel"
+      :style="{
+        color: isBrightColor(city.nationInfo.color) ? 'black' : 'white',
+        backgroundColor: city.nationInfo.color,
+      }"
+    >
+      {{ city.nationInfo.id ? `지배 국가 【 ${city.nationInfo.name} 】` : "공 백 지" }}
+    </div>
+    <div class="gPanel popPanel">
+      <div class="gHead bg1">주민</div>
+      <div class="gBody">
+        <SammoBar :height="7" :percent="(city.pop[0] / city.pop[1]) * 100" />
+        <div class="cellText">{{ city.pop[0].toLocaleString() }} / {{ city.pop[1].toLocaleString() }}</div>
+      </div>
+    </div>
+    <div class="gPanel trustPanel">
+      <div class="gHead bg1">민심</div>
+      <div class="gBody">
+        <SammoBar :height="7" :percent="city.trust" />
+        <div class="cellText">{{ city.trust.toLocaleString() }}</div>
+      </div>
+    </div>
+    <div class="gPanel agriPanel">
+      <div class="gHead bg1">농업</div>
+      <div class="gBody">
+        <SammoBar :height="7" :percent="(city.agri[0] / city.agri[1]) * 100" />
+        <div class="cellText">
+          {{ city.agri[0].toLocaleString() }}
+          /
+          {{ city.agri[1].toLocaleString() }}
+        </div>
+      </div>
+    </div>
+    <div class="gPanel commPanel">
+      <div class="gHead bg1">상업</div>
+      <div class="gBody">
+        <SammoBar :height="7" :percent="(city.comm[0] / city.comm[1]) * 100" />
+        <div class="cellText">
+          {{ city.comm[0].toLocaleString() }}
+          /
+          {{ city.comm[1].toLocaleString() }}
+        </div>
+      </div>
+    </div>
+    <div class="gPanel secuPanel">
+      <div class="gHead bg1">치안</div>
+      <div class="gBody">
+        <SammoBar :height="7" :percent="(city.secu[0] / city.secu[1]) * 100" />
+        <div class="cellText">
+          {{ city.secu[0].toLocaleString() }}
+          /
+          {{ city.secu[1].toLocaleString() }}
+        </div>
+      </div>
+    </div>
+    <div class="gPanel defPanel">
+      <div class="gHead bg1">수비</div>
+      <div class="gBody">
+        <SammoBar :height="7" :percent="(city.def[0] / city.def[1]) * 100" />
+        <div class="cellText">
+          {{ city.def[0].toLocaleString() }}
+          /
+          {{ city.def[1].toLocaleString() }}
+        </div>
+      </div>
+    </div>
+    <div class="gPanel wallPanel">
+      <div class="gHead bg1">성벽</div>
+      <div class="gBody">
+        <SammoBar :height="7" :percent="(city.wall[0] / city.wall[1]) * 100" />
+        <div class="cellText">
+          {{ city.wall[0].toLocaleString() }}
+          /
+          {{ city.wall[1].toLocaleString() }}
+        </div>
+      </div>
+    </div>
+    <div class="gPanel tradePanel">
+      <div class="gHead bg1">시세</div>
+      <div class="gBody">
+        <SammoBar :height="7" :percent="city.trade ?? 100" />
+        <div class="cellText">{{ city.trade ? `${city.trade}%` : "상인 없음" }}</div>
+      </div>
+    </div>
+    <div class="gPanel officer4Panel">
+      <div class="gHead bg1">태수</div>
+      <div class="gBody cellTextOnly" :style="{ color: getNPCColor(city.officerList[4]?.npc ?? 0) }">
+        {{ city.officerList[4]?.name ?? "-" }}
+      </div>
+    </div>
+    <div class="gPanel officer3Panel">
+      <div class="gHead bg1">군사</div>
+      <div class="gBody cellTextOnly" :style="{ color: getNPCColor(city.officerList[3]?.npc ?? 0) }">
+        {{ city.officerList[3]?.name ?? "-" }}
+      </div>
+    </div>
+    <div class="gPanel officer2Panel">
+      <div class="gHead bg1">종사</div>
+      <div class="gBody cellTextOnly" :style="{ color: getNPCColor(city.officerList[2]?.npc ?? 0) }">
+        {{ city.officerList[2]?.name ?? "-" }}
+      </div>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+import { unwrap } from "@/util/unwrap";
+import { isBrightColor } from "@/util/isBrightColor";
+import { getNPCColor } from "@/utilGame";
+import type { GameConstStore } from "@/GameConstStore";
+import { inject, ref, toRef, watch, type Ref } from "vue";
+import type { GetFrontInfoResponse } from "@/defs/API/Global";
+import SammoBar from "@/components/SammoBar.vue";
+
+const props = defineProps<{
+  city: GetFrontInfoResponse["city"];
+}>();
+
+const gameConstStore = unwrap(inject<Ref<GameConstStore>>("gameConstStore"));
+
+const city = toRef(props, "city");
+
+const cityRegionText = ref("");
+const cityLevelText = ref("");
+watch(
+  city,
+  (city) => {
+    const cityInfo = gameConstStore.value.cityConst[city.id];
+    cityRegionText.value = gameConstStore.value.cityConstMap.region[cityInfo.region] as string;
+    cityLevelText.value = gameConstStore.value.cityConstMap.level[city.level] as string;
+  },
+  { immediate: true }
+);
+</script>
+<style lang="scss" scoped>
+@import "@scss/common/break_500px.scss";
+
+.city-card-basic {
+  display: grid;
+  border-right: solid 1px gray;
+  border-bottom: solid 1px gray;
+
+  .cellText {
+    text-align: center;
+    line-height: 1.2em;
+  }
+
+  .cellTextOnly {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .gPanel {
+    display: grid;
+    grid-template-columns: 1fr 2fr;
+    border-top: solid 1px gray;
+    border-left: solid 1px gray;
+
+    .gHead {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+  }
+
+  .cityNamePanel,
+  .nationNamePanel {
+    font-weight: bold;
+    text-align: center;
+    border-top: solid 1px gray;
+    border-left: solid 1px gray;
+  }
+
+  .popPanel {
+    grid-column: 1 / 3;
+    grid-template-columns: 1fr 5fr;
+  }
+}
+
+@include media-1000px {
+  .city-card-basic {
+    grid-template-columns: 1fr 1fr 1fr 1fr;
+
+    .cityNamePanel,
+    .nationNamePanel {
+      grid-column: 1 / 5;
+    }
+
+    .officer4Panel {
+      grid-column: 4 / 5;
+      grid-row: 3 / 4;
+    }
+
+    .officer3Panel {
+      grid-column: 4 / 5;
+      grid-row: 4 / 5;
+    }
+
+    .officer2Panel {
+      grid-column: 4 / 5;
+      grid-row: 5 / 6;
+    }
+  }
+}
+
+@include media-500px {
+  .city-card-basic {
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
+
+    .cityNamePanel,
+    .nationNamePanel {
+      grid-column: 1 / 4;
+    }
+  }
+}
+</style>