diff --git a/app/Http/Controllers/AdminController.php b/app/Http/Controllers/AdminController.php
index b903da21..d07963b3 100644
--- a/app/Http/Controllers/AdminController.php
+++ b/app/Http/Controllers/AdminController.php
@@ -15,55 +15,29 @@ use App\Services\Repositories\UserRepository;
 
 class AdminController extends Controller
 {
-    public function index()
+    public function chartData()
     {
         $today = Carbon::today()->timestamp;
+        $xAxis = [];
+        $userRegistration = [];
+        $textureUploads = [];
 
-        // Prepare data for the graph
-        $data = [];
-        $labels = [];
-
-        for ($i = 6; $i >= 0; $i--) {
+        for ($i = 30; $i >= 0; $i--) {
             $time = Carbon::createFromTimestamp($today - $i * 86400);
 
-            $labels[] = $time->format('m-d');
-            $data['user_registration'][] = User::like('register_at', $time->toDateString())->count();
-            $data['texture_uploads'][] = Texture::like('upload_at', $time->toDateString())->count();
+            $xAxis[] = $time->format('m-d');
+            $userRegistration[] = User::like('register_at', $time->toDateString())->count();
+            $textureUploads[] = Texture::like('upload_at', $time->toDateString())->count();
         }
 
-        $datasets = [
-            [
-                'label' => trans('admin.index.user-registration'),
-                'backgroundColor' => 'rgba(60, 141, 188, 0.6)',
-                'borderColor' => '#3c8dbc',
-                'pointRadius' => 0,
-                'pointBorderColor' => '#3c8dbc',
-                'pointBackgroundColor' => '#3c8dbc',
-                'pointHoverBackgroundColor' => '#3c8dbc',
-                'pointHoverBorderColor' => '#3c8dbc',
-                'data' => $data['user_registration'],
-            ],
-            [
-                'label' => trans('admin.index.texture-uploads'),
-                'backgroundColor' => 'rgba(210, 214, 222, 0.6)',
-                'borderColor' => '#d2d6de',
-                'pointRadius' => 0,
-                'pointBorderColor' => '#c1c7d1',
-                'pointBackgroundColor' => '#c1c7d1',
-                'pointHoverBackgroundColor' => '#c1c7d1',
-                'pointHoverBorderColor' => '#c1c7d1',
-                'data' => $data['texture_uploads'],
+        return [
+            'labels' => [
+                trans('admin.index.user-registration'),
+                trans('admin.index.texture-uploads')
             ],
+            'xAxis' => $xAxis,
+            'data' => [$userRegistration, $textureUploads]
         ];
-
-        $options = [
-            'tooltips' => [
-                'intersect' => false,
-                'mode' => 'index',
-            ],
-        ];
-
-        return view('admin.index', ['chartOptions' => compact('labels', 'datasets', 'options')]);
     }
 
     public function customize(Request $request)
diff --git a/package.json b/package.json
index 91d22386..a71c57e5 100644
--- a/package.json
+++ b/package.json
@@ -20,7 +20,7 @@
     "@babel/runtime": "^7.3.4",
     "@fortawesome/fontawesome-free": "^5.7.2",
     "admin-lte": "^2.4.10",
-    "chart.js": "^2.7.3",
+    "echarts": "^4.1.0",
     "icheck": "^1.0.2",
     "jquery": "^3.3.1",
     "skinview3d": "^1.1.0",
@@ -38,6 +38,7 @@
     "@babel/preset-env": "^7.3.4",
     "@babel/preset-typescript": "^7.3.3",
     "@gplane/tsconfig": "^1.0.0",
+    "@types/echarts": "^4.1.7",
     "@types/jest": "^24.0.11",
     "@types/jquery": "^3.3.9",
     "@types/toastr": "^2.1.36",
@@ -155,7 +156,13 @@
           "no-unused-vars": 0,
           "no-invalid-this": 0,
           "indent": 0,
-          "@typescript-eslint/indent": [2, 2, { "SwitchCase": 1 }]
+          "@typescript-eslint/indent": [
+            2,
+            2,
+            {
+              "SwitchCase": 1
+            }
+          ]
         }
       }
     ]
diff --git a/resources/assets/src/views/admin/Dashboard.ts b/resources/assets/src/views/admin/Dashboard.ts
new file mode 100644
index 00000000..731f0a35
--- /dev/null
+++ b/resources/assets/src/views/admin/Dashboard.ts
@@ -0,0 +1,95 @@
+import echarts from 'echarts/lib/echarts'
+import 'echarts/lib/chart/line'
+import 'echarts/lib/component/dataZoom'
+import 'echarts/lib/component/legend'
+import 'echarts/lib/component/tooltip'
+import { get } from '../../js/net'
+
+interface ChartData {
+  labels: string[]
+  xAxis: string[]
+  data: number[][]
+}
+
+async function createChart(el: HTMLCanvasElement) {
+  const chart = echarts.init(el)
+  chart.setOption({
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: {
+        type: 'cross',
+        label: {
+          backgroundColor: '#6a7985',
+        },
+      },
+    },
+    dataZoom: [
+      { type: 'inside', start: 75 },
+      { type: 'slider', start: 75 },
+    ],
+    legend: {
+      data: [],
+    },
+    xAxis: [
+      {
+        type: 'category',
+        boundaryGap: false,
+        data: [],
+      },
+    ],
+    yAxis: [
+      {
+        type: 'category',
+        boundaryGap: false,
+      },
+    ],
+    series: [
+      {
+        name: '',
+        type: 'line',
+        stack: '',
+        areaStyle: {},
+        data: [],
+      },
+      {
+        name: '',
+        type: 'line',
+        stack: '',
+        areaStyle: {},
+        data: [],
+      },
+    ],
+  })
+
+  const chartData: ChartData = await get('/admin/chart')
+  chart.setOption({
+    legend: {
+      data: chartData.labels,
+    },
+    xAxis: [
+      {
+        type: 'category',
+        boundaryGap: false,
+        data: chartData.xAxis,
+      },
+    ],
+    series: chartData.labels.map(
+      (label: string, index: number): echarts.EChartOption.SeriesLine => ({
+        name: label,
+        type: 'line',
+        stack: 'total',
+        areaStyle: {},
+        data: chartData.data[index],
+        smooth: true,
+        symbol: 'roundRect',
+      })
+    ),
+  })
+
+  return chart
+}
+
+const el = document.querySelector('canvas')
+if (el) {
+  createChart(el)
+}
diff --git a/resources/assets/src/views/route.ts b/resources/assets/src/views/route.ts
index dd750448..94966cf9 100644
--- a/resources/assets/src/views/route.ts
+++ b/resources/assets/src/views/route.ts
@@ -19,6 +19,10 @@ export default [
     component: () => import('./user/Profile.vue'),
     el: '.content',
   },
