diff --git a/components/Navbar.vue b/components/Navbar.vue
index cecfd65..a2452bc 100644
--- a/components/Navbar.vue
+++ b/components/Navbar.vue
@@ -2,17 +2,25 @@
   <div
     class="h-[68px] px-8 py-5 border border-b-[#E7E8F1] flex items-center justify-between"
   >
-    <nuxt-link to="/" class="flex items-center">
+    <nuxt-link to="/" class="flex items-center text-[#1874FF]">
       <svg
         width="28"
-        height="28"
-        viewBox="0 0 28 28"
+        height="26"
+        viewBox="0 0 28 26"
         fill="none"
         xmlns="http://www.w3.org/2000/svg"
       >
         <path
-          d="M14 26.6121C14 27.4159 14.6503 28.0751 15.4459 27.9931C22.4985 27.266 28 21.2786 28 14C28 6.72143 22.4985 0.734111 15.4459 0.00697811C14.6503 -0.0754852 14 0.584222 14 1.388V5.26862C14 6.0724 14.6546 6.70882 15.4391 6.86744C18.7489 7.53831 21.2414 10.4764 21.2414 14C21.2414 17.5236 18.7489 20.4618 15.4391 21.1326C14.6546 21.2913 14 21.9282 14 22.7314V26.6121ZM9.65517 2.62883C9.65517 1.63927 8.69111 0.941724 7.80814 1.37975C3.18187 3.67563 0 8.46432 0 14C0 19.5358 3.18187 24.3244 7.80814 26.6203C8.69111 27.0583 9.65517 26.3608 9.65517 25.3712V2.62883Z"
-          fill="#3F75FF"
+          d="M15.0779 0.655535C14.6014 -0.218507 13.3989 -0.218513 12.9224 0.655524L7.43746 10.7156C7.20102 11.1492 7.49979 11.6888 7.97635 11.6888L20.0238 11.6888C20.5004 11.6888 20.7991 11.1492 20.5627 10.7156L15.0779 0.655535Z"
+          fill="currentColor"
+        />
+        <path
+          d="M22.4164 14.1155C22.1793 13.6808 21.5821 13.678 21.3414 14.1105L15.2685 25.0217C15.0271 25.4554 15.3255 26 15.8046 26H26.7568C27.71 26 28.3075 24.9208 27.8346 24.0535L22.4164 14.1155Z"
+          fill="currentColor"
+        />
+        <path
+          d="M12.1952 26C12.6742 26 12.9727 25.4554 12.7313 25.0217L6.65864 14.1107C6.41791 13.6782 5.82069 13.6809 5.58364 14.1157L0.16539 24.0535C-0.307493 24.9208 0.290038 26 1.24316 26H12.1952Z"
+          fill="currentColor"
         />
       </svg>
 
diff --git a/pages/index.vue b/pages/index.vue
index 7c422c8..1069ee5 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -7,17 +7,16 @@
         v-for="app in apps"
         :key="app.id"
         :to="app.url"
-        class="relative flex flex-col items-center px-4 py-12 text-center rounded-[6px] cursor-pointer bg-white hover:bg-gray-50 shadow"
+        class="relative flex flex-col items-center px-4 py-12 text-center rounded-[6px] cursor-pointer bg-white border border-transparent hover:border-[#1874FF] shadow"
       >
         <div
           style="background: radial-gradient(42.15% 42.15% at 48.94% 48.94%, #D6DAE0 75.67%, #F0F3F9 100%), #C4C4C4;"
-          class="w-20 h-20 rounded-full flex items-center justify-center"
+          class="w-20 h-20 rounded-full flex items-center justify-center border border-[#CCDCF3]"
         >
           <div
-            style="background: linear-gradient(0deg, #FFFFFF, #FFFFFF), #C4C4C4"
-            class="w-16 h-16 rounded-full flex items-center justify-center"
+            class="w-16 h-16 rounded-full flex items-center justify-center bg-[#1874FF]"
           >
-            <component :is="app.icon" class="w-8 h-8" />
+            <component :is="app.icon" class="w-10 h-10 text-white" />
           </div>
         </div>
 
@@ -33,9 +32,9 @@
 <script lang="ts">
 import { computed, defineComponent } from "@nuxtjs/composition-api";
 import { useNetwork } from "~/composables/useNetwork";
