diff --git a/apps/app/src/components/card/BaseCardMembership.vue b/apps/app/src/components/card/BaseCardMembership.vue
index 16dc22142..bb193615e 100644
--- a/apps/app/src/components/card/BaseCardMembership.vue
+++ b/apps/app/src/components/card/BaseCardMembership.vue
@@ -1,46 +1,54 @@
 <template>
-    <div class="text-center">
-        <div class="position-relative rounded-circle m-auto gradient-border-xl" style="width: 75px; height: 75px">
-            <div
-                class="position-relative bg-dark rounded-circle d-flex align-items-center justify-content-center"
-                style="z-index: 1; width: 65px; height: 65px"
-            >
-                <i class="fas fa-id-card" style="font-size: 1.5rem" />
-            </div>
-        </div>
-        <b-badge class="mt-2 p-2" variant="primary">
-            <i class="fas fa-trophy me-1 text-opaque" />
-            {{ membership }}
-        </b-badge>
-    </div>
+    <b-card class="border-0 gradient-shadow-xl" style="min-height: 415px">
+        <b-tabs v-model="index" pills justified content-class="mt-3" nav-wrapper-class="text-white">
+            <b-tab>
+                <template #title>
+                    <i class="fas fa-balance-scale me-1" />
+                    Liquidity
+                </template>
+                <hr />
+                <BaseTabLiquidity @change-tab="index = $event" />
+            </b-tab>
+            <b-tab>
+                <template #title>
+                    <i class="fas fa-id-card me-1" />
+                    Membership
+                </template>
+                <hr />
+                <BaseTabDeposit v-if="veStore.lock && !Number(veStore.lock.amount)" @change-tab="index = $event" />
+                <BaseTabWithdraw v-else @change-tab="index = $event" />
+            </b-tab>
+        </b-tabs>
+    </b-card>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue';
 import { mapStores } from 'pinia';
-import { useLiquidityStore } from '../../stores/Liquidity';
 import { useVeStore } from '../../stores/VE';
-import { fromWei } from 'web3-utils';
 
 export default defineComponent({
     name: 'BaseCardMembership',
+    props: {
+        tabIndex: {
+            type: Number,
+            default: 0,
+        },
+    },
     data() {
-        return {};
+        return {
+            index: 0,
+        };
     },
     computed: {
-        ...mapStores(useVeStore, useLiquidityStore),
-        membership() {
-            if (!this.veStore.lock) return;
-            const price = this.liquidityStore.pricing['20USDC-80THX'];
-            const amount = Number(fromWei(String(this.veStore.lock.amount)));
-            const amountInUSD = amount * price;
-
-            if (amountInUSD < 5) return 'No Rank';
-            if (amountInUSD > 5 && amountInUSD < 50) return 'Rookie';
-            if (amountInUSD > 50 && amountInUSD < 500) return 'Pro';
-            if (amountInUSD > 500 && amountInUSD < 5000) return 'Elite';
-            if (amountInUSD > 5000 && amountInUSD < 50000) return 'Master';
-            if (amountInUSD > 50000 && amountInUSD < 500000) return 'Legend';
+        ...mapStores(useVeStore),
+    },
+    watch: {
+        tabIndex: {
+            handler(value: number) {
+                this.index = value;
+            },
+            immediate: true,
         },
     },
     methods: {},
diff --git a/apps/app/src/components/card/BaseCardQuest.vue b/apps/app/src/components/card/BaseCardQuest.vue
index 915d4771e..25def26c9 100644
--- a/apps/app/src/components/card/BaseCardQuest.vue
+++ b/apps/app/src/components/card/BaseCardQuest.vue
@@ -117,11 +117,11 @@
 <script lang="ts">
 import { PropType, defineComponent } from 'vue';
 import { format, formatDistance } from 'date-fns';
-import { QuestVariant } from '@thxnetwork/sdk';
 import { mapStores } from 'pinia';
 import { useAccountStore } from '../../stores/Account';
 import { useQuestStore } from '../../stores/Quest';
 import { decodeHTML } from '@thxnetwork/app/utils/decode-html';
+import { QuestVariant } from '@thxnetwork/sdk/types/enums';
 
 export default defineComponent({
     name: 'BaseCardQuest',
diff --git a/apps/app/src/views/discovery/Earn.vue b/apps/app/src/views/discovery/Earn.vue
index 8747cec79..693d79182 100644
--- a/apps/app/src/views/discovery/Earn.vue
+++ b/apps/app/src/views/discovery/Earn.vue
@@ -39,30 +39,7 @@
             </div>
         </template>
         <template #secondary>
-            <b-card class="border-0 gradient-shadow-xl" style="min-height: 415px">
-                <b-tabs v-model="tabIndex" pills justified content-class="mt-3" nav-wrapper-class="text-white">
-                    <b-tab>
-                        <template #title>
-                            <i class="fas fa-balance-scale me-1" />
-                            Liquidity
-                        </template>
-                        <hr />
-                        <BaseTabLiquidity @change-tab="tabIndex = $event" />
-                    </b-tab>
-                    <b-tab>
-                        <template #title>
-                            <i class="fas fa-id-card me-1" />
-                            Membership
-                        </template>
-                        <hr />
-                        <BaseTabDeposit
-                            v-if="veStore.lock && !Number(veStore.lock.amount)"
-                            @change-tab="tabIndex = $event"
-                        />
-                        <BaseTabWithdraw v-else @change-tab="tabIndex = $event" />
-                    </b-tab>
-                </b-tabs>
-            </b-card>
+            <BaseCardMembership :tab-index="0" />
         </template>
     </BaseCardHeader>
     <b-container class="mb-5">
diff --git a/apps/app/src/views/discovery/Members.vue b/apps/app/src/views/discovery/Members.vue
index df171dc77..8424e21be 100644
--- a/apps/app/src/views/discovery/Members.vue
+++ b/apps/app/src/views/discovery/Members.vue
@@ -11,10 +11,7 @@
             </p>
         </template>
         <template #secondary>
-            <BaseCardMembershipOnboarding v-if="!Number(formatUnits(veStore.lock.amount, 18))" />
-            <div v-else class="h-100 d-flex align-items-center justify-content-center">
-                <BaseCardMembership />
-            </div>
+            <BaseCardMembership :tab-index="1" />
         </template>
     </BaseCardHeader>
     <b-container class="mt-5">
diff --git a/apps/app/vite.config.ts b/apps/app/vite.config.ts
index a8e7b44ec..544ac22c3 100644
--- a/apps/app/vite.config.ts
+++ b/apps/app/vite.config.ts
@@ -35,6 +35,7 @@ const config: UserConfigExport = {
         alias: [
             { find: '@thxnetwork/app', replacement: path.resolve(__dirname, './src') },
             { find: '@thxnetwork/common', replacement: path.resolve(__dirname, '../../libs/common/src/lib') },
+            { find: '@thxnetwork/sdk', replacement: path.resolve(__dirname, '../../libs/sdk/src/lib') },
         ],
     },
     optimizeDeps: {