diff --git a/src/App.vue b/src/App.vue
index c2b2baf..bf4c497 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -78,7 +78,7 @@
   </div>
   <div
     v-if="!showSplash"
-    class="app-credit-footer flex bg-white justify-center text-[9px] fixed left-0 right-0"
+    class="app-credit-footer flex bg-white justify-center text-[9px]"
   >
     <a
       href="https://montzar.ir"
@@ -168,11 +168,21 @@ function update() {
   --app-credit-bar-inner: 28px;
   --app-safe-bottom: env(safe-area-inset-bottom, 0px);
   --app-credit-footer-offset: calc(var(--app-credit-bar-inner) + var(--app-safe-bottom));
+  --app-nav-height: 80px;
+  --app-bottom-chrome-height: calc(var(--app-nav-height) + var(--app-credit-footer-offset));
+  --app-add-card-height: 88px;
 }
 
 .app-credit-footer {
+  position: fixed;
   bottom: 0;
-  z-index: 1000;
+  left: 0;
+  right: 0;
+  width: 100%;
+  max-width: 426px;
+  margin-left: auto;
+  margin-right: auto;
+  z-index: 1000000;
   min-height: var(--app-credit-bar-inner);
   padding-bottom: var(--app-safe-bottom);
   box-sizing: content-box;
diff --git a/src/views/base/about/index.vue b/src/views/base/about/index.vue
index 45a0b0d..bb26bc1 100644
--- a/src/views/base/about/index.vue
+++ b/src/views/base/about/index.vue
@@ -40,7 +40,7 @@
             </div>
           </div>
         </div>
-        <div v-if="config.config.name === 'garoosi'" class="wrap-fix bottom-0 px-10 py-6 flex gap-2 bg-white">
+        <div v-if="config.config.name === 'garoosi'" class="wrap-fix bottom-0 px-10 pb-3rem flex gap-2 bg-white">
           <a class="w-full" href="tel:09306612518">
             <BasicButton class="w-full" type="primary">تماس با پشتیبانی</BasicButton>
           </a>
@@ -48,13 +48,13 @@
             <img src="@/assets/img/bale.png" alt="" class="h-10 w-10"/>
           </a>
         </div>
-        <div v-else class="wrap-fix bottom-0 px-10 py-6 flex gap-2 bg-white">
-          <a class="w-full" href="tel:09306612518">
+        <div v-else class="wrap-fix bottom-0 px-10 pb-3rem flex gap-2 bg-white">
+          <a class="w-full" href="tel:">
             <BasicButton class="w-full" type="primary">تماس با پشتیبانی</BasicButton>
           </a>
-<!--           <a href="https://t.me/saminn_gold">-->
-               <img src="@/assets/img/telegram.png" alt="" class="h-10 w-10"/>
-<!--           </a>-->
+          <a href="https://ble.ir/">
+          <img src="@/assets/img/bale.png" alt="" class="h-10 w-10"/>
+           </a>
         </div>
       </div>
     </div>
diff --git a/src/views/base/address/index.vue b/src/views/base/address/index.vue
index 5a33e4e..bc2c5ac 100644
--- a/src/views/base/address/index.vue
+++ b/src/views/base/address/index.vue
@@ -13,7 +13,7 @@
     <div ref="el" :class="loading? 'h-screen': ''" class="px-3 pt-16  pb-2 overflow-y-scroll"
          style="max-height: calc(100vh - 50px)">
 
-      <list-anim v-if="!loading" class="pb-12vh">
+      <list-anim v-if="!loading" class="pb-[calc(var(--app-bottom-chrome-height)+var(--app-add-card-height)+1rem)]">
         <Item v-for="item in items" :key="item.id" :item="item" @edit="openEdit" @refresh="initItems" />
         <!--        <TransactionSkeleton v-if="loadingMore" class="mt-1 mb-8" />-->
       </list-anim>
@@ -67,12 +67,13 @@
             >
               <BasicTextArea placeholder="آدرس کامل را وارد نمایید" v-model:value="address.address" />
             </a-form-item>
-          </div>
-          <div class="fixed bottom-18 w-full pb-5  !text-white bg-white flex justify-center items-center">
-            <BasicButton class=" w-full !text-white mx-5  mb-2rem" type="primary" @click="handleOk">ثبت آدرس
+<!--          <div class=" w-full pb-5  !text-white flex justify-center items-center">-->
+            <BasicButton class=" !text-white px-3 pb-4rem" type="primary" @click="handleOk">ثبت آدرس
             </BasicButton>
           </div>
 
+          <!--          </div>-->
+
         </div>
       </a-form>
 
@@ -81,15 +82,16 @@
              @click="openAdd()">
           <BasicIcon icon="vuesax-linear:add" color="white" />
         </div>-->
-    <Transition mode="out-in" name="fade">
+    <Teleport to="body">
       <div
-        class="wrap-fix bottom-6 h-[16vh] bg-[#FBFBFC] shadow-lg  rounded-3xl flex justify-center pt-3 z-200"
-        style="box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 26px 11px"
-        @click="openAdd()">
-        <BasicIcon icon="vuesax-linear:add" />
+        v-if="!addAddressVisible"
+        class="add-address app-dock-add-bar"
+        @click="openAdd()"
+      >
         <div>افزودن آدرس جدید</div>
+        <BasicIcon icon="vuesax-linear:add" />
       </div>
-    </Transition>
+    </Teleport>
   </div>
 </template>
 
diff --git a/src/views/base/physicalReceive/components/RequestList.vue b/src/views/base/physicalReceive/components/RequestList.vue
index 2ffb38b..c3557b1 100644
--- a/src/views/base/physicalReceive/components/RequestList.vue
+++ b/src/views/base/physicalReceive/components/RequestList.vue
@@ -1,17 +1,14 @@
 <template>
   <div>
-    <div class="flex flex-col gap-4 pt-13 pb-35 px-2">
+    <div class="flex flex-col gap-4 pt-13 px-2 pb-[calc(var(--app-bottom-chrome-height)+var(--app-add-card-height)+1rem)]">
       <RequestItem v-for="item in requestItems" :item="item"></RequestItem>
     </div>
-    <Transition mode="out-in" name="fade">
-      <div
-          class="wrap-fix bottom-0 h-[19vh] bg-[#FBFBFC] shadow-lg  rounded-3xl flex justify-center pt-3 z-200"
-          style="box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 26px 11px"
-          @click="openAdd()">
+    <Teleport to="body">
+      <div class="add-request app-dock-add-bar" @click="openAdd()">
+        <div>افزودن درخواست جدید</div>
         <BasicIcon icon="vuesax-linear:add" />
-        <div class="cursor-pointer">افزودن درخواست جدید</div>
       </div>
-    </Transition>
+    </Teleport>
   </div>
 </template>
 
diff --git a/src/views/base/priceTrigger/index.vue b/src/views/base/priceTrigger/index.vue
index 616b0f4..97f1fd6 100644
--- a/src/views/base/priceTrigger/index.vue
+++ b/src/views/base/priceTrigger/index.vue
@@ -10,7 +10,7 @@
     <div ref="el" :class="loading? 'h-screen': ''" class="px-3 pt-16  pb-2 overflow-y-scroll"
          style="max-height: calc(100vh - 50px)">
 
-      <list-anim v-if="!loading" class="pb-12vh">
+      <list-anim v-if="!loading" class="pb-[calc(var(--app-bottom-chrome-height)+var(--app-add-card-height)+1rem)]">
         <Item v-for="item in items" :key="item.id" :item="item" @edit="openEdit" @refresh="initItems" />
         <!--        <TransactionSkeleton v-if="loadingMore" class="mt-1 mb-8" />-->
       </list-anim>
@@ -56,15 +56,16 @@
              @click="openAdd()">
           <BasicIcon icon="vuesax-linear:add" color="white" />
         </div>-->
-    <Transition mode="out-in" name="fade">
+    <Teleport to="body">
       <div
-        class="wrap-fix bottom-6 h-[16vh] bg-[#FBFBFC] shadow-lg  rounded-3xl flex justify-center pt-3 z-200"
-        style="box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 26px 11px"
-        @click="openAdd()">
-        <BasicIcon icon="vuesax-linear:add" />
+        v-if="!addTriggerVisible"
+        class="add-trigger app-dock-add-bar"
+        @click="openAdd()"
+      >
         <div>افزودن هشدار جدید</div>
+        <BasicIcon icon="vuesax-linear:add" />
       </div>
-    </Transition>
+    </Teleport>
   </div>
 </template>
 
diff --git a/src/views/base/rules/index.vue b/src/views/base/rules/index.vue
index fb1b8d3..d73698d 100644
--- a/src/views/base/rules/index.vue
+++ b/src/views/base/rules/index.vue
@@ -154,15 +154,7 @@
 
           </div>
         </div>
-        <div class="wrap-fix bottom-0 px-10 py-6 flex gap-2 bg-white">
-          <!--              <BasicButton type="primary" @click="$router.push({name: 'permissions'})">
-              <div>مجوز ها</div>
-          </BasicButton>-->
-<!--          <a href="https://t.me/saminn_gold">-->
-<!--            <img src="@/assets/img/telegram.png" alt="" class="h-10 w-10"/>-->
-<!--          </a>-->
-
-          <!--          garoosi-->
+        <div v-if="config.config.name === 'garoosi'" class="wrap-fix bottom-0 px-10 pb-3rem flex gap-2 bg-white">
           <a class="w-full" href="tel:09306612518">
             <BasicButton class="w-full" type="primary">تماس با پشتیبانی</BasicButton>
           </a>
@@ -170,6 +162,14 @@
             <img src="@/assets/img/bale.png" alt="" class="h-10 w-10"/>
           </a>
         </div>
+        <div v-else class="wrap-fix bottom-0 px-10 pb-3rem flex gap-2 bg-white">
+          <a class="w-full" href="tel:">
+            <BasicButton class="w-full" type="primary">تماس با پشتیبانی</BasicButton>
+          </a>
+          <a href="https://ble.ir/">
+            <img src="@/assets/img/bale.png" alt="" class="h-10 w-10"/>
+          </a>
+        </div>
       </div>
     </div>
     <!--    <ActionSheet v-model:show="editPassVisible">salam</ActionSheet>-->
@@ -194,7 +194,7 @@ import { updateMe } from '@/api/me'
 import { useUserStore } from '@/store/userStore'
 import BaseDatePicker from '@/components/BasicPacks/BaseDatePicker'
 import {useConfigStore} from "../../../store/configStore";
-
+const config=useConfigStore()
 const userFormState = ref<User>({
   fname: '',
   lname: '',
diff --git a/src/views/base/rules/permissions/permissions.vue b/src/views/base/rules/permissions/permissions.vue
index 7aa3f65..8c61484 100644
--- a/src/views/base/rules/permissions/permissions.vue
+++ b/src/views/base/rules/permissions/permissions.vue
@@ -16,7 +16,7 @@
           <div class=" font-bold text-sm text-primary text-center">جواز کسب و کار</div>
 <!--          <img :src="permission1" alt="" class="w-full">-->
           <div class="mt-5 text-xs"></div>
-          <div v-if="config.config.name === 'garoosi'" class="wrap-fix bottom-0 px-2 py-6 flex gap-2 bg-white">
+          <div v-if="config.config.name === 'garoosi'" class="wrap-fix bottom-0 px-10 pb-3rem flex gap-2 bg-white">
             <a class="w-full" href="tel:09306612518">
               <BasicButton class="w-full" type="primary">تماس با پشتیبانی</BasicButton>
             </a>
@@ -24,13 +24,13 @@
               <img src="@/assets/img/bale.png" alt="" class="h-10 w-10"/>
             </a>
           </div>
-          <div v-else class="wrap-fix bottom-0 px-2 py-6 flex gap-2 bg-white">
-<!--            <a href="https://t.me/saminn_gold">-->
-              <img src="@/assets/img/telegram.png" alt="" class="h-10 w-10"/>
-<!--            </a>-->
-<!--            <a class="w-full" href="tel:09306612518">-->
+          <div v-else class="wrap-fix bottom-0 px-10 pb-3rem flex gap-2 bg-white">
+            <a class="w-full" href="tel:">
               <BasicButton class="w-full" type="primary">تماس با پشتیبانی</BasicButton>
-<!--            </a>-->
+            </a>
+            <a href="https://ble.ir/">
+              <img src="@/assets/img/bale.png" alt="" class="h-10 w-10"/>
+            </a>
           </div>
         </div>
       </div>
diff --git a/src/views/base/transactions/components/Item.vue b/src/views/base/transactions/components/Item.vue
index 194efcb..3acd3d4 100644
--- a/src/views/base/transactions/components/Item.vue
+++ b/src/views/base/transactions/components/Item.vue
@@ -45,7 +45,7 @@
     <a-divider class="!my-3" />
     <BasicActionSheet v-model:show="infoVisible">
       <div class="font-bold text-lg">{{ props.item.title }}</div>
-      <div class="pb-20 mt-5">
+      <div class="mb-8rem mt-5">
         <div class="flex justify-between mb-3">
           <div class="text-primary">مبلغ:</div>
           <div :class="item.cash > 0? 'text-green-600' : 'text-red-600'" class="flex text-xs items-center number-ltr">
diff --git a/src/views/base/user/index.vue b/src/views/base/user/index.vue
index 5ca8649..b604a68 100644
--- a/src/views/base/user/index.vue
+++ b/src/views/base/user/index.vue
@@ -2,17 +2,17 @@
   <div class="relative">
     <div>
       <!--        <img :src="gr_bottom" alt="" class="absolute bottom-20">-->
-      <img :src="img" alt="" class="mt-2 w-full absolute bottom-0"/>
+      <img :src="img" alt="" class="mt-2 w-full absolute bottom-0" />
     </div>
     <div class="bg-white w-full py-3 px-3 text-primary font-bold drop-shadow flex">
       <div @click="router.back()" class="cursor-pointer">
-        <BasicIcon icon="vuesax-linear:arrow-right-1"/>
+        <BasicIcon icon="vuesax-linear:arrow-right-1" />
       </div>
       <div class="mr-2 mt-2">اطلاعات حساب کاربری</div>
     </div>
     <div class="pt-16 pb-8 z-30 relative">
       <div
-          class="border-gray-200 border-1 rounded-xl p-5 trans flex flex-col items-center mx-5 z-1000 relative bg-white shadow-lg"
+        class="border-gray-200 border-1 rounded-xl p-5 trans flex flex-col items-center mx-5 z-1000 relative bg-white shadow-lg"
       >
         <div class="text-primary font-bold w-full text-center flex justify-between">
           نام و نام خانوادگی:
@@ -23,8 +23,8 @@
           <div class="mr-2">{{ userStore.userInfo?.mobile }}</div>
         </div>
         <div
-            v-if="userStore.userInfo?.referral_id"
-            class="text-primary font-bold w-full text-center flex justify-between gap-2 items-center"
+          v-if="userStore.userInfo?.referral_id"
+          class="text-primary font-bold w-full text-center flex justify-between gap-2 items-center"
         >
           کد معرف:
           <div class="flex gap-2">
@@ -38,117 +38,117 @@
         </div>
         <div class="w-full flex gap-2 mt-1">
           <BasicButton
-              icon="vuesax-linear:share"
-              size="small"
-              class="flex-1"
-              icon-size="18"
-              @click.stop="shareCode()"
+            icon="vuesax-linear:share"
+            size="small"
+            class="flex-1"
+            icon-size="18"
+            @click.stop="shareCode()"
           >
             {{ getConfigApp('name') == 'garoosi' ? 'دعوت از دوستان' : ' اشتراک گذاری' }}
           </BasicButton>
           <BasicButton
-              icon="vuesax-linear:copy"
-              size="small"
-              class="flex-1"
-              icon-size="18"
-              @click.stop="copyCode()"
+            icon="vuesax-linear:copy"
+            size="small"
+            class="flex-1"
+            icon-size="18"
+            @click.stop="copyCode()"
           >
             رونوشت
           </BasicButton>
         </div>
         <BasicButton
-            class="mt-5 w-full"
-            icon=""
-            iconSize="18"
-            size="large"
-            type="primary"
-            @click="editPassVisible = true"
+          class="mt-5 w-full"
+          icon=""
+          iconSize="18"
+          size="large"
+          type="primary"
+          @click="editPassVisible = true"
         >
           <div class="flex">
-            <BasicIcon icon="vuesax-linear:eye" class="absolute right-8"/>
+            <BasicIcon icon="vuesax-linear:eye" class="absolute right-8" />
             <div>ویرایش اطلاعات کاربری</div>
           </div>
         </BasicButton>
         <div class="h-45vh overflow-y-auto mt-4">
           <BasicButton
-              class="mt-2 w-full"
-              icon=""
-              iconSize="18"
-              size="large"
-              @click="editPasswordVisible = true"
-              :key="10"
+            class="mt-2 w-full"
+            icon=""
+            iconSize="18"
+            size="large"
+            @click="editPasswordVisible = true"
+            :key="10"
           >
             <div class="flex">
-              <BasicIcon icon="vuesax-linear:lock" class="absolute right-8"/>
+              <BasicIcon icon="vuesax-linear:lock" class="absolute right-8" />
               <div>تغییر رمز عبور</div>
             </div>
           </BasicButton>
           <BasicButton
-              class="w-full mt-2"
-              size="large"
-              @click="$router.push({ name: 'address' })"
+            class="w-full mt-2"
+            size="large"
+            @click="$router.push({ name: 'address' })"
           >
             <div class="flex">
-              <BasicIcon icon="vuesax-linear:map" class="absolute right-8"/>
+              <BasicIcon icon="vuesax-linear:map" class="absolute right-8" />
               <div>آدرس ها</div>
             </div>
           </BasicButton>
           <BasicButton
-              class="w-full mt-2"
-              size="large"
-              @click="$router.push({ name: 'notifyTrigger' })"
+            class="w-full mt-2"
+            size="large"
+            @click="$router.push({ name: 'notifyTrigger' })"
           >
             <div class="flex">
-              <BasicIcon icon="vuesax-linear:bill" class="absolute right-8"/>
+              <BasicIcon icon="vuesax-linear:bill" class="absolute right-8" />
               <div>هشدار قیمت</div>
             </div>
           </BasicButton>
           <BasicButton
-              class="mt-2 w-full"
-              icon=""
-              iconSize="18"
-              size="large"
-              @click="$router.push({ name: 'about' })"
+            class="mt-2 w-full"
+            icon=""
+            iconSize="18"
+            size="large"
+            @click="$router.push({ name: 'about' })"
           >
             <div class="flex">
-              <BasicIcon icon="vuesax-linear:info-circle" class="absolute right-8"/>
+              <BasicIcon icon="vuesax-linear:info-circle" class="absolute right-8" />
               <div>درباره ما</div>
             </div>
           </BasicButton>
           <BasicButton
-              v-if="getConfigApp('name')=='garoosi'"
-              class="mt-2 w-full"
-              icon=""
-              iconSize="18"
-              size="large"
-              @click="$router.push({ name: 'giftCard' })"
+            v-if="getConfigApp('name')=='garoosi'"
+            class="mt-2 w-full"
+            icon=""
+            iconSize="18"
+            size="large"
+            @click="$router.push({ name: 'giftCard' })"
           >
             <div class="flex">
-              <BasicIcon icon="vuesax-linear:gift" class="absolute right-8"/>
+              <BasicIcon icon="vuesax-linear:gift" class="absolute right-8" />
               <div>ثبت کارت هدیه</div>
             </div>
           </BasicButton>
           <BasicButton
-              class="mt-2 w-full"
-              icon=""
-              iconSize="18"
-              size="large"
-              @click="$router.push({ name: 'physicalReceive' })"
+            class="mt-2 w-full"
+            icon=""
+            iconSize="18"
+            size="large"
+            @click="$router.push({ name: 'physicalReceive' })"
           >
             <div class="flex">
-              <BasicIcon icon="vuesax-linear:direct-inbox" class="absolute right-8"/>
+              <BasicIcon icon="vuesax-linear:direct-inbox" class="absolute right-8" />
               <div>دریافت طلای فیزیکی</div>
             </div>
           </BasicButton>
           <BasicButton
-              class="mt-2 w-full"
-              icon=""
-              iconSize="18"
-              size="large"
-              @click="$router.push({ name: 'rules' })"
+            class="mt-2 w-full"
+            icon=""
+            iconSize="18"
+            size="large"
+            @click="$router.push({ name: 'rules' })"
           >
             <div class="flex">
-              <BasicIcon icon="vuesax-linear:task" class="absolute right-8"/>
+              <BasicIcon icon="vuesax-linear:task" class="absolute right-8" />
               <div>قوانین و مقررات</div>
             </div>
           </BasicButton>
@@ -184,38 +184,38 @@
       <div class="flex justify-center justify-between">
         <div class="font-bold text-lg">ویرایش اطلاعات</div>
         <div class="flex flex-col justify-center items-center">
-          <BasicIcon :icon="isLegal.icon" size="30" :class="isLegal.color"/>
+          <BasicIcon :icon="isLegal.icon" size="30" :class="isLegal.color" />
           <p class="text-[10px] mt-1" :class="isLegal.color">{{ isLegal.title }}</p>
         </div>
       </div>
       <div class="h60vh overflow-y-auto pb20">
         <a-form ref="formRef" :model="userFormState" class="!mt-5" name="basic" @finish="ok">
           <a-form-item :rules="[isValidPersian()]" label="نام" name="fname">
-            <BasicInput v-model:value="userFormState.fname"/>
+            <BasicInput v-model:value="userFormState.fname" />
           </a-form-item>
           <a-form-item :rules="[isValidPersian()]" label="نام خانوادگی" name="lname">
-            <BasicInput v-model:value="userFormState.lname"/>
+            <BasicInput v-model:value="userFormState.lname" />
           </a-form-item>
           <a-form-item label="تاریخ تولد" name="birth_date">
-            <BaseDatePicker v-model:value="userFormState.birth_date" class="w-full" inputReadOnly/>
+            <BaseDatePicker v-model:value="userFormState.birth_date" class="w-full" inputReadOnly />
           </a-form-item>
           <a-form-item :rules="[requireNationalCode()]" label="شماره ملی" name="n_code">
             <BasicInput v-model:value="userFormState.n_code" type="number"
-                        :disabled="userFormState.is_legal == 1 || userFormState.is_legal == 2"/>
+                        :disabled="userFormState.is_legal == 1 || userFormState.is_legal == 2" />
           </a-form-item>
           <a-form-item label="نام شهر" name="city">
-            <BasicInput v-model:value="userFormState.city"/>
+            <BasicInput v-model:value="userFormState.city" />
           </a-form-item>
           <a-form-item>
             <div class="wrap-fix md:w-[395px] bottom-5 px-3">
               <BasicButton
-                  :disabled="loading"
-                  class="w-full py-2 mb-20"
-                  html-type="submit"
-                  type="primary"
+                :disabled="loading"
+                class="w-full py-2 mb-20"
+                html-type="submit"
+                type="primary"
               >
                 <div>
-                  <a-spin v-if="loading" size="small"/>
+                  <a-spin v-if="loading" size="small" />
                   <div v-else>ثبت</div>
                 </div>
               </BasicButton>
@@ -226,41 +226,39 @@
     </BasicActionSheet>
     <BasicActionSheet v-model:show="editPasswordVisible">
       <div class="font-bold text-lg">ویرایش رمزعبور</div>
-      <div class="h30vh overflow-y-auto pb20">
+      <div class="h35vh overflow-y-auto">
         <a-form
-            ref="formPassRef"
-            :model="userPassForm"
-            class="!mt-5"
-            name="basic"
-            @finish="submitPassForm"
+          ref="formPassRef"
+          :model="userPassForm"
+          class="!mt-5"
+          name="basic"
+          @finish="submitPassForm"
         >
           <a-form-item label="کلمه عبور جدید" :rules="passwordRules()" name="password">
-            <BasicInput v-model:value="userPassForm.password" isPassword place-holder="کلمه عبور "/>
+            <BasicInput v-model:value="userPassForm.password" isPassword place-holder="کلمه عبور " />
             <div
-                :class="[
+              :class="[
                 guideTypePassword.color,
                 userPassForm.password.length >= 6 ? 'block' : 'hidden'
               ]"
-                class="text-[12px] mt-1"
+              class="text-[12px] mt-1"
             >
               {{ guideTypePassword.text }}
             </div>
           </a-form-item>
-          <a-form-item>
-            <div class="wrap-fix md:w-[395px] bottom-5 px-3">
-              <BasicButton
-                  :disabled="loading"
-                  class="w-full py-2 mb-20"
-                  html-type="submit"
-                  type="primary"
-              >
-                <div>
-                  <a-spin v-if="loading" size="small"/>
-                  <div v-else>ثبت</div>
-                </div>
-              </BasicButton>
-            </div>
-          </a-form-item>
+          <div class=" md:w-[395px] pt-3rem px-3">
+            <BasicButton
+              :disabled="loading"
+              class="w-full py-2 mb-20"
+              html-type="submit"
+              type="primary"
+            >
+              <div>
+                <a-spin v-if="loading" size="small" />
+                <div v-else>ثبت</div>
+              </div>
+            </BasicButton>
+          </div>
         </a-form>
       </div>
     </BasicActionSheet>
@@ -268,10 +266,10 @@
 </template>
 
 <script lang="ts" setup>
-import {onMounted, reactive, ref, computed} from 'vue'
+import { onMounted, reactive, ref, computed } from 'vue'
 import img from '@/assets/img/user_ly1.svg'
 import gr_bottom from './assets/img/gr_bottom_white.svg'
-import {loading} from '@/utils'
+import { loading } from '@/utils'
 import BasicButton from '@/components/BasicPacks/BasicButton.vue'
 import BasicActionSheet from '@/components/BasicPacks/BasicActionSheet.vue'
 import {
@@ -280,19 +278,19 @@ import {
   requireNationalCode,
   passwordRules,
   guideTypePassword,
-  isValidPersian,
+  isValidPersian
 } from '@/utils/inputRules'
 import BasicInput from '@/components/BasicPacks/BasicInput.vue'
-import type {User, Password} from '@/models/login'
+import type { User, Password } from '@/models/login'
 import BasicIcon from '@/components/BasicPacks/BasicIcon.vue'
 import router from '@/router'
-import type {FormInstance} from 'ant-design-vue'
-import {message} from 'ant-design-vue'
-import {updateMe, updatePass} from '@/api/me'
-import {useUserStore} from '@/store/userStore'
+import type { FormInstance } from 'ant-design-vue'
+import { message } from 'ant-design-vue'
+import { updateMe, updatePass } from '@/api/me'
+import { useUserStore } from '@/store/userStore'
 import BaseDatePicker from '@/components/BasicPacks/BaseDatePicker'
-import {useConfigStore} from "@/store/configStore";
-import {getConfigApp} from "../../../utils/config";
+import { useConfigStore } from '@/store/configStore'
+import { getConfigApp } from '../../../utils/config'
 
 const userFormState = ref<User>({
   fname: '',
@@ -476,7 +474,7 @@ onMounted(() => {
 .relative {
   overflow-y: auto;
   max-height: 100vh;
-//scroll-behavior: smooth;
+  //scroll-behavior: smooth;
 }
 
 .fixed {
diff --git a/src/views/base/wallet/index.vue b/src/views/base/wallet/index.vue
index be46cd7..cc6741c 100644
--- a/src/views/base/wallet/index.vue
+++ b/src/views/base/wallet/index.vue
@@ -28,7 +28,7 @@
         ></div>
       </div>
     </div>
-    <div class="px-5 pt-26 pb-2">
+    <div class="px-5 pt-26" :class="isDeposit ? 'pb-2' : 'pb-[calc(var(--app-bottom-chrome-height)+var(--app-add-card-height)+1rem)]'">
       <a-form :model="form" class="!mt-5" name="basic" @finish="ok()">
         <div class="border-gray-200 border-1 rounded-xl p-5 trans h-40 relative">
           <bg_main />
@@ -118,18 +118,8 @@
       <!--      <Slider/>-->
       <Transition mode="out-in" name="fade">
         <template v-if="!isDeposit">
-          <!--        <MySlider v-if="cardItems.length > 0" :items="cardItems" class="mt-[5vh] pb-[25vh] mb-[16vh]"
-                            style="touch-action: none"/>-->
-          <CardSlider
-            v-if="cardItems.length > 0"
-            :items="cardItems"
-            v-model:id="form.card_id"
-            class="card-slider-wrap mt-[2vh] px-3 fixed bottom-10 right-0 left-0"
-            style="touch-action: none"
-            @cardDeleted="getCards"
-          />
           <div
-            v-else-if="!loading && cardItems.length === 0"
+            v-if="!loading && cardItems.length === 0"
             class="h-30 flex items-center justify-center"
           >
             هیچ کارتی یافت نشد
@@ -137,16 +127,29 @@
         </template>
       </Transition>
     </div>
-    <Transition mode="out-in" name="fade">
+
+    <Teleport to="body">
+      <CardSlider
+        v-if="!isDeposit && cardItems.length > 0"
+        v-model:id="form.card_id"
+        :items="cardItems"
+        class="card-slider-wrap wallet-card-slider"
+        @cardDeleted="getCards"
+      />
+    </Teleport>
+
+    <Teleport to="body">
       <div
-        v-if="!isDeposit"
-        class="add-card fixed bottom-0 h-[18vh] bg-[#FBFBFC] w-full shadow-lg rounded-3xl flex justify-center pt-3 z-200"
-        style="box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 26px 11px"
+        v-if="!isDeposit && !showAddCard"
+        class="add-card app-dock-add-bar"
         @click="showAddCard = true"
       >
         <div>افزودن کارت جدید</div>
         <BasicIcon icon="vuesax-linear:add" />
-        <BasicActionSheet v-model:show="showAddCard" class="!max-h-[95vh]">
+      </div>
+    </Teleport>
+
+    <BasicActionSheet v-model:show="showAddCard" class="!max-h-[95vh]">
           <div class="font-bold text-lg">افزودن کارت</div>
           <div class="mt-4 text-red-600 font-bold">توجه : حتما شماره کارت صاحب حساب نرم افزار وارد شود.</div>
           <div class="pb-20 mt-5">
@@ -200,12 +203,10 @@
                 <a-spin v-if="loading" size="small" />
                 <div v-else>ثبت</div>
               </BasicButton>
-              <BasicButton class="w-full mt-2" @click="showAddCard = false">بازگشت</BasicButton>
+              <BasicButton class="w-full mt-2 mb-8" @click="showAddCard = false">بازگشت</BasicButton>
             </a-form>
           </div>
-        </BasicActionSheet>
-      </div>
-    </Transition>
+    </BasicActionSheet>
     <DialogVant v-model:show="showConfirmCode" :closeOnClickOverlay="true" :timeOut="-1">
       <template v-slot:title>
         <div>
@@ -315,7 +316,6 @@
             پیام به پشتیبانی
           </a>
         </BasicButton>
-
       </div>
       <div v-else class="text-center">
         <div class=" font-bold text-red-600">مشتریان گرامی</div>
@@ -729,10 +729,4 @@ async function handleOnComplete(value: string) {
     margin: 0 auto;
   }
 }
-
-@media screen and (min-width: 426px) {
-  .add-card {
-    position: absolute;
-  }
-}
 </style>
diff --git a/uno.config.ts b/uno.config.ts
index a64bb28..71f1929 100644
--- a/uno.config.ts
+++ b/uno.config.ts
@@ -6,7 +6,11 @@ import {
 
 export default defineConfig({
     shortcuts: [
-        // ...
+        ['wallet-dock-width', 'fixed inset-x-0 w-full max-w-[426px] mx-auto left-0 right-0'],
+        /* z-index زیر منو (5000)؛ fixed تا با اسکرول جابه‌جا نشود */
+        ['app-dock-add-bar', 'wallet-dock-width !fixed bottom-[var(--app-bottom-chrome-height)] z-[4500] h-[var(--app-add-card-height)] flex items-center justify-center gap-1 rounded-t-3xl bg-[#FBFBFC] shadow-[0_1px_26px_11px_rgba(0,0,0,0.1)] cursor-pointer'],
+        ['wallet-add-card-bar', 'app-dock-add-bar'],
+        ['wallet-card-slider', 'wallet-dock-width !fixed bottom-[calc(var(--app-bottom-chrome-height)+var(--app-add-card-height))] z-[4500] px-3 touch-none'],
     ],
     theme: {
         colors: {