diff --git a/composer.json b/composer.json
index 7345ec6..5e0d864 100644
--- a/composer.json
+++ b/composer.json
@@ -17,8 +17,12 @@
         }
     ],
     "require": {
-        "php": ">=7.1.0",
-        "laravel/nova": "^4.0"
+        "php": "^8.1",
+        "illuminate/support": "^10.0|^11.0|^12.0"
+    },
+    "require-dev": {
+        "laravel/nova": "^5.0",
+        "laravel/nova-devtool": "^1.7"
     },
     "autoload": {
         "psr-4": {
@@ -37,11 +41,5 @@
         "sort-packages": true
     },
     "minimum-stability": "dev",
-    "prefer-stable": true,
-    "repositories": [
-        {
-            "type": "composer",
-            "url": "https://nova.laravel.com"
-        }
-    ]
+    "prefer-stable": true
 }
diff --git a/package.json b/package.json
index 23609a0..dbefb9d 100644
--- a/package.json
+++ b/package.json
@@ -5,19 +5,17 @@
         "watch": "mix watch",
         "watch-poll": "mix watch -- --watch-options-poll=1000",
         "hot": "mix watch --hot",
-        "prod": "mix --production"
+        "prod": "mix --production",
+        "nova:install": "npm --prefix='../../vendor/laravel/nova' ci"
     },
     "devDependencies": {
-        "laravel-mix": "^6.0.43",
-        "vue-loader": "^16.8.3",
-        "vue-template-compiler": "^2.6.14"
+        "laravel-mix": "^6.0.43"
     },
     "dependencies": {
         "chart.js": "^3.7.0",
         "chartjs-plugin-datalabels": "^2.0.0",
         "serialize-javascript": "^4.0.0",
         "sweetalert2": "^9.17.1",
-        "vue": "^3.2.31",
         "vue-chartjs": "^4.0.0"
     }
 }
diff --git a/resources/js/chart-js-integration.js b/resources/js/chart-js-integration.js
index 85b8d69..eb386d2 100644
--- a/resources/js/chart-js-integration.js
+++ b/resources/js/chart-js-integration.js
@@ -9,7 +9,7 @@ import PieChart from './components/PieChart'
 import PolarAreaChart from './components/PolarAreaChart'
 import ScatterChart from './components/ScatterChart'
 
