diff --git a/app/Abstracts/Report.php b/app/Abstracts/Report.php
index a934ff32f..070dd5a6d 100644
--- a/app/Abstracts/Report.php
+++ b/app/Abstracts/Report.php
@@ -17,6 +17,7 @@ use App\Models\Setting\Category;
 use App\Traits\Charts;
 use App\Traits\DateTime;
 use App\Traits\SearchString;
+use App\Traits\Tailwind;
 use App\Traits\Translations;
 use App\Utilities\Date;
 use App\Utilities\Export as ExportHelper;
@@ -24,7 +25,7 @@ use Illuminate\Support\Str;
 
 abstract class Report
 {
-    use Charts, DateTime, SearchString, Translations;
+    use Charts, DateTime, SearchString, Tailwind, Translations;
 
     public $model;
 
@@ -235,7 +236,9 @@ abstract class Report
         foreach ($tmp_values as $id => $value) {
             $labels[$id] = $this->row_names[$table_key][$id];
 
-            $colors[$id] = ($group == 'category') ? Category::find($id)?->color : '#' . dechex(rand(0x000000, 0xFFFFFF));
+            $color = ($group == 'category') ? Category::withSubCategory()->find($id)?->color : '#' . dechex(rand(0x000000, 0xFFFFFF));
+
+            $colors[$id] = $this->getHexCodeOfTailwindClass($color);
 
             $values[$id] = round(($value * 100 / $total), 0);
         }
diff --git a/app/Abstracts/View/Components/Documents/Show.php b/app/Abstracts/View/Components/Documents/Show.php
index dc4bfad85..36fd828c2 100644
--- a/app/Abstracts/View/Components/Documents/Show.php
+++ b/app/Abstracts/View/Components/Documents/Show.php
@@ -5,6 +5,7 @@ namespace App\Abstracts\View\Components\Documents;
 use App\Traits\DateTime;
 use App\Traits\Documents;
 use App\Models\Common\Media;
+use App\Traits\Tailwind;
 use App\Traits\ViewComponents;
 use App\Abstracts\View\Component;
 use Illuminate\Support\Facades\Log;
@@ -17,7 +18,7 @@ use Image;
 
 abstract class Show extends Component
 {
-    use DateTime, Documents, ViewComponents;
+    use DateTime, Documents, Tailwind, ViewComponents;
 
     public const OBJECT_TYPE = 'document';
     public const DEFAULT_TYPE = 'invoice';
@@ -337,8 +338,8 @@ abstract class Show extends Component
         bool $hideDivider1 = false, bool $hideDivider2 = false, bool $hideDivider3 = false, bool $hideDivider4 = false,
         string $accordionActive = '',
         bool $hideRecurringMessage = false, string $textRecurringType = '', bool $hideStatusMessage = false, string $textStatusMessage = '',
-        bool $hideCreated = false, bool $hideSend = false, bool $hideMarkSent = false, string $markSentRoute = '', string $textMarkSent = '', 
-        bool $hideReceive = false, bool $hideMarkReceived = false, string $markReceivedRoute = '', string $textMarkReceived = '', 
+        bool $hideCreated = false, bool $hideSend = false, bool $hideMarkSent = false, string $markSentRoute = '', string $textMarkSent = '',
+        bool $hideReceive = false, bool $hideMarkReceived = false, string $markReceivedRoute = '', string $textMarkReceived = '',
         bool $hideGetPaid = false,
         bool $hideRestore = false, bool $hideAddPayment = false, bool $hideAcceptPayment = false, string $transactionEmailRoute = '', string $transactionEmailTemplate = '',
         bool $hideMakePayment = false,
@@ -464,7 +465,7 @@ abstract class Show extends Component
         $this->documentTemplate = $this->getDocumentTemplate($type, $documentTemplate);
         $this->logo = $this->getLogo($logo);
         $this->backgroundColor = $this->getBackgroundColor($type, $backgroundColor);
-        
+
         $this->hideFooter = $hideFooter;
         $this->hideCompanyLogo = $hideCompanyLogo;
         $this->hideCompanyDetails = $hideCompanyDetails;
@@ -988,7 +989,7 @@ abstract class Show extends Component
 
         $backgroundColor = setting($this->getSettingKey($type, 'color'), '#55588b');
 
-        return $this->convertClasstoHex($backgroundColor);
+        return $this->getHexCodeOfTailwindClass($backgroundColor);
     }
 
     protected function getTextDocumentTitle($type, $textDocumentTitle)
diff --git a/app/Abstracts/View/Components/Documents/Template.php b/app/Abstracts/View/Components/Documents/Template.php
index 317805d01..15df90aa5 100644
--- a/app/Abstracts/View/Components/Documents/Template.php
+++ b/app/Abstracts/View/Components/Documents/Template.php
@@ -6,6 +6,7 @@ use App\Abstracts\View\Component;
 use App\Models\Common\Media;
 use App\Traits\DateTime;
 use App\Traits\Documents;
+use App\Traits\Tailwind;
 use App\Traits\ViewComponents;
 use Illuminate\Support\Facades\Log;
 use Illuminate\Support\Facades\URL;
@@ -17,7 +18,7 @@ use Image;
 
 abstract class Template extends Component
 {
-    use DateTime, Documents, ViewComponents;
+    use DateTime, Documents, Tailwind, ViewComponents;
 
     public const OBJECT_TYPE = 'document';
     public const DEFAULT_TYPE = 'invoice';
@@ -276,7 +277,7 @@ abstract class Template extends Component
 
         $backgroundColor = setting($this->getSettingKey($type, 'color'), '#55588b');
 
-        return $this->convertClasstoHex($backgroundColor);
+        return $this->getHexCodeOfTailwindClass($backgroundColor);
     }
 
     protected function getTextDocumentTitle($type, $textDocumentTitle)
diff --git a/app/Builders/Category.php b/app/Builders/Category.php
index bee4c7707..2f5483ea0 100644
--- a/app/Builders/Category.php
+++ b/app/Builders/Category.php
@@ -2,10 +2,10 @@
 
 namespace App\Builders;
 
-use GeneaLabs\LaravelModelCaching\CachedBuilder;
+use Illuminate\Database\Eloquent\Builder;
 use Illuminate\Pagination\Paginator;
 
-class Category extends CachedBuilder
+class Category extends Builder
 {
     /**
      * Execute the query as a "select" statement.
diff --git a/app/Http/Controllers/Settings/Categories.php b/app/Http/Controllers/Settings/Categories.php
index e8986fced..8baab86e8 100644
--- a/app/Http/Controllers/Settings/Categories.php
+++ b/app/Http/Controllers/Settings/Categories.php
@@ -24,7 +24,13 @@ class Categories extends Controller
      */
     public function index()
     {
-        $categories = Category::with('sub_categories')->collect();
+        $query = Category::with('sub_categories');
+
+        if (request()->expectsJson()) {
+            $query->withSubcategory();
+        }
+
+        $categories = $query->collect();
 
         $types = $this->getCategoryTypes();
 
diff --git a/app/Scopes/Category.php b/app/Scopes/Category.php
index 96dd32123..c9e7ae615 100644
--- a/app/Scopes/Category.php
+++ b/app/Scopes/Category.php
@@ -17,6 +17,10 @@ class Category implements Scope
      */
     public function apply(Builder $builder, Model $model)
     {
+        /*if (request()->expectsJson()) {
+            return;
+        }*/
+
         $builder->whereNull('parent_id');
     }
 }
diff --git a/app/Traits/Charts.php b/app/Traits/Charts.php
index be223e77f..6167514fc 100644
--- a/app/Traits/Charts.php
+++ b/app/Traits/Charts.php
@@ -3,10 +3,13 @@
 namespace App\Traits;
 
 use Akaunting\Apexcharts\Chart;
+use App\Traits\Tailwind;
 use Balping\JsonRaw\Raw;
 
 trait Charts
 {
+    use Tailwind;
+
     public $bar = [
         'colors' => [],
         'labels' => [],
@@ -34,6 +37,8 @@ trait Charts
             $label .= ' - ' . $description;
         }
 
+        $color = $this->getHexCodeOfTailwindClass($color);
+
         $this->addToDonut($color, $label, $amount);
     }
 
@@ -69,6 +74,8 @@ trait Charts
 
     public function addToBar($color, $label, $value)
     {
+        $color = $this->getHexCodeOfTailwindClass($color);
+
         $this->bar['colors'][] = $color;
         $this->bar['labels'][] = $label;
         $this->bar['values'][] = (int) $value;
diff --git a/app/Traits/Tailwind.php b/app/Traits/Tailwind.php
new file mode 100644
index 000000000..156627a57
--- /dev/null
+++ b/app/Traits/Tailwind.php
@@ -0,0 +1,113 @@
+<?php
+
+namespace App\Traits;
+
+use Illuminate\Support\Arr;
+
+trait Tailwind
+{
+    public function getHexCodeOfTailwindClass($class)
+    {
+        $colors = [
+            'gray'          => '#6b7280',
+            'gray-50'       => '#f9fafb',
+            'gray-100'      => '#f3f4f6',
+            'gray-200'      => '#e5e7eb',
+            'gray-300'      => '#d1d5db',
+            'gray-400'      => '#9ca3af',
+            'gray-500'      => '#6b7280',
+            'gray-600'      => '#4b5563',
+            'gray-700'      => '#374151',
+            'gray-800'      => '#1f2937',
+            'gray-900'      => '#111827',
+
+            'red'           => '#cc0000',
+            'red-50'        => '#fcf2f2',
+            'red-100'       => '#fae6e6',
+            'red-200'       => '#f2bfbf',
+            'red-300'       => '#eb9999',
+            'red-400'       => '#db4d4d',
+            'red-500'       => '#cc0000',
+            'red-600'       => '#b80000',
+            'red-700'       => '#990000',
+            'red-800'       => '#7a0000',
+            'red-900'       => '#640000',
+
+            'yellow'        => '#eab308',
+            'yellow-50'     => '#fefce8',
+            'yellow-100'    => '#fef9c3',
+            'yellow-200'    => '#fef08a',
+            'yellow-300'    => '#fde047',
+            'yellow-400'    => '#facc15',
+            'yellow-500'    => '#eab308',
+            'yellow-600'    => '#ca8a04',
+            'yellow-700'    => '#a16207',
+            'yellow-800'    => '#854d0e',
+            'yellow-900'    => '#713f12',
+
+            'green'         => '#6ea152',
+            'green-50'      => '#f8faf6',
+            'green-100'     => '#f1f6ee',
+            'green-200'     => '#dbe8d4',
+            'green-300'     => '#c5d9ba',
+            'green-400'     => '#9abd86',
+            'green-500'     => '#6ea152',
+            'green-600'     => '#63914a',
+            'green-700'     => '#53793e',
+            'green-800'     => '#426131',
+            'green-900'     => '#364f28',
+
+            'blue'          => '#006ea6',
+            'blue-50'       => '#f2f8fb',
+            'blue-100'      => '#e6f1f6',
+            'blue-200'      => '#bfdbe9',
+            'blue-300'      => '#99c5db',
+            'blue-400'      => '#4d9ac1',
+            'blue-500'      => '#006ea6',
+            'blue-600'      => '#006395',
+            'blue-700'      => '#00537d',
+            'blue-800'      => '#004264',
+            'blue-900'      => '#003651',
+
+            'indigo'        => '#6366f1',
+            'indigo-50'     => '#eef2ff',
+            'indigo-100'    => '#e0e7ff',
+            'indigo-200'    => '#c7d2fe',
+            'indigo-300'    => '#a5b4fc',
+            'indigo-400'    => '#818cf8',
+            'indigo-500'    => '#6366f1',
+            'indigo-600'    => '#4f46e5',
+            'indigo-700'    => '#4338ca',
+            'indigo-800'    => '#3730a3',
+            'indigo-900'    => '#312e81',
+
+            'purple'        => '#55588b',
+            'purple-50'     => '#f7f7f9',
+            'purple-100'    => '#eeeef3',
+            'purple-200'    => '#d5d5e2',
+            'purple-300'    => '#bbbcd1',
+            'purple-400'    => '#888aae',
+            'purple-500'    => '#55588b',
+            'purple-600'    => '#4d4f7d',
+            'purple-700'    => '#404268',
+            'purple-800'    => '#333553',
+            'purple-900'    => '#2a2b44',
+
+            'pink'          => '#ec4899',
+            'pink-50'       => '#fdf2f8',
+            'pink-100'      => '#fce7f3',
+            'pink-200'      => '#fbcfe8',
+            'pink-300'      => '#f9a8d4',
+            'pink-400'      => '#f472b6',
+            'pink-500'      => '#ec4899',
+            'pink-600'      => '#db2777',
+            'pink-700'      => '#be185d',
+            'pink-800'      => '#9d174d',
+            'pink-900'      => '#831843',
+        ];
+
+        return Arr::exists($colors, $class)
+                ? $colors[$class]
+                : $class;
+    }
+}
diff --git a/app/Traits/ViewComponents.php b/app/Traits/ViewComponents.php
index 27e440a88..5c0224520 100644
--- a/app/Traits/ViewComponents.php
+++ b/app/Traits/ViewComponents.php
@@ -752,111 +752,4 @@ trait ViewComponents
 
         return '';
     }
-
-    protected function convertClasstoHex($class)
-    {
-        $colors = [
-            'gray' => '#6b7280',
-            'gray-50' => '#f9fafb',
-            'gray-100' => '#f3f4f6',
-            'gray-200' => '#e5e7eb',
-            'gray-300' => '#d1d5db',
-            'gray-400' => '#9ca3af',
-            'gray-500' => '#6b7280',
-            'gray-600' => '#4b5563',
-            'gray-700' => '#374151',
-            'gray-800' => '#1f2937',
-            'gray-900' => '#111827',
-
-            'red' => '#cc0000',
-            'red-50' => '#fcf2f2',
-            'red-100' => '#fae6e6',
-            'red-200' => '#f2bfbf',
-            'red-300' => '#eb9999',
-            'red-400' => '#db4d4d',
-            'red-500' => '#cc0000',
-            'red-600' => '#b80000',
-            'red-700' => '#990000',
-            'red-800' => '#7a0000',
-            'red-900' => '#640000',
-
-            'yellow' => '#eab308',
-            'yellow-50' => '#fefce8',
-            'yellow-100' => '#fef9c3',
-            'yellow-200' => '#fef08a',
-            'yellow-300' => '#fde047',
-            'yellow-400' => '#facc15',
-            'yellow-500' => '#eab308',
-            'yellow-600' => '#ca8a04',
-            'yellow-700' => '#a16207',
-            'yellow-800' => '#854d0e',
-            'yellow-900' => '#713f12',
-
-            'green' => '#6ea152',
-            'green-50' => '#f8faf6',
-            'green-100' => '#f1f6ee',
-            'green-200' => '#dbe8d4',
-            'green-300' => '#c5d9ba',
-            'green-400' => '#9abd86',
-            'green-500' => '#6ea152',
-            'green-600' => '#63914a',
-            'green-700' => '#53793e',
-            'green-800' => '#426131',
-            'green-900' => '#364f28',
-
-            'blue' => '#006ea6',
-            'blue-50' => '#f2f8fb',
-            'blue-100' => '#e6f1f6',
-            'blue-200' => '#bfdbe9',
-            'blue-300' => '#99c5db',
-            'blue-400' => '#4d9ac1',
-            'blue-500' => '#006ea6',
-            'blue-600' => '#006395',
-            'blue-700' => '#00537d',
-            'blue-800' => '#004264',
-            'blue-900' => '#003651',
-
-            'indigo' => '#6366f1',
-            'indigo-50' => '#eef2ff',
-            'indigo-100' => '#e0e7ff',
-            'indigo-200' => '#c7d2fe',
-            'indigo-300' => '#a5b4fc',
-            'indigo-400' => '#818cf8',
-            'indigo-500' => '#6366f1',
-            'indigo-600' => '#4f46e5',
-            'indigo-700' => '#4338ca',
-            'indigo-800' => '#3730a3',
-            'indigo-900' => '#312e81',
-
-            'purple' => '#55588b',
-            'purple-50' => '#f7f7f9',
-            'purple-100' => '#eeeef3',
-            'purple-200' => '#d5d5e2',
-            'purple-300' => '#bbbcd1',
-            'purple-400' => '#888aae',
-            'purple-500' => '#55588b',
-            'purple-600' => '#4d4f7d',
-            'purple-700' => '#404268',
-            'purple-800' => '#333553',
-            'purple-900' => '#2a2b44',
-
-            'pink' => '#ec4899',
-            'pink-50' => '#fdf2f8',
-            'pink-100' => '#fce7f3',
-            'pink-200' => '#fbcfe8',
-            'pink-300' => '#f9a8d4',
-            'pink-400' => '#f472b6',
-            'pink-500' => '#ec4899',
-            'pink-600' => '#db2777',
-            'pink-700' => '#be185d',
-            'pink-800' => '#9d174d',
-            'pink-900' => '#831843',
-        ];
-
-        if (Arr::exists($colors, $class)) {
-            return $colors[$class];
-        }
-
-        return $class;
-    }
 }
diff --git a/app/Widgets/ExpensesByCategory.php b/app/Widgets/ExpensesByCategory.php
index 269dfb9b2..f135ce799 100644
--- a/app/Widgets/ExpensesByCategory.php
+++ b/app/Widgets/ExpensesByCategory.php
@@ -15,7 +15,7 @@ class ExpensesByCategory extends Widget
 
     public function show()
     {
-        Category::withSubCategory()->with('expense_transactions')->expense()->each(function ($category) {
+        Category::with('expense_transactions')->expense()->each(function ($category) {
             $amount = 0;
 
             $this->applyFilters($category->expense_transactions)->each(function ($transaction) use (&$amount) {
@@ -29,7 +29,7 @@ class ExpensesByCategory extends Widget
 
         $chart->options['legend']['width'] = 160;
         $chart->options['legend']['position'] = 'right';
-        
+
         return $this->view('widgets.donut_chart', [
             'chart' => $chart,
         ]);