-import AaveIcon from "~/assets/icons/colored/aave.svg?inline";
-import CompoundIcon from "~/assets/icons/colored/compound.svg?inline";
-import MakerIcon from "~/assets/icons/colored/maker.svg?inline";
+import AaveIcon from "~/assets/icons/aave.svg?inline";
+import CompoundIcon from "~/assets/icons/compound.svg?inline";
+import MakerIcon from "~/assets/icons/makerdao.svg?inline";
 
 const appsPerNetwork = {
   mainnet: [
diff --git a/pages/mainnet/aave-v2.vue b/pages/mainnet/aave-v2.vue
index 455d68c..f9a8362 100644
--- a/pages/mainnet/aave-v2.vue
+++ b/pages/mainnet/aave-v2.vue
@@ -10,8 +10,18 @@
       </nuxt-link>
     </div>
 
-    <div class="mt-10">
-      <h1 class="text-primary-black text-2xl font-semibold">Aave v2</h1>
+    <div class="mt-10 flex items-center">
+      <div
+        style="background: radial-gradient(42.15% 42.15% at 48.94% 48.94%, #D6DAE0 75.67%, #F0F3F9 100%), #C4C4C4;"
+        class="w-16 h-16 rounded-full flex items-center justify-center border border-[#CCDCF3]"
+      >
+        <div
+          class="w-12 h-12 rounded-full flex items-center justify-center bg-[#1874FF]"
+        >
+          <AaveIcon class="w-10 h-10 text-white" />
+        </div>
+      </div>
+      <h1 class="ml-4 text-primary-black text-2xl font-semibold">Aave v2</h1>
     </div>
 
     <div class="mt-10" v-if="position">
@@ -155,11 +165,13 @@ import { useSearchFilter } from "~/composables/useSearchFilter";
 import { useStatus } from "~/composables/useStatus";
 import { useBigNumber } from "~/composables/useBigNumber";
 import CardAave from "~/components/protocols/CardAave.vue";
+import AaveIcon from '~/assets/icons/aave.svg?inline'
 
 export default defineComponent({
   components: {
     BackIcon,
-    CardAave
+    CardAave,
+    AaveIcon,
   },
   setup() {
     const {
diff --git a/pages/mainnet/compound.vue b/pages/mainnet/compound.vue
index 6749630..03644cb 100644
--- a/pages/mainnet/compound.vue
+++ b/pages/mainnet/compound.vue
@@ -10,8 +10,18 @@
       </nuxt-link>
     </div>
 
-    <div class="mt-10">
-      <h1 class="text-primary-black text-2xl font-semibold">Compound</h1>
+    <div class="mt-10 flex items-center">
+      <div
+        style="background: radial-gradient(42.15% 42.15% at 48.94% 48.94%, #D6DAE0 75.67%, #F0F3F9 100%), #C4C4C4;"
+        class="w-16 h-16 rounded-full flex items-center justify-center border border-[#CCDCF3]"
+      >
+        <div
+          class="w-12 h-12 rounded-full flex items-center justify-center bg-[#1874FF]"
+        >
+          <CompoundIcon class="w-10 h-10 text-white" />
+        </div>
+      </div>
+      <h1 class="ml-4 text-primary-black text-2xl font-semibold">Compound</h1>
     </div>
 
     <div class="mt-10" v-if="position">
@@ -88,15 +98,15 @@
               </h3>
               <Badge class="w-18 xxl:w-23" :color="color">{{ text }}</Badge>
             </div>
-            <div class="mt-4 flex justify-between items-center text-primary-gray font-medium">
-              <div
-                class="flex items-center whitespace-no-wrap"
-              >
+            <div
+              class="mt-4 flex justify-between items-center text-primary-gray font-medium"
+            >
+              <div class="flex items-center whitespace-no-wrap">
                 <div>D/C (%)</div>
 
                 <div class="ml-2"><Info text="Debt/Collateral ratio" /></div>
               </div>
-              <span >Max - {{ formatPercent(position.maxLiquidation) }}</span>
+              <span>Max - {{ formatPercent(position.maxLiquidation) }}</span>
             </div>
           </div>
         </div>
@@ -153,11 +163,13 @@ import { useSearchFilter } from "~/composables/useSearchFilter";
 import { useStatus } from "~/composables/useStatus";
 import { useBigNumber } from "~/composables/useBigNumber";
 import CardCompound from "~/components/protocols/CardCompound.vue";
+import CompoundIcon from '~/assets/icons/compound.svg?inline'
 
 export default defineComponent({
   components: {
     BackIcon,
-    CardCompound
+    CardCompound,
+    CompoundIcon,
   },
   setup() {
     const {
diff --git a/pages/mainnet/maker.vue b/pages/mainnet/maker.vue
index a3fdd81..47e90c7 100644
--- a/pages/mainnet/maker.vue
+++ b/pages/mainnet/maker.vue
@@ -11,9 +11,21 @@
     </div>
 
     <div class="mt-10 flex items-center">
-      <h1 class="text-primary-black text-2xl font-semibold">MakerDAO</h1>
+      <div class="flex items-center">
+        <div
+          style="background: radial-gradient(42.15% 42.15% at 48.94% 48.94%, #D6DAE0 75.67%, #F0F3F9 100%), #C4C4C4;"
+          class="w-16 h-16 rounded-full flex items-center justify-center border border-[#CCDCF3]"
+        >
+          <div
+            class="w-12 h-12 rounded-full flex items-center justify-center bg-[#1874FF]"
+          >
+            <MakerDAOIcon Icon class="w-10 h-10 text-white" />
+          </div>
+        </div>
+        <h1 class="ml-4 text-primary-black text-2xl font-semibold">MakerDAO</h1>
+      </div>
 
-      <dropdown-makerdao class="ml-auto"/>
+      <dropdown-makerdao class="ml-auto" />
     </div>
 
     <div class="mt-10">
@@ -151,6 +163,7 @@ import { useMakerdaoPosition } from "~/composables/protocols/useMakerdaoPosition
 import { useStatus } from "~/composables/useStatus";
 import { useNotification } from "~/composables/useNotification";
 import DropdownMakerdao from "~/components/protocols/DropdownMakerdao.vue";
+import MakerDAOIcon from '~/assets/icons/makerdao.svg?inline'
 
 export default defineComponent({
   components: {
@@ -161,7 +174,8 @@ export default defineComponent({
     SVGEarnings,
     SVGArrowRight,
     SVGPercent,
-    DropdownMakerdao
+    DropdownMakerdao,
+    MakerDAOIcon,
   },
   setup() {
     const router = useRouter();
diff --git a/pages/polygon/aave-v2.vue b/pages/polygon/aave-v2.vue
index 455d68c..7c23f72 100644
--- a/pages/polygon/aave-v2.vue
+++ b/pages/polygon/aave-v2.vue
@@ -10,8 +10,18 @@
       </nuxt-link>
     </div>
 
-    <div class="mt-10">
-      <h1 class="text-primary-black text-2xl font-semibold">Aave v2</h1>
+    <div class="mt-10 flex items-center">
+      <div
+        style="background: radial-gradient(42.15% 42.15% at 48.94% 48.94%, #D6DAE0 75.67%, #F0F3F9 100%), #C4C4C4;"
+        class="w-16 h-16 rounded-full flex items-center justify-center border border-[#CCDCF3]"
+      >
+        <div
+          class="w-12 h-12 rounded-full flex items-center justify-center bg-[#1874FF]"
+        >
+          <AaveIcon class="w-10 h-10 text-white" />
+        </div>
+      </div>
+      <h1 class="ml-4 text-primary-black text-2xl font-semibold">Aave v2</h1>
     </div>
 
     <div class="mt-10" v-if="position">
@@ -88,15 +98,15 @@
               </h3>
               <Badge class="w-18 xxl:w-23" :color="color">{{ text }}</Badge>
             </div>
-            <div class="mt-4 flex justify-between items-center text-primary-gray font-medium">
-              <div
-                class="flex items-center whitespace-no-wrap"
-              >
+            <div
+              class="mt-4 flex justify-between items-center text-primary-gray font-medium"
+            >
+              <div class="flex items-center whitespace-no-wrap">
                 <div>D/C (%)</div>
 
                 <div class="ml-2"><Info text="Debt/Collateral ratio" /></div>
               </div>
-              <span >Max - {{ formatPercent(position.maxLiquidation) }}</span>
+              <span>Max - {{ formatPercent(position.maxLiquidation) }}</span>
             </div>
           </div>
         </div>
@@ -155,11 +165,13 @@ import { useSearchFilter } from "~/composables/useSearchFilter";
 import { useStatus } from "~/composables/useStatus";
 import { useBigNumber } from "~/composables/useBigNumber";
 import CardAave from "~/components/protocols/CardAave.vue";
+import AaveIcon from "~/assets/icons/aave.svg?inline";
 
 export default defineComponent({
   components: {
     BackIcon,
-    CardAave
+    CardAave,
+    AaveIcon
   },
   setup() {
     const {