-Nova.booting((Vue) => {
+Nova.booting((app, store) => {
     const textColor = getComputedStyle(document.documentElement)
         .getPropertyValue('--colors-gray-400');
 
@@ -17,12 +17,11 @@ Nova.booting((Vue) => {
     Chart.register(...registerables);
     Chart.defaults.color = `rgba(${textColor}, 1)`;
 
-    Vue.component('stacked-chart', StackedChart);
-    Vue.component('bar-chart', BarChart);
-    Vue.component('stripe-chart', LineChart);
-    Vue.component('doughnut-chart', DoughnutChart);
-    Vue.component('pie-chart', PieChart);
-    Vue.component('polar-area-chart', PolarAreaChart);
-    Vue.component('scatter-chart', ScatterChart);
+    app.component('stacked-chart', StackedChart);
+    app.component('bar-chart', BarChart);
+    app.component('stripe-chart', LineChart);
+    app.component('doughnut-chart', DoughnutChart);
+    app.component('pie-chart', PieChart);
+    app.component('polar-area-chart', PolarAreaChart);
+    app.component('scatter-chart', ScatterChart);
 })
-
diff --git a/resources/js/components/BarChart.vue b/resources/js/components/BarChart.vue
index 13ea1aa..af87402 100644
--- a/resources/js/components/BarChart.vue
+++ b/resources/js/components/BarChart.vue
@@ -3,15 +3,15 @@
     <div class="h-12 flex items-center px-6 mt-4">
       <h4 class="mr-3 leading-tight text-sm font-bold">{{ checkTitle }}</h4>
       <div class="flex relative ml-auto flex-shrink-0">
-        <default-button size="xs" class="mr-2" @click="fillData()" v-show="buttonRefresh">
+        <button type="button" class="btn btn-default btn-xs mr-2" @click="fillData()" v-show="buttonRefresh">
           <icon-refresh />
-        </default-button>
-        <default-button size="xs" class="mr-2" @click="reloadPage()" v-show="buttonReload">
+        </button>
+        <button type="button" class="btn btn-default btn-xs mr-2" @click="reloadPage()" v-show="buttonReload">
           <icon-refresh />
-        </default-button>
-        <default-button size="xs" class="mr-2" component="a" :href="externalLink" :target="externalLinkIn" v-show="btnExtLink">
+        </button>
+        <a class="btn btn-default btn-xs mr-2" :href="externalLink" :target="externalLinkIn" v-show="btnExtLink">
           <icon-external-link />
-        </default-button>
+        </a>
         <select-control size="xxs" @change="handleFilterChanged" :selected="advanceFilterSelected" v-show="showAdvanceFilter">
           <option v-for="filter in advanceFilter" v-bind:value="filter.value" :key="filter.key">
             {{ filter.text }}
diff --git a/resources/js/components/DoughnutChart.vue b/resources/js/components/DoughnutChart.vue
index 3aeb525..a53814a 100644
--- a/resources/js/components/DoughnutChart.vue
+++ b/resources/js/components/DoughnutChart.vue
@@ -3,15 +3,15 @@
     <div class="h-12 flex items-center px-6 mt-4">
       <h4 class="mr-3 leading-tight text-sm font-bold">{{ checkTitle }}</h4>
       <div class="flex relative ml-auto flex-shrink-0">
-        <default-button size="xs" class="mr-2" @click="fillData()" v-show="buttonRefresh">
+        <button type="button" class="btn btn-default btn-xs mr-2" @click="fillData()" v-show="buttonRefresh">
           <icon-refresh />
-        </default-button>
-        <default-button size="xs" class="mr-2" @click="reloadPage()" v-show="buttonReload">
+        </button>
+        <button type="button" class="btn btn-default btn-xs mr-2" @click="reloadPage()" v-show="buttonReload">
           <icon-refresh />
-        </default-button>
-        <default-button size="xs" class="mr-2" component="a" :href="externalLink" :target="externalLinkIn" v-show="btnExtLink">
+        </button>
+        <a class="btn btn-default btn-xs mr-2" :href="externalLink" :target="externalLinkIn" v-show="btnExtLink">
           <icon-external-link />
-        </default-button>
+        </a>
         <select-control size="xxs" @change="handleFilterChanged" :selected="advanceFilterSelected" v-show="showAdvanceFilter">
           <option v-for="filter in advanceFilter" v-bind:value="filter.value" :key="filter.key">
             {{ filter.text }}
diff --git a/resources/js/components/PieChart.vue b/resources/js/components/PieChart.vue
index e0dfd9f..13645fc 100644
--- a/resources/js/components/PieChart.vue
+++ b/resources/js/components/PieChart.vue
@@ -3,15 +3,15 @@
     <div class="h-12 flex items-center px-6 mt-4">
       <h4 class="mr-3 leading-tight text-sm font-bold">{{ checkTitle }}</h4>
       <div class="flex relative ml-auto flex-shrink-0">
-        <default-button size="xs" class="mr-2" @click="fillData()" v-show="buttonRefresh">
+        <button type="button" class="btn btn-default btn-xs mr-2" @click="fillData()" v-show="buttonRefresh">
           <icon-refresh />
-        </default-button>
-        <default-button size="xs" class="mr-2" @click="reloadPage()" v-show="buttonReload">
+        </button>
+        <button type="button" class="btn btn-default btn-xs mr-2" @click="reloadPage()" v-show="buttonReload">
           <icon-refresh />
-        </default-button>
-        <default-button size="xs" class="mr-2" component="a" :href="externalLink" :target="externalLinkIn" v-show="btnExtLink">
+        </button>
+        <a class="btn btn-default btn-xs mr-2" :href="externalLink" :target="externalLinkIn" v-show="btnExtLink">
           <icon-external-link />
-        </default-button>
+        </a>
         <select-control size="xxs" @change="handleFilterChanged" :selected="advanceFilterSelected" v-show="showAdvanceFilter">
           <option v-for="filter in advanceFilter" v-bind:value="filter.value" :key="filter.key">
             {{ filter.text }}
diff --git a/resources/js/components/PolarAreaChart.vue b/resources/js/components/PolarAreaChart.vue
index 52d8dd4..7c063e3 100644
--- a/resources/js/components/PolarAreaChart.vue
+++ b/resources/js/components/PolarAreaChart.vue
@@ -3,15 +3,15 @@
     <div class="h-12 flex items-center px-6 mt-4">
       <h4 class="mr-3 leading-tight text-sm font-bold">{{ checkTitle }}</h4>
       <div class="flex relative ml-auto flex-shrink-0">
-        <default-button size="xs" class="mr-2" @click="fillData()" v-show="buttonRefresh">
+        <button type="button" class="btn btn-default btn-xs mr-2" @click="fillData()" v-show="buttonRefresh">
           <icon-refresh />
-        </default-button>
-        <default-button size="xs" class="mr-2" @click="reloadPage()" v-show="buttonReload">
+        </button>
+        <button type="button" class="btn btn-default btn-xs mr-2" @click="reloadPage()" v-show="buttonReload">
           <icon-refresh />
-        </default-button>
-        <default-button size="xs" class="mr-2" component="a" :href="externalLink" :target="externalLinkIn" v-show="btnExtLink">
+        </button>
+        <a class="btn btn-default btn-xs mr-2" :href="externalLink" :target="externalLinkIn" v-show="btnExtLink">
           <icon-external-link />
-        </default-button>
+        </a>
         <select-control size="xxs" @change="handleFilterChanged" :selected="advanceFilterSelected" v-show="showAdvanceFilter">
           <option v-for="filter in advanceFilter" v-bind:value="filter.value" :key="filter.key">
             {{ filter.text }}
diff --git a/resources/js/components/ScatterChart.vue b/resources/js/components/ScatterChart.vue
index fab97e8..b41a51b 100644
--- a/resources/js/components/ScatterChart.vue
+++ b/resources/js/components/ScatterChart.vue
@@ -3,15 +3,15 @@
     <div class="h-12 flex items-center px-6 mt-4 pb-0">
       <h4 class="mr-3 leading-tight text-sm font-bold">{{ checkTitle }}</h4>
       <div class="flex relative ml-auto flex-shrink-0">
-        <default-button size="xs" class="mr-2" @click="fillData()" v-show="buttonRefresh">
+        <button type="button" class="btn btn-default btn-xs mr-2" @click="fillData()" v-show="buttonRefresh">
           <icon-refresh />
-        </default-button>
-        <default-button size="xs" class="mr-2" @click="reloadPage()" v-show="buttonReload">
+        </button>
+        <button type="button" class="btn btn-default btn-xs mr-2" @click="reloadPage()" v-show="buttonReload">
           <icon-refresh />
-        </default-button>
-        <default-button size="xs" class="mr-2" component="a" :href="externalLink" :target="externalLinkIn" v-show="btnExtLink">
+        </button>
+        <a class="btn btn-default btn-xs mr-2" :href="externalLink" :target="externalLinkIn" v-show="btnExtLink">
           <icon-external-link />
-        </default-button>
+        </a>
       </div>
     </div>
     <line-chart v-if="!loading" :chart-data="datacollection" :options="options"></line-chart>
diff --git a/resources/js/components/StackedChart.vue b/resources/js/components/StackedChart.vue
index 2258f93..4a16d9d 100644
--- a/resources/js/components/StackedChart.vue
+++ b/resources/js/components/StackedChart.vue
@@ -3,15 +3,15 @@
     <div class="h-12 flex items-center px-6 mt-4">
       <h4 class="mr-3 leading-tight text-sm font-bold">{{ checkTitle }}</h4>
       <div class="flex relative ml-auto flex-shrink-0">
-        <default-button size="xs" class="mr-2" @click="fillData()" v-show="buttonRefresh">
+        <button type="button" class="btn btn-default btn-xs mr-2" @click="fillData()" v-show="buttonRefresh">
           <icon-refresh />
-        </default-button>
-        <default-button size="xs" class="mr-2" @click="reloadPage()" v-show="buttonReload">
+        </button>
+        <button type="button" class="btn btn-default btn-xs mr-2" @click="reloadPage()" v-show="buttonReload">
           <icon-refresh />
-        </default-button>
-        <default-button size="xs" class="mr-2" component="a" :href="externalLink" :target="externalLinkIn" v-show="btnExtLink">
+        </button>
+        <a class="btn btn-default btn-xs mr-2" :href="externalLink" :target="externalLinkIn" v-show="btnExtLink">
           <icon-external-link />
-        </default-button>
+        </a>
         <select-control size="xxs" @change="handleFilterChanged" :selected="advanceFilterSelected" v-show="showAdvanceFilter">
           <option v-for="filter in advanceFilter" v-bind:value="filter.value" :key="filter.key">
             {{ filter.text }}
diff --git a/resources/js/components/StripeChart.vue b/resources/js/components/StripeChart.vue
index 7553506..f3d6564 100644
--- a/resources/js/components/StripeChart.vue
+++ b/resources/js/components/StripeChart.vue
@@ -3,15 +3,15 @@
     <div class="h-12 flex items-center px-6 mt-4">
       <h4 class="mr-3 leading-tight text-sm font-bold">{{ checkTitle }}</h4>
       <div class="flex relative ml-auto flex-shrink-0">
-        <default-button size="xs" class="mr-2" @click="fillData()" v-show="buttonRefresh">
+        <button type="button" class="btn btn-default btn-xs mr-2" @click="fillData()" v-show="buttonRefresh">
           <icon-refresh />
-        </default-button>
-        <default-button size="xs" class="mr-2" @click="reloadPage()" v-show="buttonReload">
+        </button>
+        <button type="button" class="btn btn-default btn-xs mr-2" @click="reloadPage()" v-show="buttonReload">
           <icon-refresh />
-        </default-button>
-        <default-button size="xs" class="mr-2" component="a" :href="externalLink" :target="externalLinkIn" v-show="btnExtLink">
+        </button>
+        <a class="btn btn-default btn-xs mr-2" :href="externalLink" :target="externalLinkIn" v-show="btnExtLink">
           <icon-external-link />
-        </default-button>
+        </a>
         <select-control size="xxs" @change="handleFilterChanged" :selected="advanceFilterSelected" v-show="showAdvanceFilter">
           <option v-for="filter in advanceFilter" v-bind:value="filter.value" :key="filter.key">
             {{ filter.text }}
diff --git a/src/CardServiceProvider.php b/src/CardServiceProvider.php
index cc98f00..44302d2 100644
--- a/src/CardServiceProvider.php
+++ b/src/CardServiceProvider.php
@@ -2,49 +2,46 @@
 
 namespace Coroowicaksono\ChartJsIntegration;
 
+use Illuminate\Support\Facades\Route;
 use Illuminate\Support\ServiceProvider;
 use Laravel\Nova\Events\ServingNova;
 use Laravel\Nova\Nova;
-use Illuminate\Support\Facades\Route;
 
 class CardServiceProvider extends ServiceProvider
 {
     /**
      * Bootstrap any application services.
-     *
-     * @return void
      */
-    public function boot()
+    public function boot(): void
     {
         $this->app->booted(function () {
             $this->routes();
         });
 
         Nova::serving(function (ServingNova $event) {
-            Nova::script('nova-apex-chart', __DIR__ . '/../dist/js/chart-js-integration.js');
+            Nova::mix('chart-js-integration', __DIR__.'/../dist/mix-manifest.json');
         });
     }
 
     /**
      * Register the card's routes.
-     *
-     * @return void
      */
-    protected function routes()
+    protected function routes(): void
     {
+        if ($this->app->routesAreCached()) {
+            return;
+        }
+
         Route::middleware(['nova'])
-                ->prefix('/nova-vendor/coroowicaksono/check-data')
-                ->group(__DIR__.'/../routes/api.php');
+            ->prefix('/nova-vendor/coroowicaksono/check-data')
+            ->group(__DIR__.'/../routes/api.php');
     }
 
     /**
      * Register any application services.
-     *
-     * @return void
      */
-    public function register()
+    public function register(): void
     {
-
+        //
     }
-
 }
diff --git a/webpack.mix.js b/webpack.mix.js
index 28a8ae5..403137a 100644
--- a/webpack.mix.js
+++ b/webpack.mix.js
@@ -1,15 +1,11 @@
-const mix = require('laravel-mix')
+let mix = require('laravel-mix')
+let NovaExtension = require('laravel-nova-devtool')
+
+mix.extend('nova', new NovaExtension())
 
 mix
     .setPublicPath('dist')
     .js('resources/js/chart-js-integration.js', 'js')
     .vue({ version: 3 })
-    .webpackConfig({
-        externals: {
-            vue: 'Vue',
-            chartjs: 'Chart',
-        },
-        output: {
-            uniqueName: 'coroowicaksono/chart-js-integration',
-        },
-    })
+    .nova('coroowicaksono/chart-js-integration')
+    .version()