diff --git a/src/assets/base.css b/src/assets/base.css
deleted file mode 100644
index 71dc55a3..00000000
--- a/src/assets/base.css
+++ /dev/null
@@ -1,74 +0,0 @@
-/* color palette from <https://github.com/vuejs/theme> */
-:root {
-  --vt-c-white: #ffffff;
-  --vt-c-white-soft: #f8f8f8;
-  --vt-c-white-mute: #f2f2f2;
-
-  --vt-c-black: #181818;
-  --vt-c-black-soft: #222222;
-  --vt-c-black-mute: #282828;
-
-  --vt-c-indigo: #2c3e50;
-
-  --vt-c-divider-light-1: rgba(60, 60, 60, 0.29);
-  --vt-c-divider-light-2: rgba(60, 60, 60, 0.12);
-  --vt-c-divider-dark-1: rgba(84, 84, 84, 0.65);
-  --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48);
-
-  --vt-c-text-light-1: var(--vt-c-indigo);
-  --vt-c-text-light-2: rgba(60, 60, 60, 0.66);
-  --vt-c-text-dark-1: var(--vt-c-white);
-  --vt-c-text-dark-2: rgba(235, 235, 235, 0.64);
-}
-
-/* semantic color variables for this project */
-:root {
-  --color-background: var(--vt-c-white);
-  --color-background-soft: var(--vt-c-white-soft);
-  --color-background-mute: var(--vt-c-white-mute);
-
-  --color-border: var(--vt-c-divider-light-2);
-  --color-border-hover: var(--vt-c-divider-light-1);
-
-  --color-heading: var(--vt-c-text-light-1);
-  --color-text: var(--vt-c-text-light-1);
-
-  --section-gap: 160px;
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --color-background: var(--vt-c-black);
-    --color-background-soft: var(--vt-c-black-soft);
-    --color-background-mute: var(--vt-c-black-mute);
-
-    --color-border: var(--vt-c-divider-dark-2);
-    --color-border-hover: var(--vt-c-divider-dark-1);
-
-    --color-heading: var(--vt-c-text-dark-1);
-    --color-text: var(--vt-c-text-dark-2);
-  }
-}
-
-*,
-*::before,
-*::after {
-  box-sizing: border-box;
-  margin: 0;
-  position: relative;
-  font-weight: normal;
-}
-
-body {
-  min-height: 100vh;
-  color: var(--color-text);
-  background: var(--color-background);
-  transition: color 0.5s, background-color 0.5s;
-  line-height: 1.6;
-  font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
-    Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
-  font-size: 15px;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
diff --git a/src/assets/main.css b/src/assets/main.css
deleted file mode 100644
index e8667cd4..00000000
--- a/src/assets/main.css
+++ /dev/null
@@ -1,35 +0,0 @@
-@import './base.css';
-
-#app {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-
-  font-weight: normal;
-}
-
-a,
-.green {
-  text-decoration: none;
-  color: hsla(160, 100%, 37%, 1);
-  transition: 0.4s;
-}
-
-@media (hover: hover) {
-  a:hover {
-    background-color: hsla(160, 100%, 37%, 0.2);
-  }
-}
-
-@media (min-width: 1024px) {
-  body {
-    display: flex;
-    place-items: center;
-  }
-
-  #app {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    padding: 0 2rem;
-  }
-}
diff --git a/src/components/ThemeSwitcher.vue b/src/components/ThemeSwitcher.vue
index 1c4fc957..252357ee 100644
--- a/src/components/ThemeSwitcher.vue
+++ b/src/components/ThemeSwitcher.vue
@@ -7,7 +7,7 @@ const props = defineProps<{
   themes: ThemeSwitcherTheme[];
 }>();
 
