diff --git a/apps/admin-panel/src/views/city/cityList.vue b/apps/admin-panel/src/views/city/cityList.vue
index af4dec1..7c36a28 100644
--- a/apps/admin-panel/src/views/city/cityList.vue
+++ b/apps/admin-panel/src/views/city/cityList.vue
@@ -6,6 +6,8 @@
   -->
   <div id="page-user-list">
     <a-card title="لیست شهر ها">
+      <ListPageHeader rid="cities.create" add-label="افزودن شهر" @add="addOpen = true" />
+
       <XTable ref="citiesTable" :model="model">
         <template #percent="{ text }">
           {{ text ?? '-' }}
@@ -47,6 +49,8 @@
           </a-form-item>
         </a-form>
       </a-modal>
+
+      <CreateCity :open="addOpen" @update:open="addOpen = $event" @success="citiesTable?.fetch()" />
     </a-card>
   </div>
 </template>
@@ -56,6 +60,8 @@ import { reactive, ref } from 'vue';
 import { message } from 'ant-design-vue';
 import { DeleteOutlined, EditOutlined } from '@ant-design/icons-vue';
 import XTable from '../../components/x-table/XTable.vue';
+import ListPageHeader from '../../components/common/ListPageHeader.vue';
+import CreateCity from './createCity.vue';
 import { buildCityListModel } from './CityListModel';
 import { useUsersStore } from '../../stores/users';
 import { useDeleteHandler } from '../../composables/useDeleteHandler';
@@ -66,6 +72,7 @@ const hasPermission = (rid: string) => Boolean(users.hasPermission(rid));
 
 const model = buildCityListModel();
 const citiesTable = ref<{ fetch: () => Promise<void> } | null>(null);
+const addOpen = ref(false);
 const visible = ref(false);
 const tempRow = ref<Record<string, any> | undefined>(undefined);
 const form = reactive<Record<string, any>>({ title: '', percent: null, percent_aux: null });
diff --git a/apps/admin-panel/src/views/city/createCity.vue b/apps/admin-panel/src/views/city/createCity.vue
index 4614569..3aa6efa 100644
--- a/apps/admin-panel/src/views/city/createCity.vue
+++ b/apps/admin-panel/src/views/city/createCity.vue
@@ -1,6 +1,35 @@
 <template>
-  <!-- Ported from legacy henza_admin/src/views/city/createCity.vue. -->
-  <a-spin :spinning="loading">
+  <!--
+    Ported from legacy henza_admin/src/views/city/createCity.vue.
+    Converted from a standalone page to a modal (BaseFormModal): the /city/create
+    route still exists and still renders this component directly for a route-based
+    fallback (a-form as a plain page), but cityList.vue now opens it as a modal via
+    the `open`/`id` props instead of navigating.
+  -->
+  <BaseFormModal
+    v-if="asModal"
+    :open="Boolean(open)"
+    :id="id"
+    add-title="افزودن شهر"
+    edit-title="افزودن شهر"
+    :loading="loading"
+    :submitting="loading"
+    width="sm"
+    @update:open="$emit('update:open', $event)"
+    @submit="handleSubmit"
+  >
+    <div class="grid-2">
+      <a-form-item label="نام شهر" :validate-status="err.title ? 'error' : ''" :help="err.title">
+        <a-input v-model:value="form.title" />
+      </a-form-item>
+      <a-form-item label="استان">
+        <a-input v-model:value="form.province" />
+      </a-form-item>
+    </div>
+  </BaseFormModal>
+
+  <!-- route-based fallback for direct links to /city/create -->
+  <a-spin v-else :spinning="loading">
     <a-form layout="vertical" @submit.prevent="handleSubmit">
       <a-card title="افزودن شهر">
         <div class="grid-2">
@@ -19,11 +48,28 @@
 
 <script setup lang="ts">
 import { reactive, ref } from 'vue';
-import { useRouter } from 'vue-router';
+import { useRoute, useRouter } from 'vue-router';
 import { message } from 'ant-design-vue';
+import BaseFormModal from '../../components/common/BaseFormModal.vue';
 import api from '../../api/client';
 
+const props = defineProps<{
+  /** Present -> rendered as a modal by the parent list page. */
+  open?: boolean;
+  id?: string;
+}>();
+const emit = defineEmits<{
+  (e: 'update:open', value: boolean): void;
+  (e: 'success'): void;
+}>();
+
+// `asModal` is fixed at mount: the parent decides which way this component is
+// used (modal vs the plain /city/create route) by passing `open` or not.
+const asModal = props.open !== undefined;
+
+const route = useRoute();
 const router = useRouter();
+
 const loading = ref(false);
 const form = reactive<Record<string, any>>({ title: '', province: '' });
 const err = reactive<Record<string, string>>({});
@@ -38,7 +84,12 @@ async function handleSubmit() {
     loading.value = true;
     await api.post('cities', form);
     message.info('اطلاعات با موفقیت به ثبت رسید.');
-    router.push('/city/list');
+    if (asModal) {
+      emit('success');
+      emit('update:open', false);
+    } else {
+      router.push('/city/list');
+    }
   } catch (e: any) {
     message.error(e?.response?.data?.message ?? 'خطا در ثبت اطلاعات.');
   } finally {