diff --git a/src/components/charts/PriceMarketChart.vue b/src/components/charts/PriceMarketChart.vue
index 24443493..75953b1c 100644
--- a/src/components/charts/PriceMarketChart.vue
+++ b/src/components/charts/PriceMarketChart.vue
@@ -26,12 +26,25 @@ const series = computed(() => {
     },
   ];
 });
+
+function changeChart(type: string){
+  kind.value = type
+}
 </script>
 
 <template>
-  <VTabs v-model="kind" align-tabs="end"
-    ><VTab value="price">Price</VTab><VTab value="volume">Volume</VTab></VTabs
-  >
+  <div class="tabs tabs-boxed bg-transparent justify-end">
+    <a class="tab mr-2 text-gray-400 uppercase" 
+      :class="{'tab-active': kind ==='price' }"
+      @click="changeChart('price')">
+      Price
+    </a>
+    <a class="tab text-gray-400 uppercase" 
+      :class="{'tab-active': kind ==='volume' }"
+      @click="changeChart('volume')">
+      Volume
+    </a>
+  </div>
   <VueApexCharts
     type="area"
     height="261"