From 48a7707b45ca2f1cd62d8b43cc5d284630b406fd Mon Sep 17 00:00:00 2001
From: Sercan Yemen <117369+srcn@users.noreply.github.com>
Date: Mon, 27 May 2024 11:48:46 +0300
Subject: [PATCH] Added prettier and tailwindcss class sorter. First pass with
 the new formatter. This is a huge change, but it is long overdue.

---
 .eslintrc.json                                |  95 ----
 .prettierrc                                   |  11 +
 angular.json                                  |  17 +-
 package-lock.json                             | 116 +++-
 package.json                                  |   3 +
 src/@fuse/animations/defaults.ts              |   6 +-
 src/@fuse/animations/expand-collapse.ts       |  53 +-
 src/@fuse/animations/fade.ts                  | 518 +++++++++---------
 src/@fuse/animations/public-api.ts            |  49 +-
 src/@fuse/animations/shake.ts                 | 135 ++---
 src/@fuse/animations/slide.ts                 | 392 ++++++-------
 src/@fuse/animations/zoom.ts                  | 116 ++--
 .../components/alert/alert.component.html     |  48 +-
 .../components/alert/alert.component.scss     |  86 +--
 src/@fuse/components/alert/alert.component.ts | 138 ++---
 src/@fuse/components/alert/alert.service.ts   |  31 +-
 src/@fuse/components/alert/alert.types.ts     |   6 +-
 src/@fuse/components/card/card.component.html |   9 +-
 src/@fuse/components/card/card.component.scss |  10 +-
 src/@fuse/components/card/card.component.ts   |  52 +-
 src/@fuse/components/card/card.types.ts       |   4 +-
 .../components/drawer/drawer.component.scss   |   7 +-
 .../components/drawer/drawer.component.ts     | 222 ++++----
 src/@fuse/components/drawer/drawer.service.ts |  19 +-
 src/@fuse/components/drawer/drawer.types.ts   |   8 +-
 .../fullscreen/fullscreen.component.html      |   3 +-
 .../fullscreen/fullscreen.component.ts        |  40 +-
 .../highlight/highlight.component.html        |   3 +-
 .../highlight/highlight.component.ts          |  83 +--
 .../components/highlight/highlight.service.ts |  30 +-
 .../loading-bar/loading-bar.component.html    |   4 +-
 .../loading-bar/loading-bar.component.ts      |  52 +-
 .../components/masonry/masonry.component.html |   7 +-
 .../components/masonry/masonry.component.ts   |  50 +-
 .../components/basic/basic.component.html     |  81 ++-
 .../components/basic/basic.component.ts       |  61 ++-
 .../components/branch/branch.component.html   |  96 ++--
 .../components/branch/branch.component.ts     |  64 ++-
 .../components/divider/divider.component.html |   3 +-
 .../components/divider/divider.component.ts   |  43 +-
 .../components/spacer/spacer.component.html   |   3 +-
 .../components/spacer/spacer.component.ts     |  43 +-
 .../horizontal/horizontal.component.html      |  27 +-
 .../horizontal/horizontal.component.scss      |  14 -
 .../horizontal/horizontal.component.ts        |  59 +-
 .../navigation/navigation.service.ts          |  92 ++--
 .../components/navigation/navigation.types.ts |  32 +-
 src/@fuse/components/navigation/public-api.ts |   2 +-
 .../components/aside/aside.component.html     |  57 +-
 .../components/aside/aside.component.ts       | 110 ++--
 .../components/basic/basic.component.html     |  80 ++-
 .../components/basic/basic.component.ts       |  60 +-
 .../collapsable/collapsable.component.html    |  55 +-
 .../collapsable/collapsable.component.ts      | 204 ++++---
 .../components/divider/divider.component.html |   3 +-
 .../components/divider/divider.component.ts   |  43 +-
 .../components/group/group.component.html     |  38 +-
 .../components/group/group.component.ts       |  57 +-
 .../components/spacer/spacer.component.html   |   3 +-
 .../components/spacer/spacer.component.ts     |  43 +-
 .../vertical/styles/appearances/compact.scss  |  19 +-
 .../vertical/styles/appearances/default.scss  |  56 +-
 .../vertical/styles/appearances/dense.scss    |  70 +--
 .../vertical/styles/appearances/thin.scss     |  18 +-
 .../vertical/vertical.component.html          |  73 ++-
 .../navigation/vertical/vertical.component.ts | 516 +++++++++--------
 .../scroll-reset/scroll-reset.directive.ts    |  38 +-
 .../scrollbar/scrollbar.directive.ts          | 241 ++++----
 .../directives/scrollbar/scrollbar.types.ts   |  12 +-
 src/@fuse/fuse.provider.ts                    |  75 +--
 src/@fuse/lib/mock-api/mock-api.constants.ts  |   4 +-
 .../lib/mock-api/mock-api.interceptor.ts      |  53 +-
 .../lib/mock-api/mock-api.request-handler.ts  |  34 +-
 src/@fuse/lib/mock-api/mock-api.service.ts    |  98 ++--
 src/@fuse/lib/mock-api/mock-api.types.ts      |   5 +-
 src/@fuse/lib/mock-api/mock-api.utils.ts      |  17 +-
 .../pipes/find-by-key/find-by-key.pipe.ts     |  19 +-
 src/@fuse/pipes/find-by-key/public-api.ts     |   2 +-
 src/@fuse/services/config/config.service.ts   |  14 +-
 src/@fuse/services/config/config.types.ts     |   3 +-
 .../confirmation/confirmation.service.ts      |  34 +-
 .../confirmation/confirmation.types.ts        |  13 +-
 .../confirmation/dialog/dialog.component.html |  82 +--
 .../confirmation/dialog/dialog.component.ts   |  17 +-
 .../services/loading/loading.interceptor.ts   |  26 +-
 src/@fuse/services/loading/loading.service.ts |  66 +--
 src/@fuse/services/loading/public-api.ts      |   2 +-
 .../media-watcher/media-watcher.service.ts    | 103 ++--
 .../services/platform/platform.service.ts     |  30 +-
 .../splash-screen/splash-screen.service.ts    |  21 +-
 src/@fuse/services/utils/utils.service.ts     |  32 +-
 .../styles/components/example-viewer.scss     |   5 +-
 .../styles/overrides/angular-material.scss    | 144 ++---
 src/@fuse/styles/overrides/highlightjs.scss   |  21 +-
 .../styles/overrides/perfect-scrollbar.scss   |   1 -
 src/@fuse/styles/overrides/quill.scss         |  17 +-
 src/@fuse/styles/tailwind.scss                |  12 +-
 src/@fuse/styles/themes.scss                  | 303 ++++++----
 src/@fuse/tailwind/plugins/icon-size.js       |  53 +-
 src/@fuse/tailwind/plugins/theming.js         | 509 ++++++++++-------
 src/@fuse/tailwind/plugins/utilities.js       | 118 ++--
 .../tailwind/utils/generate-contrasts.js      |  26 +-
 src/@fuse/tailwind/utils/generate-palette.js  |  38 +-
 src/@fuse/tailwind/utils/json-to-sass-map.js  |  46 +-
 src/@fuse/validators/validators.ts            |  29 +-
 src/@fuse/version/version.ts                  |   6 +-
 src/app/app.component.ts                      |  15 +-
 src/app/app.config.ts                         |  71 +--
 src/app/app.resolvers.ts                      |   3 +-
 src/app/app.routes.ts                         |   8 +-
 src/index.html                                |  49 +-
 src/main.ts                                   |   5 +-
 tailwind.config.js                            | 363 ++++++------
 transloco.config.js                           |   2 +-
 tsconfig.app.json                             |   8 +-
 tsconfig.json                                 |   5 +-
 tsconfig.spec.json                            |   9 +-
 117 files changed, 3883 insertions(+), 3572 deletions(-)
 delete mode 100644 .eslintrc.json
 create mode 100644 .prettierrc

diff --git a/.eslintrc.json b/.eslintrc.json
deleted file mode 100644
index a2718c12..00000000
--- a/.eslintrc.json
+++ /dev/null
@@ -1,95 +0,0 @@
-{
-    "root": true,
-    "env": {
-        "es6": true
-    },
-    "parserOptions": {
-        "ecmaVersion": 2018
-    },
-    "ignorePatterns": [
-        "projects/**/*"
-    ],
-    "overrides": [
-        {
-            "files": [
-                "*.ts"
-            ],
-            "parserOptions": {
-                "project": [
-                    "tsconfig.json"
-                ],
-                "createDefaultProgram": true
-            },
-            "extends": [
-                "plugin:@angular-eslint/ng-cli-compat",
-                "plugin:@angular-eslint/ng-cli-compat--formatting-add-on",
-                "plugin:@angular-eslint/template/process-inline-templates"
-            ],
-            "rules": {
-                "@angular-eslint/component-selector": [
-                    "error",
-                    {
-                        "type": "element",
-                        "prefix": "",
-                        "style": "kebab-case"
-                    }
-                ],
-                "@angular-eslint/directive-selector": [
-                    "error",
-                    {
-                        "type": "attribute",
-                        "prefix": "",
-                        "style": "camelCase"
-                    }
-                ],
-                "@typescript-eslint/dot-notation": "off",
-                "@typescript-eslint/explicit-function-return-type": "error",
-                "@typescript-eslint/explicit-member-accessibility": [
-                    "off",
-                    {
-                        "accessibility": "explicit"
-                    }
-                ],
-                "@typescript-eslint/no-inferrable-types": "off",
-                "arrow-parens": [
-                    "error",
-                    "as-needed",
-                    {
-                        "requireForBlockBody": true
-                    }
-                ],
-                "brace-style": [
-                    "off",
-                    "off"
-                ],
-                "import/order": "off",
-                "max-len": [
-                    "error",
-                    {
-                        "ignorePattern": "^import |^export | implements",
-                        "code": 180
-                    }
-                ],
-                "no-underscore-dangle": "off",
-                "object-shorthand": "off",
-                "quote-props": [
-                    "error",
-                    "consistent"
-                ],
-                "quotes": [
-                    "error",
-                    "single"
-                ]
-            }
-        },
-        {
-            "files": [
-                "*.html"
-            ],
-            "extends": [
-                "plugin:@angular-eslint/template/recommended"
-            ],
-            "rules": {}
-        }
-    ]
-}
diff --git a/.prettierrc b/.prettierrc
new file mode 100644
index 00000000..953c17e0
--- /dev/null
+++ b/.prettierrc
@@ -0,0 +1,11 @@
+{
+    "printWidth": 80,
+    "semi": true,
+    "bracketSameLine": false,
+    "trailingComma": "es5",
+    "tabWidth": 4,
+    "singleQuote": true,
+    "bracketSpacing": true,
+    "arrowParens": "always",
+    "plugins": ["prettier-plugin-organize-imports", "prettier-plugin-tailwindcss"]
+}
diff --git a/angular.json b/angular.json
index 9a3f9d87..07281f93 100644
--- a/angular.json
+++ b/angular.json
@@ -20,9 +20,7 @@
                         "outputPath": "dist/fuse",
                         "index": "src/index.html",
                         "browser": "src/main.ts",
-                        "polyfills": [
-                            "zone.js"
-                        ],
+                        "polyfills": ["zone.js"],
                         "tsConfig": "tsconfig.app.json",
                         "inlineStyleLanguage": "scss",
                         "allowedCommonJsDependencies": [
@@ -44,9 +42,7 @@
                             }
                         ],
                         "stylePreprocessorOptions": {
-                            "includePaths": [
-                                "src/@fuse/styles"
-                            ]
+                            "includePaths": ["src/@fuse/styles"]
                         },
                         "styles": [
                             "src/@fuse/styles/tailwind.scss",
@@ -100,10 +96,7 @@
                 "test": {
                     "builder": "@angular-devkit/build-angular:karma",
                     "options": {
-                        "polyfills": [
-                            "zone.js",
-                            "zone.js/testing"
-                        ],
+                        "polyfills": ["zone.js", "zone.js/testing"],
                         "tsConfig": "tsconfig.spec.json",
                         "inlineStyleLanguage": "scss",
                         "assets": [
@@ -112,9 +105,7 @@
                                 "input": "public"
                             }
                         ],
-                        "styles": [
-                            "src/styles/styles.scss"
-                        ],
+                        "styles": ["src/styles/styles.scss"],
                         "scripts": []
                     }
                 }
diff --git a/package-lock.json b/package-lock.json
index 590e984e..696b9499 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
     "name": "fuse-angular",
-    "version": "19.1.0",
+    "version": "20.0.0",
     "lockfileVersion": 3,
     "requires": true,
     "packages": {
         "": {
             "name": "fuse-angular",
-            "version": "19.1.0",
+            "version": "20.0.0",
             "license": "https://themeforest.net/licenses/standard",
             "dependencies": {
                 "@angular/animations": "18.0.0",
@@ -56,6 +56,9 @@
                 "karma-jasmine-html-reporter": "2.1.0",
                 "lodash": "4.17.21",
                 "postcss": "8.4.38",
+                "prettier": "3.2.5",
+                "prettier-plugin-organize-imports": "3.2.4",
+                "prettier-plugin-tailwindcss": "0.5.14",
                 "tailwindcss": "3.4.3",
                 "typescript": "5.4.5"
             }
@@ -11184,6 +11187,115 @@
             "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
             "dev": true
         },
+        "node_modules/prettier": {
+            "version": "3.2.5",
+            "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.2.5.tgz",
+            "integrity": "sha512-3/GWa9aOC0YeD7LUfvOG2NiDyhOWRvt1k+rcKhOuYnMY24iiCphgneUfJDyFXd6rZCAnuLBv6UeAULtrhT/F4A==",
+            "dev": true,
+            "bin": {
+                "prettier": "bin/prettier.cjs"
+            },
+            "engines": {
+                "node": ">=14"
+            },
+            "funding": {
+                "url": "https://github.com/prettier/prettier?sponsor=1"
+            }
+        },
+        "node_modules/prettier-plugin-organize-imports": {
+            "version": "3.2.4",
+            "resolved": "https://registry.npmjs.org/prettier-plugin-organize-imports/-/prettier-plugin-organize-imports-3.2.4.tgz",
+            "integrity": "sha512-6m8WBhIp0dfwu0SkgfOxJqh+HpdyfqSSLfKKRZSFbDuEQXDDndb8fTpRWkUrX/uBenkex3MgnVk0J3b3Y5byog==",
+            "dev": true,
+            "peerDependencies": {
+                "@volar/vue-language-plugin-pug": "^1.0.4",
+                "@volar/vue-typescript": "^1.0.4",
+                "prettier": ">=2.0",
+                "typescript": ">=2.9"
+            },
+            "peerDependenciesMeta": {
+                "@volar/vue-language-plugin-pug": {
+                    "optional": true
+                },
+                "@volar/vue-typescript": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/prettier-plugin-tailwindcss": {
+            "version": "0.5.14",
+            "resolved": "https://registry.npmjs.org/prettier-plugin-tailwindcss/-/prettier-plugin-tailwindcss-0.5.14.tgz",
+            "integrity": "sha512-Puaz+wPUAhFp8Lo9HuciYKM2Y2XExESjeT+9NQoVFXZsPPnc9VYss2SpxdQ6vbatmt8/4+SN0oe0I1cPDABg9Q==",
+            "dev": true,
+            "engines": {
+                "node": ">=14.21.3"
+            },
+            "peerDependencies": {
+                "@ianvs/prettier-plugin-sort-imports": "*",
+                "@prettier/plugin-pug": "*",
+                "@shopify/prettier-plugin-liquid": "*",
+                "@trivago/prettier-plugin-sort-imports": "*",
+                "@zackad/prettier-plugin-twig-melody": "*",
+                "prettier": "^3.0",
+                "prettier-plugin-astro": "*",
+                "prettier-plugin-css-order": "*",
+                "prettier-plugin-import-sort": "*",
+                "prettier-plugin-jsdoc": "*",
+                "prettier-plugin-marko": "*",
+                "prettier-plugin-organize-attributes": "*",
+                "prettier-plugin-organize-imports": "*",
+                "prettier-plugin-sort-imports": "*",
+                "prettier-plugin-style-order": "*",
+                "prettier-plugin-svelte": "*"
+            },
+            "peerDependenciesMeta": {
+                "@ianvs/prettier-plugin-sort-imports": {
+                    "optional": true
+                },
+                "@prettier/plugin-pug": {
+                    "optional": true
+                },
+                "@shopify/prettier-plugin-liquid": {
+                    "optional": true
+                },
+                "@trivago/prettier-plugin-sort-imports": {
+                    "optional": true
+                },
+                "@zackad/prettier-plugin-twig-melody": {
+                    "optional": true
+                },
+                "prettier-plugin-astro": {
+                    "optional": true
+                },
+                "prettier-plugin-css-order": {
+                    "optional": true
+                },
+                "prettier-plugin-import-sort": {
+                    "optional": true
+                },
+                "prettier-plugin-jsdoc": {
+                    "optional": true
+                },
+                "prettier-plugin-marko": {
+                    "optional": true
+                },
+                "prettier-plugin-organize-attributes": {
+                    "optional": true
+                },
+                "prettier-plugin-organize-imports": {
+                    "optional": true
+                },
+                "prettier-plugin-sort-imports": {
+                    "optional": true
+                },
+                "prettier-plugin-style-order": {
+                    "optional": true
+                },
+                "prettier-plugin-svelte": {
+                    "optional": true
+                }
+            }
+        },
         "node_modules/proc-log": {
             "version": "4.2.0",
             "resolved": "https://registry.npmjs.org/proc-log/-/proc-log-4.2.0.tgz",
diff --git a/package.json b/package.json
index 5fdacc99..62707565 100644
--- a/package.json
+++ b/package.json
@@ -60,6 +60,9 @@
         "karma-jasmine-html-reporter": "2.1.0",
         "lodash": "4.17.21",
         "postcss": "8.4.38",
+        "prettier": "3.2.5",
+        "prettier-plugin-organize-imports": "3.2.4",
+        "prettier-plugin-tailwindcss": "0.5.14",
         "tailwindcss": "3.4.3",
         "typescript": "5.4.5"
     }
diff --git a/src/@fuse/animations/defaults.ts b/src/@fuse/animations/defaults.ts
index 784fd751..4da64f64 100644
--- a/src/@fuse/animations/defaults.ts
+++ b/src/@fuse/animations/defaults.ts
@@ -1,13 +1,11 @@
-export class FuseAnimationCurves
-{
+export class FuseAnimationCurves {
     static standard = 'cubic-bezier(0.4, 0.0, 0.2, 1)';
     static deceleration = 'cubic-bezier(0.0, 0.0, 0.2, 1)';
     static acceleration = 'cubic-bezier(0.4, 0.0, 1, 1)';
     static sharp = 'cubic-bezier(0.4, 0.0, 0.6, 1)';
 }
 
-export class FuseAnimationDurations
-{
+export class FuseAnimationDurations {
     static complex = '375ms';
     static entering = '225ms';
     static exiting = '195ms';
diff --git a/src/@fuse/animations/expand-collapse.ts b/src/@fuse/animations/expand-collapse.ts
index d0b93210..c02c0e74 100644
--- a/src/@fuse/animations/expand-collapse.ts
+++ b/src/@fuse/animations/expand-collapse.ts
@@ -1,34 +1,37 @@
-import { animate, state, style, transition, trigger } from '@angular/animations';
-import { FuseAnimationCurves, FuseAnimationDurations } from '@fuse/animations/defaults';
+import {
+    animate,
+    state,
+    style,
+    transition,
+    trigger,
+} from '@angular/animations';
+import {
+    FuseAnimationCurves,
+    FuseAnimationDurations,
+} from '@fuse/animations/defaults';
 
 // -----------------------------------------------------------------------------------------------------
 // @ Expand / collapse
 // -----------------------------------------------------------------------------------------------------
-const expandCollapse = trigger('expandCollapse',
-    [
-        state('void, collapsed',
-            style({
-                height: '0',
-            }),
-        ),
+const expandCollapse = trigger('expandCollapse', [
+    state(
+        'void, collapsed',
+        style({
+            height: '0',
+        })
+    ),
 
-        state('*, expanded',
-            style('*'),
-        ),
+    state('*, expanded', style('*')),
 
-        // Prevent the transition if the state is false
-        transition('void <=> false, collapsed <=> false, expanded <=> false', []),
+    // Prevent the transition if the state is false
+    transition('void <=> false, collapsed <=> false, expanded <=> false', []),
 
-        // Transition
-        transition('void <=> *, collapsed <=> expanded',
-            animate('{{timings}}'),
-            {
-                params: {
-                    timings: `${FuseAnimationDurations.entering} ${FuseAnimationCurves.deceleration}`,
-                },
-            },
-        ),
-    ],
-);
+    // Transition
+    transition('void <=> *, collapsed <=> expanded', animate('{{timings}}'), {
+        params: {
+            timings: `${FuseAnimationDurations.entering} ${FuseAnimationCurves.deceleration}`,
+        },
+    }),
+]);
 
 export { expandCollapse };
diff --git a/src/@fuse/animations/fade.ts b/src/@fuse/animations/fade.ts
index d14cc2f1..0afbf111 100644
--- a/src/@fuse/animations/fade.ts
+++ b/src/@fuse/animations/fade.ts
@@ -1,330 +1,330 @@
-import { animate, state, style, transition, trigger } from '@angular/animations';
-import { FuseAnimationCurves, FuseAnimationDurations } from '@fuse/animations/defaults';
+import {
+    animate,
+    state,
+    style,
+    transition,
+    trigger,
+} from '@angular/animations';
+import {
+    FuseAnimationCurves,
+    FuseAnimationDurations,
+} from '@fuse/animations/defaults';
 
 // -----------------------------------------------------------------------------------------------------
 // @ Fade in
 // -----------------------------------------------------------------------------------------------------
-const fadeIn = trigger('fadeIn',
-    [
-        state('void',
-            style({
-                opacity: 0,
-            }),
-        ),
+const fadeIn = trigger('fadeIn', [
+    state(
+        'void',
+        style({
+            opacity: 0,
+        })
+    ),
 
-        state('*',
-            style({
-                opacity: 1,
-            }),
-        ),
+    state(
+        '*',
+        style({
+            opacity: 1,
+        })
+    ),
 
-        // Prevent the transition if the state is false
-        transition('void => false', []),
+    // Prevent the transition if the state is false
+    transition('void => false', []),
 
-        // Transition
-        transition('void => *', animate('{{timings}}'),
-            {
-                params: {
-                    timings: `${FuseAnimationDurations.entering} ${FuseAnimationCurves.deceleration}`,
-                },
-            },
-        ),
-    ],
-);
+    // Transition
+    transition('void => *', animate('{{timings}}'), {
+        params: {
+            timings: `${FuseAnimationDurations.entering} ${FuseAnimationCurves.deceleration}`,
+        },
+    }),
+]);
 
 // -----------------------------------------------------------------------------------------------------
 // @ Fade in top
 // -----------------------------------------------------------------------------------------------------
-const fadeInTop = trigger('fadeInTop',
-    [
-        state('void',
-            style({
-                opacity  : 0,
-                transform: 'translate3d(0, -100%, 0)',
-            }),
-        ),
+const fadeInTop = trigger('fadeInTop', [
+    state(
+        'void',
+        style({
+            opacity: 0,
+            transform: 'translate3d(0, -100%, 0)',
+        })
+    ),
 
-        state('*',
-            style({
-                opacity  : 1,
-                transform: 'translate3d(0, 0, 0)',
-            }),
-        ),
+    state(
+        '*',
+        style({
+            opacity: 1,
+            transform: 'translate3d(0, 0, 0)',
+        })
+    ),
 
-        // Prevent the transition if the state is false
-        transition('void => false', []),
+    // Prevent the transition if the state is false
+    transition('void => false', []),
 
-        // Transition
-        transition('void => *', animate('{{timings}}'),
-            {
-                params: {
-                    timings: `${FuseAnimationDurations.entering} ${FuseAnimationCurves.deceleration}`,
-                },
-            },
-        ),
-    ],
-);
+    // Transition
+    transition('void => *', animate('{{timings}}'), {
+        params: {
+            timings: `${FuseAnimationDurations.entering} ${FuseAnimationCurves.deceleration}`,
+        },
+    }),
+]);
 
 // -----------------------------------------------------------------------------------------------------
 // @ Fade in bottom
 // -----------------------------------------------------------------------------------------------------
-const fadeInBottom = trigger('fadeInBottom',
-    [
-        state('void',
-            style({
-                opacity  : 0,
-                transform: 'translate3d(0, 100%, 0)',
-            }),
-        ),
+const fadeInBottom = trigger('fadeInBottom', [
+    state(
+        'void',
+        style({
+            opacity: 0,
+            transform: 'translate3d(0, 100%, 0)',
+        })
+    ),
 
-        state('*',
-            style({
-                opacity  : 1,
-                transform: 'translate3d(0, 0, 0)',
-            }),
-        ),
+    state(
+        '*',
+        style({
+            opacity: 1,
+            transform: 'translate3d(0, 0, 0)',
+        })
+    ),
 
-        // Prevent the transition if the state is false
-        transition('void => false', []),
+    // Prevent the transition if the state is false
+    transition('void => false', []),
 
-        // Transition
-        transition('void => *', animate('{{timings}}'),
-            {
-                params: {
-                    timings: `${FuseAnimationDurations.entering} ${FuseAnimationCurves.deceleration}`,
-                },
-            },
-        ),
-    ],
-);
+    // Transition
+    transition('void => *', animate('{{timings}}'), {
+        params: {
+            timings: `${FuseAnimationDurations.entering} ${FuseAnimationCurves.deceleration}`,
+        },
+    }),
+]);
 
 // -----------------------------------------------------------------------------------------------------
 // @ Fade in left
 // -----------------------------------------------------------------------------------------------------
-const fadeInLeft = trigger('fadeInLeft',
-    [
-        state('void',
-            style({
-                opacity  : 0,
-                transform: 'translate3d(-100%, 0, 0)',
-            }),
-        ),
+const fadeInLeft = trigger('fadeInLeft', [
+    state(
+        'void',
+        style({
+            opacity: 0,
+            transform: 'translate3d(-100%, 0, 0)',
+        })
+    ),
 
-        state('*',
-            style({
-                opacity  : 1,
-                transform: 'translate3d(0, 0, 0)',
-            }),
-        ),
+    state(
+        '*',
+        style({
+            opacity: 1,
+            transform: 'translate3d(0, 0, 0)',
+        })
+    ),
 
-        // Prevent the transition if the state is false
-        transition('void => false', []),
+    // Prevent the transition if the state is false
+    transition('void => false', []),
 
-        // Transition
-        transition('void => *', animate('{{timings}}'),
-            {
-                params: {
-                    timings: `${FuseAnimationDurations.entering} ${FuseAnimationCurves.deceleration}`,
-                },
-            },
-        ),
-    ],
-);
+    // Transition
+    transition('void => *', animate('{{timings}}'), {
+        params: {
+            timings: `${FuseAnimationDurations.entering} ${FuseAnimationCurves.deceleration}`,
+        },
+    }),
+]);
 
 // -----------------------------------------------------------------------------------------------------
 // @ Fade in right
 // -----------------------------------------------------------------------------------------------------
-const fadeInRight = trigger('fadeInRight',
-    [
-        state('void',
-            style({
-                opacity  : 0,
-                transform: 'translate3d(100%, 0, 0)',
-            }),
-        ),
+const fadeInRight = trigger('fadeInRight', [
+    state(
+        'void',
+        style({
+            opacity: 0,
+            transform: 'translate3d(100%, 0, 0)',
+        })
+    ),
 
-        state('*',
-            style({
-                opacity  : 1,
-                transform: 'translate3d(0, 0, 0)',
-            }),
-        ),
+    state(
+        '*',
+        style({
+            opacity: 1,
+            transform: 'translate3d(0, 0, 0)',
+        })
+    ),
 
-        // Prevent the transition if the state is false
-        transition('void => false', []),
+    // Prevent the transition if the state is false
+    transition('void => false', []),
 
-        // Transition
-        transition('void => *', animate('{{timings}}'),
-            {
-                params: {
-                    timings: `${FuseAnimationDurations.entering} ${FuseAnimationCurves.deceleration}`,
-                },
-            },
-        ),
-    ],
-);
+    // Transition
+    transition('void => *', animate('{{timings}}'), {
+        params: {
+            timings: `${FuseAnimationDurations.entering} ${FuseAnimationCurves.deceleration}`,
+        },
+    }),
+]);
 
 // -----------------------------------------------------------------------------------------------------
 // @ Fade out
 // -----------------------------------------------------------------------------------------------------
-const fadeOut = trigger('fadeOut',
-    [
-        state('*',
-            style({
-                opacity: 1,
-            }),
-        ),
+const fadeOut = trigger('fadeOut', [
+    state(
+        '*',
+        style({
+            opacity: 1,
+        })
+    ),
 
-        state('void',
-            style({
-                opacity: 0,
-            }),
-        ),
+    state(
+        'void',
+        style({
+            opacity: 0,
+        })
+    ),
 
-        // Prevent the transition if the state is false
-        transition('false => void', []),
+    // Prevent the transition if the state is false
+    transition('false => void', []),
 
-        // Transition
-        transition('* => void', animate('{{timings}}'),
-            {
-                params: {
-                    timings: `${FuseAnimationDurations.exiting} ${FuseAnimationCurves.acceleration}`,
-                },
-            },
-        ),
-    ],
-);
+    // Transition
+    transition('* => void', animate('{{timings}}'), {
+        params: {
+            timings: `${FuseAnimationDurations.exiting} ${FuseAnimationCurves.acceleration}`,
+        },
+    }),
+]);
 
 // -----------------------------------------------------------------------------------------------------
 // @ Fade out top
 // -----------------------------------------------------------------------------------------------------
-const fadeOutTop = trigger('fadeOutTop',
-    [
-        state('*',
-            style({
-                opacity  : 1,
-                transform: 'translate3d(0, 0, 0)',
-            }),
-        ),
+const fadeOutTop = trigger('fadeOutTop', [
+    state(
+        '*',
+        style({
+            opacity: 1,
+            transform: 'translate3d(0, 0, 0)',
+        })
+    ),
 
-        state('void',
-            style({
-                opacity  : 0,
-                transform: 'translate3d(0, -100%, 0)',
-            }),
-        ),
+    state(
+        'void',
+        style({
+            opacity: 0,
+            transform: 'translate3d(0, -100%, 0)',
+        })
+    ),
 
-        // Prevent the transition if the state is false
-        transition('false => void', []),
+    // Prevent the transition if the state is false
+    transition('false => void', []),
 
-        // Transition
-        transition('* => void', animate('{{timings}}'),
-            {
-                params: {
-                    timings: `${FuseAnimationDurations.exiting} ${FuseAnimationCurves.acceleration}`,
-                },
-            },
-        ),
-    ],
-);
+    // Transition
+    transition('* => void', animate('{{timings}}'), {
+        params: {
+            timings: `${FuseAnimationDurations.exiting} ${FuseAnimationCurves.acceleration}`,
+        },
+    }),
+]);
 
 // -----------------------------------------------------------------------------------------------------
 // @ Fade out bottom
 // -----------------------------------------------------------------------------------------------------
-const fadeOutBottom = trigger('fadeOutBottom',
-    [
-        state('*',
-            style({
-                opacity  : 1,
-                transform: 'translate3d(0, 0, 0)',
-            }),
-        ),
+const fadeOutBottom = trigger('fadeOutBottom', [
+    state(
+        '*',
+        style({
+            opacity: 1,
+            transform: 'translate3d(0, 0, 0)',
+        })
+    ),
 
-        state('void',
-            style({
-                opacity  : 0,
-                transform: 'translate3d(0, 100%, 0)',
-            }),
-        ),
+    state(
+        'void',
+        style({
+            opacity: 0,
+            transform: 'translate3d(0, 100%, 0)',
+        })
+    ),
 
-        // Prevent the transition if the state is false
-        transition('false => void', []),
+    // Prevent the transition if the state is false
+    transition('false => void', []),
 
-        // Transition
-        transition('* => void', animate('{{timings}}'),
-            {
-                params: {
-                    timings: `${FuseAnimationDurations.exiting} ${FuseAnimationCurves.acceleration}`,
-                },
-            },
-        ),
-    ],
-);
+    // Transition
+    transition('* => void', animate('{{timings}}'), {
+        params: {
+            timings: `${FuseAnimationDurations.exiting} ${FuseAnimationCurves.acceleration}`,
+        },
+    }),
+]);
 
 // -----------------------------------------------------------------------------------------------------
 // @ Fade out left
 // -----------------------------------------------------------------------------------------------------
-const fadeOutLeft = trigger('fadeOutLeft',
-    [
-        state('*',
-            style({
-                opacity  : 1,
-                transform: 'translate3d(0, 0, 0)',
-            }),
-        ),
+const fadeOutLeft = trigger('fadeOutLeft', [
+    state(
+        '*',
+        style({
+            opacity: 1,
+            transform: 'translate3d(0, 0, 0)',
+        })
+    ),
 
-        state('void',
-            style({
-                opacity  : 0,
-                transform: 'translate3d(-100%, 0, 0)',
-            }),
-        ),
+    state(
+        'void',
+        style({
+            opacity: 0,
+            transform: 'translate3d(-100%, 0, 0)',
+        })
+    ),
 
-        // Prevent the transition if the state is false
-        transition('false => void', []),
+    // Prevent the transition if the state is false
+    transition('false => void', []),
 
-        // Transition
-        transition('* => void', animate('{{timings}}'),
-            {
-                params: {
-                    timings: `${FuseAnimationDurations.exiting} ${FuseAnimationCurves.acceleration}`,
-                },
-            },
-        ),
-    ],
-);
+    // Transition
+    transition('* => void', animate('{{timings}}'), {
+        params: {
+            timings: `${FuseAnimationDurations.exiting} ${FuseAnimationCurves.acceleration}`,
+        },
+    }),
+]);
 
 // -----------------------------------------------------------------------------------------------------
 // @ Fade out right
 // -----------------------------------------------------------------------------------------------------
-const fadeOutRight = trigger('fadeOutRight',
-    [
-        state('*',
-            style({
-                opacity  : 1,
-                transform: 'translate3d(0, 0, 0)',
-            }),
-        ),
+const fadeOutRight = trigger('fadeOutRight', [
+    state(
+        '*',
+        style({
+            opacity: 1,
+            transform: 'translate3d(0, 0, 0)',
+        })
+    ),
 
-        state('void',
-            style({
-                opacity  : 0,
-                transform: 'translate3d(100%, 0, 0)',
-            }),
-        ),
+    state(
+        'void',
+        style({
+            opacity: 0,
+            transform: 'translate3d(100%, 0, 0)',
+        })
+    ),
 
-        // Prevent the transition if the state is false
-        transition('false => void', []),
+    // Prevent the transition if the state is false
+    transition('false => void', []),
 
-        // Transition
-        transition('* => void', animate('{{timings}}'),
-            {
-                params: {
-                    timings: `${FuseAnimationDurations.exiting} ${FuseAnimationCurves.acceleration}`,
-                },
-            },
-        ),
-    ],
-);
+    // Transition
+    transition('* => void', animate('{{timings}}'), {
+        params: {
+            timings: `${FuseAnimationDurations.exiting} ${FuseAnimationCurves.acceleration}`,
+        },
+    }),
+]);
 
-export { fadeIn, fadeInTop, fadeInBottom, fadeInLeft, fadeInRight, fadeOut, fadeOutTop, fadeOutBottom, fadeOutLeft, fadeOutRight };
+export {
+    fadeIn,
+    fadeInBottom,
+    fadeInLeft,
+    fadeInRight,
+    fadeInTop,
+    fadeOut,
+    fadeOutBottom,
+    fadeOutLeft,
+    fadeOutRight,
+    fadeOutTop,
+};
diff --git a/src/@fuse/animations/public-api.ts b/src/@fuse/animations/public-api.ts
index d475fbc0..cbf25af5 100644
--- a/src/@fuse/animations/public-api.ts
+++ b/src/@fuse/animations/public-api.ts
@@ -1,15 +1,50 @@
 import { expandCollapse } from '@fuse/animations/expand-collapse';
-import { fadeIn, fadeInBottom, fadeInLeft, fadeInRight, fadeInTop, fadeOut, fadeOutBottom, fadeOutLeft, fadeOutRight, fadeOutTop } from '@fuse/animations/fade';
+import {
+    fadeIn,
+    fadeInBottom,
+    fadeInLeft,
+    fadeInRight,
+    fadeInTop,
+    fadeOut,
+    fadeOutBottom,
+    fadeOutLeft,
+    fadeOutRight,
+    fadeOutTop,
+} from '@fuse/animations/fade';
 import { shake } from '@fuse/animations/shake';
-import { slideInBottom, slideInLeft, slideInRight, slideInTop, slideOutBottom, slideOutLeft, slideOutRight, slideOutTop } from '@fuse/animations/slide';
+import {
+    slideInBottom,
+    slideInLeft,
+    slideInRight,
+    slideInTop,
+    slideOutBottom,
+    slideOutLeft,
+    slideOutRight,
+    slideOutTop,
+} from '@fuse/animations/slide';
 import { zoomIn, zoomOut } from '@fuse/animations/zoom';
 
 export const fuseAnimations = [
     expandCollapse,
-    fadeIn, fadeInTop, fadeInBottom, fadeInLeft, fadeInRight,
-    fadeOut, fadeOutTop, fadeOutBottom, fadeOutLeft, fadeOutRight,
+    fadeIn,
+    fadeInTop,
+    fadeInBottom,
+    fadeInLeft,
+    fadeInRight,
+    fadeOut,
+    fadeOutTop,
+    fadeOutBottom,
+    fadeOutLeft,
+    fadeOutRight,
     shake,
-    slideInTop, slideInBottom, slideInLeft, slideInRight,
-    slideOutTop, slideOutBottom, slideOutLeft, slideOutRight,
-    zoomIn, zoomOut,
+    slideInTop,
+    slideInBottom,
+    slideInLeft,
+    slideInRight,
+    slideOutTop,
+    slideOutBottom,
+    slideOutLeft,
+    slideOutRight,
+    zoomIn,
+    zoomOut,
 ];
diff --git a/src/@fuse/animations/shake.ts b/src/@fuse/animations/shake.ts
index e66f8f79..bb7ef616 100644
--- a/src/@fuse/animations/shake.ts
+++ b/src/@fuse/animations/shake.ts
@@ -1,73 +1,78 @@
-import { animate, keyframes, style, transition, trigger } from '@angular/animations';
+import {
+    animate,
+    keyframes,
+    style,
+    transition,
+    trigger,
+} from '@angular/animations';
 
 // -----------------------------------------------------------------------------------------------------
 // @ Shake
 // -----------------------------------------------------------------------------------------------------
-const shake = trigger('shake',
-    [
+const shake = trigger('shake', [
+    // Prevent the transition if the state is false
+    transition('void => false', []),
 
-        // Prevent the transition if the state is false
-        transition('void => false', []),
-
-        // Transition
-        transition('void => *, * => true',
-            [
-                animate('{{timings}}',
-                    keyframes([
-                        style({
-                            transform: 'translate3d(0, 0, 0)',
-                            offset   : 0,
-                        }),
-                        style({
-                            transform: 'translate3d(-10px, 0, 0)',
-                            offset   : 0.1,
-                        }),
-                        style({
-                            transform: 'translate3d(10px, 0, 0)',
-                            offset   : 0.2,
-                        }),
-                        style({
-                            transform: 'translate3d(-10px, 0, 0)',
-                            offset   : 0.3,
-                        }),
-                        style({
-                            transform: 'translate3d(10px, 0, 0)',
-                            offset   : 0.4,
-                        }),
-                        style({
-                            transform: 'translate3d(-10px, 0, 0)',
-                            offset   : 0.5,
-                        }),
-                        style({
-                            transform: 'translate3d(10px, 0, 0)',
-                            offset   : 0.6,
-                        }),
-                        style({
-                            transform: 'translate3d(-10px, 0, 0)',
-                            offset   : 0.7,
-                        }),
-                        style({
-                            transform: 'translate3d(10px, 0, 0)',
-                            offset   : 0.8,
-                        }),
-                        style({
-                            transform: 'translate3d(-10px, 0, 0)',
-                            offset   : 0.9,
-                        }),
-                        style({
-                            transform: 'translate3d(0, 0, 0)',
-                            offset   : 1,
-                        }),
-                    ]),
-                ),
-            ],
-            {
-                params: {
-                    timings: '0.8s cubic-bezier(0.455, 0.03, 0.515, 0.955)',
-                },
+    // Transition
+    transition(
+        'void => *, * => true',
+        [
+            animate(
+                '{{timings}}',
+                keyframes([
+                    style({
+                        transform: 'translate3d(0, 0, 0)',
+                        offset: 0,
+                    }),
+                    style({
+                        transform: 'translate3d(-10px, 0, 0)',
+                        offset: 0.1,
+                    }),
+                    style({
+                        transform: 'translate3d(10px, 0, 0)',
+                        offset: 0.2,
+                    }),
+                    style({
+                        transform: 'translate3d(-10px, 0, 0)',
+                        offset: 0.3,
+                    }),
+                    style({
+                        transform: 'translate3d(10px, 0, 0)',
+                        offset: 0.4,
+                    }),
+                    style({
+                        transform: 'translate3d(-10px, 0, 0)',
+                        offset: 0.5,
+                    }),
+                    style({
+                        transform: 'translate3d(10px, 0, 0)',
+                        offset: 0.6,
+                    }),
+                    style({
+                        transform: 'translate3d(-10px, 0, 0)',
+                        offset: 0.7,
+                    }),
+                    style({
+                        transform: 'translate3d(10px, 0, 0)',
+                        offset: 0.8,
+                    }),
+                    style({
+                        transform: 'translate3d(-10px, 0, 0)',
+                        offset: 0.9,
+                    }),
+                    style({
+                        transform: 'translate3d(0, 0, 0)',
+                        offset: 1,
+                    }),
+                ])
+            ),
+        ],
+        {
+            params: {
+                timings: '0.8s cubic-bezier(0.455, 0.03, 0.515, 0.955)',
             },
-        ),
-    ],
-);
+        }
+    ),
+]);
 
 export { shake };
diff --git a/src/@fuse/animations/slide.ts b/src/@fuse/animations/slide.ts
index a38c1466..aaf4bf07 100644
--- a/src/@fuse/animations/slide.ts
+++ b/src/@fuse/animations/slide.ts
@@ -1,252 +1,254 @@
-import { animate, state, style, transition, trigger } from '@angular/animations';
-import { FuseAnimationCurves, FuseAnimationDurations } from '@fuse/animations/defaults';
+import {
+    animate,
+    state,
+    style,
+    transition,
+    trigger,
+} from '@angular/animations';
+import {
+    FuseAnimationCurves,
+    FuseAnimationDurations,
+} from '@fuse/animations/defaults';
 
 // -----------------------------------------------------------------------------------------------------
 // @ Slide in top
 // -----------------------------------------------------------------------------------------------------
-const slideInTop = trigger('slideInTop',
-    [
-        state('void',
-            style({
-                transform: 'translate3d(0, -100%, 0)',
-            }),
-        ),
+const slideInTop = trigger('slideInTop', [
+    state(
+        'void',
+        style({
+            transform: 'translate3d(0, -100%, 0)',
+        })
+    ),
 
-        state('*',
-            style({
-                transform: 'translate3d(0, 0, 0)',
-            }),
-        ),
+    state(
+        '*',
+        style({
+            transform: 'translate3d(0, 0, 0)',
+        })
+    ),
 
-        // Prevent the transition if the state is false
-        transition('void => false', []),
+    // Prevent the transition if the state is false
+    transition('void => false', []),
 
-        // Transition
-        transition('void => *', animate('{{timings}}'),
-            {
-                params: {
-                    timings: `${FuseAnimationDurations.entering} ${FuseAnimationCurves.deceleration}`,
-                },
-            },
-        ),
-    ],
-);
+    // Transition
+    transition('void => *', animate('{{timings}}'), {
+        params: {
+            timings: `${FuseAnimationDurations.entering} ${FuseAnimationCurves.deceleration}`,
+        },
+    }),
+]);
 
 // -----------------------------------------------------------------------------------------------------
 // @ Slide in bottom
 // -----------------------------------------------------------------------------------------------------
-const slideInBottom = trigger('slideInBottom',
-    [
-        state('void',
-            style({
-                transform: 'translate3d(0, 100%, 0)',
-            }),
-        ),
+const slideInBottom = trigger('slideInBottom', [
+    state(
+        'void',
+        style({
+            transform: 'translate3d(0, 100%, 0)',
+        })
+    ),
 
-        state('*',
-            style({
-                transform: 'translate3d(0, 0, 0)',
-            }),
-        ),
+    state(
+        '*',
+        style({
+            transform: 'translate3d(0, 0, 0)',
+        })
+    ),
 
-        // Prevent the transition if the state is false
-        transition('void => false', []),
+    // Prevent the transition if the state is false
+    transition('void => false', []),
 
-        // Transition
-        transition('void => *', animate('{{timings}}'),
-            {
-                params: {
-                    timings: `${FuseAnimationDurations.entering} ${FuseAnimationCurves.deceleration}`,
-                },
-            },
-        ),
-    ],
-);
+    // Transition
+    transition('void => *', animate('{{timings}}'), {
+        params: {
+            timings: `${FuseAnimationDurations.entering} ${FuseAnimationCurves.deceleration}`,
+        },
+    }),
+]);
 
 // -----------------------------------------------------------------------------------------------------
 // @ Slide in left
 // -----------------------------------------------------------------------------------------------------
-const slideInLeft = trigger('slideInLeft',
-    [
-        state('void',
-            style({
-                transform: 'translate3d(-100%, 0, 0)',
-            }),
-        ),
+const slideInLeft = trigger('slideInLeft', [
+    state(
+        'void',
+        style({
+            transform: 'translate3d(-100%, 0, 0)',
+        })
+    ),
 
-        state('*',
-            style({
-                transform: 'translate3d(0, 0, 0)',
-            }),
-        ),
+    state(
+        '*',
+        style({
+            transform: 'translate3d(0, 0, 0)',
+        })
+    ),
 
-        // Prevent the transition if the state is false
-        transition('void => false', []),
+    // Prevent the transition if the state is false
+    transition('void => false', []),
 
-        // Transition
-        transition('void => *', animate('{{timings}}'),
-            {
-                params: {
-                    timings: `${FuseAnimationDurations.entering} ${FuseAnimationCurves.deceleration}`,
-                },
-            },
-        ),
-    ],
-);
+    // Transition
+    transition('void => *', animate('{{timings}}'), {
+        params: {
+            timings: `${FuseAnimationDurations.entering} ${FuseAnimationCurves.deceleration}`,
+        },
+    }),
+]);
 
 // -----------------------------------------------------------------------------------------------------
 // @ Slide in right
 // -----------------------------------------------------------------------------------------------------
-const slideInRight = trigger('slideInRight',
-    [
-        state('void',
-            style({
-                transform: 'translate3d(100%, 0, 0)',
-            }),
-        ),
+const slideInRight = trigger('slideInRight', [
+    state(
+        'void',
+        style({
+            transform: 'translate3d(100%, 0, 0)',
+        })
+    ),
 
-        state('*',
-            style({
-                transform: 'translate3d(0, 0, 0)',
-            }),
-        ),
+    state(
+        '*',
+        style({
+            transform: 'translate3d(0, 0, 0)',
+        })
+    ),
 
-        // Prevent the transition if the state is false
-        transition('void => false', []),
+    // Prevent the transition if the state is false
+    transition('void => false', []),
 
-        // Transition
-        transition('void => *', animate('{{timings}}'),
-            {
-                params: {
-                    timings: `${FuseAnimationDurations.entering} ${FuseAnimationCurves.deceleration}`,
-                },
-            },
-        ),
-    ],
-);
+    // Transition
+    transition('void => *', animate('{{timings}}'), {
+        params: {
+            timings: `${FuseAnimationDurations.entering} ${FuseAnimationCurves.deceleration}`,
+        },
+    }),
+]);
 
 // -----------------------------------------------------------------------------------------------------
 // @ Slide out top
 // -----------------------------------------------------------------------------------------------------
-const slideOutTop = trigger('slideOutTop',
-    [
-        state('*',
-            style({
-                transform: 'translate3d(0, 0, 0)',
-            }),
-        ),
+const slideOutTop = trigger('slideOutTop', [
+    state(
+        '*',
+        style({
+            transform: 'translate3d(0, 0, 0)',
+        })
+    ),
 
-        state('void',
-            style({
-                transform: 'translate3d(0, -100%, 0)',
-            }),
-        ),
+    state(
+        'void',
+        style({
+            transform: 'translate3d(0, -100%, 0)',
+        })
+    ),
 
-        // Prevent the transition if the state is false
-        transition('false => void', []),
+    // Prevent the transition if the state is false
+    transition('false => void', []),
 
-        // Transition
-        transition('* => void', animate('{{timings}}'),
-            {
-                params: {
-                    timings: `${FuseAnimationDurations.exiting} ${FuseAnimationCurves.acceleration}`,
-                },
-            },
-        ),
-    ],
-);
+    // Transition
+    transition('* => void', animate('{{timings}}'), {
+        params: {
+            timings: `${FuseAnimationDurations.exiting} ${FuseAnimationCurves.acceleration}`,
+        },
+    }),
+]);
 
 // -----------------------------------------------------------------------------------------------------
 // @ Slide out bottom
 // -----------------------------------------------------------------------------------------------------
-const slideOutBottom = trigger('slideOutBottom',
-    [
-        state('*',
-            style({
-                transform: 'translate3d(0, 0, 0)',
-            }),
-        ),
+const slideOutBottom = trigger('slideOutBottom', [
+    state(
+        '*',
+        style({
+            transform: 'translate3d(0, 0, 0)',
+        })
+    ),
 
-        state('void',
-            style({
-                transform: 'translate3d(0, 100%, 0)',
-            }),
-        ),
+    state(
+        'void',
+        style({
+            transform: 'translate3d(0, 100%, 0)',
+        })
+    ),
 
-        // Prevent the transition if the state is false
-        transition('false => void', []),
+    // Prevent the transition if the state is false
+    transition('false => void', []),
 
-        // Transition
-        transition('* => void', animate('{{timings}}'),
-            {
-                params: {
-                    timings: `${FuseAnimationDurations.exiting} ${FuseAnimationCurves.acceleration}`,
-                },
-            },
-        ),
-    ],
-);
+    // Transition
+    transition('* => void', animate('{{timings}}'), {
+        params: {
+            timings: `${FuseAnimationDurations.exiting} ${FuseAnimationCurves.acceleration}`,
+        },
+    }),
+]);
 
 // -----------------------------------------------------------------------------------------------------
 // @ Slide out left
 // -----------------------------------------------------------------------------------------------------
-const slideOutLeft = trigger('slideOutLeft',
-    [
-        state('*',
-            style({
-                transform: 'translate3d(0, 0, 0)',
-            }),
-        ),
+const slideOutLeft = trigger('slideOutLeft', [
+    state(
+        '*',
+        style({
+            transform: 'translate3d(0, 0, 0)',
+        })
+    ),
 
-        state('void',
-            style({
-                transform: 'translate3d(-100%, 0, 0)',
-            }),
-        ),
+    state(
+        'void',
+        style({
+            transform: 'translate3d(-100%, 0, 0)',
+        })
+    ),
 
-        // Prevent the transition if the state is false
-        transition('false => void', []),
+    // Prevent the transition if the state is false
+    transition('false => void', []),
 
-        // Transition
-        transition('* => void', animate('{{timings}}'),
-            {
-                params: {
-                    timings: `${FuseAnimationDurations.exiting} ${FuseAnimationCurves.acceleration}`,
-                },
-            },
-        ),
-    ],
-);
+    // Transition
+    transition('* => void', animate('{{timings}}'), {
+        params: {
+            timings: `${FuseAnimationDurations.exiting} ${FuseAnimationCurves.acceleration}`,
+        },
+    }),
+]);
 
 // -----------------------------------------------------------------------------------------------------
 // @ Slide out right
 // -----------------------------------------------------------------------------------------------------
-const slideOutRight = trigger('slideOutRight',
-    [
-        state('*',
-            style({
-                transform: 'translate3d(0, 0, 0)',
-            }),
-        ),
+const slideOutRight = trigger('slideOutRight', [
+    state(
+        '*',
+        style({
+            transform: 'translate3d(0, 0, 0)',
+        })
+    ),
 
-        state('void',
-            style({
-                transform: 'translate3d(100%, 0, 0)',
-            }),
-        ),
+    state(
+        'void',
+        style({
+            transform: 'translate3d(100%, 0, 0)',
+        })
+    ),
 
-        // Prevent the transition if the state is false
-        transition('false => void', []),
+    // Prevent the transition if the state is false
+    transition('false => void', []),
 
-        // Transition
-        transition('* => void', animate('{{timings}}'),
-            {
-                params: {
-                    timings: `${FuseAnimationDurations.exiting} ${FuseAnimationCurves.acceleration}`,
-                },
-            },
-        ),
-    ],
-);
+    // Transition
+    transition('* => void', animate('{{timings}}'), {
+        params: {
+            timings: `${FuseAnimationDurations.exiting} ${FuseAnimationCurves.acceleration}`,
+        },
+    }),
+]);
 
-export { slideInTop, slideInBottom, slideInLeft, slideInRight, slideOutTop, slideOutBottom, slideOutLeft, slideOutRight };
+export {
+    slideInBottom,
+    slideInLeft,
+    slideInRight,
+    slideInTop,
+    slideOutBottom,
+    slideOutLeft,
+    slideOutRight,
+    slideOutTop,
+};
diff --git a/src/@fuse/animations/zoom.ts b/src/@fuse/animations/zoom.ts
index fee79143..b039ec4a 100644
--- a/src/@fuse/animations/zoom.ts
+++ b/src/@fuse/animations/zoom.ts
@@ -1,73 +1,75 @@
-import { animate, state, style, transition, trigger } from '@angular/animations';
-import { FuseAnimationCurves, FuseAnimationDurations } from '@fuse/animations/defaults';
+import {
+    animate,
+    state,
+    style,
+    transition,
+    trigger,
+} from '@angular/animations';
+import {
+    FuseAnimationCurves,
+    FuseAnimationDurations,
+} from '@fuse/animations/defaults';
 
 // -----------------------------------------------------------------------------------------------------
 // @ Zoom in
 // -----------------------------------------------------------------------------------------------------
-const zoomIn = trigger('zoomIn',
-    [
+const zoomIn = trigger('zoomIn', [
+    state(
+        'void',
+        style({
+            opacity: 0,
+            transform: 'scale(0.5)',
+        })
+    ),
 
-        state('void',
-            style({
-                opacity  : 0,
-                transform: 'scale(0.5)',
-            }),
-        ),
+    state(
+        '*',
+        style({
+            opacity: 1,
+            transform: 'scale(1)',
+        })
+    ),
 
-        state('*',
-            style({
-                opacity  : 1,
-                transform: 'scale(1)',
-            }),
-        ),
+    // Prevent the transition if the state is false
+    transition('void => false', []),
 
-        // Prevent the transition if the state is false
-        transition('void => false', []),
-
-        // Transition
-        transition('void => *', animate('{{timings}}'),
-            {
-                params: {
-                    timings: `${FuseAnimationDurations.entering} ${FuseAnimationCurves.deceleration}`,
-                },
-            },
-        ),
-    ],
-);
+    // Transition
+    transition('void => *', animate('{{timings}}'), {
+        params: {
+            timings: `${FuseAnimationDurations.entering} ${FuseAnimationCurves.deceleration}`,
+        },
+    }),
+]);
 
 // -----------------------------------------------------------------------------------------------------
 // @ Zoom out
 // -----------------------------------------------------------------------------------------------------
-const zoomOut = trigger('zoomOut',
-    [
+const zoomOut = trigger('zoomOut', [
+    state(
+        '*',
+        style({
+            opacity: 1,
+            transform: 'scale(1)',
+        })
+    ),
 
-        state('*',
-            style({
-                opacity  : 1,
-                transform: 'scale(1)',
-            }),
-        ),
+    state(
+        'void',
+        style({
+            opacity: 0,
+            transform: 'scale(0.5)',
+        })
+    ),
 
-        state('void',
-            style({
-                opacity  : 0,
-                transform: 'scale(0.5)',
-            }),
-        ),
+    // Prevent the transition if the state is false
+    transition('false => void', []),
 
-        // Prevent the transition if the state is false
-        transition('false => void', []),
-
-        // Transition
-        transition('* => void', animate('{{timings}}'),
-            {
-                params: {
-                    timings: `${FuseAnimationDurations.exiting} ${FuseAnimationCurves.acceleration}`,
-                },
-            },
-        ),
-    ],
-);
+    // Transition
+    transition('* => void', animate('{{timings}}'), {
+        params: {
+            timings: `${FuseAnimationDurations.exiting} ${FuseAnimationCurves.acceleration}`,
+        },
+    }),
+]);
 
 export { zoomIn, zoomOut };
-
diff --git a/src/@fuse/components/alert/alert.component.html b/src/@fuse/components/alert/alert.component.html
index 2f8e208e..5c234dd0 100644
--- a/src/@fuse/components/alert/alert.component.html
+++ b/src/@fuse/components/alert/alert.component.html
@@ -1,19 +1,14 @@
 <div
     class="fuse-alert-container"
-    *ngIf="!dismissible || dismissible && !dismissed"
+    *ngIf="!dismissible || (dismissible && !dismissed)"
     [@fadeIn]="!dismissed"
-    [@fadeOut]="!dismissed">
-
+    [@fadeOut]="!dismissed"
+>
     <!-- Border -->
-    <div
-        class="fuse-alert-border"
-        *ngIf="appearance === 'border'"></div>
+    <div class="fuse-alert-border" *ngIf="appearance === 'border'"></div>
 
     <!-- Icon -->
-    <div
-        class="fuse-alert-icon"
-        *ngIf="showIcon">
-
+    <div class="fuse-alert-icon" *ngIf="showIcon">
         <!-- Custom icon -->
         <div class="fuse-alert-custom-icon">
             <ng-content select="[fuseAlertIcon]"></ng-content>
@@ -21,46 +16,50 @@
 
         <!-- Default icons -->
         <div class="fuse-alert-default-icon">
-
             <mat-icon
                 *ngIf="type === 'primary'"
-                [svgIcon]="'heroicons_solid:check-circle'"></mat-icon>
+                [svgIcon]="'heroicons_solid:check-circle'"
+            ></mat-icon>
 
             <mat-icon
                 *ngIf="type === 'accent'"
-                [svgIcon]="'heroicons_solid:check-circle'"></mat-icon>
+                [svgIcon]="'heroicons_solid:check-circle'"
+            ></mat-icon>
 
             <mat-icon
                 *ngIf="type === 'warn'"
-                [svgIcon]="'heroicons_solid:x-circle'"></mat-icon>
+                [svgIcon]="'heroicons_solid:x-circle'"
+            ></mat-icon>
 
             <mat-icon
                 *ngIf="type === 'basic'"
-                [svgIcon]="'heroicons_solid:check-circle'"></mat-icon>
+                [svgIcon]="'heroicons_solid:check-circle'"
+            ></mat-icon>
 
             <mat-icon
                 *ngIf="type === 'info'"
-                [svgIcon]="'heroicons_solid:information-circle'"></mat-icon>
+                [svgIcon]="'heroicons_solid:information-circle'"
+            ></mat-icon>
 
             <mat-icon
                 *ngIf="type === 'success'"
-                [svgIcon]="'heroicons_solid:check-circle'"></mat-icon>
+                [svgIcon]="'heroicons_solid:check-circle'"
+            ></mat-icon>
 
             <mat-icon
                 *ngIf="type === 'warning'"
-                [svgIcon]="'heroicons_solid:exclamation-triangle'"></mat-icon>
+                [svgIcon]="'heroicons_solid:exclamation-triangle'"
+            ></mat-icon>
 
             <mat-icon
                 *ngIf="type === 'error'"
-                [svgIcon]="'heroicons_solid:x-circle'"></mat-icon>
-
+                [svgIcon]="'heroicons_solid:x-circle'"
+            ></mat-icon>
         </div>
-
     </div>
 
     <!-- Content -->
     <div class="fuse-alert-content">
-
         <div class="fuse-alert-title">
             <ng-content select="[fuseAlertTitle]"></ng-content>
         </div>
@@ -68,15 +67,14 @@
         <div class="fuse-alert-message">
             <ng-content></ng-content>
         </div>
-
     </div>
 
     <!-- Dismiss button -->
     <button
         class="fuse-alert-dismiss-button"
         mat-icon-button
-        (click)="dismiss()">
+        (click)="dismiss()"
+    >
         <mat-icon [svgIcon]="'heroicons_solid:x-mark'"></mat-icon>
     </button>
-
 </div>
diff --git a/src/@fuse/components/alert/alert.component.scss b/src/@fuse/components/alert/alert.component.scss
index 4b1a86ce..10ce2e37 100644
--- a/src/@fuse/components/alert/alert.component.scss
+++ b/src/@fuse/components/alert/alert.component.scss
@@ -33,7 +33,6 @@ fuse-alert {
             }
 
             .fuse-alert-default-icon {
-
                 .mat-icon {
                     @apply icon-size-5;
                 }
@@ -70,7 +69,6 @@ fuse-alert {
 
                     /* Alert that comes after the title */
                     + .fuse-alert-message {
-
                         &:not(:empty) {
                             margin-top: 4px;
                         }
@@ -108,9 +106,7 @@ fuse-alert {
 
     /* Dismissible */
     &.fuse-alert-dismissible {
-
         .fuse-alert-container {
-
             .fuse-alert-content {
                 margin-right: 32px;
             }
@@ -118,9 +114,7 @@ fuse-alert {
     }
 
     &:not(.fuse-alert-dismissible) {
-
         .fuse-alert-container {
-
             .fuse-alert-dismiss-button {
                 display: none !important;
             }
@@ -129,12 +123,11 @@ fuse-alert {
 
     /* Border */
     &.fuse-alert-appearance-border {
-
         .fuse-alert-container {
             position: relative;
             overflow: hidden;
             border-radius: 6px;
-            @apply shadow-md bg-card;
+            @apply bg-card shadow-md;
 
             .fuse-alert-border {
                 position: absolute;
@@ -151,9 +144,7 @@ fuse-alert {
 
         /* Primary */
         &.fuse-alert-type-primary {
-
             .fuse-alert-container {
-
                 .fuse-alert-border {
                     @apply bg-primary;
                 }
@@ -188,9 +179,7 @@ fuse-alert {
 
         /* Accent */
         &.fuse-alert-type-accent {
-
             .fuse-alert-container {
-
                 .fuse-alert-border {
                     @apply bg-accent;
                 }
@@ -225,9 +214,7 @@ fuse-alert {
 
         /* Warn */
         &.fuse-alert-type-warn {
-
             .fuse-alert-container {
-
                 .fuse-alert-border {
                     @apply bg-warn;
                 }
@@ -262,9 +249,7 @@ fuse-alert {
 
         /* Basic */
         &.fuse-alert-type-basic {
-
             .fuse-alert-container {
-
                 .fuse-alert-border {
                     @apply bg-gray-600;
                 }
@@ -299,9 +284,7 @@ fuse-alert {
 
         /* Info */
         &.fuse-alert-type-info {
-
             .fuse-alert-container {
-
                 .fuse-alert-border {
                     @apply bg-blue-600;
                 }
@@ -336,9 +319,7 @@ fuse-alert {
 
         /* Success */
         &.fuse-alert-type-success {
-
             .fuse-alert-container {
-
                 .fuse-alert-border {
                     @apply bg-green-500;
                 }
@@ -373,9 +354,7 @@ fuse-alert {
 
         /* Warning */
         &.fuse-alert-type-warning {
-
             .fuse-alert-container {
-
                 .fuse-alert-border {
                     @apply bg-amber-500;
                 }
@@ -410,9 +389,7 @@ fuse-alert {
 
         /* Error */
         &.fuse-alert-type-error {
-
             .fuse-alert-container {
-
                 .fuse-alert-border {
                     @apply bg-red-600;
                 }
@@ -448,7 +425,6 @@ fuse-alert {
 
     /* Fill */
     &.fuse-alert-appearance-fill {
-
         .fuse-alert-container {
             border-radius: 6px;
 
@@ -459,7 +435,6 @@ fuse-alert {
 
         /* Primary */
         &.fuse-alert-type-primary {
-
             .fuse-alert-container {
                 @apply bg-primary-600;
 
@@ -476,14 +451,13 @@ fuse-alert {
                 }
 
                 code {
-                    @apply text-primary-800 bg-primary-200;
+                    @apply bg-primary-200 text-primary-800;
                 }
             }
         }
 
         /* Accent */
         &.fuse-alert-type-accent {
-
             .fuse-alert-container {
                 @apply bg-accent-600;
 
@@ -500,14 +474,13 @@ fuse-alert {
                 }
 
                 code {
-                    @apply text-accent-800 bg-accent-200;
+                    @apply bg-accent-200 text-accent-800;
                 }
             }
         }
 
         /* Warn */
         &.fuse-alert-type-warn {
-
             .fuse-alert-container {
                 @apply bg-warn-600;
 
@@ -524,14 +497,13 @@ fuse-alert {
                 }
 
                 code {
-                    @apply text-warn-800 bg-warn-200;
+                    @apply bg-warn-200 text-warn-800;
                 }
             }
         }
 
         /* Basic */
         &.fuse-alert-type-basic {
-
             .fuse-alert-container {
                 @apply bg-gray-600;
 
@@ -555,7 +527,6 @@ fuse-alert {
 
         /* Info */
         &.fuse-alert-type-info {
-
             .fuse-alert-container {
                 @apply bg-blue-600;
 
@@ -579,7 +550,6 @@ fuse-alert {
 
         /* Success */
         &.fuse-alert-type-success {
-
             .fuse-alert-container {
                 @apply bg-green-600;
 
@@ -603,7 +573,6 @@ fuse-alert {
 
         /* Warning */
         &.fuse-alert-type-warning {
-
             .fuse-alert-container {
                 @apply bg-amber-500;
 
@@ -627,7 +596,6 @@ fuse-alert {
 
         /* Error */
         &.fuse-alert-type-error {
-
             .fuse-alert-container {
                 @apply bg-red-600;
 
@@ -652,16 +620,14 @@ fuse-alert {
 
     /* Outline */
     &.fuse-alert-appearance-outline {
-
         .fuse-alert-container {
             border-radius: 6px;
         }
 
         /* Primary */
         &.fuse-alert-type-primary {
-
             .fuse-alert-container {
-                @apply bg-primary-50 ring-1 ring-primary-400 ring-inset;
+                @apply bg-primary-50 ring-1 ring-inset ring-primary-400;
 
                 .fuse-alert-icon {
                     @apply text-primary-600;
@@ -677,7 +643,7 @@ fuse-alert {
                 }
 
                 code {
-                    @apply text-primary-800 bg-primary-200;
+                    @apply bg-primary-200 text-primary-800;
                 }
 
                 .dark & {
@@ -701,9 +667,8 @@ fuse-alert {
 
         /* Accent */
         &.fuse-alert-type-accent {
-
             .fuse-alert-container {
-                @apply bg-accent-100 ring-1 ring-accent-400 ring-inset;
+                @apply bg-accent-100 ring-1 ring-inset ring-accent-400;
 
                 .fuse-alert-icon {
                     @apply text-accent-600;
@@ -719,7 +684,7 @@ fuse-alert {
                 }
 
                 code {
-                    @apply text-accent-800 bg-accent-200;
+                    @apply bg-accent-200 text-accent-800;
                 }
 
                 .dark & {
@@ -743,9 +708,8 @@ fuse-alert {
 
         /* Warn */
         &.fuse-alert-type-warn {
-
             .fuse-alert-container {
-                @apply bg-warn-50 ring-1 ring-warn-400 ring-inset;
+                @apply bg-warn-50 ring-1 ring-inset ring-warn-400;
 
                 .fuse-alert-icon {
                     @apply text-warn-600;
@@ -761,7 +725,7 @@ fuse-alert {
                 }
 
                 code {
-                    @apply text-warn-800 bg-warn-200;
+                    @apply bg-warn-200 text-warn-800;
                 }
 
                 .dark & {
@@ -785,9 +749,8 @@ fuse-alert {
 
         /* Basic */
         &.fuse-alert-type-basic {
-
             .fuse-alert-container {
-                @apply bg-gray-100 ring-1 ring-gray-400 ring-inset;
+                @apply bg-gray-100 ring-1 ring-inset ring-gray-400;
 
                 .fuse-alert-icon {
                     @apply text-gray-600;
@@ -827,9 +790,8 @@ fuse-alert {
 
         /* Info */
         &.fuse-alert-type-info {
-
             .fuse-alert-container {
-                @apply bg-blue-50 ring-1 ring-blue-400 ring-inset;
+                @apply bg-blue-50 ring-1 ring-inset ring-blue-400;
 
                 .fuse-alert-icon {
                     @apply text-blue-600;
@@ -869,9 +831,8 @@ fuse-alert {
 
         /* Success */
         &.fuse-alert-type-success {
-
             .fuse-alert-container {
-                @apply bg-green-50 ring-1 ring-green-400 ring-inset;
+                @apply bg-green-50 ring-1 ring-inset ring-green-400;
 
                 .fuse-alert-icon {
                     @apply text-green-600;
@@ -911,9 +872,8 @@ fuse-alert {
 
         /* Warning */
         &.fuse-alert-type-warning {
-
             .fuse-alert-container {
-                @apply bg-amber-50 ring-1 ring-amber-400 ring-inset;
+                @apply bg-amber-50 ring-1 ring-inset ring-amber-400;
 
                 .fuse-alert-icon {
                     @apply text-amber-600;
@@ -953,9 +913,8 @@ fuse-alert {
 
         /* Error */
         &.fuse-alert-type-error {
-
             .fuse-alert-container {
-                @apply bg-red-50 ring-1 ring-red-400 ring-inset;
+                @apply bg-red-50 ring-1 ring-inset ring-red-400;
 
                 .fuse-alert-icon {
                     @apply text-red-600;
@@ -996,14 +955,12 @@ fuse-alert {
 
     /* Soft */
     &.fuse-alert-appearance-soft {
-
         .fuse-alert-container {
             border-radius: 6px;
         }
 
         /* Primary */
         &.fuse-alert-type-primary {
-
             .fuse-alert-container {
                 @apply bg-primary-50;
 
@@ -1021,7 +978,7 @@ fuse-alert {
                 }
 
                 code {
-                    @apply text-primary-800 bg-primary-200;
+                    @apply bg-primary-200 text-primary-800;
                 }
 
                 .dark & {
@@ -1045,7 +1002,6 @@ fuse-alert {
 
         /* Accent */
         &.fuse-alert-type-accent {
-
             .fuse-alert-container {
                 @apply bg-accent-100;
 
@@ -1063,7 +1019,7 @@ fuse-alert {
                 }
 
                 code {
-                    @apply text-accent-800 bg-accent-200;
+                    @apply bg-accent-200 text-accent-800;
                 }
 
                 .dark & {
@@ -1087,7 +1043,6 @@ fuse-alert {
 
         /* Warn */
         &.fuse-alert-type-warn {
-
             .fuse-alert-container {
                 @apply bg-warn-50;
 
@@ -1105,7 +1060,7 @@ fuse-alert {
                 }
 
                 code {
-                    @apply text-warn-800 bg-warn-200;
+                    @apply bg-warn-200 text-warn-800;
                 }
 
                 .dark & {
@@ -1129,7 +1084,6 @@ fuse-alert {
 
         /* Basic */
         &.fuse-alert-type-basic {
-
             .fuse-alert-container {
                 @apply bg-gray-100;
 
@@ -1171,7 +1125,6 @@ fuse-alert {
 
         /* Info */
         &.fuse-alert-type-info {
-
             .fuse-alert-container {
                 @apply bg-blue-50;
 
@@ -1213,7 +1166,6 @@ fuse-alert {
 
         /* Success */
         &.fuse-alert-type-success {
-
             .fuse-alert-container {
                 @apply bg-green-50;
 
@@ -1255,7 +1207,6 @@ fuse-alert {
 
         /* Warning */
         &.fuse-alert-type-warning {
-
             .fuse-alert-container {
                 @apply bg-amber-50;
 
@@ -1297,7 +1248,6 @@ fuse-alert {
 
         /* Error */
         &.fuse-alert-type-error {
-
             .fuse-alert-container {
                 @apply bg-red-50;
 
diff --git a/src/@fuse/components/alert/alert.component.ts b/src/@fuse/components/alert/alert.component.ts
index d5c21009..8b742df8 100644
--- a/src/@fuse/components/alert/alert.component.ts
+++ b/src/@fuse/components/alert/alert.component.ts
@@ -1,27 +1,43 @@
 import { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion';
 import { NgIf } from '@angular/common';
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, EventEmitter, HostBinding, inject, Input, OnChanges, OnDestroy, OnInit, Output, SimpleChanges, ViewEncapsulation } from '@angular/core';
+import {
+    ChangeDetectionStrategy,
+    ChangeDetectorRef,
+    Component,
+    EventEmitter,
+    HostBinding,
+    Input,
+    OnChanges,
+    OnDestroy,
+    OnInit,
+    Output,
+    SimpleChanges,
+    ViewEncapsulation,
+    inject,
+} from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { MatIconModule } from '@angular/material/icon';
 import { fuseAnimations } from '@fuse/animations';
 import { FuseAlertService } from '@fuse/components/alert/alert.service';
-import { FuseAlertAppearance, FuseAlertType } from '@fuse/components/alert/alert.types';
+import {
+    FuseAlertAppearance,
+    FuseAlertType,
+} from '@fuse/components/alert/alert.types';
 import { FuseUtilsService } from '@fuse/services/utils/utils.service';
-import { filter, Subject, takeUntil } from 'rxjs';
+import { Subject, filter, takeUntil } from 'rxjs';
 
 @Component({
-    selector       : 'fuse-alert',
-    templateUrl    : './alert.component.html',
-    styleUrls      : ['./alert.component.scss'],
-    encapsulation  : ViewEncapsulation.None,
+    selector: 'fuse-alert',
+    templateUrl: './alert.component.html',
+    styleUrls: ['./alert.component.scss'],
+    encapsulation: ViewEncapsulation.None,
     changeDetection: ChangeDetectionStrategy.OnPush,
-    animations     : fuseAnimations,
-    exportAs       : 'fuseAlert',
-    standalone     : true,
-    imports        : [NgIf, MatIconModule, MatButtonModule],
+    animations: fuseAnimations,
+    exportAs: 'fuseAlert',
+    standalone: true,
+    imports: [NgIf, MatIconModule, MatButtonModule],
 })
-export class FuseAlertComponent implements OnChanges, OnInit, OnDestroy
-{
+export class FuseAlertComponent implements OnChanges, OnInit, OnDestroy {
     /* eslint-disable @typescript-eslint/naming-convention */
     static ngAcceptInputType_dismissible: BooleanInput;
     static ngAcceptInputType_dismissed: BooleanInput;
@@ -38,7 +54,8 @@ export class FuseAlertComponent implements OnChanges, OnInit, OnDestroy
     @Input() name: string = this._fuseUtilsService.randomId();
     @Input() showIcon: boolean = true;
     @Input() type: FuseAlertType = 'primary';
-    @Output() readonly dismissedChanged: EventEmitter<boolean> = new EventEmitter<boolean>();
+    @Output() readonly dismissedChanged: EventEmitter<boolean> =
+        new EventEmitter<boolean>();
 
     private _unsubscribeAll: Subject<any> = new Subject<any>();
 
@@ -49,25 +66,24 @@ export class FuseAlertComponent implements OnChanges, OnInit, OnDestroy
     /**
      * Host binding for component classes
      */
-    @HostBinding('class') get classList(): any
-    {
+    @HostBinding('class') get classList(): any {
         /* eslint-disable @typescript-eslint/naming-convention */
         return {
-            'fuse-alert-appearance-border' : this.appearance === 'border',
-            'fuse-alert-appearance-fill'   : this.appearance === 'fill',
+            'fuse-alert-appearance-border': this.appearance === 'border',
+            'fuse-alert-appearance-fill': this.appearance === 'fill',
             'fuse-alert-appearance-outline': this.appearance === 'outline',
-            'fuse-alert-appearance-soft'   : this.appearance === 'soft',
-            'fuse-alert-dismissed'         : this.dismissed,
-            'fuse-alert-dismissible'       : this.dismissible,
-            'fuse-alert-show-icon'         : this.showIcon,
-            'fuse-alert-type-primary'      : this.type === 'primary',
-            'fuse-alert-type-accent'       : this.type === 'accent',
-            'fuse-alert-type-warn'         : this.type === 'warn',
-            'fuse-alert-type-basic'        : this.type === 'basic',
-            'fuse-alert-type-info'         : this.type === 'info',
-            'fuse-alert-type-success'      : this.type === 'success',
-            'fuse-alert-type-warning'      : this.type === 'warning',
-            'fuse-alert-type-error'        : this.type === 'error',
+            'fuse-alert-appearance-soft': this.appearance === 'soft',
+            'fuse-alert-dismissed': this.dismissed,
+            'fuse-alert-dismissible': this.dismissible,
+            'fuse-alert-show-icon': this.showIcon,
+            'fuse-alert-type-primary': this.type === 'primary',
+            'fuse-alert-type-accent': this.type === 'accent',
+            'fuse-alert-type-warn': this.type === 'warn',
+            'fuse-alert-type-basic': this.type === 'basic',
+            'fuse-alert-type-info': this.type === 'info',
+            'fuse-alert-type-success': this.type === 'success',
+            'fuse-alert-type-warning': this.type === 'warning',
+            'fuse-alert-type-error': this.type === 'error',
         };
         /* eslint-enable @typescript-eslint/naming-convention */
     }
@@ -81,46 +97,46 @@ export class FuseAlertComponent implements OnChanges, OnInit, OnDestroy
      *
      * @param changes
      */
-    ngOnChanges(changes: SimpleChanges): void
-    {
+    ngOnChanges(changes: SimpleChanges): void {
         // Dismissed
-        if ( 'dismissed' in changes )
-        {
+        if ('dismissed' in changes) {
             // Coerce the value to a boolean
-            this.dismissed = coerceBooleanProperty(changes.dismissed.currentValue);
+            this.dismissed = coerceBooleanProperty(
+                changes.dismissed.currentValue
+            );
 
             // Dismiss/show the alert
             this._toggleDismiss(this.dismissed);
         }
 
         // Dismissible
-        if ( 'dismissible' in changes )
-        {
+        if ('dismissible' in changes) {
             // Coerce the value to a boolean
-            this.dismissible = coerceBooleanProperty(changes.dismissible.currentValue);
+            this.dismissible = coerceBooleanProperty(
+                changes.dismissible.currentValue
+            );
         }
 
         // Show icon
-        if ( 'showIcon' in changes )
-        {
+        if ('showIcon' in changes) {
             // Coerce the value to a boolean
-            this.showIcon = coerceBooleanProperty(changes.showIcon.currentValue);
+            this.showIcon = coerceBooleanProperty(
+                changes.showIcon.currentValue
+            );
         }
     }
 
     /**
      * On init
      */
-    ngOnInit(): void
-    {
+    ngOnInit(): void {
         // Subscribe to the dismiss calls
         this._fuseAlertService.onDismiss
             .pipe(
-                filter(name => this.name === name),
-                takeUntil(this._unsubscribeAll),
+                filter((name) => this.name === name),
+                takeUntil(this._unsubscribeAll)
             )
-            .subscribe(() =>
-            {
+            .subscribe(() => {
                 // Dismiss the alert
                 this.dismiss();
             });
@@ -128,11 +144,10 @@ export class FuseAlertComponent implements OnChanges, OnInit, OnDestroy
         // Subscribe to the show calls
         this._fuseAlertService.onShow
             .pipe(
-                filter(name => this.name === name),
-                takeUntil(this._unsubscribeAll),
+                filter((name) => this.name === name),
+                takeUntil(this._unsubscribeAll)
             )
-            .subscribe(() =>
-            {
+            .subscribe(() => {
                 // Show the alert
                 this.show();
             });
@@ -141,8 +156,7 @@ export class FuseAlertComponent implements OnChanges, OnInit, OnDestroy
     /**
      * On destroy
      */
-    ngOnDestroy(): void
-    {
+    ngOnDestroy(): void {
         // Unsubscribe from all subscriptions
         this._unsubscribeAll.next(null);
         this._unsubscribeAll.complete();
@@ -155,11 +169,9 @@ export class FuseAlertComponent implements OnChanges, OnInit, OnDestroy
     /**
      * Dismiss the alert
      */
-    dismiss(): void
-    {
+    dismiss(): void {
         // Return if the alert is already dismissed
-        if ( this.dismissed )
-        {
+        if (this.dismissed) {
             return;
         }
 
@@ -170,11 +182,9 @@ export class FuseAlertComponent implements OnChanges, OnInit, OnDestroy
     /**
      * Show the dismissed alert
      */
-    show(): void
-    {
+    show(): void {
         // Return if the alert is already showing
-        if ( !this.dismissed )
-        {
+        if (!this.dismissed) {
             return;
         }
 
@@ -192,11 +202,9 @@ export class FuseAlertComponent implements OnChanges, OnInit, OnDestroy
      * @param dismissed
      * @private
      */
-    private _toggleDismiss(dismissed: boolean): void
-    {
+    private _toggleDismiss(dismissed: boolean): void {
         // Return if the alert is not dismissible
-        if ( !this.dismissible )
-        {
+        if (!this.dismissible) {
             return;
         }
 
diff --git a/src/@fuse/components/alert/alert.service.ts b/src/@fuse/components/alert/alert.service.ts
index 4490d9dd..bb92c3e4 100644
--- a/src/@fuse/components/alert/alert.service.ts
+++ b/src/@fuse/components/alert/alert.service.ts
@@ -1,11 +1,13 @@
 import { Injectable } from '@angular/core';
 import { Observable, ReplaySubject } from 'rxjs';
 
-@Injectable({providedIn: 'root'})
-export class FuseAlertService
-{
-    private readonly _onDismiss: ReplaySubject<string> = new ReplaySubject<string>(1);
-    private readonly _onShow: ReplaySubject<string> = new ReplaySubject<string>(1);
+@Injectable({ providedIn: 'root' })
+export class FuseAlertService {
+    private readonly _onDismiss: ReplaySubject<string> =
+        new ReplaySubject<string>(1);
+    private readonly _onShow: ReplaySubject<string> = new ReplaySubject<string>(
+        1
+    );
 
     // -----------------------------------------------------------------------------------------------------
     // @ Accessors
@@ -14,16 +16,14 @@ export class FuseAlertService
     /**
      * Getter for onDismiss
      */
-    get onDismiss(): Observable<any>
-    {
+    get onDismiss(): Observable<any> {
         return this._onDismiss.asObservable();
     }
 
     /**
      * Getter for onShow
      */
-    get onShow(): Observable<any>
-    {
+    get onShow(): Observable<any> {
         return this._onShow.asObservable();
     }
 
@@ -36,11 +36,9 @@ export class FuseAlertService
      *
      * @param name
      */
-    dismiss(name: string): void
-    {
+    dismiss(name: string): void {
         // Return if the name is not provided
-        if ( !name )
-        {
+        if (!name) {
             return;
         }
 
@@ -53,16 +51,13 @@ export class FuseAlertService
      *
      * @param name
      */
-    show(name: string): void
-    {
+    show(name: string): void {
         // Return if the name is not provided
-        if ( !name )
-        {
+        if (!name) {
             return;
         }
 
         // Execute the observable
         this._onShow.next(name);
     }
-
 }
diff --git a/src/@fuse/components/alert/alert.types.ts b/src/@fuse/components/alert/alert.types.ts
index fc3516e1..010b59f9 100644
--- a/src/@fuse/components/alert/alert.types.ts
+++ b/src/@fuse/components/alert/alert.types.ts
@@ -1,8 +1,4 @@
-export type FuseAlertAppearance =
-    | 'border'
-    | 'fill'
-    | 'outline'
-    | 'soft';
+export type FuseAlertAppearance = 'border' | 'fill' | 'outline' | 'soft';
 
 export type FuseAlertType =
     | 'primary'
diff --git a/src/@fuse/components/card/card.component.html b/src/@fuse/components/card/card.component.html
index 5728d204..76e4ff07 100644
--- a/src/@fuse/components/card/card.component.html
+++ b/src/@fuse/components/card/card.component.html
@@ -1,6 +1,5 @@
 <!-- Flippable card -->
 <ng-container *ngIf="flippable">
-
     <!-- Front -->
     <div class="fuse-card-front">
         <ng-content select="[fuseCardFront]"></ng-content>
@@ -10,21 +9,15 @@
     <div class="fuse-card-back">
         <ng-content select="[fuseCardBack]"></ng-content>
     </div>
-
 </ng-container>
 
 <!-- Normal card -->
 <ng-container *ngIf="!flippable">
-
     <!-- Content -->
     <ng-content></ng-content>
 
     <!-- Expansion -->
-    <div
-        class="fuse-card-expansion"
-        *ngIf="expanded"
-        [@expandCollapse]>
+    <div class="fuse-card-expansion" *ngIf="expanded" [@expandCollapse]>
         <ng-content select="[fuseCardExpansion]"></ng-content>
     </div>
-
 </ng-container>
diff --git a/src/@fuse/components/card/card.component.scss b/src/@fuse/components/card/card.component.scss
index 2e2719d0..7135ac4e 100644
--- a/src/@fuse/components/card/card.component.scss
+++ b/src/@fuse/components/card/card.component.scss
@@ -2,7 +2,7 @@ fuse-card {
     position: relative;
     display: flex;
     overflow: hidden;
-    @apply rounded-2xl shadow bg-card;
+    @apply bg-card rounded-2xl shadow;
 
     /* Flippable */
     &.fuse-card-flippable {
@@ -15,7 +15,6 @@ fuse-card {
         @apply shadow-none;
 
         &.fuse-card-face-back {
-
             .fuse-card-front {
                 visibility: hidden;
                 opacity: 0;
@@ -35,9 +34,12 @@ fuse-card {
             flex-direction: column;
             flex: 1 1 auto;
             z-index: 10;
-            transition: transform 0.5s ease-out 0s, visibility 0s ease-in 0.2s, opacity 0s ease-in 0.2s;
+            transition:
+                transform 0.5s ease-out 0s,
+                visibility 0s ease-in 0.2s,
+                opacity 0s ease-in 0.2s;
             backface-visibility: hidden;
-            @apply rounded-2xl shadow bg-card;
+            @apply bg-card rounded-2xl shadow;
         }
 
         .fuse-card-front {
diff --git a/src/@fuse/components/card/card.component.ts b/src/@fuse/components/card/card.component.ts
index eb920f59..9eedb4be 100644
--- a/src/@fuse/components/card/card.component.ts
+++ b/src/@fuse/components/card/card.component.ts
@@ -1,21 +1,27 @@
 import { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion';
 import { NgIf } from '@angular/common';
-import { Component, HostBinding, Input, OnChanges, SimpleChanges, ViewEncapsulation } from '@angular/core';
+import {
+    Component,
+    HostBinding,
+    Input,
+    OnChanges,
+    SimpleChanges,
+    ViewEncapsulation,
+} from '@angular/core';
 import { fuseAnimations } from '@fuse/animations';
 import { FuseCardFace } from '@fuse/components/card/card.types';
 
 @Component({
-    selector     : 'fuse-card',
-    templateUrl  : './card.component.html',
-    styleUrls    : ['./card.component.scss'],
+    selector: 'fuse-card',
+    templateUrl: './card.component.html',
+    styleUrls: ['./card.component.scss'],
     encapsulation: ViewEncapsulation.None,
-    animations   : fuseAnimations,
-    exportAs     : 'fuseCard',
-    standalone   : true,
-    imports      : [NgIf],
+    animations: fuseAnimations,
+    exportAs: 'fuseCard',
+    standalone: true,
+    imports: [NgIf],
 })
-export class FuseCardComponent implements OnChanges
-{
+export class FuseCardComponent implements OnChanges {
     /* eslint-disable @typescript-eslint/naming-convention */
     static ngAcceptInputType_expanded: BooleanInput;
     static ngAcceptInputType_flippable: BooleanInput;
@@ -32,14 +38,13 @@ export class FuseCardComponent implements OnChanges
     /**
      * Host binding for component classes
      */
-    @HostBinding('class') get classList(): any
-    {
+    @HostBinding('class') get classList(): any {
         /* eslint-disable @typescript-eslint/naming-convention */
         return {
-            'fuse-card-expanded'  : this.expanded,
-            'fuse-card-face-back' : this.flippable && this.face === 'back',
+            'fuse-card-expanded': this.expanded,
+            'fuse-card-face-back': this.flippable && this.face === 'back',
             'fuse-card-face-front': this.flippable && this.face === 'front',
-            'fuse-card-flippable' : this.flippable,
+            'fuse-card-flippable': this.flippable,
         };
         /* eslint-enable @typescript-eslint/naming-convention */
     }
@@ -53,20 +58,21 @@ export class FuseCardComponent implements OnChanges
      *
      * @param changes
      */
-    ngOnChanges(changes: SimpleChanges): void
-    {
+    ngOnChanges(changes: SimpleChanges): void {
         // Expanded
-        if ( 'expanded' in changes )
-        {
+        if ('expanded' in changes) {
             // Coerce the value to a boolean
-            this.expanded = coerceBooleanProperty(changes.expanded.currentValue);
+            this.expanded = coerceBooleanProperty(
+                changes.expanded.currentValue
+            );
         }
 
         // Flippable
-        if ( 'flippable' in changes )
-        {
+        if ('flippable' in changes) {
             // Coerce the value to a boolean
-            this.flippable = coerceBooleanProperty(changes.flippable.currentValue);
+            this.flippable = coerceBooleanProperty(
+                changes.flippable.currentValue
+            );
         }
     }
 }
diff --git a/src/@fuse/components/card/card.types.ts b/src/@fuse/components/card/card.types.ts
index d9256426..72ee87a7 100644
--- a/src/@fuse/components/card/card.types.ts
+++ b/src/@fuse/components/card/card.types.ts
@@ -1,3 +1 @@
-export type FuseCardFace =
-    | 'front'
-    | 'back';
+export type FuseCardFace = 'front' | 'back';
diff --git a/src/@fuse/components/drawer/drawer.component.scss b/src/@fuse/components/drawer/drawer.component.scss
index e10cad2a..c6c3f5aa 100644
--- a/src/@fuse/components/drawer/drawer.component.scss
+++ b/src/@fuse/components/drawer/drawer.component.scss
@@ -12,14 +12,15 @@ fuse-drawer {
     min-width: var(--fuse-drawer-width);
     max-width: var(--fuse-drawer-width);
     z-index: 300;
-    box-shadow: 0 2px 8px 0 rgba(0, 0, 0, .35);
+    box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.35);
     @apply bg-card;
 
     /* Animations */
     &.fuse-drawer-animations-enabled {
         transition-duration: 400ms;
         transition-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1);
-        transition-property: visibility, margin-left, margin-right, transform, width, max-width, min-width;
+        transition-property: visibility, margin-left, margin-right, transform,
+            width, max-width, min-width;
 
         .fuse-drawer-content {
             transition-duration: 400ms;
@@ -42,7 +43,6 @@ fuse-drawer {
 
     /* Left position */
     &.fuse-drawer-position-left {
-
         /* Side mode */
         &.fuse-drawer-mode-side {
             margin-left: calc(var(--fuse-drawer-width) * -1);
@@ -70,7 +70,6 @@ fuse-drawer {
 
     /* Right position */
     &.fuse-drawer-position-right {
-
         /* Side mode */
         &.fuse-drawer-mode-side {
             margin-right: calc(var(--fuse-drawer-width) * -1);
diff --git a/src/@fuse/components/drawer/drawer.component.ts b/src/@fuse/components/drawer/drawer.component.ts
index c972fc97..47fc05ac 100644
--- a/src/@fuse/components/drawer/drawer.component.ts
+++ b/src/@fuse/components/drawer/drawer.component.ts
@@ -1,20 +1,42 @@
-import { animate, AnimationBuilder, AnimationPlayer, style } from '@angular/animations';
+import {
+    animate,
+    AnimationBuilder,
+    AnimationPlayer,
+    style,
+} from '@angular/animations';
 import { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion';
-import { Component, ElementRef, EventEmitter, HostBinding, HostListener, inject, Input, OnChanges, OnDestroy, OnInit, Output, Renderer2, SimpleChanges, ViewEncapsulation } from '@angular/core';
+import {
+    Component,
+    ElementRef,
+    EventEmitter,
+    HostBinding,
+    HostListener,
+    inject,
+    Input,
+    OnChanges,
+    OnDestroy,
+    OnInit,
+    Output,
+    Renderer2,
+    SimpleChanges,
+    ViewEncapsulation,
+} from '@angular/core';
 import { FuseDrawerService } from '@fuse/components/drawer/drawer.service';
-import { FuseDrawerMode, FuseDrawerPosition } from '@fuse/components/drawer/drawer.types';
+import {
+    FuseDrawerMode,
+    FuseDrawerPosition,
+} from '@fuse/components/drawer/drawer.types';
 import { FuseUtilsService } from '@fuse/services/utils/utils.service';
 
 @Component({
-    selector     : 'fuse-drawer',
-    templateUrl  : './drawer.component.html',
-    styleUrls    : ['./drawer.component.scss'],
+    selector: 'fuse-drawer',
+    templateUrl: './drawer.component.html',
+    styleUrls: ['./drawer.component.scss'],
     encapsulation: ViewEncapsulation.None,
-    exportAs     : 'fuseDrawer',
-    standalone   : true,
+    exportAs: 'fuseDrawer',
+    standalone: true,
 })
-export class FuseDrawerComponent implements OnChanges, OnInit, OnDestroy
-{
+export class FuseDrawerComponent implements OnChanges, OnInit, OnDestroy {
     /* eslint-disable @typescript-eslint/naming-convention */
     static ngAcceptInputType_fixed: BooleanInput;
     static ngAcceptInputType_opened: BooleanInput;
@@ -33,10 +55,14 @@ export class FuseDrawerComponent implements OnChanges, OnInit, OnDestroy
     @Input() opened: boolean = false;
     @Input() position: FuseDrawerPosition = 'left';
     @Input() transparentOverlay: boolean = false;
-    @Output() readonly fixedChanged: EventEmitter<boolean> = new EventEmitter<boolean>();
-    @Output() readonly modeChanged: EventEmitter<FuseDrawerMode> = new EventEmitter<FuseDrawerMode>();
-    @Output() readonly openedChanged: EventEmitter<boolean> = new EventEmitter<boolean>();
-    @Output() readonly positionChanged: EventEmitter<FuseDrawerPosition> = new EventEmitter<FuseDrawerPosition>();
+    @Output() readonly fixedChanged: EventEmitter<boolean> =
+        new EventEmitter<boolean>();
+    @Output() readonly modeChanged: EventEmitter<FuseDrawerMode> =
+        new EventEmitter<FuseDrawerMode>();
+    @Output() readonly openedChanged: EventEmitter<boolean> =
+        new EventEmitter<boolean>();
+    @Output() readonly positionChanged: EventEmitter<FuseDrawerPosition> =
+        new EventEmitter<FuseDrawerPosition>();
 
     private _animationsEnabled: boolean = false;
     private readonly _handleOverlayClick = (): void => this.close();
@@ -51,15 +77,14 @@ export class FuseDrawerComponent implements OnChanges, OnInit, OnDestroy
     /**
      * Host binding for component classes
      */
-    @HostBinding('class') get classList(): any
-    {
+    @HostBinding('class') get classList(): any {
         /* eslint-disable @typescript-eslint/naming-convention */
         return {
-            'fuse-drawer-animations-enabled'         : this._animationsEnabled,
-            'fuse-drawer-fixed'                      : this.fixed,
-            'fuse-drawer-hover'                      : this._hovered,
-            [`fuse-drawer-mode-${this.mode}`]        : true,
-            'fuse-drawer-opened'                     : this.opened,
+            'fuse-drawer-animations-enabled': this._animationsEnabled,
+            'fuse-drawer-fixed': this.fixed,
+            'fuse-drawer-hover': this._hovered,
+            [`fuse-drawer-mode-${this.mode}`]: true,
+            'fuse-drawer-opened': this.opened,
             [`fuse-drawer-position-${this.position}`]: true,
         };
         /* eslint-enable @typescript-eslint/naming-convention */
@@ -68,10 +93,9 @@ export class FuseDrawerComponent implements OnChanges, OnInit, OnDestroy
     /**
      * Host binding for component inline styles
      */
-    @HostBinding('style') get styleList(): any
-    {
+    @HostBinding('style') get styleList(): any {
         return {
-            'visibility': this.opened ? 'visible' : 'hidden',
+            visibility: this.opened ? 'visible' : 'hidden',
         };
     }
 
@@ -85,8 +109,7 @@ export class FuseDrawerComponent implements OnChanges, OnInit, OnDestroy
      * @private
      */
     @HostListener('mouseenter')
-    private _onMouseenter(): void
-    {
+    private _onMouseenter(): void {
         // Enable the animations
         this._enableAnimations();
 
@@ -100,8 +123,7 @@ export class FuseDrawerComponent implements OnChanges, OnInit, OnDestroy
      * @private
      */
     @HostListener('mouseleave')
-    private _onMouseleave(): void
-    {
+    private _onMouseleave(): void {
         // Enable the animations
         this._enableAnimations();
 
@@ -118,11 +140,9 @@ export class FuseDrawerComponent implements OnChanges, OnInit, OnDestroy
      *
      * @param changes
      */
-    ngOnChanges(changes: SimpleChanges): void
-    {
+    ngOnChanges(changes: SimpleChanges): void {
         // Fixed
-        if ( 'fixed' in changes )
-        {
+        if ('fixed' in changes) {
             // Coerce the value to a boolean
             this.fixed = coerceBooleanProperty(changes.fixed.currentValue);
 
@@ -131,8 +151,7 @@ export class FuseDrawerComponent implements OnChanges, OnInit, OnDestroy
         }
 
         // Mode
-        if ( 'mode' in changes )
-        {
+        if ('mode' in changes) {
             // Get the previous and current values
             const previousMode = changes.mode.previousValue;
             const currentMode = changes.mode.currentValue;
@@ -141,18 +160,15 @@ export class FuseDrawerComponent implements OnChanges, OnInit, OnDestroy
             this._disableAnimations();
 
             // If the mode changes: 'over -> side'
-            if ( previousMode === 'over' && currentMode === 'side' )
-            {
+            if (previousMode === 'over' && currentMode === 'side') {
                 // Hide the overlay
                 this._hideOverlay();
             }
 
             // If the mode changes: 'side -> over'
-            if ( previousMode === 'side' && currentMode === 'over' )
-            {
+            if (previousMode === 'side' && currentMode === 'over') {
                 // If the drawer is opened
-                if ( this.opened )
-                {
+                if (this.opened) {
                     // Show the overlay
                     this._showOverlay();
                 }
@@ -164,15 +180,13 @@ export class FuseDrawerComponent implements OnChanges, OnInit, OnDestroy
             // Enable the animations after a delay
             // The delay must be bigger than the current transition-duration
             // to make sure nothing will be animated while the mode is changing
-            setTimeout(() =>
-            {
+            setTimeout(() => {
                 this._enableAnimations();
             }, 500);
         }
 
         // Opened
-        if ( 'opened' in changes )
-        {
+        if ('opened' in changes) {
             // Coerce the value to a boolean
             const open = coerceBooleanProperty(changes.opened.currentValue);
 
@@ -181,25 +195,24 @@ export class FuseDrawerComponent implements OnChanges, OnInit, OnDestroy
         }
 
         // Position
-        if ( 'position' in changes )
-        {
+        if ('position' in changes) {
             // Execute the observable
             this.positionChanged.next(this.position);
         }
 
         // Transparent overlay
-        if ( 'transparentOverlay' in changes )
-        {
+        if ('transparentOverlay' in changes) {
             // Coerce the value to a boolean
-            this.transparentOverlay = coerceBooleanProperty(changes.transparentOverlay.currentValue);
+            this.transparentOverlay = coerceBooleanProperty(
+                changes.transparentOverlay.currentValue
+            );
         }
     }
 
     /**
      * On init
      */
-    ngOnInit(): void
-    {
+    ngOnInit(): void {
         // Register the drawer
         this._fuseDrawerService.registerComponent(this.name, this);
     }
@@ -207,11 +220,9 @@ export class FuseDrawerComponent implements OnChanges, OnInit, OnDestroy
     /**
      * On destroy
      */
-    ngOnDestroy(): void
-    {
+    ngOnDestroy(): void {
         // Finish the animation
-        if ( this._player )
-        {
+        if (this._player) {
             this._player.finish();
         }
 
@@ -226,11 +237,9 @@ export class FuseDrawerComponent implements OnChanges, OnInit, OnDestroy
     /**
      * Open the drawer
      */
-    open(): void
-    {
+    open(): void {
         // Return if the drawer has already opened
-        if ( this.opened )
-        {
+        if (this.opened) {
             return;
         }
 
@@ -241,11 +250,9 @@ export class FuseDrawerComponent implements OnChanges, OnInit, OnDestroy
     /**
      * Close the drawer
      */
-    close(): void
-    {
+    close(): void {
         // Return if the drawer has already closed
-        if ( !this.opened )
-        {
+        if (!this.opened) {
             return;
         }
 
@@ -256,14 +263,10 @@ export class FuseDrawerComponent implements OnChanges, OnInit, OnDestroy
     /**
      * Toggle the drawer
      */
-    toggle(): void
-    {
-        if ( this.opened )
-        {
+    toggle(): void {
+        if (this.opened) {
             this.close();
-        }
-        else
-        {
+        } else {
             this.open();
         }
     }
@@ -277,11 +280,9 @@ export class FuseDrawerComponent implements OnChanges, OnInit, OnDestroy
      *
      * @private
      */
-    private _enableAnimations(): void
-    {
+    private _enableAnimations(): void {
         // Return if the animations are already enabled
-        if ( this._animationsEnabled )
-        {
+        if (this._animationsEnabled) {
             return;
         }
 
@@ -294,11 +295,9 @@ export class FuseDrawerComponent implements OnChanges, OnInit, OnDestroy
      *
      * @private
      */
-    private _disableAnimations(): void
-    {
+    private _disableAnimations(): void {
         // Return if the animations are already disabled
-        if ( !this._animationsEnabled )
-        {
+        if (!this._animationsEnabled) {
             return;
         }
 
@@ -311,8 +310,7 @@ export class FuseDrawerComponent implements OnChanges, OnInit, OnDestroy
      *
      * @private
      */
-    private _showOverlay(): void
-    {
+    private _showOverlay(): void {
         // Create the backdrop element
         this._overlay = this._renderer2.createElement('div');
 
@@ -320,25 +318,31 @@ export class FuseDrawerComponent implements OnChanges, OnInit, OnDestroy
         this._overlay.classList.add('fuse-drawer-overlay');
 
         // Add a class depending on the fixed option
-        if ( this.fixed )
-        {
+        if (this.fixed) {
             this._overlay.classList.add('fuse-drawer-overlay-fixed');
         }
 
         // Add a class depending on the transparentOverlay option
-        if ( this.transparentOverlay )
-        {
+        if (this.transparentOverlay) {
             this._overlay.classList.add('fuse-drawer-overlay-transparent');
         }
 
         // Append the backdrop to the parent of the drawer
-        this._renderer2.appendChild(this._elementRef.nativeElement.parentElement, this._overlay);
+        this._renderer2.appendChild(
+            this._elementRef.nativeElement.parentElement,
+            this._overlay
+        );
 
         // Create enter animation and attach it to the player
-        this._player = this._animationBuilder.build([
-            style({opacity: 0}),
-            animate('300ms cubic-bezier(0.25, 0.8, 0.25, 1)', style({opacity: 1})),
-        ]).create(this._overlay);
+        this._player = this._animationBuilder
+            .build([
+                style({ opacity: 0 }),
+                animate(
+                    '300ms cubic-bezier(0.25, 0.8, 0.25, 1)',
+                    style({ opacity: 1 })
+                ),
+            ])
+            .create(this._overlay);
 
         // Play the animation
         this._player.play();
@@ -352,29 +356,33 @@ export class FuseDrawerComponent implements OnChanges, OnInit, OnDestroy
      *
      * @private
      */
-    private _hideOverlay(): void
-    {
-        if ( !this._overlay )
-        {
+    private _hideOverlay(): void {
+        if (!this._overlay) {
             return;
         }
 
         // Create the leave animation and attach it to the player
-        this._player = this._animationBuilder.build([
-            animate('300ms cubic-bezier(0.25, 0.8, 0.25, 1)', style({opacity: 0})),
-        ]).create(this._overlay);
+        this._player = this._animationBuilder
+            .build([
+                animate(
+                    '300ms cubic-bezier(0.25, 0.8, 0.25, 1)',
+                    style({ opacity: 0 })
+                ),
+            ])
+            .create(this._overlay);
 
         // Play the animation
         this._player.play();
 
         // Once the animation is done...
-        this._player.onDone(() =>
-        {
+        this._player.onDone(() => {
             // If the overlay still exists...
-            if ( this._overlay )
-            {
+            if (this._overlay) {
                 // Remove the event listener
-                this._overlay.removeEventListener('click', this._handleOverlayClick);
+                this._overlay.removeEventListener(
+                    'click',
+                    this._handleOverlayClick
+                );
 
                 // Remove the overlay
                 this._overlay.parentNode.removeChild(this._overlay);
@@ -389,8 +397,7 @@ export class FuseDrawerComponent implements OnChanges, OnInit, OnDestroy
      * @param open
      * @private
      */
-    private _toggleOpened(open: boolean): void
-    {
+    private _toggleOpened(open: boolean): void {
         // Set the opened
         this.opened = open;
 
@@ -398,16 +405,13 @@ export class FuseDrawerComponent implements OnChanges, OnInit, OnDestroy
         this._enableAnimations();
 
         // If the mode is 'over'
-        if ( this.mode === 'over' )
-        {
+        if (this.mode === 'over') {
             // If the drawer opens, show the overlay
-            if ( open )
-            {
+            if (open) {
                 this._showOverlay();
             }
             // Otherwise, close the overlay
-            else
-            {
+            else {
                 this._hideOverlay();
             }
         }
diff --git a/src/@fuse/components/drawer/drawer.service.ts b/src/@fuse/components/drawer/drawer.service.ts
index d6aea4e9..305d8883 100644
--- a/src/@fuse/components/drawer/drawer.service.ts
+++ b/src/@fuse/components/drawer/drawer.service.ts
@@ -1,10 +1,12 @@
 import { Injectable } from '@angular/core';
 import { FuseDrawerComponent } from '@fuse/components/drawer/drawer.component';
 
-@Injectable({providedIn: 'root'})
-export class FuseDrawerService
-{
-    private _componentRegistry: Map<string, FuseDrawerComponent> = new Map<string, FuseDrawerComponent>();
+@Injectable({ providedIn: 'root' })
+export class FuseDrawerService {
+    private _componentRegistry: Map<string, FuseDrawerComponent> = new Map<
+        string,
+        FuseDrawerComponent
+    >();
 
     // -----------------------------------------------------------------------------------------------------
     // @ Public methods
@@ -16,8 +18,7 @@ export class FuseDrawerService
      * @param name
      * @param component
      */
-    registerComponent(name: string, component: FuseDrawerComponent): void
-    {
+    registerComponent(name: string, component: FuseDrawerComponent): void {
         this._componentRegistry.set(name, component);
     }
 
@@ -26,8 +27,7 @@ export class FuseDrawerService
      *
      * @param name
      */
-    deregisterComponent(name: string): void
-    {
+    deregisterComponent(name: string): void {
         this._componentRegistry.delete(name);
     }
 
@@ -36,8 +36,7 @@ export class FuseDrawerService
      *
      * @param name
      */
-    getComponent(name: string): FuseDrawerComponent | undefined
-    {
+    getComponent(name: string): FuseDrawerComponent | undefined {
         return this._componentRegistry.get(name);
     }
 }
diff --git a/src/@fuse/components/drawer/drawer.types.ts b/src/@fuse/components/drawer/drawer.types.ts
index 40e2ee39..a51ccb93 100644
--- a/src/@fuse/components/drawer/drawer.types.ts
+++ b/src/@fuse/components/drawer/drawer.types.ts
@@ -1,7 +1,3 @@
-export type FuseDrawerMode =
-    | 'over'
-    | 'side';
+export type FuseDrawerMode = 'over' | 'side';
 
-export type FuseDrawerPosition =
-    | 'left'
-    | 'right';
+export type FuseDrawerPosition = 'left' | 'right';
diff --git a/src/@fuse/components/fullscreen/fullscreen.component.html b/src/@fuse/components/fullscreen/fullscreen.component.html
index d8e60020..5077f63e 100644
--- a/src/@fuse/components/fullscreen/fullscreen.component.html
+++ b/src/@fuse/components/fullscreen/fullscreen.component.html
@@ -2,7 +2,8 @@
 <button
     mat-icon-button
     [matTooltip]="tooltip || 'Toggle Fullscreen'"
-    (click)="toggleFullscreen()">
+    (click)="toggleFullscreen()"
+>
     <ng-container [ngTemplateOutlet]="iconTpl || defaultIconTpl"></ng-container>
 </button>
 
diff --git a/src/@fuse/components/fullscreen/fullscreen.component.ts b/src/@fuse/components/fullscreen/fullscreen.component.ts
index fbf31e8c..bfffeda5 100644
--- a/src/@fuse/components/fullscreen/fullscreen.component.ts
+++ b/src/@fuse/components/fullscreen/fullscreen.component.ts
@@ -1,5 +1,12 @@
 import { DOCUMENT, NgTemplateOutlet } from '@angular/common';
-import { ChangeDetectionStrategy, Component, inject, Input, TemplateRef, ViewEncapsulation } from '@angular/core';
+import {
+    ChangeDetectionStrategy,
+    Component,
+    Input,
+    TemplateRef,
+    ViewEncapsulation,
+    inject,
+} from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { MatIconModule } from '@angular/material/icon';
 import { MatTooltipModule } from '@angular/material/tooltip';
@@ -11,10 +18,14 @@ import { MatTooltipModule } from '@angular/material/tooltip';
     changeDetection: ChangeDetectionStrategy.OnPush,
     exportAs: 'fuseFullscreen',
     standalone: true,
-    imports: [MatButtonModule, MatTooltipModule, NgTemplateOutlet, MatIconModule],
+    imports: [
+        MatButtonModule,
+        MatTooltipModule,
+        NgTemplateOutlet,
+        MatIconModule,
+    ],
 })
-export class FuseFullscreenComponent
-{
+export class FuseFullscreenComponent {
     private _document = inject(DOCUMENT);
 
     @Input() iconTpl: TemplateRef<any>;
@@ -27,10 +38,8 @@ export class FuseFullscreenComponent
     /**
      * Toggle the fullscreen mode
      */
-    toggleFullscreen(): void
-    {
-        if (!this._document.fullscreenEnabled)
-        {
+    toggleFullscreen(): void {
+        if (!this._document.fullscreenEnabled) {
             console.log('Fullscreen is not available in this browser.');
             return;
         }
@@ -39,17 +48,12 @@ export class FuseFullscreenComponent
         const fullScreen = this._document.fullscreenElement;
 
         // Toggle the fullscreen
-        if (fullScreen)
-        {
+        if (fullScreen) {
             this._document.exitFullscreen();
-        }
-        else
-        {
-            this._document.documentElement.requestFullscreen()
-                .catch(() =>
-                {
-                    console.error('Entering fullscreen mode failed.');
-                });
+        } else {
+            this._document.documentElement.requestFullscreen().catch(() => {
+                console.error('Entering fullscreen mode failed.');
+            });
         }
     }
 }
diff --git a/src/@fuse/components/highlight/highlight.component.html b/src/@fuse/components/highlight/highlight.component.html
index da345b9b..b2bf70cd 100644
--- a/src/@fuse/components/highlight/highlight.component.html
+++ b/src/@fuse/components/highlight/highlight.component.html
@@ -1,9 +1,8 @@
 <ng-content></ng-content>
 
-<!-- @formatter:off -->
+<!-- prettier-ignore -->
 <ng-template let-highlightedCode="highlightedCode" let-lang="lang">
 <div class="fuse-highlight fuse-highlight-code-container">
 <pre [ngClass]="'language-' + lang"><code [ngClass]="'language-' + lang" [innerHTML]="highlightedCode"></code></pre>
 </div>
 </ng-template>
-<!-- @formatter:on -->
diff --git a/src/@fuse/components/highlight/highlight.component.ts b/src/@fuse/components/highlight/highlight.component.ts
index 76143ca0..265254b1 100644
--- a/src/@fuse/components/highlight/highlight.component.ts
+++ b/src/@fuse/components/highlight/highlight.component.ts
@@ -1,20 +1,34 @@
 import { NgClass } from '@angular/common';
-import { AfterViewInit, ChangeDetectionStrategy, Component, ElementRef, EmbeddedViewRef, inject, Input, OnChanges, SecurityContext, SimpleChanges, TemplateRef, ViewChild, ViewContainerRef, ViewEncapsulation } from '@angular/core';
+import {
+    AfterViewInit,
+    ChangeDetectionStrategy,
+    Component,
+    ElementRef,
+    EmbeddedViewRef,
+    inject,
+    Input,
+    OnChanges,
+    SecurityContext,
+    SimpleChanges,
+    TemplateRef,
+    ViewChild,
+    ViewContainerRef,
+    ViewEncapsulation,
+} from '@angular/core';
 import { DomSanitizer } from '@angular/platform-browser';
 import { FuseHighlightService } from '@fuse/components/highlight/highlight.service';
 
 @Component({
-    selector       : 'textarea[fuse-highlight]',
-    templateUrl    : './highlight.component.html',
-    styleUrls      : ['./highlight.component.scss'],
-    encapsulation  : ViewEncapsulation.None,
+    selector: 'textarea[fuse-highlight]',
+    templateUrl: './highlight.component.html',
+    styleUrls: ['./highlight.component.scss'],
+    encapsulation: ViewEncapsulation.None,
     changeDetection: ChangeDetectionStrategy.OnPush,
-    exportAs       : 'fuseHighlight',
-    standalone     : true,
-    imports        : [NgClass],
+    exportAs: 'fuseHighlight',
+    standalone: true,
+    imports: [NgClass],
 })
-export class FuseHighlightComponent implements OnChanges, AfterViewInit
-{
+export class FuseHighlightComponent implements OnChanges, AfterViewInit {
     private _domSanitizer = inject(DomSanitizer);
     private _elementRef = inject(ElementRef);
     private _fuseHighlightService = inject(FuseHighlightService);
@@ -36,14 +50,11 @@ export class FuseHighlightComponent implements OnChanges, AfterViewInit
      *
      * @param changes
      */
-    ngOnChanges(changes: SimpleChanges): void
-    {
+    ngOnChanges(changes: SimpleChanges): void {
         // Code & Lang
-        if ( 'code' in changes || 'lang' in changes )
-        {
+        if ('code' in changes || 'lang' in changes) {
             // Return if the viewContainerRef is not available
-            if ( !this._viewContainerRef.length )
-            {
+            if (!this._viewContainerRef.length) {
                 return;
             }
 
@@ -55,18 +66,15 @@ export class FuseHighlightComponent implements OnChanges, AfterViewInit
     /**
      * After view init
      */
-    ngAfterViewInit(): void
-    {
+    ngAfterViewInit(): void {
         // Return if there is no language set
-        if ( !this.lang )
-        {
+        if (!this.lang) {
             return;
         }
 
         // If there is no code input, get the code from
         // the textarea
-        if ( !this.code )
-        {
+        if (!this.code) {
             // Get the code
             this.code = this._elementRef.nativeElement.value;
         }
@@ -84,41 +92,42 @@ export class FuseHighlightComponent implements OnChanges, AfterViewInit
      *
      * @private
      */
-    private _highlightAndInsert(): void
-    {
+    private _highlightAndInsert(): void {
         // Return if the template reference is not available
-        if ( !this.templateRef )
-        {
+        if (!this.templateRef) {
             return;
         }
 
         // Return if the code or language is not defined
-        if ( !this.code || !this.lang )
-        {
+        if (!this.code || !this.lang) {
             return;
         }
 
         // Destroy the component if there is already one
-        if ( this._viewRef )
-        {
+        if (this._viewRef) {
             this._viewRef.destroy();
             this._viewRef = null;
         }
 
         // Highlight and sanitize the code just in case
-        this.highlightedCode = this._domSanitizer.sanitize(SecurityContext.HTML, this._fuseHighlightService.highlight(this.code, this.lang));
+        this.highlightedCode = this._domSanitizer.sanitize(
+            SecurityContext.HTML,
+            this._fuseHighlightService.highlight(this.code, this.lang)
+        );
 
         // Return if the highlighted code is null
-        if ( this.highlightedCode === null )
-        {
+        if (this.highlightedCode === null) {
             return;
         }
 
         // Render and insert the template
-        this._viewRef = this._viewContainerRef.createEmbeddedView(this.templateRef, {
-            highlightedCode: this.highlightedCode,
-            lang           : this.lang,
-        });
+        this._viewRef = this._viewContainerRef.createEmbeddedView(
+            this.templateRef,
+            {
+                highlightedCode: this.highlightedCode,
+                lang: this.lang,
+            }
+        );
 
         // Detect the changes
         this._viewRef.detectChanges();
diff --git a/src/@fuse/components/highlight/highlight.service.ts b/src/@fuse/components/highlight/highlight.service.ts
index f2a86e13..61b08dc7 100644
--- a/src/@fuse/components/highlight/highlight.service.ts
+++ b/src/@fuse/components/highlight/highlight.service.ts
@@ -1,9 +1,8 @@
 import { Injectable } from '@angular/core';
 import hljs from 'highlight.js';
 
-@Injectable({providedIn: 'root'})
-export class FuseHighlightService
-{
+@Injectable({ providedIn: 'root' })
+export class FuseHighlightService {
     // -----------------------------------------------------------------------------------------------------
     // @ Public methods
     // -----------------------------------------------------------------------------------------------------
@@ -11,13 +10,12 @@ export class FuseHighlightService
     /**
      * Highlight
      */
-    highlight(code: string, language: string): string
-    {
+    highlight(code: string, language: string): string {
         // Format the code
         code = this._format(code);
 
         // Highlight and return the code
-        return hljs.highlight(code, {language}).value;
+        return hljs.highlight(code, { language }).value;
     }
 
     // -----------------------------------------------------------------------------------------------------
@@ -32,32 +30,28 @@ export class FuseHighlightService
      * @param code
      * @private
      */
-    private _format(code: string): string
-    {
+    private _format(code: string): string {
         let indentation = 0;
 
         // Split the code into lines and store the lines
         const lines = code.split('\n');
 
         // Trim the empty lines around the code block
-        while ( lines.length && lines[0].trim() === '' )
-        {
+        while (lines.length && lines[0].trim() === '') {
             lines.shift();
         }
 
-        while ( lines.length && lines[lines.length - 1].trim() === '' )
-        {
+        while (lines.length && lines[lines.length - 1].trim() === '') {
             lines.pop();
         }
 
         // Iterate through the lines
-        lines.filter(line => line.length)
-            .forEach((line, index) =>
-            {
+        lines
+            .filter((line) => line.length)
+            .forEach((line, index) => {
                 // Always get the indentation of the first line so we can
                 // have something to compare with
-                if ( index === 0 )
-                {
+                if (index === 0) {
                     indentation = line.search(/\S|$/);
                     return;
                 }
@@ -68,6 +62,6 @@ export class FuseHighlightService
 
         // Iterate through the lines one more time, remove the extra
         // indentation, join them together and return it
-        return lines.map(line => line.substring(indentation)).join('\n');
+        return lines.map((line) => line.substring(indentation)).join('\n');
     }
 }
diff --git a/src/@fuse/components/loading-bar/loading-bar.component.html b/src/@fuse/components/loading-bar/loading-bar.component.html
index 3f884fef..0ecb7763 100644
--- a/src/@fuse/components/loading-bar/loading-bar.component.html
+++ b/src/@fuse/components/loading-bar/loading-bar.component.html
@@ -1,5 +1,3 @@
 <ng-container *ngIf="show">
-    <mat-progress-bar
-        [mode]="mode"
-        [value]="progress"></mat-progress-bar>
+    <mat-progress-bar [mode]="mode" [value]="progress"></mat-progress-bar>
 </ng-container>
diff --git a/src/@fuse/components/loading-bar/loading-bar.component.ts b/src/@fuse/components/loading-bar/loading-bar.component.ts
index 220925d3..59a16159 100644
--- a/src/@fuse/components/loading-bar/loading-bar.component.ts
+++ b/src/@fuse/components/loading-bar/loading-bar.component.ts
@@ -1,21 +1,29 @@
 import { coerceBooleanProperty } from '@angular/cdk/coercion';
 import { NgIf } from '@angular/common';
-import { Component, inject, Input, OnChanges, OnDestroy, OnInit, SimpleChanges, ViewEncapsulation } from '@angular/core';
+import {
+    Component,
+    inject,
+    Input,
+    OnChanges,
+    OnDestroy,
+    OnInit,
+    SimpleChanges,
+    ViewEncapsulation,
+} from '@angular/core';
 import { MatProgressBarModule } from '@angular/material/progress-bar';
 import { FuseLoadingService } from '@fuse/services/loading';
 import { Subject, takeUntil } from 'rxjs';
 
 @Component({
-    selector     : 'fuse-loading-bar',
-    templateUrl  : './loading-bar.component.html',
-    styleUrls    : ['./loading-bar.component.scss'],
+    selector: 'fuse-loading-bar',
+    templateUrl: './loading-bar.component.html',
+    styleUrls: ['./loading-bar.component.scss'],
     encapsulation: ViewEncapsulation.None,
-    exportAs     : 'fuseLoadingBar',
-    standalone   : true,
-    imports      : [NgIf, MatProgressBarModule],
+    exportAs: 'fuseLoadingBar',
+    standalone: true,
+    imports: [NgIf, MatProgressBarModule],
 })
-export class FuseLoadingBarComponent implements OnChanges, OnInit, OnDestroy
-{
+export class FuseLoadingBarComponent implements OnChanges, OnInit, OnDestroy {
     private _fuseLoadingService = inject(FuseLoadingService);
 
     @Input() autoMode: boolean = true;
@@ -33,50 +41,44 @@ export class FuseLoadingBarComponent implements OnChanges, OnInit, OnDestroy
      *
      * @param changes
      */
-    ngOnChanges(changes: SimpleChanges): void
-    {
+    ngOnChanges(changes: SimpleChanges): void {
         // Auto mode
-        if ( 'autoMode' in changes )
-        {
+        if ('autoMode' in changes) {
             // Set the auto mode in the service
-            this._fuseLoadingService.setAutoMode(coerceBooleanProperty(changes.autoMode.currentValue));
+            this._fuseLoadingService.setAutoMode(
+                coerceBooleanProperty(changes.autoMode.currentValue)
+            );
         }
     }
 
     /**
      * On init
      */
-    ngOnInit(): void
-    {
+    ngOnInit(): void {
         // Subscribe to the service
         this._fuseLoadingService.mode$
             .pipe(takeUntil(this._unsubscribeAll))
-            .subscribe((value) =>
-            {
+            .subscribe((value) => {
                 this.mode = value;
             });
 
         this._fuseLoadingService.progress$
             .pipe(takeUntil(this._unsubscribeAll))
-            .subscribe((value) =>
-            {
+            .subscribe((value) => {
                 this.progress = value;
             });
 
         this._fuseLoadingService.show$
             .pipe(takeUntil(this._unsubscribeAll))
-            .subscribe((value) =>
-            {
+            .subscribe((value) => {
                 this.show = value;
             });
-
     }
 
     /**
      * On destroy
      */
-    ngOnDestroy(): void
-    {
+    ngOnDestroy(): void {
         // Unsubscribe from all subscriptions
         this._unsubscribeAll.next(null);
         this._unsubscribeAll.complete();
diff --git a/src/@fuse/components/masonry/masonry.component.html b/src/@fuse/components/masonry/masonry.component.html
index 4b0a6719..5bd57310 100644
--- a/src/@fuse/components/masonry/masonry.component.html
+++ b/src/@fuse/components/masonry/masonry.component.html
@@ -1,3 +1,8 @@
 <div class="flex">
-    <ng-container *ngTemplateOutlet="columnsTemplate; context: { $implicit: distributedColumns }"></ng-container>
+    <ng-container
+        *ngTemplateOutlet="
+            columnsTemplate;
+            context: { $implicit: distributedColumns }
+        "
+    ></ng-container>
 </div>
diff --git a/src/@fuse/components/masonry/masonry.component.ts b/src/@fuse/components/masonry/masonry.component.ts
index f61b0bba..cb719e52 100644
--- a/src/@fuse/components/masonry/masonry.component.ts
+++ b/src/@fuse/components/masonry/masonry.component.ts
@@ -1,18 +1,25 @@
 import { NgTemplateOutlet } from '@angular/common';
-import { AfterViewInit, Component, Input, OnChanges, SimpleChanges, TemplateRef, ViewEncapsulation } from '@angular/core';
+import {
+    AfterViewInit,
+    Component,
+    Input,
+    OnChanges,
+    SimpleChanges,
+    TemplateRef,
+    ViewEncapsulation,
+} from '@angular/core';
 import { fuseAnimations } from '@fuse/animations';
 
 @Component({
-    selector     : 'fuse-masonry',
-    templateUrl  : './masonry.component.html',
+    selector: 'fuse-masonry',
+    templateUrl: './masonry.component.html',
     encapsulation: ViewEncapsulation.None,
-    animations   : fuseAnimations,
-    exportAs     : 'fuseMasonry',
-    standalone   : true,
-    imports      : [NgTemplateOutlet],
+    animations: fuseAnimations,
+    exportAs: 'fuseMasonry',
+    standalone: true,
+    imports: [NgTemplateOutlet],
 })
-export class FuseMasonryComponent implements OnChanges, AfterViewInit
-{
+export class FuseMasonryComponent implements OnChanges, AfterViewInit {
     @Input() columnsTemplate: TemplateRef<any>;
     @Input() columns: number;
     @Input() items: any[] = [];
@@ -27,18 +34,15 @@ export class FuseMasonryComponent implements OnChanges, AfterViewInit
      *
      * @param changes
      */
-    ngOnChanges(changes: SimpleChanges): void
-    {
+    ngOnChanges(changes: SimpleChanges): void {
         // Columns
-        if ( 'columns' in changes )
-        {
+        if ('columns' in changes) {
             // Distribute the items
             this._distributeItems();
         }
 
         // Items
-        if ( 'items' in changes )
-        {
+        if ('items' in changes) {
             // Distribute the items
             this._distributeItems();
         }
@@ -47,8 +51,7 @@ export class FuseMasonryComponent implements OnChanges, AfterViewInit
     /**
      * After view init
      */
-    ngAfterViewInit(): void
-    {
+    ngAfterViewInit(): void {
         // Distribute the items for the first time
         this._distributeItems();
     }
@@ -60,21 +63,20 @@ export class FuseMasonryComponent implements OnChanges, AfterViewInit
     /**
      * Distribute items into columns
      */
-    private _distributeItems(): void
-    {
+    private _distributeItems(): void {
         // Return an empty array if there are no items
-        if ( this.items.length === 0 )
-        {
+        if (this.items.length === 0) {
             this.distributedColumns = [];
             return;
         }
 
         // Prepare the distributed columns array
-        this.distributedColumns = Array.from(Array(this.columns), item => ({items: []}));
+        this.distributedColumns = Array.from(Array(this.columns), (item) => ({
+            items: [],
+        }));
 
         // Distribute the items to columns
-        for ( let i = 0; i < this.items.length; i++ )
-        {
+        for (let i = 0; i < this.items.length; i++) {
             this.distributedColumns[i % this.columns].items.push(this.items[i]);
         }
     }
diff --git a/src/@fuse/components/navigation/horizontal/components/basic/basic.component.html b/src/@fuse/components/navigation/horizontal/components/basic/basic.component.html
index 2bf424d9..bc7a1dc6 100644
--- a/src/@fuse/components/navigation/horizontal/components/basic/basic.component.html
+++ b/src/@fuse/components/navigation/horizontal/components/basic/basic.component.html
@@ -2,13 +2,19 @@
 <div
     class="fuse-horizontal-navigation-item-wrapper"
     [class.fuse-horizontal-navigation-item-has-subtitle]="!!item.subtitle"
-    [ngClass]="item.classes?.wrapper">
-
+    [ngClass]="item.classes?.wrapper"
+>
     <!-- Item with an internal link -->
-    <ng-container *ngIf="item.link && !item.externalLink && !item.function && !item.disabled">
+    <ng-container
+        *ngIf="
+            item.link && !item.externalLink && !item.function && !item.disabled
+        "
+    >
         <div
             class="fuse-horizontal-navigation-item"
-            [ngClass]="{'fuse-horizontal-navigation-item-active-forced': item.active}"
+            [ngClass]="{
+                'fuse-horizontal-navigation-item-active-forced': item.active
+            }"
             [routerLink]="[item.link]"
             [fragment]="item.fragment ?? null"
             [preserveFragment]="item.preserveFragment ?? false"
@@ -16,18 +22,24 @@
             [queryParamsHandling]="item.queryParamsHandling ?? null"
             [routerLinkActive]="'fuse-horizontal-navigation-item-active'"
             [routerLinkActiveOptions]="isActiveMatchOptions"
-            [matTooltip]="item.tooltip || ''">
+            [matTooltip]="item.tooltip || ''"
+        >
             <ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
         </div>
     </ng-container>
 
     <!-- Item with an external link -->
-    <ng-container *ngIf="item.link && item.externalLink && !item.function && !item.disabled">
+    <ng-container
+        *ngIf="
+            item.link && item.externalLink && !item.function && !item.disabled
+        "
+    >
         <a
             class="fuse-horizontal-navigation-item"
             [href]="item.link"
             [target]="item.target || '_self'"
-            [matTooltip]="item.tooltip || ''">
+            [matTooltip]="item.tooltip || ''"
+        >
             <ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
         </a>
     </ng-container>
@@ -36,18 +48,27 @@
     <ng-container *ngIf="!item.link && item.function && !item.disabled">
         <div
             class="fuse-horizontal-navigation-item"
-            [ngClass]="{'fuse-horizontal-navigation-item-active-forced': item.active}"
+            [ngClass]="{
+                'fuse-horizontal-navigation-item-active-forced': item.active
+            }"
             [matTooltip]="item.tooltip || ''"
-            (click)="item.function(item)">
+            (click)="item.function(item)"
+        >
             <ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
         </div>
     </ng-container>
 
     <!-- Item with an internal link and function -->
-    <ng-container *ngIf="item.link && !item.externalLink && item.function && !item.disabled">
+    <ng-container
+        *ngIf="
+            item.link && !item.externalLink && item.function && !item.disabled
+        "
+    >
         <div
             class="fuse-horizontal-navigation-item"
-            [ngClass]="{'fuse-horizontal-navigation-item-active-forced': item.active}"
+            [ngClass]="{
+                'fuse-horizontal-navigation-item-active-forced': item.active
+            }"
             [routerLink]="[item.link]"
             [fragment]="item.fragment ?? null"
             [preserveFragment]="item.preserveFragment ?? false"
@@ -56,20 +77,26 @@
             [routerLinkActive]="'fuse-horizontal-navigation-item-active'"
             [routerLinkActiveOptions]="isActiveMatchOptions"
             [matTooltip]="item.tooltip || ''"
-            (click)="item.function(item)">
+            (click)="item.function(item)"
+        >
             <ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
         </div>
     </ng-container>
 
     <!-- Item with an external link and function -->
-    <ng-container *ngIf="item.link && item.externalLink && item.function && !item.disabled">
+    <ng-container
+        *ngIf="
+            item.link && item.externalLink && item.function && !item.disabled
+        "
+    >
         <a
             class="fuse-horizontal-navigation-item"
             [href]="item.link"
             [target]="item.target || '_self'"
             [matTooltip]="item.tooltip || ''"
             (click)="item.function(item)"
-            mat-menu-item>
+            mat-menu-item
+        >
             <ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
         </a>
     </ng-container>
@@ -78,43 +105,47 @@
     <ng-container *ngIf="!item.link && !item.function && !item.disabled">
         <div
             class="fuse-horizontal-navigation-item"
-            [ngClass]="{'fuse-horizontal-navigation-item-active-forced': item.active}"
-            [matTooltip]="item.tooltip || ''">
+            [ngClass]="{
+                'fuse-horizontal-navigation-item-active-forced': item.active
+            }"
+            [matTooltip]="item.tooltip || ''"
+        >
             <ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
         </div>
     </ng-container>
 
     <!-- Item is disabled -->
     <ng-container *ngIf="item.disabled">
-        <div class="fuse-horizontal-navigation-item fuse-horizontal-navigation-item-disabled">
+        <div
+            class="fuse-horizontal-navigation-item fuse-horizontal-navigation-item-disabled"
+        >
             <ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
         </div>
     </ng-container>
-
 </div>
 
 <!-- Item template -->
 <ng-template #itemTemplate>
-
     <!-- Icon -->
     <ng-container *ngIf="item.icon">
         <mat-icon
             class="fuse-horizontal-navigation-item-icon"
             [ngClass]="item.classes?.icon"
-            [svgIcon]="item.icon"></mat-icon>
+            [svgIcon]="item.icon"
+        ></mat-icon>
     </ng-container>
 
     <!-- Title & Subtitle -->
     <div class="fuse-horizontal-navigation-item-title-wrapper">
         <div class="fuse-horizontal-navigation-item-title">
             <span [ngClass]="item.classes?.title">
-                {{item.title}}
+                {{ item.title }}
             </span>
         </div>
         <ng-container *ngIf="item.subtitle">
             <div class="fuse-horizontal-navigation-item-subtitle text-hint">
                 <span [ngClass]="item.classes?.subtitle">
-                    {{item.subtitle}}
+                    {{ item.subtitle }}
                 </span>
             </div>
         </ng-container>
@@ -125,10 +156,10 @@
         <div class="fuse-horizontal-navigation-item-badge">
             <div
                 class="fuse-horizontal-navigation-item-badge-content"
-                [ngClass]="item.badge.classes">
-                {{item.badge.title}}
+                [ngClass]="item.badge.classes"
+            >
+                {{ item.badge.title }}
             </div>
         </div>
     </ng-container>
-
 </ng-template>
diff --git a/src/@fuse/components/navigation/horizontal/components/basic/basic.component.ts b/src/@fuse/components/navigation/horizontal/components/basic/basic.component.ts
index 5879692d..0aed519c 100644
--- a/src/@fuse/components/navigation/horizontal/components/basic/basic.component.ts
+++ b/src/@fuse/components/navigation/horizontal/components/basic/basic.component.ts
@@ -1,9 +1,21 @@
 import { NgClass, NgIf, NgTemplateOutlet } from '@angular/common';
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, inject, Input, OnDestroy, OnInit } from '@angular/core';
+import {
+    ChangeDetectionStrategy,
+    ChangeDetectorRef,
+    Component,
+    Input,
+    OnDestroy,
+    OnInit,
+    inject,
+} from '@angular/core';
 import { MatIconModule } from '@angular/material/icon';
 import { MatMenuModule } from '@angular/material/menu';
 import { MatTooltipModule } from '@angular/material/tooltip';
-import { IsActiveMatchOptions, RouterLink, RouterLinkActive } from '@angular/router';
+import {
+    IsActiveMatchOptions,
+    RouterLink,
+    RouterLinkActive,
+} from '@angular/router';
 import { FuseHorizontalNavigationComponent } from '@fuse/components/navigation/horizontal/horizontal.component';
 import { FuseNavigationService } from '@fuse/components/navigation/navigation.service';
 import { FuseNavigationItem } from '@fuse/components/navigation/navigation.types';
@@ -11,13 +23,23 @@ import { FuseUtilsService } from '@fuse/services/utils/utils.service';
 import { Subject, takeUntil } from 'rxjs';
 
 @Component({
-    selector       : 'fuse-horizontal-navigation-basic-item',
-    templateUrl    : './basic.component.html',
+    selector: 'fuse-horizontal-navigation-basic-item',
+    templateUrl: './basic.component.html',
     changeDetection: ChangeDetectionStrategy.OnPush,
-    standalone     : true,
-    imports        : [NgClass, NgIf, RouterLink, RouterLinkActive, MatTooltipModule, NgTemplateOutlet, MatMenuModule, MatIconModule],
+    standalone: true,
+    imports: [
+        NgClass,
+        NgIf,
+        RouterLink,
+        RouterLinkActive,
+        MatTooltipModule,
+        NgTemplateOutlet,
+        MatMenuModule,
+        MatIconModule,
+    ],
 })
-export class FuseHorizontalNavigationBasicItemComponent implements OnInit, OnDestroy
+export class FuseHorizontalNavigationBasicItemComponent
+    implements OnInit, OnDestroy
 {
     private _changeDetectorRef = inject(ChangeDetectorRef);
     private _fuseNavigationService = inject(FuseNavigationService);
@@ -30,7 +52,8 @@ export class FuseHorizontalNavigationBasicItemComponent implements OnInit, OnDes
     // We are not assigning the item.isActiveMatchOptions directly to the
     // [routerLinkActiveOptions] because if it's "undefined" initially, the router
     // will throw an error and stop working.
-    isActiveMatchOptions: IsActiveMatchOptions = this._fuseUtilsService.subsetMatchOptions;
+    isActiveMatchOptions: IsActiveMatchOptions =
+        this._fuseUtilsService.subsetMatchOptions;
 
     private _fuseHorizontalNavigationComponent: FuseHorizontalNavigationComponent;
     private _unsubscribeAll: Subject<any> = new Subject<any>();
@@ -42,8 +65,7 @@ export class FuseHorizontalNavigationBasicItemComponent implements OnInit, OnDes
     /**
      * On init
      */
-    ngOnInit(): void
-    {
+    ngOnInit(): void {
         // Set the "isActiveMatchOptions" either from item's
         // "isActiveMatchOptions" or the equivalent form of
         // item's "exactMatch" option
@@ -53,26 +75,25 @@ export class FuseHorizontalNavigationBasicItemComponent implements OnInit, OnDes
                 : this._fuseUtilsService.subsetMatchOptions;
 
         // Get the parent navigation component
-        this._fuseHorizontalNavigationComponent = this._fuseNavigationService.getComponent(this.name);
+        this._fuseHorizontalNavigationComponent =
+            this._fuseNavigationService.getComponent(this.name);
 
         // Mark for check
         this._changeDetectorRef.markForCheck();
 
         // Subscribe to onRefreshed on the navigation component
-        this._fuseHorizontalNavigationComponent.onRefreshed.pipe(
-            takeUntil(this._unsubscribeAll),
-        ).subscribe(() =>
-        {
-            // Mark for check
-            this._changeDetectorRef.markForCheck();
-        });
+        this._fuseHorizontalNavigationComponent.onRefreshed
+            .pipe(takeUntil(this._unsubscribeAll))
+            .subscribe(() => {
+                // Mark for check
+                this._changeDetectorRef.markForCheck();
+            });
     }
 
     /**
      * On destroy
      */
-    ngOnDestroy(): void
-    {
+    ngOnDestroy(): void {
         // Unsubscribe from all subscriptions
         this._unsubscribeAll.next(null);
         this._unsubscribeAll.complete();
diff --git a/src/@fuse/components/navigation/horizontal/components/branch/branch.component.html b/src/@fuse/components/navigation/horizontal/components/branch/branch.component.html
index 87aafa1e..39734024 100644
--- a/src/@fuse/components/navigation/horizontal/components/branch/branch.component.html
+++ b/src/@fuse/components/navigation/horizontal/components/branch/branch.component.html
@@ -1,105 +1,123 @@
 <ng-container *ngIf="!child">
     <div
-        [ngClass]="{'fuse-horizontal-navigation-menu-active': trigger.menuOpen,
-                 'fuse-horizontal-navigation-menu-active-forced': item.active}"
+        [ngClass]="{
+            'fuse-horizontal-navigation-menu-active': trigger.menuOpen,
+            'fuse-horizontal-navigation-menu-active-forced': item.active
+        }"
         [matMenuTriggerFor]="matMenu"
         (onMenuOpen)="triggerChangeDetection()"
         (onMenuClose)="triggerChangeDetection()"
-        #trigger="matMenuTrigger">
-        <ng-container *ngTemplateOutlet="itemTemplate; context: {$implicit: item}"></ng-container>
+        #trigger="matMenuTrigger"
+    >
+        <ng-container
+            *ngTemplateOutlet="itemTemplate; context: { $implicit: item }"
+        ></ng-container>
     </div>
 </ng-container>
 
 <mat-menu
     class="fuse-horizontal-navigation-menu-panel"
     [overlapTrigger]="false"
-    #matMenu="matMenu">
-
+    #matMenu="matMenu"
+>
     <ng-container *ngFor="let item of item.children; trackBy: trackByFn">
-
         <!-- Skip the hidden items -->
-        <ng-container *ngIf="(item.hidden && !item.hidden(item)) || !item.hidden">
-
+        <ng-container
+            *ngIf="(item.hidden && !item.hidden(item)) || !item.hidden"
+        >
             <!-- Basic -->
             <ng-container *ngIf="item.type === 'basic'">
                 <div
                     class="fuse-horizontal-navigation-menu-item"
                     [disabled]="item.disabled"
-                    mat-menu-item>
+                    mat-menu-item
+                >
                     <fuse-horizontal-navigation-basic-item
                         [item]="item"
-                        [name]="name"></fuse-horizontal-navigation-basic-item>
+                        [name]="name"
+                    ></fuse-horizontal-navigation-basic-item>
                 </div>
             </ng-container>
 
             <!-- Branch: aside, collapsable, group -->
-            <ng-container *ngIf="item.type === 'aside' || item.type === 'collapsable' || item.type === 'group'">
+            <ng-container
+                *ngIf="
+                    item.type === 'aside' ||
+                    item.type === 'collapsable' ||
+                    item.type === 'group'
+                "
+            >
                 <div
                     class="fuse-horizontal-navigation-menu-item"
                     [disabled]="item.disabled"
                     [matMenuTriggerFor]="branch.matMenu"
-                    mat-menu-item>
-                    <ng-container *ngTemplateOutlet="itemTemplate; context: {$implicit: item}"></ng-container>
+                    mat-menu-item
+                >
+                    <ng-container
+                        *ngTemplateOutlet="
+                            itemTemplate;
+                            context: { $implicit: item }
+                        "
+                    ></ng-container>
                     <fuse-horizontal-navigation-branch-item
                         [child]="true"
                         [item]="item"
                         [name]="name"
-                        #branch></fuse-horizontal-navigation-branch-item>
+                        #branch
+                    ></fuse-horizontal-navigation-branch-item>
                 </div>
             </ng-container>
 
             <!-- Divider -->
             <ng-container *ngIf="item.type === 'divider'">
-                <div
-                    class="fuse-horizontal-navigation-menu-item"
-                    mat-menu-item>
+                <div class="fuse-horizontal-navigation-menu-item" mat-menu-item>
                     <fuse-horizontal-navigation-divider-item
                         [item]="item"
-                        [name]="name"></fuse-horizontal-navigation-divider-item>
+                        [name]="name"
+                    ></fuse-horizontal-navigation-divider-item>
                 </div>
             </ng-container>
-
         </ng-container>
-
     </ng-container>
-
 </mat-menu>
 
 <!-- Item template -->
-<ng-template
-    let-item
-    #itemTemplate>
-
+<ng-template let-item #itemTemplate>
     <div
         class="fuse-horizontal-navigation-item-wrapper"
         [class.fuse-horizontal-navigation-item-has-subtitle]="!!item.subtitle"
-        [ngClass]="item.classes?.wrapper">
-
+        [ngClass]="item.classes?.wrapper"
+    >
         <div
             class="fuse-horizontal-navigation-item"
-            [ngClass]="{'fuse-horizontal-navigation-item-disabled': item.disabled,
-                         'fuse-horizontal-navigation-item-active-forced': item.active}"
-            [matTooltip]="item.tooltip || ''">
-
+            [ngClass]="{
+                'fuse-horizontal-navigation-item-disabled': item.disabled,
+                'fuse-horizontal-navigation-item-active-forced': item.active
+            }"
+            [matTooltip]="item.tooltip || ''"
+        >
             <!-- Icon -->
             <ng-container *ngIf="item.icon">
                 <mat-icon
                     class="fuse-horizontal-navigation-item-icon"
                     [ngClass]="item.classes?.icon"
-                    [svgIcon]="item.icon"></mat-icon>
+                    [svgIcon]="item.icon"
+                ></mat-icon>
             </ng-container>
 
             <!-- Title & Subtitle -->
             <div class="fuse-horizontal-navigation-item-title-wrapper">
                 <div class="fuse-horizontal-navigation-item-title">
                     <span [ngClass]="item.classes?.title">
-                        {{item.title}}
+                        {{ item.title }}
                     </span>
                 </div>
                 <ng-container *ngIf="item.subtitle">
-                    <div class="fuse-horizontal-navigation-item-subtitle text-hint">
+                    <div
+                        class="fuse-horizontal-navigation-item-subtitle text-hint"
+                    >
                         <span [ngClass]="item.classes?.subtitle">
-                            {{item.subtitle}}
+                            {{ item.subtitle }}
                         </span>
                     </div>
                 </ng-container>
@@ -110,12 +128,12 @@
                 <div class="fuse-horizontal-navigation-item-badge">
                     <div
                         class="fuse-horizontal-navigation-item-badge-content"
-                        [ngClass]="item.badge.classes">
-                        {{item.badge.title}}
+                        [ngClass]="item.badge.classes"
+                    >
+                        {{ item.badge.title }}
                     </div>
                 </div>
             </ng-container>
         </div>
     </div>
-
 </ng-template>
diff --git a/src/@fuse/components/navigation/horizontal/components/branch/branch.component.ts b/src/@fuse/components/navigation/horizontal/components/branch/branch.component.ts
index a696b832..8c4be74b 100644
--- a/src/@fuse/components/navigation/horizontal/components/branch/branch.component.ts
+++ b/src/@fuse/components/navigation/horizontal/components/branch/branch.component.ts
@@ -1,6 +1,16 @@
 import { BooleanInput } from '@angular/cdk/coercion';
 import { NgClass, NgFor, NgIf, NgTemplateOutlet } from '@angular/common';
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, forwardRef, inject, Input, OnDestroy, OnInit, ViewChild } from '@angular/core';
+import {
+    ChangeDetectionStrategy,
+    ChangeDetectorRef,
+    Component,
+    Input,
+    OnDestroy,
+    OnInit,
+    ViewChild,
+    forwardRef,
+    inject,
+} from '@angular/core';
 import { MatIconModule } from '@angular/material/icon';
 import { MatMenu, MatMenuModule } from '@angular/material/menu';
 import { MatTooltipModule } from '@angular/material/tooltip';
@@ -12,13 +22,25 @@ import { FuseNavigationItem } from '@fuse/components/navigation/navigation.types
 import { Subject, takeUntil } from 'rxjs';
 
 @Component({
-    selector       : 'fuse-horizontal-navigation-branch-item',
-    templateUrl    : './branch.component.html',
+    selector: 'fuse-horizontal-navigation-branch-item',
+    templateUrl: './branch.component.html',
     changeDetection: ChangeDetectionStrategy.OnPush,
-    standalone     : true,
-    imports        : [NgIf, NgClass, MatMenuModule, NgTemplateOutlet, NgFor, FuseHorizontalNavigationBasicItemComponent, forwardRef(() => FuseHorizontalNavigationBranchItemComponent), FuseHorizontalNavigationDividerItemComponent, MatTooltipModule, MatIconModule],
+    standalone: true,
+    imports: [
+        NgIf,
+        NgClass,
+        MatMenuModule,
+        NgTemplateOutlet,
+        NgFor,
+        FuseHorizontalNavigationBasicItemComponent,
+        forwardRef(() => FuseHorizontalNavigationBranchItemComponent),
+        FuseHorizontalNavigationDividerItemComponent,
+        MatTooltipModule,
+        MatIconModule,
+    ],
 })
-export class FuseHorizontalNavigationBranchItemComponent implements OnInit, OnDestroy
+export class FuseHorizontalNavigationBranchItemComponent
+    implements OnInit, OnDestroy
 {
     /* eslint-disable @typescript-eslint/naming-convention */
     static ngAcceptInputType_child: BooleanInput;
@@ -30,7 +52,7 @@ export class FuseHorizontalNavigationBranchItemComponent implements OnInit, OnDe
     @Input() child: boolean = false;
     @Input() item: FuseNavigationItem;
     @Input() name: string;
-    @ViewChild('matMenu', {static: true}) matMenu: MatMenu;
+    @ViewChild('matMenu', { static: true }) matMenu: MatMenu;
 
     private _fuseHorizontalNavigationComponent: FuseHorizontalNavigationComponent;
     private _unsubscribeAll: Subject<any> = new Subject<any>();
@@ -42,26 +64,24 @@ export class FuseHorizontalNavigationBranchItemComponent implements OnInit, OnDe
     /**
      * On init
      */
-    ngOnInit(): void
-    {
+    ngOnInit(): void {
         // Get the parent navigation component
-        this._fuseHorizontalNavigationComponent = this._fuseNavigationService.getComponent(this.name);
+        this._fuseHorizontalNavigationComponent =
+            this._fuseNavigationService.getComponent(this.name);
 
         // Subscribe to onRefreshed on the navigation component
-        this._fuseHorizontalNavigationComponent.onRefreshed.pipe(
-            takeUntil(this._unsubscribeAll),
-        ).subscribe(() =>
-        {
-            // Mark for check
-            this._changeDetectorRef.markForCheck();
-        });
+        this._fuseHorizontalNavigationComponent.onRefreshed
+            .pipe(takeUntil(this._unsubscribeAll))
+            .subscribe(() => {
+                // Mark for check
+                this._changeDetectorRef.markForCheck();
+            });
     }
 
     /**
      * On destroy
      */
-    ngOnDestroy(): void
-    {
+    ngOnDestroy(): void {
         // Unsubscribe from all subscriptions
         this._unsubscribeAll.next(null);
         this._unsubscribeAll.complete();
@@ -74,8 +94,7 @@ export class FuseHorizontalNavigationBranchItemComponent implements OnInit, OnDe
     /**
      * Trigger the change detection
      */
-    triggerChangeDetection(): void
-    {
+    triggerChangeDetection(): void {
         // Mark for check
         this._changeDetectorRef.markForCheck();
     }
@@ -86,8 +105,7 @@ export class FuseHorizontalNavigationBranchItemComponent implements OnInit, OnDe
      * @param index
      * @param item
      */
-    trackByFn(index: number, item: any): any
-    {
+    trackByFn(index: number, item: any): any {
         return item.id || index;
     }
 }
diff --git a/src/@fuse/components/navigation/horizontal/components/divider/divider.component.html b/src/@fuse/components/navigation/horizontal/components/divider/divider.component.html
index 5675966a..7b578dd2 100644
--- a/src/@fuse/components/navigation/horizontal/components/divider/divider.component.html
+++ b/src/@fuse/components/navigation/horizontal/components/divider/divider.component.html
@@ -1,4 +1,5 @@
 <!-- Divider -->
 <div
     class="fuse-horizontal-navigation-item-wrapper divider"
-    [ngClass]="item.classes?.wrapper"></div>
+    [ngClass]="item.classes?.wrapper"
+></div>
diff --git a/src/@fuse/components/navigation/horizontal/components/divider/divider.component.ts b/src/@fuse/components/navigation/horizontal/components/divider/divider.component.ts
index ee810c32..d1e3a1c0 100644
--- a/src/@fuse/components/navigation/horizontal/components/divider/divider.component.ts
+++ b/src/@fuse/components/navigation/horizontal/components/divider/divider.component.ts
@@ -1,18 +1,27 @@
 import { NgClass } from '@angular/common';
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, inject, Input, OnDestroy, OnInit } from '@angular/core';
+import {
+    ChangeDetectionStrategy,
+    ChangeDetectorRef,
+    Component,
+    inject,
+    Input,
+    OnDestroy,
+    OnInit,
+} from '@angular/core';
 import { FuseHorizontalNavigationComponent } from '@fuse/components/navigation/horizontal/horizontal.component';
 import { FuseNavigationService } from '@fuse/components/navigation/navigation.service';
 import { FuseNavigationItem } from '@fuse/components/navigation/navigation.types';
 import { Subject, takeUntil } from 'rxjs';
 
 @Component({
-    selector       : 'fuse-horizontal-navigation-divider-item',
-    templateUrl    : './divider.component.html',
+    selector: 'fuse-horizontal-navigation-divider-item',
+    templateUrl: './divider.component.html',
     changeDetection: ChangeDetectionStrategy.OnPush,
-    standalone     : true,
-    imports        : [NgClass],
+    standalone: true,
+    imports: [NgClass],
 })
-export class FuseHorizontalNavigationDividerItemComponent implements OnInit, OnDestroy
+export class FuseHorizontalNavigationDividerItemComponent
+    implements OnInit, OnDestroy
 {
     private _changeDetectorRef = inject(ChangeDetectorRef);
     private _fuseNavigationService = inject(FuseNavigationService);
@@ -30,26 +39,24 @@ export class FuseHorizontalNavigationDividerItemComponent implements OnInit, OnD
     /**
      * On init
      */
-    ngOnInit(): void
-    {
+    ngOnInit(): void {
         // Get the parent navigation component
-        this._fuseHorizontalNavigationComponent = this._fuseNavigationService.getComponent(this.name);
+        this._fuseHorizontalNavigationComponent =
+            this._fuseNavigationService.getComponent(this.name);
 
         // Subscribe to onRefreshed on the navigation component
-        this._fuseHorizontalNavigationComponent.onRefreshed.pipe(
-            takeUntil(this._unsubscribeAll),
-        ).subscribe(() =>
-        {
-            // Mark for check
-            this._changeDetectorRef.markForCheck();
-        });
+        this._fuseHorizontalNavigationComponent.onRefreshed
+            .pipe(takeUntil(this._unsubscribeAll))
+            .subscribe(() => {
+                // Mark for check
+                this._changeDetectorRef.markForCheck();
+            });
     }
 
     /**
      * On destroy
      */
-    ngOnDestroy(): void
-    {
+    ngOnDestroy(): void {
         // Unsubscribe from all subscriptions
         this._unsubscribeAll.next(null);
         this._unsubscribeAll.complete();
diff --git a/src/@fuse/components/navigation/horizontal/components/spacer/spacer.component.html b/src/@fuse/components/navigation/horizontal/components/spacer/spacer.component.html
index 97fbd30f..89df61a5 100644
--- a/src/@fuse/components/navigation/horizontal/components/spacer/spacer.component.html
+++ b/src/@fuse/components/navigation/horizontal/components/spacer/spacer.component.html
@@ -1,4 +1,5 @@
 <!-- Spacer -->
 <div
     class="fuse-horizontal-navigation-item-wrapper"
-    [ngClass]="item.classes?.wrapper"></div>
+    [ngClass]="item.classes?.wrapper"
+></div>
diff --git a/src/@fuse/components/navigation/horizontal/components/spacer/spacer.component.ts b/src/@fuse/components/navigation/horizontal/components/spacer/spacer.component.ts
index 3c5bdcf3..12d77593 100644
--- a/src/@fuse/components/navigation/horizontal/components/spacer/spacer.component.ts
+++ b/src/@fuse/components/navigation/horizontal/components/spacer/spacer.component.ts
@@ -1,18 +1,27 @@
 import { NgClass } from '@angular/common';
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, inject, Input, OnDestroy, OnInit } from '@angular/core';
+import {
+    ChangeDetectionStrategy,
+    ChangeDetectorRef,
+    Component,
+    inject,
+    Input,
+    OnDestroy,
+    OnInit,
+} from '@angular/core';
 import { FuseHorizontalNavigationComponent } from '@fuse/components/navigation/horizontal/horizontal.component';
 import { FuseNavigationService } from '@fuse/components/navigation/navigation.service';
 import { FuseNavigationItem } from '@fuse/components/navigation/navigation.types';
 import { Subject, takeUntil } from 'rxjs';
 
 @Component({
-    selector       : 'fuse-horizontal-navigation-spacer-item',
-    templateUrl    : './spacer.component.html',
+    selector: 'fuse-horizontal-navigation-spacer-item',
+    templateUrl: './spacer.component.html',
     changeDetection: ChangeDetectionStrategy.OnPush,
-    standalone     : true,
-    imports        : [NgClass],
+    standalone: true,
+    imports: [NgClass],
 })
-export class FuseHorizontalNavigationSpacerItemComponent implements OnInit, OnDestroy
+export class FuseHorizontalNavigationSpacerItemComponent
+    implements OnInit, OnDestroy
 {
     private _changeDetectorRef = inject(ChangeDetectorRef);
     private _fuseNavigationService = inject(FuseNavigationService);
@@ -30,26 +39,24 @@ export class FuseHorizontalNavigationSpacerItemComponent implements OnInit, OnDe
     /**
      * On init
      */
-    ngOnInit(): void
-    {
+    ngOnInit(): void {
         // Get the parent navigation component
-        this._fuseHorizontalNavigationComponent = this._fuseNavigationService.getComponent(this.name);
+        this._fuseHorizontalNavigationComponent =
+            this._fuseNavigationService.getComponent(this.name);
 
         // Subscribe to onRefreshed on the navigation component
-        this._fuseHorizontalNavigationComponent.onRefreshed.pipe(
-            takeUntil(this._unsubscribeAll),
-        ).subscribe(() =>
-        {
-            // Mark for check
-            this._changeDetectorRef.markForCheck();
-        });
+        this._fuseHorizontalNavigationComponent.onRefreshed
+            .pipe(takeUntil(this._unsubscribeAll))
+            .subscribe(() => {
+                // Mark for check
+                this._changeDetectorRef.markForCheck();
+            });
     }
 
     /**
      * On destroy
      */
-    ngOnDestroy(): void
-    {
+    ngOnDestroy(): void {
         // Unsubscribe from all subscriptions
         this._unsubscribeAll.next(null);
         this._unsubscribeAll.complete();
diff --git a/src/@fuse/components/navigation/horizontal/horizontal.component.html b/src/@fuse/components/navigation/horizontal/horizontal.component.html
index 7db23d99..8b7310ed 100644
--- a/src/@fuse/components/navigation/horizontal/horizontal.component.html
+++ b/src/@fuse/components/navigation/horizontal/horizontal.component.html
@@ -1,24 +1,31 @@
 <div class="fuse-horizontal-navigation-wrapper">
-
     <ng-container *ngFor="let item of navigation; trackBy: trackByFn">
-
         <!-- Skip the hidden items -->
-        <ng-container *ngIf="(item.hidden && !item.hidden(item)) || !item.hidden">
-
+        <ng-container
+            *ngIf="(item.hidden && !item.hidden(item)) || !item.hidden"
+        >
             <!-- Basic -->
             <ng-container *ngIf="item.type === 'basic'">
                 <fuse-horizontal-navigation-basic-item
                     class="fuse-horizontal-navigation-menu-item"
                     [item]="item"
-                    [name]="name"></fuse-horizontal-navigation-basic-item>
+                    [name]="name"
+                ></fuse-horizontal-navigation-basic-item>
             </ng-container>
 
             <!-- Branch: aside, collapsable, group -->
-            <ng-container *ngIf="item.type === 'aside' || item.type === 'collapsable' || item.type === 'group'">
+            <ng-container
+                *ngIf="
+                    item.type === 'aside' ||
+                    item.type === 'collapsable' ||
+                    item.type === 'group'
+                "
+            >
                 <fuse-horizontal-navigation-branch-item
                     class="fuse-horizontal-navigation-menu-item"
                     [item]="item"
-                    [name]="name"></fuse-horizontal-navigation-branch-item>
+                    [name]="name"
+                ></fuse-horizontal-navigation-branch-item>
             </ng-container>
 
             <!-- Spacer -->
@@ -26,11 +33,9 @@
                 <fuse-horizontal-navigation-spacer-item
                     class="fuse-horizontal-navigation-menu-item"
                     [item]="item"
-                    [name]="name"></fuse-horizontal-navigation-spacer-item>
+                    [name]="name"
+                ></fuse-horizontal-navigation-spacer-item>
             </ng-container>
-
         </ng-container>
-
     </ng-container>
-
 </div>
diff --git a/src/@fuse/components/navigation/horizontal/horizontal.component.scss b/src/@fuse/components/navigation/horizontal/horizontal.component.scss
index dc003054..d08bfecc 100644
--- a/src/@fuse/components/navigation/horizontal/horizontal.component.scss
+++ b/src/@fuse/components/navigation/horizontal/horizontal.component.scss
@@ -1,6 +1,5 @@
 /* Root navigation specific */
 fuse-horizontal-navigation {
-
     .fuse-horizontal-navigation-wrapper {
         display: flex;
         align-items: center;
@@ -8,11 +7,8 @@ fuse-horizontal-navigation {
         /* Basic, Branch */
         fuse-horizontal-navigation-basic-item,
         fuse-horizontal-navigation-branch-item {
-
             @screen sm {
-
                 &:hover {
-
                     .fuse-horizontal-navigation-item-wrapper {
                         @apply bg-hover;
                     }
@@ -37,10 +33,8 @@ fuse-horizontal-navigation {
 
         /* Basic - When item active (current link) */
         fuse-horizontal-navigation-basic-item {
-
             .fuse-horizontal-navigation-item-active,
             .fuse-horizontal-navigation-item-active-forced {
-
                 .fuse-horizontal-navigation-item-title {
                     @apply text-primary #{'!important'};
                 }
@@ -61,10 +55,8 @@ fuse-horizontal-navigation {
 
         /* Branch - When menu open */
         fuse-horizontal-navigation-branch-item {
-
             .fuse-horizontal-navigation-menu-active,
             .fuse-horizontal-navigation-menu-active-forced {
-
                 .fuse-horizontal-navigation-item-wrapper {
                     @apply bg-hover;
                 }
@@ -80,7 +72,6 @@ fuse-horizontal-navigation {
 
 /* Menu panel specific */
 .fuse-horizontal-navigation-menu-panel {
-
     .fuse-horizontal-navigation-menu-item {
         height: auto;
         min-height: 0;
@@ -109,13 +100,10 @@ fuse-horizontal-navigation {
 
 /* Navigation menu item common */
 .fuse-horizontal-navigation-menu-item {
-
     /* Basic - When item active (current link) */
     fuse-horizontal-navigation-basic-item {
-
         .fuse-horizontal-navigation-item-active,
         .fuse-horizontal-navigation-item-active-forced {
-
             .fuse-horizontal-navigation-item-title {
                 @apply text-primary #{'!important'};
             }
@@ -138,7 +126,6 @@ fuse-horizontal-navigation {
         width: 100%;
 
         &.fuse-horizontal-navigation-item-has-subtitle {
-
             .fuse-horizontal-navigation-item {
                 min-height: 56px;
             }
@@ -156,7 +143,6 @@ fuse-horizontal-navigation {
             text-decoration: none;
 
             .fuse-horizontal-navigation-item-title-wrapper {
-
                 .fuse-horizontal-navigation-item-subtitle {
                     font-size: 12px;
                 }
diff --git a/src/@fuse/components/navigation/horizontal/horizontal.component.ts b/src/@fuse/components/navigation/horizontal/horizontal.component.ts
index f9c7c6cf..327c991d 100644
--- a/src/@fuse/components/navigation/horizontal/horizontal.component.ts
+++ b/src/@fuse/components/navigation/horizontal/horizontal.component.ts
@@ -1,5 +1,16 @@
 import { NgFor, NgIf } from '@angular/common';
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, inject, Input, OnChanges, OnDestroy, OnInit, SimpleChanges, ViewEncapsulation } from '@angular/core';
+import {
+    ChangeDetectionStrategy,
+    ChangeDetectorRef,
+    Component,
+    Input,
+    OnChanges,
+    OnDestroy,
+    OnInit,
+    SimpleChanges,
+    ViewEncapsulation,
+    inject,
+} from '@angular/core';
 import { fuseAnimations } from '@fuse/animations';
 import { FuseNavigationService } from '@fuse/components/navigation/navigation.service';
 import { FuseNavigationItem } from '@fuse/components/navigation/navigation.types';
@@ -10,17 +21,24 @@ import { FuseHorizontalNavigationBranchItemComponent } from './components/branch
 import { FuseHorizontalNavigationSpacerItemComponent } from './components/spacer/spacer.component';
 
 @Component({
-    selector       : 'fuse-horizontal-navigation',
-    templateUrl    : './horizontal.component.html',
-    styleUrls      : ['./horizontal.component.scss'],
-    animations     : fuseAnimations,
-    encapsulation  : ViewEncapsulation.None,
+    selector: 'fuse-horizontal-navigation',
+    templateUrl: './horizontal.component.html',
+    styleUrls: ['./horizontal.component.scss'],
+    animations: fuseAnimations,
+    encapsulation: ViewEncapsulation.None,
     changeDetection: ChangeDetectionStrategy.OnPush,
-    exportAs       : 'fuseHorizontalNavigation',
-    standalone     : true,
-    imports        : [NgFor, NgIf, FuseHorizontalNavigationBasicItemComponent, FuseHorizontalNavigationBranchItemComponent, FuseHorizontalNavigationSpacerItemComponent],
+    exportAs: 'fuseHorizontalNavigation',
+    standalone: true,
+    imports: [
+        NgFor,
+        NgIf,
+        FuseHorizontalNavigationBasicItemComponent,
+        FuseHorizontalNavigationBranchItemComponent,
+        FuseHorizontalNavigationSpacerItemComponent,
+    ],
 })
-export class FuseHorizontalNavigationComponent implements OnChanges, OnInit, OnDestroy
+export class FuseHorizontalNavigationComponent
+    implements OnChanges, OnInit, OnDestroy
 {
     private _changeDetectorRef = inject(ChangeDetectorRef);
     private _fuseNavigationService = inject(FuseNavigationService);
@@ -41,11 +59,9 @@ export class FuseHorizontalNavigationComponent implements OnChanges, OnInit, OnD
      *
      * @param changes
      */
-    ngOnChanges(changes: SimpleChanges): void
-    {
+    ngOnChanges(changes: SimpleChanges): void {
         // Navigation
-        if ( 'navigation' in changes )
-        {
+        if ('navigation' in changes) {
             // Mark for check
             this._changeDetectorRef.markForCheck();
         }
@@ -54,11 +70,9 @@ export class FuseHorizontalNavigationComponent implements OnChanges, OnInit, OnD
     /**
      * On init
      */
-    ngOnInit(): void
-    {
+    ngOnInit(): void {
         // Make sure the name input is not an empty string
-        if ( this.name === '' )
-        {
+        if (this.name === '') {
             this.name = this._fuseUtilsService.randomId();
         }
 
@@ -69,8 +83,7 @@ export class FuseHorizontalNavigationComponent implements OnChanges, OnInit, OnD
     /**
      * On destroy
      */
-    ngOnDestroy(): void
-    {
+    ngOnDestroy(): void {
         // Deregister the navigation component from the registry
         this._fuseNavigationService.deregisterComponent(this.name);
 
@@ -86,8 +99,7 @@ export class FuseHorizontalNavigationComponent implements OnChanges, OnInit, OnD
     /**
      * Refresh the component to apply the changes
      */
-    refresh(): void
-    {
+    refresh(): void {
         // Mark for check
         this._changeDetectorRef.markForCheck();
 
@@ -101,8 +113,7 @@ export class FuseHorizontalNavigationComponent implements OnChanges, OnInit, OnD
      * @param index
      * @param item
      */
-    trackByFn(index: number, item: any): any
-    {
+    trackByFn(index: number, item: any): any {
         return item.id || index;
     }
 }
diff --git a/src/@fuse/components/navigation/navigation.service.ts b/src/@fuse/components/navigation/navigation.service.ts
index d7ee641e..5aa9298a 100644
--- a/src/@fuse/components/navigation/navigation.service.ts
+++ b/src/@fuse/components/navigation/navigation.service.ts
@@ -1,11 +1,13 @@
 import { Injectable } from '@angular/core';
 import { FuseNavigationItem } from '@fuse/components/navigation/navigation.types';
 
-@Injectable({providedIn: 'root'})
-export class FuseNavigationService
-{
+@Injectable({ providedIn: 'root' })
+export class FuseNavigationService {
     private _componentRegistry: Map<string, any> = new Map<string, any>();
-    private _navigationStore: Map<string, FuseNavigationItem[]> = new Map<string, any>();
+    private _navigationStore: Map<string, FuseNavigationItem[]> = new Map<
+        string,
+        any
+    >();
 
     // -----------------------------------------------------------------------------------------------------
     // @ Public methods
@@ -17,8 +19,7 @@ export class FuseNavigationService
      * @param name
      * @param component
      */
-    registerComponent(name: string, component: any): void
-    {
+    registerComponent(name: string, component: any): void {
         this._componentRegistry.set(name, component);
     }
 
@@ -27,8 +28,7 @@ export class FuseNavigationService
      *
      * @param name
      */
-    deregisterComponent(name: string): void
-    {
+    deregisterComponent(name: string): void {
         this._componentRegistry.delete(name);
     }
 
@@ -37,8 +37,7 @@ export class FuseNavigationService
      *
      * @param name
      */
-    getComponent<T>(name: string): T
-    {
+    getComponent<T>(name: string): T {
         return this._componentRegistry.get(name);
     }
 
@@ -48,8 +47,7 @@ export class FuseNavigationService
      * @param key
      * @param navigation
      */
-    storeNavigation(key: string, navigation: FuseNavigationItem[]): void
-    {
+    storeNavigation(key: string, navigation: FuseNavigationItem[]): void {
         // Add to the store
         this._navigationStore.set(key, navigation);
     }
@@ -59,8 +57,7 @@ export class FuseNavigationService
      *
      * @param key
      */
-    getNavigation(key: string): FuseNavigationItem[]
-    {
+    getNavigation(key: string): FuseNavigationItem[] {
         return this._navigationStore.get(key) ?? [];
     }
 
@@ -69,12 +66,12 @@ export class FuseNavigationService
      *
      * @param key
      */
-    deleteNavigation(key: string): void
-    {
+    deleteNavigation(key: string): void {
         // Check if the navigation exists
-        if ( !this._navigationStore.has(key) )
-        {
-            console.warn(`Navigation with the key '${key}' does not exist in the store.`);
+        if (!this._navigationStore.has(key)) {
+            console.warn(
+                `Navigation with the key '${key}' does not exist in the store.`
+            );
         }
 
         // Delete from the storage
@@ -88,20 +85,22 @@ export class FuseNavigationService
      * @param navigation
      * @param flatNavigation
      */
-    getFlatNavigation(navigation: FuseNavigationItem[], flatNavigation: FuseNavigationItem[] = []): FuseNavigationItem[]
-    {
-        for ( const item of navigation )
-        {
-            if ( item.type === 'basic' )
-            {
+    getFlatNavigation(
+        navigation: FuseNavigationItem[],
+        flatNavigation: FuseNavigationItem[] = []
+    ): FuseNavigationItem[] {
+        for (const item of navigation) {
+            if (item.type === 'basic') {
                 flatNavigation.push(item);
                 continue;
             }
 
-            if ( item.type === 'aside' || item.type === 'collapsable' || item.type === 'group' )
-            {
-                if ( item.children )
-                {
+            if (
+                item.type === 'aside' ||
+                item.type === 'collapsable' ||
+                item.type === 'group'
+            ) {
+                if (item.children) {
                     this.getFlatNavigation(item.children, flatNavigation);
                 }
             }
@@ -117,21 +116,19 @@ export class FuseNavigationService
      * @param id
      * @param navigation
      */
-    getItem(id: string, navigation: FuseNavigationItem[]): FuseNavigationItem | null
-    {
-        for ( const item of navigation )
-        {
-            if ( item.id === id )
-            {
+    getItem(
+        id: string,
+        navigation: FuseNavigationItem[]
+    ): FuseNavigationItem | null {
+        for (const item of navigation) {
+            if (item.id === id) {
                 return item;
             }
 
-            if ( item.children )
-            {
+            if (item.children) {
                 const childItem = this.getItem(id, item.children);
 
-                if ( childItem )
-                {
+                if (childItem) {
                     return childItem;
                 }
             }
@@ -151,22 +148,17 @@ export class FuseNavigationService
     getItemParent(
         id: string,
         navigation: FuseNavigationItem[],
-        parent: FuseNavigationItem[] | FuseNavigationItem,
-    ): FuseNavigationItem[] | FuseNavigationItem | null
-    {
-        for ( const item of navigation )
-        {
-            if ( item.id === id )
-            {
+        parent: FuseNavigationItem[] | FuseNavigationItem
+    ): FuseNavigationItem[] | FuseNavigationItem | null {
+        for (const item of navigation) {
+            if (item.id === id) {
                 return parent;
             }
 
-            if ( item.children )
-            {
+            if (item.children) {
                 const childItem = this.getItemParent(id, item.children, item);
 
-                if ( childItem )
-                {
+                if (childItem) {
                     return childItem;
                 }
             }
diff --git a/src/@fuse/components/navigation/navigation.types.ts b/src/@fuse/components/navigation/navigation.types.ts
index 1f2257ee..aa6491ea 100644
--- a/src/@fuse/components/navigation/navigation.types.ts
+++ b/src/@fuse/components/navigation/navigation.types.ts
@@ -1,17 +1,14 @@
-import { IsActiveMatchOptions, Params, QueryParamsHandling } from '@angular/router';
+import {
+    IsActiveMatchOptions,
+    Params,
+    QueryParamsHandling,
+} from '@angular/router';
 
-export interface FuseNavigationItem
-{
+export interface FuseNavigationItem {
     id?: string;
     title?: string;
     subtitle?: string;
-    type:
-        | 'aside'
-        | 'basic'
-        | 'collapsable'
-        | 'divider'
-        | 'group'
-        | 'spacer';
+    type: 'aside' | 'basic' | 'collapsable' | 'divider' | 'group' | 'spacer';
     hidden?: (item: FuseNavigationItem) => boolean;
     active?: boolean;
     disabled?: boolean;
@@ -22,12 +19,7 @@ export interface FuseNavigationItem
     queryParams?: Params | null;
     queryParamsHandling?: QueryParamsHandling | null;
     externalLink?: boolean;
-    target?:
-        | '_blank'
-        | '_self'
-        | '_parent'
-        | '_top'
-        | string;
+    target?: '_blank' | '_self' | '_parent' | '_top' | string;
     exactMatch?: boolean;
     isActiveMatchOptions?: IsActiveMatchOptions;
     function?: (item: FuseNavigationItem) => void;
@@ -52,10 +44,6 @@ export type FuseVerticalNavigationAppearance =
     | 'dense'
     | 'thin';
 
-export type FuseVerticalNavigationMode =
-    | 'over'
-    | 'side';
+export type FuseVerticalNavigationMode = 'over' | 'side';
 
-export type FuseVerticalNavigationPosition =
-    | 'left'
-    | 'right';
+export type FuseVerticalNavigationPosition = 'left' | 'right';
diff --git a/src/@fuse/components/navigation/public-api.ts b/src/@fuse/components/navigation/public-api.ts
index 3127dcd8..c68a2d7a 100644
--- a/src/@fuse/components/navigation/public-api.ts
+++ b/src/@fuse/components/navigation/public-api.ts
@@ -1,4 +1,4 @@
 export * from '@fuse/components/navigation/horizontal/horizontal.component';
-export * from '@fuse/components/navigation/vertical/vertical.component';
 export * from '@fuse/components/navigation/navigation.service';
 export * from '@fuse/components/navigation/navigation.types';
+export * from '@fuse/components/navigation/vertical/vertical.component';
diff --git a/src/@fuse/components/navigation/vertical/components/aside/aside.component.html b/src/@fuse/components/navigation/vertical/components/aside/aside.component.html
index 469d7b61..34dff3ae 100644
--- a/src/@fuse/components/navigation/vertical/components/aside/aside.component.html
+++ b/src/@fuse/components/navigation/vertical/components/aside/aside.component.html
@@ -1,34 +1,37 @@
 <div
     class="fuse-vertical-navigation-item-wrapper"
     [class.fuse-vertical-navigation-item-has-subtitle]="!!item.subtitle"
-    [ngClass]="item.classes?.wrapper">
-
+    [ngClass]="item.classes?.wrapper"
+>
     <div
         class="fuse-vertical-navigation-item"
-        [ngClass]="{'fuse-vertical-navigation-item-active': active,
-                    'fuse-vertical-navigation-item-disabled': item.disabled,
-                    'fuse-vertical-navigation-item-active-forced': item.active}"
-        [matTooltip]="item.tooltip || ''">
-
+        [ngClass]="{
+            'fuse-vertical-navigation-item-active': active,
+            'fuse-vertical-navigation-item-disabled': item.disabled,
+            'fuse-vertical-navigation-item-active-forced': item.active
+        }"
+        [matTooltip]="item.tooltip || ''"
+    >
         <!-- Icon -->
         <ng-container *ngIf="item.icon">
             <mat-icon
                 class="fuse-vertical-navigation-item-icon"
                 [ngClass]="item.classes?.icon"
-                [svgIcon]="item.icon"></mat-icon>
+                [svgIcon]="item.icon"
+            ></mat-icon>
         </ng-container>
 
         <!-- Title & Subtitle -->
         <div class="fuse-vertical-navigation-item-title-wrapper">
             <div class="fuse-vertical-navigation-item-title">
                 <span [ngClass]="item.classes?.title">
-                    {{item.title}}
+                    {{ item.title }}
                 </span>
             </div>
             <ng-container *ngIf="item.subtitle">
                 <div class="fuse-vertical-navigation-item-subtitle">
                     <span [ngClass]="item.classes?.subtitle">
-                        {{item.subtitle}}
+                        {{ item.subtitle }}
                     </span>
                 </div>
             </ng-container>
@@ -39,30 +42,28 @@
             <div class="fuse-vertical-navigation-item-badge">
                 <div
                     class="fuse-vertical-navigation-item-badge-content"
-                    [ngClass]="item.badge.classes">
-                    {{item.badge.title}}
+                    [ngClass]="item.badge.classes"
+                >
+                    {{ item.badge.title }}
                 </div>
             </div>
         </ng-container>
-
     </div>
-
 </div>
 
 <ng-container *ngIf="!skipChildren">
-
     <div class="fuse-vertical-navigation-item-children">
-
         <ng-container *ngFor="let item of item.children; trackBy: trackByFn">
-
             <!-- Skip the hidden items -->
-            <ng-container *ngIf="(item.hidden && !item.hidden(item)) || !item.hidden">
-
+            <ng-container
+                *ngIf="(item.hidden && !item.hidden(item)) || !item.hidden"
+            >
                 <!-- Basic -->
                 <ng-container *ngIf="item.type === 'basic'">
                     <fuse-vertical-navigation-basic-item
                         [item]="item"
-                        [name]="name"></fuse-vertical-navigation-basic-item>
+                        [name]="name"
+                    ></fuse-vertical-navigation-basic-item>
                 </ng-container>
 
                 <!-- Collapsable -->
@@ -70,34 +71,34 @@
                     <fuse-vertical-navigation-collapsable-item
                         [item]="item"
                         [name]="name"
-                        [autoCollapse]="autoCollapse"></fuse-vertical-navigation-collapsable-item>
+                        [autoCollapse]="autoCollapse"
+                    ></fuse-vertical-navigation-collapsable-item>
                 </ng-container>
 
                 <!-- Divider -->
                 <ng-container *ngIf="item.type === 'divider'">
                     <fuse-vertical-navigation-divider-item
                         [item]="item"
-                        [name]="name"></fuse-vertical-navigation-divider-item>
+                        [name]="name"
+                    ></fuse-vertical-navigation-divider-item>
                 </ng-container>
 
                 <!-- Group -->
                 <ng-container *ngIf="item.type === 'group'">
                     <fuse-vertical-navigation-group-item
                         [item]="item"
-                        [name]="name"></fuse-vertical-navigation-group-item>
+                        [name]="name"
+                    ></fuse-vertical-navigation-group-item>
                 </ng-container>
 
                 <!-- Spacer -->
                 <ng-container *ngIf="item.type === 'spacer'">
                     <fuse-vertical-navigation-spacer-item
                         [item]="item"
-                        [name]="name"></fuse-vertical-navigation-spacer-item>
+                        [name]="name"
+                    ></fuse-vertical-navigation-spacer-item>
                 </ng-container>
-
             </ng-container>
-
         </ng-container>
-
     </div>
-
 </ng-container>
diff --git a/src/@fuse/components/navigation/vertical/components/aside/aside.component.ts b/src/@fuse/components/navigation/vertical/components/aside/aside.component.ts
index 1479401a..0113cd0b 100644
--- a/src/@fuse/components/navigation/vertical/components/aside/aside.component.ts
+++ b/src/@fuse/components/navigation/vertical/components/aside/aside.component.ts
@@ -1,6 +1,16 @@
 import { BooleanInput } from '@angular/cdk/coercion';
 import { NgClass, NgFor, NgIf } from '@angular/common';
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, inject, Input, OnChanges, OnDestroy, OnInit, SimpleChanges } from '@angular/core';
+import {
+    ChangeDetectionStrategy,
+    ChangeDetectorRef,
+    Component,
+    Input,
+    OnChanges,
+    OnDestroy,
+    OnInit,
+    SimpleChanges,
+    inject,
+} from '@angular/core';
 import { MatIconModule } from '@angular/material/icon';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { NavigationEnd, Router } from '@angular/router';
@@ -12,16 +22,28 @@ import { FuseVerticalNavigationDividerItemComponent } from '@fuse/components/nav
 import { FuseVerticalNavigationGroupItemComponent } from '@fuse/components/navigation/vertical/components/group/group.component';
 import { FuseVerticalNavigationSpacerItemComponent } from '@fuse/components/navigation/vertical/components/spacer/spacer.component';
 import { FuseVerticalNavigationComponent } from '@fuse/components/navigation/vertical/vertical.component';
-import { filter, Subject, takeUntil } from 'rxjs';
+import { Subject, filter, takeUntil } from 'rxjs';
 
 @Component({
-    selector       : 'fuse-vertical-navigation-aside-item',
-    templateUrl    : './aside.component.html',
+    selector: 'fuse-vertical-navigation-aside-item',
+    templateUrl: './aside.component.html',
     changeDetection: ChangeDetectionStrategy.OnPush,
-    standalone     : true,
-    imports        : [NgClass, MatTooltipModule, NgIf, MatIconModule, NgFor, FuseVerticalNavigationBasicItemComponent, FuseVerticalNavigationCollapsableItemComponent, FuseVerticalNavigationDividerItemComponent, FuseVerticalNavigationGroupItemComponent, FuseVerticalNavigationSpacerItemComponent],
+    standalone: true,
+    imports: [
+        NgClass,
+        MatTooltipModule,
+        NgIf,
+        MatIconModule,
+        NgFor,
+        FuseVerticalNavigationBasicItemComponent,
+        FuseVerticalNavigationCollapsableItemComponent,
+        FuseVerticalNavigationDividerItemComponent,
+        FuseVerticalNavigationGroupItemComponent,
+        FuseVerticalNavigationSpacerItemComponent,
+    ],
 })
-export class FuseVerticalNavigationAsideItemComponent implements OnChanges, OnInit, OnDestroy
+export class FuseVerticalNavigationAsideItemComponent
+    implements OnChanges, OnInit, OnDestroy
 {
     /* eslint-disable @typescript-eslint/naming-convention */
     static ngAcceptInputType_autoCollapse: BooleanInput;
@@ -51,11 +73,9 @@ export class FuseVerticalNavigationAsideItemComponent implements OnChanges, OnIn
      *
      * @param changes
      */
-    ngOnChanges(changes: SimpleChanges): void
-    {
+    ngOnChanges(changes: SimpleChanges): void {
         // Active item id
-        if ( 'activeItemId' in changes )
-        {
+        if ('activeItemId' in changes) {
             // Mark if active
             this._markIfActive(this._router.url);
         }
@@ -64,41 +84,41 @@ export class FuseVerticalNavigationAsideItemComponent implements OnChanges, OnIn
     /**
      * On init
      */
-    ngOnInit(): void
-    {
+    ngOnInit(): void {
         // Mark if active
         this._markIfActive(this._router.url);
 
         // Attach a listener to the NavigationEnd event
         this._router.events
             .pipe(
-                filter((event): event is NavigationEnd => event instanceof NavigationEnd),
-                takeUntil(this._unsubscribeAll),
+                filter(
+                    (event): event is NavigationEnd =>
+                        event instanceof NavigationEnd
+                ),
+                takeUntil(this._unsubscribeAll)
             )
-            .subscribe((event: NavigationEnd) =>
-            {
+            .subscribe((event: NavigationEnd) => {
                 // Mark if active
                 this._markIfActive(event.urlAfterRedirects);
             });
 
         // Get the parent navigation component
-        this._fuseVerticalNavigationComponent = this._fuseNavigationService.getComponent(this.name);
+        this._fuseVerticalNavigationComponent =
+            this._fuseNavigationService.getComponent(this.name);
 
         // Subscribe to onRefreshed on the navigation component
-        this._fuseVerticalNavigationComponent.onRefreshed.pipe(
-            takeUntil(this._unsubscribeAll),
-        ).subscribe(() =>
-        {
-            // Mark for check
-            this._changeDetectorRef.markForCheck();
-        });
+        this._fuseVerticalNavigationComponent.onRefreshed
+            .pipe(takeUntil(this._unsubscribeAll))
+            .subscribe(() => {
+                // Mark for check
+                this._changeDetectorRef.markForCheck();
+            });
     }
 
     /**
      * On destroy
      */
-    ngOnDestroy(): void
-    {
+    ngOnDestroy(): void {
         // Unsubscribe from all subscriptions
         this._unsubscribeAll.next(null);
         this._unsubscribeAll.complete();
@@ -114,8 +134,7 @@ export class FuseVerticalNavigationAsideItemComponent implements OnChanges, OnIn
      * @param index
      * @param item
      */
-    trackByFn(index: number, item: any): any
-    {
+    trackByFn(index: number, item: any): any {
         return item.id || index;
     }
 
@@ -131,34 +150,33 @@ export class FuseVerticalNavigationAsideItemComponent implements OnChanges, OnIn
      * @param currentUrl
      * @private
      */
-    private _hasActiveChild(item: FuseNavigationItem, currentUrl: string): boolean
-    {
+    private _hasActiveChild(
+        item: FuseNavigationItem,
+        currentUrl: string
+    ): boolean {
         const children = item.children;
 
-        if ( !children )
-        {
+        if (!children) {
             return false;
         }
 
-        for ( const child of children )
-        {
-            if ( child.children )
-            {
-                if ( this._hasActiveChild(child, currentUrl) )
-                {
+        for (const child of children) {
+            if (child.children) {
+                if (this._hasActiveChild(child, currentUrl)) {
                     return true;
                 }
             }
 
             // Skip items other than 'basic'
-            if ( child.type !== 'basic' )
-            {
+            if (child.type !== 'basic') {
                 continue;
             }
 
             // Check if the child has a link and is active
-            if ( child.link && this._router.isActive(child.link, child.exactMatch || false) )
-            {
+            if (
+                child.link &&
+                this._router.isActive(child.link, child.exactMatch || false)
+            ) {
                 return true;
             }
         }
@@ -171,15 +189,13 @@ export class FuseVerticalNavigationAsideItemComponent implements OnChanges, OnIn
      *
      * @private
      */
-    private _markIfActive(currentUrl: string): void
-    {
+    private _markIfActive(currentUrl: string): void {
         // Check if the activeItemId is equals to this item id
         this.active = this.activeItemId === this.item.id;
 
         // If the aside has a children that is active,
         // always mark it as active
-        if ( this._hasActiveChild(this.item, currentUrl) )
-        {
+        if (this._hasActiveChild(this.item, currentUrl)) {
             this.active = true;
         }
 
diff --git a/src/@fuse/components/navigation/vertical/components/basic/basic.component.html b/src/@fuse/components/navigation/vertical/components/basic/basic.component.html
index 0722c7a0..39603bc8 100644
--- a/src/@fuse/components/navigation/vertical/components/basic/basic.component.html
+++ b/src/@fuse/components/navigation/vertical/components/basic/basic.component.html
@@ -2,13 +2,19 @@
 <div
     class="fuse-vertical-navigation-item-wrapper"
     [class.fuse-vertical-navigation-item-has-subtitle]="!!item.subtitle"
-    [ngClass]="item.classes?.wrapper">
-
+    [ngClass]="item.classes?.wrapper"
+>
     <!-- Item with an internal link -->
-    <ng-container *ngIf="item.link && !item.externalLink && !item.function && !item.disabled">
+    <ng-container
+        *ngIf="
+            item.link && !item.externalLink && !item.function && !item.disabled
+        "
+    >
         <a
             class="fuse-vertical-navigation-item"
-            [ngClass]="{'fuse-vertical-navigation-item-active-forced': item.active}"
+            [ngClass]="{
+                'fuse-vertical-navigation-item-active-forced': item.active
+            }"
             [routerLink]="[item.link]"
             [fragment]="item.fragment ?? null"
             [preserveFragment]="item.preserveFragment ?? false"
@@ -16,18 +22,24 @@
             [queryParamsHandling]="item.queryParamsHandling ?? null"
             [routerLinkActive]="'fuse-vertical-navigation-item-active'"
             [routerLinkActiveOptions]="isActiveMatchOptions"
-            [matTooltip]="item.tooltip || ''">
+            [matTooltip]="item.tooltip || ''"
+        >
             <ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
         </a>
     </ng-container>
 
     <!-- Item with an external link -->
-    <ng-container *ngIf="item.link && item.externalLink && !item.function && !item.disabled">
+    <ng-container
+        *ngIf="
+            item.link && item.externalLink && !item.function && !item.disabled
+        "
+    >
         <a
             class="fuse-vertical-navigation-item"
             [href]="item.link"
             [target]="item.target || '_self'"
-            [matTooltip]="item.tooltip || ''">
+            [matTooltip]="item.tooltip || ''"
+        >
             <ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
         </a>
     </ng-container>
@@ -36,18 +48,27 @@
     <ng-container *ngIf="!item.link && item.function && !item.disabled">
         <div
             class="fuse-vertical-navigation-item"
-            [ngClass]="{'fuse-vertical-navigation-item-active-forced': item.active}"
+            [ngClass]="{
+                'fuse-vertical-navigation-item-active-forced': item.active
+            }"
             [matTooltip]="item.tooltip || ''"
-            (click)="item.function(item)">
+            (click)="item.function(item)"
+        >
             <ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
         </div>
     </ng-container>
 
     <!-- Item with an internal link and function -->
-    <ng-container *ngIf="item.link && !item.externalLink && item.function && !item.disabled">
+    <ng-container
+        *ngIf="
+            item.link && !item.externalLink && item.function && !item.disabled
+        "
+    >
         <a
             class="fuse-vertical-navigation-item"
-            [ngClass]="{'fuse-vertical-navigation-item-active-forced': item.active}"
+            [ngClass]="{
+                'fuse-vertical-navigation-item-active-forced': item.active
+            }"
             [routerLink]="[item.link]"
             [fragment]="item.fragment ?? null"
             [preserveFragment]="item.preserveFragment ?? false"
@@ -56,19 +77,25 @@
             [routerLinkActive]="'fuse-vertical-navigation-item-active'"
             [routerLinkActiveOptions]="isActiveMatchOptions"
             [matTooltip]="item.tooltip || ''"
-            (click)="item.function(item)">
+            (click)="item.function(item)"
+        >
             <ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
         </a>
     </ng-container>
 
     <!-- Item with an external link and function -->
-    <ng-container *ngIf="item.link && item.externalLink && item.function && !item.disabled">
+    <ng-container
+        *ngIf="
+            item.link && item.externalLink && item.function && !item.disabled
+        "
+    >
         <a
             class="fuse-vertical-navigation-item"
             [href]="item.link"
             [target]="item.target || '_self'"
             [matTooltip]="item.tooltip || ''"
-            (click)="item.function(item)">
+            (click)="item.function(item)"
+        >
             <ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
         </a>
     </ng-container>
@@ -77,8 +104,11 @@
     <ng-container *ngIf="!item.link && !item.function && !item.disabled">
         <div
             class="fuse-vertical-navigation-item"
-            [ngClass]="{'fuse-vertical-navigation-item-active-forced': item.active}"
-            [matTooltip]="item.tooltip || ''">
+            [ngClass]="{
+                'fuse-vertical-navigation-item-active-forced': item.active
+            }"
+            [matTooltip]="item.tooltip || ''"
+        >
             <ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
         </div>
     </ng-container>
@@ -87,35 +117,35 @@
     <ng-container *ngIf="item.disabled">
         <div
             class="fuse-vertical-navigation-item fuse-vertical-navigation-item-disabled"
-            [matTooltip]="item.tooltip || ''">
+            [matTooltip]="item.tooltip || ''"
+        >
             <ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
         </div>
     </ng-container>
-
 </div>
 
 <!-- Item template -->
 <ng-template #itemTemplate>
-
     <!-- Icon -->
     <ng-container *ngIf="item.icon">
         <mat-icon
             class="fuse-vertical-navigation-item-icon"
             [ngClass]="item.classes?.icon"
-            [svgIcon]="item.icon"></mat-icon>
+            [svgIcon]="item.icon"
+        ></mat-icon>
     </ng-container>
 
     <!-- Title & Subtitle -->
     <div class="fuse-vertical-navigation-item-title-wrapper">
         <div class="fuse-vertical-navigation-item-title">
             <span [ngClass]="item.classes?.title">
-                {{item.title}}
+                {{ item.title }}
             </span>
         </div>
         <ng-container *ngIf="item.subtitle">
             <div class="fuse-vertical-navigation-item-subtitle">
                 <span [ngClass]="item.classes?.subtitle">
-                    {{item.subtitle}}
+                    {{ item.subtitle }}
                 </span>
             </div>
         </ng-container>
@@ -126,10 +156,10 @@
         <div class="fuse-vertical-navigation-item-badge">
             <div
                 class="fuse-vertical-navigation-item-badge-content"
-                [ngClass]="item.badge.classes">
-                {{item.badge.title}}
+                [ngClass]="item.badge.classes"
+            >
+                {{ item.badge.title }}
             </div>
         </div>
     </ng-container>
-
 </ng-template>
diff --git a/src/@fuse/components/navigation/vertical/components/basic/basic.component.ts b/src/@fuse/components/navigation/vertical/components/basic/basic.component.ts
index bd9fd8ab..f83988da 100644
--- a/src/@fuse/components/navigation/vertical/components/basic/basic.component.ts
+++ b/src/@fuse/components/navigation/vertical/components/basic/basic.component.ts
@@ -1,8 +1,20 @@
 import { NgClass, NgIf, NgTemplateOutlet } from '@angular/common';
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, inject, Input, OnDestroy, OnInit } from '@angular/core';
+import {
+    ChangeDetectionStrategy,
+    ChangeDetectorRef,
+    Component,
+    Input,
+    OnDestroy,
+    OnInit,
+    inject,
+} from '@angular/core';
 import { MatIconModule } from '@angular/material/icon';
 import { MatTooltipModule } from '@angular/material/tooltip';
-import { IsActiveMatchOptions, RouterLink, RouterLinkActive } from '@angular/router';
+import {
+    IsActiveMatchOptions,
+    RouterLink,
+    RouterLinkActive,
+} from '@angular/router';
 import { FuseNavigationService } from '@fuse/components/navigation/navigation.service';
 import { FuseNavigationItem } from '@fuse/components/navigation/navigation.types';
 import { FuseVerticalNavigationComponent } from '@fuse/components/navigation/vertical/vertical.component';
@@ -10,13 +22,22 @@ import { FuseUtilsService } from '@fuse/services/utils/utils.service';
 import { Subject, takeUntil } from 'rxjs';
 
 @Component({
-    selector       : 'fuse-vertical-navigation-basic-item',
-    templateUrl    : './basic.component.html',
+    selector: 'fuse-vertical-navigation-basic-item',
+    templateUrl: './basic.component.html',
     changeDetection: ChangeDetectionStrategy.OnPush,
-    standalone     : true,
-    imports        : [NgClass, NgIf, RouterLink, RouterLinkActive, MatTooltipModule, NgTemplateOutlet, MatIconModule],
+    standalone: true,
+    imports: [
+        NgClass,
+        NgIf,
+        RouterLink,
+        RouterLinkActive,
+        MatTooltipModule,
+        NgTemplateOutlet,
+        MatIconModule,
+    ],
 })
-export class FuseVerticalNavigationBasicItemComponent implements OnInit, OnDestroy
+export class FuseVerticalNavigationBasicItemComponent
+    implements OnInit, OnDestroy
 {
     private _changeDetectorRef = inject(ChangeDetectorRef);
     private _fuseNavigationService = inject(FuseNavigationService);
@@ -29,7 +50,8 @@ export class FuseVerticalNavigationBasicItemComponent implements OnInit, OnDestr
     // We are not assigning the item.isActiveMatchOptions directly to the
     // [routerLinkActiveOptions] because if it's "undefined" initially, the router
     // will throw an error and stop working.
-    isActiveMatchOptions: IsActiveMatchOptions = this._fuseUtilsService.subsetMatchOptions;
+    isActiveMatchOptions: IsActiveMatchOptions =
+        this._fuseUtilsService.subsetMatchOptions;
 
     private _fuseVerticalNavigationComponent: FuseVerticalNavigationComponent;
     private _unsubscribeAll: Subject<any> = new Subject<any>();
@@ -41,8 +63,7 @@ export class FuseVerticalNavigationBasicItemComponent implements OnInit, OnDestr
     /**
      * On init
      */
-    ngOnInit(): void
-    {
+    ngOnInit(): void {
         // Set the "isActiveMatchOptions" either from item's
         // "isActiveMatchOptions" or the equivalent form of
         // item's "exactMatch" option
@@ -52,26 +73,25 @@ export class FuseVerticalNavigationBasicItemComponent implements OnInit, OnDestr
                 : this._fuseUtilsService.subsetMatchOptions;
 
         // Get the parent navigation component
-        this._fuseVerticalNavigationComponent = this._fuseNavigationService.getComponent(this.name);
+        this._fuseVerticalNavigationComponent =
+            this._fuseNavigationService.getComponent(this.name);
 
         // Mark for check
         this._changeDetectorRef.markForCheck();
 
         // Subscribe to onRefreshed on the navigation component
-        this._fuseVerticalNavigationComponent.onRefreshed.pipe(
-            takeUntil(this._unsubscribeAll),
-        ).subscribe(() =>
-        {
-            // Mark for check
-            this._changeDetectorRef.markForCheck();
-        });
+        this._fuseVerticalNavigationComponent.onRefreshed
+            .pipe(takeUntil(this._unsubscribeAll))
+            .subscribe(() => {
+                // Mark for check
+                this._changeDetectorRef.markForCheck();
+            });
     }
 
     /**
      * On destroy
      */
-    ngOnDestroy(): void
-    {
+    ngOnDestroy(): void {
         // Unsubscribe from all subscriptions
         this._unsubscribeAll.next(null);
         this._unsubscribeAll.complete();
diff --git a/src/@fuse/components/navigation/vertical/components/collapsable/collapsable.component.html b/src/@fuse/components/navigation/vertical/components/collapsable/collapsable.component.html
index 770efdb3..56c806f3 100644
--- a/src/@fuse/components/navigation/vertical/components/collapsable/collapsable.component.html
+++ b/src/@fuse/components/navigation/vertical/components/collapsable/collapsable.component.html
@@ -1,33 +1,34 @@
 <div
     class="fuse-vertical-navigation-item-wrapper"
     [class.fuse-vertical-navigation-item-has-subtitle]="!!item.subtitle"
-    [ngClass]="item.classes?.wrapper">
-
+    [ngClass]="item.classes?.wrapper"
+>
     <div
         class="fuse-vertical-navigation-item"
-        [ngClass]="{'fuse-vertical-navigation-item-disabled': item.disabled}"
+        [ngClass]="{ 'fuse-vertical-navigation-item-disabled': item.disabled }"
         [matTooltip]="item.tooltip || ''"
-        (click)="toggleCollapsable()">
-
+        (click)="toggleCollapsable()"
+    >
         <!-- Icon -->
         <ng-container *ngIf="item.icon">
             <mat-icon
                 class="fuse-vertical-navigation-item-icon"
                 [ngClass]="item.classes?.icon"
-                [svgIcon]="item.icon"></mat-icon>
+                [svgIcon]="item.icon"
+            ></mat-icon>
         </ng-container>
 
         <!-- Title & Subtitle -->
         <div class="fuse-vertical-navigation-item-title-wrapper">
             <div class="fuse-vertical-navigation-item-title">
                 <span [ngClass]="item.classes?.title">
-                    {{item.title}}
+                    {{ item.title }}
                 </span>
             </div>
             <ng-container *ngIf="item.subtitle">
                 <div class="fuse-vertical-navigation-item-subtitle">
                     <span [ngClass]="item.classes?.subtitle">
-                        {{item.subtitle}}
+                        {{ item.subtitle }}
                     </span>
                 </div>
             </ng-container>
@@ -38,8 +39,9 @@
             <div class="fuse-vertical-navigation-item-badge">
                 <div
                     class="fuse-vertical-navigation-item-badge-content"
-                    [ngClass]="item.badge.classes">
-                    {{item.badge.title}}
+                    [ngClass]="item.badge.classes"
+                >
+                    {{ item.badge.title }}
                 </div>
             </div>
         </ng-container>
@@ -47,27 +49,27 @@
         <!-- Arrow -->
         <mat-icon
             class="fuse-vertical-navigation-item-arrow icon-size-4"
-            [svgIcon]="'heroicons_solid:chevron-right'"></mat-icon>
-
+            [svgIcon]="'heroicons_solid:chevron-right'"
+        ></mat-icon>
     </div>
-
 </div>
 
 <div
     class="fuse-vertical-navigation-item-children"
     *ngIf="!isCollapsed"
-    @expandCollapse>
-
+    @expandCollapse
+>
     <ng-container *ngFor="let item of item.children; trackBy: trackByFn">
-
         <!-- Skip the hidden items -->
-        <ng-container *ngIf="(item.hidden && !item.hidden(item)) || !item.hidden">
-
+        <ng-container
+            *ngIf="(item.hidden && !item.hidden(item)) || !item.hidden"
+        >
             <!-- Basic -->
             <ng-container *ngIf="item.type === 'basic'">
                 <fuse-vertical-navigation-basic-item
                     [item]="item"
-                    [name]="name"></fuse-vertical-navigation-basic-item>
+                    [name]="name"
+                ></fuse-vertical-navigation-basic-item>
             </ng-container>
 
             <!-- Collapsable -->
@@ -75,32 +77,33 @@
                 <fuse-vertical-navigation-collapsable-item
                     [item]="item"
                     [name]="name"
-                    [autoCollapse]="autoCollapse"></fuse-vertical-navigation-collapsable-item>
+                    [autoCollapse]="autoCollapse"
+                ></fuse-vertical-navigation-collapsable-item>
             </ng-container>
 
             <!-- Divider -->
             <ng-container *ngIf="item.type === 'divider'">
                 <fuse-vertical-navigation-divider-item
                     [item]="item"
-                    [name]="name"></fuse-vertical-navigation-divider-item>
+                    [name]="name"
+                ></fuse-vertical-navigation-divider-item>
             </ng-container>
 
             <!-- Group -->
             <ng-container *ngIf="item.type === 'group'">
                 <fuse-vertical-navigation-group-item
                     [item]="item"
-                    [name]="name"></fuse-vertical-navigation-group-item>
+                    [name]="name"
+                ></fuse-vertical-navigation-group-item>
             </ng-container>
 
             <!-- Spacer -->
             <ng-container *ngIf="item.type === 'spacer'">
                 <fuse-vertical-navigation-spacer-item
                     [item]="item"
-                    [name]="name"></fuse-vertical-navigation-spacer-item>
+                    [name]="name"
+                ></fuse-vertical-navigation-spacer-item>
             </ng-container>
-
         </ng-container>
-
     </ng-container>
-
 </div>
diff --git a/src/@fuse/components/navigation/vertical/components/collapsable/collapsable.component.ts b/src/@fuse/components/navigation/vertical/components/collapsable/collapsable.component.ts
index c6a67d06..2bf347e3 100644
--- a/src/@fuse/components/navigation/vertical/components/collapsable/collapsable.component.ts
+++ b/src/@fuse/components/navigation/vertical/components/collapsable/collapsable.component.ts
@@ -1,6 +1,16 @@
 import { BooleanInput } from '@angular/cdk/coercion';
 import { NgClass, NgFor, NgIf } from '@angular/common';
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, forwardRef, HostBinding, inject, Input, OnDestroy, OnInit } from '@angular/core';
+import {
+    ChangeDetectionStrategy,
+    ChangeDetectorRef,
+    Component,
+    HostBinding,
+    Input,
+    OnDestroy,
+    OnInit,
+    forwardRef,
+    inject,
+} from '@angular/core';
 import { MatIconModule } from '@angular/material/icon';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { NavigationEnd, Router } from '@angular/router';
@@ -12,17 +22,29 @@ import { FuseVerticalNavigationDividerItemComponent } from '@fuse/components/nav
 import { FuseVerticalNavigationGroupItemComponent } from '@fuse/components/navigation/vertical/components/group/group.component';
 import { FuseVerticalNavigationSpacerItemComponent } from '@fuse/components/navigation/vertical/components/spacer/spacer.component';
 import { FuseVerticalNavigationComponent } from '@fuse/components/navigation/vertical/vertical.component';
-import { filter, Subject, takeUntil } from 'rxjs';
+import { Subject, filter, takeUntil } from 'rxjs';
 
 @Component({
-    selector       : 'fuse-vertical-navigation-collapsable-item',
-    templateUrl    : './collapsable.component.html',
-    animations     : fuseAnimations,
+    selector: 'fuse-vertical-navigation-collapsable-item',
+    templateUrl: './collapsable.component.html',
+    animations: fuseAnimations,
     changeDetection: ChangeDetectionStrategy.OnPush,
-    standalone     : true,
-    imports        : [NgClass, MatTooltipModule, NgIf, MatIconModule, NgFor, FuseVerticalNavigationBasicItemComponent, forwardRef(() => FuseVerticalNavigationCollapsableItemComponent), FuseVerticalNavigationDividerItemComponent, FuseVerticalNavigationGroupItemComponent, FuseVerticalNavigationSpacerItemComponent],
+    standalone: true,
+    imports: [
+        NgClass,
+        MatTooltipModule,
+        NgIf,
+        MatIconModule,
+        NgFor,
+        FuseVerticalNavigationBasicItemComponent,
+        forwardRef(() => FuseVerticalNavigationCollapsableItemComponent),
+        FuseVerticalNavigationDividerItemComponent,
+        FuseVerticalNavigationGroupItemComponent,
+        FuseVerticalNavigationSpacerItemComponent,
+    ],
 })
-export class FuseVerticalNavigationCollapsableItemComponent implements OnInit, OnDestroy
+export class FuseVerticalNavigationCollapsableItemComponent
+    implements OnInit, OnDestroy
 {
     /* eslint-disable @typescript-eslint/naming-convention */
     static ngAcceptInputType_autoCollapse: BooleanInput;
@@ -48,12 +70,11 @@ export class FuseVerticalNavigationCollapsableItemComponent implements OnInit, O
     /**
      * Host binding for component classes
      */
-    @HostBinding('class') get classList(): any
-    {
+    @HostBinding('class') get classList(): any {
         /* eslint-disable @typescript-eslint/naming-convention */
         return {
             'fuse-vertical-navigation-item-collapsed': this.isCollapsed,
-            'fuse-vertical-navigation-item-expanded' : this.isExpanded,
+            'fuse-vertical-navigation-item-expanded': this.isExpanded,
         };
         /* eslint-enable @typescript-eslint/naming-convention */
     }
@@ -65,22 +86,19 @@ export class FuseVerticalNavigationCollapsableItemComponent implements OnInit, O
     /**
      * On init
      */
-    ngOnInit(): void
-    {
+    ngOnInit(): void {
         // Get the parent navigation component
-        this._fuseVerticalNavigationComponent = this._fuseNavigationService.getComponent(this.name);
+        this._fuseVerticalNavigationComponent =
+            this._fuseNavigationService.getComponent(this.name);
 
         // If the item has a children that has a matching url with the current url, expand...
-        if ( this._hasActiveChild(this.item, this._router.url) )
-        {
+        if (this._hasActiveChild(this.item, this._router.url)) {
             this.expand();
         }
         // Otherwise...
-        else
-        {
+        else {
             // If the autoCollapse is on, collapse...
-            if ( this.autoCollapse )
-            {
+            if (this.autoCollapse) {
                 this.collapse();
             }
         }
@@ -88,49 +106,40 @@ export class FuseVerticalNavigationCollapsableItemComponent implements OnInit, O
         // Listen for the onCollapsableItemCollapsed from the service
         this._fuseVerticalNavigationComponent.onCollapsableItemCollapsed
             .pipe(takeUntil(this._unsubscribeAll))
-            .subscribe((collapsedItem) =>
-            {
+            .subscribe((collapsedItem) => {
                 // Check if the collapsed item is null
-                if ( collapsedItem === null )
-                {
+                if (collapsedItem === null) {
                     return;
                 }
 
                 // Collapse if this is a children of the collapsed item
-                if ( this._isChildrenOf(collapsedItem, this.item) )
-                {
+                if (this._isChildrenOf(collapsedItem, this.item)) {
                     this.collapse();
                 }
             });
 
         // Listen for the onCollapsableItemExpanded from the service if the autoCollapse is on
-        if ( this.autoCollapse )
-        {
+        if (this.autoCollapse) {
             this._fuseVerticalNavigationComponent.onCollapsableItemExpanded
                 .pipe(takeUntil(this._unsubscribeAll))
-                .subscribe((expandedItem) =>
-                {
+                .subscribe((expandedItem) => {
                     // Check if the expanded item is null
-                    if ( expandedItem === null )
-                    {
+                    if (expandedItem === null) {
                         return;
                     }
 
                     // Check if this is a parent of the expanded item
-                    if ( this._isChildrenOf(this.item, expandedItem) )
-                    {
+                    if (this._isChildrenOf(this.item, expandedItem)) {
                         return;
                     }
 
                     // Check if this has a children with a matching url with the current active url
-                    if ( this._hasActiveChild(this.item, this._router.url) )
-                    {
+                    if (this._hasActiveChild(this.item, this._router.url)) {
                         return;
                     }
 
                     // Check if this is the expanded item
-                    if ( this.item === expandedItem )
-                    {
+                    if (this.item === expandedItem) {
                         return;
                     }
 
@@ -142,42 +151,39 @@ export class FuseVerticalNavigationCollapsableItemComponent implements OnInit, O
         // Attach a listener to the NavigationEnd event
         this._router.events
             .pipe(
-                filter((event): event is NavigationEnd => event instanceof NavigationEnd),
-                takeUntil(this._unsubscribeAll),
+                filter(
+                    (event): event is NavigationEnd =>
+                        event instanceof NavigationEnd
+                ),
+                takeUntil(this._unsubscribeAll)
             )
-            .subscribe((event: NavigationEnd) =>
-            {
+            .subscribe((event: NavigationEnd) => {
                 // If the item has a children that has a matching url with the current url, expand...
-                if ( this._hasActiveChild(this.item, event.urlAfterRedirects) )
-                {
+                if (this._hasActiveChild(this.item, event.urlAfterRedirects)) {
                     this.expand();
                 }
                 // Otherwise...
-                else
-                {
+                else {
                     // If the autoCollapse is on, collapse...
-                    if ( this.autoCollapse )
-                    {
+                    if (this.autoCollapse) {
                         this.collapse();
                     }
                 }
             });
 
         // Subscribe to onRefreshed on the navigation component
-        this._fuseVerticalNavigationComponent.onRefreshed.pipe(
-            takeUntil(this._unsubscribeAll),
-        ).subscribe(() =>
-        {
-            // Mark for check
-            this._changeDetectorRef.markForCheck();
-        });
+        this._fuseVerticalNavigationComponent.onRefreshed
+            .pipe(takeUntil(this._unsubscribeAll))
+            .subscribe(() => {
+                // Mark for check
+                this._changeDetectorRef.markForCheck();
+            });
     }
 
     /**
      * On destroy
      */
-    ngOnDestroy(): void
-    {
+    ngOnDestroy(): void {
         // Unsubscribe from all subscriptions
         this._unsubscribeAll.next(null);
         this._unsubscribeAll.complete();
@@ -190,17 +196,14 @@ export class FuseVerticalNavigationCollapsableItemComponent implements OnInit, O
     /**
      * Collapse
      */
-    collapse(): void
-    {
+    collapse(): void {
         // Return if the item is disabled
-        if ( this.item.disabled )
-        {
+        if (this.item.disabled) {
             return;
         }
 
         // Return if the item is already collapsed
-        if ( this.isCollapsed )
-        {
+        if (this.isCollapsed) {
             return;
         }
 
@@ -212,23 +215,22 @@ export class FuseVerticalNavigationCollapsableItemComponent implements OnInit, O
         this._changeDetectorRef.markForCheck();
 
         // Execute the observable
-        this._fuseVerticalNavigationComponent.onCollapsableItemCollapsed.next(this.item);
+        this._fuseVerticalNavigationComponent.onCollapsableItemCollapsed.next(
+            this.item
+        );
     }
 
     /**
      * Expand
      */
-    expand(): void
-    {
+    expand(): void {
         // Return if the item is disabled
-        if ( this.item.disabled )
-        {
+        if (this.item.disabled) {
             return;
         }
 
         // Return if the item is already expanded
-        if ( !this.isCollapsed )
-        {
+        if (!this.isCollapsed) {
             return;
         }
 
@@ -240,21 +242,19 @@ export class FuseVerticalNavigationCollapsableItemComponent implements OnInit, O
         this._changeDetectorRef.markForCheck();
 
         // Execute the observable
-        this._fuseVerticalNavigationComponent.onCollapsableItemExpanded.next(this.item);
+        this._fuseVerticalNavigationComponent.onCollapsableItemExpanded.next(
+            this.item
+        );
     }
 
     /**
      * Toggle collapsable
      */
-    toggleCollapsable(): void
-    {
+    toggleCollapsable(): void {
         // Toggle collapse/expand
-        if ( this.isCollapsed )
-        {
+        if (this.isCollapsed) {
             this.expand();
-        }
-        else
-        {
+        } else {
             this.collapse();
         }
     }
@@ -265,8 +265,7 @@ export class FuseVerticalNavigationCollapsableItemComponent implements OnInit, O
      * @param index
      * @param item
      */
-    trackByFn(index: number, item: any): any
-    {
+    trackByFn(index: number, item: any): any {
         return item.id || index;
     }
 
@@ -282,28 +281,28 @@ export class FuseVerticalNavigationCollapsableItemComponent implements OnInit, O
      * @param currentUrl
      * @private
      */
-    private _hasActiveChild(item: FuseNavigationItem, currentUrl: string): boolean
-    {
+    private _hasActiveChild(
+        item: FuseNavigationItem,
+        currentUrl: string
+    ): boolean {
         const children = item.children;
 
-        if ( !children )
-        {
+        if (!children) {
             return false;
         }
 
-        for ( const child of children )
-        {
-            if ( child.children )
-            {
-                if ( this._hasActiveChild(child, currentUrl) )
-                {
+        for (const child of children) {
+            if (child.children) {
+                if (this._hasActiveChild(child, currentUrl)) {
                     return true;
                 }
             }
 
             // Check if the child has a link and is active
-            if ( child.link && this._router.isActive(child.link, child.exactMatch || false) )
-            {
+            if (
+                child.link &&
+                this._router.isActive(child.link, child.exactMatch || false)
+            ) {
                 return true;
             }
         }
@@ -319,26 +318,23 @@ export class FuseVerticalNavigationCollapsableItemComponent implements OnInit, O
      * @param item
      * @private
      */
-    private _isChildrenOf(parent: FuseNavigationItem, item: FuseNavigationItem): boolean
-    {
+    private _isChildrenOf(
+        parent: FuseNavigationItem,
+        item: FuseNavigationItem
+    ): boolean {
         const children = parent.children;
 
-        if ( !children )
-        {
+        if (!children) {
             return false;
         }
 
-        if ( children.indexOf(item) > -1 )
-        {
+        if (children.indexOf(item) > -1) {
             return true;
         }
 
-        for ( const child of children )
-        {
-            if ( child.children )
-            {
-                if ( this._isChildrenOf(child, item) )
-                {
+        for (const child of children) {
+            if (child.children) {
+                if (this._isChildrenOf(child, item)) {
                     return true;
                 }
             }
diff --git a/src/@fuse/components/navigation/vertical/components/divider/divider.component.html b/src/@fuse/components/navigation/vertical/components/divider/divider.component.html
index f786705f..cc421f74 100644
--- a/src/@fuse/components/navigation/vertical/components/divider/divider.component.html
+++ b/src/@fuse/components/navigation/vertical/components/divider/divider.component.html
@@ -1,4 +1,5 @@
 <!-- Divider -->
 <div
     class="fuse-vertical-navigation-item-wrapper divider"
-    [ngClass]="item.classes?.wrapper"></div>
+    [ngClass]="item.classes?.wrapper"
+></div>
diff --git a/src/@fuse/components/navigation/vertical/components/divider/divider.component.ts b/src/@fuse/components/navigation/vertical/components/divider/divider.component.ts
index 002a4b36..4794e91c 100644
--- a/src/@fuse/components/navigation/vertical/components/divider/divider.component.ts
+++ b/src/@fuse/components/navigation/vertical/components/divider/divider.component.ts
@@ -1,18 +1,27 @@
 import { NgClass } from '@angular/common';
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, inject, Input, OnDestroy, OnInit } from '@angular/core';
+import {
+    ChangeDetectionStrategy,
+    ChangeDetectorRef,
+    Component,
+    inject,
+    Input,
+    OnDestroy,
+    OnInit,
+} from '@angular/core';
 import { FuseNavigationService } from '@fuse/components/navigation/navigation.service';
 import { FuseNavigationItem } from '@fuse/components/navigation/navigation.types';
 import { FuseVerticalNavigationComponent } from '@fuse/components/navigation/vertical/vertical.component';
 import { Subject, takeUntil } from 'rxjs';
 
 @Component({
-    selector       : 'fuse-vertical-navigation-divider-item',
-    templateUrl    : './divider.component.html',
+    selector: 'fuse-vertical-navigation-divider-item',
+    templateUrl: './divider.component.html',
     changeDetection: ChangeDetectionStrategy.OnPush,
-    standalone     : true,
-    imports        : [NgClass],
+    standalone: true,
+    imports: [NgClass],
 })
-export class FuseVerticalNavigationDividerItemComponent implements OnInit, OnDestroy
+export class FuseVerticalNavigationDividerItemComponent
+    implements OnInit, OnDestroy
 {
     private _changeDetectorRef = inject(ChangeDetectorRef);
     private _fuseNavigationService = inject(FuseNavigationService);
@@ -30,26 +39,24 @@ export class FuseVerticalNavigationDividerItemComponent implements OnInit, OnDes
     /**
      * On init
      */
-    ngOnInit(): void
-    {
+    ngOnInit(): void {
         // Get the parent navigation component
-        this._fuseVerticalNavigationComponent = this._fuseNavigationService.getComponent(this.name);
+        this._fuseVerticalNavigationComponent =
+            this._fuseNavigationService.getComponent(this.name);
 
         // Subscribe to onRefreshed on the navigation component
-        this._fuseVerticalNavigationComponent.onRefreshed.pipe(
-            takeUntil(this._unsubscribeAll),
-        ).subscribe(() =>
-        {
-            // Mark for check
-            this._changeDetectorRef.markForCheck();
-        });
+        this._fuseVerticalNavigationComponent.onRefreshed
+            .pipe(takeUntil(this._unsubscribeAll))
+            .subscribe(() => {
+                // Mark for check
+                this._changeDetectorRef.markForCheck();
+            });
     }
 
     /**
      * On destroy
      */
-    ngOnDestroy(): void
-    {
+    ngOnDestroy(): void {
         // Unsubscribe from all subscriptions
         this._unsubscribeAll.next(null);
         this._unsubscribeAll.complete();
diff --git a/src/@fuse/components/navigation/vertical/components/group/group.component.html b/src/@fuse/components/navigation/vertical/components/group/group.component.html
index 49218739..febc6eba 100644
--- a/src/@fuse/components/navigation/vertical/components/group/group.component.html
+++ b/src/@fuse/components/navigation/vertical/components/group/group.component.html
@@ -2,29 +2,29 @@
 <div
     class="fuse-vertical-navigation-item-wrapper"
     [class.fuse-vertical-navigation-item-has-subtitle]="!!item.subtitle"
-    [ngClass]="item.classes?.wrapper">
-
+    [ngClass]="item.classes?.wrapper"
+>
     <div class="fuse-vertical-navigation-item">
-
         <!-- Icon -->
         <ng-container *ngIf="item.icon">
             <mat-icon
                 class="fuse-vertical-navigation-item-icon"
                 [ngClass]="item.classes?.icon"
-                [svgIcon]="item.icon"></mat-icon>
+                [svgIcon]="item.icon"
+            ></mat-icon>
         </ng-container>
 
         <!-- Title & Subtitle -->
         <div class="fuse-vertical-navigation-item-title-wrapper">
             <div class="fuse-vertical-navigation-item-title">
                 <span [ngClass]="item.classes?.title">
-                    {{item.title}}
+                    {{ item.title }}
                 </span>
             </div>
             <ng-container *ngIf="item.subtitle">
                 <div class="fuse-vertical-navigation-item-subtitle">
                     <span [ngClass]="item.classes?.subtitle">
-                        {{item.subtitle}}
+                        {{ item.subtitle }}
                     </span>
                 </div>
             </ng-container>
@@ -35,26 +35,24 @@
             <div class="fuse-vertical-navigation-item-badge">
                 <div
                     class="fuse-vertical-navigation-item-badge-content"
-                    [ngClass]="item.badge.classes">
-                    {{item.badge.title}}
+                    [ngClass]="item.badge.classes"
+                >
+                    {{ item.badge.title }}
                 </div>
             </div>
         </ng-container>
-
     </div>
-
 </div>
 
 <ng-container *ngFor="let item of item.children; trackBy: trackByFn">
-
     <!-- Skip the hidden items -->
     <ng-container *ngIf="(item.hidden && !item.hidden(item)) || !item.hidden">
-
         <!-- Basic -->
         <ng-container *ngIf="item.type === 'basic'">
             <fuse-vertical-navigation-basic-item
                 [item]="item"
-                [name]="name"></fuse-vertical-navigation-basic-item>
+                [name]="name"
+            ></fuse-vertical-navigation-basic-item>
         </ng-container>
 
         <!-- Collapsable -->
@@ -62,30 +60,32 @@
             <fuse-vertical-navigation-collapsable-item
                 [item]="item"
                 [name]="name"
-                [autoCollapse]="autoCollapse"></fuse-vertical-navigation-collapsable-item>
+                [autoCollapse]="autoCollapse"
+            ></fuse-vertical-navigation-collapsable-item>
         </ng-container>
 
         <!-- Divider -->
         <ng-container *ngIf="item.type === 'divider'">
             <fuse-vertical-navigation-divider-item
                 [item]="item"
-                [name]="name"></fuse-vertical-navigation-divider-item>
+                [name]="name"
+            ></fuse-vertical-navigation-divider-item>
         </ng-container>
 
         <!-- Group -->
         <ng-container *ngIf="item.type === 'group'">
             <fuse-vertical-navigation-group-item
                 [item]="item"
-                [name]="name"></fuse-vertical-navigation-group-item>
+                [name]="name"
+            ></fuse-vertical-navigation-group-item>
         </ng-container>
 
         <!-- Spacer -->
         <ng-container *ngIf="item.type === 'spacer'">
             <fuse-vertical-navigation-spacer-item
                 [item]="item"
-                [name]="name"></fuse-vertical-navigation-spacer-item>
+                [name]="name"
+            ></fuse-vertical-navigation-spacer-item>
         </ng-container>
-
     </ng-container>
-
 </ng-container>
diff --git a/src/@fuse/components/navigation/vertical/components/group/group.component.ts b/src/@fuse/components/navigation/vertical/components/group/group.component.ts
index 6931750e..71b3b513 100644
--- a/src/@fuse/components/navigation/vertical/components/group/group.component.ts
+++ b/src/@fuse/components/navigation/vertical/components/group/group.component.ts
@@ -1,6 +1,15 @@
 import { BooleanInput } from '@angular/cdk/coercion';
 import { NgClass, NgFor, NgIf } from '@angular/common';
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, forwardRef, inject, Input, OnDestroy, OnInit } from '@angular/core';
+import {
+    ChangeDetectionStrategy,
+    ChangeDetectorRef,
+    Component,
+    Input,
+    OnDestroy,
+    OnInit,
+    forwardRef,
+    inject,
+} from '@angular/core';
 import { MatIconModule } from '@angular/material/icon';
 import { FuseNavigationService } from '@fuse/components/navigation/navigation.service';
 import { FuseNavigationItem } from '@fuse/components/navigation/navigation.types';
@@ -12,13 +21,24 @@ import { FuseVerticalNavigationComponent } from '@fuse/components/navigation/ver
 import { Subject, takeUntil } from 'rxjs';
 
 @Component({
-    selector       : 'fuse-vertical-navigation-group-item',
-    templateUrl    : './group.component.html',
+    selector: 'fuse-vertical-navigation-group-item',
+    templateUrl: './group.component.html',
     changeDetection: ChangeDetectionStrategy.OnPush,
-    standalone     : true,
-    imports        : [NgClass, NgIf, MatIconModule, NgFor, FuseVerticalNavigationBasicItemComponent, FuseVerticalNavigationCollapsableItemComponent, FuseVerticalNavigationDividerItemComponent, forwardRef(() => FuseVerticalNavigationGroupItemComponent), FuseVerticalNavigationSpacerItemComponent],
+    standalone: true,
+    imports: [
+        NgClass,
+        NgIf,
+        MatIconModule,
+        NgFor,
+        FuseVerticalNavigationBasicItemComponent,
+        FuseVerticalNavigationCollapsableItemComponent,
+        FuseVerticalNavigationDividerItemComponent,
+        forwardRef(() => FuseVerticalNavigationGroupItemComponent),
+        FuseVerticalNavigationSpacerItemComponent,
+    ],
 })
-export class FuseVerticalNavigationGroupItemComponent implements OnInit, OnDestroy
+export class FuseVerticalNavigationGroupItemComponent
+    implements OnInit, OnDestroy
 {
     /* eslint-disable @typescript-eslint/naming-convention */
     static ngAcceptInputType_autoCollapse: BooleanInput;
@@ -41,26 +61,24 @@ export class FuseVerticalNavigationGroupItemComponent implements OnInit, OnDestr
     /**
      * On init
      */
-    ngOnInit(): void
-    {
+    ngOnInit(): void {
         // Get the parent navigation component
-        this._fuseVerticalNavigationComponent = this._fuseNavigationService.getComponent(this.name);
+        this._fuseVerticalNavigationComponent =
+            this._fuseNavigationService.getComponent(this.name);
 
         // Subscribe to onRefreshed on the navigation component
-        this._fuseVerticalNavigationComponent.onRefreshed.pipe(
-            takeUntil(this._unsubscribeAll),
-        ).subscribe(() =>
-        {
-            // Mark for check
-            this._changeDetectorRef.markForCheck();
-        });
+        this._fuseVerticalNavigationComponent.onRefreshed
+            .pipe(takeUntil(this._unsubscribeAll))
+            .subscribe(() => {
+                // Mark for check
+                this._changeDetectorRef.markForCheck();
+            });
     }
 
     /**
      * On destroy
      */
-    ngOnDestroy(): void
-    {
+    ngOnDestroy(): void {
         // Unsubscribe from all subscriptions
         this._unsubscribeAll.next(null);
         this._unsubscribeAll.complete();
@@ -76,8 +94,7 @@ export class FuseVerticalNavigationGroupItemComponent implements OnInit, OnDestr
      * @param index
      * @param item
      */
-    trackByFn(index: number, item: any): any
-    {
+    trackByFn(index: number, item: any): any {
         return item.id || index;
     }
 }
diff --git a/src/@fuse/components/navigation/vertical/components/spacer/spacer.component.html b/src/@fuse/components/navigation/vertical/components/spacer/spacer.component.html
index 719ed674..b6e7108d 100644
--- a/src/@fuse/components/navigation/vertical/components/spacer/spacer.component.html
+++ b/src/@fuse/components/navigation/vertical/components/spacer/spacer.component.html
@@ -1,4 +1,5 @@
 <!-- Spacer -->
 <div
     class="fuse-vertical-navigation-item-wrapper"
-    [ngClass]="item.classes?.wrapper"></div>
+    [ngClass]="item.classes?.wrapper"
+></div>
diff --git a/src/@fuse/components/navigation/vertical/components/spacer/spacer.component.ts b/src/@fuse/components/navigation/vertical/components/spacer/spacer.component.ts
index 5448b54f..b4bfe232 100644
--- a/src/@fuse/components/navigation/vertical/components/spacer/spacer.component.ts
+++ b/src/@fuse/components/navigation/vertical/components/spacer/spacer.component.ts
@@ -1,18 +1,27 @@
 import { NgClass } from '@angular/common';
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, inject, Input, OnDestroy, OnInit } from '@angular/core';
+import {
+    ChangeDetectionStrategy,
+    ChangeDetectorRef,
+    Component,
+    inject,
+    Input,
+    OnDestroy,
+    OnInit,
+} from '@angular/core';
 import { FuseNavigationService } from '@fuse/components/navigation/navigation.service';
 import { FuseNavigationItem } from '@fuse/components/navigation/navigation.types';
 import { FuseVerticalNavigationComponent } from '@fuse/components/navigation/vertical/vertical.component';
 import { Subject, takeUntil } from 'rxjs';
 
 @Component({
-    selector       : 'fuse-vertical-navigation-spacer-item',
-    templateUrl    : './spacer.component.html',
+    selector: 'fuse-vertical-navigation-spacer-item',
+    templateUrl: './spacer.component.html',
     changeDetection: ChangeDetectionStrategy.OnPush,
-    standalone     : true,
-    imports        : [NgClass],
+    standalone: true,
+    imports: [NgClass],
 })
-export class FuseVerticalNavigationSpacerItemComponent implements OnInit, OnDestroy
+export class FuseVerticalNavigationSpacerItemComponent
+    implements OnInit, OnDestroy
 {
     private _changeDetectorRef = inject(ChangeDetectorRef);
     private _fuseNavigationService = inject(FuseNavigationService);
@@ -30,26 +39,24 @@ export class FuseVerticalNavigationSpacerItemComponent implements OnInit, OnDest
     /**
      * On init
      */
-    ngOnInit(): void
-    {
+    ngOnInit(): void {
         // Get the parent navigation component
-        this._fuseVerticalNavigationComponent = this._fuseNavigationService.getComponent(this.name);
+        this._fuseVerticalNavigationComponent =
+            this._fuseNavigationService.getComponent(this.name);
 
         // Subscribe to onRefreshed on the navigation component
-        this._fuseVerticalNavigationComponent.onRefreshed.pipe(
-            takeUntil(this._unsubscribeAll),
-        ).subscribe(() =>
-        {
-            // Mark for check
-            this._changeDetectorRef.markForCheck();
-        });
+        this._fuseVerticalNavigationComponent.onRefreshed
+            .pipe(takeUntil(this._unsubscribeAll))
+            .subscribe(() => {
+                // Mark for check
+                this._changeDetectorRef.markForCheck();
+            });
     }
 
     /**
      * On destroy
      */
-    ngOnDestroy(): void
-    {
+    ngOnDestroy(): void {
         // Unsubscribe from all subscriptions
         this._unsubscribeAll.next(null);
         this._unsubscribeAll.complete();
diff --git a/src/@fuse/components/navigation/vertical/styles/appearances/compact.scss b/src/@fuse/components/navigation/vertical/styles/appearances/compact.scss
index e91fbc66..e0ed13f2 100644
--- a/src/@fuse/components/navigation/vertical/styles/appearances/compact.scss
+++ b/src/@fuse/components/navigation/vertical/styles/appearances/compact.scss
@@ -4,7 +4,6 @@
 }
 
 fuse-vertical-navigation {
-
     /* Compact appearance overrides */
     &.fuse-vertical-navigation-appearance-compact {
         width: var(--fuse-vertical-navigation-compact-width);
@@ -13,10 +12,11 @@ fuse-vertical-navigation {
 
         /* Left positioned */
         &.fuse-vertical-navigation-position-left {
-
             /* Side mode */
             &.fuse-vertical-navigation-mode-side {
-                margin-left: calc(var(--fuse-vertical-navigation-compact-width) * -1);
+                margin-left: calc(
+                    var(--fuse-vertical-navigation-compact-width) * -1
+                );
             }
 
             /* Opened */
@@ -27,10 +27,11 @@ fuse-vertical-navigation {
 
         /* Right positioned */
         &.fuse-vertical-navigation-position-right {
-
             /* Side mode */
             &.fuse-vertical-navigation-mode-side {
-                margin-right: calc(var(--fuse-vertical-navigation-compact-width) * -1);
+                margin-right: calc(
+                    var(--fuse-vertical-navigation-compact-width) * -1
+                );
             }
 
             /* Opened */
@@ -47,13 +48,10 @@ fuse-vertical-navigation {
 
         /* Wrapper */
         .fuse-vertical-navigation-wrapper {
-
             /* Content */
             .fuse-vertical-navigation-content {
-
                 > fuse-vertical-navigation-aside-item,
                 > fuse-vertical-navigation-basic-item {
-
                     .fuse-vertical-navigation-item-wrapper {
                         margin: 4px 8px 0 8px;
 
@@ -91,13 +89,12 @@ fuse-vertical-navigation {
                     }
 
                     > fuse-vertical-navigation-collapsable-item {
-                        display: none
+                        display: none;
                     }
 
                     > fuse-vertical-navigation-group-item {
-
                         > .fuse-vertical-navigation-item-wrapper {
-                            display: none
+                            display: none;
                         }
                     }
                 }
diff --git a/src/@fuse/components/navigation/vertical/styles/appearances/default.scss b/src/@fuse/components/navigation/vertical/styles/appearances/default.scss
index 61570ce4..2fe8d7cf 100644
--- a/src/@fuse/components/navigation/vertical/styles/appearances/default.scss
+++ b/src/@fuse/components/navigation/vertical/styles/appearances/default.scss
@@ -25,7 +25,8 @@ fuse-vertical-navigation {
     &.fuse-vertical-navigation-animations-enabled {
         transition-duration: 400ms;
         transition-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1);
-        transition-property: visibility, margin-left, margin-right, transform, width, max-width, min-width;
+        transition-property: visibility, margin-left, margin-right, transform,
+            width, max-width, min-width;
 
         /* Wrapper */
         .fuse-vertical-navigation-wrapper {
@@ -44,7 +45,6 @@ fuse-vertical-navigation {
 
     /* Left position */
     &.fuse-vertical-navigation-position-left {
-
         /* Side mode */
         &.fuse-vertical-navigation-mode-side {
             margin-left: calc(#{var(--fuse-vertical-navigation-width)} * -1);
@@ -72,7 +72,6 @@ fuse-vertical-navigation {
 
     /* Right position */
     &.fuse-vertical-navigation-position-right {
-
         /* Side mode */
         &.fuse-vertical-navigation-mode-side {
             margin-right: calc(var(--fuse-vertical-navigation-width) * -1);
@@ -137,7 +136,6 @@ fuse-vertical-navigation {
 
         /* Header */
         .fuse-vertical-navigation-header {
-
         }
 
         /* Content */
@@ -160,7 +158,6 @@ fuse-vertical-navigation {
 
         /* Footer */
         .fuse-vertical-navigation-footer {
-
         }
     }
 
@@ -195,7 +192,6 @@ fuse-vertical-navigation {
     }
 
     &.fuse-vertical-navigation-position-right {
-
         .fuse-vertical-navigation-aside-wrapper {
             left: auto;
             right: var(--fuse-vertical-navigation-width);
@@ -219,7 +215,6 @@ fuse-vertical-navigation {
         user-select: none;
 
         .fuse-vertical-navigation-item-wrapper {
-
             .fuse-vertical-navigation-item {
                 position: relative;
                 display: flex;
@@ -243,7 +238,6 @@ fuse-vertical-navigation {
                 }
 
                 .fuse-vertical-navigation-item-title-wrapper {
-
                     .fuse-vertical-navigation-item-subtitle {
                         font-size: 11px;
                         line-height: 1.5;
@@ -272,7 +266,6 @@ fuse-vertical-navigation {
     fuse-vertical-navigation-basic-item,
     fuse-vertical-navigation-collapsable-item,
     fuse-vertical-navigation-group-item {
-
         > .fuse-vertical-navigation-item-wrapper {
             margin: 0 12px;
         }
@@ -291,23 +284,17 @@ fuse-vertical-navigation {
 
     /* Aside */
     fuse-vertical-navigation-aside-item {
-
     }
 
     /* Basic */
     fuse-vertical-navigation-basic-item {
-
     }
 
     /* Collapsable */
     fuse-vertical-navigation-collapsable-item {
-
         > .fuse-vertical-navigation-item-wrapper {
-
             .fuse-vertical-navigation-item {
-
                 .fuse-vertical-navigation-item-badge {
-
                     + .fuse-vertical-navigation-item-arrow {
                         margin-left: 8px;
                     }
@@ -317,18 +304,16 @@ fuse-vertical-navigation {
                     height: 20px;
                     line-height: 20px;
                     margin-left: auto;
-                    transition: transform 300ms cubic-bezier(0.25, 0.8, 0.25, 1),
-                    color 375ms cubic-bezier(0.25, 0.8, 0.25, 1);
+                    transition:
+                        transform 300ms cubic-bezier(0.25, 0.8, 0.25, 1),
+                        color 375ms cubic-bezier(0.25, 0.8, 0.25, 1);
                 }
             }
         }
 
         &.fuse-vertical-navigation-item-expanded {
-
             > .fuse-vertical-navigation-item-wrapper {
-
                 .fuse-vertical-navigation-item {
-
                     .fuse-vertical-navigation-item-arrow {
                         transform: rotate(90deg);
                     }
@@ -337,7 +322,6 @@ fuse-vertical-navigation {
         }
 
         > .fuse-vertical-navigation-item-children {
-
             > *:first-child {
                 margin-top: 6px;
             }
@@ -346,7 +330,6 @@ fuse-vertical-navigation {
                 padding-bottom: 6px;
 
                 > .fuse-vertical-navigation-item-children {
-
                     > *:last-child {
                         padding-bottom: 0;
                     }
@@ -368,21 +351,18 @@ fuse-vertical-navigation {
 
             /* 2nd level */
             .fuse-vertical-navigation-item-children {
-
                 .fuse-vertical-navigation-item {
                     padding-left: 72px;
                 }
 
                 /* 3rd level */
                 .fuse-vertical-navigation-item-children {
-
                     .fuse-vertical-navigation-item {
                         padding-left: 88px;
                     }
 
                     /* 4th level */
                     .fuse-vertical-navigation-item-children {
-
                         .fuse-vertical-navigation-item {
                             padding-left: 104px;
                         }
@@ -404,18 +384,14 @@ fuse-vertical-navigation {
 
     /* Group */
     fuse-vertical-navigation-group-item {
-
         > .fuse-vertical-navigation-item-wrapper {
-
             .fuse-vertical-navigation-item {
-
                 .fuse-vertical-navigation-item-badge,
                 .fuse-vertical-navigation-item-icon {
                     display: none !important;
                 }
 
                 .fuse-vertical-navigation-item-title-wrapper {
-
                     .fuse-vertical-navigation-item-title {
                         font-size: 12px;
                         font-weight: 600;
@@ -474,9 +450,7 @@ fuse-vertical-navigation-aside-item,
 fuse-vertical-navigation-basic-item,
 fuse-vertical-navigation-collapsable-item,
 fuse-vertical-navigation-group-item {
-
     .fuse-vertical-navigation-item-wrapper {
-
         .fuse-vertical-navigation-item {
             color: currentColor;
 
@@ -485,7 +459,6 @@ fuse-vertical-navigation-group-item {
             }
 
             .fuse-vertical-navigation-item-title-wrapper {
-
                 .fuse-vertical-navigation-item-title {
                     @apply text-current opacity-80;
                 }
@@ -502,14 +475,10 @@ fuse-vertical-navigation-group-item {
 fuse-vertical-navigation-aside-item,
 fuse-vertical-navigation-basic-item,
 fuse-vertical-navigation-collapsable-item {
-
     > .fuse-vertical-navigation-item-wrapper {
-
         .fuse-vertical-navigation-item {
-
             /* Active state */
             &:not(.fuse-vertical-navigation-item-disabled) {
-
                 &.fuse-vertical-navigation-item-active,
                 &.fuse-vertical-navigation-item-active-forced {
                     @apply bg-gray-800 bg-opacity-5 dark:bg-white dark:bg-opacity-12;
@@ -529,8 +498,9 @@ fuse-vertical-navigation-collapsable-item {
             }
 
             /* Hover state */
-            &:not(.fuse-vertical-navigation-item-active-forced):not(.fuse-vertical-navigation-item-active):not(.fuse-vertical-navigation-item-disabled) {
-
+            &:not(.fuse-vertical-navigation-item-active-forced):not(
+                    .fuse-vertical-navigation-item-active
+                ):not(.fuse-vertical-navigation-item-disabled) {
                 &:hover {
                     @apply bg-gray-800 bg-opacity-5 dark:bg-white dark:bg-opacity-12;
 
@@ -554,14 +524,10 @@ fuse-vertical-navigation-collapsable-item {
 
 /* Collapsable */
 fuse-vertical-navigation-collapsable-item {
-
     /* Expanded state */
     &.fuse-vertical-navigation-item-expanded {
-
         > .fuse-vertical-navigation-item-wrapper {
-
             .fuse-vertical-navigation-item {
-
                 .fuse-vertical-navigation-item-icon {
                     @apply opacity-100;
                 }
@@ -581,15 +547,11 @@ fuse-vertical-navigation-collapsable-item {
 
 /* Group */
 fuse-vertical-navigation-group-item {
-
     > .fuse-vertical-navigation-item-wrapper {
-
         .fuse-vertical-navigation-item {
-
             .fuse-vertical-navigation-item-title-wrapper {
-
                 .fuse-vertical-navigation-item-title {
-                    @apply opacity-100 text-primary-600 dark:text-primary-400;
+                    @apply text-primary-600 opacity-100 dark:text-primary-400;
                 }
             }
         }
diff --git a/src/@fuse/components/navigation/vertical/styles/appearances/dense.scss b/src/@fuse/components/navigation/vertical/styles/appearances/dense.scss
index 8bbebe24..6eb7a362 100644
--- a/src/@fuse/components/navigation/vertical/styles/appearances/dense.scss
+++ b/src/@fuse/components/navigation/vertical/styles/appearances/dense.scss
@@ -5,10 +5,8 @@
 }
 
 fuse-vertical-navigation {
-
     /* Dense appearance overrides */
     &.fuse-vertical-navigation-appearance-dense {
-
         &:not(.fuse-vertical-navigation-mode-over) {
             width: var(--fuse-vertical-navigation-dense-width);
             min-width: var(--fuse-vertical-navigation-dense-width);
@@ -16,10 +14,11 @@ fuse-vertical-navigation {
 
             /* Left positioned */
             &.fuse-vertical-navigation-position-left {
-
                 /* Side mode */
                 &.fuse-vertical-navigation-mode-side {
-                    margin-left: calc(var(--fuse-vertical-navigation-dense-width) * -1);
+                    margin-left: calc(
+                        var(--fuse-vertical-navigation-dense-width) * -1
+                    );
                 }
 
                 /* Opened */
@@ -30,10 +29,11 @@ fuse-vertical-navigation {
 
             /* Right positioned */
             &.fuse-vertical-navigation-position-right {
-
                 /* Side mode */
                 &.fuse-vertical-navigation-mode-side {
-                    margin-right: calc(var(--fuse-vertical-navigation-dense-width) * -1);
+                    margin-right: calc(
+                        var(--fuse-vertical-navigation-dense-width) * -1
+                    );
                 }
 
                 /* Opened */
@@ -48,7 +48,6 @@ fuse-vertical-navigation {
                 }
 
                 &.fuse-vertical-navigation-hover {
-
                     .fuse-vertical-navigation-aside-wrapper {
                         left: auto;
                         right: var(--fuse-vertical-navigation-width);
@@ -59,33 +58,38 @@ fuse-vertical-navigation {
 
         /* Wrapper */
         .fuse-vertical-navigation-wrapper {
-
             /* Content */
             .fuse-vertical-navigation-content {
-
                 fuse-vertical-navigation-aside-item,
                 fuse-vertical-navigation-basic-item,
                 fuse-vertical-navigation-collapsable-item,
                 fuse-vertical-navigation-group-item {
-
                     .fuse-vertical-navigation-item-wrapper {
-
                         .fuse-vertical-navigation-item {
-                            width: calc(var(--fuse-vertical-navigation-dense-width) - 24px);
-                            min-width: calc(var(--fuse-vertical-navigation-dense-width) - 24px);
-                            max-width: calc(var(--fuse-vertical-navigation-dense-width) - 24px);
+                            width: calc(
+                                var(--fuse-vertical-navigation-dense-width) -
+                                    24px
+                            );
+                            min-width: calc(
+                                var(--fuse-vertical-navigation-dense-width) -
+                                    24px
+                            );
+                            max-width: calc(
+                                var(--fuse-vertical-navigation-dense-width) -
+                                    24px
+                            );
 
                             .fuse-vertical-navigation-item-arrow,
                             .fuse-vertical-navigation-item-badge,
                             .fuse-vertical-navigation-item-title-wrapper {
-                                transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1);
+                                transition: opacity 400ms
+                                    cubic-bezier(0.25, 0.8, 0.25, 1);
                             }
                         }
                     }
                 }
 
                 fuse-vertical-navigation-group-item {
-
                     &:first-of-type {
                         margin-top: 0;
                     }
@@ -93,16 +97,14 @@ fuse-vertical-navigation {
             }
         }
 
-        &:not(.fuse-vertical-navigation-hover):not(.fuse-vertical-navigation-mode-over) {
-
+        &:not(.fuse-vertical-navigation-hover):not(
+                .fuse-vertical-navigation-mode-over
+            ) {
             /* Wrapper */
             .fuse-vertical-navigation-wrapper {
-
                 /* Content */
                 .fuse-vertical-navigation-content {
-
                     .fuse-vertical-navigation-item-wrapper {
-
                         .fuse-vertical-navigation-item {
                             padding: 10px 16px;
 
@@ -116,18 +118,14 @@ fuse-vertical-navigation {
                     }
 
                     fuse-vertical-navigation-collapsable-item {
-
                         .fuse-vertical-navigation-item-children {
                             display: none;
                         }
                     }
 
                     fuse-vertical-navigation-group-item {
-
                         > .fuse-vertical-navigation-item-wrapper {
-
                             .fuse-vertical-navigation-item {
-
                                 &:before {
                                     content: '';
                                     position: absolute;
@@ -149,24 +147,28 @@ fuse-vertical-navigation {
 
         /* Hover */
         &.fuse-vertical-navigation-hover {
-
             .fuse-vertical-navigation-wrapper {
                 width: var(--fuse-vertical-navigation-width);
 
                 .fuse-vertical-navigation-content {
-
                     .fuse-vertical-navigation-item-wrapper {
-
                         .fuse-vertical-navigation-item {
-                            width: calc(var(--fuse-vertical-navigation-width) - 24px);
-                            min-width: calc(var(--fuse-vertical-navigation-width) - 24px);
-                            max-width: calc(var(--fuse-vertical-navigation-width) - 24px);
+                            width: calc(
+                                var(--fuse-vertical-navigation-width) - 24px
+                            );
+                            min-width: calc(
+                                var(--fuse-vertical-navigation-width) - 24px
+                            );
+                            max-width: calc(
+                                var(--fuse-vertical-navigation-width) - 24px
+                            );
 
                             .fuse-vertical-navigation-item-arrow,
                             .fuse-vertical-navigation-item-badge,
                             .fuse-vertical-navigation-item-title-wrapper {
                                 white-space: nowrap;
-                                animation: removeWhiteSpaceNoWrap 1ms linear 350ms;
+                                animation: removeWhiteSpaceNoWrap 1ms linear
+                                    350ms;
                                 animation-fill-mode: forwards;
                             }
                         }
@@ -183,10 +185,10 @@ fuse-vertical-navigation {
 
 @keyframes removeWhiteSpaceNoWrap {
     0% {
-        white-space: nowrap
+        white-space: nowrap;
     }
     99% {
-        white-space: nowrap
+        white-space: nowrap;
     }
     100% {
         white-space: normal;
diff --git a/src/@fuse/components/navigation/vertical/styles/appearances/thin.scss b/src/@fuse/components/navigation/vertical/styles/appearances/thin.scss
index 997bf254..baeff73b 100644
--- a/src/@fuse/components/navigation/vertical/styles/appearances/thin.scss
+++ b/src/@fuse/components/navigation/vertical/styles/appearances/thin.scss
@@ -4,7 +4,6 @@
 }
 
 fuse-vertical-navigation {
-
     /* Thin appearance overrides */
     &.fuse-vertical-navigation-appearance-thin {
         width: var(--fuse-vertical-navigation-thin-width);
@@ -13,9 +12,10 @@ fuse-vertical-navigation {
 
         /* Left positioned */
         &.fuse-vertical-navigation-position-left {
-
             &.fuse-vertical-navigation-mode-side {
-                margin-left: calc(var(--fuse-vertical-navigation-thin-width) * -1);
+                margin-left: calc(
+                    var(--fuse-vertical-navigation-thin-width) * -1
+                );
             }
 
             &.fuse-vertical-navigation-opened {
@@ -25,9 +25,10 @@ fuse-vertical-navigation {
 
         /* Right positioned */
         &.fuse-vertical-navigation-position-right {
-
             &.fuse-vertical-navigation-mode-side {
-                margin-right: calc(var(--fuse-vertical-navigation-thin-width) * -1);
+                margin-right: calc(
+                    var(--fuse-vertical-navigation-thin-width) * -1
+                );
             }
 
             &.fuse-vertical-navigation-opened {
@@ -42,10 +43,8 @@ fuse-vertical-navigation {
 
         /* Wrapper */
         .fuse-vertical-navigation-wrapper {
-
             /* Content */
             .fuse-vertical-navigation-content {
-
                 > fuse-vertical-navigation-aside-item,
                 > fuse-vertical-navigation-basic-item {
                     flex-direction: column;
@@ -79,13 +78,12 @@ fuse-vertical-navigation {
                 }
 
                 > fuse-vertical-navigation-collapsable-item {
-                    display: none
+                    display: none;
                 }
 
                 > fuse-vertical-navigation-group-item {
-
                     > .fuse-vertical-navigation-item-wrapper {
-                        display: none
+                        display: none;
                     }
                 }
             }
diff --git a/src/@fuse/components/navigation/vertical/vertical.component.html b/src/@fuse/components/navigation/vertical/vertical.component.html
index ef0186e3..d1360e14 100644
--- a/src/@fuse/components/navigation/vertical/vertical.component.html
+++ b/src/@fuse/components/navigation/vertical/vertical.component.html
@@ -1,5 +1,4 @@
 <div class="fuse-vertical-navigation-wrapper">
-
     <!-- Header -->
     <div class="fuse-vertical-navigation-header">
         <ng-content select="[fuseVerticalNavigationHeader]"></ng-content>
@@ -9,20 +8,25 @@
     <div
         class="fuse-vertical-navigation-content"
         fuseScrollbar
-        [fuseScrollbarOptions]="{wheelPropagation: inner, suppressScrollX: true}"
-        #navigationContent>
-
+        [fuseScrollbarOptions]="{
+            wheelPropagation: inner,
+            suppressScrollX: true
+        }"
+        #navigationContent
+    >
         <!-- Content header -->
         <div class="fuse-vertical-navigation-content-header">
-            <ng-content select="[fuseVerticalNavigationContentHeader]"></ng-content>
+            <ng-content
+                select="[fuseVerticalNavigationContentHeader]"
+            ></ng-content>
         </div>
 
         <!-- Items -->
         <ng-container *ngFor="let item of navigation; trackBy: trackByFn">
-
             <!-- Skip the hidden items -->
-            <ng-container *ngIf="(item.hidden && !item.hidden(item)) || !item.hidden">
-
+            <ng-container
+                *ngIf="(item.hidden && !item.hidden(item)) || !item.hidden"
+            >
                 <!-- Aside -->
                 <ng-container *ngIf="item.type === 'aside'">
                     <fuse-vertical-navigation-aside-item
@@ -31,14 +35,16 @@
                         [activeItemId]="activeAsideItemId"
                         [autoCollapse]="autoCollapse"
                         [skipChildren]="true"
-                        (click)="toggleAside(item)"></fuse-vertical-navigation-aside-item>
+                        (click)="toggleAside(item)"
+                    ></fuse-vertical-navigation-aside-item>
                 </ng-container>
 
                 <!-- Basic -->
                 <ng-container *ngIf="item.type === 'basic'">
                     <fuse-vertical-navigation-basic-item
                         [item]="item"
-                        [name]="name"></fuse-vertical-navigation-basic-item>
+                        [name]="name"
+                    ></fuse-vertical-navigation-basic-item>
                 </ng-container>
 
                 <!-- Collapsable -->
@@ -46,14 +52,16 @@
                     <fuse-vertical-navigation-collapsable-item
                         [item]="item"
                         [name]="name"
-                        [autoCollapse]="autoCollapse"></fuse-vertical-navigation-collapsable-item>
+                        [autoCollapse]="autoCollapse"
+                    ></fuse-vertical-navigation-collapsable-item>
                 </ng-container>
 
                 <!-- Divider -->
                 <ng-container *ngIf="item.type === 'divider'">
                     <fuse-vertical-navigation-divider-item
                         [item]="item"
-                        [name]="name"></fuse-vertical-navigation-divider-item>
+                        [name]="name"
+                    ></fuse-vertical-navigation-divider-item>
                 </ng-container>
 
                 <!-- Group -->
@@ -61,32 +69,32 @@
                     <fuse-vertical-navigation-group-item
                         [item]="item"
                         [name]="name"
-                        [autoCollapse]="autoCollapse"></fuse-vertical-navigation-group-item>
+                        [autoCollapse]="autoCollapse"
+                    ></fuse-vertical-navigation-group-item>
                 </ng-container>
 
                 <!-- Spacer -->
                 <ng-container *ngIf="item.type === 'spacer'">
                     <fuse-vertical-navigation-spacer-item
                         [item]="item"
-                        [name]="name"></fuse-vertical-navigation-spacer-item>
+                        [name]="name"
+                    ></fuse-vertical-navigation-spacer-item>
                 </ng-container>
-
             </ng-container>
-
         </ng-container>
 
         <!-- Content footer -->
         <div class="fuse-vertical-navigation-content-footer">
-            <ng-content select="[fuseVerticalNavigationContentFooter]"></ng-content>
+            <ng-content
+                select="[fuseVerticalNavigationContentFooter]"
+            ></ng-content>
         </div>
-
     </div>
 
     <!-- Footer -->
     <div class="fuse-vertical-navigation-footer">
         <ng-content select="[fuseVerticalNavigationFooter]"></ng-content>
     </div>
-
 </div>
 
 <!-- Aside -->
@@ -94,29 +102,34 @@
     <div
         class="fuse-vertical-navigation-aside-wrapper"
         fuseScrollbar
-        [fuseScrollbarOptions]="{wheelPropagation: false, suppressScrollX: true}"
+        [fuseScrollbarOptions]="{
+            wheelPropagation: false,
+            suppressScrollX: true
+        }"
         [@fadeInLeft]="position === 'left'"
         [@fadeInRight]="position === 'right'"
         [@fadeOutLeft]="position === 'left'"
-        [@fadeOutRight]="position === 'right'">
-
+        [@fadeOutRight]="position === 'right'"
+    >
         <!-- Items -->
         <ng-container *ngFor="let item of navigation; trackBy: trackByFn">
-
             <!-- Skip the hidden items -->
-            <ng-container *ngIf="(item.hidden && !item.hidden(item)) || !item.hidden">
-
+            <ng-container
+                *ngIf="(item.hidden && !item.hidden(item)) || !item.hidden"
+            >
                 <!-- Aside -->
-                <ng-container *ngIf="item.type === 'aside' && item.id === activeAsideItemId">
+                <ng-container
+                    *ngIf="
+                        item.type === 'aside' && item.id === activeAsideItemId
+                    "
+                >
                     <fuse-vertical-navigation-aside-item
                         [item]="item"
                         [name]="name"
-                        [autoCollapse]="autoCollapse"></fuse-vertical-navigation-aside-item>
+                        [autoCollapse]="autoCollapse"
+                    ></fuse-vertical-navigation-aside-item>
                 </ng-container>
-
             </ng-container>
-
         </ng-container>
-
     </div>
 </ng-container>
diff --git a/src/@fuse/components/navigation/vertical/vertical.component.ts b/src/@fuse/components/navigation/vertical/vertical.component.ts
index bf8f0052..8913ad47 100644
--- a/src/@fuse/components/navigation/vertical/vertical.component.ts
+++ b/src/@fuse/components/navigation/vertical/vertical.component.ts
@@ -1,12 +1,43 @@
-import { animate, AnimationBuilder, AnimationPlayer, style } from '@angular/animations';
+import {
+    animate,
+    AnimationBuilder,
+    AnimationPlayer,
+    style,
+} from '@angular/animations';
 import { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion';
 import { ScrollStrategy, ScrollStrategyOptions } from '@angular/cdk/overlay';
 import { DOCUMENT, NgFor, NgIf } from '@angular/common';
-import { AfterViewInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, EventEmitter, HostBinding, HostListener, inject, Input, OnChanges, OnDestroy, OnInit, Output, QueryList, Renderer2, SimpleChanges, ViewChild, ViewChildren, ViewEncapsulation } from '@angular/core';
+import {
+    AfterViewInit,
+    ChangeDetectionStrategy,
+    ChangeDetectorRef,
+    Component,
+    ElementRef,
+    EventEmitter,
+    HostBinding,
+    HostListener,
+    inject,
+    Input,
+    OnChanges,
+    OnDestroy,
+    OnInit,
+    Output,
+    QueryList,
+    Renderer2,
+    SimpleChanges,
+    ViewChild,
+    ViewChildren,
+    ViewEncapsulation,
+} from '@angular/core';
 import { NavigationEnd, Router } from '@angular/router';
 import { fuseAnimations } from '@fuse/animations';
 import { FuseNavigationService } from '@fuse/components/navigation/navigation.service';
-import { FuseNavigationItem, FuseVerticalNavigationAppearance, FuseVerticalNavigationMode, FuseVerticalNavigationPosition } from '@fuse/components/navigation/navigation.types';
+import {
+    FuseNavigationItem,
+    FuseVerticalNavigationAppearance,
+    FuseVerticalNavigationMode,
+    FuseVerticalNavigationPosition,
+} from '@fuse/components/navigation/navigation.types';
 import { FuseVerticalNavigationAsideItemComponent } from '@fuse/components/navigation/vertical/components/aside/aside.component';
 import { FuseVerticalNavigationBasicItemComponent } from '@fuse/components/navigation/vertical/components/basic/basic.component';
 import { FuseVerticalNavigationCollapsableItemComponent } from '@fuse/components/navigation/vertical/components/collapsable/collapsable.component';
@@ -15,20 +46,39 @@ import { FuseVerticalNavigationGroupItemComponent } from '@fuse/components/navig
 import { FuseVerticalNavigationSpacerItemComponent } from '@fuse/components/navigation/vertical/components/spacer/spacer.component';
 import { FuseScrollbarDirective } from '@fuse/directives/scrollbar/scrollbar.directive';
 import { FuseUtilsService } from '@fuse/services/utils/utils.service';
-import { delay, filter, merge, ReplaySubject, Subject, Subscription, takeUntil } from 'rxjs';
+import {
+    delay,
+    filter,
+    merge,
+    ReplaySubject,
+    Subject,
+    Subscription,
+    takeUntil,
+} from 'rxjs';
 
 @Component({
-    selector       : 'fuse-vertical-navigation',
-    templateUrl    : './vertical.component.html',
-    styleUrls      : ['./vertical.component.scss'],
-    animations     : fuseAnimations,
-    encapsulation  : ViewEncapsulation.None,
+    selector: 'fuse-vertical-navigation',
+    templateUrl: './vertical.component.html',
+    styleUrls: ['./vertical.component.scss'],
+    animations: fuseAnimations,
+    encapsulation: ViewEncapsulation.None,
     changeDetection: ChangeDetectionStrategy.OnPush,
-    exportAs       : 'fuseVerticalNavigation',
-    standalone     : true,
-    imports        : [FuseScrollbarDirective, NgFor, NgIf, FuseVerticalNavigationAsideItemComponent, FuseVerticalNavigationBasicItemComponent, FuseVerticalNavigationCollapsableItemComponent, FuseVerticalNavigationDividerItemComponent, FuseVerticalNavigationGroupItemComponent, FuseVerticalNavigationSpacerItemComponent],
+    exportAs: 'fuseVerticalNavigation',
+    standalone: true,
+    imports: [
+        FuseScrollbarDirective,
+        NgFor,
+        NgIf,
+        FuseVerticalNavigationAsideItemComponent,
+        FuseVerticalNavigationBasicItemComponent,
+        FuseVerticalNavigationCollapsableItemComponent,
+        FuseVerticalNavigationDividerItemComponent,
+        FuseVerticalNavigationGroupItemComponent,
+        FuseVerticalNavigationSpacerItemComponent,
+    ],
 })
-export class FuseVerticalNavigationComponent implements OnChanges, OnInit, AfterViewInit, OnDestroy
+export class FuseVerticalNavigationComponent
+    implements OnChanges, OnInit, AfterViewInit, OnDestroy
 {
     /* eslint-disable @typescript-eslint/naming-convention */
     static ngAcceptInputType_inner: BooleanInput;
@@ -55,15 +105,23 @@ export class FuseVerticalNavigationComponent implements OnChanges, OnInit, After
     @Input() opened: boolean = true;
     @Input() position: FuseVerticalNavigationPosition = 'left';
     @Input() transparentOverlay: boolean = false;
-    @Output() readonly appearanceChanged: EventEmitter<FuseVerticalNavigationAppearance> = new EventEmitter<FuseVerticalNavigationAppearance>();
-    @Output() readonly modeChanged: EventEmitter<FuseVerticalNavigationMode> = new EventEmitter<FuseVerticalNavigationMode>();
-    @Output() readonly openedChanged: EventEmitter<boolean> = new EventEmitter<boolean>();
-    @Output() readonly positionChanged: EventEmitter<FuseVerticalNavigationPosition> = new EventEmitter<FuseVerticalNavigationPosition>();
+    @Output()
+    readonly appearanceChanged: EventEmitter<FuseVerticalNavigationAppearance> =
+        new EventEmitter<FuseVerticalNavigationAppearance>();
+    @Output() readonly modeChanged: EventEmitter<FuseVerticalNavigationMode> =
+        new EventEmitter<FuseVerticalNavigationMode>();
+    @Output() readonly openedChanged: EventEmitter<boolean> =
+        new EventEmitter<boolean>();
+    @Output()
+    readonly positionChanged: EventEmitter<FuseVerticalNavigationPosition> =
+        new EventEmitter<FuseVerticalNavigationPosition>();
     @ViewChild('navigationContent') private _navigationContentEl: ElementRef;
 
     activeAsideItemId: string | null = null;
-    onCollapsableItemCollapsed: ReplaySubject<FuseNavigationItem> = new ReplaySubject<FuseNavigationItem>(1);
-    onCollapsableItemExpanded: ReplaySubject<FuseNavigationItem> = new ReplaySubject<FuseNavigationItem>(1);
+    onCollapsableItemCollapsed: ReplaySubject<FuseNavigationItem> =
+        new ReplaySubject<FuseNavigationItem>(1);
+    onCollapsableItemExpanded: ReplaySubject<FuseNavigationItem> =
+        new ReplaySubject<FuseNavigationItem>(1);
     onRefreshed: ReplaySubject<boolean> = new ReplaySubject<boolean>(1);
     private _animationsEnabled: boolean = false;
     private _asideOverlay: HTMLElement;
@@ -73,7 +131,8 @@ export class FuseVerticalNavigationComponent implements OnChanges, OnInit, After
     private _mutationObserver: MutationObserver;
     private _overlay: HTMLElement;
     private _player: AnimationPlayer;
-    private _scrollStrategy: ScrollStrategy = this._scrollStrategyOptions.block();
+    private _scrollStrategy: ScrollStrategy =
+        this._scrollStrategyOptions.block();
     private _fuseScrollbarDirectives!: QueryList<FuseScrollbarDirective>;
     private _fuseScrollbarDirectivesSubscription: Subscription;
     private _unsubscribeAll: Subject<any> = new Subject<any>();
@@ -81,14 +140,11 @@ export class FuseVerticalNavigationComponent implements OnChanges, OnInit, After
     /**
      * Constructor
      */
-    constructor()
-    {
-        this._handleAsideOverlayClick = (): void =>
-        {
+    constructor() {
+        this._handleAsideOverlayClick = (): void => {
             this.closeAside();
         };
-        this._handleOverlayClick = (): void =>
-        {
+        this._handleOverlayClick = (): void => {
             this.close();
         };
     }
@@ -100,19 +156,20 @@ export class FuseVerticalNavigationComponent implements OnChanges, OnInit, After
     /**
      * Host binding for component classes
      */
-    @HostBinding('class') get classList(): any
-    {
+    @HostBinding('class') get classList(): any {
         /* eslint-disable @typescript-eslint/naming-convention */
         return {
-            'fuse-vertical-navigation-animations-enabled'             : this._animationsEnabled,
+            'fuse-vertical-navigation-animations-enabled':
+                this._animationsEnabled,
             [`fuse-vertical-navigation-appearance-${this.appearance}`]: true,
-            'fuse-vertical-navigation-hover'                          : this._hovered,
-            'fuse-vertical-navigation-inner'                          : this.inner,
-            'fuse-vertical-navigation-mode-over'                      : this.mode === 'over',
-            'fuse-vertical-navigation-mode-side'                      : this.mode === 'side',
-            'fuse-vertical-navigation-opened'                         : this.opened,
-            'fuse-vertical-navigation-position-left'                  : this.position === 'left',
-            'fuse-vertical-navigation-position-right'                 : this.position === 'right',
+            'fuse-vertical-navigation-hover': this._hovered,
+            'fuse-vertical-navigation-inner': this.inner,
+            'fuse-vertical-navigation-mode-over': this.mode === 'over',
+            'fuse-vertical-navigation-mode-side': this.mode === 'side',
+            'fuse-vertical-navigation-opened': this.opened,
+            'fuse-vertical-navigation-position-left': this.position === 'left',
+            'fuse-vertical-navigation-position-right':
+                this.position === 'right',
         };
         /* eslint-enable @typescript-eslint/naming-convention */
     }
@@ -120,10 +177,9 @@ export class FuseVerticalNavigationComponent implements OnChanges, OnInit, After
     /**
      * Host binding for component inline styles
      */
-    @HostBinding('style') get styleList(): any
-    {
+    @HostBinding('style') get styleList(): any {
         return {
-            'visibility': this.opened ? 'visible' : 'hidden',
+            visibility: this.opened ? 'visible' : 'hidden',
         };
     }
 
@@ -131,41 +187,34 @@ export class FuseVerticalNavigationComponent implements OnChanges, OnInit, After
      * Setter for fuseScrollbarDirectives
      */
     @ViewChildren(FuseScrollbarDirective)
-    set fuseScrollbarDirectives(fuseScrollbarDirectives: QueryList<FuseScrollbarDirective>)
-    {
+    set fuseScrollbarDirectives(
+        fuseScrollbarDirectives: QueryList<FuseScrollbarDirective>
+    ) {
         // Store the directives
         this._fuseScrollbarDirectives = fuseScrollbarDirectives;
 
         // Return if there are no directives
-        if ( fuseScrollbarDirectives.length === 0 )
-        {
+        if (fuseScrollbarDirectives.length === 0) {
             return;
         }
 
         // Unsubscribe the previous subscriptions
-        if ( this._fuseScrollbarDirectivesSubscription )
-        {
+        if (this._fuseScrollbarDirectivesSubscription) {
             this._fuseScrollbarDirectivesSubscription.unsubscribe();
         }
 
         // Update the scrollbars on collapsable items' collapse/expand
-        this._fuseScrollbarDirectivesSubscription =
-            merge(
-                this.onCollapsableItemCollapsed,
-                this.onCollapsableItemExpanded,
-            )
-                .pipe(
-                    takeUntil(this._unsubscribeAll),
-                    delay(250),
-                )
-                .subscribe(() =>
-                {
-                    // Loop through the scrollbars and update them
-                    fuseScrollbarDirectives.forEach((fuseScrollbarDirective) =>
-                    {
-                        fuseScrollbarDirective.update();
-                    });
+        this._fuseScrollbarDirectivesSubscription = merge(
+            this.onCollapsableItemCollapsed,
+            this.onCollapsableItemExpanded
+        )
+            .pipe(takeUntil(this._unsubscribeAll), delay(250))
+            .subscribe(() => {
+                // Loop through the scrollbars and update them
+                fuseScrollbarDirectives.forEach((fuseScrollbarDirective) => {
+                    fuseScrollbarDirective.update();
                 });
+            });
     }
 
     // -----------------------------------------------------------------------------------------------------
@@ -178,8 +227,7 @@ export class FuseVerticalNavigationComponent implements OnChanges, OnInit, After
      * @private
      */
     @HostListener('mouseenter')
-    private _onMouseenter(): void
-    {
+    private _onMouseenter(): void {
         // Enable the animations
         this._enableAnimations();
 
@@ -193,8 +241,7 @@ export class FuseVerticalNavigationComponent implements OnChanges, OnInit, After
      * @private
      */
     @HostListener('mouseleave')
-    private _onMouseleave(): void
-    {
+    private _onMouseleave(): void {
         // Enable the animations
         this._enableAnimations();
 
@@ -211,25 +258,21 @@ export class FuseVerticalNavigationComponent implements OnChanges, OnInit, After
      *
      * @param changes
      */
-    ngOnChanges(changes: SimpleChanges): void
-    {
+    ngOnChanges(changes: SimpleChanges): void {
         // Appearance
-        if ( 'appearance' in changes )
-        {
+        if ('appearance' in changes) {
             // Execute the observable
             this.appearanceChanged.next(changes.appearance.currentValue);
         }
 
         // Inner
-        if ( 'inner' in changes )
-        {
+        if ('inner' in changes) {
             // Coerce the value to a boolean
             this.inner = coerceBooleanProperty(changes.inner.currentValue);
         }
 
         // Mode
-        if ( 'mode' in changes )
-        {
+        if ('mode' in changes) {
             // Get the previous and current values
             const currentMode = changes.mode.currentValue;
             const previousMode = changes.mode.previousValue;
@@ -238,21 +281,18 @@ export class FuseVerticalNavigationComponent implements OnChanges, OnInit, After
             this._disableAnimations();
 
             // If the mode changes: 'over -> side'
-            if ( previousMode === 'over' && currentMode === 'side' )
-            {
+            if (previousMode === 'over' && currentMode === 'side') {
                 // Hide the overlay
                 this._hideOverlay();
             }
 
             // If the mode changes: 'side -> over'
-            if ( previousMode === 'side' && currentMode === 'over' )
-            {
+            if (previousMode === 'side' && currentMode === 'over') {
                 // Close the aside
                 this.closeAside();
 
                 // If the navigation is opened
-                if ( this.opened )
-                {
+                if (this.opened) {
                     // Show the overlay
                     this._showOverlay();
                 }
@@ -264,22 +304,19 @@ export class FuseVerticalNavigationComponent implements OnChanges, OnInit, After
             // Enable the animations after a delay
             // The delay must be bigger than the current transition-duration
             // to make sure nothing will be animated while the mode changing
-            setTimeout(() =>
-            {
+            setTimeout(() => {
                 this._enableAnimations();
             }, 500);
         }
 
         // Navigation
-        if ( 'navigation' in changes )
-        {
+        if ('navigation' in changes) {
             // Mark for check
             this._changeDetectorRef.markForCheck();
         }
 
         // Opened
-        if ( 'opened' in changes )
-        {
+        if ('opened' in changes) {
             // Coerce the value to a boolean
             this.opened = coerceBooleanProperty(changes.opened.currentValue);
 
@@ -288,28 +325,26 @@ export class FuseVerticalNavigationComponent implements OnChanges, OnInit, After
         }
 
         // Position
-        if ( 'position' in changes )
-        {
+        if ('position' in changes) {
             // Execute the observable
             this.positionChanged.next(changes.position.currentValue);
         }
 
         // Transparent overlay
-        if ( 'transparentOverlay' in changes )
-        {
+        if ('transparentOverlay' in changes) {
             // Coerce the value to a boolean
-            this.transparentOverlay = coerceBooleanProperty(changes.transparentOverlay.currentValue);
+            this.transparentOverlay = coerceBooleanProperty(
+                changes.transparentOverlay.currentValue
+            );
         }
     }
 
     /**
      * On init
      */
-    ngOnInit(): void
-    {
+    ngOnInit(): void {
         // Make sure the name input is not an empty string
-        if ( this.name === '' )
-        {
+        if (this.name === '') {
             this.name = this._fuseUtilsService.randomId();
         }
 
@@ -319,21 +354,18 @@ export class FuseVerticalNavigationComponent implements OnChanges, OnInit, After
         // Subscribe to the 'NavigationEnd' event
         this._router.events
             .pipe(
-                filter(event => event instanceof NavigationEnd),
-                takeUntil(this._unsubscribeAll),
+                filter((event) => event instanceof NavigationEnd),
+                takeUntil(this._unsubscribeAll)
             )
-            .subscribe(() =>
-            {
+            .subscribe(() => {
                 // If the mode is 'over' and the navigation is opened...
-                if ( this.mode === 'over' && this.opened )
-                {
+                if (this.mode === 'over' && this.opened) {
                     // Close the navigation
                     this.close();
                 }
 
                 // If the mode is 'side' and the aside is active...
-                if ( this.mode === 'side' && this.activeAsideItemId )
-                {
+                if (this.mode === 'side' && this.activeAsideItemId) {
                     // Close the aside
                     this.closeAside();
                 }
@@ -343,74 +375,85 @@ export class FuseVerticalNavigationComponent implements OnChanges, OnInit, After
     /**
      * After view init
      */
-    ngAfterViewInit(): void
-    {
+    ngAfterViewInit(): void {
         // Fix for Firefox.
         //
         // Because 'position: sticky' doesn't work correctly inside a 'position: fixed' parent,
         // adding the '.cdk-global-scrollblock' to the html element breaks the navigation's position.
         // This fixes the problem by reading the 'top' value from the html element and adding it as a
         // 'marginTop' to the navigation itself.
-        this._mutationObserver = new MutationObserver((mutations) =>
-        {
-            mutations.forEach((mutation) =>
-            {
+        this._mutationObserver = new MutationObserver((mutations) => {
+            mutations.forEach((mutation) => {
                 const mutationTarget = mutation.target as HTMLElement;
-                if ( mutation.attributeName === 'class' )
-                {
-                    if ( mutationTarget.classList.contains('cdk-global-scrollblock') )
-                    {
+                if (mutation.attributeName === 'class') {
+                    if (
+                        mutationTarget.classList.contains(
+                            'cdk-global-scrollblock'
+                        )
+                    ) {
                         const top = parseInt(mutationTarget.style.top, 10);
-                        this._renderer2.setStyle(this._elementRef.nativeElement, 'margin-top', `${Math.abs(top)}px`);
-                    }
-                    else
-                    {
-                        this._renderer2.setStyle(this._elementRef.nativeElement, 'margin-top', null);
+                        this._renderer2.setStyle(
+                            this._elementRef.nativeElement,
+                            'margin-top',
+                            `${Math.abs(top)}px`
+                        );
+                    } else {
+                        this._renderer2.setStyle(
+                            this._elementRef.nativeElement,
+                            'margin-top',
+                            null
+                        );
                     }
                 }
             });
         });
         this._mutationObserver.observe(this._document.documentElement, {
-            attributes     : true,
+            attributes: true,
             attributeFilter: ['class'],
         });
 
-        setTimeout(() =>
-        {
+        setTimeout(() => {
             // Return if 'navigation content' element does not exist
-            if ( !this._navigationContentEl )
-            {
+            if (!this._navigationContentEl) {
                 return;
             }
 
             // If 'navigation content' element doesn't have
             // perfect scrollbar activated on it...
-            if ( !this._navigationContentEl.nativeElement.classList.contains('ps') )
-            {
+            if (
+                !this._navigationContentEl.nativeElement.classList.contains(
+                    'ps'
+                )
+            ) {
                 // Find the active item
-                const activeItem = this._navigationContentEl.nativeElement.querySelector('.fuse-vertical-navigation-item-active');
+                const activeItem =
+                    this._navigationContentEl.nativeElement.querySelector(
+                        '.fuse-vertical-navigation-item-active'
+                    );
 
                 // If the active item exists, scroll it into view
-                if ( activeItem )
-                {
+                if (activeItem) {
                     activeItem.scrollIntoView();
                 }
             }
             // Otherwise
-            else
-            {
+            else {
                 // Go through all the scrollbar directives
-                this._fuseScrollbarDirectives.forEach((fuseScrollbarDirective) =>
-                {
-                    // Skip if not enabled
-                    if ( !fuseScrollbarDirective.isEnabled() )
-                    {
-                        return;
-                    }
+                this._fuseScrollbarDirectives.forEach(
+                    (fuseScrollbarDirective) => {
+                        // Skip if not enabled
+                        if (!fuseScrollbarDirective.isEnabled()) {
+                            return;
+                        }
 
-                    // Scroll to the active element
-                    fuseScrollbarDirective.scrollToElement('.fuse-vertical-navigation-item-active', -120, true);
-                });
+                        // Scroll to the active element
+                        fuseScrollbarDirective.scrollToElement(
+                            '.fuse-vertical-navigation-item-active',
+                            -120,
+                            true
+                        );
+                    }
+                );
             }
         });
     }
@@ -418,8 +461,7 @@ export class FuseVerticalNavigationComponent implements OnChanges, OnInit, After
     /**
      * On destroy
      */
-    ngOnDestroy(): void
-    {
+    ngOnDestroy(): void {
         // Disconnect the mutation observer
         this._mutationObserver.disconnect();
 
@@ -442,8 +484,7 @@ export class FuseVerticalNavigationComponent implements OnChanges, OnInit, After
     /**
      * Refresh the component to apply the changes
      */
-    refresh(): void
-    {
+    refresh(): void {
         // Mark for check
         this._changeDetectorRef.markForCheck();
 
@@ -454,11 +495,9 @@ export class FuseVerticalNavigationComponent implements OnChanges, OnInit, After
     /**
      * Open the navigation
      */
-    open(): void
-    {
+    open(): void {
         // Return if the navigation is already open
-        if ( this.opened )
-        {
+        if (this.opened) {
             return;
         }
 
@@ -469,11 +508,9 @@ export class FuseVerticalNavigationComponent implements OnChanges, OnInit, After
     /**
      * Close the navigation
      */
-    close(): void
-    {
+    close(): void {
         // Return if the navigation is already closed
-        if ( !this.opened )
-        {
+        if (!this.opened) {
             return;
         }
 
@@ -487,15 +524,11 @@ export class FuseVerticalNavigationComponent implements OnChanges, OnInit, After
     /**
      * Toggle the navigation
      */
-    toggle(): void
-    {
+    toggle(): void {
         // Toggle
-        if ( this.opened )
-        {
+        if (this.opened) {
             this.close();
-        }
-        else
-        {
+        } else {
             this.open();
         }
     }
@@ -505,11 +538,9 @@ export class FuseVerticalNavigationComponent implements OnChanges, OnInit, After
      *
      * @param item
      */
-    openAside(item: FuseNavigationItem): void
-    {
+    openAside(item: FuseNavigationItem): void {
         // Return if the item is disabled
-        if ( item.disabled || !item.id )
-        {
+        if (item.disabled || !item.id) {
             return;
         }
 
@@ -526,8 +557,7 @@ export class FuseVerticalNavigationComponent implements OnChanges, OnInit, After
     /**
      * Close the aside
      */
-    closeAside(): void
-    {
+    closeAside(): void {
         // Close
         this.activeAsideItemId = null;
 
@@ -543,15 +573,11 @@ export class FuseVerticalNavigationComponent implements OnChanges, OnInit, After
      *
      * @param item
      */
-    toggleAside(item: FuseNavigationItem): void
-    {
+    toggleAside(item: FuseNavigationItem): void {
         // Toggle
-        if ( this.activeAsideItemId === item.id )
-        {
+        if (this.activeAsideItemId === item.id) {
             this.closeAside();
-        }
-        else
-        {
+        } else {
             this.openAside(item);
         }
     }
@@ -562,8 +588,7 @@ export class FuseVerticalNavigationComponent implements OnChanges, OnInit, After
      * @param index
      * @param item
      */
-    trackByFn(index: number, item: any): any
-    {
+    trackByFn(index: number, item: any): any {
         return item.id || index;
     }
 
@@ -576,11 +601,9 @@ export class FuseVerticalNavigationComponent implements OnChanges, OnInit, After
      *
      * @private
      */
-    private _enableAnimations(): void
-    {
+    private _enableAnimations(): void {
         // Return if the animations are already enabled
-        if ( this._animationsEnabled )
-        {
+        if (this._animationsEnabled) {
             return;
         }
 
@@ -593,11 +616,9 @@ export class FuseVerticalNavigationComponent implements OnChanges, OnInit, After
      *
      * @private
      */
-    private _disableAnimations(): void
-    {
+    private _disableAnimations(): void {
         // Return if the animations are already disabled
-        if ( !this._animationsEnabled )
-        {
+        if (!this._animationsEnabled) {
             return;
         }
 
@@ -610,11 +631,9 @@ export class FuseVerticalNavigationComponent implements OnChanges, OnInit, After
      *
      * @private
      */
-    private _showOverlay(): void
-    {
+    private _showOverlay(): void {
         // Return if there is already an overlay
-        if ( this._asideOverlay )
-        {
+        if (this._asideOverlay) {
             return;
         }
 
@@ -625,21 +644,30 @@ export class FuseVerticalNavigationComponent implements OnChanges, OnInit, After
         this._overlay.classList.add('fuse-vertical-navigation-overlay');
 
         // Add a class depending on the transparentOverlay option
-        if ( this.transparentOverlay )
-        {
-            this._overlay.classList.add('fuse-vertical-navigation-overlay-transparent');
+        if (this.transparentOverlay) {
+            this._overlay.classList.add(
+                'fuse-vertical-navigation-overlay-transparent'
+            );
         }
 
         // Append the overlay to the parent of the navigation
-        this._renderer2.appendChild(this._elementRef.nativeElement.parentElement, this._overlay);
+        this._renderer2.appendChild(
+            this._elementRef.nativeElement.parentElement,
+            this._overlay
+        );
 
         // Enable block scroll strategy
         this._scrollStrategy.enable();
 
         // Create the enter animation and attach it to the player
-        this._player = this._animationBuilder.build([
-            animate('300ms cubic-bezier(0.25, 0.8, 0.25, 1)', style({opacity: 1})),
-        ]).create(this._overlay);
+        this._player = this._animationBuilder
+            .build([
+                animate(
+                    '300ms cubic-bezier(0.25, 0.8, 0.25, 1)',
+                    style({ opacity: 1 })
+                ),
+            ])
+            .create(this._overlay);
 
         // Play the animation
         this._player.play();
@@ -653,29 +681,33 @@ export class FuseVerticalNavigationComponent implements OnChanges, OnInit, After
      *
      * @private
      */
-    private _hideOverlay(): void
-    {
-        if ( !this._overlay )
-        {
+    private _hideOverlay(): void {
+        if (!this._overlay) {
             return;
         }
 
         // Create the leave animation and attach it to the player
-        this._player = this._animationBuilder.build([
-            animate('300ms cubic-bezier(0.25, 0.8, 0.25, 1)', style({opacity: 0})),
-        ]).create(this._overlay);
+        this._player = this._animationBuilder
+            .build([
+                animate(
+                    '300ms cubic-bezier(0.25, 0.8, 0.25, 1)',
+                    style({ opacity: 0 })
+                ),
+            ])
+            .create(this._overlay);
 
         // Play the animation
         this._player.play();
 
         // Once the animation is done...
-        this._player.onDone(() =>
-        {
+        this._player.onDone(() => {
             // If the overlay still exists...
-            if ( this._overlay )
-            {
+            if (this._overlay) {
                 // Remove the event listener
-                this._overlay.removeEventListener('click', this._handleOverlayClick);
+                this._overlay.removeEventListener(
+                    'click',
+                    this._handleOverlayClick
+                );
 
                 // Remove the overlay
                 this._overlay.parentNode.removeChild(this._overlay);
@@ -692,11 +724,9 @@ export class FuseVerticalNavigationComponent implements OnChanges, OnInit, After
      *
      * @private
      */
-    private _showAsideOverlay(): void
-    {
+    private _showAsideOverlay(): void {
         // Return if there is already an overlay
-        if ( this._asideOverlay )
-        {
+        if (this._asideOverlay) {
             return;
         }
 
@@ -704,23 +734,34 @@ export class FuseVerticalNavigationComponent implements OnChanges, OnInit, After
         this._asideOverlay = this._renderer2.createElement('div');
 
         // Add a class to the aside overlay element
-        this._asideOverlay.classList.add('fuse-vertical-navigation-aside-overlay');
+        this._asideOverlay.classList.add(
+            'fuse-vertical-navigation-aside-overlay'
+        );
 
         // Append the aside overlay to the parent of the navigation
-        this._renderer2.appendChild(this._elementRef.nativeElement.parentElement, this._asideOverlay);
+        this._renderer2.appendChild(
+            this._elementRef.nativeElement.parentElement,
+            this._asideOverlay
+        );
 
         // Create the enter animation and attach it to the player
-        this._player =
-            this._animationBuilder
-                .build([
-                    animate('300ms cubic-bezier(0.25, 0.8, 0.25, 1)', style({opacity: 1})),
-                ]).create(this._asideOverlay);
+        this._player = this._animationBuilder
+            .build([
+                animate(
+                    '300ms cubic-bezier(0.25, 0.8, 0.25, 1)',
+                    style({ opacity: 1 })
+                ),
+            ])
+            .create(this._asideOverlay);
 
         // Play the animation
         this._player.play();
 
         // Add an event listener to the aside overlay
-        this._asideOverlay.addEventListener('click', this._handleAsideOverlayClick);
+        this._asideOverlay.addEventListener(
+            'click',
+            this._handleAsideOverlayClick
+        );
     }
 
     /**
@@ -728,31 +769,33 @@ export class FuseVerticalNavigationComponent implements OnChanges, OnInit, After
      *
      * @private
      */
-    private _hideAsideOverlay(): void
-    {
-        if ( !this._asideOverlay )
-        {
+    private _hideAsideOverlay(): void {
+        if (!this._asideOverlay) {
             return;
         }
 
         // Create the leave animation and attach it to the player
-        this._player =
-            this._animationBuilder
-                .build([
-                    animate('300ms cubic-bezier(0.25, 0.8, 0.25, 1)', style({opacity: 0})),
-                ]).create(this._asideOverlay);
+        this._player = this._animationBuilder
+            .build([
+                animate(
+                    '300ms cubic-bezier(0.25, 0.8, 0.25, 1)',
+                    style({ opacity: 0 })
+                ),
+            ])
+            .create(this._asideOverlay);
 
         // Play the animation
         this._player.play();
 
         // Once the animation is done...
-        this._player.onDone(() =>
-        {
+        this._player.onDone(() => {
             // If the aside overlay still exists...
-            if ( this._asideOverlay )
-            {
+            if (this._asideOverlay) {
                 // Remove the event listener
-                this._asideOverlay.removeEventListener('click', this._handleAsideOverlayClick);
+                this._asideOverlay.removeEventListener(
+                    'click',
+                    this._handleAsideOverlayClick
+                );
 
                 // Remove the aside overlay
                 this._asideOverlay.parentNode.removeChild(this._asideOverlay);
@@ -767,8 +810,7 @@ export class FuseVerticalNavigationComponent implements OnChanges, OnInit, After
      * @param open
      * @private
      */
-    private _toggleOpened(open: boolean): void
-    {
+    private _toggleOpened(open: boolean): void {
         // Set the opened
         this.opened = open;
 
@@ -777,14 +819,10 @@ export class FuseVerticalNavigationComponent implements OnChanges, OnInit, After
 
         // If the navigation opened, and the mode
         // is 'over', show the overlay
-        if ( this.mode === 'over' )
-        {
-            if ( this.opened )
-            {
+        if (this.mode === 'over') {
+            if (this.opened) {
                 this._showOverlay();
-            }
-            else
-            {
+            } else {
                 this._hideOverlay();
             }
         }
diff --git a/src/@fuse/directives/scroll-reset/scroll-reset.directive.ts b/src/@fuse/directives/scroll-reset/scroll-reset.directive.ts
index 17fae846..f06ec64d 100644
--- a/src/@fuse/directives/scroll-reset/scroll-reset.directive.ts
+++ b/src/@fuse/directives/scroll-reset/scroll-reset.directive.ts
@@ -1,14 +1,19 @@
-import { Directive, ElementRef, inject, OnDestroy, OnInit } from '@angular/core';
+import {
+    Directive,
+    ElementRef,
+    inject,
+    OnDestroy,
+    OnInit,
+} from '@angular/core';
 import { NavigationEnd, Router } from '@angular/router';
 import { filter, Subject, takeUntil } from 'rxjs';
 
 @Directive({
-    selector  : '[fuseScrollReset]',
-    exportAs  : 'fuseScrollReset',
+    selector: '[fuseScrollReset]',
+    exportAs: 'fuseScrollReset',
     standalone: true,
 })
-export class FuseScrollResetDirective implements OnInit, OnDestroy
-{
+export class FuseScrollResetDirective implements OnInit, OnDestroy {
     private _elementRef = inject(ElementRef);
     private _router = inject(Router);
 
@@ -21,24 +26,23 @@ export class FuseScrollResetDirective implements OnInit, OnDestroy
     /**
      * On init
      */
-    ngOnInit(): void
-    {
+    ngOnInit(): void {
         // Subscribe to NavigationEnd event
-        this._router.events.pipe(
-            filter(event => event instanceof NavigationEnd),
-            takeUntil(this._unsubscribeAll),
-        ).subscribe(() =>
-        {
-            // Reset the element's scroll position to the top
-            this._elementRef.nativeElement.scrollTop = 0;
-        });
+        this._router.events
+            .pipe(
+                filter((event) => event instanceof NavigationEnd),
+                takeUntil(this._unsubscribeAll)
+            )
+            .subscribe(() => {
+                // Reset the element's scroll position to the top
+                this._elementRef.nativeElement.scrollTop = 0;
+            });
     }
 
     /**
      * On destroy
      */
-    ngOnDestroy(): void
-    {
+    ngOnDestroy(): void {
         // Unsubscribe from all subscriptions
         this._unsubscribeAll.next(null);
         this._unsubscribeAll.complete();
diff --git a/src/@fuse/directives/scrollbar/scrollbar.directive.ts b/src/@fuse/directives/scrollbar/scrollbar.directive.ts
index 5d6a643e..e8c57cc4 100644
--- a/src/@fuse/directives/scrollbar/scrollbar.directive.ts
+++ b/src/@fuse/directives/scrollbar/scrollbar.directive.ts
@@ -1,21 +1,32 @@
 import { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion';
 import { Platform } from '@angular/cdk/platform';
-import { Directive, ElementRef, inject, Input, OnChanges, OnDestroy, OnInit, SimpleChanges } from '@angular/core';
-import { ScrollbarGeometry, ScrollbarPosition } from '@fuse/directives/scrollbar/scrollbar.types';
+import {
+    Directive,
+    ElementRef,
+    Input,
+    OnChanges,
+    OnDestroy,
+    OnInit,
+    SimpleChanges,
+    inject,
+} from '@angular/core';
+import {
+    ScrollbarGeometry,
+    ScrollbarPosition,
+} from '@fuse/directives/scrollbar/scrollbar.types';
 import { merge } from 'lodash-es';
 import PerfectScrollbar from 'perfect-scrollbar';
-import { debounceTime, fromEvent, Subject, takeUntil } from 'rxjs';
+import { Subject, debounceTime, fromEvent, takeUntil } from 'rxjs';
 
 /**
  * Wrapper directive for the Perfect Scrollbar: https://github.com/mdbootstrap/perfect-scrollbar
  */
 @Directive({
-    selector  : '[fuseScrollbar]',
-    exportAs  : 'fuseScrollbar',
+    selector: '[fuseScrollbar]',
+    exportAs: 'fuseScrollbar',
     standalone: true,
 })
-export class FuseScrollbarDirective implements OnChanges, OnInit, OnDestroy
-{
+export class FuseScrollbarDirective implements OnChanges, OnInit, OnDestroy {
     /* eslint-disable @typescript-eslint/naming-convention */
     static ngAcceptInputType_fuseScrollbar: BooleanInput;
     /* eslint-enable @typescript-eslint/naming-convention */
@@ -38,16 +49,14 @@ export class FuseScrollbarDirective implements OnChanges, OnInit, OnDestroy
     /**
      * Getter for _elementRef
      */
-    get elementRef(): ElementRef
-    {
+    get elementRef(): ElementRef {
         return this._elementRef;
     }
 
     /**
      * Getter for _ps
      */
-    get ps(): PerfectScrollbar | null
-    {
+    get ps(): PerfectScrollbar | null {
         return this._ps;
     }
 
@@ -60,46 +69,44 @@ export class FuseScrollbarDirective implements OnChanges, OnInit, OnDestroy
      *
      * @param changes
      */
-    ngOnChanges(changes: SimpleChanges): void
-    {
+    ngOnChanges(changes: SimpleChanges): void {
         // Enabled
-        if ( 'fuseScrollbar' in changes )
-        {
+        if ('fuseScrollbar' in changes) {
             // Interpret empty string as 'true'
-            this.fuseScrollbar = coerceBooleanProperty(changes.fuseScrollbar.currentValue);
+            this.fuseScrollbar = coerceBooleanProperty(
+                changes.fuseScrollbar.currentValue
+            );
 
             // If enabled, init the directive
-            if ( this.fuseScrollbar )
-            {
+            if (this.fuseScrollbar) {
                 this._init();
             }
             // Otherwise destroy it
-            else
-            {
+            else {
                 this._destroy();
             }
         }
 
         // Scrollbar options
-        if ( 'fuseScrollbarOptions' in changes )
-        {
+        if ('fuseScrollbarOptions' in changes) {
             // Merge the options
-            this._options = merge({}, this._options, changes.fuseScrollbarOptions.currentValue);
+            this._options = merge(
+                {},
+                this._options,
+                changes.fuseScrollbarOptions.currentValue
+            );
 
             // Return if not initialized
-            if ( !this._ps )
-            {
+            if (!this._ps) {
                 return;
             }
 
             // Destroy and re-init the PerfectScrollbar to update its options
-            setTimeout(() =>
-            {
+            setTimeout(() => {
                 this._destroy();
             });
 
-            setTimeout(() =>
-            {
+            setTimeout(() => {
                 this._init();
             });
         }
@@ -108,16 +115,11 @@ export class FuseScrollbarDirective implements OnChanges, OnInit, OnDestroy
     /**
      * On init
      */
-    ngOnInit(): void
-    {
+    ngOnInit(): void {
         // Subscribe to window resize event
         fromEvent(window, 'resize')
-            .pipe(
-                takeUntil(this._unsubscribeAll),
-                debounceTime(150),
-            )
-            .subscribe(() =>
-            {
+            .pipe(takeUntil(this._unsubscribeAll), debounceTime(150))
+            .subscribe(() => {
                 // Update the PerfectScrollbar
                 this.update();
             });
@@ -126,8 +128,7 @@ export class FuseScrollbarDirective implements OnChanges, OnInit, OnDestroy
     /**
      * On destroy
      */
-    ngOnDestroy(): void
-    {
+    ngOnDestroy(): void {
         this._destroy();
 
         // Unsubscribe from all subscriptions
@@ -142,19 +143,16 @@ export class FuseScrollbarDirective implements OnChanges, OnInit, OnDestroy
     /**
      * Is enabled
      */
-    isEnabled(): boolean
-    {
+    isEnabled(): boolean {
         return this.fuseScrollbar;
     }
 
     /**
      * Update the scrollbar
      */
-    update(): void
-    {
+    update(): void {
         // Return if not initialized
-        if ( !this._ps )
-        {
+        if (!this._ps) {
             return;
         }
 
@@ -165,8 +163,7 @@ export class FuseScrollbarDirective implements OnChanges, OnInit, OnDestroy
     /**
      * Destroy the scrollbar
      */
-    destroy(): void
-    {
+    destroy(): void {
         this.ngOnDestroy();
     }
 
@@ -175,13 +172,13 @@ export class FuseScrollbarDirective implements OnChanges, OnInit, OnDestroy
      *
      * @param prefix
      */
-    geometry(prefix: string = 'scroll'): ScrollbarGeometry
-    {
+    geometry(prefix: string = 'scroll'): ScrollbarGeometry {
         return new ScrollbarGeometry(
             this._elementRef.nativeElement[prefix + 'Left'],
             this._elementRef.nativeElement[prefix + 'Top'],
             this._elementRef.nativeElement[prefix + 'Width'],
-            this._elementRef.nativeElement[prefix + 'Height']);
+            this._elementRef.nativeElement[prefix + 'Height']
+        );
     }
 
     /**
@@ -189,22 +186,18 @@ export class FuseScrollbarDirective implements OnChanges, OnInit, OnDestroy
      *
      * @param absolute
      */
-    position(absolute: boolean = false): ScrollbarPosition
-    {
+    position(absolute: boolean = false): ScrollbarPosition {
         let scrollbarPosition;
 
-        if ( !absolute && this._ps )
-        {
+        if (!absolute && this._ps) {
             scrollbarPosition = new ScrollbarPosition(
                 this._ps.reach.x || 0,
-                this._ps.reach.y || 0,
+                this._ps.reach.y || 0
             );
-        }
-        else
-        {
+        } else {
             scrollbarPosition = new ScrollbarPosition(
                 this._elementRef.nativeElement.scrollLeft,
-                this._elementRef.nativeElement.scrollTop,
+                this._elementRef.nativeElement.scrollTop
             );
         }
 
@@ -218,21 +211,15 @@ export class FuseScrollbarDirective implements OnChanges, OnInit, OnDestroy
      * @param y
      * @param speed
      */
-    scrollTo(x: number, y?: number, speed?: number): void
-    {
-        if ( y == null && speed == null )
-        {
+    scrollTo(x: number, y?: number, speed?: number): void {
+        if (y == null && speed == null) {
             this.animateScrolling('scrollTop', x, speed);
-        }
-        else
-        {
-            if ( x != null )
-            {
+        } else {
+            if (x != null) {
                 this.animateScrolling('scrollLeft', x, speed);
             }
 
-            if ( y != null )
-            {
+            if (y != null) {
                 this.animateScrolling('scrollTop', y, speed);
             }
         }
@@ -244,8 +231,7 @@ export class FuseScrollbarDirective implements OnChanges, OnInit, OnDestroy
      * @param x
      * @param speed
      */
-    scrollToX(x: number, speed?: number): void
-    {
+    scrollToX(x: number, speed?: number): void {
         this.animateScrolling('scrollLeft', x, speed);
     }
 
@@ -255,8 +241,7 @@ export class FuseScrollbarDirective implements OnChanges, OnInit, OnDestroy
      * @param y
      * @param speed
      */
-    scrollToY(y: number, speed?: number): void
-    {
+    scrollToY(y: number, speed?: number): void {
         this.animateScrolling('scrollTop', y, speed);
     }
 
@@ -266,8 +251,7 @@ export class FuseScrollbarDirective implements OnChanges, OnInit, OnDestroy
      * @param offset
      * @param speed
      */
-    scrollToTop(offset: number = 0, speed?: number): void
-    {
+    scrollToTop(offset: number = 0, speed?: number): void {
         this.animateScrolling('scrollTop', offset, speed);
     }
 
@@ -277,9 +261,10 @@ export class FuseScrollbarDirective implements OnChanges, OnInit, OnDestroy
      * @param offset
      * @param speed
      */
-    scrollToBottom(offset: number = 0, speed?: number): void
-    {
-        const top = this._elementRef.nativeElement.scrollHeight - this._elementRef.nativeElement.clientHeight;
+    scrollToBottom(offset: number = 0, speed?: number): void {
+        const top =
+            this._elementRef.nativeElement.scrollHeight -
+            this._elementRef.nativeElement.clientHeight;
         this.animateScrolling('scrollTop', top - offset, speed);
     }
 
@@ -289,8 +274,7 @@ export class FuseScrollbarDirective implements OnChanges, OnInit, OnDestroy
      * @param offset
      * @param speed
      */
-    scrollToLeft(offset: number = 0, speed?: number): void
-    {
+    scrollToLeft(offset: number = 0, speed?: number): void {
         this.animateScrolling('scrollLeft', offset, speed);
     }
 
@@ -300,9 +284,10 @@ export class FuseScrollbarDirective implements OnChanges, OnInit, OnDestroy
      * @param offset
      * @param speed
      */
-    scrollToRight(offset: number = 0, speed?: number): void
-    {
-        const left = this._elementRef.nativeElement.scrollWidth - this._elementRef.nativeElement.clientWidth;
+    scrollToRight(offset: number = 0, speed?: number): void {
+        const left =
+            this._elementRef.nativeElement.scrollWidth -
+            this._elementRef.nativeElement.clientWidth;
         this.animateScrolling('scrollLeft', left - offset, speed);
     }
 
@@ -314,22 +299,27 @@ export class FuseScrollbarDirective implements OnChanges, OnInit, OnDestroy
      * @param ignoreVisible If true, scrollToElement won't happen if element is already inside the current viewport
      * @param speed
      */
-    scrollToElement(qs: string, offset: number = 0, ignoreVisible: boolean = false, speed?: number): void
-    {
+    scrollToElement(
+        qs: string,
+        offset: number = 0,
+        ignoreVisible: boolean = false,
+        speed?: number
+    ): void {
         const element = this._elementRef.nativeElement.querySelector(qs);
 
-        if ( !element )
-        {
+        if (!element) {
             return;
         }
 
         const elementPos = element.getBoundingClientRect();
-        const scrollerPos = this._elementRef.nativeElement.getBoundingClientRect();
+        const scrollerPos =
+            this._elementRef.nativeElement.getBoundingClientRect();
 
-        if ( this._elementRef.nativeElement.classList.contains('ps--active-x') )
-        {
-            if ( ignoreVisible && elementPos.right <= (scrollerPos.right - Math.abs(offset)) )
-            {
+        if (this._elementRef.nativeElement.classList.contains('ps--active-x')) {
+            if (
+                ignoreVisible &&
+                elementPos.right <= scrollerPos.right - Math.abs(offset)
+            ) {
                 return;
             }
 
@@ -339,10 +329,11 @@ export class FuseScrollbarDirective implements OnChanges, OnInit, OnDestroy
             this.animateScrolling('scrollLeft', position + offset, speed);
         }
 
-        if ( this._elementRef.nativeElement.classList.contains('ps--active-y') )
-        {
-            if ( ignoreVisible && elementPos.bottom <= (scrollerPos.bottom - Math.abs(offset)) )
-            {
+        if (this._elementRef.nativeElement.classList.contains('ps--active-y')) {
+            if (
+                ignoreVisible &&
+                elementPos.bottom <= scrollerPos.bottom - Math.abs(offset)
+            ) {
                 return;
             }
 
@@ -360,20 +351,15 @@ export class FuseScrollbarDirective implements OnChanges, OnInit, OnDestroy
      * @param value
      * @param speed
      */
-    animateScrolling(target: string, value: number, speed?: number): void
-    {
-        if ( this._animation )
-        {
+    animateScrolling(target: string, value: number, speed?: number): void {
+        if (this._animation) {
             window.cancelAnimationFrame(this._animation);
             this._animation = null;
         }
 
-        if ( !speed || typeof window === 'undefined' )
-        {
+        if (!speed || typeof window === 'undefined') {
             this._elementRef.nativeElement[target] = value;
-        }
-        else if ( value !== this._elementRef.nativeElement[target] )
-        {
+        } else if (value !== this._elementRef.nativeElement[target]) {
             let newValue = 0;
             let scrollCount = 0;
 
@@ -382,20 +368,18 @@ export class FuseScrollbarDirective implements OnChanges, OnInit, OnDestroy
 
             const cosParameter = (oldValue - value) / 2;
 
-            const step = (newTimestamp: number): void =>
-            {
-                scrollCount += Math.PI / (speed / (newTimestamp - oldTimestamp));
-                newValue = Math.round(value + cosParameter + cosParameter * Math.cos(scrollCount));
+            const step = (newTimestamp: number): void => {
+                scrollCount +=
+                    Math.PI / (speed / (newTimestamp - oldTimestamp));
+                newValue = Math.round(
+                    value + cosParameter + cosParameter * Math.cos(scrollCount)
+                );
 
                 // Only continue animation if scroll position has not changed
-                if ( this._elementRef.nativeElement[target] === oldValue )
-                {
-                    if ( scrollCount >= Math.PI )
-                    {
+                if (this._elementRef.nativeElement[target] === oldValue) {
+                    if (scrollCount >= Math.PI) {
                         this.animateScrolling(target, value, 0);
-                    }
-                    else
-                    {
+                    } else {
                         this._elementRef.nativeElement[target] = newValue;
 
                         // On a zoomed out page the resulting offset may differ
@@ -420,23 +404,26 @@ export class FuseScrollbarDirective implements OnChanges, OnInit, OnDestroy
      *
      * @private
      */
-    private _init(): void
-    {
+    private _init(): void {
         // Return if already initialized
-        if ( this._ps )
-        {
+        if (this._ps) {
             return;
         }
 
         // Return if on mobile or not on browser
-        if ( this._platform.ANDROID || this._platform.IOS || !this._platform.isBrowser )
-        {
+        if (
+            this._platform.ANDROID ||
+            this._platform.IOS ||
+            !this._platform.isBrowser
+        ) {
             this.fuseScrollbar = false;
             return;
         }
 
         // Initialize the PerfectScrollbar
-        this._ps = new PerfectScrollbar(this._elementRef.nativeElement, {...this._options});
+        this._ps = new PerfectScrollbar(this._elementRef.nativeElement, {
+            ...this._options,
+        });
     }
 
     /**
@@ -444,11 +431,9 @@ export class FuseScrollbarDirective implements OnChanges, OnInit, OnDestroy
      *
      * @private
      */
-    private _destroy(): void
-    {
+    private _destroy(): void {
         // Return if not initialized
-        if ( !this._ps )
-        {
+        if (!this._ps) {
             return;
         }
 
diff --git a/src/@fuse/directives/scrollbar/scrollbar.types.ts b/src/@fuse/directives/scrollbar/scrollbar.types.ts
index 11694a95..aee42cde 100644
--- a/src/@fuse/directives/scrollbar/scrollbar.types.ts
+++ b/src/@fuse/directives/scrollbar/scrollbar.types.ts
@@ -1,13 +1,11 @@
-export class ScrollbarGeometry
-{
+export class ScrollbarGeometry {
     public x: number;
     public y: number;
 
     public w: number;
     public h: number;
 
-    constructor(x: number, y: number, w: number, h: number)
-    {
+    constructor(x: number, y: number, w: number, h: number) {
         this.x = x;
         this.y = y;
         this.w = w;
@@ -15,13 +13,11 @@ export class ScrollbarGeometry
     }
 }
 
-export class ScrollbarPosition
-{
+export class ScrollbarPosition {
     public x: number | 'start' | 'end';
     public y: number | 'start' | 'end';
 
-    constructor(x: number | 'start' | 'end', y: number | 'start' | 'end')
-    {
+    constructor(x: number | 'start' | 'end', y: number | 'start' | 'end') {
         this.x = x;
         this.y = y;
     }
diff --git a/src/@fuse/fuse.provider.ts b/src/@fuse/fuse.provider.ts
index a7914945..d9c40515 100644
--- a/src/@fuse/fuse.provider.ts
+++ b/src/@fuse/fuse.provider.ts
@@ -1,13 +1,26 @@
 import { provideHttpClient, withInterceptors } from '@angular/common/http';
-import { APP_INITIALIZER, ENVIRONMENT_INITIALIZER, EnvironmentProviders, importProvidersFrom, inject, Provider } from '@angular/core';
+import {
+    APP_INITIALIZER,
+    ENVIRONMENT_INITIALIZER,
+    EnvironmentProviders,
+    Provider,
+    importProvidersFrom,
+    inject,
+} from '@angular/core';
 import { MATERIAL_SANITY_CHECKS } from '@angular/material/core';
 import { MatDialogModule } from '@angular/material/dialog';
 import { MAT_FORM_FIELD_DEFAULT_OPTIONS } from '@angular/material/form-field';
-import { FUSE_MOCK_API_DEFAULT_DELAY, mockApiInterceptor } from '@fuse/lib/mock-api';
+import {
+    FUSE_MOCK_API_DEFAULT_DELAY,
+    mockApiInterceptor,
+} from '@fuse/lib/mock-api';
 import { FuseConfig } from '@fuse/services/config';
 import { FUSE_CONFIG } from '@fuse/services/config/config.constants';
 import { FuseConfirmationService } from '@fuse/services/confirmation';
-import { fuseLoadingInterceptor, FuseLoadingService } from '@fuse/services/loading';
+import {
+    FuseLoadingService,
+    fuseLoadingInterceptor,
+} from '@fuse/services/loading';
 import { FuseMediaWatcherService } from '@fuse/services/media-watcher';
 import { FusePlatformService } from '@fuse/services/platform';
 import { FuseSplashScreenService } from '@fuse/services/splash-screen';
@@ -17,89 +30,89 @@ export type FuseProviderConfig = {
     mockApi?: {
         delay?: number;
         services?: any[];
-    },
-    fuse?: FuseConfig
-}
+    };
+    fuse?: FuseConfig;
+};
 
 /**
  * Fuse provider
  */
-export const provideFuse = (config: FuseProviderConfig): Array<Provider | EnvironmentProviders> =>
-{
+export const provideFuse = (
+    config: FuseProviderConfig
+): Array<Provider | EnvironmentProviders> => {
     // Base providers
     const providers: Array<Provider | EnvironmentProviders> = [
         {
             // Disable 'theme' sanity check
-            provide : MATERIAL_SANITY_CHECKS,
+            provide: MATERIAL_SANITY_CHECKS,
             useValue: {
                 doctype: true,
-                theme  : false,
+                theme: false,
                 version: true,
             },
         },
         {
             // Use the 'fill' appearance on Angular Material form fields by default
-            provide : MAT_FORM_FIELD_DEFAULT_OPTIONS,
+            provide: MAT_FORM_FIELD_DEFAULT_OPTIONS,
             useValue: {
                 appearance: 'fill',
             },
         },
         {
-            provide : FUSE_MOCK_API_DEFAULT_DELAY,
+            provide: FUSE_MOCK_API_DEFAULT_DELAY,
             useValue: config?.mockApi?.delay ?? 0,
         },
         {
-            provide : FUSE_CONFIG,
+            provide: FUSE_CONFIG,
             useValue: config?.fuse ?? {},
         },
 
         importProvidersFrom(MatDialogModule),
         {
-            provide : ENVIRONMENT_INITIALIZER,
+            provide: ENVIRONMENT_INITIALIZER,
             useValue: () => inject(FuseConfirmationService),
-            multi   : true,
+            multi: true,
         },
 
         provideHttpClient(withInterceptors([fuseLoadingInterceptor])),
         {
-            provide : ENVIRONMENT_INITIALIZER,
+            provide: ENVIRONMENT_INITIALIZER,
             useValue: () => inject(FuseLoadingService),
-            multi   : true,
+            multi: true,
         },
 
         {
-            provide : ENVIRONMENT_INITIALIZER,
+            provide: ENVIRONMENT_INITIALIZER,
             useValue: () => inject(FuseMediaWatcherService),
-            multi   : true,
+            multi: true,
         },
         {
-            provide : ENVIRONMENT_INITIALIZER,
+            provide: ENVIRONMENT_INITIALIZER,
             useValue: () => inject(FusePlatformService),
-            multi   : true,
+            multi: true,
         },
         {
-            provide : ENVIRONMENT_INITIALIZER,
+            provide: ENVIRONMENT_INITIALIZER,
             useValue: () => inject(FuseSplashScreenService),
-            multi   : true,
+            multi: true,
         },
         {
-            provide : ENVIRONMENT_INITIALIZER,
+            provide: ENVIRONMENT_INITIALIZER,
             useValue: () => inject(FuseUtilsService),
-            multi   : true,
+            multi: true,
         },
     ];
 
     // Mock Api services
-    if ( config?.mockApi?.services )
-    {
+    if (config?.mockApi?.services) {
         providers.push(
             provideHttpClient(withInterceptors([mockApiInterceptor])),
             {
-                provide   : APP_INITIALIZER,
-                deps      : [...config.mockApi.services],
+                provide: APP_INITIALIZER,
+                deps: [...config.mockApi.services],
                 useFactory: () => (): any => null,
-                multi     : true,
-            },
+                multi: true,
+            }
         );
     }
 
diff --git a/src/@fuse/lib/mock-api/mock-api.constants.ts b/src/@fuse/lib/mock-api/mock-api.constants.ts
index de7440fd..5036ec65 100644
--- a/src/@fuse/lib/mock-api/mock-api.constants.ts
+++ b/src/@fuse/lib/mock-api/mock-api.constants.ts
@@ -1,3 +1,5 @@
 import { InjectionToken } from '@angular/core';
 
-export const FUSE_MOCK_API_DEFAULT_DELAY = new InjectionToken<number>('FUSE_MOCK_API_DEFAULT_DELAY');
+export const FUSE_MOCK_API_DEFAULT_DELAY = new InjectionToken<number>(
+    'FUSE_MOCK_API_DEFAULT_DELAY'
+);
diff --git a/src/@fuse/lib/mock-api/mock-api.interceptor.ts b/src/@fuse/lib/mock-api/mock-api.interceptor.ts
index 2ef6b5f4..a5ce544c 100644
--- a/src/@fuse/lib/mock-api/mock-api.interceptor.ts
+++ b/src/@fuse/lib/mock-api/mock-api.interceptor.ts
@@ -1,23 +1,30 @@
-import { HttpErrorResponse, HttpEvent, HttpHandlerFn, HttpRequest, HttpResponse } from '@angular/common/http';
+import {
+    HttpErrorResponse,
+    HttpEvent,
+    HttpHandlerFn,
+    HttpRequest,
+    HttpResponse,
+} from '@angular/common/http';
 import { inject } from '@angular/core';
 import { FUSE_MOCK_API_DEFAULT_DELAY } from '@fuse/lib/mock-api/mock-api.constants';
 import { FuseMockApiService } from '@fuse/lib/mock-api/mock-api.service';
-import { delay, Observable, of, switchMap, throwError } from 'rxjs';
+import { Observable, delay, of, switchMap, throwError } from 'rxjs';
 
-export const mockApiInterceptor = (request: HttpRequest<unknown>, next: HttpHandlerFn): Observable<HttpEvent<unknown>> =>
-{
+export const mockApiInterceptor = (
+    request: HttpRequest<unknown>,
+    next: HttpHandlerFn
+): Observable<HttpEvent<unknown>> => {
     const defaultDelay = inject(FUSE_MOCK_API_DEFAULT_DELAY);
     const fuseMockApiService = inject(FuseMockApiService);
 
     // Try to get the request handler
-    const {
-        handler,
-        urlParams,
-    } = fuseMockApiService.findHandler(request.method.toUpperCase(), request.url);
+    const { handler, urlParams } = fuseMockApiService.findHandler(
+        request.method.toUpperCase(),
+        request.url
+    );
 
     // Pass through if the request handler does not exist
-    if ( !handler )
-    {
+    if (!handler) {
         return next(request);
     }
 
@@ -30,15 +37,13 @@ export const mockApiInterceptor = (request: HttpRequest<unknown>, next: HttpHand
     // Subscribe to the response function observable
     return handler.response.pipe(
         delay(handler.delay ?? defaultDelay ?? 0),
-        switchMap((response) =>
-        {
+        switchMap((response) => {
             // If there is no response data,
             // throw an error response
-            if ( !response )
-            {
+            if (!response) {
                 response = new HttpErrorResponse({
-                    error     : 'NOT FOUND',
-                    status    : 404,
+                    error: 'NOT FOUND',
+                    status: 404,
                     statusText: 'NOT FOUND',
                 });
 
@@ -48,16 +53,15 @@ export const mockApiInterceptor = (request: HttpRequest<unknown>, next: HttpHand
             // Parse the response data
             const data = {
                 status: response[0],
-                body  : response[1],
+                body: response[1],
             };
 
             // If the status code is in between 200 and 300,
             // return a success response
-            if ( data.status >= 200 && data.status < 300 )
-            {
+            if (data.status >= 200 && data.status < 300) {
                 response = new HttpResponse({
-                    body      : data.body,
-                    status    : data.status,
+                    body: data.body,
+                    status: data.status,
                     statusText: 'OK',
                 });
 
@@ -67,11 +71,12 @@ export const mockApiInterceptor = (request: HttpRequest<unknown>, next: HttpHand
             // For other status codes,
             // throw an error response
             response = new HttpErrorResponse({
-                error     : data.body.error,
-                status    : data.status,
+                error: data.body.error,
+                status: data.status,
                 statusText: 'ERROR',
             });
 
             return throwError(response);
-        }));
+        })
+    );
 };
diff --git a/src/@fuse/lib/mock-api/mock-api.request-handler.ts b/src/@fuse/lib/mock-api/mock-api.request-handler.ts
index 239f332f..08807f43 100644
--- a/src/@fuse/lib/mock-api/mock-api.request-handler.ts
+++ b/src/@fuse/lib/mock-api/mock-api.request-handler.ts
@@ -2,8 +2,7 @@ import { HttpRequest } from '@angular/common/http';
 import { FuseMockApiReplyCallback } from '@fuse/lib/mock-api/mock-api.types';
 import { Observable, of, take, throwError } from 'rxjs';
 
-export class FuseMockApiHandler
-{
+export class FuseMockApiHandler {
     request!: HttpRequest<any>;
     urlParams!: { [key: string]: string };
 
@@ -17,10 +16,8 @@ export class FuseMockApiHandler
      */
     constructor(
         public url: string,
-        public delay?: number,
-    )
-    {
-    }
+        public delay?: number
+    ) {}
 
     // -----------------------------------------------------------------------------------------------------
     // @ Accessors
@@ -29,23 +26,19 @@ export class FuseMockApiHandler
     /**
      * Getter for response callback
      */
-    get response(): Observable<any>
-    {
+    get response(): Observable<any> {
         // If the execution limit has been reached, throw an error
-        if ( this._replyCount > 0 && this._replyCount <= this._replied )
-        {
+        if (this._replyCount > 0 && this._replyCount <= this._replied) {
             return throwError('Execution limit has been reached!');
         }
 
         // If the response callback has not been set, throw an error
-        if ( !this._reply )
-        {
+        if (!this._reply) {
             return throwError('Response callback function does not exist!');
         }
 
         // If the request has not been set, throw an error
-        if ( !this.request )
-        {
+        if (!this.request) {
             return throwError('Request does not exist!');
         }
 
@@ -54,13 +47,12 @@ export class FuseMockApiHandler
 
         // Execute the reply callback
         const replyResult = this._reply({
-            request  : this.request,
+            request: this.request,
             urlParams: this.urlParams,
         });
 
         // If the result of the reply callback is an observable...
-        if ( replyResult instanceof Observable )
-        {
+        if (replyResult instanceof Observable) {
             // Return the result as it is
             return replyResult.pipe(take(1));
         }
@@ -78,8 +70,7 @@ export class FuseMockApiHandler
      *
      * @param callback
      */
-    reply(callback: FuseMockApiReplyCallback): void
-    {
+    reply(callback: FuseMockApiReplyCallback): void {
         // Store the reply
         this._reply = callback;
     }
@@ -89,11 +80,8 @@ export class FuseMockApiHandler
      *
      * @param count
      */
-    replyCount(count: number): void
-    {
+    replyCount(count: number): void {
         // Store the reply count
         this._replyCount = count;
     }
 }
-
-
diff --git a/src/@fuse/lib/mock-api/mock-api.service.ts b/src/@fuse/lib/mock-api/mock-api.service.ts
index 1bec5873..ee5caee5 100644
--- a/src/@fuse/lib/mock-api/mock-api.service.ts
+++ b/src/@fuse/lib/mock-api/mock-api.service.ts
@@ -3,18 +3,17 @@ import { FuseMockApiHandler } from '@fuse/lib/mock-api/mock-api.request-handler'
 import { FuseMockApiMethods } from '@fuse/lib/mock-api/mock-api.types';
 import { compact, fromPairs } from 'lodash-es';
 
-@Injectable({providedIn: 'root'})
-export class FuseMockApiService
-{
+@Injectable({ providedIn: 'root' })
+export class FuseMockApiService {
     private _handlers: { [key: string]: Map<string, FuseMockApiHandler> } = {
-        'get'    : new Map<string, FuseMockApiHandler>(),
-        'post'   : new Map<string, FuseMockApiHandler>(),
-        'patch'  : new Map<string, FuseMockApiHandler>(),
-        'delete' : new Map<string, FuseMockApiHandler>(),
-        'put'    : new Map<string, FuseMockApiHandler>(),
-        'head'   : new Map<string, FuseMockApiHandler>(),
-        'jsonp'  : new Map<string, FuseMockApiHandler>(),
-        'options': new Map<string, FuseMockApiHandler>(),
+        get: new Map<string, FuseMockApiHandler>(),
+        post: new Map<string, FuseMockApiHandler>(),
+        patch: new Map<string, FuseMockApiHandler>(),
+        delete: new Map<string, FuseMockApiHandler>(),
+        put: new Map<string, FuseMockApiHandler>(),
+        head: new Map<string, FuseMockApiHandler>(),
+        jsonp: new Map<string, FuseMockApiHandler>(),
+        options: new Map<string, FuseMockApiHandler>(),
     };
 
     // -----------------------------------------------------------------------------------------------------
@@ -28,11 +27,19 @@ export class FuseMockApiService
      * @param method
      * @param url
      */
-    findHandler(method: string, url: string): { handler: FuseMockApiHandler | undefined; urlParams: { [key: string]: string } }
-    {
+    findHandler(
+        method: string,
+        url: string
+    ): {
+        handler: FuseMockApiHandler | undefined;
+        urlParams: { [key: string]: string };
+    } {
         // Prepare the return object
-        const matchingHandler: { handler: FuseMockApiHandler | undefined; urlParams: { [key: string]: string } } = {
-            handler  : undefined,
+        const matchingHandler: {
+            handler: FuseMockApiHandler | undefined;
+            urlParams: { [key: string]: string };
+        } = {
+            handler: undefined,
             urlParams: {},
         };
 
@@ -43,11 +50,9 @@ export class FuseMockApiService
         const handlers = this._handlers[method.toLowerCase()];
 
         // Iterate through the handlers
-        handlers.forEach((handler, handlerUrl) =>
-        {
+        handlers.forEach((handler, handlerUrl) => {
             // Skip if there is already a matching handler
-            if ( matchingHandler.handler )
-            {
+            if (matchingHandler.handler) {
                 return;
             }
 
@@ -55,24 +60,32 @@ export class FuseMockApiService
             const handlerUrlParts = handlerUrl.split('/');
 
             // Skip if the lengths of the urls we are comparing are not the same
-            if ( urlParts.length !== handlerUrlParts.length )
-            {
+            if (urlParts.length !== handlerUrlParts.length) {
                 return;
             }
 
             // Compare
-            const matches = handlerUrlParts.every((handlerUrlPart, index) => handlerUrlPart === urlParts[index] || handlerUrlPart.startsWith(':'));
+            const matches = handlerUrlParts.every(
+                (handlerUrlPart, index) =>
+                    handlerUrlPart === urlParts[index] ||
+                    handlerUrlPart.startsWith(':')
+            );
 
             // If there is a match...
-            if ( matches )
-            {
+            if (matches) {
                 // Assign the matching handler
                 matchingHandler.handler = handler;
 
                 // Extract and assign the parameters
-                matchingHandler.urlParams = fromPairs(compact(handlerUrlParts.map((handlerUrlPart, index) =>
-                    handlerUrlPart.startsWith(':') ? [handlerUrlPart.substring(1), urlParts[index]] : undefined,
-                )));
+                matchingHandler.urlParams = fromPairs(
+                    compact(
+                        handlerUrlParts.map((handlerUrlPart, index) =>
+                            handlerUrlPart.startsWith(':')
+                                ? [handlerUrlPart.substring(1), urlParts[index]]
+                                : undefined
+                        )
+                    )
+                );
             }
         });
 
@@ -85,8 +98,7 @@ export class FuseMockApiService
      * @param url - URL address of the mocked API endpoint
      * @param delay - Delay of the response in milliseconds
      */
-    onGet(url: string, delay?: number): FuseMockApiHandler
-    {
+    onGet(url: string, delay?: number): FuseMockApiHandler {
         return this._registerHandler('get', url, delay);
     }
 
@@ -96,8 +108,7 @@ export class FuseMockApiService
      * @param url - URL address of the mocked API endpoint
      * @param delay - Delay of the response in milliseconds
      */
-    onPost(url: string, delay?: number): FuseMockApiHandler
-    {
+    onPost(url: string, delay?: number): FuseMockApiHandler {
         return this._registerHandler('post', url, delay);
     }
 
@@ -107,8 +118,7 @@ export class FuseMockApiService
      * @param url - URL address of the mocked API endpoint
      * @param delay - Delay of the response in milliseconds
      */
-    onPatch(url: string, delay?: number): FuseMockApiHandler
-    {
+    onPatch(url: string, delay?: number): FuseMockApiHandler {
         return this._registerHandler('patch', url, delay);
     }
 
@@ -118,8 +128,7 @@ export class FuseMockApiService
      * @param url - URL address of the mocked API endpoint
      * @param delay - Delay of the response in milliseconds
      */
-    onDelete(url: string, delay?: number): FuseMockApiHandler
-    {
+    onDelete(url: string, delay?: number): FuseMockApiHandler {
         return this._registerHandler('delete', url, delay);
     }
 
@@ -129,8 +138,7 @@ export class FuseMockApiService
      * @param url - URL address of the mocked API endpoint
      * @param delay - Delay of the response in milliseconds
      */
-    onPut(url: string, delay?: number): FuseMockApiHandler
-    {
+    onPut(url: string, delay?: number): FuseMockApiHandler {
         return this._registerHandler('put', url, delay);
     }
 
@@ -140,8 +148,7 @@ export class FuseMockApiService
      * @param url - URL address of the mocked API endpoint
      * @param delay - Delay of the response in milliseconds
      */
-    onHead(url: string, delay?: number): FuseMockApiHandler
-    {
+    onHead(url: string, delay?: number): FuseMockApiHandler {
         return this._registerHandler('head', url, delay);
     }
 
@@ -151,8 +158,7 @@ export class FuseMockApiService
      * @param url - URL address of the mocked API endpoint
      * @param delay - Delay of the response in milliseconds
      */
-    onJsonp(url: string, delay?: number): FuseMockApiHandler
-    {
+    onJsonp(url: string, delay?: number): FuseMockApiHandler {
         return this._registerHandler('jsonp', url, delay);
     }
 
@@ -162,8 +168,7 @@ export class FuseMockApiService
      * @param url - URL address of the mocked API endpoint
      * @param delay - Delay of the response in milliseconds
      */
-    onOptions(url: string, delay?: number): FuseMockApiHandler
-    {
+    onOptions(url: string, delay?: number): FuseMockApiHandler {
         return this._registerHandler('options', url, delay);
     }
 
@@ -179,8 +184,11 @@ export class FuseMockApiService
      * @param delay
      * @private
      */
-    private _registerHandler(method: FuseMockApiMethods, url: string, delay?: number): FuseMockApiHandler
-    {
+    private _registerHandler(
+        method: FuseMockApiMethods,
+        url: string,
+        delay?: number
+    ): FuseMockApiHandler {
         // Create a new instance of FuseMockApiRequestHandler
         const fuseMockHttp = new FuseMockApiHandler(url, delay);
 
diff --git a/src/@fuse/lib/mock-api/mock-api.types.ts b/src/@fuse/lib/mock-api/mock-api.types.ts
index 77236aa2..a7154e3b 100644
--- a/src/@fuse/lib/mock-api/mock-api.types.ts
+++ b/src/@fuse/lib/mock-api/mock-api.types.ts
@@ -2,7 +2,10 @@ import { HttpRequest } from '@angular/common/http';
 import { Observable } from 'rxjs';
 
 export type FuseMockApiReplyCallback =
-    | ((data: { request: HttpRequest<any>; urlParams: { [key: string]: string } }) => ([number, string | any]) | Observable<any>)
+    | ((data: {
+          request: HttpRequest<any>;
+          urlParams: { [key: string]: string };
+      }) => [number, string | any] | Observable<any>)
     | undefined;
 
 export type FuseMockApiMethods =
diff --git a/src/@fuse/lib/mock-api/mock-api.utils.ts b/src/@fuse/lib/mock-api/mock-api.utils.ts
index 70ad8200..8194f60e 100644
--- a/src/@fuse/lib/mock-api/mock-api.utils.ts
+++ b/src/@fuse/lib/mock-api/mock-api.utils.ts
@@ -1,5 +1,4 @@
-export class FuseMockApiUtils
-{
+export class FuseMockApiUtils {
     // -----------------------------------------------------------------------------------------------------
     // @ Public methods
     // -----------------------------------------------------------------------------------------------------
@@ -7,23 +6,23 @@ export class FuseMockApiUtils
     /**
      * Generate a globally unique id
      */
-    static guid(): string
-    {
+    static guid(): string {
         /* eslint-disable */
 
         let d = new Date().getTime();
 
         // Use high-precision timer if available
-        if ( typeof performance !== 'undefined' && typeof performance.now === 'function' )
-        {
+        if (
+            typeof performance !== 'undefined' &&
+            typeof performance.now === 'function'
+        ) {
             d += performance.now();
         }
 
-        return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) =>
-        {
+        return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => {
             const r = (d + Math.random() * 16) % 16 | 0;
             d = Math.floor(d / 16);
-            return (c === 'x' ? r : (r & 0x3 | 0x8)).toString(16);
+            return (c === 'x' ? r : (r & 0x3) | 0x8).toString(16);
         });
 
         /* eslint-enable */
diff --git a/src/@fuse/pipes/find-by-key/find-by-key.pipe.ts b/src/@fuse/pipes/find-by-key/find-by-key.pipe.ts
index a3c8f64f..978e5043 100644
--- a/src/@fuse/pipes/find-by-key/find-by-key.pipe.ts
+++ b/src/@fuse/pipes/find-by-key/find-by-key.pipe.ts
@@ -4,12 +4,11 @@ import { Pipe, PipeTransform } from '@angular/core';
  * Finds an object from given source using the given key - value pairs
  */
 @Pipe({
-    name      : 'fuseFindByKey',
-    pure      : false,
+    name: 'fuseFindByKey',
+    pure: false,
     standalone: true,
 })
-export class FuseFindByKeyPipe implements PipeTransform
-{
+export class FuseFindByKeyPipe implements PipeTransform {
     /**
      * Transform
      *
@@ -17,15 +16,15 @@ export class FuseFindByKeyPipe implements PipeTransform
      * @param key Key of the object property to look for
      * @param source Array of objects to find from
      */
-    transform(value: string | string[], key: string, source: any[]): any
-    {
+    transform(value: string | string[], key: string, source: any[]): any {
         // If the given value is an array of strings...
-        if ( Array.isArray(value) )
-        {
-            return value.map(item => source.find(sourceItem => sourceItem[key] === item));
+        if (Array.isArray(value)) {
+            return value.map((item) =>
+                source.find((sourceItem) => sourceItem[key] === item)
+            );
         }
 
         // If the value is a string...
-        return source.find(sourceItem => sourceItem[key] === value);
+        return source.find((sourceItem) => sourceItem[key] === value);
     }
 }
diff --git a/src/@fuse/pipes/find-by-key/public-api.ts b/src/@fuse/pipes/find-by-key/public-api.ts
index 178a2c7f..c62e68d8 100644
--- a/src/@fuse/pipes/find-by-key/public-api.ts
+++ b/src/@fuse/pipes/find-by-key/public-api.ts
@@ -1,2 +1,2 @@
-export * from '@fuse/pipes/find-by-key/find-by-key.pipe';
 export * from '@fuse/pipes/find-by-key/find-by-key.module';
+export * from '@fuse/pipes/find-by-key/find-by-key.pipe';
diff --git a/src/@fuse/services/config/config.service.ts b/src/@fuse/services/config/config.service.ts
index 3f586f8c..6350f5c5 100644
--- a/src/@fuse/services/config/config.service.ts
+++ b/src/@fuse/services/config/config.service.ts
@@ -3,9 +3,8 @@ import { FUSE_CONFIG } from '@fuse/services/config/config.constants';
 import { merge } from 'lodash-es';
 import { BehaviorSubject, Observable } from 'rxjs';
 
-@Injectable({providedIn: 'root'})
-export class FuseConfigService
-{
+@Injectable({ providedIn: 'root' })
+export class FuseConfigService {
     private _config = new BehaviorSubject(inject(FUSE_CONFIG));
 
     // -----------------------------------------------------------------------------------------------------
@@ -15,8 +14,7 @@ export class FuseConfigService
     /**
      * Setter & getter for config
      */
-    set config(value: any)
-    {
+    set config(value: any) {
         // Merge the new config over to the current config
         const config = merge({}, this._config.getValue(), value);
 
@@ -25,8 +23,7 @@ export class FuseConfigService
     }
 
     // eslint-disable-next-line @typescript-eslint/member-ordering
-    get config$(): Observable<any>
-    {
+    get config$(): Observable<any> {
         return this._config.asObservable();
     }
 
@@ -37,8 +34,7 @@ export class FuseConfigService
     /**
      * Resets the config to the default
      */
-    reset(): void
-    {
+    reset(): void {
         // Set the config
         this._config.next(this.config);
     }
diff --git a/src/@fuse/services/config/config.types.ts b/src/@fuse/services/config/config.types.ts
index cf3ce6e7..5a557b69 100644
--- a/src/@fuse/services/config/config.types.ts
+++ b/src/@fuse/services/config/config.types.ts
@@ -8,8 +8,7 @@ export type Themes = { id: string; name: string }[];
  * AppConfig interface. Update this interface to strictly type your config
  * object.
  */
-export interface FuseConfig
-{
+export interface FuseConfig {
     layout: string;
     scheme: Scheme;
     screens: Screens;
diff --git a/src/@fuse/services/confirmation/confirmation.service.ts b/src/@fuse/services/confirmation/confirmation.service.ts
index 0e55fe64..68d6fda7 100644
--- a/src/@fuse/services/confirmation/confirmation.service.ts
+++ b/src/@fuse/services/confirmation/confirmation.service.ts
@@ -4,26 +4,25 @@ import { FuseConfirmationConfig } from '@fuse/services/confirmation/confirmation
 import { FuseConfirmationDialogComponent } from '@fuse/services/confirmation/dialog/dialog.component';
 import { merge } from 'lodash-es';
 
-@Injectable({providedIn: 'root'})
-export class FuseConfirmationService
-{
+@Injectable({ providedIn: 'root' })
+export class FuseConfirmationService {
     private _matDialog: MatDialog = inject(MatDialog);
     private _defaultConfig: FuseConfirmationConfig = {
-        title      : 'Confirm action',
-        message    : 'Are you sure you want to confirm this action?',
-        icon       : {
-            show : true,
-            name : 'heroicons_outline:exclamation-triangle',
+        title: 'Confirm action',
+        message: 'Are you sure you want to confirm this action?',
+        icon: {
+            show: true,
+            name: 'heroicons_outline:exclamation-triangle',
             color: 'warn',
         },
-        actions    : {
+        actions: {
             confirm: {
-                show : true,
+                show: true,
                 label: 'Confirm',
                 color: 'warn',
             },
-            cancel : {
-                show : true,
+            cancel: {
+                show: true,
                 label: 'Cancel',
             },
         },
@@ -34,17 +33,18 @@ export class FuseConfirmationService
     // @ Public methods
     // -----------------------------------------------------------------------------------------------------
 
-    open(config: FuseConfirmationConfig = {}): MatDialogRef<FuseConfirmationDialogComponent>
-    {
+    open(
+        config: FuseConfirmationConfig = {}
+    ): MatDialogRef<FuseConfirmationDialogComponent> {
         // Merge the user config with the default config
         const userConfig = merge({}, this._defaultConfig, config);
 
         // Open the dialog
         return this._matDialog.open(FuseConfirmationDialogComponent, {
-            autoFocus   : false,
+            autoFocus: false,
             disableClose: !userConfig.dismissible,
-            data        : userConfig,
-            panelClass  : 'fuse-confirmation-dialog-panel',
+            data: userConfig,
+            panelClass: 'fuse-confirmation-dialog-panel',
         });
     }
 }
diff --git a/src/@fuse/services/confirmation/confirmation.types.ts b/src/@fuse/services/confirmation/confirmation.types.ts
index 53bd2dc5..1ffd6301 100644
--- a/src/@fuse/services/confirmation/confirmation.types.ts
+++ b/src/@fuse/services/confirmation/confirmation.types.ts
@@ -1,11 +1,18 @@
-export interface FuseConfirmationConfig
-{
+export interface FuseConfirmationConfig {
     title?: string;
     message?: string;
     icon?: {
         show?: boolean;
         name?: string;
-        color?: 'primary' | 'accent' | 'warn' | 'basic' | 'info' | 'success' | 'warning' | 'error';
+        color?:
+            | 'primary'
+            | 'accent'
+            | 'warn'
+            | 'basic'
+            | 'info'
+            | 'success'
+            | 'warning'
+            | 'error';
     };
     actions?: {
         confirm?: {
diff --git a/src/@fuse/services/confirmation/dialog/dialog.component.html b/src/@fuse/services/confirmation/dialog/dialog.component.html
index aaa08a18..6da9b321 100644
--- a/src/@fuse/services/confirmation/dialog/dialog.component.html
+++ b/src/@fuse/services/confirmation/dialog/dialog.component.html
@@ -1,71 +1,82 @@
-<div class="relative flex flex-col w-full h-full">
-
+<div class="relative flex h-full w-full flex-col">
     <!-- Dismiss button -->
     <ng-container *ngIf="data.dismissible">
-        <div class="absolute top-0 right-0 pt-4 pr-4">
-            <button
-                mat-icon-button
-                [matDialogClose]="undefined">
+        <div class="absolute right-0 top-0 pr-4 pt-4">
+            <button mat-icon-button [matDialogClose]="undefined">
                 <mat-icon
                     class="text-secondary"
-                    [svgIcon]="'heroicons_outline:x-mark'"></mat-icon>
+                    [svgIcon]="'heroicons_outline:x-mark'"
+                ></mat-icon>
             </button>
         </div>
     </ng-container>
 
     <!-- Content -->
-    <div class="flex flex-col sm:flex-row flex-auto items-center sm:items-start p-8 pb-6 sm:pb-8">
-
+    <div
+        class="flex flex-auto flex-col items-center p-8 pb-6 sm:flex-row sm:items-start sm:pb-8"
+    >
         <!-- Icon -->
         <ng-container *ngIf="data.icon.show">
             <div
-                class="flex flex-0 items-center justify-center w-10 h-10 sm:mr-4 rounded-full"
-                [ngClass]="{'text-primary-600 bg-primary-100 dark:text-primary-50 dark:bg-primary-600': data.icon.color === 'primary',
-                            'text-accent-600 bg-accent-100 dark:text-accent-50 dark:bg-accent-600': data.icon.color === 'accent',
-                            'text-warn-600 bg-warn-100 dark:text-warn-50 dark:bg-warn-600': data.icon.color === 'warn',
-                            'text-gray-600 bg-gray-100 dark:text-gray-50 dark:bg-gray-600': data.icon.color === 'basic',
-                            'text-blue-600 bg-blue-100 dark:text-blue-50 dark:bg-blue-600': data.icon.color === 'info',
-                            'text-green-500 bg-green-100 dark:text-green-50 dark:bg-green-500': data.icon.color === 'success',
-                            'text-amber-500 bg-amber-100 dark:text-amber-50 dark:bg-amber-500': data.icon.color === 'warning',
-                            'text-red-600 bg-red-100 dark:text-red-50 dark:bg-red-600': data.icon.color === 'error'
-                            }">
+                class="flex h-10 w-10 flex-0 items-center justify-center rounded-full sm:mr-4"
+                [ngClass]="{
+                    'bg-primary-100 text-primary-600 dark:bg-primary-600 dark:text-primary-50':
+                        data.icon.color === 'primary',
+                    'bg-accent-100 text-accent-600 dark:bg-accent-600 dark:text-accent-50':
+                        data.icon.color === 'accent',
+                    'bg-warn-100 text-warn-600 dark:bg-warn-600 dark:text-warn-50':
+                        data.icon.color === 'warn',
+                    'bg-gray-100 text-gray-600 dark:bg-gray-600 dark:text-gray-50':
+                        data.icon.color === 'basic',
+                    'bg-blue-100 text-blue-600 dark:bg-blue-600 dark:text-blue-50':
+                        data.icon.color === 'info',
+                    'bg-green-100 text-green-500 dark:bg-green-500 dark:text-green-50':
+                        data.icon.color === 'success',
+                    'bg-amber-100 text-amber-500 dark:bg-amber-500 dark:text-amber-50':
+                        data.icon.color === 'warning',
+                    'bg-red-100 text-red-600 dark:bg-red-600 dark:text-red-50':
+                        data.icon.color === 'error'
+                }"
+            >
                 <mat-icon
                     class="text-current"
-                    [svgIcon]="data.icon.name"></mat-icon>
+                    [svgIcon]="data.icon.name"
+                ></mat-icon>
             </div>
         </ng-container>
 
         <ng-container *ngIf="data.title || data.message">
-            <div class="flex flex-col items-center sm:items-start mt-4 sm:mt-0 sm:pr-8 space-y-1 text-center sm:text-left">
-
+            <div
+                class="mt-4 flex flex-col items-center space-y-1 text-center sm:mt-0 sm:items-start sm:pr-8 sm:text-left"
+            >
                 <!-- Title -->
                 <ng-container *ngIf="data.title">
                     <div
-                        class="text-xl leading-6 font-medium"
-                        [innerHTML]="data.title"></div>
+                        class="text-xl font-medium leading-6"
+                        [innerHTML]="data.title"
+                    ></div>
                 </ng-container>
 
                 <!-- Message -->
                 <ng-container *ngIf="data.message">
                     <div
                         class="text-secondary"
-                        [innerHTML]="data.message"></div>
+                        [innerHTML]="data.message"
+                    ></div>
                 </ng-container>
             </div>
         </ng-container>
-
     </div>
 
     <!-- Actions -->
     <ng-container *ngIf="data.actions.confirm.show || data.actions.cancel.show">
-        <div class="flex items-center justify-center sm:justify-end px-6 py-4 space-x-3 bg-gray-50 dark:bg-black dark:bg-opacity-10">
-
+        <div
+            class="flex items-center justify-center space-x-3 bg-gray-50 px-6 py-4 dark:bg-black dark:bg-opacity-10 sm:justify-end"
+        >
             <!-- Cancel -->
             <ng-container *ngIf="data.actions.cancel.show">
-                <button
-                    mat-stroked-button
-                    [matDialogClose]="'cancelled'">
-                    {{data.actions.cancel.label}}
+                <button mat-stroked-button [matDialogClose]="'cancelled'">
+                    {{ data.actions.cancel.label }}
                 </button>
             </ng-container>
 
@@ -74,12 +85,11 @@
                 <button
                     mat-flat-button
                     [color]="data.actions.confirm.color"
-                    [matDialogClose]="'confirmed'">
-                    {{data.actions.confirm.label}}
+                    [matDialogClose]="'confirmed'"
+                >
+                    {{ data.actions.confirm.label }}
                 </button>
             </ng-container>
-
         </div>
     </ng-container>
-
 </div>
diff --git a/src/@fuse/services/confirmation/dialog/dialog.component.ts b/src/@fuse/services/confirmation/dialog/dialog.component.ts
index cc12f452..3b1299d8 100644
--- a/src/@fuse/services/confirmation/dialog/dialog.component.ts
+++ b/src/@fuse/services/confirmation/dialog/dialog.component.ts
@@ -1,23 +1,21 @@
 import { NgClass, NgIf } from '@angular/common';
-import { Component, inject, ViewEncapsulation } from '@angular/core';
+import { Component, ViewEncapsulation, inject } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
 import { MatIconModule } from '@angular/material/icon';
 import { FuseConfirmationConfig } from '@fuse/services/confirmation/confirmation.types';
 
 @Component({
-    selector     : 'fuse-confirmation-dialog',
-    templateUrl  : './dialog.component.html',
-    styles       : [
+    selector: 'fuse-confirmation-dialog',
+    templateUrl: './dialog.component.html',
+    styles: [
         `
             .fuse-confirmation-dialog-panel {
-
                 @screen md {
                     @apply w-128;
                 }
 
                 .mat-mdc-dialog-container {
-
                     .mat-mdc-dialog-surface {
                         padding: 0 !important;
                     }
@@ -26,10 +24,9 @@ import { FuseConfirmationConfig } from '@fuse/services/confirmation/confirmation
         `,
     ],
     encapsulation: ViewEncapsulation.None,
-    standalone   : true,
-    imports      : [NgIf, MatButtonModule, MatDialogModule, MatIconModule, NgClass],
+    standalone: true,
+    imports: [NgIf, MatButtonModule, MatDialogModule, MatIconModule, NgClass],
 })
-export class FuseConfirmationDialogComponent
-{
+export class FuseConfirmationDialogComponent {
     data: FuseConfirmationConfig = inject(MAT_DIALOG_DATA);
 }
diff --git a/src/@fuse/services/loading/loading.interceptor.ts b/src/@fuse/services/loading/loading.interceptor.ts
index 9dbd7c8e..41280118 100644
--- a/src/@fuse/services/loading/loading.interceptor.ts
+++ b/src/@fuse/services/loading/loading.interceptor.ts
@@ -1,23 +1,21 @@
 import { HttpEvent, HttpHandlerFn, HttpRequest } from '@angular/common/http';
 import { inject } from '@angular/core';
 import { FuseLoadingService } from '@fuse/services/loading/loading.service';
-import { finalize, Observable, take } from 'rxjs';
+import { Observable, finalize, take } from 'rxjs';
 
-export const fuseLoadingInterceptor = (req: HttpRequest<unknown>, next: HttpHandlerFn): Observable<HttpEvent<unknown>> =>
-{
+export const fuseLoadingInterceptor = (
+    req: HttpRequest<unknown>,
+    next: HttpHandlerFn
+): Observable<HttpEvent<unknown>> => {
     const fuseLoadingService = inject(FuseLoadingService);
     let handleRequestsAutomatically = false;
 
-    fuseLoadingService.auto$
-        .pipe(take(1))
-        .subscribe((value) =>
-        {
-            handleRequestsAutomatically = value;
-        });
+    fuseLoadingService.auto$.pipe(take(1)).subscribe((value) => {
+        handleRequestsAutomatically = value;
+    });
 
     // If the Auto mode is turned off, do nothing
-    if ( !handleRequestsAutomatically )
-    {
+    if (!handleRequestsAutomatically) {
         return next(req);
     }
 
@@ -25,9 +23,9 @@ export const fuseLoadingInterceptor = (req: HttpRequest<unknown>, next: HttpHand
     fuseLoadingService._setLoadingStatus(true, req.url);
 
     return next(req).pipe(
-        finalize(() =>
-        {
+        finalize(() => {
             // Set the status to false if there are any errors or the request is completed
             fuseLoadingService._setLoadingStatus(false, req.url);
-        }));
+        })
+    );
 };
diff --git a/src/@fuse/services/loading/loading.service.ts b/src/@fuse/services/loading/loading.service.ts
index 99370f5d..1bb45409 100644
--- a/src/@fuse/services/loading/loading.service.ts
+++ b/src/@fuse/services/loading/loading.service.ts
@@ -1,13 +1,19 @@
 import { Injectable } from '@angular/core';
 import { BehaviorSubject, Observable } from 'rxjs';
 
-@Injectable({providedIn: 'root'})
-export class FuseLoadingService
-{
-    private _auto$: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(true);
-    private _mode$: BehaviorSubject<'determinate' | 'indeterminate'> = new BehaviorSubject<'determinate' | 'indeterminate'>('indeterminate');
-    private _progress$: BehaviorSubject<number | null> = new BehaviorSubject<number | null>(0);
-    private _show$: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
+@Injectable({ providedIn: 'root' })
+export class FuseLoadingService {
+    private _auto$: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(
+        true
+    );
+    private _mode$: BehaviorSubject<'determinate' | 'indeterminate'> =
+        new BehaviorSubject<'determinate' | 'indeterminate'>('indeterminate');
+    private _progress$: BehaviorSubject<number | null> = new BehaviorSubject<
+        number | null
+    >(0);
+    private _show$: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(
+        false
+    );
     private _urlMap: Map<string, boolean> = new Map<string, boolean>();
 
     // -----------------------------------------------------------------------------------------------------
@@ -17,32 +23,28 @@ export class FuseLoadingService
     /**
      * Getter for auto mode
      */
-    get auto$(): Observable<boolean>
-    {
+    get auto$(): Observable<boolean> {
         return this._auto$.asObservable();
     }
 
     /**
      * Getter for mode
      */
-    get mode$(): Observable<'determinate' | 'indeterminate'>
-    {
+    get mode$(): Observable<'determinate' | 'indeterminate'> {
         return this._mode$.asObservable();
     }
 
     /**
      * Getter for progress
      */
-    get progress$(): Observable<number>
-    {
+    get progress$(): Observable<number> {
         return this._progress$.asObservable();
     }
 
     /**
      * Getter for show
      */
-    get show$(): Observable<boolean>
-    {
+    get show$(): Observable<boolean> {
         return this._show$.asObservable();
     }
 
@@ -53,16 +55,14 @@ export class FuseLoadingService
     /**
      * Show the loading bar
      */
-    show(): void
-    {
+    show(): void {
         this._show$.next(true);
     }
 
     /**
      * Hide the loading bar
      */
-    hide(): void
-    {
+    hide(): void {
         this._show$.next(false);
     }
 
@@ -71,8 +71,7 @@ export class FuseLoadingService
      *
      * @param value
      */
-    setAutoMode(value: boolean): void
-    {
+    setAutoMode(value: boolean): void {
         this._auto$.next(value);
     }
 
@@ -81,8 +80,7 @@ export class FuseLoadingService
      *
      * @param value
      */
-    setMode(value: 'determinate' | 'indeterminate'): void
-    {
+    setMode(value: 'determinate' | 'indeterminate'): void {
         this._mode$.next(value);
     }
 
@@ -91,10 +89,8 @@ export class FuseLoadingService
      *
      * @param value
      */
-    setProgress(value: number): void
-    {
-        if ( value < 0 || value > 100 )
-        {
+    setProgress(value: number): void {
+        if (value < 0 || value > 100) {
             console.error('Progress value must be between 0 and 100!');
             return;
         }
@@ -108,28 +104,22 @@ export class FuseLoadingService
      * @param status
      * @param url
      */
-    _setLoadingStatus(status: boolean, url: string): void
-    {
+    _setLoadingStatus(status: boolean, url: string): void {
         // Return if the url was not provided
-        if ( !url )
-        {
+        if (!url) {
             console.error('The request URL must be provided!');
             return;
         }
 
-        if ( status === true )
-        {
+        if (status === true) {
             this._urlMap.set(url, status);
             this._show$.next(true);
-        }
-        else if ( status === false && this._urlMap.has(url) )
-        {
+        } else if (status === false && this._urlMap.has(url)) {
             this._urlMap.delete(url);
         }
 
         // Only set the status to 'false' if all outgoing requests are completed
-        if ( this._urlMap.size === 0 )
-        {
+        if (this._urlMap.size === 0) {
             this._show$.next(false);
         }
     }
diff --git a/src/@fuse/services/loading/public-api.ts b/src/@fuse/services/loading/public-api.ts
index a1477621..51ab7e19 100644
--- a/src/@fuse/services/loading/public-api.ts
+++ b/src/@fuse/services/loading/public-api.ts
@@ -1,2 +1,2 @@
-export * from '@fuse/services/loading/loading.service';
 export * from '@fuse/services/loading/loading.interceptor';
+export * from '@fuse/services/loading/loading.service';
diff --git a/src/@fuse/services/media-watcher/media-watcher.service.ts b/src/@fuse/services/media-watcher/media-watcher.service.ts
index a2ce7ba0..fe5b4071 100644
--- a/src/@fuse/services/media-watcher/media-watcher.service.ts
+++ b/src/@fuse/services/media-watcher/media-watcher.service.ts
@@ -1,54 +1,74 @@
 import { BreakpointObserver, BreakpointState } from '@angular/cdk/layout';
-import { inject, Injectable } from '@angular/core';
+import { Injectable, inject } from '@angular/core';
 import { FuseConfigService } from '@fuse/services/config';
 import { fromPairs } from 'lodash-es';
-import { map, Observable, ReplaySubject, switchMap } from 'rxjs';
+import { Observable, ReplaySubject, map, switchMap } from 'rxjs';
 
-@Injectable({providedIn: 'root'})
-export class FuseMediaWatcherService
-{
+@Injectable({ providedIn: 'root' })
+export class FuseMediaWatcherService {
     private _breakpointObserver = inject(BreakpointObserver);
     private _fuseConfigService = inject(FuseConfigService);
 
-    private _onMediaChange: ReplaySubject<{ matchingAliases: string[]; matchingQueries: any }> = new ReplaySubject<{ matchingAliases: string[]; matchingQueries: any }>(1);
+    private _onMediaChange: ReplaySubject<{
+        matchingAliases: string[];
+        matchingQueries: any;
+    }> = new ReplaySubject<{ matchingAliases: string[]; matchingQueries: any }>(
+        1
+    );
 
     /**
      * Constructor
      */
-    constructor()
-    {
-        this._fuseConfigService.config$.pipe(
-            map(config => fromPairs(Object.entries(config.screens).map(([alias, screen]) => ([alias, `(min-width: ${screen})`])))),
-            switchMap(screens => this._breakpointObserver.observe(Object.values(screens)).pipe(
-                map((state) =>
-                {
-                    // Prepare the observable values and set their defaults
-                    const matchingAliases: string[] = [];
-                    const matchingQueries: any = {};
+    constructor() {
+        this._fuseConfigService.config$
+            .pipe(
+                map((config) =>
+                    fromPairs(
+                        Object.entries(config.screens).map(
+                            ([alias, screen]) => [
+                                alias,
+                                `(min-width: ${screen})`,
+                            ]
+                        )
+                    )
+                ),
+                switchMap((screens) =>
+                    this._breakpointObserver
+                        .observe(Object.values(screens))
+                        .pipe(
+                            map((state) => {
+                                // Prepare the observable values and set their defaults
+                                const matchingAliases: string[] = [];
+                                const matchingQueries: any = {};
 
-                    // Get the matching breakpoints and use them to fill the subject
-                    const matchingBreakpoints = Object.entries(state.breakpoints).filter(([query, matches]) => matches) ?? [];
-                    for ( const [query] of matchingBreakpoints )
-                    {
-                        // Find the alias of the matching query
-                        const matchingAlias = Object.entries(screens).find(([alias, q]) => q === query)[0];
+                                // Get the matching breakpoints and use them to fill the subject
+                                const matchingBreakpoints =
+                                    Object.entries(state.breakpoints).filter(
+                                        ([query, matches]) => matches
+                                    ) ?? [];
+                                for (const [query] of matchingBreakpoints) {
+                                    // Find the alias of the matching query
+                                    const matchingAlias = Object.entries(
+                                        screens
+                                    ).find(([alias, q]) => q === query)[0];
 
-                        // Add the matching query to the observable values
-                        if ( matchingAlias )
-                        {
-                            matchingAliases.push(matchingAlias);
-                            matchingQueries[matchingAlias] = query;
-                        }
-                    }
+                                    // Add the matching query to the observable values
+                                    if (matchingAlias) {
+                                        matchingAliases.push(matchingAlias);
+                                        matchingQueries[matchingAlias] = query;
+                                    }
+                                }
 
-                    // Execute the observable
-                    this._onMediaChange.next({
-                        matchingAliases,
-                        matchingQueries,
-                    });
-                }),
-            )),
-        ).subscribe();
+                                // Execute the observable
+                                this._onMediaChange.next({
+                                    matchingAliases,
+                                    matchingQueries,
+                                });
+                            })
+                        )
+                )
+            )
+            .subscribe();
     }
 
     // -----------------------------------------------------------------------------------------------------
@@ -58,8 +78,10 @@ export class FuseMediaWatcherService
     /**
      * Getter for _onMediaChange
      */
-    get onMediaChange$(): Observable<{ matchingAliases: string[]; matchingQueries: any }>
-    {
+    get onMediaChange$(): Observable<{
+        matchingAliases: string[];
+        matchingQueries: any;
+    }> {
         return this._onMediaChange.asObservable();
     }
 
@@ -72,8 +94,7 @@ export class FuseMediaWatcherService
      *
      * @param query
      */
-    onMediaQueryChange$(query: string | string[]): Observable<BreakpointState>
-    {
+    onMediaQueryChange$(query: string | string[]): Observable<BreakpointState> {
         return this._breakpointObserver.observe(query);
     }
 }
diff --git a/src/@fuse/services/platform/platform.service.ts b/src/@fuse/services/platform/platform.service.ts
index 3bfb8a74..7addc1de 100644
--- a/src/@fuse/services/platform/platform.service.ts
+++ b/src/@fuse/services/platform/platform.service.ts
@@ -1,9 +1,8 @@
 import { Platform } from '@angular/cdk/platform';
 import { inject, Injectable } from '@angular/core';
 
-@Injectable({providedIn: 'root'})
-export class FusePlatformService
-{
+@Injectable({ providedIn: 'root' })
+export class FusePlatformService {
     private _platform = inject(Platform);
 
     osName = 'os-unknown';
@@ -11,49 +10,40 @@ export class FusePlatformService
     /**
      * Constructor
      */
-    constructor()
-    {
+    constructor() {
         // If the platform is not a browser, return immediately
-        if ( !this._platform.isBrowser )
-        {
+        if (!this._platform.isBrowser) {
             return;
         }
 
         // Windows
-        if ( navigator.userAgent.includes('Win') )
-        {
+        if (navigator.userAgent.includes('Win')) {
             this.osName = 'os-windows';
         }
 
         // Mac OS
-        if ( navigator.userAgent.includes('Mac') )
-        {
+        if (navigator.userAgent.includes('Mac')) {
             this.osName = 'os-mac';
         }
 
         // Unix
-        if ( navigator.userAgent.includes('X11') )
-        {
+        if (navigator.userAgent.includes('X11')) {
             this.osName = 'os-unix';
         }
 
         // Linux
-        if ( navigator.userAgent.includes('Linux') )
-        {
+        if (navigator.userAgent.includes('Linux')) {
             this.osName = 'os-linux';
         }
 
         // iOS
-        if ( this._platform.IOS )
-        {
+        if (this._platform.IOS) {
             this.osName = 'os-ios';
         }
 
         // Android
-        if ( this._platform.ANDROID )
-        {
+        if (this._platform.ANDROID) {
             this.osName = 'os-android';
         }
     }
-
 }
diff --git a/src/@fuse/services/splash-screen/splash-screen.service.ts b/src/@fuse/services/splash-screen/splash-screen.service.ts
index ee708a9c..5d3cb1b8 100644
--- a/src/@fuse/services/splash-screen/splash-screen.service.ts
+++ b/src/@fuse/services/splash-screen/splash-screen.service.ts
@@ -3,25 +3,22 @@ import { inject, Injectable } from '@angular/core';
 import { NavigationEnd, Router } from '@angular/router';
 import { filter, take } from 'rxjs';
 
-@Injectable({providedIn: 'root'})
-export class FuseSplashScreenService
-{
+@Injectable({ providedIn: 'root' })
+export class FuseSplashScreenService {
     private _document = inject(DOCUMENT);
     private _router = inject(Router);
 
     /**
      * Constructor
      */
-    constructor()
-    {
+    constructor() {
         // Hide it on the first NavigationEnd event
         this._router.events
             .pipe(
-                filter(event => event instanceof NavigationEnd),
-                take(1),
+                filter((event) => event instanceof NavigationEnd),
+                take(1)
             )
-            .subscribe(() =>
-            {
+            .subscribe(() => {
                 this.hide();
             });
     }
@@ -33,16 +30,14 @@ export class FuseSplashScreenService
     /**
      * Show the splash screen
      */
-    show(): void
-    {
+    show(): void {
         this._document.body.classList.remove('fuse-splash-screen-hidden');
     }
 
     /**
      * Hide the splash screen
      */
-    hide(): void
-    {
+    hide(): void {
         this._document.body.classList.add('fuse-splash-screen-hidden');
     }
 }
diff --git a/src/@fuse/services/utils/utils.service.ts b/src/@fuse/services/utils/utils.service.ts
index 84ae7cce..d7f37c78 100644
--- a/src/@fuse/services/utils/utils.service.ts
+++ b/src/@fuse/services/utils/utils.service.ts
@@ -1,9 +1,8 @@
 import { Injectable } from '@angular/core';
 import { IsActiveMatchOptions } from '@angular/router';
 
-@Injectable({providedIn: 'root'})
-export class FuseUtilsService
-{
+@Injectable({ providedIn: 'root' })
+export class FuseUtilsService {
     // -----------------------------------------------------------------------------------------------------
     // @ Accessors
     // -----------------------------------------------------------------------------------------------------
@@ -11,26 +10,24 @@ export class FuseUtilsService
     /**
      * Get the equivalent "IsActiveMatchOptions" options for "exact = true".
      */
-    get exactMatchOptions(): IsActiveMatchOptions
-    {
+    get exactMatchOptions(): IsActiveMatchOptions {
         return {
-            paths       : 'exact',
-            fragment    : 'ignored',
+            paths: 'exact',
+            fragment: 'ignored',
             matrixParams: 'ignored',
-            queryParams : 'exact',
+            queryParams: 'exact',
         };
     }
 
     /**
      * Get the equivalent "IsActiveMatchOptions" options for "exact = false".
      */
-    get subsetMatchOptions(): IsActiveMatchOptions
-    {
+    get subsetMatchOptions(): IsActiveMatchOptions {
         return {
-            paths       : 'subset',
-            fragment    : 'ignored',
+            paths: 'subset',
+            fragment: 'ignored',
             matrixParams: 'ignored',
-            queryParams : 'subset',
+            queryParams: 'subset',
         };
     }
 
@@ -43,13 +40,12 @@ export class FuseUtilsService
      *
      * @param length
      */
-    randomId(length: number = 10): string
-    {
-        const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
+    randomId(length: number = 10): string {
+        const chars =
+            'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
         let name = '';
 
-        for ( let i = 0; i < 10; i++ )
-        {
+        for (let i = 0; i < 10; i++) {
             name += chars.charAt(Math.floor(Math.random() * chars.length));
         }
 
diff --git a/src/@fuse/styles/components/example-viewer.scss b/src/@fuse/styles/components/example-viewer.scss
index fe0fd303..43e3d806 100644
--- a/src/@fuse/styles/components/example-viewer.scss
+++ b/src/@fuse/styles/components/example-viewer.scss
@@ -6,7 +6,7 @@
     flex-direction: column;
     margin: 32px 0;
     overflow: hidden;
-    @apply rounded-2xl shadow bg-card;
+    @apply bg-card rounded-2xl shadow;
 
     .title {
         display: flex;
@@ -32,11 +32,8 @@
     }
 
     mat-tab-group {
-
         .mat-tab-body-content {
-
             .fuse-highlight {
-
                 pre {
                     margin: 0;
                     border-radius: 0;
diff --git a/src/@fuse/styles/overrides/angular-material.scss b/src/@fuse/styles/overrides/angular-material.scss
index fb6f3c2a..a5138cf0 100644
--- a/src/@fuse/styles/overrides/angular-material.scss
+++ b/src/@fuse/styles/overrides/angular-material.scss
@@ -8,8 +8,8 @@
 /* -------------------------------------------------------------------------- */
 /*  @ Font smoothing
 /* -------------------------------------------------------------------------- */
-*[class*=mat-],
-*[class*=mat-mdc-] {
+*[class*='mat-'],
+*[class*='mat-mdc-'] {
     -webkit-font-smoothing: auto !important;
     -moz-osx-font-smoothing: auto !important;
 
@@ -23,11 +23,10 @@
 /*  @ Accordion
 /* -------------------------------------------------------------------------- */
 .mat-accordion {
-
     .mat-expansion-panel {
         margin-bottom: 24px;
         border-radius: 8px !important;
-        transition: box-shadow 225ms cubic-bezier(0.4, 0.0, 0.2, 1);
+        transition: box-shadow 225ms cubic-bezier(0.4, 0, 0.2, 1);
         @apply shadow #{'!important'};
 
         &:last-child {
@@ -40,11 +39,8 @@
         }
 
         &:not(.mat-expanded) {
-
             .mat-expansion-panel-header {
-
-                &:not([aria-disabled=true]) {
-
+                &:not([aria-disabled='true']) {
                     &.cdk-keyboard-focused,
                     &.cdk-program-focused,
                     &:hover {
@@ -57,8 +53,7 @@
         .mat-expansion-panel-header {
             font-size: 14px;
 
-            &[aria-disabled=true] {
-
+            &[aria-disabled='true'] {
                 .mat-expansion-panel-header-description {
                     margin-right: 28px;
                 }
@@ -107,8 +102,7 @@
     }
 
     /* Lower the icon opacity on disabled buttons */
-    &[disabled=true] {
-
+    &[disabled='true'] {
         .mat-icon {
             opacity: 0.38 !important;
         }
@@ -157,13 +151,11 @@
     border-radius: 9999px !important;
 }
 
-
 /* Fix the alignment of icons when used within buttons */
 .mat-mdc-button,
 .mat-mdc-raised-button,
 .mat-mdc-outlined-button,
 .mat-mdc-unelevated-button {
-
     & > .mat-icon {
         margin-left: 0 !important;
         margin-right: 0 !important;
@@ -178,11 +170,8 @@
 .mat-mdc-icon-button,
 .mat-mdc-fab,
 .mat-mdc-mini-fab {
-
     .mat-mdc-progress-spinner {
-
         .mdc-circular-progress__indeterminate-container {
-
             circle {
                 stroke: currentColor !important;
                 animation-duration: 6000ms;
@@ -196,12 +185,15 @@
 .mat-mdc-unelevated-button,
 .mat-mdc-fab,
 .mat-mdc-mini-fab {
-
-    --mat-mdc-button-persistent-ripple-color: theme('colors.gray[400]') !important;
+    --mat-mdc-button-persistent-ripple-color: theme(
+        'colors.gray[400]'
+    ) !important;
     --mat-mdc-button-ripple-color: rgba(0, 0, 0, 0.1) !important;
 
     .dark & {
-        --mat-mdc-button-persistent-ripple-color: theme('colors.black') !important;
+        --mat-mdc-button-persistent-ripple-color: theme(
+            'colors.black'
+        ) !important;
         --mat-mdc-button-ripple-color: rgba(0, 0, 0, 0.1) !important;
     }
 
@@ -218,12 +210,9 @@
 .mat-mdc-button,
 .mat-mdc-icon-button,
 .mat-mdc-outlined-button {
-
-    &:not([disabled=true]) {
-
+    &:not([disabled='true']) {
         /* Apply primary color */
         &.mat-primary {
-
             .mat-icon {
                 @apply text-primary #{'!important'};
             }
@@ -231,7 +220,6 @@
 
         /* Apply accent color */
         &.mat-accent {
-
             .mat-icon {
                 @apply text-accent #{'!important'};
             }
@@ -239,7 +227,6 @@
 
         /* Apply warn color */
         &.mat-warn {
-
             .mat-icon {
                 @apply text-warn #{'!important'};
             }
@@ -249,21 +236,19 @@
 
 /* Adjust the border color of outlined buttons */
 .mat-mdc-outlined-button {
-
     /* Not disabled */
-    &:not([disabled=true]) {
+    &:not([disabled='true']) {
         @apply border-gray-300 dark:border-gray-500 #{'!important'};
     }
 
     /* Disabled */
-    &[disabled=true] {
+    &[disabled='true'] {
         @apply border-gray-300/70 dark:border-gray-600 #{'!important'};
     }
 }
 
 /* Don't wrap the button label text */
 .mdc-button {
-
     .mdc-button__label {
         white-space: nowrap;
     }
@@ -277,7 +262,6 @@
     @apply space-x-1;
 
     &.mat-button-toggle-group-appearance-standard {
-
         .mat-button-toggle + .mat-button-toggle {
             background-clip: padding-box;
         }
@@ -290,7 +274,6 @@
         font-weight: 500;
 
         &.mat-button-toggle-checked {
-
             .mat-button-toggle-label-content {
                 @apply text-default #{'!important'};
             }
@@ -330,7 +313,6 @@
 /*  @ Dialog
 /* -------------------------------------------------------------------------- */
 .mat-mdc-dialog-container {
-
     .mdc-dialog__surface {
         border-radius: 16px !important;
         padding: 24px;
@@ -350,7 +332,6 @@
 
 /* "fill" appearance */
 .mat-mdc-form-field.mat-form-field-appearance-fill {
-
     /* Disabled */
     &.mat-form-field-disabled {
         opacity: 0.7 !important;
@@ -358,7 +339,6 @@
 
     /* Invalid */
     &.mat-form-field-invalid {
-
         /* Border color */
         .mat-mdc-text-field-wrapper {
             @apply border-warn dark:border-warn #{'!important'};
@@ -366,7 +346,6 @@
 
         /* Select */
         .mat-mdc-select {
-
             /* Placeholder color */
             .mat-mdc-select-placeholder {
                 @apply text-warn #{'!important'};
@@ -376,7 +355,6 @@
 
     /* Hover */
     &:hover {
-
         .mat-mdc-form-field-focus-overlay {
             opacity: 0 !important;
         }
@@ -384,7 +362,6 @@
 
     /* Focused */
     &.mat-focused {
-
         .mat-mdc-form-field-focus-overlay {
             opacity: 0 !important;
         }
@@ -392,7 +369,6 @@
 
     /* Focused and valid fields */
     &.mat-focused:not(.mat-form-field-invalid) {
-
         /* Border color */
         .mat-mdc-text-field-wrapper {
             @apply border-primary dark:border-primary #{'!important'};
@@ -401,9 +377,7 @@
 
     /* Remove the default arrow for native select */
     &.mat-mdc-form-field-type-mat-native-select {
-
         .mat-mdc-form-field-infix {
-
             select {
                 top: auto;
                 margin-top: 0;
@@ -432,7 +406,7 @@
         border-radius: 6px;
         border-width: 1px;
         border-style: solid;
-        @apply shadow-sm bg-white border-gray-300 dark:bg-black dark:bg-opacity-5 dark:border-gray-500 #{'!important'};
+        @apply border-gray-300 bg-white shadow-sm dark:border-gray-500 dark:bg-black dark:bg-opacity-5 #{'!important'};
 
         /* Adjust the top spacing and overflow when mat-label present */
         &:not(.mdc-text-field--no-label) {
@@ -529,17 +503,16 @@
                     align-items: center;
 
                     &:focus {
-
                         .mat-mdc-select-trigger {
-
                             .mat-mdc-select-value {
                                 @apply text-primary #{'!important'};
                             }
 
                             .mat-mdc-select-arrow-wrapper {
-
                                 .mat-mdc-select-arrow {
-                                    border-top-color: var(--fuse-primary) !important;
+                                    border-top-color: var(
+                                        --fuse-primary
+                                    ) !important;
                                 }
                             }
                         }
@@ -554,7 +527,6 @@
                             max-width: none;
 
                             mat-mdc-select-trigger {
-
                                 .mat-icon {
                                     margin: 0 !important;
                                 }
@@ -634,11 +606,8 @@
 
     /* Adds better alignment for textarea inputs */
     &:has(textarea.mat-mdc-input-element) {
-
         .mat-mdc-text-field-wrapper {
-
             .mat-mdc-form-field-flex {
-
                 .mat-mdc-form-field-icon-prefix,
                 .mat-mdc-form-field-text-prefix,
                 .mat-mdc-form-field-icon-suffix,
@@ -652,18 +621,14 @@
 
     /* Rounded */
     &.fuse-mat-rounded {
-
         .mat-mdc-text-field-wrapper {
             border-radius: 24px;
         }
 
         /* Emphasized affix */
         &.fuse-mat-emphasized-affix {
-
             .mat-mdc-text-field-wrapper {
-
                 .mat-mdc-form-field-flex {
-
                     .mat-mdc-form-field-icon-prefix,
                     .mat-mdc-form-field-text-prefix {
                         border-radius: 24px 0 0 24px;
@@ -684,7 +649,9 @@
                             margin-right: 4px;
                         }
 
-                        > *:not(.mat-icon):not(.mat-mdc-icon-button):not(.mat-mdc-select):not(.mat-datepicker-toggle) {
+                        > *:not(.mat-icon):not(.mat-mdc-icon-button):not(
+                                .mat-mdc-select
+                            ):not(.mat-datepicker-toggle) {
                             margin-right: 12px;
                         }
                     }
@@ -709,7 +676,9 @@
                             margin-left: 4px !important;
                         }
 
-                        > *:not(.mat-icon):not(.mat-mdc-icon-button):not(.mat-mdc-select):not(.mat-datepicker-toggle) {
+                        > *:not(.mat-icon):not(.mat-mdc-icon-button):not(
+                                .mat-mdc-select
+                            ):not(.mat-datepicker-toggle) {
                             margin-left: 12px !important;
                         }
                     }
@@ -720,16 +689,12 @@
 
     /* Dense */
     &.fuse-mat-dense {
-
         .mat-mdc-text-field-wrapper {
-
             .mat-mdc-form-field-flex {
-
                 .mat-mdc-form-field-icon-prefix,
                 .mat-mdc-form-field-text-prefix,
                 .mat-mdc-form-field-icon-suffix,
                 .mat-mdc-form-field-text-suffix {
-
                     .mat-mdc-icon-button {
                         width: 32px !important;
                         min-width: 32px;
@@ -740,7 +705,6 @@
 
                 .mat-mdc-form-field-icon-prefix,
                 .mat-mdc-form-field-text-prefix {
-
                     > .mat-mdc-icon-button {
                         margin-left: -6px;
                         margin-right: 12px;
@@ -749,7 +713,6 @@
 
                 .mat-mdc-form-field-icon-suffix,
                 .mat-mdc-form-field-text-suffix {
-
                     > .mat-mdc-icon-button {
                         margin-left: 12px;
                         margin-right: -6px;
@@ -769,11 +732,8 @@
 
         /* Adds better alignment for textarea inputs */
         &:has(textarea.mat-mdc-input-element) {
-
             .mat-mdc-text-field-wrapper {
-
                 .mat-mdc-form-field-flex {
-
                     .mat-mdc-form-field-icon-prefix,
                     .mat-mdc-form-field-text-prefix,
                     .mat-mdc-form-field-icon-suffix,
@@ -786,18 +746,14 @@
 
         /* Rounded */
         &.fuse-mat-rounded {
-
             .mat-mdc-text-field-wrapper {
                 border-radius: 20px;
             }
 
             /* Emphasized affix */
             &.fuse-mat-emphasized-affix {
-
                 .mat-mdc-text-field-wrapper {
-
                     .mat-mdc-form-field-flex {
-
                         .mat-mdc-form-field-icon-prefix,
                         .mat-mdc-form-field-text-prefix {
                             border-radius: 20px 0 0 20px !important;
@@ -815,11 +771,8 @@
 
     /* Emphasized affix */
     &.fuse-mat-emphasized-affix {
-
         .mat-mdc-text-field-wrapper {
-
             .mat-mdc-form-field-flex {
-
                 .mat-mdc-form-field-icon-prefix,
                 .mat-mdc-form-field-text-prefix {
                     align-self: stretch !important;
@@ -845,7 +798,9 @@
                         margin-right: 8px;
                     }
 
-                    > *:not(.mat-icon):not(.mat-mdc-icon-button):not(.mat-mdc-select):not(.mat-datepicker-toggle) {
+                    > *:not(.mat-icon):not(.mat-mdc-icon-button):not(
+                            .mat-mdc-select
+                        ):not(.mat-datepicker-toggle) {
                         margin-right: 16px;
                     }
                 }
@@ -875,7 +830,9 @@
                         margin-left: 8px;
                     }
 
-                    > *:not(.mat-icon):not(.mat-mdc-icon-button):not(.mat-mdc-select):not(.mat-datepicker-toggle) {
+                    > *:not(.mat-icon):not(.mat-mdc-icon-button):not(
+                            .mat-mdc-select
+                        ):not(.mat-datepicker-toggle) {
                         margin-left: 16px;
                     }
                 }
@@ -891,11 +848,8 @@
 
         /* with Textarea */
         &:has(textarea.mat-mdc-input-element) {
-
             .mat-mdc-text-field-wrapper {
-
                 .mat-mdc-form-field-flex {
-
                     .mat-mdc-form-field-icon-prefix,
                     .mat-mdc-form-field-text-prefix,
                     .mat-mdc-form-field-icon-suffix,
@@ -909,7 +863,6 @@
 
     /* Bolder border width */
     &.fuse-mat-bold {
-
         .mat-mdc-text-field-wrapper {
             border-width: 2px !important;
         }
@@ -918,10 +871,8 @@
 
 /* "outline" appearance */
 .mat-mdc-form-field.mat-form-field-appearance-outline {
-
     /* Invalid */
     &.mat-form-field-invalid {
-
         .mdc-notched-outline__leading,
         .mdc-notched-outline__notch,
         .mdc-notched-outline__trailing {
@@ -931,10 +882,8 @@
 
     /* Focused */
     &.mat-focused:not(.mat-form-field-invalid) {
-
         /* Primary */
         &.mat-primary {
-
             .mdc-notched-outline__leading,
             .mdc-notched-outline__notch,
             .mdc-notched-outline__trailing {
@@ -944,7 +893,6 @@
 
         /* Accent */
         &.mat-accent {
-
             .mdc-notched-outline__leading,
             .mdc-notched-outline__notch,
             .mdc-notched-outline__trailing {
@@ -954,13 +902,9 @@
     }
 
     &:not(.mat-focused):not(.mat-form-field-invalid) {
-
         .mat-mdc-text-field-wrapper {
-
             .mat-mdc-form-field-flex {
-
                 .mdc-notched-outline {
-
                     .mdc-notched-outline__leading,
                     .mdc-notched-outline__notch,
                     .mdc-notched-outline__trailing {
@@ -974,11 +918,8 @@
     /* Remove the extra border on the right side of the notch */
     /* Tailwind's global border setter causes this issue */
     .mat-mdc-text-field-wrapper {
-
         .mat-mdc-form-field-flex {
-
             .mdc-notched-outline {
-
                 .mdc-notched-outline__notch {
                     border-right-style: none !important;
                 }
@@ -991,7 +932,6 @@
 /*  @ Datepicker
 /* -------------------------------------------------------------------------- */
 
-
 /* -------------------------------------------------------------------------- */
 /*  @ Icon
 /* -------------------------------------------------------------------------- */
@@ -1012,7 +952,6 @@
 /*  @ Inputs
 /* -------------------------------------------------------------------------- */
 .mat-mdc-input-element {
-
     &::placeholder {
         transition: none !important;
         @apply text-hint #{'!important'};
@@ -1036,9 +975,7 @@
 
 /* Invalid */
 .mat-form-field-invalid {
-
     .mat-mdc-input-element {
-
         /* Placeholder color */
         &::placeholder {
             @apply text-warn #{'!important'};
@@ -1065,7 +1002,6 @@
     min-width: 144px !important;
 
     .mat-mdc-menu-content {
-
         .mat-mdc-menu-item {
             display: flex;
             align-items: center;
@@ -1100,7 +1036,6 @@
 /*  @ Paginator
 /* -------------------------------------------------------------------------- */
 .mat-mdc-paginator {
-
     .mat-mdc-paginator-container {
         padding: 8px 16px;
         justify-content: space-between;
@@ -1160,7 +1095,6 @@
     }
 
     .mat-mdc-select-trigger {
-
         .mat-mdc-select-value {
             position: relative;
             display: flex;
@@ -1191,14 +1125,12 @@
 /*  @ Slide Toggle
 /* -------------------------------------------------------------------------- */
 
-
 /* -------------------------------------------------------------------------- */
 /*  @ Snack bar
 /* -------------------------------------------------------------------------- */
 .mat-mdc-snack-bar-container {
-
     .mat-mdc-button.mat-mdc-snack-bar-action:not(:disabled) {
-        color: #FFFFFF !important;
+        color: #ffffff !important;
 
         .dark & {
             color: #000000 !important;
@@ -1206,12 +1138,10 @@
     }
 }
 
-
 /* -------------------------------------------------------------------------- */
 /*  @ Stepper
 /* -------------------------------------------------------------------------- */
 .mat-step-icon {
-
     /* Do not override the mat-icon color */
     .mat-icon {
         color: currentColor !important;
@@ -1227,7 +1157,6 @@
 /*  @ Table
 /* -------------------------------------------------------------------------- */
 .mat-mdc-table {
-
     .mdc-data-table__row:not(.mdc-data-table__row--selected):hover {
         background: none !important;
     }
@@ -1237,10 +1166,8 @@
 /*  @ Tabs
 /* -------------------------------------------------------------------------- */
 .mat-mdc-tab-group {
-
     /* No header */
     &.fuse-mat-no-header {
-
         .mat-mdc-tab-header {
             height: 0 !important;
             max-height: 0 !important;
@@ -1251,9 +1178,7 @@
     }
 
     &:not(.mat-background-primary):not(.mat-background-accent) {
-
         .mat-mdc-tab-header {
-
             .mat-mdc-tab-label-container {
                 box-shadow: inset 0 -1px var(--fuse-border);
             }
@@ -1261,7 +1186,6 @@
     }
 
     .mat-mdc-tab-header {
-
         .mat-mdc-tab-label-container {
             margin: 0 24px;
         }
@@ -1283,10 +1207,8 @@ textarea.mat-mdc-input-element {
 /*  @ Toolbar
 /* -------------------------------------------------------------------------- */
 .mat-toolbar {
-
     /* Apply primary contrast color */
     &.mat-primary {
-
         .mat-icon {
             @apply text-on-primary #{'!important'};
         }
@@ -1310,7 +1232,6 @@ textarea.mat-mdc-input-element {
 
     /* Apply accent contrast color */
     &.mat-accent {
-
         .mat-icon {
             @apply text-on-accent #{'!important'};
         }
@@ -1334,7 +1255,6 @@ textarea.mat-mdc-input-element {
 
     /* Apply warn contrast color */
     &.mat-warn {
-
         .mat-icon {
             @apply text-on-warn #{'!important'};
         }
diff --git a/src/@fuse/styles/overrides/highlightjs.scss b/src/@fuse/styles/overrides/highlightjs.scss
index 120ef830..bed63676 100644
--- a/src/@fuse/styles/overrides/highlightjs.scss
+++ b/src/@fuse/styles/overrides/highlightjs.scss
@@ -3,36 +3,35 @@
 /* ----------------------------------------------------------------------------------------------------- */
 code[class*='language-'],
 pre[class*='language-'] {
-
     .hljs-comment,
     .hljs-quote {
-        color: #8B9FC1;
+        color: #8b9fc1;
         font-style: italic;
     }
 
     .hljs-doctag,
     .hljs-keyword,
     .hljs-formula {
-        color: #22D3EE;
+        color: #22d3ee;
     }
 
     .hljs-name {
-        color: #E879F9;
+        color: #e879f9;
     }
 
     .hljs-tag {
-        color: #BAE6FD;
+        color: #bae6fd;
     }
 
     .hljs-section,
     .hljs-selector-tag,
     .hljs-deletion,
     .hljs-subst {
-        color: #F87F71;
+        color: #f87f71;
     }
 
     .hljs-literal {
-        color: #36BEFF;
+        color: #36beff;
     }
 
     .hljs-string,
@@ -40,12 +39,12 @@ pre[class*='language-'] {
     .hljs-addition,
     .hljs-attribute,
     .hljs-meta-string {
-        color: #BEF264;
+        color: #bef264;
     }
 
     .hljs-built_in,
     .hljs-class .hljs-title {
-        color: #FFD374;
+        color: #ffd374;
     }
 
     .hljs-attr,
@@ -56,7 +55,7 @@ pre[class*='language-'] {
     .hljs-selector-attr,
     .hljs-selector-pseudo,
     .hljs-number {
-        color: #22D3EE;
+        color: #22d3ee;
     }
 
     .hljs-symbol,
@@ -65,7 +64,7 @@ pre[class*='language-'] {
     .hljs-meta,
     .hljs-selector-id,
     .hljs-title {
-        color: #E879F9;
+        color: #e879f9;
     }
 
     .hljs-emphasis {
diff --git a/src/@fuse/styles/overrides/perfect-scrollbar.scss b/src/@fuse/styles/overrides/perfect-scrollbar.scss
index 586b47dc..1ab1b68e 100644
--- a/src/@fuse/styles/overrides/perfect-scrollbar.scss
+++ b/src/@fuse/styles/overrides/perfect-scrollbar.scss
@@ -8,7 +8,6 @@
     &.ps--focus,
     &.ps--scrolling-x,
     &.ps--scrolling-y {
-
         > .ps__rail-x,
         > .ps__rail-y {
             opacity: 1;
diff --git a/src/@fuse/styles/overrides/quill.scss b/src/@fuse/styles/overrides/quill.scss
index af181a0a..e16b018f 100644
--- a/src/@fuse/styles/overrides/quill.scss
+++ b/src/@fuse/styles/overrides/quill.scss
@@ -17,9 +17,7 @@
     }
 
     .ql-picker {
-
         &.ql-expanded {
-
             .ql-picker-label {
                 @apply border-gray-300;
 
@@ -30,7 +28,7 @@
 
             .ql-picker-options {
                 z-index: 10 !important;
-                @apply border-gray-300 bg-card;
+                @apply bg-card border-gray-300;
 
                 .dark & {
                     @apply border-gray-500;
@@ -43,7 +41,6 @@
         }
 
         .ql-picker-options {
-
             .ql-picker-item {
                 @apply text-default;
             }
@@ -103,10 +100,10 @@
     }
 
     .ql-tooltip {
-        @apply px-3 py-1 shadow-sm rounded-md bg-gray-100 border-gray-300;
+        @apply rounded-md border-gray-300 bg-gray-100 px-3 py-1 shadow-sm;
 
         .dark & {
-            @apply shadow-lg bg-gray-700 border-gray-700 #{'!important'};
+            @apply border-gray-700 bg-gray-700 shadow-lg #{'!important'};
         }
 
         // Label
@@ -116,10 +113,10 @@
 
         .ql-action,
         .ql-remove {
-            @apply text-primary border-gray-300;
+            @apply border-gray-300 text-primary;
 
             .dark & {
-                @apply text-primary-400 border-gray-300;
+                @apply border-gray-300 text-primary-400;
             }
         }
 
@@ -132,10 +129,10 @@
         }
 
         input {
-            @apply rounded-sm text-default bg-white border-gray-300 #{'!important'};
+            @apply text-default rounded-sm border-gray-300 bg-white #{'!important'};
 
             .dark & {
-                @apply bg-gray-700 border-gray-500 #{'!important'};
+                @apply border-gray-500 bg-gray-700 #{'!important'};
             }
         }
     }
diff --git a/src/@fuse/styles/tailwind.scss b/src/@fuse/styles/tailwind.scss
index ec8610ab..a6d1b6c0 100644
--- a/src/@fuse/styles/tailwind.scss
+++ b/src/@fuse/styles/tailwind.scss
@@ -3,7 +3,6 @@
 
 /* This injects additional styles into Tailwind's base styles layer. */
 @layer base {
-
     * {
         /* Text rendering */
         text-rendering: optimizeLegibility;
@@ -64,7 +63,9 @@
     }
 
     /* Set the background and foreground colors */
-    body, .dark, .light {
+    body,
+    .dark,
+    .light {
         @apply text-default bg-default #{'!important'};
     }
 
@@ -82,9 +83,7 @@
 
     /* Style scrollbars on platforms other than MacOS and iOS */
     @media only screen and (min-width: 960px) {
-
         body:not(.os-mac) {
-
             ::-webkit-scrollbar {
                 width: 8px;
                 height: 8px;
@@ -127,13 +126,14 @@
 
     /* Print styles */
     @media print {
-
         /* Make the base font size smaller for print so everything is scaled nicely */
         html {
             font-size: 12px !important;
         }
 
-        body, .dark, .light {
+        body,
+        .dark,
+        .light {
             background: none !important;
         }
     }
diff --git a/src/@fuse/styles/themes.scss b/src/@fuse/styles/themes.scss
index 980b77c0..b2ca1dc3 100644
--- a/src/@fuse/styles/themes.scss
+++ b/src/@fuse/styles/themes.scss
@@ -1,154 +1,247 @@
-@use "sass:map";
+@use 'sass:map';
 @use '@angular/material' as mat;
-@use "user-themes" as userThemes;
+@use 'user-themes' as userThemes;
 
 /* Set the base colors for light themes */
 $light-base: (
     foreground: (
         base: #000000,
-        divider: #E2E8F0, /* slate.200 */
-        dividers: #E2E8F0, /* slate.200 */
-        disabled: #94A3B8, /* slate.400 */
-        disabled-button: #94A3B8, /* slate.400 */
-        disabled-text: #94A3B8, /* slate.400 */
-        elevation: #000000,
-        hint-text: #94A3B8, /* slate.400 */
-        secondary-text: #64748B, /* slate.500 */
-        icon: #64748B, /* slate.500 */
-        icons: #64748B, /* slate.500 */
-        mat-icon: #64748B, /* slate.500 */
-        text: #1E293B, /* slate.800 */
-        slider-min: #1E293B, /* slate.800 */
-        slider-off: #CBD5E1, /* slate.300 */
-        slider-off-active: #94A3B8 /* slate.400 */
+        divider: #e2e8f0,
+        /* slate.200 */ dividers: #e2e8f0,
+        /* slate.200 */ disabled: #94a3b8,
+        /* slate.400 */ disabled-button: #94a3b8,
+        /* slate.400 */ disabled-text: #94a3b8,
+        /* slate.400 */ elevation: #000000,
+        hint-text: #94a3b8,
+        /* slate.400 */ secondary-text: #64748b,
+        /* slate.500 */ icon: #64748b,
+        /* slate.500 */ icons: #64748b,
+        /* slate.500 */ mat-icon: #64748b,
+        /* slate.500 */ text: #1e293b,
+        /* slate.800 */ slider-min: #1e293b,
+        /* slate.800 */ slider-off: #cbd5e1,
+        /* slate.300 */ slider-off-active: #94a3b8 /* slate.400 */,
     ),
     background: (
-        status-bar: #CBD5E1, /* slate.300 */
-        app-bar: #FFFFFF,
-        background: #F1F5F9, /* slate.100 */
-        hover: rgba(148, 163, 184, 0.12), /* slate.400 + opacity */
-        card: #FFFFFF,
-        dialog: #FFFFFF,
-        disabled-button: rgba(148, 163, 184, 0.38), /* slate.400 + opacity */
-        raised-button: #FFFFFF,
-        focused-button: #64748B, /* slate.500 */
-        selected-button: #E2E8F0, /* slate.200 */
-        selected-disabled-button: #E2E8F0, /* slate.200 */
-        disabled-button-toggle: #CBD5E1, /* slate.300 */
-        unselected-chip: #E2E8F0, /* slate.200 */
-        disabled-list-option: #CBD5E1, /* slate.300 */
-        tooltip: #1E293B /* slate.800 */
-    )
+        status-bar: #cbd5e1,
+        /* slate.300 */ app-bar: #ffffff,
+        background: #f1f5f9,
+        /* slate.100 */ hover: rgba(148, 163, 184, 0.12),
+        /* slate.400 + opacity */ card: #ffffff,
+        dialog: #ffffff,
+        disabled-button: rgba(148, 163, 184, 0.38),
+        /* slate.400 + opacity */ raised-button: #ffffff,
+        focused-button: #64748b,
+        /* slate.500 */ selected-button: #e2e8f0,
+        /* slate.200 */ selected-disabled-button: #e2e8f0,
+        /* slate.200 */ disabled-button-toggle: #cbd5e1,
+        /* slate.300 */ unselected-chip: #e2e8f0,
+        /* slate.200 */ disabled-list-option: #cbd5e1,
+        /* slate.300 */ tooltip: #1e293b /* slate.800 */,
+    ),
 );
 
 /* Set the base colors for dark themes */
 $dark-base: (
     foreground: (
-        base: #FFFFFF,
-        divider: rgba(241, 245, 249, 0.12), /* slate.100 + opacity */
-        dividers: rgba(241, 245, 249, 0.12), /* slate.100 + opacity */
-        disabled: #475569, /* slate.600 */
-        disabled-button: #1E293B, /* slate.800 */
-        disabled-text: #475569, /* slate.600 */
-        elevation: #000000,
-        hint-text: #64748B, /* slate.500 */
-        secondary-text: #94A3B8, /* slate.400 */
-        icon: #F1F5F9, /* slate.100 */
-        icons: #F1F5F9, /* slate.100 */
-        mat-icon: #94A3B8, /* slate.400 */
-        text: #FFFFFF,
-        slider-min: #FFFFFF,
-        slider-off: #64748B, /* slate.500 */
-        slider-off-active: #94A3B8 /* slate.400 */
+        base: #ffffff,
+        divider: rgba(241, 245, 249, 0.12),
+        /* slate.100 + opacity */ dividers: rgba(241, 245, 249, 0.12),
+        /* slate.100 + opacity */ disabled: #475569,
+        /* slate.600 */ disabled-button: #1e293b,
+        /* slate.800 */ disabled-text: #475569,
+        /* slate.600 */ elevation: #000000,
+        hint-text: #64748b,
+        /* slate.500 */ secondary-text: #94a3b8,
+        /* slate.400 */ icon: #f1f5f9,
+        /* slate.100 */ icons: #f1f5f9,
+        /* slate.100 */ mat-icon: #94a3b8,
+        /* slate.400 */ text: #ffffff,
+        slider-min: #ffffff,
+        slider-off: #64748b,
+        /* slate.500 */ slider-off-active: #94a3b8 /* slate.400 */,
     ),
     background: (
-        status-bar: #0F172A, /* slate.900 */
-        app-bar: #0F172A, /* slate.900 */
-        background: #0F172A, /* slate.900 */
-        hover: rgba(255, 255, 255, 0.05),
-        card: #1E293B, /* slate.800 */
-        dialog: #1E293B, /* slate.800 */
-        disabled-button: rgba(15, 23, 42, 0.38), /* slate.900 + opacity */
-        raised-button: #0F172A, /* slate.900 */
-        focused-button: #E2E8F0, /* slate.200 */
-        selected-button: rgba(255, 255, 255, 0.05),
-        selected-disabled-button: #1E293B, /* slate.800 */
-        disabled-button-toggle: #0F172A, /* slate.900 */
-        unselected-chip: #475569, /* slate.600 */
-        disabled-list-option: #E2E8F0, /* slate.200 */
-        tooltip: #64748B /* slate.500 */
-    )
+        status-bar: #0f172a,
+        /* slate.900 */ app-bar: #0f172a,
+        /* slate.900 */ background: #0f172a,
+        /* slate.900 */ hover: rgba(255, 255, 255, 0.05),
+        card: #1e293b,
+        /* slate.800 */ dialog: #1e293b,
+        /* slate.800 */ disabled-button: rgba(15, 23, 42, 0.38),
+        /* slate.900 + opacity */ raised-button: #0f172a,
+        /* slate.900 */ focused-button: #e2e8f0,
+        /* slate.200 */ selected-button: rgba(255, 255, 255, 0.05),
+        selected-disabled-button: #1e293b,
+        /* slate.800 */ disabled-button-toggle: #0f172a,
+        /* slate.900 */ unselected-chip: #475569,
+        /* slate.600 */ disabled-list-option: #e2e8f0,
+        /* slate.200 */ tooltip: #64748b /* slate.500 */,
+    ),
 );
 
 /* Include the core Angular Material styles */
 @include mat.core();
 
 /* Create a base theme without any color to set the density and typography */
-@include mat.all-component-themes((
-    color: null,
-    density: 0,
-    typography: mat.m2-define-typography-config(
-        $font-family: theme('fontFamily.sans'),
-        $headline-1: mat.m2-define-typography-level(1.875rem, 2.25rem, 800, theme('fontFamily.sans')),
-        $headline-2: mat.m2-define-typography-level(1.25rem, 1.75rem, 700, theme('fontFamily.sans')),
-        $headline-3: mat.m2-define-typography-level(1.125rem, 1.75rem, 600, theme('fontFamily.sans')),
-        $headline-4: mat.m2-define-typography-level(0.875rem, 1.25rem, 600, theme('fontFamily.sans')),
-        $headline-5: mat.m2-define-typography-level(0.875rem, 1.5rem, 400, theme('fontFamily.sans')),
-        $headline-6: mat.m2-define-typography-level(0.875rem, 1.5rem, 400, theme('fontFamily.sans')),
-        $subtitle-1: mat.m2-define-typography-level(1rem, 1.75rem, 400, theme('fontFamily.sans')),
-        $subtitle-2: mat.m2-define-typography-level(0.875rem, 1.25rem, 600, theme('fontFamily.sans')),
-        $body-1: mat.m2-define-typography-level(0.875rem, 1.5rem, 400, theme('fontFamily.sans')),
-        $body-2: mat.m2-define-typography-level(0.875rem, 1.5rem, 400, theme('fontFamily.sans')),
-        $caption: mat.m2-define-typography-level(0.75rem, 1rem, 400, theme('fontFamily.sans')),
-        $button: mat.m2-define-typography-level(0.875rem, 0.875rem, 500, theme('fontFamily.sans')),
-        $overline: mat.m2-define-typography-level(0.75rem, 2rem, 500, theme('fontFamily.sans'))
+@include mat.all-component-themes(
+    (
+        color: null,
+        density: 0,
+        typography:
+            mat.m2-define-typography-config(
+                $font-family: theme('fontFamily.sans'),
+                $headline-1:
+                    mat.m2-define-typography-level(
+                        1.875rem,
+                        2.25rem,
+                        800,
+                        theme('fontFamily.sans')
+                    ),
+                $headline-2:
+                    mat.m2-define-typography-level(
+                        1.25rem,
+                        1.75rem,
+                        700,
+                        theme('fontFamily.sans')
+                    ),
+                $headline-3:
+                    mat.m2-define-typography-level(
+                        1.125rem,
+                        1.75rem,
+                        600,
+                        theme('fontFamily.sans')
+                    ),
+                $headline-4:
+                    mat.m2-define-typography-level(
+                        0.875rem,
+                        1.25rem,
+                        600,
+                        theme('fontFamily.sans')
+                    ),
+                $headline-5:
+                    mat.m2-define-typography-level(
+                        0.875rem,
+                        1.5rem,
+                        400,
+                        theme('fontFamily.sans')
+                    ),
+                $headline-6:
+                    mat.m2-define-typography-level(
+                        0.875rem,
+                        1.5rem,
+                        400,
+                        theme('fontFamily.sans')
+                    ),
+                $subtitle-1:
+                    mat.m2-define-typography-level(
+                        1rem,
+                        1.75rem,
+                        400,
+                        theme('fontFamily.sans')
+                    ),
+                $subtitle-2:
+                    mat.m2-define-typography-level(
+                        0.875rem,
+                        1.25rem,
+                        600,
+                        theme('fontFamily.sans')
+                    ),
+                $body-1:
+                    mat.m2-define-typography-level(
+                        0.875rem,
+                        1.5rem,
+                        400,
+                        theme('fontFamily.sans')
+                    ),
+                $body-2:
+                    mat.m2-define-typography-level(
+                        0.875rem,
+                        1.5rem,
+                        400,
+                        theme('fontFamily.sans')
+                    ),
+                $caption:
+                    mat.m2-define-typography-level(
+                        0.75rem,
+                        1rem,
+                        400,
+                        theme('fontFamily.sans')
+                    ),
+                $button:
+                    mat.m2-define-typography-level(
+                        0.875rem,
+                        0.875rem,
+                        500,
+                        theme('fontFamily.sans')
+                    ),
+                $overline:
+                    mat.m2-define-typography-level(
+                        0.75rem,
+                        2rem,
+                        500,
+                        theme('fontFamily.sans')
+                    )
+            ),
     )
-));
+);
 
 /* Loop through user themes and generate Angular Material themes */
 @each $name, $theme in userThemes.$user-themes {
-
     /* Generate the palettes */
     $palettes: ();
     @each $name in (primary, accent, warn) {
-
         /* Define the Angular Material theme */
         $palette: mat.m2-define-palette(map.get($theme, $name));
 
         /* Replace the default colors on the defined Material palette */
-        $palette: map.merge($palette, (
-            default: map.get(map.get($theme, $name), DEFAULT),
-            lighter: map.get(map.get($theme, $name), 100),
-            darker: map.get(map.get($theme, $name), 700),
-            text: map.get(map.get($theme, $name), DEFAULT),
-            default-contrast: map.get(map.get(map.get($theme, $name), contrast), DEFAULT),
-            lighter-contrast: map.get(map.get(map.get($theme, $name), contrast), 100),
-            darker-contrast: map.get(map.get(map.get($theme, $name), contrast), 700)
-        ));
+        $palette: map.merge(
+            $palette,
+            (
+                default: map.get(map.get($theme, $name), DEFAULT),
+                lighter: map.get(map.get($theme, $name), 100),
+                darker: map.get(map.get($theme, $name), 700),
+                text: map.get(map.get($theme, $name), DEFAULT),
+                default-contrast:
+                    map.get(map.get(map.get($theme, $name), contrast), DEFAULT),
+                lighter-contrast:
+                    map.get(map.get(map.get($theme, $name), contrast), 100),
+                darker-contrast:
+                    map.get(map.get(map.get($theme, $name), contrast), 700),
+            )
+        );
 
         $palettes: map.merge($palettes, (#{$name}: $palette));
     }
 
     /* Define a light & dark Angular Material theme with the generated palettes */
-    $light-theme: mat.m2-define-light-theme((
-        color: $palettes
-    ));
+    $light-theme: mat.m2-define-light-theme(
+        (
+            color: $palettes,
+        )
+    );
 
-    $dark-theme: mat.m2-define-dark-theme((
-        color: $palettes
-    ));
+    $dark-theme: mat.m2-define-dark-theme(
+        (
+            color: $palettes,
+        )
+    );
 
     /* Merge the custom base colors with the generated themes */
     $light-theme-colors: map.merge(map.get($light-theme, color), $light-base);
     $light-theme: map.merge(
-            (color: $light-theme-colors),
-            $light-theme-colors
+        (
+            color: $light-theme-colors,
+        ),
+        $light-theme-colors
     );
 
     $dark-theme-colors: map.merge(map.get($dark-theme, color), $dark-base);
     $dark-theme: map.merge(
-            (color: $dark-theme-colors),
-            $dark-theme-colors
+        (
+            color: $dark-theme-colors,
+        ),
+        $dark-theme-colors
     );
 
     /* Generate and encapsulate Angular Material themes */
diff --git a/src/@fuse/tailwind/plugins/icon-size.js b/src/@fuse/tailwind/plugins/icon-size.js
index 7c862477..bb9f61bd 100644
--- a/src/@fuse/tailwind/plugins/icon-size.js
+++ b/src/@fuse/tailwind/plugins/icon-size.js
@@ -1,50 +1,47 @@
 const plugin = require('tailwindcss/plugin');
 
 module.exports = plugin(
-    ({
-        matchUtilities,
-        theme,
-    }) =>
-    {
+    ({ matchUtilities, theme }) => {
         matchUtilities(
             {
                 'icon-size': (value) => ({
-                    width     : value,
-                    height    : value,
-                    minWidth  : value,
-                    minHeight : value,
-                    fontSize  : value,
+                    width: value,
+                    height: value,
+                    minWidth: value,
+                    minHeight: value,
+                    fontSize: value,
                     lineHeight: value,
-                    [`svg`]   : {
-                        width : value,
+                    [`svg`]: {
+                        width: value,
                         height: value,
                     },
                 }),
             },
             {
                 values: theme('iconSize'),
-            });
+            }
+        );
     },
     {
         theme: {
             iconSize: {
-                3  : '0.75rem',
+                3: '0.75rem',
                 3.5: '0.875rem',
-                4  : '1rem',
+                4: '1rem',
                 4.5: '1.125rem',
-                5  : '1.25rem',
-                6  : '1.5rem',
-                7  : '1.75rem',
-                8  : '2rem',
-                10 : '2.5rem',
-                12 : '3rem',
-                14 : '3.5rem',
-                16 : '4rem',
-                18 : '4.5rem',
-                20 : '5rem',
-                22 : '5.5rem',
-                24 : '6rem',
+                5: '1.25rem',
+                6: '1.5rem',
+                7: '1.75rem',
+                8: '2rem',
+                10: '2.5rem',
+                12: '3rem',
+                14: '3.5rem',
+                16: '4rem',
+                18: '4.5rem',
+                20: '5rem',
+                22: '5.5rem',
+                24: '6rem',
             },
         },
-    },
+    }
 );
diff --git a/src/@fuse/tailwind/plugins/theming.js b/src/@fuse/tailwind/plugins/theming.js
index 3f2135d4..894fdc0a 100644
--- a/src/@fuse/tailwind/plugins/theming.js
+++ b/src/@fuse/tailwind/plugins/theming.js
@@ -4,9 +4,14 @@ const fs = require('fs');
 const path = require('path');
 const colors = require('tailwindcss/colors');
 const plugin = require('tailwindcss/plugin');
-const flattenColorPalette = require('tailwindcss/lib/util/flattenColorPalette').default;
-const generateContrasts = require(path.resolve(__dirname, ('../utils/generate-contrasts')));
-const jsonToSassMap = require(path.resolve(__dirname, ('../utils/json-to-sass-map')));
+const flattenColorPalette =
+    require('tailwindcss/lib/util/flattenColorPalette').default;
+const generateContrasts = require(
+    path.resolve(__dirname, '../utils/generate-contrasts')
+);
+const jsonToSassMap = require(
+    path.resolve(__dirname, '../utils/json-to-sass-map')
+);
 
 // -----------------------------------------------------------------------------------------------------
 // @ Utilities
@@ -19,188 +24,277 @@ const jsonToSassMap = require(path.resolve(__dirname, ('../utils/json-to-sass-ma
  *
  * @param theme
  */
-const normalizeTheme = (theme) =>
-{
-    return _.fromPairs(_.map(_.omitBy(theme, (palette, paletteName) => paletteName.startsWith('on') || _.isEmpty(palette)),
-        (palette, paletteName) => [
-            paletteName,
-            {
-                ...palette,
-                DEFAULT: palette['DEFAULT'] || palette[500],
-            },
-        ],
-    ));
+const normalizeTheme = (theme) => {
+    return _.fromPairs(
+        _.map(
+            _.omitBy(
+                theme,
+                (palette, paletteName) =>
+                    paletteName.startsWith('on') || _.isEmpty(palette)
+            ),
+            (palette, paletteName) => [
+                paletteName,
+                {
+                    ...palette,
+                    DEFAULT: palette['DEFAULT'] || palette[500],
+                },
+            ]
+        )
+    );
 };
 
 // -----------------------------------------------------------------------------------------------------
 // @ FUSE TailwindCSS Main Plugin
 // -----------------------------------------------------------------------------------------------------
-const theming = plugin.withOptions((options) => ({
-        addComponents,
-        e,
-        theme,
-    }) =>
-    {
-        /**
-         * Create user themes object by going through the provided themes and
-         * merging them with the provided "default" so, we can have a complete
-         * set of color palettes for each user theme.
-         */
-        const userThemes = _.fromPairs(_.map(options.themes, (theme, themeName) => [
-            themeName,
-            _.defaults({}, theme, options.themes['default']),
-        ]));
+const theming = plugin.withOptions(
+    (options) =>
+        ({ addComponents, e, theme }) => {
+            /**
+             * Create user themes object by going through the provided themes and
+             * merging them with the provided "default" so, we can have a complete
+             * set of color palettes for each user theme.
+             */
+            const userThemes = _.fromPairs(
+                _.map(options.themes, (theme, themeName) => [
+                    themeName,
+                    _.defaults({}, theme, options.themes['default']),
+                ])
+            );
 
-        /**
-         * Normalize the themes and assign it to the themes object. This will
-         * be the final object that we create a SASS map from
-         */
-        let themes = _.fromPairs(_.map(userThemes, (theme, themeName) => [
-            themeName,
-            normalizeTheme(theme),
-        ]));
+            /**
+             * Normalize the themes and assign it to the themes object. This will
+             * be the final object that we create a SASS map from
+             */
+            let themes = _.fromPairs(
+                _.map(userThemes, (theme, themeName) => [
+                    themeName,
+                    normalizeTheme(theme),
+                ])
+            );
 
-        /**
-         * Go through the themes to generate the contrasts and filter the
-         * palettes to only have "primary", "accent" and "warn" objects.
-         */
-        themes = _.fromPairs(_.map(themes, (theme, themeName) => [
-            themeName,
-            _.pick(
-                _.fromPairs(_.map(theme, (palette, paletteName) => [
-                    paletteName,
+            /**
+             * Go through the themes to generate the contrasts and filter the
+             * palettes to only have "primary", "accent" and "warn" objects.
+             */
+            themes = _.fromPairs(
+                _.map(themes, (theme, themeName) => [
+                    themeName,
+                    _.pick(
+                        _.fromPairs(
+                            _.map(theme, (palette, paletteName) => [
+                                paletteName,
+                                {
+                                    ...palette,
+                                    contrast: _.fromPairs(
+                                        _.map(
+                                            generateContrasts(palette),
+                                            (color, hue) => [
+                                                hue,
+                                                _.get(userThemes[themeName], [
+                                                    `on-${paletteName}`,
+                                                    hue,
+                                                ]) || color,
+                                            ]
+                                        )
+                                    ),
+                                },
+                            ])
+                        ),
+                        ['primary', 'accent', 'warn']
+                    ),
+                ])
+            );
+
+            /**
+             * Go through the themes and attach appropriate class selectors so,
+             * we can use them to encapsulate each theme.
+             */
+            themes = _.fromPairs(
+                _.map(themes, (theme, themeName) => [
+                    themeName,
                     {
-                        ...palette,
-                        contrast: _.fromPairs(_.map(generateContrasts(palette), (color, hue) => [
-                            hue,
-                            _.get(userThemes[themeName], [`on-${paletteName}`, hue]) || color,
-                        ])),
+                        selector: `".theme-${themeName}"`,
+                        ...theme,
                     },
-                ])),
-                ['primary', 'accent', 'warn'],
-            ),
-        ]));
+                ])
+            );
 
-        /**
-         * Go through the themes and attach appropriate class selectors so,
-         * we can use them to encapsulate each theme.
-         */
-        themes = _.fromPairs(_.map(themes, (theme, themeName) => [
-            themeName,
-            {
-                selector: `".theme-${themeName}"`,
-                ...theme,
-            },
-        ]));
+            /* Generate the SASS map using the themes object */
+            const sassMap = jsonToSassMap(
+                JSON.stringify({ 'user-themes': themes })
+            );
 
-        /* Generate the SASS map using the themes object */
-        const sassMap = jsonToSassMap(JSON.stringify({'user-themes': themes}));
+            /* Get the file path */
+            const filename = path.resolve(
+                __dirname,
+                '../../styles/user-themes.scss'
+            );
 
-        /* Get the file path */
-        const filename = path.resolve(__dirname, ('../../styles/user-themes.scss'));
-
-        /* Read the file and get its data */
-        let data;
-        try
-        {
-            data = fs.readFileSync(filename, {encoding: 'utf8'});
-        }
-        catch ( err )
-        {
-            console.error(err);
-        }
-
-        /* Write the file if the map has been changed */
-        if ( data !== sassMap )
-        {
-            try
-            {
-                fs.writeFileSync(filename, sassMap, {encoding: 'utf8'});
-            }
-            catch ( err )
-            {
+            /* Read the file and get its data */
+            let data;
+            try {
+                data = fs.readFileSync(filename, { encoding: 'utf8' });
+            } catch (err) {
                 console.error(err);
             }
-        }
 
-        /**
-         * Iterate through the user's themes and build Tailwind components containing
-         * CSS Custom Properties using the colors from them. This allows switching
-         * themes by simply replacing a class name as well as nesting them.
-         */
-        addComponents(
-            _.fromPairs(_.map(options.themes, (theme, themeName) => [
-                themeName === 'default' ? 'body, .theme-default' : `.theme-${e(themeName)}`,
-                _.fromPairs(_.flatten(_.map(flattenColorPalette(_.fromPairs(_.flatten(_.map(normalizeTheme(theme), (palette, paletteName) => [
-                        [
-                            e(paletteName),
-                            palette,
-                        ],
-                        [
-                            `on-${e(paletteName)}`,
-                            _.fromPairs(_.map(generateContrasts(palette), (color, hue) => [hue, _.get(theme, [`on-${paletteName}`, hue]) || color])),
-                        ],
-                    ]),
-                ))), (value, key) => [[`--fuse-${e(key)}`, value], [`--fuse-${e(key)}-rgb`, chroma(value).rgb().join(',')]]))),
-            ])),
-        );
+            /* Write the file if the map has been changed */
+            if (data !== sassMap) {
+                try {
+                    fs.writeFileSync(filename, sassMap, { encoding: 'utf8' });
+                } catch (err) {
+                    console.error(err);
+                }
+            }
 
-        /**
-         * Generate scheme based css custom properties and utility classes
-         */
-        const schemeCustomProps = _.map(['light', 'dark'], (colorScheme) =>
-        {
-            const isDark = colorScheme === 'dark';
-            const background = theme(`fuse.customProps.background.${colorScheme}`);
-            const foreground = theme(`fuse.customProps.foreground.${colorScheme}`);
-            const lightSchemeSelectors = 'body.light, .light, .dark .light';
-            const darkSchemeSelectors = 'body.dark, .dark, .light .dark';
+            /**
+             * Iterate through the user's themes and build Tailwind components containing
+             * CSS Custom Properties using the colors from them. This allows switching
+             * themes by simply replacing a class name as well as nesting them.
+             */
+            addComponents(
+                _.fromPairs(
+                    _.map(options.themes, (theme, themeName) => [
+                        themeName === 'default'
+                            ? 'body, .theme-default'
+                            : `.theme-${e(themeName)}`,
+                        _.fromPairs(
+                            _.flatten(
+                                _.map(
+                                    flattenColorPalette(
+                                        _.fromPairs(
+                                            _.flatten(
+                                                _.map(
+                                                    normalizeTheme(theme),
+                                                    (palette, paletteName) => [
+                                                        [
+                                                            e(paletteName),
+                                                            palette,
+                                                        ],
+                                                        [
+                                                            `on-${e(paletteName)}`,
+                                                            _.fromPairs(
+                                                                _.map(
+                                                                    generateContrasts(
+                                                                        palette
+                                                                    ),
+                                                                    (
+                                                                        color,
+                                                                        hue
+                                                                    ) => [
+                                                                        hue,
+                                                                        _.get(
+                                                                            theme,
+                                                                            [
+                                                                                `on-${paletteName}`,
+                                                                                hue,
+                                                                            ]
+                                                                        ) ||
+                                                                            color,
+                                                                    ]
+                                                                )
+                                                            ),
+                                                        ],
+                                                    ]
+                                                )
+                                            )
+                                        )
+                                    ),
+                                    (value, key) => [
+                                        [`--fuse-${e(key)}`, value],
+                                        [
+                                            `--fuse-${e(key)}-rgb`,
+                                            chroma(value).rgb().join(','),
+                                        ],
+                                    ]
+                                )
+                            )
+                        ),
+                    ])
+                )
+            );
 
-            return {
-                [(isDark ? darkSchemeSelectors : lightSchemeSelectors)]: {
+            /**
+             * Generate scheme based css custom properties and utility classes
+             */
+            const schemeCustomProps = _.map(
+                ['light', 'dark'],
+                (colorScheme) => {
+                    const isDark = colorScheme === 'dark';
+                    const background = theme(
+                        `fuse.customProps.background.${colorScheme}`
+                    );
+                    const foreground = theme(
+                        `fuse.customProps.foreground.${colorScheme}`
+                    );
+                    const lightSchemeSelectors =
+                        'body.light, .light, .dark .light';
+                    const darkSchemeSelectors =
+                        'body.dark, .dark, .light .dark';
 
-                    /**
-                     * If a custom property is not available, browsers will use
-                     * the fallback value. In this case, we want to use '--is-dark'
-                     * as the indicator of a dark theme so, we can use it like this:
-                     * background-color: var(--is-dark, red);
-                     *
-                     * If we set '--is-dark' as "true" on dark themes, the above rule
-                     * won't work because of the said "fallback value" logic. Therefore,
-                     * we set the '--is-dark' to "false" on light themes and not set it
-                     * at all on dark themes so that the fallback value can be used on
-                     * dark themes.
-                     *
-                     * On light themes, since '--is-dark' exists, the above rule will be
-                     * interpolated as:
-                     * "background-color: false"
-                     *
-                     * On dark themes, since '--is-dark' doesn't exist, the fallback value
-                     * will be used ('red' in this case) and the rule will be interpolated as:
-                     * "background-color: red"
-                     *
-                     * It's easier to understand and remember like this.
-                     */
-                    ...(!isDark ? {'--is-dark': 'false'} : {}),
+                    return {
+                        [isDark ? darkSchemeSelectors : lightSchemeSelectors]: {
+                            /**
+                             * If a custom property is not available, browsers will use
+                             * the fallback value. In this case, we want to use '--is-dark'
+                             * as the indicator of a dark theme so, we can use it like this:
+                             * background-color: var(--is-dark, red);
+                             *
+                             * If we set '--is-dark' as "true" on dark themes, the above rule
+                             * won't work because of the said "fallback value" logic. Therefore,
+                             * we set the '--is-dark' to "false" on light themes and not set it
+                             * at all on dark themes so that the fallback value can be used on
+                             * dark themes.
+                             *
+                             * On light themes, since '--is-dark' exists, the above rule will be
+                             * interpolated as:
+                             * "background-color: false"
+                             *
+                             * On dark themes, since '--is-dark' doesn't exist, the fallback value
+                             * will be used ('red' in this case) and the rule will be interpolated as:
+                             * "background-color: red"
+                             *
+                             * It's easier to understand and remember like this.
+                             */
+                            ...(!isDark ? { '--is-dark': 'false' } : {}),
 
-                    /* Generate custom properties from customProps */
-                    ..._.fromPairs(_.flatten(_.map(background, (value, key) => [[`--fuse-${e(key)}`, value], [`--fuse-${e(key)}-rgb`, chroma(value).rgb().join(',')]]))),
-                    ..._.fromPairs(_.flatten(_.map(foreground, (value, key) => [[`--fuse-${e(key)}`, value], [`--fuse-${e(key)}-rgb`, chroma(value).rgb().join(',')]]))),
-                },
-            };
-        });
+                            /* Generate custom properties from customProps */
+                            ..._.fromPairs(
+                                _.flatten(
+                                    _.map(background, (value, key) => [
+                                        [`--fuse-${e(key)}`, value],
+                                        [
+                                            `--fuse-${e(key)}-rgb`,
+                                            chroma(value).rgb().join(','),
+                                        ],
+                                    ])
+                                )
+                            ),
+                            ..._.fromPairs(
+                                _.flatten(
+                                    _.map(foreground, (value, key) => [
+                                        [`--fuse-${e(key)}`, value],
+                                        [
+                                            `--fuse-${e(key)}-rgb`,
+                                            chroma(value).rgb().join(','),
+                                        ],
+                                    ])
+                                )
+                            ),
+                        },
+                    };
+                }
+            );
 
-        const schemeUtilities = (() =>
-        {
-            /* Generate general styles & utilities */
-            return {};
-        })();
+            const schemeUtilities = (() => {
+                /* Generate general styles & utilities */
+                return {};
+            })();
 
-        addComponents(schemeCustomProps);
-        addComponents(schemeUtilities);
-    },
-    (options) =>
-    {
+            addComponents(schemeCustomProps);
+            addComponents(schemeUtilities);
+        },
+    (options) => {
         return {
             theme: {
                 extend: {
@@ -209,58 +303,81 @@ const theming = plugin.withOptions((options) => ({
                      * are generated for them; "bg-primary", "text-on-primary", "bg-accent-600" etc.
                      * This will also allow using arbitrary values with them such as opacity and such.
                      */
-                    colors: _.fromPairs(_.flatten(_.map(_.keys(flattenColorPalette(normalizeTheme(options.themes.default))), (name) => [
-                        [name, `rgba(var(--fuse-${name}-rgb), <alpha-value>)`],
-                        [`on-${name}`, `rgba(var(--fuse-on-${name}-rgb), <alpha-value>)`],
-                    ]))),
+                    colors: _.fromPairs(
+                        _.flatten(
+                            _.map(
+                                _.keys(
+                                    flattenColorPalette(
+                                        normalizeTheme(options.themes.default)
+                                    )
+                                ),
+                                (name) => [
+                                    [
+                                        name,
+                                        `rgba(var(--fuse-${name}-rgb), <alpha-value>)`,
+                                    ],
+                                    [
+                                        `on-${name}`,
+                                        `rgba(var(--fuse-on-${name}-rgb), <alpha-value>)`,
+                                    ],
+                                ]
+                            )
+                        )
+                    ),
                 },
-                fuse  : {
+                fuse: {
                     customProps: {
                         background: {
                             light: {
-                                'bg-app-bar'   : '#FFFFFF',
-                                'bg-card'      : '#FFFFFF',
-                                'bg-default'   : colors.slate[100],
-                                'bg-dialog'    : '#FFFFFF',
-                                'bg-hover'     : chroma(colors.slate[400]).alpha(0.12).css(),
+                                'bg-app-bar': '#FFFFFF',
+                                'bg-card': '#FFFFFF',
+                                'bg-default': colors.slate[100],
+                                'bg-dialog': '#FFFFFF',
+                                'bg-hover': chroma(colors.slate[400])
+                                    .alpha(0.12)
+                                    .css(),
                                 'bg-status-bar': colors.slate[300],
                             },
-                            dark : {
-                                'bg-app-bar'   : colors.slate[900],
-                                'bg-card'      : colors.slate[800],
-                                'bg-default'   : colors.slate[900],
-                                'bg-dialog'    : colors.slate[800],
-                                'bg-hover'     : 'rgba(255, 255, 255, 0.05)',
+                            dark: {
+                                'bg-app-bar': colors.slate[900],
+                                'bg-card': colors.slate[800],
+                                'bg-default': colors.slate[900],
+                                'bg-dialog': colors.slate[800],
+                                'bg-hover': 'rgba(255, 255, 255, 0.05)',
                                 'bg-status-bar': colors.slate[900],
                             },
                         },
                         foreground: {
                             light: {
-                                'text-default'  : colors.slate[800],
+                                'text-default': colors.slate[800],
                                 'text-secondary': colors.slate[500],
-                                'text-hint'     : colors.slate[400],
-                                'text-disabled' : colors.slate[400],
-                                'border'        : colors.slate[200],
-                                'divider'       : colors.slate[200],
-                                'icon'          : colors.slate[500],
-                                'mat-icon'      : colors.slate[500],
+                                'text-hint': colors.slate[400],
+                                'text-disabled': colors.slate[400],
+                                border: colors.slate[200],
+                                divider: colors.slate[200],
+                                icon: colors.slate[500],
+                                'mat-icon': colors.slate[500],
                             },
-                            dark : {
-                                'text-default'  : '#FFFFFF',
+                            dark: {
+                                'text-default': '#FFFFFF',
                                 'text-secondary': colors.slate[400],
-                                'text-hint'     : colors.slate[500],
-                                'text-disabled' : colors.slate[600],
-                                'border'        : chroma(colors.slate[100]).alpha(0.12).css(),
-                                'divider'       : chroma(colors.slate[100]).alpha(0.12).css(),
-                                'icon'          : colors.slate[400],
-                                'mat-icon'      : colors.slate[400],
+                                'text-hint': colors.slate[500],
+                                'text-disabled': colors.slate[600],
+                                border: chroma(colors.slate[100])
+                                    .alpha(0.12)
+                                    .css(),
+                                divider: chroma(colors.slate[100])
+                                    .alpha(0.12)
+                                    .css(),
+                                icon: colors.slate[400],
+                                'mat-icon': colors.slate[400],
                             },
                         },
                     },
                 },
             },
         };
-    },
+    }
 );
 
 module.exports = theming;
diff --git a/src/@fuse/tailwind/plugins/utilities.js b/src/@fuse/tailwind/plugins/utilities.js
index e4ef8b40..4045f22f 100644
--- a/src/@fuse/tailwind/plugins/utilities.js
+++ b/src/@fuse/tailwind/plugins/utilities.js
@@ -1,67 +1,65 @@
 const plugin = require('tailwindcss/plugin');
 
-module.exports = plugin(({
-    addComponents,
-}) =>
-{
+module.exports = plugin(({ addComponents }) => {
     /*
-    * Add base components. These are very important for everything to look
-    * correct. We are adding these to the 'components' layer because they must
-    * be defined before pretty much everything else.
-    */
-    addComponents(
-        {
-            '.mat-icon'       : {
-                '--tw-text-opacity': '1',
-                color              : 'rgba(var(--fuse-mat-icon-rgb), var(--tw-text-opacity))',
-            },
-            '.text-default'   : {
-                '--tw-text-opacity': '1 !important',
-                color              : 'rgba(var(--fuse-text-default-rgb), var(--tw-text-opacity)) !important',
-            },
-            '.text-secondary' : {
-                '--tw-text-opacity': '1 !important',
-                color              : 'rgba(var(--fuse-text-secondary-rgb), var(--tw-text-opacity)) !important',
-            },
-            '.text-hint'      : {
-                '--tw-text-opacity': '1 !important',
-                color              : 'rgba(var(--fuse-text-hint-rgb), var(--tw-text-opacity)) !important',
-            },
-            '.text-disabled'  : {
-                '--tw-text-opacity': '1 !important',
-                color              : 'rgba(var(--fuse-text-disabled-rgb), var(--tw-text-opacity)) !important',
-            },
-            '.divider'        : {
-                color: 'var(--fuse-divider) !important',
-            },
-            '.bg-card'        : {
-                '--tw-bg-opacity': '1 !important',
-                backgroundColor  : 'rgba(var(--fuse-bg-card-rgb), var(--tw-bg-opacity)) !important',
-            },
-            '.bg-default'     : {
-                '--tw-bg-opacity': '1 !important',
-                backgroundColor  : 'rgba(var(--fuse-bg-default-rgb), var(--tw-bg-opacity)) !important',
-            },
-            '.bg-dialog'      : {
-                '--tw-bg-opacity': '1 !important',
-                backgroundColor  : 'rgba(var(--fuse-bg-dialog-rgb), var(--tw-bg-opacity)) !important',
-            },
-            '.ring-bg-default': {
-                '--tw-ring-opacity': '1 !important',
-                '--tw-ring-color'  : 'rgba(var(--fuse-bg-default-rgb), var(--tw-ring-opacity)) !important',
-            },
-            '.ring-bg-card'   : {
-                '--tw-ring-opacity': '1 !important',
-                '--tw-ring-color'  : 'rgba(var(--fuse-bg-card-rgb), var(--tw-ring-opacity)) !important',
-            },
+     * Add base components. These are very important for everything to look
+     * correct. We are adding these to the 'components' layer because they must
+     * be defined before pretty much everything else.
+     */
+    addComponents({
+        '.mat-icon': {
+            '--tw-text-opacity': '1',
+            color: 'rgba(var(--fuse-mat-icon-rgb), var(--tw-text-opacity))',
         },
-    );
+        '.text-default': {
+            '--tw-text-opacity': '1 !important',
+            color: 'rgba(var(--fuse-text-default-rgb), var(--tw-text-opacity)) !important',
+        },
+        '.text-secondary': {
+            '--tw-text-opacity': '1 !important',
+            color: 'rgba(var(--fuse-text-secondary-rgb), var(--tw-text-opacity)) !important',
+        },
+        '.text-hint': {
+            '--tw-text-opacity': '1 !important',
+            color: 'rgba(var(--fuse-text-hint-rgb), var(--tw-text-opacity)) !important',
+        },
+        '.text-disabled': {
+            '--tw-text-opacity': '1 !important',
+            color: 'rgba(var(--fuse-text-disabled-rgb), var(--tw-text-opacity)) !important',
+        },
+        '.divider': {
+            color: 'var(--fuse-divider) !important',
+        },
+        '.bg-card': {
+            '--tw-bg-opacity': '1 !important',
+            backgroundColor:
+                'rgba(var(--fuse-bg-card-rgb), var(--tw-bg-opacity)) !important',
+        },
+        '.bg-default': {
+            '--tw-bg-opacity': '1 !important',
+            backgroundColor:
+                'rgba(var(--fuse-bg-default-rgb), var(--tw-bg-opacity)) !important',
+        },
+        '.bg-dialog': {
+            '--tw-bg-opacity': '1 !important',
+            backgroundColor:
+                'rgba(var(--fuse-bg-dialog-rgb), var(--tw-bg-opacity)) !important',
+        },
+        '.ring-bg-default': {
+            '--tw-ring-opacity': '1 !important',
+            '--tw-ring-color':
+                'rgba(var(--fuse-bg-default-rgb), var(--tw-ring-opacity)) !important',
+        },
+        '.ring-bg-card': {
+            '--tw-ring-opacity': '1 !important',
+            '--tw-ring-color':
+                'rgba(var(--fuse-bg-card-rgb), var(--tw-ring-opacity)) !important',
+        },
+    });
 
-    addComponents(
-        {
-            '.bg-hover': {
-                backgroundColor: 'var(--fuse-bg-hover) !important',
-            },
+    addComponents({
+        '.bg-hover': {
+            backgroundColor: 'var(--fuse-bg-hover) !important',
         },
-    );
+    });
 });
diff --git a/src/@fuse/tailwind/utils/generate-contrasts.js b/src/@fuse/tailwind/utils/generate-contrasts.js
index 2d7df415..2a121cc2 100644
--- a/src/@fuse/tailwind/utils/generate-contrasts.js
+++ b/src/@fuse/tailwind/utils/generate-contrasts.js
@@ -9,23 +9,29 @@ const _ = require('lodash');
  * @param palette
  * @private
  */
-const generateContrasts = (palette) =>
-{
+const generateContrasts = (palette) => {
     const lightColor = '#FFFFFF';
     let darkColor = '#FFFFFF';
 
     // Iterate through the palette to find the darkest color
-    _.forEach(palette, ((color) =>
-    {
-        darkColor = chroma.contrast(color, '#FFFFFF') > chroma.contrast(darkColor, '#FFFFFF') ? color : darkColor;
-    }));
+    _.forEach(palette, (color) => {
+        darkColor =
+            chroma.contrast(color, '#FFFFFF') >
+            chroma.contrast(darkColor, '#FFFFFF')
+                ? color
+                : darkColor;
+    });
 
     // Generate the contrasting colors
-    return _.fromPairs(_.map(palette, ((color, hue) => [
+    return _.fromPairs(
+        _.map(palette, (color, hue) => [
             hue,
-            chroma.contrast(color, darkColor) > chroma.contrast(color, lightColor) ? darkColor : lightColor,
-        ]
-    )));
+            chroma.contrast(color, darkColor) >
+            chroma.contrast(color, lightColor)
+                ? darkColor
+                : lightColor,
+        ])
+    );
 };
 
 module.exports = generateContrasts;
diff --git a/src/@fuse/tailwind/utils/generate-palette.js b/src/@fuse/tailwind/utils/generate-palette.js
index 8af41002..0147e448 100644
--- a/src/@fuse/tailwind/utils/generate-palette.js
+++ b/src/@fuse/tailwind/utils/generate-palette.js
@@ -9,11 +9,10 @@ const _ = require('lodash');
  *
  * @param config
  */
-const generatePalette = (config) =>
-{
+const generatePalette = (config) => {
     // Prepare an empty palette
     const palette = {
-        50 : null,
+        50: null,
         100: null,
         200: null,
         300: null,
@@ -27,25 +26,26 @@ const generatePalette = (config) =>
 
     // If a single color is provided,
     // assign it to the 500
-    if ( _.isString(config) )
-    {
+    if (_.isString(config)) {
         palette[500] = chroma.valid(config) ? config : null;
     }
 
     // If a partial palette is provided,
     // assign the values
-    if ( _.isPlainObject(config) )
-    {
-        if ( !chroma.valid(config[500]) )
-        {
-            throw new Error('You must have a 500 hue in your palette configuration! Make sure the main color of your palette is marked as 500.');
+    if (_.isPlainObject(config)) {
+        if (!chroma.valid(config[500])) {
+            throw new Error(
+                'You must have a 500 hue in your palette configuration! Make sure the main color of your palette is marked as 500.'
+            );
         }
 
         // Remove everything that is not a hue/color entry
         config = _.pick(config, Object.keys(palette));
 
         // Merge the values
-        _.mergeWith(palette, config, (objValue, srcValue) => chroma.valid(srcValue) ? srcValue : null);
+        _.mergeWith(palette, config, (objValue, srcValue) =>
+            chroma.valid(srcValue) ? srcValue : null
+        );
     }
 
     // Prepare the colors array
@@ -56,16 +56,18 @@ const generatePalette = (config) =>
     // than using pure white and pure black. This will stop
     // in between colors' hue values to slipping into the grays.
     colors.unshift(
-        chroma.scale(['white', palette[500]])
+        chroma
+            .scale(['white', palette[500]])
             .domain([0, 1])
             .mode('lrgb')
-            .colors(50)[1],
+            .colors(50)[1]
     );
     colors.push(
-        chroma.scale(['black', palette[500]])
+        chroma
+            .scale(['black', palette[500]])
             .domain([0, 1])
             .mode('lrgb')
-            .colors(10)[1],
+            .colors(10)[1]
     );
 
     // Prepare the domains array
@@ -78,13 +80,11 @@ const generatePalette = (config) =>
     ];
 
     // Generate the color scale
-    const scale = chroma.scale(colors)
-        .domain(domain)
-        .mode('lrgb');
+    const scale = chroma.scale(colors).domain(domain).mode('lrgb');
 
     // Build and return the final palette
     return {
-        50 : scale(0.05).hex(),
+        50: scale(0.05).hex(),
         100: scale(0.1).hex(),
         200: scale(0.2).hex(),
         300: scale(0.3).hex(),
diff --git a/src/@fuse/tailwind/utils/json-to-sass-map.js b/src/@fuse/tailwind/utils/json-to-sass-map.js
index de88736a..c19736f7 100644
--- a/src/@fuse/tailwind/utils/json-to-sass-map.js
+++ b/src/@fuse/tailwind/utils/json-to-sass-map.js
@@ -1,62 +1,44 @@
 const _ = require('lodash');
 
-module.exports = (data) =>
-{
-    if ( !data )
-    {
+module.exports = (data) => {
+    if (!data) {
         return;
     }
 
     data = JSON.parse(data);
 
-    const getSCSS = (chunk) =>
-    {
+    const getSCSS = (chunk) => {
         let scss = '';
 
-        if ( typeof chunk === 'object' && !Array.isArray(chunk) )
-        {
-            _.mapKeys(chunk, (value, key) =>
-            {
+        if (typeof chunk === 'object' && !Array.isArray(chunk)) {
+            _.mapKeys(chunk, (value, key) => {
                 scss += key + ': ';
 
-                if ( typeof value === 'object' )
-                {
-                    if ( Array.isArray(value) )
-                    {
+                if (typeof value === 'object') {
+                    if (Array.isArray(value)) {
                         scss += '(';
-                        _.each(value, (val1) =>
-                        {
-                            if ( Array.isArray(val1) )
-                            {
-                                _.each(val1, (val2) =>
-                                {
+                        _.each(value, (val1) => {
+                            if (Array.isArray(val1)) {
+                                _.each(val1, (val2) => {
                                     scss += val2 + ' ';
                                 });
                                 scss = scss.slice(0, -1) + ', ';
-                            }
-                            else
-                            {
+                            } else {
                                 scss += val1 + ', ';
                             }
                         });
                         scss = scss.slice(0, -2);
                         scss += ')';
-                    }
-                    else
-                    {
+                    } else {
                         scss += '(' + getSCSS(value) + ')';
                     }
-                }
-                else
-                {
+                } else {
                     scss += getSCSS(value);
                 }
                 scss += ', ';
             });
             scss = scss.slice(0, -2);
-        }
-        else
-        {
+        } else {
             scss += chunk;
         }
 
diff --git a/src/@fuse/validators/validators.ts b/src/@fuse/validators/validators.ts
index e86182d4..771d12a9 100644
--- a/src/@fuse/validators/validators.ts
+++ b/src/@fuse/validators/validators.ts
@@ -1,14 +1,12 @@
 import { AbstractControl, ValidationErrors, ValidatorFn } from '@angular/forms';
 
-export class FuseValidators
-{
+export class FuseValidators {
     /**
      * Check for empty (optional fields) values
      *
      * @param value
      */
-    static isEmptyInputValue(value: any): boolean
-    {
+    static isEmptyInputValue(value: any): boolean {
         return value == null || value.length === 0;
     }
 
@@ -18,36 +16,37 @@ export class FuseValidators
      * @param controlPath A dot-delimited string values that define the path to the control.
      * @param matchingControlPath A dot-delimited string values that define the path to the matching control.
      */
-    static mustMatch(controlPath: string, matchingControlPath: string): ValidatorFn
-    {
-        return (formGroup: AbstractControl): ValidationErrors | null =>
-        {
+    static mustMatch(
+        controlPath: string,
+        matchingControlPath: string
+    ): ValidatorFn {
+        return (formGroup: AbstractControl): ValidationErrors | null => {
             // Get the control and matching control
             const control = formGroup.get(controlPath);
             const matchingControl = formGroup.get(matchingControlPath);
 
             // Return if control or matching control doesn't exist
-            if ( !control || !matchingControl )
-            {
+            if (!control || !matchingControl) {
                 return null;
             }
 
             // Delete the mustMatch error to reset the error on the matching control
-            if ( matchingControl.hasError('mustMatch') )
-            {
+            if (matchingControl.hasError('mustMatch')) {
                 delete matchingControl.errors.mustMatch;
                 matchingControl.updateValueAndValidity();
             }
 
             // Don't validate empty values on the matching control
             // Don't validate if values are matching
-            if ( this.isEmptyInputValue(matchingControl.value) || control.value === matchingControl.value )
-            {
+            if (
+                this.isEmptyInputValue(matchingControl.value) ||
+                control.value === matchingControl.value
+            ) {
                 return null;
             }
 
             // Prepare the validation errors
-            const errors = {mustMatch: true};
+            const errors = { mustMatch: true };
 
             // Set the validation error on the matching control
             matchingControl.setErrors(errors);
diff --git a/src/@fuse/version/version.ts b/src/@fuse/version/version.ts
index 6e7a8d4b..99a9f935 100644
--- a/src/@fuse/version/version.ts
+++ b/src/@fuse/version/version.ts
@@ -1,8 +1,7 @@
 /**
  * Derived from Angular's version class
  */
-export class Version
-{
+export class Version {
     public readonly full: string;
     public readonly major: string;
     public readonly minor: string;
@@ -11,8 +10,7 @@ export class Version
     /**
      * Constructor
      */
-    constructor(public version: string)
-    {
+    constructor(public version: string) {
         this.full = version;
         this.major = version.split('.')[0];
         this.minor = version.split('.')[1];
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 23712759..e1c10ba2 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -2,18 +2,15 @@ import { Component } from '@angular/core';
 import { RouterOutlet } from '@angular/router';
 
 @Component({
-    selector   : 'app-root',
+    selector: 'app-root',
     templateUrl: './app.component.html',
-    styleUrls  : ['./app.component.scss'],
-    standalone : true,
-    imports    : [RouterOutlet],
+    styleUrls: ['./app.component.scss'],
+    standalone: true,
+    imports: [RouterOutlet],
 })
-export class AppComponent
-{
+export class AppComponent {
     /**
      * Constructor
      */
-    constructor()
-    {
-    }
+    constructor() {}
 }
diff --git a/src/app/app.config.ts b/src/app/app.config.ts
index 04e8eeb4..62f1478b 100644
--- a/src/app/app.config.ts
+++ b/src/app/app.config.ts
@@ -3,40 +3,46 @@ import { APP_INITIALIZER, ApplicationConfig, inject } from '@angular/core';
 import { LuxonDateAdapter } from '@angular/material-luxon-adapter';
 import { DateAdapter, MAT_DATE_FORMATS } from '@angular/material/core';
 import { provideAnimations } from '@angular/platform-browser/animations';
-import { PreloadAllModules, provideRouter, withInMemoryScrolling, withPreloading } from '@angular/router';
+import {
+    PreloadAllModules,
+    provideRouter,
+    withInMemoryScrolling,
+    withPreloading,
+} from '@angular/router';
 import { provideFuse } from '@fuse';
-import { provideTransloco, TranslocoService } from '@ngneat/transloco';
-import { firstValueFrom } from 'rxjs';
+import { TranslocoService, provideTransloco } from '@ngneat/transloco';
 import { appRoutes } from 'app/app.routes';
 import { provideAuth } from 'app/core/auth/auth.provider';
 import { provideIcons } from 'app/core/icons/icons.provider';
 import { mockApiServices } from 'app/mock-api';
+import { firstValueFrom } from 'rxjs';
 import { TranslocoHttpLoader } from './core/transloco/transloco.http-loader';
 
 export const appConfig: ApplicationConfig = {
     providers: [
         provideAnimations(),
         provideHttpClient(),
-        provideRouter(appRoutes,
+        provideRouter(
+            appRoutes,
             withPreloading(PreloadAllModules),
-            withInMemoryScrolling({scrollPositionRestoration: 'enabled'}),
+            withInMemoryScrolling({ scrollPositionRestoration: 'enabled' })
         ),
 
         // Material Date Adapter
         {
-            provide : DateAdapter,
+            provide: DateAdapter,
             useClass: LuxonDateAdapter,
         },
         {
-            provide : MAT_DATE_FORMATS,
+            provide: MAT_DATE_FORMATS,
             useValue: {
-                parse  : {
+                parse: {
                     dateInput: 'D',
                 },
                 display: {
-                    dateInput         : 'DDD',
-                    monthYearLabel    : 'LLL yyyy',
-                    dateA11yLabel     : 'DD',
+                    dateInput: 'DDD',
+                    monthYearLabel: 'LLL yyyy',
+                    dateA11yLabel: 'DD',
                     monthYearA11yLabel: 'LLLL yyyy',
                 },
             },
@@ -45,35 +51,34 @@ export const appConfig: ApplicationConfig = {
         // Transloco Config
         provideTransloco({
             config: {
-                availableLangs      : [
+                availableLangs: [
                     {
-                        id   : 'en',
+                        id: 'en',
                         label: 'English',
                     },
                     {
-                        id   : 'tr',
+                        id: 'tr',
                         label: 'Turkish',
                     },
                 ],
-                defaultLang         : 'en',
-                fallbackLang        : 'en',
+                defaultLang: 'en',
+                fallbackLang: 'en',
                 reRenderOnLangChange: true,
-                prodMode            : true,
+                prodMode: true,
             },
             loader: TranslocoHttpLoader,
         }),
         {
             // Preload the default language before the app starts to prevent empty/jumping content
-            provide   : APP_INITIALIZER,
-            useFactory: () =>
-            {
+            provide: APP_INITIALIZER,
+            useFactory: () => {
                 const translocoService = inject(TranslocoService);
                 const defaultLang = translocoService.getDefaultLang();
                 translocoService.setActiveLang(defaultLang);
 
                 return () => firstValueFrom(translocoService.load(defaultLang));
             },
-            multi     : true,
+            multi: true,
         },
 
         // Fuse
@@ -81,42 +86,42 @@ export const appConfig: ApplicationConfig = {
         provideIcons(),
         provideFuse({
             mockApi: {
-                delay   : 0,
+                delay: 0,
                 services: mockApiServices,
             },
-            fuse   : {
-                layout : 'classy',
-                scheme : 'light',
+            fuse: {
+                layout: 'classy',
+                scheme: 'light',
                 screens: {
                     sm: '600px',
                     md: '960px',
                     lg: '1280px',
                     xl: '1440px',
                 },
-                theme  : 'theme-default',
-                themes : [
+                theme: 'theme-default',
+                themes: [
                     {
-                        id  : 'theme-default',
+                        id: 'theme-default',
                         name: 'Default',
                     },
                     {
-                        id  : 'theme-brand',
+                        id: 'theme-brand',
                         name: 'Brand',
                     },
                     {
-                        id  : 'theme-teal',
+                        id: 'theme-teal',
                         name: 'Teal',
                     },
                     {
-                        id  : 'theme-rose',
+                        id: 'theme-rose',
                         name: 'Rose',
                     },
                     {
-                        id  : 'theme-purple',
+                        id: 'theme-purple',
                         name: 'Purple',
                     },
                     {
-                        id  : 'theme-amber',
+                        id: 'theme-amber',
                         name: 'Amber',
                     },
                 ],
diff --git a/src/app/app.resolvers.ts b/src/app/app.resolvers.ts
index 7cf8cec8..359d011f 100644
--- a/src/app/app.resolvers.ts
+++ b/src/app/app.resolvers.ts
@@ -6,8 +6,7 @@ import { QuickChatService } from 'app/layout/common/quick-chat/quick-chat.servic
 import { ShortcutsService } from 'app/layout/common/shortcuts/shortcuts.service';
 import { forkJoin } from 'rxjs';
 
-export const initialDataResolver = () =>
-{
+export const initialDataResolver = () => {
     const messagesService = inject(MessagesService);
     const navigationService = inject(NavigationService);
     const notificationsService = inject(NotificationsService);
diff --git a/src/app/app.routes.ts b/src/app/app.routes.ts
index 04bcb300..79c8d2f2 100644
--- a/src/app/app.routes.ts
+++ b/src/app/app.routes.ts
@@ -4,7 +4,7 @@ import { AuthGuard } from 'app/core/auth/guards/auth.guard';
 import { NoAuthGuard } from 'app/core/auth/guards/noAuth.guard';
 import { LayoutComponent } from 'app/layout/layout.component';
 
-// @formatter:off
+// prettier-ignore
 /* eslint-disable max-len */
 /* eslint-disable @typescript-eslint/explicit-function-return-type */
 export const appRoutes: Route[] = [
@@ -17,7 +17,11 @@ export const appRoutes: Route[] = [
     // After the user signs in, the sign-in page will redirect the user to the 'signed-in-redirect'
     // path. Below is another redirection for that path to redirect the user to the desired
     // location. This is a small convenience to keep all main routes together here on this file.
-    {path: 'signed-in-redirect', pathMatch : 'full', redirectTo: 'dashboards/project'},
+    {
+        path: 'signed-in-redirect',
+        pathMatch : 'full',
+        redirectTo: 'dashboards/project'
+    },
 
     // Auth routes for guests
     {
diff --git a/src/index.html b/src/index.html
index 54e10bad..72ca7ef3 100644
--- a/src/index.html
+++ b/src/index.html
@@ -2,60 +2,49 @@
 <html lang="en">
     <head>
         <title>Fuse Angular - Angular Template and Starter Kit</title>
-        <meta charset="utf-8">
+        <meta charset="utf-8" />
         <meta
             name="description"
-            content="Admin Template and Starter Kit with Angular, Angular Material Components and TailwindCSS">
+            content="Admin Template and Starter Kit with Angular, Angular Material Components and TailwindCSS"
+        />
         <meta
             name="keywords"
-            content="Fuse,HTML,CSS,Angular,Angular 13,Angular 14,Angular 15,Material,Angular Components,Tailwind,Tailwind CSS,TailwindCSS,Admin Template,Admin Starter Kit">
+            content="Fuse,HTML,CSS,Angular,Angular 13,Angular 14,Angular 15,Material,Angular Components,Tailwind,Tailwind CSS,TailwindCSS,Admin Template,Admin Starter Kit"
+        />
         <meta
             name="viewport"
-            content="width=device-width, height=device-height, initial-scale=1.0, minimum-scale=1.0">
+            content="width=device-width, height=device-height, initial-scale=1.0, minimum-scale=1.0"
+        />
 
-        <base href="/">
+        <base href="/" />
 
         <!-- Favicon -->
-        <link
-            rel="icon"
-            type="image/png"
-            href="favicon-16x16.png">
-        <link
-            rel="icon"
-            type="image/png"
-            href="favicon-32x32.png">
+        <link rel="icon" type="image/png" href="favicon-16x16.png" />
+        <link rel="icon" type="image/png" href="favicon-32x32.png" />
 
         <!-- Fonts -->
-        <link
-            href="fonts/inter/inter.css"
-            rel="stylesheet">
+        <link href="fonts/inter/inter.css" rel="stylesheet" />
+        <link href="https://fonts.gstatic.com" rel="preconnect" />
 
-        <link
-            href="https://fonts.gstatic.com"
-            rel="preconnect">
         <link
             href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,400;0,500;0,600;1,400&display=swap"
-            rel="stylesheet">
+            rel="stylesheet"
+        />
 
         <!-- Icon fonts -->
         <link
             href="https://fonts.googleapis.com/icon?family=Material+Icons"
-            rel="stylesheet">
+            rel="stylesheet"
+        />
 
         <!-- Splash screen styles -->
-        <link
-            href="styles/splash-screen.css"
-            rel="stylesheet">
-
+        <link href="styles/splash-screen.css" rel="stylesheet" />
     </head>
 
     <body>
-
         <!-- Splash screen -->
         <fuse-splash-screen>
-            <img
-                src="images/logo/logo.svg"
-                alt="Fuse logo">
+            <img src="images/logo/logo.svg" alt="Fuse logo" />
             <div class="spinner">
                 <div class="bounce1"></div>
                 <div class="bounce2"></div>
@@ -65,7 +54,5 @@
 
         <!-- App root -->
         <app-root></app-root>
-
     </body>
-
 </html>
diff --git a/src/main.ts b/src/main.ts
index 49742337..147a38eb 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -2,5 +2,6 @@ import { bootstrapApplication } from '@angular/platform-browser';
 import { AppComponent } from 'app/app.component';
 import { appConfig } from 'app/app.config';
 
-bootstrapApplication(AppComponent, appConfig)
-    .catch(err => console.error(err));
+bootstrapApplication(AppComponent, appConfig).catch((err) =>
+    console.error(err)
+);
diff --git a/tailwind.config.js b/tailwind.config.js
index cbcce319..12d97a6b 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,7 +1,9 @@
 const path = require('path');
 const colors = require('tailwindcss/colors');
 const defaultTheme = require('tailwindcss/defaultTheme');
-const generatePalette = require(path.resolve(__dirname, ('src/@fuse/tailwind/utils/generate-palette')));
+const generatePalette = require(
+    path.resolve(__dirname, 'src/@fuse/tailwind/utils/generate-palette')
+);
 
 /**
  * Custom palettes
@@ -10,7 +12,7 @@ const generatePalette = require(path.resolve(__dirname, ('src/@fuse/tailwind/uti
  * Tailwind-like color palettes automatically
  */
 const customPalettes = {
-    brand: generatePalette('#2196F3')
+    brand: generatePalette('#2196F3'),
 };
 
 /**
@@ -18,146 +20,146 @@ const customPalettes = {
  */
 const themes = {
     // Default theme is required for theming system to work correctly!
-    'default': {
-        primary  : {
+    default: {
+        primary: {
             ...colors.indigo,
-            DEFAULT: colors.indigo[600]
+            DEFAULT: colors.indigo[600],
         },
-        accent   : {
+        accent: {
             ...colors.slate,
-            DEFAULT: colors.slate[800]
+            DEFAULT: colors.slate[800],
         },
-        warn     : {
+        warn: {
             ...colors.red,
-            DEFAULT: colors.red[600]
+            DEFAULT: colors.red[600],
         },
         'on-warn': {
-            500: colors.red['50']
-        }
+            500: colors.red['50'],
+        },
     },
     // Rest of the themes will use the 'default' as the base
     // theme and will extend it with their given configuration.
-    'brand' : {
-        primary: customPalettes.brand
+    brand: {
+        primary: customPalettes.brand,
     },
-    'teal'  : {
+    teal: {
         primary: {
             ...colors.teal,
-            DEFAULT: colors.teal[600]
-        }
+            DEFAULT: colors.teal[600],
+        },
     },
-    'rose'  : {
-        primary: colors.rose
+    rose: {
+        primary: colors.rose,
     },
-    'purple': {
+    purple: {
         primary: {
             ...colors.purple,
-            DEFAULT: colors.purple[600]
-        }
+            DEFAULT: colors.purple[600],
+        },
+    },
+    amber: {
+        primary: colors.amber,
     },
-    'amber' : {
-        primary: colors.amber
-    }
 };
 
 /**
  * Tailwind configuration
  */
 const config = {
-    darkMode   : 'class',
-    content    : ['./src/**/*.{html,scss,ts}'],
-    important  : true,
-    theme      : {
+    darkMode: 'class',
+    content: ['./src/**/*.{html,scss,ts}'],
+    important: true,
+    theme: {
         fontSize: {
-            'xs'  : '0.625rem',
-            'sm'  : '0.75rem',
-            'md'  : '0.8125rem',
-            'base': '0.875rem',
-            'lg'  : '1rem',
-            'xl'  : '1.125rem',
-            '2xl' : '1.25rem',
-            '3xl' : '1.5rem',
-            '4xl' : '2rem',
-            '5xl' : '2.25rem',
-            '6xl' : '2.5rem',
-            '7xl' : '3rem',
-            '8xl' : '4rem',
-            '9xl' : '6rem',
-            '10xl': '8rem'
+            xs: '0.625rem',
+            sm: '0.75rem',
+            md: '0.8125rem',
+            base: '0.875rem',
+            lg: '1rem',
+            xl: '1.125rem',
+            '2xl': '1.25rem',
+            '3xl': '1.5rem',
+            '4xl': '2rem',
+            '5xl': '2.25rem',
+            '6xl': '2.5rem',
+            '7xl': '3rem',
+            '8xl': '4rem',
+            '9xl': '6rem',
+            '10xl': '8rem',
         },
-        screens : {
+        screens: {
             sm: '600px',
             md: '960px',
             lg: '1280px',
-            xl: '1440px'
+            xl: '1440px',
         },
-        extend  : {
-            animation               : {
-                'spin-slow': 'spin 3s linear infinite'
+        extend: {
+            animation: {
+                'spin-slow': 'spin 3s linear infinite',
             },
-            colors                  : {
-                gray: colors.slate
+            colors: {
+                gray: colors.slate,
             },
-            flex                    : {
-                '0': '0 0 auto'
+            flex: {
+                0: '0 0 auto',
             },
-            fontFamily              : {
+            fontFamily: {
                 sans: `"Inter var", ${defaultTheme.fontFamily.sans.join(',')}`,
-                mono: `"IBM Plex Mono", ${defaultTheme.fontFamily.mono.join(',')}`
+                mono: `"IBM Plex Mono", ${defaultTheme.fontFamily.mono.join(',')}`,
             },
-            opacity                 : {
+            opacity: {
                 12: '0.12',
                 38: '0.38',
-                87: '0.87'
+                87: '0.87',
             },
-            rotate                  : {
+            rotate: {
                 '-270': '270deg',
-                '15'  : '15deg',
-                '30'  : '30deg',
-                '60'  : '60deg',
-                '270' : '270deg'
+                15: '15deg',
+                30: '30deg',
+                60: '60deg',
+                270: '270deg',
             },
-            scale                   : {
-                '-1': '-1'
+            scale: {
+                '-1': '-1',
             },
-            zIndex                  : {
-                '-1'   : -1,
-                '49'   : 49,
-                '60'   : 60,
-                '70'   : 70,
-                '80'   : 80,
-                '90'   : 90,
-                '99'   : 99,
-                '999'  : 999,
-                '9999' : 9999,
-                '99999': 99999
+            zIndex: {
+                '-1': -1,
+                49: 49,
+                60: 60,
+                70: 70,
+                80: 80,
+                90: 90,
+                99: 99,
+                999: 999,
+                9999: 9999,
+                99999: 99999,
             },
-            spacing                 : {
-                '13': '3.25rem',
-                '15': '3.75rem',
-                '18': '4.5rem',
-                '22': '5.5rem',
-                '26': '6.5rem',
-                '30': '7.5rem',
-                '50': '12.5rem',
-                '90': '22.5rem',
+            spacing: {
+                13: '3.25rem',
+                15: '3.75rem',
+                18: '4.5rem',
+                22: '5.5rem',
+                26: '6.5rem',
+                30: '7.5rem',
+                50: '12.5rem',
+                90: '22.5rem',
 
                 // Bigger values
-                '100': '25rem',
-                '120': '30rem',
-                '128': '32rem',
-                '140': '35rem',
-                '160': '40rem',
-                '180': '45rem',
-                '192': '48rem',
-                '200': '50rem',
-                '240': '60rem',
-                '256': '64rem',
-                '280': '70rem',
-                '320': '80rem',
-                '360': '90rem',
-                '400': '100rem',
-                '480': '120rem',
+                100: '25rem',
+                120: '30rem',
+                128: '32rem',
+                140: '35rem',
+                160: '40rem',
+                180: '45rem',
+                192: '48rem',
+                200: '50rem',
+                240: '60rem',
+                256: '64rem',
+                280: '70rem',
+                320: '80rem',
+                360: '90rem',
+                400: '100rem',
+                480: '120rem',
 
                 // Fractional values
                 '1/2': '50%',
@@ -165,130 +167,135 @@ const config = {
                 '2/3': '66.666667%',
                 '1/4': '25%',
                 '2/4': '50%',
-                '3/4': '75%'
+                '3/4': '75%',
             },
-            minHeight               : ({theme}) => ({
-                ...theme('spacing')
+            minHeight: ({ theme }) => ({
+                ...theme('spacing'),
             }),
-            maxHeight               : {
-                none: 'none'
+            maxHeight: {
+                none: 'none',
             },
-            minWidth                : ({theme}) => ({
+            minWidth: ({ theme }) => ({
                 ...theme('spacing'),
-                screen: '100vw'
+                screen: '100vw',
             }),
-            maxWidth                : ({theme}) => ({
+            maxWidth: ({ theme }) => ({
                 ...theme('spacing'),
-                screen: '100vw'
+                screen: '100vw',
             }),
-            transitionDuration      : {
-                '400': '400ms'
+            transitionDuration: {
+                400: '400ms',
             },
             transitionTimingFunction: {
-                'drawer': 'cubic-bezier(0.25, 0.8, 0.25, 1)'
+                drawer: 'cubic-bezier(0.25, 0.8, 0.25, 1)',
             },
 
             // @tailwindcss/typography
-            typography: ({theme}) => ({
+            typography: ({ theme }) => ({
                 DEFAULT: {
                     css: {
-                        color              : 'var(--fuse-text-default)',
-                        '[class~="lead"]'  : {
-                            color: 'var(--fuse-text-secondary)'
+                        color: 'var(--fuse-text-default)',
+                        '[class~="lead"]': {
+                            color: 'var(--fuse-text-secondary)',
                         },
-                        a                  : {
-                            color: 'var(--fuse-primary-500)'
+                        a: {
+                            color: 'var(--fuse-primary-500)',
                         },
-                        strong             : {
-                            color: 'var(--fuse-text-default)'
+                        strong: {
+                            color: 'var(--fuse-text-default)',
                         },
-                        'ol > li::before'  : {
-                            color: 'var(--fuse-text-secondary)'
+                        'ol > li::before': {
+                            color: 'var(--fuse-text-secondary)',
                         },
-                        'ul > li::before'  : {
-                            backgroundColor: 'var(--fuse-text-hint)'
+                        'ul > li::before': {
+                            backgroundColor: 'var(--fuse-text-hint)',
                         },
-                        hr                 : {
-                            borderColor: 'var(--fuse-border)'
+                        hr: {
+                            borderColor: 'var(--fuse-border)',
                         },
-                        blockquote         : {
-                            color          : 'var(--fuse-text-default)',
-                            borderLeftColor: 'var(--fuse-border)'
+                        blockquote: {
+                            color: 'var(--fuse-text-default)',
+                            borderLeftColor: 'var(--fuse-border)',
                         },
-                        h1                 : {
-                            color: 'var(--fuse-text-default)'
+                        h1: {
+                            color: 'var(--fuse-text-default)',
                         },
-                        h2                 : {
-                            color: 'var(--fuse-text-default)'
+                        h2: {
+                            color: 'var(--fuse-text-default)',
                         },
-                        h3                 : {
-                            color: 'var(--fuse-text-default)'
+                        h3: {
+                            color: 'var(--fuse-text-default)',
                         },
-                        h4                 : {
-                            color: 'var(--fuse-text-default)'
+                        h4: {
+                            color: 'var(--fuse-text-default)',
                         },
                         'figure figcaption': {
-                            color: 'var(--fuse-text-secondary)'
+                            color: 'var(--fuse-text-secondary)',
                         },
-                        code               : {
-                            color     : 'var(--fuse-text-default)',
-                            fontWeight: '500'
+                        code: {
+                            color: 'var(--fuse-text-default)',
+                            fontWeight: '500',
                         },
-                        'a code'           : {
-                            color: 'var(--fuse-primary)'
+                        'a code': {
+                            color: 'var(--fuse-primary)',
                         },
-                        pre                : {
-                            color          : theme('colors.white'),
-                            backgroundColor: theme('colors.gray.800')
+                        pre: {
+                            color: theme('colors.white'),
+                            backgroundColor: theme('colors.gray.800'),
                         },
-                        thead              : {
-                            color            : 'var(--fuse-text-default)',
-                            borderBottomColor: 'var(--fuse-border)'
+                        thead: {
+                            color: 'var(--fuse-text-default)',
+                            borderBottomColor: 'var(--fuse-border)',
                         },
-                        'tbody tr'         : {
-                            borderBottomColor: 'var(--fuse-border)'
+                        'tbody tr': {
+                            borderBottomColor: 'var(--fuse-border)',
                         },
-                        'ol[type="A" s]'   : false,
-                        'ol[type="a" s]'   : false,
-                        'ol[type="I" s]'   : false,
-                        'ol[type="i" s]'   : false
-                    }
+                        'ol[type="A" s]': false,
+                        'ol[type="a" s]': false,
+                        'ol[type="I" s]': false,
+                        'ol[type="i" s]': false,
+                    },
                 },
-                sm     : {
+                sm: {
                     css: {
-                        code : {
-                            fontSize: '1em'
+                        code: {
+                            fontSize: '1em',
                         },
-                        pre  : {
-                            fontSize: '1em'
+                        pre: {
+                            fontSize: '1em',
                         },
                         table: {
-                            fontSize: '1em'
-                        }
-                    }
-                }
-            })
-        }
+                            fontSize: '1em',
+                        },
+                    },
+                },
+            }),
+        },
     },
     corePlugins: {
-        appearance        : false,
-        container         : false,
-        float             : false,
-        clear             : false,
-        placeholderColor  : false,
+        appearance: false,
+        container: false,
+        float: false,
+        clear: false,
+        placeholderColor: false,
         placeholderOpacity: false,
-        verticalAlign     : false
+        verticalAlign: false,
     },
-    plugins    : [
-
+    plugins: [
         // Fuse - Tailwind plugins
-        require(path.resolve(__dirname, ('src/@fuse/tailwind/plugins/utilities'))),
-        require(path.resolve(__dirname, ('src/@fuse/tailwind/plugins/icon-size'))),
-        require(path.resolve(__dirname, ('src/@fuse/tailwind/plugins/theming')))({themes}),
+        require(
+            path.resolve(__dirname, 'src/@fuse/tailwind/plugins/utilities')
+        ),
+        require(
+            path.resolve(__dirname, 'src/@fuse/tailwind/plugins/icon-size')
+        ),
+        require(path.resolve(__dirname, 'src/@fuse/tailwind/plugins/theming'))({
+            themes,
+        }),
 
         // Other third party and/or custom plugins
-        require('@tailwindcss/typography')({modifiers: ['sm', 'lg']})
-    ]
+        require('@tailwindcss/typography')({ modifiers: ['sm', 'lg'] }),
+    ],
 };
 
 module.exports = config;
diff --git a/transloco.config.js b/transloco.config.js
index 29cd39a1..c2f49519 100644
--- a/transloco.config.js
+++ b/transloco.config.js
@@ -1,3 +1,3 @@
 module.exports = {
-    rootTranslationsPath: 'src/assets/i18n/'
+    rootTranslationsPath: 'src/assets/i18n/',
 };
diff --git a/tsconfig.app.json b/tsconfig.app.json
index 41d74878..7076a428 100644
--- a/tsconfig.app.json
+++ b/tsconfig.app.json
@@ -5,10 +5,6 @@
         "outDir": "./out-tsc/app",
         "types": []
     },
-    "files": [
-        "src/main.ts"
-    ],
-    "include": [
-        "src/**/*.d.ts"
-    ]
+    "files": ["src/main.ts"],
+    "include": ["src/**/*.d.ts"]
 }
diff --git a/tsconfig.json b/tsconfig.json
index 0de94ff2..5f232778 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -13,10 +13,7 @@
         "target": "ES2022",
         "module": "ES2022",
         "useDefineForClassFields": false,
-        "lib": [
-            "ES2022",
-            "dom"
-        ]
+        "lib": ["ES2022", "dom"]
     },
     "angularCompilerOptions": {
         "enableI18nLegacyMessageIdFormat": false
diff --git a/tsconfig.spec.json b/tsconfig.spec.json
index 47d3e09f..272b3279 100644
--- a/tsconfig.spec.json
+++ b/tsconfig.spec.json
@@ -3,12 +3,7 @@
     "extends": "./tsconfig.json",
     "compilerOptions": {
         "outDir": "./out-tsc/spec",
-        "types": [
-            "jasmine"
-        ]
+        "types": ["jasmine"]
     },
-    "include": [
-        "src/**/*.spec.ts",
-        "src/**/*.d.ts"
-    ]
+    "include": ["src/**/*.spec.ts", "src/**/*.d.ts"]
 }