diff --git a/components.d.ts b/components.d.ts
index 19f5fc4..1c276b1 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -7,17 +7,27 @@ export {}
 
 declare module 'vue' {
   export interface GlobalComponents {
+    ABadge: typeof import('ant-design-vue/es')['Badge']
     AButton: typeof import('ant-design-vue/es')['Button']
     ADivider: typeof import('ant-design-vue/es')['Divider']
     AForm: typeof import('ant-design-vue/es')['Form']
     AFormItem: typeof import('ant-design-vue/es')['FormItem']
+    AImage: typeof import('ant-design-vue/es')['Image']
     AInput: typeof import('ant-design-vue/es')['Input']
     AInputPassword: typeof import('ant-design-vue/es')['InputPassword']
     AModal: typeof import('ant-design-vue/es')['Modal']
     AppCreditLink: typeof import('./src/components/AppCreditLink.vue')['default']
+    ARadio: typeof import('ant-design-vue/es')['Radio']
     ARadioButton: typeof import('ant-design-vue/es')['RadioButton']
     ARadioGroup: typeof import('ant-design-vue/es')['RadioGroup']
+    ASelect: typeof import('ant-design-vue/es')['Select']
+    ASelectOption: typeof import('ant-design-vue/es')['SelectOption']
+    ASlider: typeof import('ant-design-vue/es')['Slider']
     ASpin: typeof import('ant-design-vue/es')['Spin']
+    ASwitch: typeof import('ant-design-vue/es')['Switch']
+    ATag: typeof import('ant-design-vue/es')['Tag']
+    ATextarea: typeof import('ant-design-vue/es')['Textarea']
+    ATooltip: typeof import('ant-design-vue/es')['Tooltip']
     BaseDatePicker: typeof import('./src/components/BasicPacks/BaseDatePicker/src/BaseDatePicker.vue')['default']
     Basic: typeof import('./src/components/BasicPacks/BaseDatePicker/src/datePick/demo/basic.vue')['default']
     BasicActionSheet: typeof import('./src/components/BasicPacks/BasicActionSheet.vue')['default']
@@ -69,5 +79,6 @@ declare module 'vue' {
     TransactionSkeleton: typeof import('./src/components/TransactionSkeleton.vue')['default']
     VanActionSheet: typeof import('vant/es')['ActionSheet']
     VanDialog: typeof import('vant/es')['Dialog']
+    VanField: typeof import('vant/es')['Field']
   }
 }
diff --git a/src/assets/css/ant.less b/src/assets/css/ant.less
index c69d498..dffa0c3 100644
--- a/src/assets/css/ant.less
+++ b/src/assets/css/ant.less
@@ -240,9 +240,9 @@
 }
 
 .ant-spin-dot-item {
-  background-color: @App-primary-color !important;
+  background-color: var(--color-primary, var(--App-secondary-color)) !important;
 }
 
 .ant-spin-dot i {
-  background-color: @App-primary-color !important;
+  background-color: var(--color-primary, var(--App-secondary-color)) !important;
 }
\ No newline at end of file
diff --git a/src/assets/css/main.less b/src/assets/css/main.less
index 23df791..56d9d1b 100644
--- a/src/assets/css/main.less
+++ b/src/assets/css/main.less
@@ -465,4 +465,15 @@ body:has(.ant-modal-root .ant-modal-wrap:not([style*='display: none'])) {
 }
 .ant-radio-group-solid .ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled):hover{
   color: white !important;
+}
+
+/* لودینگ محتوای صفحه — وسط ناحیه محتوا (موبایل و دسکتاپ یکسان) */
+.app-page-content-loading {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  width: 100%;
+  min-height: min(52vh, 22rem);
+  padding: 2rem 1rem;
 }
\ No newline at end of file
diff --git a/src/views/base/appNotifications/desktop/DesktopAppNotificationsView.vue b/src/views/base/appNotifications/desktop/DesktopAppNotificationsView.vue
index 965e5cf..7e050f9 100644
--- a/src/views/base/appNotifications/desktop/DesktopAppNotificationsView.vue
+++ b/src/views/base/appNotifications/desktop/DesktopAppNotificationsView.vue
@@ -1,20 +1,21 @@
 <template>
   <div class="dapp-notif">
