diff --git a/src/components/layout/default.vue b/src/components/layout/default.vue
index 1e35439..cc68ca6 100644
--- a/src/components/layout/default.vue
+++ b/src/components/layout/default.vue
@@ -10,37 +10,52 @@ const { t } = useI18n();
       <ion-router-outlet />
       <ion-tab-bar slot="bottom">
         <ion-tab-button tab="riwa" href="/layout/riwa">
-          <ion-icon aria-hidden="true" :icon="compass" />
-          <ion-label>{{ t('tabs.riwa') }}</ion-label>
+          <div class="flex-col-center gap-1">
+            <ion-icon aria-hidden="true" :icon="compass" class="icon" />
+            <ion-label>{{ t('tabs.riwa') }}</ion-label>
+          </div>
         </ion-tab-button>
 
         <ion-tab-button tab="market" href="/layout/market">
-          <ion-icon aria-hidden="true" :icon="cellular" />
-          <ion-label>{{ t('tabs.market') }}</ion-label>
+          <div class="flex-col-center gap-1">
+            <ion-icon aria-hidden="true" :icon="cellular" class="icon" />
+            <ion-label>{{ t('tabs.market') }}</ion-label>
+          </div>
         </ion-tab-button>
 
         <ion-tab-button tab="trade" href="/layout/trade">
-          <ion-icon aria-hidden="true" :icon="swapHorizontal" />
-          <ion-label>{{ t('tabs.trade') }}</ion-label>
+          <div class="flex-col-center gap-1">
+            <ion-icon aria-hidden="true" :icon="swapHorizontal" class="icon" />
+            <ion-label>{{ t('tabs.trade') }}</ion-label>
+          </div>
         </ion-tab-button>
 
         <ion-tab-button tab="chat" href="/layout/chat">
-          <ion-icon aria-hidden="true" :icon="chatboxEllipses" />
-          <ion-label>{{ t('tabs.chat') }}</ion-label>
+          <div class="flex-col-center gap-1">
+            <ion-icon aria-hidden="true" :icon="chatboxEllipses" class="icon" />
+            <ion-label>{{ t('tabs.chat') }}</ion-label>
+          </div>
         </ion-tab-button>
 
         <ion-tab-button tab="user" href="/layout/user">
-          <ion-icon aria-hidden="true" :icon="personCircle" />
-          <ion-label>{{ t('tabs.user') }}</ion-label>
+          <div class="flex-col-center gap-1">
+            <ion-icon aria-hidden="true" :icon="personCircle" class="icon" />
+            <ion-label>{{ t('tabs.user') }}</ion-label>
+          </div>
         </ion-tab-button>
       </ion-tab-bar>
     </ion-tabs>
   </ion-page>
 </template>
 
-<style scoped>
+<style  scoped>
 ion-tab-bar {
   height: 60px;
   --background: var(--ion-background-color);
+  box-shadow: 0px 0px 12px rgba(45, 213, 90, 0.21);
+  padding-bottom: var(--ion-safe-area-bottom);
+}
+.icon {
+  font-size: 1.5rem;
 }
 </style>