+  {
+    path: 'admin',
+    script: () => import('./admin/Dashboard'),
+  },
   {
     path: 'admin/users',
     component: () => import('./admin/Users.vue'),
diff --git a/resources/views/admin/index.blade.php b/resources/views/admin/index.blade.php
index 240a7975..5dbbc981 100644
--- a/resources/views/admin/index.blade.php
+++ b/resources/views/admin/index.blade.php
@@ -67,14 +67,9 @@
                 <div class="box box-primary">
                     <div class="box-header with-border">
                         <h3 class="box-title">@lang('admin.index.overview')</h3>
-                        <div class="box-tools pull-right">
-                            <button class="btn btn-box-tool" data-widget="collapse"><i class="fas fa-minus"></i></button>
-                            <button class="btn btn-box-tool" data-widget="remove"><i class="fas fa-times"></i></button>
-                        </div>
                     </div>
                     <div class="box-body">
-                        <canvas id="overview" width="400" height="200"></canvas>
-                        <div class="chart"></div>
+                        <canvas height="500" width="600" id="chart"></canvas>
                     </div><!-- /.box-body -->
                 </div><!-- /.box -->
             </div>
@@ -82,18 +77,4 @@
 
     </section><!-- /.content -->
 </div><!-- /.content-wrapper -->
-
-<script src="{{ webpack_assets('Chart.min.js') }}"></script>
-<script>
-    var chartOptions = {!! json_encode($chartOptions) !!};
-
-    var chart = new Chart(document.getElementById('overview').getContext('2d'), {
-        type: 'line',
-        data: {
-            labels: chartOptions.labels,
-            datasets: chartOptions.datasets
-        },
-        options: chartOptions.options
-    });
-</script>
 @endsection
diff --git a/routes/web.php b/routes/web.php
index e7b0de91..8612ffe7 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -97,7 +97,8 @@ Route::group(['prefix' => 'skinlib'], function () {
  * Admin Panel
  */
 Route::group(['middleware' => ['auth', 'admin'], 'prefix' => 'admin'], function () {
-    Route::get('/', 'AdminController@index');
+    Route::view('/', 'admin.index');
+    Route::get('/chart', 'AdminController@chartData');
 
     Route::any('/customize', 'AdminController@customize');
     Route::any('/score', 'AdminController@score');
diff --git a/tests/AdminControllerTest.php b/tests/AdminControllerTest.php
index 3bc070cc..a575c91a 100644
--- a/tests/AdminControllerTest.php
+++ b/tests/AdminControllerTest.php
@@ -20,9 +20,9 @@ class AdminControllerTest extends BrowserKitTestCase
         $this->actAs('admin');
     }
 
-    public function testIndex()
+    public function testChartData()
     {
-        $this->visit('/admin')->seePageIs('/admin');
+        $this->getJson('/admin/chart')->seeJsonStructure(['labels', 'xAxis', 'data']);
     }
 
     public function testCustomize()
diff --git a/webpack.config.js b/webpack.config.js
index 16dbd2ce..568f1b8b 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -120,7 +120,6 @@ const config = {
         to: 'skins',
         flatten: true,
       },
-      'node_modules/chart.js/dist/Chart.min.js',
       'resources/assets/src/images/bg.jpg',
       'resources/assets/src/images/favicon.ico',
     ]),
diff --git a/yarn.lock b/yarn.lock
index e1284b29..e36b61ad 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -939,6 +939,13 @@
   dependencies:
     "@babel/types" "^7.3.0"
 
+"@types/echarts@^4.1.7":
+  version "4.1.7"
+  resolved "https://registry.npmjs.org/@types/echarts/-/echarts-4.1.7.tgz#40df9d259272a57e9299eef127d417d49af12aeb"
+  integrity sha512-Kc3n0r7Hdz/3ASAZD1lRyo5Kd8boMAkOboopNqf5Lwj+yc+MjiMvVBcFho5g26Kc+lXfgT2E76m4Rw2ERvDNNg==
+  dependencies:
+    "@types/zrender" "*"
+
 "@types/istanbul-lib-coverage@^1.1.0":
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-1.1.0.tgz#2cc2ca41051498382b43157c8227fea60363f94a"
@@ -1017,6 +1024,11 @@
   resolved "https://registry.yarnpkg.com/@types/yargs/-/yargs-12.0.9.tgz#693e76a52f61a2f1e7fb48c0eef167b95ea4ffd0"
   integrity sha512-sCZy4SxP9rN2w30Hlmg5dtdRwgYQfYRiLo9usw8X9cxlf+H4FqM1xX7+sNH7NNKVdbXMJWqva7iyy+fxh/V7fA==
 
+"@types/zrender@*":
+  version "4.0.0"
+  resolved "https://registry.npmjs.org/@types/zrender/-/zrender-4.0.0.tgz#a6806f12ec4eccaaebd9b0d816f049aca6188fbd"
+  integrity sha512-s89GOIeKFiod2KSqHkfd2rzx+T2DVu7ihZCBEBnhFrzvQPUmzvDSBot9Fi1DfMQm9Odg+rTqoMGC38RvrwJK2w==
+
 "@typescript-eslint/eslint-plugin@^1.4.2":
   version "1.4.2"
   resolved "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-1.4.2.tgz#370bc32022d1cc884a5dcf62624ef2024182769d"
@@ -2156,26 +2168,6 @@ chart.js@1.0.*:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/chart.js/-/chart.js-1.0.2.tgz#ad57d2229cfd8ccf5955147e8121b4911e69dfe7"
 
-chart.js@^2.7.3:
-  version "2.7.3"
-  resolved "https://registry.yarnpkg.com/chart.js/-/chart.js-2.7.3.tgz#cdb61618830bf216dc887e2f7b1b3c228b73c57e"
-  dependencies:
-    chartjs-color "^2.1.0"
-    moment "^2.10.2"
-
-chartjs-color-string@^0.5.0:
-  version "0.5.0"
-  resolved "https://registry.yarnpkg.com/chartjs-color-string/-/chartjs-color-string-0.5.0.tgz#8d3752d8581d86687c35bfe2cb80ac5213ceb8c1"
-  dependencies:
-    color-name "^1.0.0"
-
-chartjs-color@^2.1.0:
-  version "2.2.0"
-  resolved "https://registry.npmjs.org/chartjs-color/-/chartjs-color-2.2.0.tgz#84a2fb755787ed85c39dd6dd8c7b1d88429baeae"
-  dependencies:
-    chartjs-color-string "^0.5.0"
-    color-convert "^0.5.3"
-
 chokidar@^2.0.0:
   version "2.1.2"
   resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-2.1.2.tgz#9c23ea40b01638439e0513864d362aeacc5ad058"
@@ -2317,10 +2309,6 @@ collection-visit@^1.0.0:
     map-visit "^1.0.0"
     object-visit "^1.0.0"
 
-color-convert@^0.5.3:
-  version "0.5.3"
-  resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-0.5.3.tgz#bdb6c69ce660fadffe0b0007cc447e1b9f7282bd"
-
 color-convert@^1.9.0, color-convert@^1.9.1:
   version "1.9.3"
   resolved "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz#bb71850690e1f136567de629d2d5471deda4c1e8"
@@ -3146,6 +3134,13 @@ ecc-jsbn@~0.1.1:
     jsbn "~0.1.0"
     safer-buffer "^2.1.0"
 
+echarts@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.npmjs.org/echarts/-/echarts-4.1.0.tgz#d588c95f73c1a9928b9c73d5b769751c3185bcdc"
+  integrity sha512-gP1e1fNnAj9KJpTDLXV21brklbfJlqeINmpQDJCDta9TX3cPoqyQOiDVcEPzbOVHqgBRgTOwNxC5iGwJ89014A==
+  dependencies:
+    zrender "4.0.4"
+
 ee-first@1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/ee-first/-/ee-first-1.1.1.tgz#590c61156b0ae2f4f0255732a158b266bc56b21d"
@@ -5865,10 +5860,6 @@ module-deps@^6.0.0:
     through2 "^2.0.0"
     xtend "^4.0.0"
 
-moment@^2.10.2:
-  version "2.22.2"
-  resolved "https://registry.npmjs.org/moment/-/moment-2.22.2.tgz#3c257f9839fc0e93ff53149632239eb90783ff66"
-
 moment@^2.24.0:
   version "2.24.0"
   resolved "https://registry.npmjs.org/moment/-/moment-2.24.0.tgz#0d055d53f5052aa653c9f6eb68bb5d12bf5c2b5b"
@@ -8947,3 +8938,8 @@ yargs@^12.0.2, yargs@^12.0.4:
     which-module "^2.0.0"
     y18n "^3.2.1 || ^4.0.0"
     yargs-parser "^11.1.1"
+
+zrender@4.0.4:
+  version "4.0.4"
+  resolved "https://registry.npmjs.org/zrender/-/zrender-4.0.4.tgz#910e60d888f00c9599073f23758dd23345fe48fd"
+  integrity sha512-03Vd/BDl/cPXp8E61f5+Xbgr/a4vDyFA+uUtUc1s+5KgcPbyY2m+78R/9LQwkR6QwFYHG8qk25Q8ESGs/qpkZw==