diff --git a/public/mix-manifest.json b/public/mix-manifest.json
index 178717c3..a210748c 100644
--- a/public/mix-manifest.json
+++ b/public/mix-manifest.json
@@ -72,7 +72,7 @@
     "/chunks/recent-uploads.js": "/chunks/recent-uploads.js?id=8577d4c771602671b38a",
     "/chunks/settings.js": "/chunks/settings.js?id=3b85172bcc9cfc7b6a35",
     "/chunks/settings-password.js": "/chunks/settings-password.js?id=bcad962b9d218e05a0fb",
-    "/chunks/settings-storage.js": "/chunks/settings-storage.js?id=6e69a64a01e345af8b55",
+    "/chunks/settings-storage.js": "/chunks/settings-storage.js?id=7f7222d19b432399ef8d",
     "/chunks/settings~chunks/settings-password.js": "/chunks/settings~chunks/settings-password.js?id=aafc9cd6aa47b01bc25a",
     "/chunks/setup-wizard.js": "/chunks/setup-wizard.js?id=651d5accf401908724c5",
     "/chunks/shared.js": "/chunks/shared.js?id=db60726012b6d246bd77",
@@ -96,7 +96,7 @@
     "/chunks/user-delete.js": "/chunks/user-delete.js?id=1c2f412573ca3147b714",
     "/chunks/user-detail.js": "/chunks/user-detail.js?id=8a244a18b49f3219dcbf",
     "/chunks/user-password.js": "/chunks/user-password.js?id=a51851961c9f6eab7edf",
-    "/chunks/user-storage.js": "/chunks/user-storage.js?id=9e14ca201f90a65b6c53",
+    "/chunks/user-storage.js": "/chunks/user-storage.js?id=a765100ff7814b034649",
     "/chunks/user-subscription.js": "/chunks/user-subscription.js?id=cadf4829b824fd761c13",
     "/chunks/users.js": "/chunks/users.js?id=ab7eeac6e8559dc1eb2b",
     "/vendors~chunks/admin~chunks/admin-account~chunks/app-appearance~chunks/app-billings~chunks/app-email~25430133.js": "/vendors~chunks/admin~chunks/admin-account~chunks/app-appearance~chunks/app-billings~chunks/app-email~25430133.js?id=1128eb985c40638c7015",
@@ -401,5 +401,93 @@
     "/chunks/billing~chunks/settings-storage~chunks/user-storage~chunks/user-subscription.fc96502ee414d46390b8.hot-update.js": "/chunks/billing~chunks/settings-storage~chunks/user-storage~chunks/user-subscription.fc96502ee414d46390b8.hot-update.js",
     "/chunks/billing~chunks/settings-storage~chunks/user-storage~chunks/user-subscription.ab77530f6a2a35df1ddd.hot-update.js": "/chunks/billing~chunks/settings-storage~chunks/user-storage~chunks/user-subscription.ab77530f6a2a35df1ddd.hot-update.js",
     "/chunks/billing~chunks/settings-storage~chunks/user-storage~chunks/user-subscription.82770ea7f4382984a333.hot-update.js": "/chunks/billing~chunks/settings-storage~chunks/user-storage~chunks/user-subscription.82770ea7f4382984a333.hot-update.js",