-const theme = ref('light');
+const theme = ref(window.localStorage.getItem('theme') || 'dark');
 const {
   state: currentThemeName,
   next: getNextThemeName,
@@ -37,6 +37,7 @@ const changeMode = (val: 'dark' | 'light' | 'system') => {
     document.documentElement.classList.remove('dark');
   }
   document.documentElement.setAttribute('data-theme', value);
+  window.localStorage.setItem('theme', value);
 };
 // Update icon if theme is changed from other sources
 watch(theme, (val: 'dark' | 'light' | 'system') => {
diff --git a/src/components/charts/DonutChart.vue b/src/components/charts/DonutChart.vue
index 164bae0a..57c73fd1 100644
--- a/src/components/charts/DonutChart.vue
+++ b/src/components/charts/DonutChart.vue
@@ -1,28 +1,21 @@
 <script lang="ts" setup>
 import ApexCharts from 'vue3-apexcharts';
-import { useTheme } from 'vuetify';
+import { computed } from 'vue';
 import { getDonutChartConfig } from './apexChartConfig';
 
 const props = defineProps(['series', 'labels']);
 
-const vuetifyTheme = useTheme();
-
 const expenseRationChartConfig = computed(() =>
-  getDonutChartConfig(vuetifyTheme.current.value, props.labels)
+  getDonutChartConfig(window.localStorage.getItem('theme') || 'dark', props.labels)
 );
 </script>
 
 <template>
-  <ApexCharts
-    type="donut"
-    height="410"
-    :options="expenseRationChartConfig"
-    :series="series"
-  />
+  <ApexCharts type="donut" height="410" :options="expenseRationChartConfig" :series="series" />
 </template>
 
 <script lang="ts">
 export default {
-    name: 'DonetChart',
+  name: 'DonetChart',
 };
 </script>
diff --git a/src/components/charts/PriceMarketChart.vue b/src/components/charts/PriceMarketChart.vue
index 46bd4a8a..56cfb8eb 100644
--- a/src/components/charts/PriceMarketChart.vue
+++ b/src/components/charts/PriceMarketChart.vue
@@ -1,15 +1,13 @@
 <script lang="ts" setup>
 import ApexCharts from 'vue3-apexcharts';
-import { useTheme } from 'vuetify';
 import { getMarketPriceChartConfig } from './apexChartConfig';
 import { useIndexModule } from '@/modules/[chain]/indexStore';
 import { computed, ref } from '@vue/reactivity';
 
 const store = useIndexModule();
-const vuetifyTheme = useTheme();
 const chartConfig = computed(() => {
   const labels = store.marketData.prices.map((item: any) => item[0]);
-  return getMarketPriceChartConfig(vuetifyTheme.current.value, labels);
+  return getMarketPriceChartConfig(window.localStorage.getItem('theme') || 'dark', labels);
 });
 const kind = ref('price');
 const series = computed(() => {
@@ -31,25 +29,14 @@ function changeChart(type: string) {
 
 <template>
   <div class="tabs tabs-boxed bg-transparent justify-end">
-    <a
-      class="tab text-xs mr-2 text-gray-400 uppercase"
-      :class="{ 'tab-active': kind === 'price' }"
-      @click="changeChart('price')"
-    >
+    <a class="tab text-xs mr-2 text-gray-400 uppercase" :class="{ 'tab-active': kind === 'price' }"
+      @click="changeChart('price')">
       Price
     </a>
-    <a
-      class="tab text-xs text-gray-400 uppercase"
-      :class="{ 'tab-active': kind === 'volume' }"
-      @click="changeChart('volume')"
-    >
+    <a class="tab text-xs text-gray-400 uppercase" :class="{ 'tab-active': kind === 'volume' }"
+      @click="changeChart('volume')">
       Volume
     </a>
   </div>
-  <ApexCharts
-    type="area"
-    height="230"
-    :options="chartConfig"
-    :series="series"
-  />
+  <ApexCharts type="area" height="230" :options="chartConfig" :series="series" />
 </template>
diff --git a/src/components/charts/apexChartConfig.ts b/src/components/charts/apexChartConfig.ts
index f1b3b4bb..42c91f63 100644
--- a/src/components/charts/apexChartConfig.ts
+++ b/src/components/charts/apexChartConfig.ts
@@ -1,38 +1,191 @@
-import type { ThemeInstance } from 'vuetify';
-import { hexToRgb } from '@/plugins/vuetify/@layouts/utils';
 import numeral from 'numeral';
 
-// 👉 Colors variables
-const colorVariables = (
-  themeColors: ThemeInstance['themes']['value']['colors']
-) => {
-  const themeSecondaryTextColor = `rgba(${hexToRgb(
-    themeColors.colors['on-surface']
-  )},${themeColors.variables['medium-emphasis-opacity']})`;
-  const themeDisabledTextColor = `rgba(${hexToRgb(
-    themeColors.colors['on-surface']
-  )},${themeColors.variables['disabled-opacity']})`;
-  const themeBorderColor = `rgba(${hexToRgb(
-    String(themeColors.variables['border-color'])
-  )},${themeColors.variables['border-opacity']})`;
-  const themePrimaryTextColor = `rgba(${hexToRgb(
-    themeColors.colors['on-surface']
-  )},${themeColors.variables['high-emphasis-opacity']})`;
-
+const themeColors = (theme: string) => {
+  if (theme === 'light') {
+    return {
+      dark: false,
+      colors: {
+        background: '#F7F7F9',
+        surface: '#FFFFFF',
+        'surface-variant': '#424242',
+        'on-surface-variant': '#EEEEEE',
+        primary: '#666CFF',
+        'primary-darken-1': '#3700B3',
+        secondary: '#6D788D',
+        'secondary-darken-1': '#018786',
+        error: '#FF4D49',
+        info: '#26C6F9',
+        success: '#72E128',
+        warning: '#FDB528',
+        'on-primary': '#fff',
+        'on-secondary': '#fff',
+        'on-success': '#fff',
+        'on-info': '#fff',
+        'on-warning': '#fff',
+        'on-background': '#4c4e64',
+        'on-surface': '#4c4e64',
+        'perfect-scrollbar-thumb': '#DBDADE',
+        'snackbar-background': '#212121',
+        'tooltip-background': '#262732',
+        'alert-background': '#F7F7F9',
+        'grey-50': '#FAFAFA',
+        'grey-100': '#F4F5FA',
+        'grey-200': '#F5F5F7',
+        'grey-300': '#E0E0E0',
+        'grey-400': '#BDBDBD',
+        'grey-500': '#9E9E9E',
+        'grey-600': '#757575',
+        'grey-700': '#616161',
+        'grey-800': '#424242',
+        'grey-900': '#212121',
+        'on-primary-darken-1': '#fff',
+        'on-secondary-darken-1': '#fff',
+        'on-error': '#fff',
+        'on-perfect-scrollbar-thumb': '#000',
+        'on-snackbar-background': '#fff',
+        'on-tooltip-background': '#fff',
+        'on-alert-background': '#000',
+        'on-grey-50': '#000',
+        'on-grey-100': '#000',
+        'on-grey-200': '#000',
+        'on-grey-300': '#000',
+        'on-grey-400': '#000',
+        'on-grey-500': '#fff',
+        'on-grey-600': '#fff',
+        'on-grey-700': '#fff',
+        'on-grey-800': '#fff',
+        'on-grey-900': '#fff',
+      },
+      variables: {
+        'border-color': '#4c4e64',
+        'border-opacity': 0.12,
+        'high-emphasis-opacity': 0.87,
+        'medium-emphasis-opacity': 0.6,
+        'disabled-opacity': 0.38,
+        'idle-opacity': 0.04,
+        'hover-opacity': 0.05,
+        'focus-opacity': 0.12,
+        'selected-opacity': 0.08,
+        'activated-opacity': 0.12,
+        'pressed-opacity': 0.12,
+        'dragged-opacity': 0.08,
+        'theme-kbd': '#212529',
+        'theme-on-kbd': '#FFFFFF',
+        'theme-code': '#F5F5F5',
+        'theme-on-code': '#000000',
+        'code-color': '#d400ff',
+        'overlay-scrim-background': '#4C4E64',
+        'overlay-scrim-opacity': 0.5,
+        'shadow-key-umbra-opacity': 'rgba(var(--v-theme-on-surface), 0.08)',
+        'shadow-key-penumbra-opacity': 'rgba(var(--v-theme-on-surface), 0.05)',
+        'shadow-key-ambient-opacity': 'rgba(var(--v-theme-on-surface), 0.03)',
+      },
+    };
+  }
   return {
-    themeSecondaryTextColor,
-    themeDisabledTextColor,
-    themeBorderColor,
-    themePrimaryTextColor,
+    dark: true,
+    colors: {
+      background: '#282A42',
+      surface: '#30334E',
+      'surface-variant': '#BDBDBD',
+      'on-surface-variant': '#424242',
+      primary: '#666CFF',
+      'primary-darken-1': '#3700B3',
+      secondary: '#6D788D',
+      'secondary-darken-1': '#03DAC5',
+      error: '#FF4D49',
+      info: '#26C6F9',
+      success: '#72E128',
+      warning: '#FDB528',
+      'on-primary': '#fff',
+      'on-secondary': '#fff',
+      'on-success': '#fff',
+      'on-info': '#fff',
+      'on-warning': '#fff',
+      'on-background': '#eaeaff',
+      'on-surface': '#eaeaff',
+      'perfect-scrollbar-thumb': '#4A5072',
+      'snackbar-background': '#F5F5F5',
+      'on-snackbar-background': '#30334E',
+      'tooltip-background': '#464A65',
+      'alert-background': '#282A42',
+      'grey-50': '#2A2E42',
+      'grey-100': '#41435c',
+      'grey-200': '#3A3E5B',
+      'grey-300': '#5E6692',
+      'grey-400': '#7983BB',
+      'grey-500': '#8692D0',
+      'grey-600': '#AAB3DE',
+      'grey-700': '#B6BEE3',
+      'grey-800': '#CFD3EC',
+      'grey-900': '#E7E9F6',
+      'on-primary-darken-1': '#fff',
+      'on-secondary-darken-1': '#000',
+      'on-error': '#fff',
+      'on-perfect-scrollbar-thumb': '#fff',
+      'on-tooltip-background': '#fff',
+      'on-alert-background': '#fff',
+      'on-grey-50': '#fff',
+      'on-grey-100': '#fff',
+      'on-grey-200': '#fff',
+      'on-grey-300': '#fff',
+      'on-grey-400': '#fff',
+      'on-grey-500': '#fff',
+      'on-grey-600': '#000',
+      'on-grey-700': '#000',
+      'on-grey-800': '#000',
+      'on-grey-900': '#000',
+    },
+    variables: {
+      'border-color': '#eaeaff',
+      'border-opacity': 0.12,
+      'high-emphasis-opacity': 0.87,
+      'medium-emphasis-opacity': 0.6,
+      'disabled-opacity': 0.38,
+      'idle-opacity': 0.1,
+      'hover-opacity': 0.05,
+      'focus-opacity': 0.12,
+      'selected-opacity': 0.08,
+      'activated-opacity': 0.12,
+      'pressed-opacity': 0.16,
+      'dragged-opacity': 0.08,
+      'theme-kbd': '#212529',
+      'theme-on-kbd': '#FFFFFF',
+      'theme-code': '#343434',
+      'theme-on-code': '#CCCCCC',
+      'code-color': '#d400ff',
+      'overlay-scrim-background': '#101121',
+      'overlay-scrim-opacity': 0.6,
+      'shadow-key-umbra-opacity': 'rgba(20, 21, 33, 0.08)',
+      'shadow-key-penumbra-opacity': 'rgba(20, 21, 33, 0.05)',
+      'shadow-key-ambient-opacity': 'rgba(20, 21, 33, 0.03)',
+    },
+  };
+};
+// 👉 Colors variables
+const colorVariables = (theme: string) => {
+  if (theme === 'light') {
+    return {
+      themeSecondaryTextColor: 'rgba(76,78,100,0.6)',
+      themeDisabledTextColor: 'rgba(76,78,100,0.38)',
+      themeBorderColor: 'rgba(76,78,100,0.12)',
+      themePrimaryTextColor: 'rgba(76,78,100,0.87)',
+    };
+  }
+  return {
+    themeSecondaryTextColor: 'rgba(234,234,255,0.6)',
+    themeDisabledTextColor: 'rgba(234,234,255,0.38)',
+    themeBorderColor: 'rgba(234,234,255,0.12)',
+    themePrimaryTextColor: 'rgba(234,234,255,0.87)',
   };
 };
 /// Price Chart config
 export const getMarketPriceChartConfig = (
-  themeColors: ThemeInstance['themes']['value']['colors'],
+  theme: string,
   categories: string[]
 ) => {
   const { themeSecondaryTextColor, themeBorderColor, themeDisabledTextColor } =
-    colorVariables(themeColors);
+    colorVariables(theme);
 
   return {
     chart: {
@@ -66,7 +219,7 @@ export const getMarketPriceChartConfig = (
       },
     },
 
-    colors: [themeColors.colors.primary],
+    colors: [themeColors(theme).colors.primary],
     fill: {
       opacity: 0.5,
       type: 'gradient',
@@ -102,338 +255,8 @@ export const getMarketPriceChartConfig = (
     },
   };
 };
-
-/// default config
-
-export const getScatterChartConfig = (
-  themeColors: ThemeInstance['themes']['value']['colors']
-) => {
-  const scatterColors = {
-    series1: '#ff9f43',
-    series2: '#7367f0',
-    series3: '#28c76f',
-  };
-
-  const { themeSecondaryTextColor, themeBorderColor, themeDisabledTextColor } =
-    colorVariables(themeColors);
-
-  return {
-    chart: {
-      parentHeightOffset: 0,
-      toolbar: { show: false },
-      zoom: {
-        type: 'xy',
-        enabled: true,
-      },
-    },
-    legend: {
-      position: 'top',
-      horizontalAlign: 'left',
-      markers: { offsetX: -3 },
-
-      labels: { colors: themeSecondaryTextColor },
-      itemMargin: {
-        vertical: 3,
-        horizontal: 10,
-      },
-    },
-    colors: [
-      scatterColors.series1,
-      scatterColors.series2,
-      scatterColors.series3,
-    ],
-    grid: {
-      borderColor: themeBorderColor,
-      xaxis: {
-        lines: { show: true },
-      },
-    },
-    yaxis: {
-      labels: {
-        style: { colors: themeDisabledTextColor },
-      },
-    },
-    xaxis: {
-      tickAmount: 10,
-      axisBorder: { show: false },
-
-      axisTicks: { color: themeBorderColor },
-      crosshairs: {
-        stroke: { color: themeBorderColor },
-      },
-      labels: {
-        style: { colors: themeDisabledTextColor },
-        formatter: (val: string) => parseFloat(val).toFixed(1),
-      },
-    },
-  };
-};
-export const getLineChartSimpleConfig = (
-  themeColors: ThemeInstance['themes']['value']['colors']
-) => {
-  const { themeBorderColor, themeDisabledTextColor } =
-    colorVariables(themeColors);
-
-  return {
-    chart: {
-      parentHeightOffset: 0,
-      zoom: { enabled: false },
-      toolbar: { show: false },
-    },
-    colors: ['#ff9f43'],
-    stroke: { curve: 'straight' },
-    dataLabels: { enabled: false },
-    markers: {
-      strokeWidth: 7,
-      strokeOpacity: 1,
-      colors: ['#ff9f43'],
-      strokeColors: ['#fff'],
-    },
-    grid: {
-      padding: { top: -10 },
-
-      borderColor: themeBorderColor,
-      xaxis: {
-        lines: { show: true },
-      },
-    },
-    tooltip: {
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      custom(data: any) {
-        return `<div class='bar-chart pa-2'>
-          <span>${data.series[data.seriesIndex][data.dataPointIndex]}%</span>
-        </div>`;
-      },
-    },
-    yaxis: {
-      labels: {
-        style: { colors: themeDisabledTextColor },
-      },
-    },
-    xaxis: {
-      axisBorder: { show: false },
-
-      axisTicks: { color: themeBorderColor },
-      crosshairs: {
-        stroke: { color: themeBorderColor },
-      },
-      labels: {
-        style: { colors: themeDisabledTextColor },
-      },
-      categories: [
-        '7/12',
-        '8/12',
-        '9/12',
-        '10/12',
-        '11/12',
-        '12/12',
-        '13/12',
-        '14/12',
-        '15/12',
-        '16/12',
-        '17/12',
-        '18/12',
-        '19/12',
-        '20/12',
-        '21/12',
-      ],
-    },
-  };
-};
-
-export const getBarChartConfig = (
-  themeColors: ThemeInstance['themes']['value']['colors']
-) => {
-  const { themeBorderColor, themeDisabledTextColor } =
-    colorVariables(themeColors);
-
-  return {
-    chart: {
-      parentHeightOffset: 0,
-      toolbar: { show: false },
-    },
-    colors: ['#00cfe8'],
-    dataLabels: { enabled: false },
-    plotOptions: {
-      bar: {
-        borderRadius: 8,
-        barHeight: '30%',
-        horizontal: true,
-        startingShape: 'rounded',
-      },
-    },
-    grid: {
-      borderColor: themeBorderColor,
-      xaxis: {
-        lines: { show: false },
-      },
-      padding: {
-        top: -10,
-      },
-    },
-    yaxis: {
-      labels: {
-        style: { colors: themeDisabledTextColor },
-      },
-    },
-    xaxis: {
-      axisBorder: { show: false },
-      axisTicks: { color: themeBorderColor },
-      categories: [
-        'MON, 11',
-        'THU, 14',
-        'FRI, 15',
-        'MON, 18',
-        'WED, 20',
-        'FRI, 21',
-        'MON, 23',
-      ],
-      labels: {
-        style: { colors: themeDisabledTextColor },
-      },
-    },
-  };
-};
-
-export const getCandlestickChartConfig = (
-  themeColors: ThemeInstance['themes']['value']['colors']
-) => {
-  const candlestickColors = {
-    series1: '#28c76f',
-    series2: '#ea5455',
-  };
-
-  const { themeBorderColor, themeDisabledTextColor } =
-    colorVariables(themeColors);
-
-  return {
-    chart: {
-      parentHeightOffset: 0,
-      toolbar: { show: false },
-    },
-    plotOptions: {
-      bar: { columnWidth: '40%' },
-      candlestick: {
-        colors: {
-          upward: candlestickColors.series1,
-          downward: candlestickColors.series2,
-        },
-      },
-    },
-    grid: {
-      padding: { top: -10 },
-      borderColor: themeBorderColor,
-      xaxis: {
-        lines: { show: true },
-      },
-    },
-    yaxis: {
-      tooltip: { enabled: true },
-      crosshairs: {
-        stroke: { color: themeBorderColor },
-      },
-      labels: {
-        style: { colors: themeDisabledTextColor },
-      },
-    },
-    xaxis: {
-      type: 'datetime',
-      axisBorder: { show: false },
-      axisTicks: { color: themeBorderColor },
-      crosshairs: {
-        stroke: { color: themeBorderColor },
-      },
-      labels: {
-        style: { colors: themeDisabledTextColor },
-      },
-    },
-  };
-};
-export const getRadialBarChartConfig = (
-  themeColors: ThemeInstance['themes']['value']['colors']
-) => {
-  const radialBarColors = {
-    series1: '#fdd835',
-    series2: '#32baff',
-    series3: '#00d4bd',
-    series4: '#7367f0',
-    series5: '#FFA1A1',
-  };
-
-  const { themeSecondaryTextColor, themePrimaryTextColor } =
-    colorVariables(themeColors);
-
-  return {
-    stroke: { lineCap: 'round' },
-    labels: ['Comments', 'Replies', 'Shares'],
-    legend: {
-      show: true,
-      position: 'bottom',
-      labels: {
-        colors: themeSecondaryTextColor,
-      },
-      markers: {
-        offsetX: -3,
-      },
-      itemMargin: {
-        vertical: 3,
-        horizontal: 10,
-      },
-    },
-    colors: [
-      radialBarColors.series1,
-      radialBarColors.series2,
-      radialBarColors.series4,
-    ],
-    plotOptions: {
-      radialBar: {
-        hollow: { size: '30%' },
-        track: {
-          margin: 15,
-          background: themeColors.colors['grey-100'],
-        },
-        dataLabels: {
-          name: {
-            fontSize: '2rem',
-          },
-          value: {
-            fontSize: '1rem',
-            color: themeSecondaryTextColor,
-          },
-          total: {
-            show: true,
-            fontWeight: 400,
-            label: 'Comments',
-            fontSize: '1.125rem',
-
-            color: themePrimaryTextColor,
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            formatter(w: {
-              globals: { seriesTotals: any[]; series: string | any[] };
-            }) {
-              const totalValue =
-                w.globals.seriesTotals.reduce((a: number, b: number) => {
-                  return a + b;
-                }, 0) / w.globals.series.length;
-
-              if (totalValue % 1 === 0) return `${totalValue}%`;
-              else return `${totalValue.toFixed(2)}%`;
-            },
-          },
-        },
-      },
-    },
-    grid: {
-      padding: {
-        top: -35,
-        bottom: -30,
-      },
-    },
-  };
-};
-
 export const getDonutChartConfig = (
-  themeColors: ThemeInstance['themes']['value']['colors'],
+  theme: string,
   labels: string[]
 ) => {
   const donutColors = {
@@ -445,7 +268,7 @@ export const getDonutChartConfig = (
   };
 
   const { themeSecondaryTextColor, themePrimaryTextColor } =
-    colorVariables(themeColors);
+    colorVariables(theme);
 
   return {
     stroke: { width: 0 },
@@ -535,340 +358,3 @@ export const getDonutChartConfig = (
   };
 };
 
-export const getAreaChartSplineConfig = (
-  themeColors: ThemeInstance['themes']['value']['colors']
-) => {
-  const areaColors = {
-    series3: '#e0cffe',
-    series2: '#b992fe',
-    series1: '#ab7efd',
-  };
-
-  const { themeSecondaryTextColor, themeBorderColor, themeDisabledTextColor } =
-    colorVariables(themeColors);
-
-  return {
-    chart: {
-      parentHeightOffset: 0,
-      toolbar: { show: false },
-    },
-    tooltip: { shared: false },
-    dataLabels: { enabled: false },
-    stroke: {
-      show: false,
-      curve: 'straight',
-    },
-    legend: {
-      position: 'top',
-      horizontalAlign: 'left',
-
-      labels: { colors: themeSecondaryTextColor },
-      markers: {
-        offsetY: 1,
-        offsetX: -3,
-      },
-      itemMargin: {
-        vertical: 3,
-        horizontal: 10,
-      },
-    },
-
-    colors: [areaColors.series3, areaColors.series2, areaColors.series1],
-    fill: {
-      opacity: 1,
-      type: 'solid',
-    },
-    grid: {
-      show: true,
-      borderColor: themeBorderColor,
-      xaxis: {
-        lines: { show: true },
-      },
-    },
-    yaxis: {
-      labels: {
-        style: { colors: themeDisabledTextColor },
-      },
-    },
-    xaxis: {
-      axisBorder: { show: false },
-
-      axisTicks: { color: themeBorderColor },
-      crosshairs: {
-        stroke: { color: themeBorderColor },
-      },
-      labels: {
-        style: { colors: themeDisabledTextColor },
-      },
-      categories: [
-        '7/12',
-        '8/12',
-        '9/12',
-        '10/12',
-        '11/12',
-        '12/12',
-        '13/12',
-        '14/12',
-        '15/12',
-        '16/12',
-        '17/12',
-        '18/12',
-        '19/12',
-      ],
-    },
-  };
-};
-
-export const getColumnChartConfig = (
-  themeColors: ThemeInstance['themes']['value']['colors']
-) => {
-  const columnColors = {
-    series1: '#826af9',
-    series2: '#d2b0ff',
-    bg: '#f8d3ff',
-  };
-
-  const { themeSecondaryTextColor, themeBorderColor, themeDisabledTextColor } =
-    colorVariables(themeColors);
-
-  return {
-    chart: {
-      offsetX: -10,
-      stacked: true,
-      parentHeightOffset: 0,
-      toolbar: { show: false },
-    },
-    fill: { opacity: 1 },
-    dataLabels: { enabled: false },
-
-    colors: [columnColors.series1, columnColors.series2],
-    legend: {
-      position: 'top',
-      horizontalAlign: 'left',
-
-      labels: { colors: themeSecondaryTextColor },
-      markers: {
-        offsetY: 1,
-        offsetX: -3,
-      },
-      itemMargin: {
-        vertical: 3,
-        horizontal: 10,
-      },
-    },
-    stroke: {
-      show: true,
-      colors: ['transparent'],
-    },
-    plotOptions: {
-      bar: {
-        columnWidth: '15%',
-        colors: {
-          backgroundBarRadius: 10,
-
-          backgroundBarColors: [
-            columnColors.bg,
-            columnColors.bg,
-            columnColors.bg,
-            columnColors.bg,
-            columnColors.bg,
-          ],
-        },
-      },
-    },
-    grid: {
-      borderColor: themeBorderColor,
-      xaxis: {
-        lines: { show: true },
-      },
-    },
-    yaxis: {
-      labels: {
-        style: { colors: themeDisabledTextColor },
-      },
-    },
-    xaxis: {
-      axisBorder: { show: false },
-
-      axisTicks: { color: themeBorderColor },
-      categories: [
-        '7/12',
-        '8/12',
-        '9/12',
-        '10/12',
-        '11/12',
-        '12/12',
-        '13/12',
-        '14/12',
-        '15/12',
-      ],
-      crosshairs: {
-        stroke: { color: themeBorderColor },
-      },
-      labels: {
-        style: { colors: themeDisabledTextColor },
-      },
-    },
-    responsive: [
-      {
-        breakpoint: 600,
-        options: {
-          plotOptions: {
-            bar: {
-              columnWidth: '35%',
-            },
-          },
-        },
-      },
-    ],
-  };
-};
-
-export const getHeatMapChartConfig = (
-  themeColors: ThemeInstance['themes']['value']['colors']
-) => {
-  const { themeSecondaryTextColor, themeDisabledTextColor } =
-    colorVariables(themeColors);
-
-  return {
-    chart: {
-      parentHeightOffset: 0,
-      toolbar: { show: false },
-    },
-    dataLabels: { enabled: false },
-    stroke: {
-      colors: [themeColors.colors.surface],
-    },
-    legend: {
-      position: 'bottom',
-      labels: {
-        colors: themeSecondaryTextColor,
-      },
-      markers: {
-        offsetY: 0,
-        offsetX: -3,
-      },
-      itemMargin: {
-        vertical: 3,
-        horizontal: 10,
-      },
-    },
-    plotOptions: {
-      heatmap: {
-        enableShades: false,
-        colorScale: {
-          ranges: [
-            { to: 10, from: 0, name: '0-10', color: '#b9b3f8' },
-            { to: 20, from: 11, name: '10-20', color: '#aba4f6' },
-            { to: 30, from: 21, name: '20-30', color: '#9d95f5' },
-            { to: 40, from: 31, name: '30-40', color: '#8f85f3' },
-            { to: 50, from: 41, name: '40-50', color: '#8176f2' },
-            { to: 60, from: 51, name: '50-60', color: '#7367f0' },
-          ],
-        },
-      },
-    },
-    grid: {
-      padding: { top: -20 },
-    },
-    yaxis: {
-      labels: {
-        style: {
-          colors: themeDisabledTextColor,
-        },
-      },
-    },
-    xaxis: {
-      labels: { show: false },
-      axisTicks: { show: false },
-      axisBorder: { show: false },
-    },
-  };
-};
-
-export const getRadarChartConfig = (
-  themeColors: ThemeInstance['themes']['value']['colors']
-) => {
-  const radarColors = {
-    series1: '#9b88fa',
-    series2: '#ffa1a1',
-  };
-
-  const { themeSecondaryTextColor, themeBorderColor, themeDisabledTextColor } =
-    colorVariables(themeColors);
-
-  return {
-    chart: {
-      parentHeightOffset: 0,
-      toolbar: { show: false },
-      dropShadow: {
-        top: 1,
-        blur: 8,
-        left: 1,
-        opacity: 0.2,
-        enabled: false,
-      },
-    },
-    markers: { size: 0 },
-    fill: { opacity: [1, 0.8] },
-    colors: [radarColors.series1, radarColors.series2],
-    stroke: {
-      width: 0,
-      show: false,
-    },
-    legend: {
-      labels: {
-        colors: themeSecondaryTextColor,
-      },
-      markers: {
-        offsetX: -3,
-      },
-      itemMargin: {
-        vertical: 3,
-        horizontal: 10,
-      },
-    },
-    plotOptions: {
-      radar: {
-        polygons: {
-          strokeColors: themeBorderColor,
-          connectorColors: themeBorderColor,
-        },
-      },
-    },
-    grid: {
-      show: false,
-      padding: {
-        top: -20,
-        bottom: -20,
-      },
-    },
-    yaxis: { show: false },
-    xaxis: {
-      categories: [
-        'Battery',
-        'Brand',
-        'Camera',
-        'Memory',
-        'Storage',
-        'Display',
-        'OS',
-        'Price',
-      ],
-      labels: {
-        style: {
-          colors: [
-            themeDisabledTextColor,
-            themeDisabledTextColor,
-            themeDisabledTextColor,
-            themeDisabledTextColor,
-            themeDisabledTextColor,
-            themeDisabledTextColor,
-            themeDisabledTextColor,
-            themeDisabledTextColor,
-          ],
-        },
-      },
-    },
-  };
-};
diff --git a/src/layouts/components/NavBarNotifications.vue b/src/layouts/components/NavBarNotifications.vue
index bab7215a..69cf4983 100644
--- a/src/layouts/components/NavBarNotifications.vue
+++ b/src/layouts/components/NavBarNotifications.vue
@@ -3,10 +3,10 @@ import Notifications from '@core/components/Notifications.vue';
 import type { Notification } from '@layouts/types';
 
 // Images
-import avatar3 from '@/images/avatars/avatar-3.png';
-import avatar4 from '@/images/avatars/avatar-4.png';
-import avatar5 from '@/images/avatars/avatar-5.png';
-import paypal from '@/images/svg/paypal.svg';
+import avatar3 from '@/assets/images/avatars/avatar-3.png';
+import avatar4 from '@/assets/images/avatars/avatar-4.png';
+import avatar5 from '@/assets/images/avatars/avatar-5.png';
+import paypal from '@/assets/images/svg/paypal.svg';
 
 const notifications = ref<Notification[]>([
   {
diff --git a/src/modules/wallet/portfolio.vue b/src/modules/wallet/portfolio.vue
index b3e24cb5..32e0ffa5 100644
--- a/src/modules/wallet/portfolio.vue
+++ b/src/modules/wallet/portfolio.vue
@@ -114,7 +114,7 @@ const tokenList = computed(() => {
     </div>
     <div class="bg-base-100">
       <DonutChart :series="Object.values(tokenValues)" :labels="Object.keys(tokenValues)"/>
-      <table class="table w-100">
+      <table class="table w-full">
         <thead>
           <tr>
             <th>Token</th>
diff --git a/src/pages/[...all].vue b/src/pages/[...all].vue
index e2c678ca..bf39e709 100644
--- a/src/pages/[...all].vue
+++ b/src/pages/[...all].vue
@@ -1,25 +1,25 @@
 <script setup lang="ts">
-import misc404 from '@/images/pages/404.png';
+import misc404 from '@/assets/images/pages/404.png';
 </script>
 
 <template>
-  <div class="pt-10">
-    <div class="text-center">
-      <div class="text-8xl font-semibold text-main">404</div>
-      <div class="text-xl font-bold my-2">Page Not Found</div>
-      <div class="text-base">
-        We couldn't find the page you are looking for.
-      </div>
-    </div>
+    <div class="pt-10">
+        <div class="text-center">
+            <div class="text-8xl font-semibold text-main">404</div>
+            <div class="text-xl font-bold my-2">Page Not Found</div>
+            <div class="text-base">
+                We couldn't find the page you are looking for.
+            </div>
+        </div>
 
-    <!-- 👉 Image -->
-    <div class="misc-avatar w-100 text-center">
-      <RouterLink to="/" class="btn no-underline btn-primary mt-4">
-        Back to Home
-      </RouterLink>
-      <img :src="misc404" alt="Coming Soon" class="mx-auto h-[400px] mt-10" />
+        <!-- 👉 Image -->
+        <div class="misc-avatar w-full text-center">
+            <RouterLink to="/" class="btn no-underline btn-primary mt-4">
+                Back to Home
+            </RouterLink>
+            <img :src="misc404" alt="Coming Soon" class="mx-auto h-[400px] mt-10" />
+        </div>
     </div>
-  </div>
 </template>
 
 <route lang="yaml">
diff --git a/src/style.css b/src/style.css
index dc94763a..7e33e9d3 100644
--- a/src/style.css
+++ b/src/style.css
@@ -2,18 +2,30 @@
 @tailwind components;
 @tailwind utilities;
 
-@layer base {
-  :root {
-    --text-main: #333;
-    --text-secondary: #4b525d;
-    --bg-active: #fbfbfc;
-  }
+body {
+  min-height: 100vh;
+  transition: color 0.5s, background-color 0.5s;
+  line-height: 1.6;
+  font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+    Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+  font-size: 15px;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
 
-  html.dark {
-    --text-main: #f7f7f7;
-    --text-secondary: #6f6e84;
-    --bg-active: #242b40;
-  }
+:root {
+  --text-main: #333;
+  --text-secondary: #4b525d;
+  --bg-active: #fbfbfc;
+}
+
+html.dark,
+html[data-theme='dark'] {
+  --text-main: #f7f7f7;
+  --text-secondary: #6f6e84;
+  --bg-active: #242b40;
 }
 
 .table th:first-child {
@@ -23,4 +35,4 @@
 
 .btn {
   @apply rounded;
-}
\ No newline at end of file
+}