-    <header class="dapp-notif__top">
-      <div>
-        <p class="dapp-notif__eyebrow">اعلان‌ها</p>
-        <h1 class="dapp-notif__title">پیام‌های مدیریت</h1>
-      </div>
-    </header>
+    <BrowserNotificationPermissionBanner class="mb-4 max-w-3xl w-full" />
 
-    <BrowserNotificationPermissionBanner class="mb-4 max-w-3xl" />
+    <div v-if="loading && !items.length" class="app-page-content-loading">
+      <a-spin size="large" />
+    </div>
 
-    <a-spin :spinning="loading">
-      <div v-if="!items.length" class="dapp-notif__empty">
-        <BasicIcon icon="vuesax-linear:notification-bing" size="36" />
-        <p>اعلانی برای نمایش نیست.</p>
-      </div>
-      <div v-else class="dapp-notif__list">
+    <div
+        v-else-if="!items.length"
+        class="dapp-notif__empty"
+    >
+      <BasicIcon icon="vuesax-linear:notification-bing" size="36" />
+      <p>اعلانی برای نمایش نیست.</p>
+    </div>
+
+    <a-spin v-else :spinning="loading">
+      <div class="dapp-notif__list">
         <AppNotificationCard
           v-for="item in items"
           :key="item.id"
@@ -40,16 +41,10 @@ const { loading, items, openItem } = useAppNotificationsPageContext()
 .dapp-notif {
   @apply p-6 min-h-full;
 }
-.dapp-notif__eyebrow {
-  @apply m-0 text-xs text-gray-500;
-}
-.dapp-notif__title {
-  @apply m-0 mt-1 text-xl font-bold;
-}
 .dapp-notif__empty {
-  @apply mt-10 flex flex-col items-center gap-2 text-gray-500;
+  @apply flex flex-col items-center gap-2 text-gray-500;
 }
 .dapp-notif__list {
-  @apply mt-6 flex flex-col gap-3 max-w-3xl;
+  @apply flex flex-col gap-3 w-full;
 }
 </style>
diff --git a/src/views/base/appNotifications/index.vue b/src/views/base/appNotifications/index.vue
index b521ea0..d57e651 100644
--- a/src/views/base/appNotifications/index.vue
+++ b/src/views/base/appNotifications/index.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="app-notifications-page-root">
-    <DesktopAppNotificationsView v-show="isDesktop" />
-    <MobileAppNotificationsView v-show="!isDesktop" />
+    <DesktopAppNotificationsView v-if="isDesktop" />
+    <MobileAppNotificationsView v-else />
 
     <BasicActionSheet
       v-model:show="detailVisible"
diff --git a/src/views/base/appNotifications/mobile/MobileAppNotificationsView.vue b/src/views/base/appNotifications/mobile/MobileAppNotificationsView.vue
index 3b70d7c..cf3a10e 100644
--- a/src/views/base/appNotifications/mobile/MobileAppNotificationsView.vue
+++ b/src/views/base/appNotifications/mobile/MobileAppNotificationsView.vue
@@ -3,13 +3,22 @@
     <MobilePageHeader title="اعلان‌ها" show-back />
     <div class="app-notif-page__body mpage-content">
       <BrowserNotificationPermissionBanner class="mb-3" />
-      <a-spin :spinning="loading">
-        <div v-if="!items.length" class="app-notif-page__empty">
-          <BasicIcon icon="vuesax-linear:notification-bing" size="40" class="text-gray-400" />
-          <p class="m-0 mt-3 font-bold text-gray-700">اعلانی نیست</p>
-          <p class="m-0 mt-1 text-sm text-gray-500">هنوز اعلانی از طرف مدیریت ارسال نشده است.</p>
-        </div>
-        <div v-else class="flex flex-col gap-3">
+
+      <div v-if="loading && !items.length" class="app-page-content-loading">
+        <a-spin size="large" />
+      </div>
+
+      <div
+          v-else-if="!items.length"
+          class="app-notif-page__empty"
+      >
+        <BasicIcon icon="vuesax-linear:notification-bing" size="40" class="text-gray-400" />
+        <p class="m-0 mt-3 font-bold text-gray-700">اعلانی نیست</p>
+        <p class="m-0 mt-1 text-sm text-gray-500">هنوز اعلانی از طرف مدیریت ارسال نشده است.</p>
+      </div>
+
+      <a-spin v-else :spinning="loading">
+        <div class="flex flex-col gap-3">
           <AppNotificationCard
             v-for="item in items"
             :key="item.id"