-    "/chunks/billing~chunks/settings-storage~chunks/user-storage~chunks/user-subscription.bd1a0faf9bc919e624a5.hot-update.js": "/chunks/billing~chunks/settings-storage~chunks/user-storage~chunks/user-subscription.bd1a0faf9bc919e624a5.hot-update.js"
+    "/chunks/billing~chunks/settings-storage~chunks/user-storage~chunks/user-subscription.bd1a0faf9bc919e624a5.hot-update.js": "/chunks/billing~chunks/settings-storage~chunks/user-storage~chunks/user-subscription.bd1a0faf9bc919e624a5.hot-update.js",
+    "/chunks/settings-storage.89503032180399e25232.hot-update.js": "/chunks/settings-storage.89503032180399e25232.hot-update.js",
+    "/chunks/user-storage.89503032180399e25232.hot-update.js": "/chunks/user-storage.89503032180399e25232.hot-update.js",
+    "/chunks/settings-storage.46b730d724c814058797.hot-update.js": "/chunks/settings-storage.46b730d724c814058797.hot-update.js",
+    "/chunks/user-storage.46b730d724c814058797.hot-update.js": "/chunks/user-storage.46b730d724c814058797.hot-update.js",
+    "/chunks/settings-storage.9b900306abf5e9ca7c7e.hot-update.js": "/chunks/settings-storage.9b900306abf5e9ca7c7e.hot-update.js",
+    "/chunks/user-storage.9b900306abf5e9ca7c7e.hot-update.js": "/chunks/user-storage.9b900306abf5e9ca7c7e.hot-update.js",
+    "/chunks/settings-storage.9e8e3c1e6f3f45b2b900.hot-update.js": "/chunks/settings-storage.9e8e3c1e6f3f45b2b900.hot-update.js",
+    "/chunks/user-storage.9e8e3c1e6f3f45b2b900.hot-update.js": "/chunks/user-storage.9e8e3c1e6f3f45b2b900.hot-update.js",
+    "/chunks/settings-storage.2cfcc98821ef993b5452.hot-update.js": "/chunks/settings-storage.2cfcc98821ef993b5452.hot-update.js",
+    "/chunks/user-storage.2cfcc98821ef993b5452.hot-update.js": "/chunks/user-storage.2cfcc98821ef993b5452.hot-update.js",
+    "/chunks/settings-storage.3f560b2d60c1a0fc75aa.hot-update.js": "/chunks/settings-storage.3f560b2d60c1a0fc75aa.hot-update.js",
+    "/chunks/user-storage.3f560b2d60c1a0fc75aa.hot-update.js": "/chunks/user-storage.3f560b2d60c1a0fc75aa.hot-update.js",
+    "/chunks/settings-storage.a0dcaf173a0d49a3f3c9.hot-update.js": "/chunks/settings-storage.a0dcaf173a0d49a3f3c9.hot-update.js",
+    "/chunks/user-storage.a0dcaf173a0d49a3f3c9.hot-update.js": "/chunks/user-storage.a0dcaf173a0d49a3f3c9.hot-update.js",
+    "/chunks/settings-storage.b6917b9eb5ffbdff1582.hot-update.js": "/chunks/settings-storage.b6917b9eb5ffbdff1582.hot-update.js",
+    "/chunks/user-storage.b6917b9eb5ffbdff1582.hot-update.js": "/chunks/user-storage.b6917b9eb5ffbdff1582.hot-update.js",
+    "/chunks/settings-storage.b8f2eaf05b2e01c68544.hot-update.js": "/chunks/settings-storage.b8f2eaf05b2e01c68544.hot-update.js",
+    "/chunks/user-storage.b8f2eaf05b2e01c68544.hot-update.js": "/chunks/user-storage.b8f2eaf05b2e01c68544.hot-update.js",
+    "/chunks/settings-storage.d180346128fb4617b0ee.hot-update.js": "/chunks/settings-storage.d180346128fb4617b0ee.hot-update.js",
+    "/chunks/user-storage.d180346128fb4617b0ee.hot-update.js": "/chunks/user-storage.d180346128fb4617b0ee.hot-update.js",
+    "/chunks/settings-storage.6b044d74325f62b5648e.hot-update.js": "/chunks/settings-storage.6b044d74325f62b5648e.hot-update.js",
+    "/chunks/user-storage.6b044d74325f62b5648e.hot-update.js": "/chunks/user-storage.6b044d74325f62b5648e.hot-update.js",
+    "/chunks/settings-storage.0c016144dc2277ab2d03.hot-update.js": "/chunks/settings-storage.0c016144dc2277ab2d03.hot-update.js",
+    "/chunks/user-storage.0c016144dc2277ab2d03.hot-update.js": "/chunks/user-storage.0c016144dc2277ab2d03.hot-update.js",
+    "/chunks/settings-storage.afff06d9cdddb73e1f04.hot-update.js": "/chunks/settings-storage.afff06d9cdddb73e1f04.hot-update.js",
+    "/chunks/user-storage.afff06d9cdddb73e1f04.hot-update.js": "/chunks/user-storage.afff06d9cdddb73e1f04.hot-update.js",
+    "/chunks/settings-storage.9a10bb514ce0cf670f8d.hot-update.js": "/chunks/settings-storage.9a10bb514ce0cf670f8d.hot-update.js",
+    "/chunks/user-storage.9a10bb514ce0cf670f8d.hot-update.js": "/chunks/user-storage.9a10bb514ce0cf670f8d.hot-update.js",
+    "/chunks/settings-storage.9eb384bbe9068c49fb60.hot-update.js": "/chunks/settings-storage.9eb384bbe9068c49fb60.hot-update.js",
+    "/chunks/user-storage.9eb384bbe9068c49fb60.hot-update.js": "/chunks/user-storage.9eb384bbe9068c49fb60.hot-update.js",
+    "/chunks/settings-storage.379331d0c8d50f0d2122.hot-update.js": "/chunks/settings-storage.379331d0c8d50f0d2122.hot-update.js",
+    "/chunks/user-storage.379331d0c8d50f0d2122.hot-update.js": "/chunks/user-storage.379331d0c8d50f0d2122.hot-update.js",
+    "/chunks/settings-storage.b000b485a1e2aa995a1f.hot-update.js": "/chunks/settings-storage.b000b485a1e2aa995a1f.hot-update.js",
+    "/chunks/user-storage.b000b485a1e2aa995a1f.hot-update.js": "/chunks/user-storage.b000b485a1e2aa995a1f.hot-update.js",
+    "/chunks/settings-storage.52e6f92ed8b5fc13702d.hot-update.js": "/chunks/settings-storage.52e6f92ed8b5fc13702d.hot-update.js",
+    "/chunks/user-storage.52e6f92ed8b5fc13702d.hot-update.js": "/chunks/user-storage.52e6f92ed8b5fc13702d.hot-update.js",
+    "/chunks/settings-storage.7aa1281724c9a46c2bd7.hot-update.js": "/chunks/settings-storage.7aa1281724c9a46c2bd7.hot-update.js",
+    "/chunks/user-storage.7aa1281724c9a46c2bd7.hot-update.js": "/chunks/user-storage.7aa1281724c9a46c2bd7.hot-update.js",
+    "/chunks/settings-storage.4da02ae4d0f43ad09d2e.hot-update.js": "/chunks/settings-storage.4da02ae4d0f43ad09d2e.hot-update.js",
+    "/chunks/user-storage.4da02ae4d0f43ad09d2e.hot-update.js": "/chunks/user-storage.4da02ae4d0f43ad09d2e.hot-update.js",
+    "/chunks/settings-storage.387469dbb5dcacf48695.hot-update.js": "/chunks/settings-storage.387469dbb5dcacf48695.hot-update.js",
+    "/chunks/user-storage.387469dbb5dcacf48695.hot-update.js": "/chunks/user-storage.387469dbb5dcacf48695.hot-update.js",
+    "/chunks/settings-storage.61022c85af139236d235.hot-update.js": "/chunks/settings-storage.61022c85af139236d235.hot-update.js",
+    "/chunks/user-storage.61022c85af139236d235.hot-update.js": "/chunks/user-storage.61022c85af139236d235.hot-update.js",
+    "/chunks/settings-storage.50ad4270cee35a75ba1b.hot-update.js": "/chunks/settings-storage.50ad4270cee35a75ba1b.hot-update.js",
+    "/chunks/user-storage.50ad4270cee35a75ba1b.hot-update.js": "/chunks/user-storage.50ad4270cee35a75ba1b.hot-update.js",
+    "/chunks/settings-storage.7e14bd7302953348e2b1.hot-update.js": "/chunks/settings-storage.7e14bd7302953348e2b1.hot-update.js",
+    "/chunks/user-storage.7e14bd7302953348e2b1.hot-update.js": "/chunks/user-storage.7e14bd7302953348e2b1.hot-update.js",
+    "/chunks/settings-storage.0fc44a3b05a5f41bf95d.hot-update.js": "/chunks/settings-storage.0fc44a3b05a5f41bf95d.hot-update.js",
+    "/chunks/user-storage.0fc44a3b05a5f41bf95d.hot-update.js": "/chunks/user-storage.0fc44a3b05a5f41bf95d.hot-update.js",
+    "/chunks/settings-storage.4819a7b03b022f41d85b.hot-update.js": "/chunks/settings-storage.4819a7b03b022f41d85b.hot-update.js",
+    "/chunks/user-storage.4819a7b03b022f41d85b.hot-update.js": "/chunks/user-storage.4819a7b03b022f41d85b.hot-update.js",
+    "/chunks/settings-storage.0cc51cc8192bd8337a16.hot-update.js": "/chunks/settings-storage.0cc51cc8192bd8337a16.hot-update.js",
+    "/chunks/user-storage.0cc51cc8192bd8337a16.hot-update.js": "/chunks/user-storage.0cc51cc8192bd8337a16.hot-update.js",
+    "/chunks/settings-storage.193177eb9597d6ec7b1d.hot-update.js": "/chunks/settings-storage.193177eb9597d6ec7b1d.hot-update.js",
+    "/chunks/user-storage.193177eb9597d6ec7b1d.hot-update.js": "/chunks/user-storage.193177eb9597d6ec7b1d.hot-update.js",
+    "/chunks/settings-storage.d696315dcd77e9a75181.hot-update.js": "/chunks/settings-storage.d696315dcd77e9a75181.hot-update.js",
+    "/chunks/user-storage.d696315dcd77e9a75181.hot-update.js": "/chunks/user-storage.d696315dcd77e9a75181.hot-update.js",
+    "/chunks/settings-storage.9abecd55ec160c6cc0b1.hot-update.js": "/chunks/settings-storage.9abecd55ec160c6cc0b1.hot-update.js",
+    "/chunks/user-storage.9abecd55ec160c6cc0b1.hot-update.js": "/chunks/user-storage.9abecd55ec160c6cc0b1.hot-update.js",
+    "/chunks/settings-storage.8fba68e12d700429e252.hot-update.js": "/chunks/settings-storage.8fba68e12d700429e252.hot-update.js",
+    "/chunks/user-storage.8fba68e12d700429e252.hot-update.js": "/chunks/user-storage.8fba68e12d700429e252.hot-update.js",
+    "/chunks/settings-storage.17befb53e9c2e0189769.hot-update.js": "/chunks/settings-storage.17befb53e9c2e0189769.hot-update.js",
+    "/chunks/user-storage.17befb53e9c2e0189769.hot-update.js": "/chunks/user-storage.17befb53e9c2e0189769.hot-update.js",
+    "/chunks/settings-storage.cbb74b761a2de634f5d2.hot-update.js": "/chunks/settings-storage.cbb74b761a2de634f5d2.hot-update.js",
+    "/chunks/user-storage.cbb74b761a2de634f5d2.hot-update.js": "/chunks/user-storage.cbb74b761a2de634f5d2.hot-update.js",
+    "/chunks/settings-storage.fe10858f4cde8898fa22.hot-update.js": "/chunks/settings-storage.fe10858f4cde8898fa22.hot-update.js",
+    "/chunks/user-storage.fe10858f4cde8898fa22.hot-update.js": "/chunks/user-storage.fe10858f4cde8898fa22.hot-update.js",
+    "/chunks/settings-storage.24f53f11308c9bc997c8.hot-update.js": "/chunks/settings-storage.24f53f11308c9bc997c8.hot-update.js",
+    "/chunks/user-storage.24f53f11308c9bc997c8.hot-update.js": "/chunks/user-storage.24f53f11308c9bc997c8.hot-update.js",
+    "/chunks/settings-storage.d442fbefc084249dd58a.hot-update.js": "/chunks/settings-storage.d442fbefc084249dd58a.hot-update.js",
+    "/chunks/user-storage.d442fbefc084249dd58a.hot-update.js": "/chunks/user-storage.d442fbefc084249dd58a.hot-update.js",
+    "/chunks/settings-storage.0c23388c1411b88d3f05.hot-update.js": "/chunks/settings-storage.0c23388c1411b88d3f05.hot-update.js",
+    "/chunks/user-storage.0c23388c1411b88d3f05.hot-update.js": "/chunks/user-storage.0c23388c1411b88d3f05.hot-update.js",
+    "/chunks/settings-storage.c7a584369626afb8bde1.hot-update.js": "/chunks/settings-storage.c7a584369626afb8bde1.hot-update.js",
+    "/chunks/user-storage.c7a584369626afb8bde1.hot-update.js": "/chunks/user-storage.c7a584369626afb8bde1.hot-update.js",
+    "/chunks/settings-storage.42bc5e0cd15119839b21.hot-update.js": "/chunks/settings-storage.42bc5e0cd15119839b21.hot-update.js",
+    "/chunks/user-storage.42bc5e0cd15119839b21.hot-update.js": "/chunks/user-storage.42bc5e0cd15119839b21.hot-update.js",
+    "/chunks/settings-storage.f465135849291b27a718.hot-update.js": "/chunks/settings-storage.f465135849291b27a718.hot-update.js",
+    "/chunks/user-storage.f465135849291b27a718.hot-update.js": "/chunks/user-storage.f465135849291b27a718.hot-update.js",
+    "/chunks/settings-storage.7f382d1e876658951392.hot-update.js": "/chunks/settings-storage.7f382d1e876658951392.hot-update.js",
+    "/chunks/user-storage.7f382d1e876658951392.hot-update.js": "/chunks/user-storage.7f382d1e876658951392.hot-update.js",
+    "/chunks/settings-storage.2099fc8d3ef16267e2d1.hot-update.js": "/chunks/settings-storage.2099fc8d3ef16267e2d1.hot-update.js",
+    "/chunks/user-storage.2099fc8d3ef16267e2d1.hot-update.js": "/chunks/user-storage.2099fc8d3ef16267e2d1.hot-update.js",
+    "/chunks/settings-storage.7c726fc9cdb459216abc.hot-update.js": "/chunks/settings-storage.7c726fc9cdb459216abc.hot-update.js",
+    "/chunks/user-storage.7c726fc9cdb459216abc.hot-update.js": "/chunks/user-storage.7c726fc9cdb459216abc.hot-update.js",
+    "/chunks/settings-storage.b3328529f26296641903.hot-update.js": "/chunks/settings-storage.b3328529f26296641903.hot-update.js",
+    "/chunks/user-storage.b3328529f26296641903.hot-update.js": "/chunks/user-storage.b3328529f26296641903.hot-update.js"
 }
