diff --git a/src/assets/css/tailwind.css b/src/assets/css/tailwind.css
index e490f2752..1ab6b09f3 100644
--- a/src/assets/css/tailwind.css
+++ b/src/assets/css/tailwind.css
@@ -75,6 +75,14 @@
     font-variant-ligatures: no-contextual;
   }
 
+  .button-gradient {
+    background: linear-gradient(258.76deg, #05dbf3 6.02%, #0468be 94.84%);
+  }
+
+  .button-gradient:hover {
+    background: linear-gradient(258.76deg, #05dbf3 30.02%, #0468be 94.84%);
+  }
+
   .text-gradient {
     @apply bg-blue-500;
 
diff --git a/src/assets/data/contracts/alfajores.json b/src/assets/data/contracts/alfajores.json
index 7b4b3fab1..6ca432fab 100644
--- a/src/assets/data/contracts/alfajores.json
+++ b/src/assets/data/contracts/alfajores.json
@@ -69,7 +69,7 @@
   "WeightedPoolFactory": "0x997252b17F61fFc6Ca2fDDd7fa1Cb0cdb98f202D",
   "YearnLinearPoolFactory": "",
   "Multicall": "0xca11bde05977b3631167028862be2a173976ca11",
-  "SimpleMinter": "0xEc9EC0e51DBfA5aB969d91313C64f7eEF0348272",
-  "RFNFT": "0x1D2540EFe05f5b53abABb7Be1780B370Bd3407aE",
-  "RFP": "0x1b5a1fDdd235d9a4c73F061318E017Bb52aCD444"
+  "SimpleMinter": "0x236C4B59f22697aC22C8AC3A6442eBD6f2af9dbF",
+  "RFNFT": "0x976c8244061CC363d1e72d0F1c0B4DBe9a78d483",
+  "RFP": "0x8431584b4DEfaB5f4aDd6A4221161F2Cb6823DE9"
 }
diff --git a/src/assets/images/mocks/NFT.png b/src/assets/images/mocks/NFT.png
index 8644bca2d..eb48cc560 100644
Binary files a/src/assets/images/mocks/NFT.png and b/src/assets/images/mocks/NFT.png differ
diff --git a/src/components/_global/BalBtn/BalBtn.vue b/src/components/_global/BalBtn/BalBtn.vue
index 986e81d6a..0f2e77f56 100644
--- a/src/components/_global/BalBtn/BalBtn.vue
+++ b/src/components/_global/BalBtn/BalBtn.vue
@@ -112,14 +112,16 @@ const bgGradientClasses = computed(() => {
     fromColor = 'pink';
     toColor = 'yellow';
   } else if (props.color === 'gradient-blue-light') {
-    return 'bg-gradient-to-tr from-refi-text to-light-blue hover:from-blue-600 hover:to-blue-400';
+    return 'transition-colors button-gradient ';
   }
   if (props.disabled) {
-    return `bg-gray-300 dark:bg-gray-700 text-white dark:text-gray-500`;
+    return `bg-complementary-b dark:complementary-b text-white `;
   }
   if (props.loading) {
     return `bg-gradient-to-tr ${loadingFrom(fromColor)} ${loadingTo(toColor)}`;
   }
+  if (props.color === 'gradient') return 'transition-colors button-gradient ';
+
   return ` bg-gradient-to-tr ${gradientFrom(fromColor)} ${gradientTo(
     toColor
   )} ${hoverFrom(fromColor)} ${hoverTo(toColor)} transition-colors`;
@@ -257,6 +259,7 @@ const iconColor = computed(() => {
 .bal-btn {
   @apply overflow-hidden tracking-tight;
 
+  padding: 8px !important;
   font-variation-settings: 'wght' 500;
   transition: all 0.2s ease;
   text-decoration: none !important;
diff --git a/src/components/_global/BalDetailsTable/BalDetailsTable.vue b/src/components/_global/BalDetailsTable/BalDetailsTable.vue
index c7d6d3850..3a3cfa5e4 100644
--- a/src/components/_global/BalDetailsTable/BalDetailsTable.vue
+++ b/src/components/_global/BalDetailsTable/BalDetailsTable.vue
@@ -21,7 +21,12 @@ const { upToLargeBreakpoint } = useBreakpoints();
 </script>
 
 <template>
-  <BalCard class="overflow-x-auto" :square="upToLargeBreakpoint" noPad>
+  <BalCard
+    class="overflow-x-auto"
+    :square="upToLargeBreakpoint"
+    :noBorder="upToLargeBreakpoint"
+    noPad
+  >
     <template v-for="(row, i) in tableData" :key="i">
       <div v-if="row" class="table-row">
         <div class="table-row-title">
@@ -54,7 +59,7 @@ const { upToLargeBreakpoint } = useBreakpoints();
 }
 
 .table-row:first-child {
-  @apply font-semibold bg-gray-50 dark:bg-gray-800;
+  @apply font-semibold bg-white  dark:bg-gray-800;
 }
 
 .table-row:last-child {
diff --git a/src/components/_global/BalTable/BalTable.vue b/src/components/_global/BalTable/BalTable.vue
index 41859557d..dc31ce206 100644
--- a/src/components/_global/BalTable/BalTable.vue
+++ b/src/components/_global/BalTable/BalTable.vue
@@ -249,10 +249,10 @@ watch([() => props.data, () => props.isLoading], ([newData]) => {
                 ? 'cursor-pointer'
                 : '',
               column.sortKey && currentSortColumn !== column.id
-                ? 'text-gray-800 hover:text-purple-600 focus:text-blue-500 dark:text-gray-100 dark:hover:text-yellow-500 dark:focus:text-yellow-500 transition-colors'
+                ? 'text-gray-800 hover:text-accent-refi focus:text-refi-text dark:text-gray-100 dark:hover:text-accent-refi dark:focus:text-yellow-500 transition-colors'
                 : '',
               currentSortColumn === column.id && currentSortDirection
-                ? 'text-blue-600 hover:text-blue-500 focus:text-purple-600 dark:text-blue-400 dark:hover:text-blue-600 dark:focus:text-blue-600 transition-colors'
+                ? 'text-refi-text hover:text-blue-500 focus:text-accent-refi dark:text-blue-400 dark:hover:text-refi-text dark:focus:text-refi-text-dark transition-colors'
                 : '',
               !square ? 'rounded-t-lg' : '',
             ]"
diff --git a/src/components/_global/BalTable/TotalsRow.vue b/src/components/_global/BalTable/TotalsRow.vue
index 227161432..fcc5d8e70 100644
--- a/src/components/_global/BalTable/TotalsRow.vue
+++ b/src/components/_global/BalTable/TotalsRow.vue
@@ -36,7 +36,7 @@ function getHorizontalStickyClass(index: number) {
         :class="[
           getHorizontalStickyClass(0),
           isColumnStuck ? 'isSticky' : '',
-          'text-center p-6 bg-white dark:bg-gray-850 border-t dark:border-gray-900 align-center',
+          'p-6 bg-white dark:bg-gray-850 border-t dark:border-gray-900 align-center',
         ]"
       >
         <span class="font-semibold text-left"> Total </span>
diff --git a/src/components/_global/BalTabs/BalTabs.vue b/src/components/_global/BalTabs/BalTabs.vue
index ebaad3d21..933bcb950 100644
--- a/src/components/_global/BalTabs/BalTabs.vue
+++ b/src/components/_global/BalTabs/BalTabs.vue
@@ -22,6 +22,7 @@ function isActiveTab(tab: Tab): boolean {
 }
 
 function onClick(tab: Tab) {
+  console.debug(tab.value);
   emit('selected', tab.value);
   emit('update:modelValue', tab.value);
 }
@@ -34,9 +35,9 @@ const containerClasses = computed(() => {
 
 function stateClasses(tab: Tab): Record<string, boolean> {
   return {
-    'border-b-2 border-blue-600 dark:border-blue-400 text-blue-600 dark:text-blue-400 hover:text-blue-500 dark:border-blue-500 font-semibold':
+    'border-b-2 border-blue-600 dark:border-blue-400 text-refi-text dark:text-refi-text hover:text-blue-500 dark:border-blue-500 font-semibold':
       isActiveTab(tab),
-    'hover:text-purple-600 dark:hover:text-yellow-500 dark:border-gray-700 transition-colors':
+    'hover:text-accent-refi dark:hover:text-accent-refi dark:border-gray-700 transition-colors':
       !isActiveTab(tab),
   };
 }
diff --git a/src/components/contextual/pages/dashboard/Cards/RefiProfileCard.vue b/src/components/contextual/pages/dashboard/Cards/RefiProfileCard.vue
index d364ae550..4684054e8 100644
--- a/src/components/contextual/pages/dashboard/Cards/RefiProfileCard.vue
+++ b/src/components/contextual/pages/dashboard/Cards/RefiProfileCard.vue
@@ -10,9 +10,10 @@ const { isMobile, bp } = useBreakpoints();
 const { NFTData, isLoading, MintNFT, isMintingNFT } = useRFNFT();
 const { isWalletReady } = useWeb3();
 
-const nftImageSrc = computed(() => NFTData.value?.imageData || NFTImage);
-
-//TODO: Remove this ugly method and use a better one like all the info in the NFTData :)
+const nftImageSrc = computed(() => NFTData.value?.imageData);
+const hasNFT = computed(
+  () => !!NFTData.value?.imageData && isWalletReady.value
+);
 const levels = ref([
   { nextLevel: '100', votes: 1 },
   { nextLevel: '250', votes: 10 },
@@ -26,7 +27,12 @@ const levels = ref([
   <template v-if="isMobile">
     <BalCard v-if="bp === 'xs'">
       <div class="flex flex-col gap-5 justify-center items-start px-4 h-fit">
-        <img :src="nftImageSrc" class="w-full h-full rounded-md bg-slate-500" />
+        <img
+          :src="hasNFT ? nftImageSrc : NFTImage"
+          :class="`w-full h-full rounded-md bg-slate-500 ${
+            !hasNFT && 'filter grayscale'
+          }`"
+        />
         <div class="flex flex-col gap-10 w-full">
           <div class="flex flex-col gap-4">
             <h3 v-if="!isWalletReady" class="self-start text-lg">
@@ -80,7 +86,12 @@ const levels = ref([
     </BalCard>
     <BalCard v-else>
       <div class="flex flex-row gap-5 justify-center items-start px-4 h-80">
-        <img :src="nftImageSrc" class="w-48 h-full rounded-md bg-slate-500" />
+        <img
+          :src="hasNFT ? nftImageSrc : NFTImage"
+          :class="`w-48 h-full rounded-md bg-slate-500 ${
+            !hasNFT && 'filter grayscale'
+          }`"
+        />
         <div class="flex flex-col gap-10 w-full">
           <div class="flex flex-col gap-4">
             <h3 v-if="!isWalletReady" class="self-start text-lg">
@@ -139,8 +150,10 @@ const levels = ref([
         class="flex flex-row gap-8 justify-center items-center h-full h-[265px]"
       >
         <img
-          :src="nftImageSrc"
-          class="rounded-md h-[224px] w-[168px] bg-slate-500"
+          :src="hasNFT ? nftImageSrc : NFTImage"
+          :class="`rounded-md h-[224px] w-[168px] bg-slate-500 ${
+            !hasNFT && 'filter grayscale'
+          }`"
         />
         <div class="flex flex-col gap-6 w-full">
           <div class="flex flex-col gap-4">
diff --git a/src/components/contextual/pages/dashboard/Cards/WeeklyCard.vue b/src/components/contextual/pages/dashboard/Cards/WeeklyCard.vue
index 1e6f222ac..10b08752a 100644
--- a/src/components/contextual/pages/dashboard/Cards/WeeklyCard.vue
+++ b/src/components/contextual/pages/dashboard/Cards/WeeklyCard.vue
@@ -7,6 +7,30 @@ type Props = {
   weeklyVolume: number;
 };
 
+const WeeklyTiers = [
+  { level: 1, volume: 0, points: 0 },
+  { level: 2, volume: 5, points: 5 },
+  { level: 3, volume: 250, points: 10 },
+  { level: 4, volume: 1000, points: 20 },
+  { level: 5, volume: 2500, points: 35 },
+  { level: 6, volume: 5000, points: 50 },
+];
+const currentWeeklyTier = computed(() => {
+  const currentTier = WeeklyTiers.find(
+    tier => props.weeklyVolume >= tier.volume
+  );
+  return currentTier ? currentTier : WeeklyTiers[0];
+});
+
+const nextWeeklyTier = computed(() => {
+  const nextTierIndex = WeeklyTiers.findIndex(
+    tier => props.weeklyVolume < tier.volume
+  );
+  return nextTierIndex !== -1
+    ? WeeklyTiers[nextTierIndex]
+    : WeeklyTiers[WeeklyTiers.length - 1];
+});
+
 const props = defineProps<Props>();
 const { toFiatLabel } = useNumbers();
 
@@ -42,7 +66,14 @@ const { isMobile, upToSmallBreakpoint } = useBreakpoints();
               <p v-else class="text-xl">-</p>
             </div>
 
-            <div class="w-full h-10 border-complementary-b border-t-[1px]" />
+            <div
+              class="flex justify-center items-center w-full h-10 border-complementary-b border-t-[1px]"
+            >
+              <p class="w-full text-xs text-center text-complementary">
+                Tier {{ currentWeeklyTier.level }}: +
+                {{ currentWeeklyTier.points }} Points
+              </p>
+            </div>
           </div>
           <div
             class="flex flex-col justify-center items-center pt-5 w-full rounded-md border-complementary-b border-[1px]"
@@ -53,10 +84,20 @@ const { isMobile, upToSmallBreakpoint } = useBreakpoints();
               <h4 class="text-complementary text-[10px]">
                 Volume for next tier
               </h4>
-              <p class="text-xl">-</p>
+              <p v-if="!props.isLoading" class="text-xl">
+                {{ toFiatLabel(nextWeeklyTier.volume) }}
+              </p>
+              <p v-else class="text-xl">-</p>
             </div>
 
-            <div class="w-full h-10 border-complementary-b border-t-[1px]" />
+            <div
+              class="flex justify-center items-center w-full h-10 border-complementary-b border-t-[1px]"
+            >
+              <p class="w-full text-xs text-center text-complementary">
+                Tier {{ nextWeeklyTier.level }}: +{{ nextWeeklyTier.points }}
+                Points
+              </p>
+            </div>
           </div>
         </div>
       </div>
@@ -93,7 +134,14 @@ const { isMobile, upToSmallBreakpoint } = useBreakpoints();
               <p v-else class="text-xl">-</p>
             </div>
 
-            <div class="w-full h-10 border-complementary-b border-t-[1px]" />
+            <div
+              class="flex justify-center items-center w-full h-10 border-complementary-b border-t-[1px]"
+            >
+              <p class="w-full text-xs text-center text-complementary">
+                Tier {{ currentWeeklyTier.level }}: +
+                {{ currentWeeklyTier.points }} Points
+              </p>
+            </div>
           </div>
           <div
             class="flex flex-col justify-center items-center pt-5 w-full rounded-md border-complementary-b border-[1px]"
@@ -104,10 +152,20 @@ const { isMobile, upToSmallBreakpoint } = useBreakpoints();
               <h4 class="text-complementary text-[10px]">
                 Volume for next tier
               </h4>
-              <p class="text-xl">-</p>
+              <p v-if="!props.isLoading" class="text-xl">
+                {{ toFiatLabel(nextWeeklyTier.volume) }}
+              </p>
+              <p v-else class="text-xl">-</p>
             </div>
 
-            <div class="w-full h-10 border-complementary-b border-t-[1px]" />
+            <div
+              class="flex justify-center items-center w-full h-10 border-complementary-b border-t-[1px]"
+            >
+              <p class="w-full text-xs text-center text-complementary">
+                Tier {{ nextWeeklyTier.level }}: +{{ nextWeeklyTier.points }}
+                Points
+              </p>
+            </div>
           </div>
         </div>
       </div>
@@ -145,8 +203,14 @@ const { isMobile, upToSmallBreakpoint } = useBreakpoints();
               </p>
               <p v-else class="text-xl">-</p>
             </div>
-
-            <div class="w-full h-10 border-complementary-b border-t-[1px]" />
+            <div
+              class="flex justify-center items-center w-full h-10 border-complementary-b border-t-[1px]"
+            >
+              <p class="w-full text-xs text-center text-complementary">
+                Tier {{ currentWeeklyTier.level }}: +
+                {{ currentWeeklyTier.points }} Points
+              </p>
+            </div>
           </div>
           <div
             class="flex flex-col justify-center items-center pt-5 w-full rounded-md border-complementary-b border-[1px]"
@@ -157,10 +221,20 @@ const { isMobile, upToSmallBreakpoint } = useBreakpoints();
               <h4 class="text-complementary text-[10px]">
                 Volume for next tier
               </h4>
-              <p class="text-xl">-</p>
+              <p v-if="!props.isLoading" class="text-xl">
+                {{ toFiatLabel(nextWeeklyTier.volume) }}
+              </p>
+              <p v-else class="text-xl">-</p>
             </div>
 
-            <div class="w-full h-10 border-complementary-b border-t-[1px]" />
+            <div
+              class="flex justify-center items-center w-full h-10 border-complementary-b border-t-[1px]"
+            >
+              <p class="w-full text-xs text-center text-complementary">
+                Tier {{ nextWeeklyTier.level }}: +{{ nextWeeklyTier.points }}
+                Points
+              </p>
+            </div>
           </div>
         </div>
       </div>
diff --git a/src/components/contextual/pages/dashboard/DashboardTable/ClaimsTable.vue b/src/components/contextual/pages/dashboard/DashboardTable/ClaimsTable.vue
index b5786d559..1f42ec3b3 100644
--- a/src/components/contextual/pages/dashboard/DashboardTable/ClaimsTable.vue
+++ b/src/components/contextual/pages/dashboard/DashboardTable/ClaimsTable.vue
@@ -5,6 +5,8 @@ import { ColumnDefinition } from '@/components/_global/BalTable/types';
 import useNumbers, { FNumFormats } from '@/composables/useNumbers';
 import RFP from '@/assets/images/icons/coins/RFP.svg';
 import { useAllocations } from '@/composables/campaigns/useAllocations';
+import useWeb3 from '@/services/web3/useWeb3';
+import { configService } from '@/services/config/config.service';
 
 /**
  * TYPES
@@ -28,6 +30,7 @@ const { currentAllocation, isLoading, claimReward } = useAllocations();
 watch(currentAllocation, () => {
   console.debug(currentAllocation.value);
 });
+
 /**
  * STATE
  */
@@ -80,8 +83,16 @@ const rewardsData = [
     value: 'NFT XP',
   },
 ];
+const { isWalletReady, isWalletConnecting } = useWeb3();
 
 const { upToLargeBreakpoint } = useBreakpoints();
+const networkName = configService.network.shortName;
+
+const noPoolsLabel = computed(() => {
+  return isWalletReady.value || isWalletConnecting.value
+    ? t('noRewardsToClaim', [networkName])
+    : t('connectYourWallet');
+});
 
 const hasCurrentAllocation = computed(() => {
   return parseInt(currentAllocation.value as string) > 0;
@@ -98,6 +109,7 @@ const hasCurrentAllocation = computed(() => {
     <BalTable
       :columns="columns"
       sticky="both"
+      :noResultsLabel="noPoolsLabel"
       :data="hasCurrentAllocation ? rewardsData : []"
       :isLoading="isLoading"
       skeletonClass="h-24"
diff --git a/src/components/contextual/pages/dashboard/DashboardTable/LiquidityTable.vue b/src/components/contextual/pages/dashboard/DashboardTable/LiquidityTable.vue
index b9432eb39..9a370c457 100644
--- a/src/components/contextual/pages/dashboard/DashboardTable/LiquidityTable.vue
+++ b/src/components/contextual/pages/dashboard/DashboardTable/LiquidityTable.vue
@@ -45,7 +45,7 @@ const defaultPoolActions = [
  */
 const noPoolsLabel = computed(() => {
   return isWalletReady.value || isWalletConnecting.value
-    ? t('noUnstakedInvestments', [networkName])
+    ? t('noInvestments', [networkName])
     : t('connectYourWallet');
 });
 
diff --git a/src/components/contextual/pages/pool/PoolCompositionDataCard.vue b/src/components/contextual/pages/pool/PoolCompositionDataCard.vue
new file mode 100644
index 000000000..38f64837d
--- /dev/null
+++ b/src/components/contextual/pages/pool/PoolCompositionDataCard.vue
@@ -0,0 +1,133 @@
+<script setup lang="ts">
+import { computed, ref, toRef } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+import { usePoolHelpers } from '@/composables/usePoolHelpers';
+import { Pool } from '@/services/pool/types';
+
+import BoostedActivities from '../BoostedPoolActivities/Activities.vue';
+import Activities from '../PoolActivities/Activities.vue';
+import useWeb3 from '@/services/web3/useWeb3';
+import { PoolTransactionsTab } from './PoolTransactionsCard/types';
+
+/**
+ * TYPES
+ */
+type Props = {
+  pool: Pool;
+  loading: boolean;
+};
+
+/**
+ * PROPS
+ */
+const props = withDefaults(defineProps<Props>(), {
+  loading: false,
+});
+
+/**
+ * COMPOSABLES
+ */
+const { isWalletReady } = useWeb3();
+
+/**
+ * COMPUTED
+ */
+const tabs = computed(() =>
+  isDeepPool.value || isStablePhantomPool.value
+    ? [
+        {
+          value: PoolTransactionsTab.ALL_ACTIVITY,
+          label: t('poolTransactions.tabs.allTransactions'),
+        },
+        ...(isWalletReady.value
+          ? [
+              {
+                value: PoolTransactionsTab.USER_ACTIVITY,
+                label: t('poolTransactions.tabs.myTransactions'),
+              },
+            ]
+          : []),
+      ]
+    : [
+        {
+          value: PoolTransactionsTab.ALL_ACTIVITY,
+          label: t('poolTransactions.tabs.allInvestments'),
+        },
+        ...(isWalletReady.value
+          ? [
+              {
+                value: PoolTransactionsTab.USER_ACTIVITY,
+                label: t('poolTransactions.tabs.myInvestments'),
+              },
+            ]
+          : []),
+      ]
+);
+
+/**
+ * COMPOSABLES
+ */
+const { isDeepPool, isStablePhantomPool } = usePoolHelpers(
+  toRef(props, 'pool')
+);
+const { t } = useI18n();
+
+/**
+ * STATE
+ */
+const activeTab = ref(tabs.value[0].value);
+
+/**
+ * COMPUTED
+ */
+const title = computed((): string => {
+  if (isDeepPool.value || isStablePhantomPool.value) return t('poolActivity');
+
+  return t('liquidityProvision');
+});
+</script>
+
+<template>
+  <div class="mb-5">
+    <div>
+      <h3 class="px-4 lg:px-0 mb-3" v-text="title" />
+      <div
+        class="flex justify-between items-end mx-4 lg:mx-0 mb-6 border-b dark:border-gray-900"
+      >
+        <BalTabs v-model="activeTab" :tabs="tabs" noPad class="-mb-px" />
+      </div>
+    </div>
+
+    <template v-if="isStablePhantomPool || isDeepPool">
+      <BoostedActivities
+        v-if="activeTab === PoolTransactionsTab.ALL_ACTIVITY"
+        :poolActivityType="PoolTransactionsTab.ALL_ACTIVITY"
+        :pool="pool"
+        :loading="loading"
+      />
+      <BoostedActivities
+        v-else-if="activeTab === PoolTransactionsTab.USER_ACTIVITY"
+        :poolActivityType="PoolTransactionsTab.USER_ACTIVITY"
+        :pool="pool"
+        :loading="loading"
+      />
+    </template>
+    <template v-else>
+      <div class="mb-20">
+        <Activities
+          v-if="activeTab === PoolTransactionsTab.ALL_ACTIVITY"
+          :poolActivityType="PoolTransactionsTab.ALL_ACTIVITY"
+          :pool="pool"
+          :loading="loading"
+        />
+        <Activities
+          v-else-if="activeTab === PoolTransactionsTab.USER_ACTIVITY"
+          :poolActivityType="PoolTransactionsTab.USER_ACTIVITY"
+          :pool="pool"
+          :loading="loading"
+        />
+      </div>
+    </template>
+  </div>
+</template>
diff --git a/src/components/contextual/pages/pool/PoolContractDetails.vue b/src/components/contextual/pages/pool/PoolContractDetails.vue
index c57125ec2..f940f6d6a 100644
--- a/src/components/contextual/pages/pool/PoolContractDetails.vue
+++ b/src/components/contextual/pages/pool/PoolContractDetails.vue
@@ -131,34 +131,8 @@ const poolOwnerTooltip = computed(() => {
 
   return '';
 });
-
-const poolManagementText = computed(() => {
-  if (props.pool.poolType === PoolType.Managed) {
-    return t('');
-  }
-
-  if (props.pool.owner === POOLS.ZeroAddress) {
-    return t('poolAttrs.immutable');
-  }
-
-  if (props.pool.owner === POOLS.DelegateOwner) {
-    return t('poolAttrs.immutableFeesEditableByGovernance');
-  }
-
-  return t('poolAttrs.immutableFeesEditableByOwner');
-});
 </script>
 
 <template>
-  <div class="mb-5">
-    <h3 class="px-4 lg:px-0 mb-5" v-text="$t('poolDetails')" />
-
-    <BalDetailsTable class="mb-12" :tableData="data" />
-    <template v-if="poolManagementText">
-      <h4 class="px-4 lg:px-0 mb-2" v-text="$t('poolManagement')" />
-      <div class="px-4 lg:px-0">
-        {{ poolManagementText }}
-      </div>
-    </template>
-  </div>
+  <BalDetailsTable :tableData="data" />
 </template>
diff --git a/src/components/contextual/pages/pool/PoolTransactionsCard/InvestmentTransactions/InvestmentTransactions.vue b/src/components/contextual/pages/pool/PoolTransactionsCard/InvestmentTransactions/InvestmentTransactions.vue
index 35eefc3b4..556bf252a 100644
--- a/src/components/contextual/pages/pool/PoolTransactionsCard/InvestmentTransactions/InvestmentTransactions.vue
+++ b/src/components/contextual/pages/pool/PoolTransactionsCard/InvestmentTransactions/InvestmentTransactions.vue
@@ -9,6 +9,8 @@ import BoostedActivities from '../BoostedPoolActivities/Activities.vue';
 import Activities from '../PoolActivities/Activities.vue';
 import { PoolTransactionsTab } from '../types';
 import useWeb3 from '@/services/web3/useWeb3';
+import { PoolContractDetails } from '../..';
+import SwapTransactions from '../SwapTransactions/SwapTransactions.vue';
 
 /**
  * TYPES
@@ -16,6 +18,8 @@ import useWeb3 from '@/services/web3/useWeb3';
 type Props = {
   pool: Pool;
   loading: boolean;
+  isStablePhantomPool: boolean;
+  isDeepPool: boolean;
 };
 
 /**
@@ -33,37 +37,32 @@ const { isWalletReady } = useWeb3();
 /**
  * COMPUTED
  */
-const tabs = computed(() =>
-  isDeepPool.value || isStablePhantomPool.value
+const tabs = computed(() => [
+  {
+    value: PoolTransactionsTab.ALL_ACTIVITY,
+    label: t('poolTransactions.tabs.myTransactions'),
+  },
+  ...(isWalletReady.value
     ? [
         {
-          value: PoolTransactionsTab.ALL_ACTIVITY,
-          label: t('poolTransactions.tabs.allTransactions'),
+          value: PoolTransactionsTab.USER_ACTIVITY,
+          label: t('poolTransactions.tabs.myInvestments'),
         },
-        ...(isWalletReady.value
-          ? [
-              {
-                value: PoolTransactionsTab.USER_ACTIVITY,
-                label: t('poolTransactions.tabs.myTransactions'),
-              },
-            ]
-          : []),
       ]
-    : [
+    : []),
+  ...(isWalletReady.value
+    ? [
         {
-          value: PoolTransactionsTab.ALL_ACTIVITY,
-          label: t('poolTransactions.tabs.allInvestments'),
+          value: PoolTransactionsTab.SWAPS,
+          label: t('poolTransactions.tabs.swaps'),
         },
-        ...(isWalletReady.value
-          ? [
-              {
-                value: PoolTransactionsTab.USER_ACTIVITY,
-                label: t('poolTransactions.tabs.myInvestments'),
-              },
-            ]
-          : []),
       ]
-);
+    : []),
+  {
+    value: PoolTransactionsTab.POOL_DETAILS,
+    label: t('poolTransactions.tabs.details'),
+  },
+]);
 
 /**
  * COMPOSABLES
@@ -81,17 +80,11 @@ const activeTab = ref(tabs.value[0].value);
 /**
  * COMPUTED
  */
-const title = computed((): string => {
-  if (isDeepPool.value || isStablePhantomPool.value) return t('poolActivity');
-
-  return t('liquidityProvision');
-});
 </script>
 
 <template>
   <div class="mb-5">
     <div>
-      <h3 class="px-4 lg:px-0 mb-3" v-text="title" />
       <div
         class="flex justify-between items-end mx-4 lg:mx-0 mb-6 border-b dark:border-gray-900"
       >
@@ -127,6 +120,19 @@ const title = computed((): string => {
           :pool="pool"
           :loading="loading"
         />
+        <SwapTransactions
+          v-else-if="
+            activeTab === PoolTransactionsTab.SWAPS &&
+            !isStablePhantomPool &&
+            !isDeepPool
+          "
+          :pool="pool"
+          :loading="loading"
+        />
+        <PoolContractDetails
+          v-else-if="activeTab === PoolTransactionsTab.POOL_DETAILS"
+          :pool="pool"
+        />
       </div>
     </template>
   </div>
diff --git a/src/components/contextual/pages/pool/PoolTransactionsCard/PoolTransactionsCard.vue b/src/components/contextual/pages/pool/PoolTransactionsCard/PoolTransactionsCard.vue
index ae53fe311..60b019e90 100644
--- a/src/components/contextual/pages/pool/PoolTransactionsCard/PoolTransactionsCard.vue
+++ b/src/components/contextual/pages/pool/PoolTransactionsCard/PoolTransactionsCard.vue
@@ -5,8 +5,6 @@ import { usePoolHelpers } from '@/composables/usePoolHelpers';
 import { Pool } from '@/services/pool/types';
 
 import InvestmentTransactions from './InvestmentTransactions/InvestmentTransactions.vue';
-import SwapTransactions from './SwapTransactions/SwapTransactions.vue';
-
 /**
  * TYPES
  */
@@ -31,10 +29,9 @@ const { isDeepPool, isStablePhantomPool } = usePoolHelpers(
 </script>
 
 <template>
-  <InvestmentTransactions :pool="pool" :loading="loading" />
-
-  <SwapTransactions
-    v-if="!isStablePhantomPool && !isDeepPool"
+  <InvestmentTransactions
+    :isDeepPool="isDeepPool"
+    :isStablePhantomPool="isStablePhantomPool"
     :pool="pool"
     :loading="loading"
   />
diff --git a/src/components/contextual/pages/pool/PoolTransactionsCard/SwapTransactions/SwapTransactions.vue b/src/components/contextual/pages/pool/PoolTransactionsCard/SwapTransactions/SwapTransactions.vue
index e7aabe4ac..5ad9455df 100644
--- a/src/components/contextual/pages/pool/PoolTransactionsCard/SwapTransactions/SwapTransactions.vue
+++ b/src/components/contextual/pages/pool/PoolTransactionsCard/SwapTransactions/SwapTransactions.vue
@@ -50,16 +50,12 @@ function loadMorePoolSwaps() {
 </script>
 
 <template>
-  <div class="mb-20">
-    <h4 class="px-4 lg:px-0 mb-5" v-text="$t('poolTransactions.tabs.swaps')" />
-
-    <Table
-      :poolSwaps="poolSwaps"
-      :isLoading="loading || isLoadingPoolSwaps"
-      :isLoadingMore="poolSwapsIsFetchingNextPage"
-      :isPaginated="poolSwapsHasNextPage"
-      :noResultsLabel="$t('poolTransactions.noResults.swaps')"
-      @load-more="loadMorePoolSwaps"
-    />
-  </div>
+  <Table
+    :poolSwaps="poolSwaps"
+    :isLoading="loading || isLoadingPoolSwaps"
+    :isLoadingMore="poolSwapsIsFetchingNextPage"
+    :isPaginated="poolSwapsHasNextPage"
+    :noResultsLabel="$t('poolTransactions.noResults.swaps')"
+    @load-more="loadMorePoolSwaps"
+  />
 </template>
diff --git a/src/components/contextual/pages/pool/PoolTransactionsCard/types.ts b/src/components/contextual/pages/pool/PoolTransactionsCard/types.ts
index 4d8377510..50b346b69 100644
--- a/src/components/contextual/pages/pool/PoolTransactionsCard/types.ts
+++ b/src/components/contextual/pages/pool/PoolTransactionsCard/types.ts
@@ -2,4 +2,5 @@ export enum PoolTransactionsTab {
   ALL_ACTIVITY = 'allActivity',
   USER_ACTIVITY = 'userActivity',
   SWAPS = 'swaps',
+  POOL_DETAILS = 'poolDetails',
 }
diff --git a/src/components/navs/AppNav/AppNavActions.vue b/src/components/navs/AppNav/AppNavActions.vue
index 0587caa50..8349363e2 100644
--- a/src/components/navs/AppNav/AppNavActions.vue
+++ b/src/components/navs/AppNav/AppNavActions.vue
@@ -6,6 +6,7 @@ import useWeb3 from '@/services/web3/useWeb3';
 import { Goals, trackGoal } from '@/composables/useFathom';
 import AppNavAccountBtn from './AppNavAccountBtn.vue';
 import AppNavNetworkSelect from './AppNavNetworkSelect.vue';
+import DarkModeToggle from '@/components/btns/DarkModeToggle.vue';
 
 /**
  * COMPOSABLES
@@ -30,6 +31,7 @@ function connectWalletHandler() {
 
 <template>
   <div class="grid grid-rows-1 grid-flow-col gap-2">
+    <DarkModeToggle v-if="!isMobile" />
     <AppNavActivityBtn v-if="account" />
     <AppNavNetworkSelect v-if="!hideNetworkSelect" />
     <AppNavAccountBtn v-if="account" />
diff --git a/src/components/navs/AppNav/AppNavNetworkSelect.vue b/src/components/navs/AppNav/AppNavNetworkSelect.vue
index 7a0c0166f..607170401 100644
--- a/src/components/navs/AppNav/AppNavNetworkSelect.vue
+++ b/src/components/navs/AppNav/AppNavNetworkSelect.vue
@@ -165,7 +165,7 @@ function isActive(network: NetworkOption): boolean {
             :alt="network.name"
             class="mr-2 w-6 h-6 rounded-full"
           />
-          <span class="ml-1 font-medium">
+          <span class="overflow-x-hidden ml-1 max-w-full font-medium">
             {{ network.name }}
           </span>
 
diff --git a/src/components/navs/AppNav/AppSidebar/SidebarContent.vue b/src/components/navs/AppNav/AppSidebar/SidebarContent.vue
index 6b6b4a5d0..9443a5fa0 100644
--- a/src/components/navs/AppNav/AppSidebar/SidebarContent.vue
+++ b/src/components/navs/AppNav/AppSidebar/SidebarContent.vue
@@ -15,7 +15,7 @@ import { Goals, trackGoal } from '@/composables/useFathom';
 import useNetwork from '@/composables/useNetwork';
 import { sleep } from '@/lib/utils';
 import useWeb3 from '@/services/web3/useWeb3';
-
+import useDarkMode from '@/composables/useDarkMode';
 /**
  * PROPS & EMITS
  */
@@ -30,6 +30,7 @@ const { networkSlug } = useNetwork();
 const { t } = useI18n();
 const router = useRouter();
 const { openNpsModal } = useAppzi();
+const { darkMode, toggleDarkMode } = useDarkMode();
 
 /**
  * STATE
@@ -131,13 +132,13 @@ watch(blockNumber, async () => {
       }}</span>
     </div>
 
-    <!-- <div class="px-4 mt-6">
+    <div class="px-4 mt-6">
       <div class="mt-2 side-bar-btn" @click="toggleDarkMode">
         <MoonIcon v-if="!darkMode" class="mr-2" />
         <SunIcon v-else class="mr-2" />
         <span>{{ darkMode ? 'Light' : 'Dark' }} mode</span>
       </div>
-    </div> -->
+    </div>
 
     <div class="grid grid-rows-1 grid-flow-col auto-cols-min gap-2 px-4 mt-4">
       <BalLink
diff --git a/src/components/tables/PoolsTable/TokenPills/StableTokenPill.vue b/src/components/tables/PoolsTable/TokenPills/StableTokenPill.vue
index ae31a2582..872908a8a 100644
--- a/src/components/tables/PoolsTable/TokenPills/StableTokenPill.vue
+++ b/src/components/tables/PoolsTable/TokenPills/StableTokenPill.vue
@@ -63,7 +63,7 @@ withDefaults(defineProps<Props>(), {
 .pill::before {
   @apply w-full h-full;
   @apply absolute;
-  @apply bg-gray-100 dark:bg-gray-700;
+  @apply bg-pill-light dark:bg-gray-700;
 
   content: '';
   transform: skew(-16deg);
@@ -105,6 +105,6 @@ withDefaults(defineProps<Props>(), {
 
 .pill-hoverable:hover::before,
 .pill-hoverable:focus::before {
-  @apply bg-gray-200 dark:bg-gray-900;
+  @apply bg-pill-light dark:bg-gray-900;
 }
 </style>
diff --git a/src/components/tables/PoolsTable/TokenPills/WeightedTokenPill.vue b/src/components/tables/PoolsTable/TokenPills/WeightedTokenPill.vue
index bf2978112..0bbb8875a 100644
--- a/src/components/tables/PoolsTable/TokenPills/WeightedTokenPill.vue
+++ b/src/components/tables/PoolsTable/TokenPills/WeightedTokenPill.vue
@@ -69,7 +69,7 @@ withDefaults(defineProps<Props>(), {
 
 <style scoped>
 .pill {
-  @apply flex items-center px-2 my-1 py-1 rounded-lg bg-gray-100 dark:bg-gray-700 relative max-h-10 items-center;
+  @apply flex items-center px-2 my-1 py-1 rounded-lg bg-pill-light dark:bg-gray-700 relative max-h-10 items-center;
 }
 
 .pill-migration {
diff --git a/src/locales/default.json b/src/locales/default.json
index b9758cf3d..30b460d06 100644
--- a/src/locales/default.json
+++ b/src/locales/default.json
@@ -727,6 +727,7 @@
   "here": "here",
   "noInvestments": "No liquidity",
   "noUnstakedInvestments": "You have no unstaked liquidity on {0}",
+  "noRewardsToClaim": "No rewards to claim",
   "noStakedInvestments": "You have no staked liquidity on {0}",
   "noNativeCurrency": "You’ll need some {0} for gas fees in order to transact on {1}.",
   "noNativeCurrencyEthereum": "You’ll need some {0} for gas fees in order to do most basic transactions on {1}. However, you may continue to swap any tokens you’ve previously approved for use on Balancer with this wallet, by using the ‘swap gasless’ option.",
@@ -825,7 +826,8 @@
       "myTransactions": "My transactions",
       "allInvestments": "All liquidity provision",
       "myInvestments": "My liquidity",
-      "swaps": "Swaps"
+      "swaps": "Swaps",
+      "details": "About this pool"
     },
     "noResults": {
       "allTransactions": "No transactions in this pool",
diff --git a/src/pages/pool/_id.vue b/src/pages/pool/_id.vue
index 9d3c0bb0f..def19a3d6 100644
--- a/src/pages/pool/_id.vue
+++ b/src/pages/pool/_id.vue
@@ -6,7 +6,6 @@ import {
   PoolTransactionsCard,
   MyPoolBalancesCard,
   PoolCompositionCard,
-  PoolContractDetails,
 } from '@/components/contextual/pages/pool';
 import StakingIncentivesCard from '@/components/contextual/pages/pool/staking/StakingIncentivesCard.vue';
 import PoolLockingCard from '@/components/contextual/pages/pool/PoolLockingCard/PoolLockingCard.vue';
@@ -32,7 +31,6 @@ import BrandedRedirectCard from '@/components/pool/branded-redirect/BrandedRedir
 import metaService from '@/services/meta/meta.service';
 import PoolMigrationCard from '@/components/contextual/pages/pool/PoolMigrationCard/PoolMigrationCard.vue';
 import StakePreviewModal from '@/components/contextual/pages/pool/staking/StakePreviewModal.vue';
-import PoolRisks from '@/components/contextual/pages/pool/risks/PoolRisks.vue';
 import { usePool } from '@/providers/local/pool.provider';
 import { provideUserStaking } from '@/providers/local/user-staking.provider';
 import { providerUserPools } from '@/providers/local/user-pools.provider';
@@ -240,10 +238,6 @@ watch(
             />
           </div>
           <div class="mb-4">
-            <h3
-              class="px-4 lg:px-0 mb-3"
-              v-text="$t('poolComposition.title')"
-            />
             <BalLoadingBlock v-if="loadingPool" class="h-64" />
             <PoolCompositionCard v-else-if="pool" :pool="pool" />
           </div>
@@ -251,8 +245,6 @@ watch(
           <div ref="intersectionSentinel" />
           <template v-if="isSentinelIntersected && pool">
             <PoolTransactionsCard :pool="pool" :loading="loadingPool" />
-            <PoolContractDetails :pool="pool" />
-            <PoolRisks :pool="pool" />
           </template>
         </div>
       </div>
diff --git a/tailwind.config.js b/tailwind.config.js
index 83badd3d2..4f70e0187 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -58,6 +58,9 @@ module.exports = {
       ...defaultTheme.screens,
     },
     extend: {
+      letterSpacing: {
+        wide: '0.02em',
+      },
       flex: {
         0: '0 0 auto',
       },
@@ -84,6 +87,7 @@ module.exports = {
         'primary-refi': '#001C52',
         'accent-refi': '#FA7369',
         'refi-text': '#0468be',
+        'refi-text-dark': '#1490FA',
         'light-blue': '#05DBF3',
         container: '#F3FAFF',
         primary: {
@@ -187,6 +191,7 @@ module.exports = {
         disabled: '#9F9F9F',
         complementary: '#7B7B7B',
         'complementary-b': '#B6C7D6',
+        'pill-light': '#E7F4FF',
       },
     },
   },