diff --git a/src/components/UptimeBar.vue b/src/components/UptimeBar.vue
index 726801bd..2481eb6f 100644
--- a/src/components/UptimeBar.vue
+++ b/src/components/UptimeBar.vue
@@ -25,7 +25,7 @@ const bars = computed(() => {
 });
 </script>
 <template>
-  <div class="d-flex items-center justify-evenly">
+  <div class="flex items-center justify-evenly">
     <div class="cursor-default" v-for="(item, index) in bars" :key="index">
       <div class="tooltip" :data-tip="item.height">
         <span
diff --git a/src/modules/[chain]/staking/[validator].vue b/src/modules/[chain]/staking/[validator].vue
index e8745400..1e82e2c3 100644
--- a/src/modules/[chain]/staking/[validator].vue
+++ b/src/modules/[chain]/staking/[validator].vue
@@ -249,7 +249,7 @@ onMounted(() => {
                 <Icon icon="mdi-account-tie" class="text-3xl" />
               </div>
 
-              <div class="ml-3 d-flex flex-column justify-center">
+              <div class="ml-3 flex flex-column justify-center">
                 <h4>
                   {{ v.min_self_delegation }} {{ staking.params.bond_denom }}
                 </h4>
diff --git a/src/plugins/vuetify/@core/components/AddAuthenticatorAppDialog.vue b/src/plugins/vuetify/@core/components/AddAuthenticatorAppDialog.vue
index 809766da..3ac06411 100644
--- a/src/plugins/vuetify/@core/components/AddAuthenticatorAppDialog.vue
+++ b/src/plugins/vuetify/@core/components/AddAuthenticatorAppDialog.vue
@@ -72,7 +72,7 @@ const resetAuthCode = () => {
             class="mb-4"
           />
 
-          <div class="d-flex justify-end flex-wrap gap-3">
+          <div class="flex justify-end flex-wrap gap-3">
             <VBtn
               color="secondary"
               variant="tonal"
diff --git a/src/plugins/vuetify/@core/components/AddEditAddressDialog.vue b/src/plugins/vuetify/@core/components/AddEditAddressDialog.vue
index 9844eaf4..0dc72fe8 100644
--- a/src/plugins/vuetify/@core/components/AddEditAddressDialog.vue
+++ b/src/plugins/vuetify/@core/components/AddEditAddressDialog.vue
@@ -109,7 +109,7 @@ const addressTypes = [
 --v-border-opacity: 1;"
               @click="selectedAddress = type.title"
             >
-              <div class="d-flex align-center font-weight-medium gap-2 text-xl mb-1">
+              <div class="flex align-center font-weight-medium gap-2 text-xl mb-1">
                 <VIcon
                   size="24"
                   :icon="type.icon"
diff --git a/src/plugins/vuetify/@core/components/AppBarSearch.vue b/src/plugins/vuetify/@core/components/AppBarSearch.vue
index 3af17c3a..da998199 100644
--- a/src/plugins/vuetify/@core/components/AppBarSearch.vue
+++ b/src/plugins/vuetify/@core/components/AppBarSearch.vue
@@ -141,7 +141,7 @@ const resolveCategories = (val: string) => {
 
           <!-- 👉 Append Inner -->
           <template #append-inner>
-            <div class="d-flex align-center mt-n1">
+            <div class="flex align-center mt-n1">
               <div
                 class="text-base text-disabled cursor-pointer me-2"
                 @click="clearSearchAndCloseDialog"
@@ -274,12 +274,12 @@ const resolveCategories = (val: string) => {
         >
           <slot name="noData">
             <VCardText class="h-100">
-              <div class="app-bar-search-suggestions d-flex flex-column align-center justify-center text-high-emphasis h-100">
+              <div class="app-bar-search-suggestions flex flex-column align-center justify-center text-high-emphasis h-100">
                 <VIcon
                   size="75"
                   icon="mdi-file-remove-outline"
                 />
-                <div class="d-flex align-center flex-wrap justify-center gap-2 text-h6 my-3">
+                <div class="flex align-center flex-wrap justify-center gap-2 text-h6 my-3">
                   <span>No Result For </span>
                   <span>"{{ searchQuery }}"</span>
                 </div>
@@ -287,7 +287,7 @@ const resolveCategories = (val: string) => {
                   v-if="props.noDataSuggestion"
                   class="mt-8"
                 >
-                  <span class="d-flex justify-center text-disabled">Try searching for</span>
+                  <span class="flex justify-center text-disabled">Try searching for</span>
                   <h6
                     v-for="suggestion in props.noDataSuggestion"
                     :key="suggestion.title"
diff --git a/src/plugins/vuetify/@core/components/AppCardCode.vue b/src/plugins/vuetify/@core/components/AppCardCode.vue
index 2abb1248..4e41ce0e 100644
--- a/src/plugins/vuetify/@core/components/AppCardCode.vue
+++ b/src/plugins/vuetify/@core/components/AppCardCode.vue
@@ -53,8 +53,8 @@ const { copy, copied } = useClipboard({ source: computed(() => props.code[prefer
       <div v-show="isCodeShown">
         <VDivider />
 
-        <VCardText class="d-flex gap-y-3 flex-column">
-          <div class="d-flex justify-end">
+        <VCardText class="flex gap-y-3 flex-column">
+          <div class="flex justify-end">
             <VBtnToggle
               v-model="preferredCodeLanguage"
               mandatory
diff --git a/src/plugins/vuetify/@core/components/AppDrawerHeaderSection.vue b/src/plugins/vuetify/@core/components/AppDrawerHeaderSection.vue
index dbb82605..05a23253 100644
--- a/src/plugins/vuetify/@core/components/AppDrawerHeaderSection.vue
+++ b/src/plugins/vuetify/@core/components/AppDrawerHeaderSection.vue
@@ -11,7 +11,7 @@ defineEmits<Emit>()
 </script>
 
 <template>
-  <div class="px-5 py-3 d-flex align-center bg-var-theme-background">
+  <div class="px-5 py-3 flex align-center bg-var-theme-background">
     <h3 class="font-weight-medium text-xl">
       {{ props.title }}
     </h3>
diff --git a/src/plugins/vuetify/@core/components/AppOtpInput.vue b/src/plugins/vuetify/@core/components/AppOtpInput.vue
index 29fec92d..2fd4dc64 100644
--- a/src/plugins/vuetify/@core/components/AppOtpInput.vue
+++ b/src/plugins/vuetify/@core/components/AppOtpInput.vue
@@ -63,7 +63,7 @@ const handleKeyDown = (event: KeyboardEvent, index: number) => {
     </h6>
     <div
       ref="refOtpComp"
-      class="d-flex align-center gap-4"
+      class="flex align-center gap-4"
     >
       <VTextField
         v-for="i in props.totalInput"
diff --git a/src/plugins/vuetify/@core/components/AppPricing.vue b/src/plugins/vuetify/@core/components/AppPricing.vue
index 74af0b0f..72c9478b 100644
--- a/src/plugins/vuetify/@core/components/AppPricing.vue
+++ b/src/plugins/vuetify/@core/components/AppPricing.vue
@@ -83,7 +83,7 @@ const pricingPlans = [
   </div>
 
   <!-- 👉 Annual and monthly price toggler -->
-  <div class="d-flex align-center justify-center mx-auto py-10">
+  <div class="flex align-center justify-center mx-auto py-10">
     <VLabel
       for="pricing-plan-toggle"
       class="me-2"
@@ -162,7 +162,7 @@ const pricingPlans = [
 
         <!-- 👉 Plan price  -->
         <VCardText class="position-relative text-center">
-          <div class="d-flex justify-center align-center">
+          <div class="flex justify-center align-center">
             <sup class="text-sm font-weight-medium me-1">$</sup>
             <h1 class="text-5xl font-weight-medium text-primary">
               {{ annualMonthlyPlanPriceToggler ? Math.floor(Number(plan.yearlyPrice) / 12) : plan.monthlyPrice }}
diff --git a/src/plugins/vuetify/@core/components/CardStatisticsHorizontal.vue b/src/plugins/vuetify/@core/components/CardStatisticsHorizontal.vue
index 4b5b9216..c019f4ae 100644
--- a/src/plugins/vuetify/@core/components/CardStatisticsHorizontal.vue
+++ b/src/plugins/vuetify/@core/components/CardStatisticsHorizontal.vue
@@ -18,7 +18,7 @@ const isPositive = controlledComputed(() => props.change, () => Math.sign(props.
 
 <template>
   <VCard>
-    <VCardText class="d-flex align-center">
+    <VCardText class="flex align-center">
       <VAvatar
         size="40"
         rounded
@@ -32,8 +32,8 @@ const isPositive = controlledComputed(() => props.change, () => Math.sign(props.
         />
       </VAvatar>
 
-      <div class="d-flex flex-column">
-        <div class="d-flex align-center flex-wrap">
+      <div class="flex flex-column">
+        <div class="flex align-center flex-wrap">
           <h6 class="text-h6">
             {{ kFormatter(props.stats) }}
           </h6>
diff --git a/src/plugins/vuetify/@core/components/CardStatisticsVertical.vue b/src/plugins/vuetify/@core/components/CardStatisticsVertical.vue
index 727af923..dcfb5e89 100644
--- a/src/plugins/vuetify/@core/components/CardStatisticsVertical.vue
+++ b/src/plugins/vuetify/@core/components/CardStatisticsVertical.vue
@@ -17,7 +17,7 @@ const isPositive = controlledComputed(() => props.change, () => Math.sign(props.
 
 <template>
   <VCard>
-    <VCardText class="d-flex align-center">
+    <VCardText class="flex align-center">
       <VAvatar
         v-if="props.icon"
         rounded
@@ -36,7 +36,7 @@ const isPositive = controlledComputed(() => props.change, () => Math.sign(props.
       <div
         v-if="props.change"
         :class="isPositive ? 'text-success' : 'text-error'"
-        class="d-flex align-center text-sm font-weight-medium mt-n4"
+        class="flex align-center text-sm font-weight-medium mt-n4"
       >
         <span>{{ isPositive ? `+${props.change}` : props.change }}%</span>
 
diff --git a/src/plugins/vuetify/@core/components/CardStatisticsWithImages.vue b/src/plugins/vuetify/@core/components/CardStatisticsWithImages.vue
index a6a2900b..02e42207 100644
--- a/src/plugins/vuetify/@core/components/CardStatisticsWithImages.vue
+++ b/src/plugins/vuetify/@core/components/CardStatisticsWithImages.vue
@@ -31,7 +31,7 @@ const isPositive = controlledComputed(() => props.change, () => Math.sign(props.
         {{ props.subtitle }}
       </VChip>
 
-      <div class="d-flex align-center flex-wrap">
+      <div class="flex align-center flex-wrap">
         <h5 class="text-h5 me-2">
           {{ props.stats }}
         </h5>
diff --git a/src/plugins/vuetify/@core/components/CustomCheckboxes.vue b/src/plugins/vuetify/@core/components/CustomCheckboxes.vue
index e3468239..a4781ab5 100644
--- a/src/plugins/vuetify/@core/components/CustomCheckboxes.vue
+++ b/src/plugins/vuetify/@core/components/CustomCheckboxes.vue
@@ -42,7 +42,7 @@ watch(selectedOption, () => {
           />
         </div>
         <div class="flex-grow-1">
-          <div class="d-flex align-center mb-1">
+          <div class="flex align-center mb-1">
             <h6 class="cr-title text-base">
               {{ item.title }}
             </h6>
diff --git a/src/plugins/vuetify/@core/components/CustomCheckboxesWithIcon.vue b/src/plugins/vuetify/@core/components/CustomCheckboxesWithIcon.vue
index 4adbd8f5..fda2e013 100644
--- a/src/plugins/vuetify/@core/components/CustomCheckboxesWithIcon.vue
+++ b/src/plugins/vuetify/@core/components/CustomCheckboxesWithIcon.vue
@@ -35,7 +35,7 @@ watch(selectedOption, () => {
         class="custom-input custom-checkbox rounded cursor-pointer"
         :class="selectedOption.includes(item.value) ? 'active' : ''"
       >
-        <div class="d-flex flex-column align-center text-center gap-2">
+        <div class="flex flex-column align-center text-center gap-2">
           <VIcon
             size="32"
             :icon="item.icon"
diff --git a/src/plugins/vuetify/@core/components/CustomRadios.vue b/src/plugins/vuetify/@core/components/CustomRadios.vue
index 4543cf70..43203f31 100644
--- a/src/plugins/vuetify/@core/components/CustomRadios.vue
+++ b/src/plugins/vuetify/@core/components/CustomRadios.vue
@@ -40,7 +40,7 @@ watch(selectedOption, () => {
             <VRadio :value="item.value" />
           </div>
           <div class="flex-grow-1">
-            <div class="d-flex align-center mb-1">
+            <div class="flex align-center mb-1">
               <h6 class="cr-title text-base">
                 {{ item.title }}
               </h6>
diff --git a/src/plugins/vuetify/@core/components/CustomRadiosWithIcon.vue b/src/plugins/vuetify/@core/components/CustomRadiosWithIcon.vue
index cbf58f68..f3a38c62 100644
--- a/src/plugins/vuetify/@core/components/CustomRadiosWithIcon.vue
+++ b/src/plugins/vuetify/@core/components/CustomRadiosWithIcon.vue
@@ -36,7 +36,7 @@ watch(selectedOption, () => {
           class="custom-input custom-radio rounded cursor-pointer"
           :class="selectedOption === item.value ? 'active' : ''"
         >
-          <div class="d-flex flex-column align-center text-center gap-2">
+          <div class="flex flex-column align-center text-center gap-2">
             <VIcon
               size="32"
               :icon="item.icon"
diff --git a/src/plugins/vuetify/@core/components/EnableOneTimePasswordDialog.vue b/src/plugins/vuetify/@core/components/EnableOneTimePasswordDialog.vue
index 1b56a043..257e37c5 100644
--- a/src/plugins/vuetify/@core/components/EnableOneTimePasswordDialog.vue
+++ b/src/plugins/vuetify/@core/components/EnableOneTimePasswordDialog.vue
@@ -52,7 +52,7 @@ const resetPhoneNumber = () => {
             class="mb-4"
           />
 
-          <div class="d-flex flex-wrap justify-end gap-3">
+          <div class="flex flex-wrap justify-end gap-3">
             <VBtn
               color="secondary"
               variant="tonal"
diff --git a/src/plugins/vuetify/@core/components/Notifications.vue b/src/plugins/vuetify/@core/components/Notifications.vue
index 85a493d3..80716afb 100644
--- a/src/plugins/vuetify/@core/components/Notifications.vue
+++ b/src/plugins/vuetify/@core/components/Notifications.vue
@@ -61,7 +61,7 @@ const markAllReadOrUnread = () => {
         offset="14px"
         :close-on-content-click="false"
       >
-        <VCard class="d-flex flex-column">
+        <VCard class="flex flex-column">
           <!-- 👉 Header -->
           <VCardItem class="notification-section">
             <VCardTitle class="text-lg">
@@ -123,7 +123,7 @@ const markAllReadOrUnread = () => {
 
                   <!-- Slot: Append -->
                   <template #append>
-                    <div class="d-flex flex-column align-center gap-4">
+                    <div class="flex flex-column align-center gap-4">
                       <VBadge
                         dot
                         :color="notification.isRead ? 'primary' : '#a8aaae'"
diff --git a/src/plugins/vuetify/@core/components/ReferAndEarnDialog.vue b/src/plugins/vuetify/@core/components/ReferAndEarnDialog.vue
index 24bc6545..8f4108c2 100644
--- a/src/plugins/vuetify/@core/components/ReferAndEarnDialog.vue
+++ b/src/plugins/vuetify/@core/components/ReferAndEarnDialog.vue
@@ -93,7 +93,7 @@ const referAndEarnSteps = [
           Enter your friend's email address and invite them to join Materio 😍
         </p>
         <VForm
-          class="d-flex align-center gap-4"
+          class="flex align-center gap-4"
           @submit.prevent="() => {}"
         >
           <VTextField
@@ -114,7 +114,7 @@ const referAndEarnSteps = [
           You can also copy and send it or share it on your social media. 🚀
         </p>
         <VForm
-          class="d-flex align-center flex-wrap gap-3"
+          class="flex align-center flex-wrap gap-3"
           @submit.prevent="() => {}"
         >
           <VTextField
@@ -129,7 +129,7 @@ const referAndEarnSteps = [
             </template>
           </VTextField>
 
-          <div class="d-flex gap-3">
+          <div class="flex gap-3">
             <VBtn
               icon
               class="rounded"
diff --git a/src/plugins/vuetify/@core/components/ShareProjectDialog.vue b/src/plugins/vuetify/@core/components/ShareProjectDialog.vue
index fed20ec4..a55b41e4 100644
--- a/src/plugins/vuetify/@core/components/ShareProjectDialog.vue
+++ b/src/plugins/vuetify/@core/components/ShareProjectDialog.vue
@@ -173,8 +173,8 @@ const membersList: Member[] = [
           </VListItem>
         </VList>
 
-        <div class="d-flex justify-space-between flex-wrap gap-3 mt-6">
-          <h6 class="text-sm font-weight-semibold d-flex align-start">
+        <div class="flex justify-space-between flex-wrap gap-3 mt-6">
+          <h6 class="text-sm font-weight-semibold flex align-start">
             <VIcon
               icon="mdi-account-group-outline"
               class="me-2"
diff --git a/src/plugins/vuetify/@core/components/Shortcuts.vue b/src/plugins/vuetify/@core/components/Shortcuts.vue
index 8441f8cb..37a9b2b1 100644
--- a/src/plugins/vuetify/@core/components/Shortcuts.vue
+++ b/src/plugins/vuetify/@core/components/Shortcuts.vue
@@ -32,7 +32,7 @@ const router = useRouter()
       <VCard
         width="340"
         max-height="560"
-        class="d-flex flex-column"
+        class="flex flex-column"
       >
         <VCardItem class="py-4">
           <VCardTitle>Shortcuts</VCardTitle>
diff --git a/src/plugins/vuetify/@core/components/TheCustomizer.vue b/src/plugins/vuetify/@core/components/TheCustomizer.vue
index f81c4861..c2becab8 100644
--- a/src/plugins/vuetify/@core/components/TheCustomizer.vue
+++ b/src/plugins/vuetify/@core/components/TheCustomizer.vue
@@ -86,7 +86,7 @@ const headerValues = computed(() => {
       class="app-customizer"
     >
       <!-- 👉 Header -->
-      <div class="customizer-heading d-flex align-center justify-space-between">
+      <div class="customizer-heading flex align-center justify-space-between">
         <div>
           <h6 class="text-h6">
             THEME CUSTOMIZER
@@ -149,13 +149,13 @@ const headerValues = computed(() => {
           <h6 class="mt-3 text-base font-weight-regular">
             Primary Color
           </h6>
-          <div class="d-flex gap-x-4 mt-2">
+          <div class="flex gap-x-4 mt-2">
             <div
               v-for="(color, index) in colors"
               :key="color"
               style="width: 2.5rem; height: 2.5rem; border-radius: 0.5rem; transition: all 0.25s ease;"
               :style="{ backgroundColor: getBoxColor(initialThemeColors[color], index) }"
-              class="cursor-pointer d-flex align-center justify-center"
+              class="cursor-pointer flex align-center justify-center"
               :class="{ 'elevation-4': vuetifyTheme.current.value.colors.primary === getBoxColor(initialThemeColors[color], index) }"
               @click="setPrimaryColor(getBoxColor(initialThemeColors[color], index))"
             >
@@ -219,7 +219,7 @@ const headerValues = computed(() => {
             />
           </VRadioGroup>
           <!-- 👉 Navbar blur -->
-          <div class="d-flex align-center justify-space-between">
+          <div class="flex align-center justify-space-between">
             <VLabel
               for="customizer-navbar-blur"
               class="text-high-emphasis"
@@ -258,7 +258,7 @@ const headerValues = computed(() => {
           <!-- 👉 Collapsed Menu -->
           <div
             v-if="appContentLayoutNav === AppContentLayoutNav.Vertical"
-            class="d-flex align-center justify-space-between"
+            class="flex align-center justify-space-between"
           >
             <VLabel
               for="customizer-menu-collapsed"
@@ -278,7 +278,7 @@ const headerValues = computed(() => {
           <!-- 👉 Semi Dark Menu -->
           <div
             class="align-center justify-space-between"
-            :class="vuetifyTheme.global.name.value === 'light' && appContentLayoutNav === AppContentLayoutNav.Vertical ? 'd-flex' : 'd-none'"
+            :class="vuetifyTheme.global.name.value === 'light' && appContentLayoutNav === AppContentLayoutNav.Vertical ? 'flex' : 'd-none'"
           >
             <VLabel
               for="customizer-menu-semi-dark"
@@ -300,7 +300,7 @@ const headerValues = computed(() => {
         <!-- SECTION MISC -->
         <CustomizerSection title="MISC">
           <!-- 👉 RTL -->
-          <div class="d-flex align-center justify-space-between">
+          <div class="flex align-center justify-space-between">
             <VLabel
               for="customizer-rtl"
               class="text-high-emphasis"
@@ -321,7 +321,7 @@ const headerValues = computed(() => {
             <VRow>
               <VCol
                 cols="5"
-                class="d-flex align-center"
+                class="flex align-center"
               >
                 <VLabel
                   for="route-transition"
diff --git a/src/plugins/vuetify/@core/components/UserInfoEditDialog.vue b/src/plugins/vuetify/@core/components/UserInfoEditDialog.vue
index 51781eed..9fbbedb9 100644
--- a/src/plugins/vuetify/@core/components/UserInfoEditDialog.vue
+++ b/src/plugins/vuetify/@core/components/UserInfoEditDialog.vue
@@ -204,7 +204,7 @@ const dialogVisibleUpdate = (val: boolean) => {
             <!-- 👉 Submit and Cancel -->
             <VCol
               cols="12"
-              class="d-flex flex-wrap justify-center gap-4"
+              class="flex flex-wrap justify-center gap-4"
             >
               <VBtn type="submit">
                 Submit
diff --git a/src/plugins/vuetify/@core/components/UserUpgradePlanDialog.vue b/src/plugins/vuetify/@core/components/UserUpgradePlanDialog.vue
index 13a900e7..782ceeb8 100644
--- a/src/plugins/vuetify/@core/components/UserUpgradePlanDialog.vue
+++ b/src/plugins/vuetify/@core/components/UserUpgradePlanDialog.vue
@@ -46,7 +46,7 @@ const plansList = [
         </VCardSubtitle>
       </VCardItem>
 
-      <VCardText class="d-flex align-center flex-wrap flex-sm-nowrap px-15">
+      <VCardText class="flex align-center flex-wrap flex-sm-nowrap px-15">
         <VSelect
           v-model="selectedPlan"
           label="Choose Plan"
@@ -67,8 +67,8 @@ const plansList = [
         <p class="font-weight-medium mb-2">
           User current plan is standard plan
         </p>
-        <div class="d-flex justify-space-between flex-wrap">
-          <div class="d-flex align-center me-3">
+        <div class="flex justify-space-between flex-wrap">
+          <div class="flex align-center me-3">
             <sup class="text-primary">$</sup>
             <h3 class="text-h3 font-weight-semibold text-primary">
               99
diff --git a/src/plugins/vuetify/@layouts/components/VerticalNav.vue b/src/plugins/vuetify/@layouts/components/VerticalNav.vue
index 2ff09175..1e8bd4db 100644
--- a/src/plugins/vuetify/@layouts/components/VerticalNav.vue
+++ b/src/plugins/vuetify/@layouts/components/VerticalNav.vue
@@ -74,7 +74,7 @@ const handleNavScroll = (evt: Event) => {
     <!-- 👉 Header -->
     <div class="nav-header">
       <slot name="nav-header">
-        <RouterLink to="/" class="app-logo d-flex align-center gap-x-2 app-title-wrapper">
+        <RouterLink to="/" class="app-logo flex align-center gap-x-2 app-title-wrapper">
           <VNodeRenderer :nodes="config.app.logo" />
 
           <Transition name="vertical-nav-app-title">