diff --git a/resources/js/components/UI/BarChart.vue b/resources/js/components/UI/BarChart.vue
index 2a5ffbcd..2760bc3d 100644
--- a/resources/js/components/UI/BarChart.vue
+++ b/resources/js/components/UI/BarChart.vue
@@ -1,9 +1,18 @@
 <template>
-	<div class="flex items-end justify-between h-28">
+	<div class="flex items-end justify-between sm:h-28 h-20">
+		<!--Data bar-->
 		<span
-			class="w-2.5 block rounded-lg lg:mr-2 mr-1.5"
-			:style="{height: height + '%', backgroundColor: color}"
+			class="md:w-2 w-1 block rounded-lg lg:mr-2 mr-1.5 bg-theme"
 			v-for="(height, i) in data"
+			:style="{height: height.amount + '%'}"
+			:key="i">
+		</span>
+
+		<!--Ghost bar-->
+		<span
+			class="md:w-2 w-1 block rounded-lg lg:mr-2 mr-1.5 bg-gray-100"
+			v-for="(ghost, i) in ghostLength"
+			:style="{height: '5%'}"
 			:key="i">
 		</span>
 	</div>
@@ -11,9 +20,14 @@
 <script>
 export default {
 	name: 'BarChart',
-	props: {
-		data: {},
-		color: {},
+	props: [
+		'color',
+		'data',
+	],
+	computed: {
+		ghostLength() {
+			return 45 - this.data.length
+		}
 	}
 }
 </script>
\ No newline at end of file
diff --git a/src/App/Users/Resources/UserStorageResource.php b/src/App/Users/Resources/UserStorageResource.php
index f01f1331..74d841f3 100644
--- a/src/App/Users/Resources/UserStorageResource.php
+++ b/src/App/Users/Resources/UserStorageResource.php
@@ -1,7 +1,9 @@
 <?php
+
 namespace App\Users\Resources;
 
 use ByteUnits\Metric;
+use Carbon\Carbon;
 use Illuminate\Support\Facades\DB;
 use Illuminate\Http\Resources\Json\JsonResource;
 
@@ -20,18 +22,18 @@ class UserStorageResource extends JsonResource
 
         $totalCapacity = match (get_settings('subscription_type')) {
             'metered' => $this->usedCapacity / 1000000000,
-            'fixed'   => $this->limitations->max_storage_amount,
-            default   => $this->limitations->max_storage_amount,
+            'fixed' => $this->limitations->max_storage_amount,
+            default => $this->limitations->max_storage_amount,
         };
 
         return [
             'data' => [
-                'id'         => (string) $this->id,
+                'id'         => (string)$this->id,
                 'type'       => 'storage',
                 'attributes' => [
                     'used'       => Metric::bytes($this->usedCapacity)->format(),
                     'capacity'   => format_gigabytes($totalCapacity),
-                    'percentage' => (float) get_storage_percentage($this->usedCapacity, $totalCapacity),
+                    'percentage' => (float)get_storage_percentage($this->usedCapacity, $totalCapacity),
                 ],
                 'meta'       => [
                     'traffic'   => [
@@ -44,23 +46,23 @@ class UserStorageResource extends JsonResource
                     ],
                     'images'    => [
                         'used'       => Metric::bytes($images)->format(),
-                        'percentage' => (float) get_storage_percentage($images, $totalCapacity),
+                        'percentage' => (float)get_storage_percentage($images, $totalCapacity),
                     ],
                     'audios'    => [
                         'used'       => Metric::bytes($audios)->format(),
-                        'percentage' => (float) get_storage_percentage($audios, $totalCapacity),
+                        'percentage' => (float)get_storage_percentage($audios, $totalCapacity),
                     ],
                     'videos'    => [
                         'used'       => Metric::bytes($videos)->format(),
-                        'percentage' => (float) get_storage_percentage($videos, $totalCapacity),
+                        'percentage' => (float)get_storage_percentage($videos, $totalCapacity),
                     ],
                     'documents' => [
                         'used'       => Metric::bytes($documents)->format(),
-                        'percentage' => (float) get_storage_percentage($documents, $totalCapacity),
+                        'percentage' => (float)get_storage_percentage($documents, $totalCapacity),
                     ],
                     'others'    => [
                         'used'       => Metric::bytes($others)->format(),
-                        'percentage' => (float) get_storage_percentage($others, $totalCapacity),
+                        'percentage' => (float)get_storage_percentage($others, $totalCapacity),
                     ],
                 ],
             ],
@@ -116,12 +118,6 @@ class UserStorageResource extends JsonResource
             ->where('created_at', '>', $period)
             ->max('download');
 
-        $trafficRecords = DB::table('traffic')
-            ->where('user_id', $this->id)
-            ->where('created_at', '>', $period)
-            ->orderBy('created_at')
-            ->get();
-
         $downloadTotal = DB::table('traffic')
             ->where('user_id', $this->id)
             ->where('created_at', '>', $period)
@@ -132,8 +128,21 @@ class UserStorageResource extends JsonResource
             ->where('created_at', '>', $period)
             ->sum('upload');
 
-        $upload = $trafficRecords->map(fn ($record)   => $uploadMax !== 0 ? round(($record->upload / $uploadMax) * 100, 2) : 0);
-        $download = $trafficRecords->map(fn ($record) => $downloadMax !== 0 ? round(($record->download / $downloadMax) * 100, 2) : 0);
+        $trafficRecords = DB::table('traffic')
+            ->where('user_id', $this->id)
+            ->where('created_at', '>', $period)
+            ->orderBy('created_at')
+            ->get();
+
+        $upload = $trafficRecords->map(fn($record) => [
+            'created_at' => format_date($record->created_at),
+            'amount'     => $uploadMax !== 0 ? round(($record->upload / $uploadMax) * 100, 2) : 0,
+        ]);
+
+        $download = $trafficRecords->map(fn($record) => [
+            'created_at' => format_date($record->created_at),
+            'amount'     => $downloadMax !== 0 ? round(($record->download / $downloadMax) * 100, 2) : 0,
+        ]);
 
         return [$downloadTotal, $uploadTotal, $upload, $download];
     }