diff --git a/.prettierrc.json b/.prettierrc.json
index 9931f23c23f..1bf93220bb9 100644
--- a/.prettierrc.json
+++ b/.prettierrc.json
@@ -19,6 +19,11 @@
     "tabWidth": 4,
     "importOrderSeparation": true,
     "importOrderSortSpecifiers": true,
-    "importOrder": ["^@/api/(.*)$", "^@/components/elements/(.*)$", "^@/components/(.*)$", "^[./]"],
+    "importOrder": [
+        "^@/api/(.*)$",
+        "^@/components/elements/(.*)$",
+        "^@/components/(.*)$",
+        "^[./]"
+    ],
     "plugins": ["@trivago/prettier-plugin-sort-imports"]
-}
\ No newline at end of file
+}
diff --git a/.styleci.yml b/.styleci.yml
index 4705a373849..c19337e46e9 100644
--- a/.styleci.yml
+++ b/.styleci.yml
@@ -1,12 +1,12 @@
 php:
-  preset: laravel
-  disabled:
-    - no_unused_imports
-  finder:
-    not-name:
-      - index.php
+    preset: laravel
+    disabled:
+        - no_unused_imports
+    finder:
+        not-name:
+            - index.php
 js:
-  finder:
-    not-name:
-      - vite.config.js
+    finder:
+        not-name:
+            - vite.config.js
 css: true
diff --git a/CHANGELOG.md b/CHANGELOG.md
index a3b5636a97a..1457bffbe53 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -8,55 +8,55 @@ This project follows [Semantic Versioning](http://semver.org) guidelines.
 
 ### Additions
 
-- Added IP pools and overhauled IP Address Management (IPAM)
+-   Added IP pools and overhauled IP Address Management (IPAM)
 
 ### Changes
 
-- Switched out MySQL for PostgreSQL (pending)
+-   Switched out MySQL for PostgreSQL (pending)
 
 ### Fixes
 
-- Fixed inability to use special characters for Redis password
+-   Fixed inability to use special characters for Redis password
 
 ## v3.10.1-beta
 
 ### Fixes
 
-- Fixed `workspace` image failing to build because PHP Composer hash changed from a recent update.
+-   Fixed `workspace` image failing to build because PHP Composer hash changed from a recent update.
 
 ## v3.10.0-beta
 
 ### Additions
 
-- Added ISO imports (thanks A LOTTTT Fro!!!)
-- Added new logo courtesy of Yatin Manuel from [Halvex Inc.](https://halvex.net/)
-  - This changelog was forgotten, so I will add it now
+-   Added ISO imports (thanks A LOTTTT Fro!!!)
+-   Added new logo courtesy of Yatin Manuel from [Halvex Inc.](https://halvex.net/)
+    -   This changelog was forgotten, so I will add it now
 
 ### Changes
 
-- mind-numbing frontend refactorings
+-   mind-numbing frontend refactorings
 
 ## v3.9.3-beta
 
 ### Fixes
 
-- Fixed inability to successfully build the `workspace` container because the PHP Docker image recently upgraded from Debian 11 to 12 while Nodesource hasn't added stable support for Debian 12.
+-   Fixed inability to successfully build the `workspace` container because the PHP Docker image recently upgraded from Debian 11 to 12 while Nodesource hasn't added stable support for Debian 12.
 
 ## v3.9.2-beta
 
 ### Fixes
 
-- Fixed inability to save new password/ssh keys on Client > Server > Settings > Security > Authentication
+-   Fixed inability to save new password/ssh keys on Client > Server > Settings > Security > Authentication
 
 ## v3.9.1-beta
 
 ### Fixes
 
-- Fixed coterm fields required when trying to update node information instead of updating Coterm information.
+-   Fixed coterm fields required when trying to update node information instead of updating Coterm information.
 
 ### Changes
 
-- Reorganized frontend React Router routes
+-   Reorganized frontend React Router routes
 
 ## v3.9.0-beta
 
@@ -64,23 +64,23 @@ The release candidate process for non-beta v3.9.0 was discontinued. Convoy will
 
 If you are upgrading from v3.8.1-beta, keep note of these notices:
 
-- v3.9.0-rc.9: :warning: This release may require you to regenerate your Proxmox API token credentials for each of your nodes with the implementation of encryption of node credentials in Convoy from this point on.
-- v3.9.0-rc.3: :warning: This release makes changes to the data in your database. Rows that have a non-null `deleted_at` field in
-your `servers` and `users` table will be purged. If your routine relies on soft deletes, please make changes now to stop
-relying on them as they are removed in this update.
+-   v3.9.0-rc.9: :warning: This release may require you to regenerate your Proxmox API token credentials for each of your nodes with the implementation of encryption of node credentials in Convoy from this point on.
+-   v3.9.0-rc.3: :warning: This release makes changes to the data in your database. Rows that have a non-null `deleted_at` field in
+    your `servers` and `users` table will be purged. If your routine relies on soft deletes, please make changes now to stop
+    relying on them as they are removed in this update.
 
 ### Fixed
 
-- Servers using IP addresses that they shouldn't have access to.
+-   Servers using IP addresses that they shouldn't have access to.
 
 ### Added
 
-- Address pools (not in use yet)
+-   Address pools (not in use yet)
 
 ### Changed
 
-- IPAddress internal naming to Address
-- SSO to use JWT instead of generating+saving tokens to the database
+-   IPAddress internal naming to Address
+-   SSO to use JWT instead of generating+saving tokens to the database
 
 ## v3.9.0-rc.9
 
@@ -88,42 +88,42 @@ relying on them as they are removed in this update.
 
 ### Added
 
-- Coterm support (DEV PREVIEW)
-- Encryption for PVE node credentials
+-   Coterm support (DEV PREVIEW)
+-   Encryption for PVE node credentials
 
 ### Fixed
 
-- Potential security vulnerability allowing unauthorized users to access another user's server
+-   Potential security vulnerability allowing unauthorized users to access another user's server
 
 ## v3.9.0-rc.8
 
 ### Fixed
 
-- Inability to reimport the same IP address across different nodes.
+-   Inability to reimport the same IP address across different nodes.
 
 ## v3.9.0-rc.7
 
 ### Fixed
 
-- Password updating when marked optional in a server import
+-   Password updating when marked optional in a server import
 
 ## v3.9.0-rc.6
 
 ### Fixed
 
-- Email max length on the login screen
+-   Email max length on the login screen
 
 ## v3.9.0-rc.5
 
 ### Fixed
 
-- Password setting when rebuilding/creating a new server
+-   Password setting when rebuilding/creating a new server
 
 ## v3.9.0-rc.4
 
 ### Fixed
 
-- Browser history hijacking on client server settings page
+-   Browser history hijacking on client server settings page
 
 ## v3.9.0-rc.3
 
@@ -133,105 +133,105 @@ relying on them as they are removed in this update.
 
 ### Fixed
 
-- Adding both a IPv4 and IPv6 address to a server
+-   Adding both a IPv4 and IPv6 address to a server
 
 ### Added
 
-- Base code for adding translations/localizations to Convoy
+-   Base code for adding translations/localizations to Convoy
 
 ### Removed
 
-- Soft deletes from `servers` and `users` table
+-   Soft deletes from `servers` and `users` table
 
 ### Changes
 
-- Some automatic refactors done by PHPStorm
-- Renamed Media to Iso
+-   Some automatic refactors done by PHPStorm
+-   Renamed Media to Iso
 
 ## v3.9.0-rc.2
 
 ### Fixed
 
-- Server reinstallations firing wrong job chain
-- can sync server usages test
-- ISO download progress monitor
-- Backup creation progress monitor
+-   Server reinstallations firing wrong job chain
+-   can sync server usages test
+-   ISO download progress monitor
+-   Backup creation progress monitor
 
 ## v3.9.0-rc.1
 
 ### Added
 
-- Tests
+-   Tests
 
 ### Changed
 
-- Internal HTTP client from Guzzle to a wrapper of it from Laravel
-- VM building, deletion, and server deletion logic
-    - This should improve reliability of Convoy tremendously
+-   Internal HTTP client from Guzzle to a wrapper of it from Laravel
+-   VM building, deletion, and server deletion logic
+    -   This should improve reliability of Convoy tremendously
 
 ## v3.8.1-beta
 
 ### Fixed
 
-- Rate limit throttling
+-   Rate limit throttling
 
 ## v3.8.0-beta
 
 ### Changed
 
-- Made system OS password optional if create server option isn't checked when creating a new server in the administrator
-  area
+-   Made system OS password optional if create server option isn't checked when creating a new server in the administrator
+    area
 
 ## v3.7.5-beta
 
 ### Fixed
 
-- English keyboard characters validation rule in create server modal in the administrator area.
+-   English keyboard characters validation rule in create server modal in the administrator area.
 
 ### Changed
 
-- Some minor refactoring that changed the namespacings of some files to improve code consistency.
+-   Some minor refactoring that changed the namespacings of some files to improve code consistency.
 
 ## v3.7.4-beta
 
 ### Fixed
 
-- Server power commands
+-   Server power commands
 
 ## v3.7.3-beta
 
 ### Fixed
 
-- Server deletion failing when the virtual machine is running
+-   Server deletion failing when the virtual machine is running
 
 ## v3.7.2-beta
 
 ### Fixed
 
-- Error unmounting media (or ISOs) in the server control panel in the client area
+-   Error unmounting media (or ISOs) in the server control panel in the client area
 
 ## v3.7.1-beta
 
 ### Fixed
 
-- Server bandwidth statistic not updating #14
+-   Server bandwidth statistic not updating #14
 
 ## v3.7.0-beta
 
 ### Fixed
 
-- Overallocation check logic whenever an administrator tries to update a server's build #16
-- Issue where you can't use IPv6 for nameservers
+-   Overallocation check logic whenever an administrator tries to update a server's build #16
+-   Issue where you can't use IPv6 for nameservers
 
 ### Changed
 
-- Made account_password required by default for creating new servers and server installations
-- Refactored all settings pages
-- Refactored menu component to reduce bundle size
-- Refactored Server Usages and Rate Limit sync for better scaling
-- Minor frontend styling
-- Refactored disk data transfer object
-- All password inputs (except for Convoy user account password) has these two validation rules:
+-   Made account_password required by default for creating new servers and server installations
+-   Refactored all settings pages
+-   Refactored menu component to reduce bundle size
+-   Refactored Server Usages and Rate Limit sync for better scaling
+-   Minor frontend styling
+-   Refactored disk data transfer object
+-   All password inputs (except for Convoy user account password) has these two validation rules:
     1. `/^[A-Za-z0-9!@#$%^&*()_+\-=[\]{}|;\':",.\/<>?\\ ]*$/` for checking if the password contains only characters on
        the U.S. English keyboard.
     2. `/^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#\$%\^&\*])(?=.{8,})/` for checking if the password contains 8
@@ -239,145 +239,145 @@ relying on them as they are removed in this update.
 
 ### Added
 
-- Search bars in the administrator area
-- Log rotation for Laravel log file
-- Proxmox user pruning to prune expired temporary NoVNC users
+-   Search bars in the administrator area
+-   Log rotation for Laravel log file
+-   Proxmox user pruning to prune expired temporary NoVNC users
 
 ## v3.6.2-beta
 
 ### Fixed
 
-- IP Addresses being clipped if too long in the UI (x2)
-- Hostname validation regex in frontend
-- Viewport glitch when a server name or hostname is too long
-- Validation rule not catching special characters from other languages for OS password validation
+-   IP Addresses being clipped if too long in the UI (x2)
+-   Hostname validation regex in frontend
+-   Viewport glitch when a server name or hostname is too long
+-   Validation rule not catching special characters from other languages for OS password validation
 
 ### Note
 
 If you are developing automation software for Convoy, please implement these regular expressions in your code.
 Otherwise, your code will error when you send invalid requests.
 
-- server `account_password` validation
-    - `/^[A-z0-9!@£$%^&*()\'~*_+\-]+$/` to detect special characters from other language
-    - `/^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#\$%\^&\*])(?=.{8,})/u` minimum password requirements
-- server `hostname` validation
-    - `/^(([a-zA-Z0-9]|[a-zA-Z0-9][a-zA-Z0-9\-]*[a-zA-Z0-9])\.)*([A-Za-z0-9]|[A-Za-z0-9][A-Za-z0-9\-]*[A-Za-z0-9])$/`
+-   server `account_password` validation
+    -   `/^[A-z0-9!@£$%^&*()\'~*_+\-]+$/` to detect special characters from other language
+    -   `/^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#\$%\^&\*])(?=.{8,})/u` minimum password requirements
+-   server `hostname` validation
+    -   `/^(([a-zA-Z0-9]|[a-zA-Z0-9][a-zA-Z0-9\-]*[a-zA-Z0-9])\.)*([A-Za-z0-9]|[A-Za-z0-9][A-Za-z0-9\-]*[A-Za-z0-9])$/`
 
 ## v3.6.1-beta
 
 ### Fixed
 
-- IP Addresses being clipped if too long in the UI
-- Awkward delete address modal
+-   IP Addresses being clipped if too long in the UI
+-   Awkward delete address modal
 
 ## v3.6.0-beta
 
 ### Fixed
 
-- IPv6 addresses wouldn't display in client area settings
-- Confusing "account password" placeholder when creating a server in the admin area
+-   IPv6 addresses wouldn't display in client area settings
+-   Confusing "account password" placeholder when creating a server in the admin area
 
 ### Added
 
-- Ability to view IP addresses of a server on the dashboard in the client area
+-   Ability to view IP addresses of a server on the dashboard in the client area
 
 ## v3.5.1-beta
 
 ### Added
 
-- Support for hosting Convoy without a hostname
+-   Support for hosting Convoy without a hostname
 
 ### Changed
 
-- Default redis configuration in .env because some people were getting confused by the documentation
+-   Default redis configuration in .env because some people were getting confused by the documentation
 
 ## v3.5.0-beta
 
 ### Changed
 
-- Settings layout for client side server settings
+-   Settings layout for client side server settings
 
 ### Fixed
 
-- possibility that `address_ids` will cause an exception when it's null when creating a new server
+-   possibility that `address_ids` will cause an exception when it's null when creating a new server
 
 ## v3.4.0-beta
 
 ### Changed
 
-- Refactored routes
+-   Refactored routes
 
 ### Added
 
-- Navigation Bar Context. Now switching pages are even more seamless
+-   Navigation Bar Context. Now switching pages are even more seamless
 
 ## v3.3.0-beta
 
 ### Fixed
 
-- Lack of cancel button when deleting an API key
+-   Lack of cancel button when deleting an API key
 
 ### Added
 
-- Ability for administrators to impersonate the client view for a server and also visit the server's configuration in
-  the admin area.
-- Warnings when creating a new node to disable privilege separation and grant root permissions.
+-   Ability for administrators to impersonate the client view for a server and also visit the server's configuration in
+    the admin area.
+-   Warnings when creating a new node to disable privilege separation and grant root permissions.
 
 ## v3.2.0-beta
 
 ### Fixed
 
-- Broken network syncing when updating an address's assigned server
-- Text alignment for server counter on the users table in the admin area
+-   Broken network syncing when updating an address's assigned server
+-   Text alignment for server counter on the users table in the admin area
 
 ### Added
 
-- Hyperlinks to the owner on the servers table
+-   Hyperlinks to the owner on the servers table
 
 ## v3.1.2-beta
 
 ### Fixed
 
-- Scoped routing bindings in RouteServiceProvider that were breaking some routes
+-   Scoped routing bindings in RouteServiceProvider that were breaking some routes
 
 ## v3.1.1-beta
 
 ### Fixed
 
-- Conflicting named routes that would break route optimization/caching
+-   Conflicting named routes that would break route optimization/caching
 
 ## v3.1.0-beta
 
 ### Fixed
 
-- IP Address updating
-- Server build updating
+-   IP Address updating
+-   Server build updating
 
 ### Removed
 
-- Option to sync or not sync network settings when deleting an IP address
-    - The default behavior is always to sync
+-   Option to sync or not sync network settings when deleting an IP address
+    -   The default behavior is always to sync
 
 ## v3.0.0-beta (Tuxedo)
 
 ### Fixed
 
-- Server installs
-- a bunch of other stuff
+-   Server installs
+-   a bunch of other stuff
 
 ### Changed
 
-- from proprietary hard-coded api tokens to Bearer tokens for the application/external api
-- the whole entire frontend
+-   from proprietary hard-coded api tokens to Bearer tokens for the application/external api
+-   the whole entire frontend
 
 ### Added
 
-- Server hostnames
-- Node location grouping
+-   Server hostnames
+-   Node location grouping
 
 ### Notes
 
-- This release is so big that I can't really summarize everything
+-   This release is so big that I can't really summarize everything
 
 ![The maxwell cat meme is the mascot for v3](https://imgur.com/mowvogE.png)
 
@@ -385,47 +385,47 @@ Otherwise, your code will error when you send invalid requests.
 
 ### Fixed
 
-- Inability to delete IP address from the admin user interface
+-   Inability to delete IP address from the admin user interface
 
 ## v2.0.2-beta
 
 ### Fixed
 
-- FQDN validator for the hostname field when adding a new node
+-   FQDN validator for the hostname field when adding a new node
 
 ## v2.0.1-beta
 
 ### Fixed
 
-- Problem where validation errors for the SSH key wouldn't show up
-- Bug where user couldn't unset a SSH key after saving one
+-   Problem where validation errors for the SSH key wouldn't show up
+-   Bug where user couldn't unset a SSH key after saving one
 
 ## v2.0.0-beta (Bombay)
 
 ### Added
 
-- Storing of CPU, memory, disk, snapshots, backups, and bandwidth limits
-- Added server suspensions
-- Added real-time status updates of server installs (though it will be deprecated in v3.x.x)
-- Automatic bandwidth throttler when a user exceeds the bandwidth limit
+-   Storing of CPU, memory, disk, snapshots, backups, and bandwidth limits
+-   Added server suspensions
+-   Added real-time status updates of server installs (though it will be deprecated in v3.x.x)
+-   Automatic bandwidth throttler when a user exceeds the bandwidth limit
 
 ### Changed
 
-- Internally, server details are now passed around the application using Laravel Data by Spatie. Though in v3.x.x, we
-  are planning on switching to Data Transfer Objects by Spatie. We pulled the wrong package and didn't realize until one
-  month in using the package LOL.
-- Virtual machines are now limited to one disk. Multiple disks may be supported when a daemon is available in the
-  future.
-- The built-in web server is now Caddy instead of Nginx. This provides auto SSL out of the box.
+-   Internally, server details are now passed around the application using Laravel Data by Spatie. Though in v3.x.x, we
+    are planning on switching to Data Transfer Objects by Spatie. We pulled the wrong package and didn't realize until one
+    month in using the package LOL.
+-   Virtual machines are now limited to one disk. Multiple disks may be supported when a daemon is available in the
+    future.
+-   The built-in web server is now Caddy instead of Nginx. This provides auto SSL out of the box.
 
 ### Fixed
 
-- The commands in the node viewing page for installing the VNC Broker and templates.
+-   The commands in the node viewing page for installing the VNC Broker and templates.
 
 ### Known Bugs
 
-- The real-time server installation communication is known to be buggy and will be resolved in v3.x.x
-- Editing the server field for IP Addresses will sometime result in the first server of the node to be used. This will
-  be resolved in v3.x.x
+-   The real-time server installation communication is known to be buggy and will be resolved in v3.x.x
+-   Editing the server field for IP Addresses will sometime result in the first server of the node to be used. This will
+    be resolved in v3.x.x
 
 ![The Bombay cat breed is the mascot for v2](https://imgur.com/fP6oxn9.png)
diff --git a/README.md b/README.md
index e09ef8c90cf..d64003192c4 100644
--- a/README.md
+++ b/README.md
@@ -7,6 +7,7 @@
 [![FOSSA Status](https://app.fossa.com/api/projects/git%2Bgithub.com%2FConvoyPanel%2Fpanel.svg?type=shield)](https://app.fossa.com/projects/git%2Bgithub.com%2FConvoyPanel%2Fpanel?ref=badge_shield)
 
 # Convoy
+
 Convoy is a modern and performant KVM server management panel for hosting businesses. It's built with PHP and React and proven technology like Proxmox, making it easier to drop Convoy in an existing system.
 
 Stop paying hundreds of dollars for unreliable and slow software. Subscribe to a license to use Convoy today for $6/node/mo
@@ -14,21 +15,23 @@ Stop paying hundreds of dollars for unreliable and slow software. Subscribe to a
 ![Screenshot of Convoy](https://imgur.com/GsORIRQ.png)
 
 ## Documentation
-* [Panel Documentation](https://docs.convoypanel.com)
-* [Discord Community](https://discord.convoypanel.com)
+
+-   [Panel Documentation](https://docs.convoypanel.com)
+-   [Discord Community](https://discord.convoypanel.com)
 
 ## Acknowledgements
 
 Convoy wouldn't have been possible without these organizations and people
 
-* Advin Servers - provided several development servers (at least $200 of hardware) to help me develop this SaaS
-* Kjartann - donated $250 to support Convoy development and encouraged me to keep on working on this panel!
-* Pterodactyl Panel - provided the architecture and a lot of backend/boilerplate code for Convoy.
-* FastKVM.EU - for reporting bugs and testing the panel
-* Just Code Cats - created [Convoy's Blesta module](https://marketplace.blesta.com/#/extensions/179-Convoy%20Module), https://code-cats.com/
-* [HeavyNode](https://heavynode.com/) - for helping create [Coterm](https://github.com/ConvoyPanel/coterm)
+-   Advin Servers - provided several development servers (at least $200 of hardware) to help me develop this SaaS
+-   Kjartann - donated $250 to support Convoy development and encouraged me to keep on working on this panel!
+-   Pterodactyl Panel - provided the architecture and a lot of backend/boilerplate code for Convoy.
+-   FastKVM.EU - for reporting bugs and testing the panel
+-   Just Code Cats - created [Convoy's Blesta module](https://marketplace.blesta.com/#/extensions/179-Convoy%20Module), https://code-cats.com/
+-   [HeavyNode](https://heavynode.com/) - for helping create [Coterm](https://github.com/ConvoyPanel/coterm)
 
 ## License
+
 Convoy is licensed under the Business Source License. Production use of Convoy without an active license from Performave is strictly disallowed.
 
 [![FOSSA Status](https://app.fossa.com/api/projects/git%2Bgithub.com%2FConvoyPanel%2Fpanel.svg?type=large)](https://app.fossa.com/projects/git%2Bgithub.com%2FConvoyPanel%2Fpanel?ref=badge_large)
diff --git a/composer.lock b/composer.lock
index 98cc486c8ff..17b3b5ca5f9 100644
--- a/composer.lock
+++ b/composer.lock
@@ -41,9 +41,7 @@
                 }
             },
             "notification-url": "https://packagist.org/downloads/",
-            "license": [
-                "BSD-2-Clause"
-            ],
+            "license": ["BSD-2-Clause"],
             "authors": [
                 {
                     "name": "Ben Scholzen 'DASPRiD'",
@@ -89,9 +87,7 @@
                 }
             },
             "notification-url": "https://packagist.org/downloads/",
-            "license": [
-                "MIT"
-            ],
+            "license": ["MIT"],
             "description": "Arbitrary-precision arithmetic library",
             "keywords": [
                 "Arbitrary-precision",
@@ -153,9 +149,7 @@
                 }
             },
             "notification-url": "https://packagist.org/downloads/",
-            "license": [
-                "MIT"
-            ],
+            "license": ["MIT"],
             "authors": [
                 {
                     "name": "Casey McLaughlin",
@@ -215,9 +209,7 @@
                 }
             },
             "notification-url": "https://packagist.org/downloads/",
-            "license": [
-                "BSD-2-Clause"
-            ],
+            "license": ["BSD-2-Clause"],
             "authors": [
                 {
                     "name": "Ben Scholzen 'DASPRiD'",
@@ -227,10 +219,7 @@
                 }
             ],
             "description": "PHP 7.1 enum implementation",
-            "keywords": [
-                "enum",
-                "map"
-            ],
+            "keywords": ["enum", "map"],
             "support": {
                 "issues": "https://github.com/DASPRiD/Enum/issues",
                 "source": "https://github.com/DASPRiD/Enum/tree/1.0.4"
@@ -273,9 +262,7 @@
                 }
             },
             "notification-url": "https://packagist.org/downloads/",
-            "license": [
-                "MIT"
-            ],
+            "license": ["MIT"],
             "authors": [
                 {
                     "name": "Dragonfly Development Inc.",
@@ -300,12 +287,7 @@
             ],
             "description": "Given a deep data structure, access data by dot notation.",
             "homepage": "https://github.com/dflydev/dflydev-dot-access-data",
-            "keywords": [
-                "access",
-                "data",
-                "dot",
-                "notation"
-            ],
+            "keywords": ["access", "data", "dot", "notation"],
             "support": {
                 "issues": "https://github.com/dflydev/dflydev-dot-access-data/issues",
                 "source": "https://github.com/dflydev/dflydev-dot-access-data/tree/v3.0.2"
@@ -347,9 +329,7 @@
                 }
             },
             "notification-url": "https://packagist.org/downloads/",
-            "license": [
-                "MIT"
-            ],
+            "license": ["MIT"],
             "authors": [
                 {
                     "name": "Guilherme Blanco",
@@ -444,9 +424,7 @@
             "suggest": {
                 "symfony/console": "For helpful console commands such as SQL execution and import of files."
             },
-            "bin": [
-                "bin/doctrine-dbal"
-            ],
+            "bin": ["bin/doctrine-dbal"],
             "type": "library",
             "autoload": {
                 "psr-4": {
@@ -454,9 +432,7 @@
                 }
             },
             "notification-url": "https://packagist.org/downloads/",
-            "license": [
-                "MIT"
-            ],
+            "license": ["MIT"],
             "authors": [
                 {
                     "name": "Guilherme Blanco",
@@ -549,9 +525,7 @@
                 }
             },
             "notification-url": "https://packagist.org/downloads/",
-            "license": [
-                "MIT"
-            ],
+            "license": ["MIT"],
             "description": "A small layer on top of trigger_error(E_USER_DEPRECATED) or PSR-3 logging with options to disable all deprecations or selectively for packages.",
             "homepage": "https://www.doctrine-project.org/",
             "support": {
@@ -593,9 +567,7 @@
                 }
             },
             "notification-url": "https://packagist.org/downloads/",
-            "license": [
-                "MIT"
-            ],
+            "license": ["MIT"],
             "authors": [
                 {
                     "name": "Guilherme Blanco",
@@ -683,9 +655,7 @@
                 }
             },
             "notification-url": "https://packagist.org/downloads/",
-            "license": [
-                "MIT"
-            ],
+            "license": ["MIT"],
             "authors": [
                 {
                     "name": "Guilherme Blanco",
@@ -773,9 +743,7 @@
                 }
             },
             "notification-url": "https://packagist.org/downloads/",
-            "license": [
-                "MIT"
-            ],
+            "license": ["MIT"],
             "authors": [
                 {
                     "name": "Guilherme Blanco",
@@ -792,13 +760,7 @@
             ],
             "description": "PHP Doctrine Lexer parser library that can be used in Top-Down, Recursive Descent Parsers.",
             "homepage": "https://www.doctrine-project.org/projects/lexer.html",
-            "keywords": [
-                "annotations",
-                "docblock",
-                "lexer",
-                "parser",
-                "php"
-            ],
+            "keywords": ["annotations", "docblock", "lexer", "parser", "php"],
             "support": {
                 "issues": "https://github.com/doctrine/lexer/issues",
                 "source": "https://github.com/doctrine/lexer/tree/3.0.0"
@@ -853,9 +815,7 @@
                 }
             },
             "notification-url": "https://packagist.org/downloads/",
-            "license": [
-                "MIT"
-            ],
+            "license": ["MIT"],
             "authors": [
                 {
                     "name": "Chris Tankersley",
@@ -864,10 +824,7 @@
                 }
             ],
             "description": "CRON for PHP: Calculate the next or previous run date and determine if a CRON expression is due",
-            "keywords": [
-                "cron",
-                "schedule"
-            ],
+            "keywords": ["cron", "schedule"],
             "support": {
                 "issues": "https://github.com/dragonmantank/cron-expression/issues",
                 "source": "https://github.com/dragonmantank/cron-expression/tree/v3.3.2"
@@ -918,9 +875,7 @@
                 }
             },
             "notification-url": "https://packagist.org/downloads/",
-            "license": [
-                "MIT"
-            ],
+            "license": ["MIT"],
             "authors": [
                 {
                     "name": "Eduardo Gulias Davis"
@@ -982,9 +937,7 @@
                 }
             },
             "notification-url": "https://packagist.org/downloads/",
-            "license": [
-                "MIT"
-            ],
+            "license": ["MIT"],
             "authors": [
                 {
                     "name": "Fruitcake",
@@ -997,11 +950,7 @@
             ],
             "description": "Cross-origin resource sharing library for the Symfony HttpFoundation",
             "homepage": "https://github.com/fruitcake/php-cors",
-            "keywords": [
-                "cors",
-                "laravel",
-                "symfony"
-            ],
+            "keywords": ["cors", "laravel", "symfony"],
             "support": {
                 "issues": "https://github.com/fruitcake/php-cors/issues",
                 "source": "https://github.com/fruitcake/php-cors/tree/v1.2.0"
@@ -1046,9 +995,7 @@
                 }
             },
             "notification-url": "https://packagist.org/downloads/",
-            "license": [
-                "MIT"
-            ],
+            "license": ["MIT"],
             "authors": [
                 {
                     "name": "Graham Campbell",
@@ -1124,17 +1071,13 @@
                 }
             },
             "autoload": {
-                "files": [
-                    "src/functions_include.php"
-                ],
+                "files": ["src/functions_include.php"],
                 "psr-4": {
                     "GuzzleHttp\\": "src/"
                 }
             },
             "notification-url": "https://packagist.org/downloads/",
-            "license": [
-                "MIT"
-            ],
+            "license": ["MIT"],
             "authors": [
                 {
                     "name": "Graham Campbell",
@@ -1231,17 +1174,13 @@
                 }
             },
             "autoload": {
-                "files": [
-                    "src/functions_include.php"
-                ],
+                "files": ["src/functions_include.php"],
                 "psr-4": {
                     "GuzzleHttp\\Promise\\": "src/"
                 }
             },
             "notification-url": "https://packagist.org/downloads/",
-            "license": [
-                "MIT"
-            ],
+            "license": ["MIT"],
             "authors": [
                 {
                     "name": "Graham Campbell",
@@ -1265,9 +1204,7 @@
                 }
             ],
             "description": "Guzzle promises library",
-            "keywords": [
-                "promise"
-            ],
+            "keywords": ["promise"],
             "support": {
                 "issues": "https://github.com/guzzle/promises/issues",
                 "source": "https://github.com/guzzle/promises/tree/1.5.2"
@@ -1333,9 +1270,7 @@
                 }
             },
             "notification-url": "https://packagist.org/downloads/",
-            "license": [
-                "MIT"
-            ],
+            "license": ["MIT"],
             "authors": [
                 {
                     "name": "Graham Campbell",
@@ -1438,9 +1373,7 @@
                 }
             },
             "notification-url": "https://packagist.org/downloads/",
-            "license": [
-                "MIT"
-            ],
+            "license": ["MIT"],
             "authors": [
                 {
                     "name": "Graham Campbell",
@@ -1464,10 +1397,7 @@
                 }
             ],
             "description": "A polyfill class for uri_template of PHP",
-            "keywords": [
-                "guzzlehttp",
-                "uri-template"
-            ],
+            "keywords": ["guzzlehttp", "uri-template"],
             "support": {
                 "issues": "https://github.com/guzzle/uri-template/issues",
                 "source": "https://github.com/guzzle/uri-template/tree/v1.0.1"
@@ -1521,9 +1451,7 @@
                     "dev-master": "1.x-dev"
                 },
                 "laravel": {
-                    "providers": [
-                        "Laravel\\Fortify\\FortifyServiceProvider"
-                    ]
+                    "providers": ["Laravel\\Fortify\\FortifyServiceProvider"]
                 }
             },
             "autoload": {
@@ -1532,9 +1460,7 @@
                 }
             },
             "notification-url": "https://packagist.org/downloads/",
-            "license": [
-                "MIT"
-            ],
+            "license": ["MIT"],
             "authors": [
                 {
                     "name": "Taylor Otwell",
@@ -1542,10 +1468,7 @@
                 }
             ],
             "description": "Backend controllers and scaffolding for Laravel authentication.",
-            "keywords": [
-                "auth",
-                "laravel"
-            ],
+            "keywords": ["auth", "laravel"],
             "support": {
                 "issues": "https://github.com/laravel/fortify/issues",
                 "source": "https://github.com/laravel/fortify"
@@ -1731,9 +1654,7 @@
                 }
             },
             "notification-url": "https://packagist.org/downloads/",
-            "license": [
-                "MIT"
-            ],
+            "license": ["MIT"],
             "authors": [
                 {
                     "name": "Taylor Otwell",
@@ -1742,10 +1663,7 @@
             ],
             "description": "The Laravel Framework.",
             "homepage": "https://laravel.com",
-            "keywords": [
-                "framework",
-                "laravel"
-            ],
+            "keywords": ["framework", "laravel"],
             "support": {
                 "issues": "https://github.com/laravel/framework/issues",
                 "source": "https://github.com/laravel/framework"
@@ -1780,14 +1698,10 @@
                 }
             },
             "autoload": {
-                "files": [
-                    "src/helpers.php"
-                ]
+                "files": ["src/helpers.php"]
             },
             "notification-url": "https://packagist.org/downloads/",
-            "license": [
-                "MIT"
-            ],
+            "license": ["MIT"],
             "authors": [
                 {
                     "name": "Taylor Otwell",
@@ -1799,10 +1713,7 @@
                 }
             ],
             "description": "Provides backwards compatibility for helpers in the latest Laravel release.",
-            "keywords": [
-                "helpers",
-                "laravel"
-            ],
+            "keywords": ["helpers", "laravel"],
             "support": {
                 "source": "https://github.com/laravel/helpers/tree/v1.6.0"
             },
@@ -1852,9 +1763,7 @@
                     "dev-master": "5.x-dev"
                 },
                 "laravel": {
-                    "providers": [
-                        "Laravel\\Horizon\\HorizonServiceProvider"
-                    ],
+                    "providers": ["Laravel\\Horizon\\HorizonServiceProvider"],
                     "aliases": {
                         "Horizon": "Laravel\\Horizon\\Horizon"
                     }
@@ -1866,9 +1775,7 @@
                 }
             },
             "notification-url": "https://packagist.org/downloads/",
-            "license": [
-                "MIT"
-            ],
+            "license": ["MIT"],
             "authors": [
                 {
                     "name": "Taylor Otwell",
@@ -1876,10 +1783,7 @@
                 }
             ],
             "description": "Dashboard and code-driven configuration for Laravel queues.",
-            "keywords": [
-                "laravel",
-                "queue"
-            ],
+            "keywords": ["laravel", "queue"],
             "support": {
                 "issues": "https://github.com/laravel/horizon/issues",
                 "source": "https://github.com/laravel/horizon/tree/v5.15.0"
@@ -1920,9 +1824,7 @@
                     "dev-master": "3.x-dev"
                 },
                 "laravel": {
-                    "providers": [
-                        "Laravel\\Sanctum\\SanctumServiceProvider"
-                    ]
+                    "providers": ["Laravel\\Sanctum\\SanctumServiceProvider"]
                 }
             },
             "autoload": {
@@ -1931,9 +1833,7 @@
                 }
             },
             "notification-url": "https://packagist.org/downloads/",
-            "license": [
-                "MIT"
-            ],
+            "license": ["MIT"],
             "authors": [
                 {
                     "name": "Taylor Otwell",
@@ -1941,11 +1841,7 @@
                 }
             ],
             "description": "Laravel Sanctum provides a featherweight authentication system for SPAs and simple APIs.",
-            "keywords": [
-                "auth",
-                "laravel",
-                "sanctum"
-            ],
+            "keywords": ["auth", "laravel", "sanctum"],
             "support": {
                 "issues": "https://github.com/laravel/sanctum/issues",
                 "source": "https://github.com/laravel/sanctum"
@@ -1987,9 +1883,7 @@
                 }
             },
             "notification-url": "https://packagist.org/downloads/",
-            "license": [
-                "MIT"
-            ],
+            "license": ["MIT"],
             "authors": [
                 {
                     "name": "Taylor Otwell",
@@ -2001,11 +1895,7 @@
                 }
             ],
             "description": "Laravel Serializable Closure provides an easy and secure way to serialize closures in PHP.",
-            "keywords": [
-                "closure",
-                "laravel",
-                "serializable"
-            ],
+            "keywords": ["closure", "laravel", "serializable"],
             "support": {
                 "issues": "https://github.com/laravel/serializable-closure/issues",
                 "source": "https://github.com/laravel/serializable-closure"
@@ -2047,9 +1937,7 @@
                     "dev-master": "2.x-dev"
                 },
                 "laravel": {
-                    "providers": [
-                        "Laravel\\Tinker\\TinkerServiceProvider"
-                    ]
+                    "providers": ["Laravel\\Tinker\\TinkerServiceProvider"]
                 }
             },
             "autoload": {
@@ -2058,9 +1946,7 @@
                 }
             },
             "notification-url": "https://packagist.org/downloads/",
-            "license": [
-                "MIT"
-            ],
+            "license": ["MIT"],
             "authors": [
                 {
                     "name": "Taylor Otwell",
@@ -2068,12 +1954,7 @@
                 }
             ],
             "description": "Powerful REPL for the Laravel framework.",
-            "keywords": [
-                "REPL",
-                "Tinker",
-                "laravel",
-                "psysh"
-            ],
+            "keywords": ["REPL", "Tinker", "laravel", "psysh"],
             "support": {
                 "issues": "https://github.com/laravel/tinker/issues",
                 "source": "https://github.com/laravel/tinker/tree/v2.8.1"
@@ -2124,9 +2005,7 @@
                 }
             },
             "notification-url": "https://packagist.org/downloads/",
-            "license": [
-                "BSD-3-Clause"
-            ],
+            "license": ["BSD-3-Clause"],
             "authors": [
                 {
                     "name": "Luís Cobucci",
@@ -2135,10 +2014,7 @@
                 }
             ],
             "description": "A simple library to work with JSON Web Token and JSON Web Signature",
-            "keywords": [
-                "JWS",
-                "jwt"
-            ],
+            "keywords": ["JWS", "jwt"],
             "support": {
                 "issues": "https://github.com/lcobucci/jwt/issues",
                 "source": "https://github.com/lcobucci/jwt/tree/5.0.0"
@@ -2211,9 +2087,7 @@
                 }
             },
             "notification-url": "https://packagist.org/downloads/",
-            "license": [
-                "BSD-3-Clause"
-            ],
+            "license": ["BSD-3-Clause"],
             "authors": [
                 {
                     "name": "Colin O'Dell",
@@ -2299,9 +2173,7 @@
                 }
             },
             "notification-url": "https://packagist.org/downloads/",
-            "license": [
-                "BSD-3-Clause"
-            ],
+            "license": ["BSD-3-Clause"],
             "authors": [
                 {
                     "name": "Colin O'Dell",
@@ -2391,9 +2263,7 @@
                 }
             },
             "notification-url": "https://packagist.org/downloads/",
-            "license": [
-                "MIT"
-            ],
+            "license": ["MIT"],
             "authors": [
                 {
                     "name": "Frank de Jonge",
@@ -2475,9 +2345,7 @@
                 }
             },
             "notification-url": "https://packagist.org/downloads/",
-            "license": [
-                "MIT"
-            ],
+            "license": ["MIT"],
             "authors": [
                 {
                     "name": "Phil Sturgeon",
@@ -2488,12 +2356,7 @@
             ],
             "description": "Handle the output of complex data structures ready for API output.",
             "homepage": "http://fractal.thephpleague.com/",
-            "keywords": [
-                "api",
-                "json",
-                "league",
-                "rest"
-            ],
+            "keywords": ["api", "json", "league", "rest"],
             "support": {
                 "issues": "https://github.com/thephpleague/fractal/issues",
                 "source": "https://github.com/thephpleague/fractal/tree/0.20.1"
@@ -2530,9 +2393,7 @@
                 }
             },
             "notification-url": "https://packagist.org/downloads/",
-            "license": [
-                "MIT"
-            ],
+            "license": ["MIT"],
             "authors": [
                 {
                     "name": "Frank de Jonge",
@@ -2624,9 +2485,7 @@
                 }
             },
             "notification-url": "https://packagist.org/downloads/",
-            "license": [
-                "MIT"
-            ],
+            "license": ["MIT"],
             "authors": [
                 {
                     "name": "Jordi Boggiano",
@@ -2636,11 +2495,7 @@
             ],
             "description": "Sends your logs to files, sockets, inboxes, databases and various web services",
             "homepage": "https://github.com/Seldaek/monolog",
-            "keywords": [
-                "log",
-                "logging",
-                "psr-3"
-            ],
+            "keywords": ["log", "logging", "psr-3"],
             "support": {
                 "issues": "https://github.com/Seldaek/monolog/issues",
                 "source": "https://github.com/Seldaek/monolog/tree/3.3.1"
@@ -2691,9 +2546,7 @@
                 "phpunit/phpunit": "^7.5.20 || ^8.5.26 || ^9.5.20",
                 "squizlabs/php_codesniffer": "^3.4"
             },
-            "bin": [
-                "bin/carbon"
-            ],
+            "bin": ["bin/carbon"],
             "type": "library",
             "extra": {
                 "branch-alias": {
@@ -2701,14 +2554,10 @@
                     "dev-master": "2.x-dev"
                 },
                 "laravel": {
-                    "providers": [
-                        "Carbon\\Laravel\\ServiceProvider"
-                    ]
+                    "providers": ["Carbon\\Laravel\\ServiceProvider"]
                 },
                 "phpstan": {
-                    "includes": [
-                        "extension.neon"
-                    ]
+                    "includes": ["extension.neon"]
                 }
             },
             "autoload": {
@@ -2717,9 +2566,7 @@
                 }
             },
             "notification-url": "https://packagist.org/downloads/",
-            "license": [
-                "MIT"
-            ],
+            "license": ["MIT"],
             "authors": [
                 {
                     "name": "Brian Nesbitt",
@@ -2733,11 +2580,7 @@
             ],
             "description": "An API extension for DateTime that supports 281 different languages.",
             "homepage": "https://carbon.nesbot.com",
-            "keywords": [
-                "date",
-                "datetime",
-                "time"
-            ],
+            "keywords": ["date", "datetime", "time"],
             "support": {
                 "docs": "https://carbon.nesbot.com/docs",
                 "issues": "https://github.com/briannesbitt/Carbon/issues",
@@ -2789,16 +2632,10 @@
                 }
             },
             "autoload": {
-                "classmap": [
-                    "src/"
-                ]
+                "classmap": ["src/"]
             },
             "notification-url": "https://packagist.org/downloads/",
-            "license": [
-                "BSD-3-Clause",
-                "GPL-2.0-only",
-                "GPL-3.0-only"
-            ],
+            "license": ["BSD-3-Clause", "GPL-2.0-only", "GPL-3.0-only"],
             "authors": [
                 {
                     "name": "David Grudl",
@@ -2811,10 +2648,7 @@
             ],
             "description": "📐 Nette Schema: validating data structures against a given Schema.",
             "homepage": "https://nette.org",
-            "keywords": [
-                "config",
-                "nette"
-            ],
+            "keywords": ["config", "nette"],
             "support": {
                 "issues": "https://github.com/nette/schema/issues",
                 "source": "https://github.com/nette/schema/tree/v1.2.3"
@@ -2864,16 +2698,10 @@
                 }
             },
             "autoload": {
-                "classmap": [
-                    "src/"
-                ]
+                "classmap": ["src/"]
             },
             "notification-url": "https://packagist.org/downloads/",
-            "license": [
-                "BSD-3-Clause",
-                "GPL-2.0-only",
-                "GPL-3.0-only"
-            ],
+            "license": ["BSD-3-Clause", "GPL-2.0-only", "GPL-3.0-only"],
             "authors": [
                 {
                     "name": "David Grudl",
@@ -2930,9 +2758,7 @@
                 "ircmaxell/php-yacc": "^0.0.7",
                 "phpunit/phpunit": "^6.5 || ^7.0 || ^8.0 || ^9.0"
             },
-            "bin": [
-                "bin/php-parse"
-            ],
+            "bin": ["bin/php-parse"],
             "type": "library",
             "extra": {
                 "branch-alias": {
@@ -2945,19 +2771,14 @@
                 }
             },
             "notification-url": "https://packagist.org/downloads/",
-            "license": [
-                "BSD-3-Clause"
-            ],
+            "license": ["BSD-3-Clause"],
             "authors": [
                 {
                     "name": "Nikita Popov"
                 }
             ],
             "description": "A PHP parser written in PHP",
-            "keywords": [
-                "parser",
-                "php"
-            ],
+            "keywords": ["parser", "php"],
             "support": {
                 "issues": "https://github.com/nikic/PHP-Parser/issues",
                 "source": "https://github.com/nikic/PHP-Parser/tree/v4.15.4"
@@ -2998,23 +2819,17 @@
             "type": "library",
             "extra": {
                 "laravel": {
-                    "providers": [
-                        "Termwind\\Laravel\\TermwindServiceProvider"
-                    ]
+                    "providers": ["Termwind\\Laravel\\TermwindServiceProvider"]
                 }
             },
             "autoload": {
-                "files": [
-                    "src/Functions.php"
-                ],
+                "files": ["src/Functions.php"],
                 "psr-4": {
                     "Termwind\\": "src/"
                 }
             },
             "notification-url": "https://packagist.org/downloads/",
-            "license": [
-                "MIT"
-            ],
+            "license": ["MIT"],
             "authors": [
                 {
                     "name": "Nuno Maduro",
@@ -3022,14 +2837,7 @@
                 }
             ],
             "description": "Its like Tailwind CSS, but for the console.",
-            "keywords": [
-                "cli",
-                "console",
-                "css",
-                "package",
-                "php",
-                "style"
-            ],
+            "keywords": ["cli", "console", "css", "package", "php", "style"],
             "support": {
                 "issues": "https://github.com/nunomaduro/termwind/issues",
                 "source": "https://github.com/nunomaduro/termwind/tree/v1.15.1"
@@ -3078,9 +2886,7 @@
                 }
             },
             "notification-url": "https://packagist.org/downloads/",
-            "license": [
-                "MIT"
-            ],
+            "license": ["MIT"],
             "authors": [
                 {
                     "name": "Paragon Initiative Enterprises",
@@ -3143,9 +2949,7 @@
             },
             "type": "library",
             "notification-url": "https://packagist.org/downloads/",
-            "license": [
-                "MIT"
-            ],
+            "license": ["MIT"],
             "authors": [
                 {
                     "name": "Paragon Initiative Enterprises",
@@ -3154,12 +2958,7 @@
                 }
             ],
             "description": "PHP 5.x polyfill for random_bytes() and random_int() from PHP 7",
-            "keywords": [
-                "csprng",
-                "polyfill",
-                "pseudorandom",
-                "random"
-            ],
+            "keywords": ["csprng", "polyfill", "pseudorandom", "random"],
             "support": {
                 "email": "info@paragonie.com",
                 "issues": "https://github.com/paragonie/random_compat/issues",
@@ -3194,14 +2993,10 @@
             },
             "type": "library",
             "autoload": {
-                "files": [
-                    "autoload.php"
-                ]
+                "files": ["autoload.php"]
             },
             "notification-url": "https://packagist.org/downloads/",
-            "license": [
-                "ISC"
-            ],
+            "license": ["ISC"],
             "authors": [
                 {
                     "name": "Paragon Initiative Enterprises",
@@ -3282,9 +3077,7 @@
                 }
             },
             "notification-url": "https://packagist.org/downloads/",
-            "license": [
-                "MIT"
-            ],
+            "license": ["MIT"],
             "authors": [
                 {
                     "name": "Jaap van Otterdijk",
@@ -3348,9 +3141,7 @@
                 }
             },
             "notification-url": "https://packagist.org/downloads/",
-            "license": [
-                "MIT"
-            ],
+            "license": ["MIT"],
             "authors": [
                 {
                     "name": "Mike van Riel",
@@ -3401,9 +3192,7 @@
                 }
             },
             "notification-url": "https://packagist.org/downloads/",
-            "license": [
-                "Apache-2.0"
-            ],
+            "license": ["Apache-2.0"],
             "authors": [
                 {
                     "name": "Johannes M. Schmitt",
@@ -3417,12 +3206,7 @@
                 }
             ],
             "description": "Option Type for PHP",
-            "keywords": [
-                "language",
-                "option",
-                "php",
-                "type"
-            ],
+            "keywords": ["language", "option", "php", "type"],
             "support": {
                 "issues": "https://github.com/schmittjoh/php-option/issues",
                 "source": "https://github.com/schmittjoh/php-option/tree/1.9.1"
@@ -3470,17 +3254,13 @@
             },
             "type": "library",
             "autoload": {
-                "files": [
-                    "phpseclib/bootstrap.php"
-                ],
+                "files": ["phpseclib/bootstrap.php"],
                 "psr-4": {
                     "phpseclib3\\": "phpseclib/"
                 }
             },
             "notification-url": "https://packagist.org/downloads/",
-            "license": [
-                "MIT"
-            ],
+            "license": ["MIT"],
             "authors": [
                 {
                     "name": "Jim Wigginton",
@@ -3578,15 +3358,11 @@
             "type": "library",
             "autoload": {
                 "psr-4": {
-                    "PHPStan\\PhpDocParser\\": [
-                        "src/"
-                    ]
+                    "PHPStan\\PhpDocParser\\": ["src/"]
                 }
             },
             "notification-url": "https://packagist.org/downloads/",
-            "license": [
-                "MIT"
-            ],
+            "license": ["MIT"],
             "description": "PHPDoc parser with support for nullable, intersection and generic types",
             "support": {
                 "issues": "https://github.com/phpstan/phpdoc-parser/issues",
@@ -3623,9 +3399,7 @@
                 }
             },
             "notification-url": "https://packagist.org/downloads/",
-            "license": [
-                "MIT"
-            ],
+            "license": ["MIT"],
             "authors": [
                 {
                     "name": "Antonio Carlos Ribeiro",
@@ -3675,9 +3449,7 @@
                 }
             },
             "notification-url": "https://packagist.org/downloads/",
-            "license": [
-                "MIT"
-            ],
+            "license": ["MIT"],
             "authors": [
                 {
                     "name": "PHP-FIG",
@@ -3685,11 +3457,7 @@
                 }
             ],
             "description": "Common interface for caching libraries",
-            "keywords": [
-                "cache",
-                "psr",
-                "psr-6"
-            ],
+            "keywords": ["cache", "psr", "psr-6"],
             "support": {
                 "source": "https://github.com/php-fig/cache/tree/3.0.0"
             },
@@ -3719,9 +3487,7 @@
                 }
             },
             "notification-url": "https://packagist.org/downloads/",
-            "license": [
-                "MIT"
-            ],
+            "license": ["MIT"],
             "authors": [
                 {
                     "name": "PHP-FIG",
@@ -3730,13 +3496,7 @@
             ],
             "description": "Common interface for reading the clock.",
             "homepage": "https://github.com/php-fig/clock",
-            "keywords": [
-                "clock",
-                "now",
-                "psr",
-                "psr-20",
-                "time"
-            ],
+            "keywords": ["clock", "now", "psr", "psr-20", "time"],
             "support": {
                 "issues": "https://github.com/php-fig/clock/issues",
                 "source": "https://github.com/php-fig/clock/tree/1.0.0"
@@ -3772,9 +3532,7 @@
                 }
             },
             "notification-url": "https://packagist.org/downloads/",
-            "license": [
-                "MIT"
-            ],
+            "license": ["MIT"],
             "authors": [
                 {
                     "name": "PHP-FIG",
@@ -3825,9 +3583,7 @@
                 }
             },
             "notification-url": "https://packagist.org/downloads/",
-            "license": [
-                "MIT"
-            ],
+            "license": ["MIT"],
             "authors": [
                 {
                     "name": "PHP-FIG",
@@ -3835,11 +3591,7 @@
                 }
             ],
             "description": "Standard interfaces for event handling.",
-            "keywords": [
-                "events",
-                "psr",
-                "psr-14"
-            ],
+            "keywords": ["events", "psr", "psr-14"],
             "support": {
                 "issues": "https://github.com/php-fig/event-dispatcher/issues",
                 "source": "https://github.com/php-fig/event-dispatcher/tree/1.0.0"
@@ -3876,9 +3628,7 @@
                 }
             },
             "notification-url": "https://packagist.org/downloads/",
-            "license": [
-                "MIT"
-            ],
+            "license": ["MIT"],
             "authors": [
                 {
                     "name": "PHP-FIG",
@@ -3887,12 +3637,7 @@
             ],
             "description": "Common interface for HTTP clients",
             "homepage": "https://github.com/php-fig/http-client",
-            "keywords": [
-                "http",
-                "http-client",
-                "psr",
-                "psr-18"
-            ],
+            "keywords": ["http", "http-client", "psr", "psr-18"],
             "support": {
                 "source": "https://github.com/php-fig/http-client/tree/1.0.2"
             },
@@ -3928,9 +3673,7 @@
                 }
             },
             "notification-url": "https://packagist.org/downloads/",
-            "license": [
-                "MIT"
-            ],
+            "license": ["MIT"],
             "authors": [
                 {
                     "name": "PHP-FIG",
@@ -3982,9 +3725,7 @@
                 }
             },
             "notification-url": "https://packagist.org/downloads/",
-            "license": [
-                "MIT"
-            ],
+            "license": ["MIT"],
             "authors": [
                 {
                     "name": "PHP-FIG",
@@ -4035,9 +3776,7 @@
                 }
             },
             "notification-url": "https://packagist.org/downloads/",
-            "license": [
-                "MIT"
-            ],
+            "license": ["MIT"],
             "authors": [
                 {
                     "name": "PHP-FIG",
@@ -4046,11 +3785,7 @@
             ],
             "description": "Common interface for logging libraries",
             "homepage": "https://github.com/php-fig/log",
-            "keywords": [
-                "log",
-                "psr",
-                "psr-3"
-            ],
+            "keywords": ["log", "psr", "psr-3"],
             "support": {
                 "source": "https://github.com/php-fig/log/tree/3.0.0"
             },
@@ -4085,9 +3820,7 @@
                 }
             },
             "notification-url": "https://packagist.org/downloads/",
-            "license": [
-                "MIT"
-            ],
+            "license": ["MIT"],
             "authors": [
                 {
                     "name": "PHP-FIG",
@@ -4095,13 +3828,7 @@
                 }
             ],
             "description": "Common interfaces for simple caching",
-            "keywords": [
-                "cache",
-                "caching",
-                "psr",
-                "psr-16",
-                "simple-cache"
-            ],
+            "keywords": ["cache", "caching", "psr", "psr-16", "simple-cache"],
             "support": {
                 "source": "https://github.com/php-fig/simple-cache/tree/3.0.0"
             },
@@ -4141,9 +3868,7 @@
                 "ext-posix": "If you have PCNTL, you'll want the POSIX extension as well.",
                 "ext-readline": "Enables support for arrow-key history navigation, and showing and manipulating command history."
             },
-            "bin": [
-                "bin/psysh"
-            ],
+            "bin": ["bin/psysh"],
             "type": "library",
             "extra": {
                 "branch-alias": {
@@ -4151,17 +3876,13 @@
                 }
             },
             "autoload": {
-                "files": [
-                    "src/functions.php"
-                ],
+                "files": ["src/functions.php"],
                 "psr-4": {
                     "Psy\\": "src/"
                 }
             },
             "notification-url": "https://packagist.org/downloads/",
-            "license": [
-                "MIT"
-            ],
+            "license": ["MIT"],
             "authors": [
                 {
                     "name": "Justin Hileman",
@@ -4171,12 +3892,7 @@
             ],
             "description": "An interactive shell for modern PHP.",
             "homepage": "http://psysh.org",
-            "keywords": [
-                "REPL",
-                "console",
-                "interactive",
-                "shell"
-            ],
+            "keywords": ["REPL", "console", "interactive", "shell"],
             "support": {
                 "issues": "https://github.com/bobthecow/psysh/issues",
                 "source": "https://github.com/bobthecow/psysh/tree/v0.11.16"
@@ -4221,9 +3937,7 @@
                 }
             },
             "notification-url": "https://packagist.org/downloads/",
-            "license": [
-                "MIT"
-            ],
+            "license": ["MIT"],
             "description": "Library for interacting with the Pusher REST API",
             "keywords": [
                 "events",
@@ -4267,14 +3981,10 @@
             },
             "type": "library",
             "autoload": {
-                "files": [
-                    "src/getallheaders.php"
-                ]
+                "files": ["src/getallheaders.php"]
             },
             "notification-url": "https://packagist.org/downloads/",
-            "license": [
-                "MIT"
-            ],
+            "license": ["MIT"],
             "authors": [
                 {
                     "name": "Ralph Khattar",
@@ -4342,9 +4052,7 @@
                 }
             },
             "notification-url": "https://packagist.org/downloads/",
-            "license": [
-                "MIT"
-            ],
+            "license": ["MIT"],
             "authors": [
                 {
                     "name": "Ben Ramsey",
@@ -4353,14 +4061,7 @@
                 }
             ],
             "description": "A PHP library for representing and manipulating collections.",
-            "keywords": [
-                "array",
-                "collection",
-                "hash",
-                "map",
-                "queue",
-                "set"
-            ],
+            "keywords": ["array", "collection", "hash", "map", "queue", "set"],
             "support": {
                 "issues": "https://github.com/ramsey/collection/issues",
                 "source": "https://github.com/ramsey/collection/tree/2.0.0"
@@ -4436,23 +4137,15 @@
                 }
             },
             "autoload": {
-                "files": [
-                    "src/functions.php"
-                ],
+                "files": ["src/functions.php"],
                 "psr-4": {
                     "Ramsey\\Uuid\\": "src/"
                 }
             },
             "notification-url": "https://packagist.org/downloads/",
-            "license": [
-                "MIT"
-            ],
+            "license": ["MIT"],
             "description": "A PHP library for generating and working with universally unique identifiers (UUIDs).",
-            "keywords": [
-                "guid",
-                "identifier",
-                "uuid"
-            ],
+            "keywords": ["guid", "identifier", "uuid"],
             "support": {
                 "issues": "https://github.com/ramsey/uuid/issues",
                 "source": "https://github.com/ramsey/uuid/tree/4.7.4"
@@ -4508,9 +4201,7 @@
                 }
             },
             "notification-url": "https://packagist.org/downloads/",
-            "license": [
-                "MIT"
-            ],
+            "license": ["MIT"],
             "authors": [
                 {
                     "name": "Freek Van der Herten",
@@ -4572,9 +4263,7 @@
                 }
             },
             "notification-url": "https://packagist.org/downloads/",
-            "license": [
-                "MIT"
-            ],
+            "license": ["MIT"],
             "authors": [
                 {
                     "name": "Freek Van der Herten",
@@ -4657,9 +4346,7 @@
                 }
             },
             "notification-url": "https://packagist.org/downloads/",
-            "license": [
-                "MIT"
-            ],
+            "license": ["MIT"],
             "authors": [
                 {
                     "name": "Ruben Van Assche",
@@ -4669,11 +4356,7 @@
             ],
             "description": "Create unified resources and data transfer objects",
             "homepage": "https://github.com/spatie/laravel-data",
-            "keywords": [
-                "laravel",
-                "laravel-data",
-                "spatie"
-            ],
+            "keywords": ["laravel", "laravel-data", "spatie"],
             "support": {
                 "issues": "https://github.com/spatie/laravel-data/issues",
                 "source": "https://github.com/spatie/laravel-data/tree/2.2.3"
@@ -4717,26 +4400,20 @@
             "type": "library",
             "extra": {
                 "laravel": {
-                    "providers": [
-                        "Spatie\\Fractal\\FractalServiceProvider"
-                    ],
+                    "providers": ["Spatie\\Fractal\\FractalServiceProvider"],
                     "aliases": {
                         "Fractal": "Spatie\\Fractal\\Facades\\Fractal"
                     }
                 }
             },
             "autoload": {
-                "files": [
-                    "src/helpers.php"
-                ],
+                "files": ["src/helpers.php"],
                 "psr-4": {
                     "Spatie\\Fractal\\": "src"
                 }
             },
             "notification-url": "https://packagist.org/downloads/",
-            "license": [
-                "MIT"
-            ],
+            "license": ["MIT"],
             "authors": [
                 {
                     "name": "Freek Van der Herten",
@@ -4799,9 +4476,7 @@
                 }
             },
             "notification-url": "https://packagist.org/downloads/",
-            "license": [
-                "MIT"
-            ],
+            "license": ["MIT"],
             "authors": [
                 {
                     "name": "Freek Van der Herten",
@@ -4811,10 +4486,7 @@
             ],
             "description": "Tools for creating Laravel packages",
             "homepage": "https://github.com/spatie/laravel-package-tools",
-            "keywords": [
-                "laravel-package-tools",
-                "spatie"
-            ],
+            "keywords": ["laravel-package-tools", "spatie"],
             "support": {
                 "issues": "https://github.com/spatie/laravel-package-tools/issues",
                 "source": "https://github.com/spatie/laravel-package-tools/tree/1.15.0"
@@ -4870,9 +4542,7 @@
                 }
             },
             "notification-url": "https://packagist.org/downloads/",
-            "license": [
-                "MIT"
-            ],
+            "license": ["MIT"],
             "authors": [
                 {
                     "name": "Alex Vanderbist",
@@ -4883,10 +4553,7 @@
             ],
             "description": "Easily build Eloquent queries from API requests",
             "homepage": "https://github.com/spatie/laravel-query-builder",
-            "keywords": [
-                "laravel-query-builder",
-                "spatie"
-            ],
+            "keywords": ["laravel-query-builder", "spatie"],
             "support": {
                 "issues": "https://github.com/spatie/laravel-query-builder/issues",
                 "source": "https://github.com/spatie/laravel-query-builder"
@@ -4950,14 +4617,10 @@
                 "psr-4": {
                     "Symfony\\Component\\Console\\": ""
                 },
-                "exclude-from-classmap": [
-                    "/Tests/"
-                ]
+                "exclude-from-classmap": ["/Tests/"]
             },
             "notification-url": "https://packagist.org/downloads/",
-            "license": [
-                "MIT"
-            ],
+            "license": ["MIT"],
             "authors": [
                 {
                     "name": "Fabien Potencier",
@@ -4970,12 +4633,7 @@
             ],
             "description": "Eases the creation of beautiful and testable command line interfaces",
             "homepage": "https://symfony.com",
-            "keywords": [
-                "cli",
-                "command-line",
-                "console",
-                "terminal"
-            ],
+            "keywords": ["cli", "command-line", "console", "terminal"],
             "support": {
                 "source": "https://github.com/symfony/console/tree/v6.2.10"
             },
@@ -5017,14 +4675,10 @@
                 "psr-4": {
                     "Symfony\\Component\\CssSelector\\": ""
                 },
-                "exclude-from-classmap": [
-                    "/Tests/"
-                ]
+                "exclude-from-classmap": ["/Tests/"]
             },
             "notification-url": "https://packagist.org/downloads/",
-            "license": [
-                "MIT"
-            ],
+            "license": ["MIT"],
             "authors": [
                 {
                     "name": "Fabien Potencier",
@@ -5088,14 +4742,10 @@
                 }
             },
             "autoload": {
-                "files": [
-                    "function.php"
-                ]
+                "files": ["function.php"]
             },
             "notification-url": "https://packagist.org/downloads/",
-            "license": [
-                "MIT"
-            ],
+            "license": ["MIT"],
             "authors": [
                 {
                     "name": "Nicolas Grekas",
@@ -5151,22 +4801,16 @@
                 "symfony/http-kernel": "^5.4|^6.0",
                 "symfony/serializer": "^5.4|^6.0"
             },
-            "bin": [
-                "Resources/bin/patch-type-declarations"
-            ],
+            "bin": ["Resources/bin/patch-type-declarations"],
             "type": "library",
             "autoload": {
                 "psr-4": {
                     "Symfony\\Component\\ErrorHandler\\": ""
                 },
-                "exclude-from-classmap": [
-                    "/Tests/"
-                ]
+                "exclude-from-classmap": ["/Tests/"]
             },
             "notification-url": "https://packagist.org/downloads/",
-            "license": [
-                "MIT"
-            ],
+            "license": ["MIT"],
             "authors": [
                 {
                     "name": "Fabien Potencier",
@@ -5242,14 +4886,10 @@
                 "psr-4": {
                     "Symfony\\Component\\EventDispatcher\\": ""
                 },
-                "exclude-from-classmap": [
-                    "/Tests/"
-                ]
+                "exclude-from-classmap": ["/Tests/"]
             },
             "notification-url": "https://packagist.org/downloads/",
-            "license": [
-                "MIT"
-            ],
+            "license": ["MIT"],
             "authors": [
                 {
                     "name": "Fabien Potencier",
@@ -5318,9 +4958,7 @@
                 }
             },
             "notification-url": "https://packagist.org/downloads/",
-            "license": [
-                "MIT"
-            ],
+            "license": ["MIT"],
             "authors": [
                 {
                     "name": "Nicolas Grekas",
@@ -5385,14 +5023,10 @@
                 "psr-4": {
                     "Symfony\\Component\\Finder\\": ""
                 },
-                "exclude-from-classmap": [
-                    "/Tests/"
-                ]
+                "exclude-from-classmap": ["/Tests/"]
             },
             "notification-url": "https://packagist.org/downloads/",
-            "license": [
-                "MIT"
-            ],
+            "license": ["MIT"],
             "authors": [
                 {
                     "name": "Fabien Potencier",
@@ -5463,14 +5097,10 @@
                 "psr-4": {
                     "Symfony\\Component\\HttpFoundation\\": ""
                 },
-                "exclude-from-classmap": [
-                    "/Tests/"
-                ]
+                "exclude-from-classmap": ["/Tests/"]
             },
             "notification-url": "https://packagist.org/downloads/",
-            "license": [
-                "MIT"
-            ],
+            "license": ["MIT"],
             "authors": [
                 {
                     "name": "Fabien Potencier",
@@ -5574,14 +5204,10 @@
                 "psr-4": {
                     "Symfony\\Component\\HttpKernel\\": ""
                 },
-                "exclude-from-classmap": [
-                    "/Tests/"
-                ]
+                "exclude-from-classmap": ["/Tests/"]
             },
             "notification-url": "https://packagist.org/downloads/",
-            "license": [
-                "MIT"
-            ],
+            "license": ["MIT"],
             "authors": [
                 {
                     "name": "Fabien Potencier",
@@ -5653,14 +5279,10 @@
                 "psr-4": {
                     "Symfony\\Component\\Mailer\\": ""
                 },
-                "exclude-from-classmap": [
-                    "/Tests/"
-                ]
+                "exclude-from-classmap": ["/Tests/"]
             },
             "notification-url": "https://packagist.org/downloads/",
-            "license": [
-                "MIT"
-            ],
+            "license": ["MIT"],
             "authors": [
                 {
                     "name": "Fabien Potencier",
@@ -5732,14 +5354,10 @@
                 "psr-4": {
                     "Symfony\\Component\\Mime\\": ""
                 },
-                "exclude-from-classmap": [
-                    "/Tests/"
-                ]
+                "exclude-from-classmap": ["/Tests/"]
             },
             "notification-url": "https://packagist.org/downloads/",
-            "license": [
-                "MIT"
-            ],
+            "license": ["MIT"],
             "authors": [
                 {
                     "name": "Fabien Potencier",
@@ -5752,10 +5370,7 @@
             ],
             "description": "Allows manipulating MIME messages",
             "homepage": "https://symfony.com",
-            "keywords": [
-                "mime",
-                "mime-type"
-            ],
+            "keywords": ["mime", "mime-type"],
             "support": {
                 "source": "https://github.com/symfony/mime/tree/v6.2.10"
             },
@@ -5809,17 +5424,13 @@
                 }
             },
             "autoload": {
-                "files": [
-                    "bootstrap.php"
-                ],
+                "files": ["bootstrap.php"],
                 "psr-4": {
                     "Symfony\\Polyfill\\Ctype\\": ""
                 }
             },
             "notification-url": "https://packagist.org/downloads/",
-            "license": [
-                "MIT"
-            ],
+            "license": ["MIT"],
             "authors": [
                 {
                     "name": "Gert de Pagter",
@@ -5832,12 +5443,7 @@
             ],
             "description": "Symfony polyfill for ctype functions",
             "homepage": "https://symfony.com",
-            "keywords": [
-                "compatibility",
-                "ctype",
-                "polyfill",
-                "portable"
-            ],
+            "keywords": ["compatibility", "ctype", "polyfill", "portable"],
             "support": {
                 "source": "https://github.com/symfony/polyfill-ctype/tree/v1.27.0"
             },
@@ -5888,17 +5494,13 @@
                 }
             },
             "autoload": {
-                "files": [
-                    "bootstrap.php"
-                ],
+                "files": ["bootstrap.php"],
                 "psr-4": {
                     "Symfony\\Polyfill\\Intl\\Grapheme\\": ""
                 }
             },
             "notification-url": "https://packagist.org/downloads/",
-            "license": [
-                "MIT"
-            ],
+            "license": ["MIT"],
             "authors": [
                 {
                     "name": "Nicolas Grekas",
@@ -5971,17 +5573,13 @@
                 }
             },
             "autoload": {
-                "files": [
-                    "bootstrap.php"
-                ],
+                "files": ["bootstrap.php"],
                 "psr-4": {
                     "Symfony\\Polyfill\\Intl\\Idn\\": ""
                 }
             },
             "notification-url": "https://packagist.org/downloads/",
-            "license": [
-                "MIT"
-            ],
+            "license": ["MIT"],
             "authors": [
                 {
                     "name": "Laurent Bassin",
@@ -6056,20 +5654,14 @@
                 }
             },
             "autoload": {
-                "files": [
-                    "bootstrap.php"
-                ],
+                "files": ["bootstrap.php"],
                 "psr-4": {
                     "Symfony\\Polyfill\\Intl\\Normalizer\\": ""
                 },
-                "classmap": [
-                    "Resources/stubs"
-                ]
+                "classmap": ["Resources/stubs"]
             },
             "notification-url": "https://packagist.org/downloads/",
-            "license": [
-                "MIT"
-            ],
+            "license": ["MIT"],
             "authors": [
                 {
                     "name": "Nicolas Grekas",
@@ -6143,17 +5735,13 @@
                 }
             },
             "autoload": {
-                "files": [
-                    "bootstrap.php"
-                ],
+                "files": ["bootstrap.php"],
                 "psr-4": {
                     "Symfony\\Polyfill\\Mbstring\\": ""
                 }
             },
             "notification-url": "https://packagist.org/downloads/",
-            "license": [
-                "MIT"
-            ],
+            "license": ["MIT"],
             "authors": [
                 {
                     "name": "Nicolas Grekas",
@@ -6220,17 +5808,13 @@
                 }
             },
             "autoload": {
-                "files": [
-                    "bootstrap.php"
-                ],
+                "files": ["bootstrap.php"],
                 "psr-4": {
                     "Symfony\\Polyfill\\Php72\\": ""
                 }
             },
             "notification-url": "https://packagist.org/downloads/",
-            "license": [
-                "MIT"
-            ],
+            "license": ["MIT"],
             "authors": [
                 {
                     "name": "Nicolas Grekas",
@@ -6243,12 +5827,7 @@
             ],
             "description": "Symfony polyfill backporting some PHP 7.2+ features to lower PHP versions",
             "homepage": "https://symfony.com",
-            "keywords": [
-                "compatibility",
-                "polyfill",
-                "portable",
-                "shim"
-            ],
+            "keywords": ["compatibility", "polyfill", "portable", "shim"],
             "support": {
                 "source": "https://github.com/symfony/polyfill-php72/tree/v1.27.0"
             },
@@ -6296,20 +5875,14 @@
                 }
             },
             "autoload": {
-                "files": [
-                    "bootstrap.php"
-                ],
+                "files": ["bootstrap.php"],
                 "psr-4": {
                     "Symfony\\Polyfill\\Php80\\": ""
                 },
-                "classmap": [
-                    "Resources/stubs"
-                ]
+                "classmap": ["Resources/stubs"]
             },
             "notification-url": "https://packagist.org/downloads/",
-            "license": [
-                "MIT"
-            ],
+            "license": ["MIT"],
             "authors": [
                 {
                     "name": "Ion Bazan",
@@ -6326,12 +5899,7 @@
             ],
             "description": "Symfony polyfill backporting some PHP 8.0+ features to lower PHP versions",
             "homepage": "https://symfony.com",
-            "keywords": [
-                "compatibility",
-                "polyfill",
-                "portable",
-                "shim"
-            ],
+            "keywords": ["compatibility", "polyfill", "portable", "shim"],
             "support": {
                 "source": "https://github.com/symfony/polyfill-php80/tree/v1.27.0"
             },
@@ -6385,17 +5953,13 @@
                 }
             },
             "autoload": {
-                "files": [
-                    "bootstrap.php"
-                ],
+                "files": ["bootstrap.php"],
                 "psr-4": {
                     "Symfony\\Polyfill\\Uuid\\": ""
                 }
             },
             "notification-url": "https://packagist.org/downloads/",
-            "license": [
-                "MIT"
-            ],
+            "license": ["MIT"],
             "authors": [
                 {
                     "name": "Grégoire Pineau",
@@ -6408,12 +5972,7 @@
             ],
             "description": "Symfony polyfill for uuid functions",
             "homepage": "https://symfony.com",
-            "keywords": [
-                "compatibility",
-                "polyfill",
-                "portable",
-                "uuid"
-            ],
+            "keywords": ["compatibility", "polyfill", "portable", "uuid"],
             "support": {
                 "source": "https://github.com/symfony/polyfill-uuid/tree/v1.27.0"
             },
@@ -6455,14 +6014,10 @@
                 "psr-4": {
                     "Symfony\\Component\\Process\\": ""
                 },
-                "exclude-from-classmap": [
-                    "/Tests/"
-                ]
+                "exclude-from-classmap": ["/Tests/"]
             },
             "notification-url": "https://packagist.org/downloads/",
-            "license": [
-                "MIT"
-            ],
+            "license": ["MIT"],
             "authors": [
                 {
                     "name": "Fabien Potencier",
@@ -6537,14 +6092,10 @@
                 "psr-4": {
                     "Symfony\\Component\\Routing\\": ""
                 },
-                "exclude-from-classmap": [
-                    "/Tests/"
-                ]
+                "exclude-from-classmap": ["/Tests/"]
             },
             "notification-url": "https://packagist.org/downloads/",
-            "license": [
-                "MIT"
-            ],
+            "license": ["MIT"],
             "authors": [
                 {
                     "name": "Fabien Potencier",
@@ -6557,12 +6108,7 @@
             ],
             "description": "Maps an HTTP request to a set of configuration variables",
             "homepage": "https://symfony.com",
-            "keywords": [
-                "router",
-                "routing",
-                "uri",
-                "url"
-            ],
+            "keywords": ["router", "routing", "uri", "url"],
             "support": {
                 "source": "https://github.com/symfony/routing/tree/v6.2.8"
             },
@@ -6620,14 +6166,10 @@
                 "psr-4": {
                     "Symfony\\Contracts\\Service\\": ""
                 },
-                "exclude-from-classmap": [
-                    "/Test/"
-                ]
+                "exclude-from-classmap": ["/Test/"]
             },
             "notification-url": "https://packagist.org/downloads/",
-            "license": [
-                "MIT"
-            ],
+            "license": ["MIT"],
             "authors": [
                 {
                     "name": "Nicolas Grekas",
@@ -6700,20 +6242,14 @@
             },
             "type": "library",
             "autoload": {
-                "files": [
-                    "Resources/functions.php"
-                ],
+                "files": ["Resources/functions.php"],
                 "psr-4": {
                     "Symfony\\Component\\String\\": ""
                 },
-                "exclude-from-classmap": [
-                    "/Tests/"
-                ]
+                "exclude-from-classmap": ["/Tests/"]
             },
             "notification-url": "https://packagist.org/downloads/",
-            "license": [
-                "MIT"
-            ],
+            "license": ["MIT"],
             "authors": [
                 {
                     "name": "Nicolas Grekas",
@@ -6806,20 +6342,14 @@
             },
             "type": "library",
             "autoload": {
-                "files": [
-                    "Resources/functions.php"
-                ],
+                "files": ["Resources/functions.php"],
                 "psr-4": {
                     "Symfony\\Component\\Translation\\": ""
                 },
-                "exclude-from-classmap": [
-                    "/Tests/"
-                ]
+                "exclude-from-classmap": ["/Tests/"]
             },
             "notification-url": "https://packagist.org/downloads/",
-            "license": [
-                "MIT"
-            ],
+            "license": ["MIT"],
             "authors": [
                 {
                     "name": "Fabien Potencier",
@@ -6885,14 +6415,10 @@
                 "psr-4": {
                     "Symfony\\Contracts\\Translation\\": ""
                 },
-                "exclude-from-classmap": [
-                    "/Test/"
-                ]
+                "exclude-from-classmap": ["/Test/"]
             },
             "notification-url": "https://packagist.org/downloads/",
-            "license": [
-                "MIT"
-            ],
+            "license": ["MIT"],
             "authors": [
                 {
                     "name": "Nicolas Grekas",
@@ -6958,14 +6484,10 @@
                 "psr-4": {
                     "Symfony\\Component\\Uid\\": ""
                 },
-                "exclude-from-classmap": [
-                    "/Tests/"
-                ]
+                "exclude-from-classmap": ["/Tests/"]
             },
             "notification-url": "https://packagist.org/downloads/",
-            "license": [
-                "MIT"
-            ],
+            "license": ["MIT"],
             "authors": [
                 {
                     "name": "Grégoire Pineau",
@@ -6982,11 +6504,7 @@
             ],
             "description": "Provides an object-oriented API to generate and represent UIDs",
             "homepage": "https://symfony.com",
-            "keywords": [
-                "UID",
-                "ulid",
-                "uuid"
-            ],
+            "keywords": ["UID", "ulid", "uuid"],
             "support": {
                 "source": "https://github.com/symfony/uid/tree/v6.2.7"
             },
@@ -7040,25 +6558,17 @@
                 "ext-intl": "To show region name in time zone dump",
                 "symfony/console": "To use the ServerDumpCommand and/or the bin/var-dump-server script"
             },
-            "bin": [
-                "Resources/bin/var-dump-server"
-            ],
+            "bin": ["Resources/bin/var-dump-server"],
             "type": "library",
             "autoload": {
-                "files": [
-                    "Resources/functions/dump.php"
-                ],
+                "files": ["Resources/functions/dump.php"],
                 "psr-4": {
                     "Symfony\\Component\\VarDumper\\": ""
                 },
-                "exclude-from-classmap": [
-                    "/Tests/"
-                ]
+                "exclude-from-classmap": ["/Tests/"]
             },
             "notification-url": "https://packagist.org/downloads/",
-            "license": [
-                "MIT"
-            ],
+            "license": ["MIT"],
             "authors": [
                 {
                     "name": "Nicolas Grekas",
@@ -7071,10 +6581,7 @@
             ],
             "description": "Provides mechanisms for walking through any arbitrary PHP variable",
             "homepage": "https://symfony.com",
-            "keywords": [
-                "debug",
-                "dump"
-            ],
+            "keywords": ["debug", "dump"],
             "support": {
                 "source": "https://github.com/symfony/var-dumper/tree/v6.2.10"
             },
@@ -7129,9 +6636,7 @@
                 }
             },
             "notification-url": "https://packagist.org/downloads/",
-            "license": [
-                "BSD-3-Clause"
-            ],
+            "license": ["BSD-3-Clause"],
             "authors": [
                 {
                     "name": "Tijs Verkoyen",
@@ -7194,9 +6699,7 @@
                 }
             },
             "notification-url": "https://packagist.org/downloads/",
-            "license": [
-                "BSD-3-Clause"
-            ],
+            "license": ["BSD-3-Clause"],
             "authors": [
                 {
                     "name": "Graham Campbell",
@@ -7210,11 +6713,7 @@
                 }
             ],
             "description": "Loads environment variables from `.env` to `getenv()`, `$_ENV` and `$_SERVER` automagically.",
-            "keywords": [
-                "dotenv",
-                "env",
-                "environment"
-            ],
+            "keywords": ["dotenv", "env", "environment"],
             "support": {
                 "issues": "https://github.com/vlucas/phpdotenv/issues",
                 "source": "https://github.com/vlucas/phpdotenv/tree/v5.5.0"
@@ -7261,9 +6760,7 @@
                 }
             },
             "notification-url": "https://packagist.org/downloads/",
-            "license": [
-                "MIT"
-            ],
+            "license": ["MIT"],
             "authors": [
                 {
                     "name": "Lars Moelleken",
@@ -7272,11 +6769,7 @@
             ],
             "description": "Portable ASCII library - performance optimized (ascii) string functions for php.",
             "homepage": "https://github.com/voku/portable-ascii",
-            "keywords": [
-                "ascii",
-                "clean",
-                "php"
-            ],
+            "keywords": ["ascii", "clean", "php"],
             "support": {
                 "issues": "https://github.com/voku/portable-ascii/issues",
                 "source": "https://github.com/voku/portable-ascii/tree/2.0.1"
@@ -7342,9 +6835,7 @@
                 }
             },
             "notification-url": "https://packagist.org/downloads/",
-            "license": [
-                "MIT"
-            ],
+            "license": ["MIT"],
             "authors": [
                 {
                     "name": "Bernhard Schussek",
@@ -7352,11 +6843,7 @@
                 }
             ],
             "description": "Assertions to validate method input/output with nice error messages.",
-            "keywords": [
-                "assert",
-                "check",
-                "validate"
-            ],
+            "keywords": ["assert", "check", "validate"],
             "support": {
                 "issues": "https://github.com/webmozarts/assert/issues",
                 "source": "https://github.com/webmozarts/assert/tree/1.11.0"
@@ -7415,15 +6902,11 @@
             "type": "library",
             "autoload": {
                 "psr-4": {
-                    "ParaTest\\": [
-                        "src/"
-                    ]
+                    "ParaTest\\": ["src/"]
                 }
             },
             "notification-url": "https://packagist.org/downloads/",
-            "license": [
-                "MIT"
-            ],
+            "license": ["MIT"],
             "authors": [
                 {
                     "name": "Brian Scaturro",
@@ -7438,12 +6921,7 @@
             ],
             "description": "Parallel testing for PHP",
             "homepage": "https://github.com/paratestphp/paratest",
-            "keywords": [
-                "concurrent",
-                "parallel",
-                "phpunit",
-                "testing"
-            ],
+            "keywords": ["concurrent", "parallel", "phpunit", "testing"],
             "support": {
                 "issues": "https://github.com/paratestphp/paratest/issues",
                 "source": "https://github.com/paratestphp/paratest/tree/v7.1.3"
@@ -7508,20 +6986,14 @@
                 }
             },
             "notification-url": "https://packagist.org/downloads/",
-            "license": [
-                "MIT"
-            ],
+            "license": ["MIT"],
             "authors": [
                 {
                     "name": "François Zaninotto"
                 }
             ],
             "description": "Faker is a PHP library that generates fake data for you.",
-            "keywords": [
-                "data",
-                "faker",
-                "fixtures"
-            ],
+            "keywords": ["data", "faker", "fixtures"],
             "support": {
                 "issues": "https://github.com/FakerPHP/Faker/issues",
                 "source": "https://github.com/FakerPHP/Faker/tree/v1.21.0"
@@ -7563,9 +7035,7 @@
                 }
             },
             "notification-url": "https://packagist.org/downloads/",
-            "license": [
-                "MIT"
-            ],
+            "license": ["MIT"],
             "authors": [
                 {
                     "name": "Théo FIDRY",
@@ -7573,10 +7043,7 @@
                 }
             ],
             "description": "Tiny utility to get the number of CPU cores.",
-            "keywords": [
-                "CPU",
-                "core"
-            ],
+            "keywords": ["CPU", "core"],
             "support": {
                 "issues": "https://github.com/theofidry/cpu-core-counter/issues",
                 "source": "https://github.com/theofidry/cpu-core-counter/tree/0.5.1"
@@ -7628,9 +7095,7 @@
                 }
             },
             "notification-url": "https://packagist.org/downloads/",
-            "license": [
-                "MIT"
-            ],
+            "license": ["MIT"],
             "authors": [
                 {
                     "name": "Filipe Dobreira",
@@ -7693,18 +7158,12 @@
                 }
             },
             "autoload": {
-                "classmap": [
-                    "hamcrest"
-                ]
+                "classmap": ["hamcrest"]
             },
             "notification-url": "https://packagist.org/downloads/",
-            "license": [
-                "BSD-3-Clause"
-            ],
+            "license": ["BSD-3-Clause"],
             "description": "This is the PHP port of Hamcrest Matchers",
-            "keywords": [
-                "test"
-            ],
+            "keywords": ["test"],
             "support": {
                 "issues": "https://github.com/hamcrest/hamcrest-php/issues",
                 "source": "https://github.com/hamcrest/hamcrest-php/tree/v2.0.1"
@@ -7748,9 +7207,7 @@
                 }
             },
             "notification-url": "https://packagist.org/downloads/",
-            "license": [
-                "MIT"
-            ],
+            "license": ["MIT"],
             "authors": [
                 {
                     "name": "Alessandro Lai",
@@ -7758,12 +7215,7 @@
                 }
             ],
             "description": "A library to get pretty versions strings of installed dependencies",
-            "keywords": [
-                "composer",
-                "package",
-                "release",
-                "versions"
-            ],
+            "keywords": ["composer", "package", "release", "versions"],
             "support": {
                 "issues": "https://github.com/Jean85/pretty-package-versions/issues",
                 "source": "https://github.com/Jean85/pretty-package-versions/tree/2.0.5"
@@ -7801,9 +7253,7 @@
                     "dev-master": "1.x-dev"
                 },
                 "laravel": {
-                    "providers": [
-                        "Laravel\\Breeze\\BreezeServiceProvider"
-                    ]
+                    "providers": ["Laravel\\Breeze\\BreezeServiceProvider"]
                 }
             },
             "autoload": {
@@ -7812,9 +7262,7 @@
                 }
             },
             "notification-url": "https://packagist.org/downloads/",
-            "license": [
-                "MIT"
-            ],
+            "license": ["MIT"],
             "authors": [
                 {
                     "name": "Taylor Otwell",
@@ -7822,10 +7270,7 @@
                 }
             ],
             "description": "Minimal Laravel authentication scaffolding with Blade and Tailwind.",
-            "keywords": [
-                "auth",
-                "laravel"
-            ],
+            "keywords": ["auth", "laravel"],
             "support": {
                 "issues": "https://github.com/laravel/breeze/issues",
                 "source": "https://github.com/laravel/breeze"
@@ -7862,9 +7307,7 @@
                 "nunomaduro/termwind": "^1.15.1",
                 "pestphp/pest": "^2.4.0"
             },
-            "bin": [
-                "builds/pint"
-            ],
+            "bin": ["builds/pint"],
             "type": "project",
             "autoload": {
                 "psr-4": {
@@ -7874,9 +7317,7 @@
                 }
             },
             "notification-url": "https://packagist.org/downloads/",
-            "license": [
-                "MIT"
-            ],
+            "license": ["MIT"],
             "authors": [
                 {
                     "name": "Nuno Maduro",
@@ -7885,13 +7326,7 @@
             ],
             "description": "An opinionated code formatter for PHP.",
             "homepage": "https://laravel.com",
-            "keywords": [
-                "format",
-                "formatter",
-                "lint",
-                "linter",
-                "php"
-            ],
+            "keywords": ["format", "formatter", "lint", "linter", "php"],
             "support": {
                 "issues": "https://github.com/laravel/pint/issues",
                 "source": "https://github.com/laravel/pint"
@@ -7923,18 +7358,14 @@
                 "orchestra/testbench": "^6.0|^7.0|^8.0",
                 "phpstan/phpstan": "^1.10"
             },
-            "bin": [
-                "bin/sail"
-            ],
+            "bin": ["bin/sail"],
             "type": "library",
             "extra": {
                 "branch-alias": {
                     "dev-master": "1.x-dev"
                 },
                 "laravel": {
-                    "providers": [
-                        "Laravel\\Sail\\SailServiceProvider"
-                    ]
+                    "providers": ["Laravel\\Sail\\SailServiceProvider"]
                 }
             },
             "autoload": {
@@ -7943,9 +7374,7 @@
                 }
             },
             "notification-url": "https://packagist.org/downloads/",
-            "license": [
-                "MIT"
-            ],
+            "license": ["MIT"],
             "authors": [
                 {
                     "name": "Taylor Otwell",
@@ -7953,10 +7382,7 @@
                 }
             ],
             "description": "Docker files for running a basic Laravel application.",
-            "keywords": [
-                "docker",
-                "laravel"
-            ],
+            "keywords": ["docker", "laravel"],
             "support": {
                 "issues": "https://github.com/laravel/sail/issues",
                 "source": "https://github.com/laravel/sail"
@@ -8000,9 +7426,7 @@
                 }
             },
             "notification-url": "https://packagist.org/downloads/",
-            "license": [
-                "BSD-3-Clause"
-            ],
+            "license": ["BSD-3-Clause"],
             "authors": [
                 {
                     "name": "Pádraic Brady",
@@ -8063,17 +7487,13 @@
             },
             "type": "library",
             "autoload": {
-                "files": [
-                    "src/DeepCopy/deep_copy.php"
-                ],
+                "files": ["src/DeepCopy/deep_copy.php"],
                 "psr-4": {
                     "DeepCopy\\": "src/DeepCopy/"
                 }
             },
             "notification-url": "https://packagist.org/downloads/",
-            "license": [
-                "MIT"
-            ],
+            "license": ["MIT"],
             "description": "Create deep copies (clones) of your objects",
             "keywords": [
                 "clone",
@@ -8140,17 +7560,13 @@
                 }
             },
             "autoload": {
-                "files": [
-                    "./src/Adapters/Phpunit/Autoload.php"
-                ],
+                "files": ["./src/Adapters/Phpunit/Autoload.php"],
                 "psr-4": {
                     "NunoMaduro\\Collision\\": "src/"
                 }
             },
             "notification-url": "https://packagist.org/downloads/",
-            "license": [
-                "MIT"
-            ],
+            "license": ["MIT"],
             "authors": [
                 {
                     "name": "Nuno Maduro",
@@ -8231,9 +7647,7 @@
                     "dev-master": "2.0-dev"
                 },
                 "phpstan": {
-                    "includes": [
-                        "extension.neon"
-                    ]
+                    "includes": ["extension.neon"]
                 }
             },
             "autoload": {
@@ -8242,9 +7656,7 @@
                 }
             },
             "notification-url": "https://packagist.org/downloads/",
-            "license": [
-                "MIT"
-            ],
+            "license": ["MIT"],
             "authors": [
                 {
                     "name": "Nuno Maduro",
@@ -8317,9 +7729,7 @@
                 "pestphp/pest-dev-tools": "^2.6.0",
                 "symfony/process": "^6.2.8"
             },
-            "bin": [
-                "bin/pest"
-            ],
+            "bin": ["bin/pest"],
             "type": "library",
             "extra": {
                 "pest": {
@@ -8342,18 +7752,13 @@
                 }
             },
             "autoload": {
-                "files": [
-                    "src/Functions.php",
-                    "src/Pest.php"
-                ],
+                "files": ["src/Functions.php", "src/Pest.php"],
                 "psr-4": {
                     "Pest\\": "src/"
                 }
             },
             "notification-url": "https://packagist.org/downloads/",
-            "license": [
-                "MIT"
-            ],
+            "license": ["MIT"],
             "authors": [
                 {
                     "name": "Nuno Maduro",
@@ -8361,14 +7766,7 @@
                 }
             ],
             "description": "An elegant PHP Testing Framework.",
-            "keywords": [
-                "framework",
-                "pest",
-                "php",
-                "test",
-                "testing",
-                "unit"
-            ],
+            "keywords": ["framework", "pest", "php", "test", "testing", "unit"],
             "support": {
                 "issues": "https://github.com/pestphp/pest/issues",
                 "source": "https://github.com/pestphp/pest/tree/v2.5.3"
@@ -8421,9 +7819,7 @@
                 }
             },
             "notification-url": "https://packagist.org/downloads/",
-            "license": [
-                "MIT"
-            ],
+            "license": ["MIT"],
             "description": "The Pest plugin manager",
             "keywords": [
                 "framework",
@@ -8480,17 +7876,13 @@
             },
             "type": "library",
             "autoload": {
-                "files": [
-                    "src/Autoload.php"
-                ],
+                "files": ["src/Autoload.php"],
                 "psr-4": {
                     "Pest\\Arch\\": "src/"
                 }
             },
             "notification-url": "https://packagist.org/downloads/",
-            "license": [
-                "MIT"
-            ],
+            "license": ["MIT"],
             "description": "The Arch plugin for Pest PHP.",
             "keywords": [
                 "arch",
@@ -8545,23 +7937,17 @@
             "type": "library",
             "extra": {
                 "laravel": {
-                    "providers": [
-                        "Pest\\Laravel\\PestServiceProvider"
-                    ]
+                    "providers": ["Pest\\Laravel\\PestServiceProvider"]
                 }
             },
             "autoload": {
-                "files": [
-                    "src/Autoload.php"
-                ],
+                "files": ["src/Autoload.php"],
                 "psr-4": {
                     "Pest\\Laravel\\": "src/"
                 }
             },
             "notification-url": "https://packagist.org/downloads/",
-            "license": [
-                "MIT"
-            ],
+            "license": ["MIT"],
             "description": "The Pest Laravel Plugin",
             "keywords": [
                 "framework",
@@ -8615,14 +8001,10 @@
                 }
             },
             "autoload": {
-                "classmap": [
-                    "src/"
-                ]
+                "classmap": ["src/"]
             },
             "notification-url": "https://packagist.org/downloads/",
-            "license": [
-                "BSD-3-Clause"
-            ],
+            "license": ["BSD-3-Clause"],
             "authors": [
                 {
                     "name": "Arne Blankerts",
@@ -8666,14 +8048,10 @@
             },
             "type": "library",
             "autoload": {
-                "classmap": [
-                    "src/"
-                ]
+                "classmap": ["src/"]
             },
             "notification-url": "https://packagist.org/downloads/",
-            "license": [
-                "BSD-3-Clause"
-            ],
+            "license": ["BSD-3-Clause"],
             "authors": [
                 {
                     "name": "Arne Blankerts",
@@ -8735,9 +8113,7 @@
                 }
             },
             "notification-url": "https://packagist.org/downloads/",
-            "license": [
-                "MIT"
-            ],
+            "license": ["MIT"],
             "authors": [
                 {
                     "name": "Mike van Riel",
@@ -8806,9 +8182,7 @@
                 }
             },
             "notification-url": "https://packagist.org/downloads/",
-            "license": [
-                "GPL-2.0-or-later"
-            ],
+            "license": ["GPL-2.0-or-later"],
             "authors": [
                 {
                     "name": "The phpMyAdmin Team",
@@ -8862,25 +8236,15 @@
             "conflict": {
                 "phpstan/phpstan-shim": "*"
             },
-            "bin": [
-                "phpstan",
-                "phpstan.phar"
-            ],
+            "bin": ["phpstan", "phpstan.phar"],
             "type": "library",
             "autoload": {
-                "files": [
-                    "bootstrap.php"
-                ]
+                "files": ["bootstrap.php"]
             },
             "notification-url": "https://packagist.org/downloads/",
-            "license": [
-                "MIT"
-            ],
+            "license": ["MIT"],
             "description": "PHPStan - PHP Static Analysis Tool",
-            "keywords": [
-                "dev",
-                "static analysis"
-            ],
+            "keywords": ["dev", "static analysis"],
             "support": {
                 "docs": "https://phpstan.org/user-guide/getting-started",
                 "forum": "https://github.com/phpstan/phpstan/discussions",
@@ -8947,14 +8311,10 @@
                 }
             },
             "autoload": {
-                "classmap": [
-                    "src/"
-                ]
+                "classmap": ["src/"]
             },
             "notification-url": "https://packagist.org/downloads/",
-            "license": [
-                "BSD-3-Clause"
-            ],
+            "license": ["BSD-3-Clause"],
             "authors": [
                 {
                     "name": "Sebastian Bergmann",
@@ -8964,11 +8324,7 @@
             ],
             "description": "Library that provides collection, processing, and rendering functionality for PHP code coverage information.",
             "homepage": "https://github.com/sebastianbergmann/php-code-coverage",
-            "keywords": [
-                "coverage",
-                "testing",
-                "xunit"
-            ],
+            "keywords": ["coverage", "testing", "xunit"],
             "support": {
                 "issues": "https://github.com/sebastianbergmann/php-code-coverage/issues",
                 "security": "https://github.com/sebastianbergmann/php-code-coverage/security/policy",
@@ -9009,14 +8365,10 @@
                 }
             },
             "autoload": {
-                "classmap": [
-                    "src/"
-                ]
+                "classmap": ["src/"]
             },
             "notification-url": "https://packagist.org/downloads/",
-            "license": [
-                "BSD-3-Clause"
-            ],
+            "license": ["BSD-3-Clause"],
             "authors": [
                 {
                     "name": "Sebastian Bergmann",
@@ -9026,10 +8378,7 @@
             ],
             "description": "FilterIterator implementation that filters files based on a list of suffixes.",
             "homepage": "https://github.com/sebastianbergmann/php-file-iterator/",
-            "keywords": [
-                "filesystem",
-                "iterator"
-            ],
+            "keywords": ["filesystem", "iterator"],
             "support": {
                 "issues": "https://github.com/sebastianbergmann/php-file-iterator/issues",
                 "source": "https://github.com/sebastianbergmann/php-file-iterator/tree/4.0.1"
@@ -9073,14 +8422,10 @@
                 }
             },
             "autoload": {
-                "classmap": [
-                    "src/"
-                ]
+                "classmap": ["src/"]
             },
             "notification-url": "https://packagist.org/downloads/",
-            "license": [
-                "BSD-3-Clause"
-            ],
+            "license": ["BSD-3-Clause"],
             "authors": [
                 {
                     "name": "Sebastian Bergmann",
@@ -9090,9 +8435,7 @@
             ],
             "description": "Invoke callables with a timeout",
             "homepage": "https://github.com/sebastianbergmann/php-invoker/",
-            "keywords": [
-                "process"
-            ],
+            "keywords": ["process"],
             "support": {
                 "issues": "https://github.com/sebastianbergmann/php-invoker/issues",
                 "source": "https://github.com/sebastianbergmann/php-invoker/tree/4.0.0"
@@ -9132,14 +8475,10 @@
                 }
             },
             "autoload": {
-                "classmap": [
-                    "src/"
-                ]
+                "classmap": ["src/"]
             },
             "notification-url": "https://packagist.org/downloads/",
-            "license": [
-                "BSD-3-Clause"
-            ],
+            "license": ["BSD-3-Clause"],
             "authors": [
                 {
                     "name": "Sebastian Bergmann",
@@ -9149,9 +8488,7 @@
             ],
             "description": "Simple template engine.",
             "homepage": "https://github.com/sebastianbergmann/php-text-template/",
-            "keywords": [
-                "template"
-            ],
+            "keywords": ["template"],
             "support": {
                 "issues": "https://github.com/sebastianbergmann/php-text-template/issues",
                 "source": "https://github.com/sebastianbergmann/php-text-template/tree/3.0.0"
@@ -9191,14 +8528,10 @@
                 }
             },
             "autoload": {
-                "classmap": [
-                    "src/"
-                ]
+                "classmap": ["src/"]
             },
             "notification-url": "https://packagist.org/downloads/",
-            "license": [
-                "BSD-3-Clause"
-            ],
+            "license": ["BSD-3-Clause"],
             "authors": [
                 {
                     "name": "Sebastian Bergmann",
@@ -9208,9 +8541,7 @@
             ],
             "description": "Utility class for timing",
             "homepage": "https://github.com/sebastianbergmann/php-timer/",
-            "keywords": [
-                "timer"
-            ],
+            "keywords": ["timer"],
             "support": {
                 "issues": "https://github.com/sebastianbergmann/php-timer/issues",
                 "source": "https://github.com/sebastianbergmann/php-timer/tree/6.0.0"
@@ -9268,9 +8599,7 @@
             "suggest": {
                 "ext-soap": "To be able to generate mocks based on WSDL files"
             },
-            "bin": [
-                "phpunit"
-            ],
+            "bin": ["phpunit"],
             "type": "library",
             "extra": {
                 "branch-alias": {
@@ -9278,17 +8607,11 @@
                 }
             },
             "autoload": {
-                "files": [
-                    "src/Framework/Assert/Functions.php"
-                ],
-                "classmap": [
-                    "src/"
-                ]
+                "files": ["src/Framework/Assert/Functions.php"],
+                "classmap": ["src/"]
             },
             "notification-url": "https://packagist.org/downloads/",
-            "license": [
-                "BSD-3-Clause"
-            ],
+            "license": ["BSD-3-Clause"],
             "authors": [
                 {
                     "name": "Sebastian Bergmann",
@@ -9298,11 +8621,7 @@
             ],
             "description": "The PHP Unit Testing framework.",
             "homepage": "https://phpunit.de/",
-            "keywords": [
-                "phpunit",
-                "testing",
-                "xunit"
-            ],
+            "keywords": ["phpunit", "testing", "xunit"],
             "support": {
                 "issues": "https://github.com/sebastianbergmann/phpunit/issues",
                 "security": "https://github.com/sebastianbergmann/phpunit/security/policy",
@@ -9351,14 +8670,10 @@
                 }
             },
             "autoload": {
-                "classmap": [
-                    "src/"
-                ]
+                "classmap": ["src/"]
             },
             "notification-url": "https://packagist.org/downloads/",
-            "license": [
-                "BSD-3-Clause"
-            ],
+            "license": ["BSD-3-Clause"],
             "authors": [
                 {
                     "name": "Sebastian Bergmann",
@@ -9407,14 +8722,10 @@
                 }
             },
             "autoload": {
-                "classmap": [
-                    "src/"
-                ]
+                "classmap": ["src/"]
             },
             "notification-url": "https://packagist.org/downloads/",
-            "license": [
-                "BSD-3-Clause"
-            ],
+            "license": ["BSD-3-Clause"],
             "authors": [
                 {
                     "name": "Sebastian Bergmann",
@@ -9463,14 +8774,10 @@
                 }
             },
             "autoload": {
-                "classmap": [
-                    "src/"
-                ]
+                "classmap": ["src/"]
             },
             "notification-url": "https://packagist.org/downloads/",
-            "license": [
-                "BSD-3-Clause"
-            ],
+            "license": ["BSD-3-Clause"],
             "authors": [
                 {
                     "name": "Sebastian Bergmann",
@@ -9522,14 +8829,10 @@
                 }
             },
             "autoload": {
-                "classmap": [
-                    "src/"
-                ]
+                "classmap": ["src/"]
             },
             "notification-url": "https://packagist.org/downloads/",
-            "license": [
-                "BSD-3-Clause"
-            ],
+            "license": ["BSD-3-Clause"],
             "authors": [
                 {
                     "name": "Sebastian Bergmann",
@@ -9550,11 +8853,7 @@
             ],
             "description": "Provides the functionality to compare PHP values for equality",
             "homepage": "https://github.com/sebastianbergmann/comparator",
-            "keywords": [
-                "comparator",
-                "compare",
-                "equality"
-            ],
+            "keywords": ["comparator", "compare", "equality"],
             "support": {
                 "issues": "https://github.com/sebastianbergmann/comparator/issues",
                 "source": "https://github.com/sebastianbergmann/comparator/tree/5.0.0"
@@ -9595,14 +8894,10 @@
                 }
             },
             "autoload": {
-                "classmap": [
-                    "src/"
-                ]
+                "classmap": ["src/"]
             },
             "notification-url": "https://packagist.org/downloads/",
-            "license": [
-                "BSD-3-Clause"
-            ],
+            "license": ["BSD-3-Clause"],
             "authors": [
                 {
                     "name": "Sebastian Bergmann",
@@ -9652,14 +8947,10 @@
                 }
             },
             "autoload": {
-                "classmap": [
-                    "src/"
-                ]
+                "classmap": ["src/"]
             },
             "notification-url": "https://packagist.org/downloads/",
-            "license": [
-                "BSD-3-Clause"
-            ],
+            "license": ["BSD-3-Clause"],
             "authors": [
                 {
                     "name": "Sebastian Bergmann",
@@ -9672,12 +8963,7 @@
             ],
             "description": "Diff implementation",
             "homepage": "https://github.com/sebastianbergmann/diff",
-            "keywords": [
-                "diff",
-                "udiff",
-                "unidiff",
-                "unified diff"
-            ],
+            "keywords": ["diff", "udiff", "unidiff", "unified diff"],
             "support": {
                 "issues": "https://github.com/sebastianbergmann/diff/issues",
                 "security": "https://github.com/sebastianbergmann/diff/security/policy",
@@ -9721,14 +9007,10 @@
                 }
             },
             "autoload": {
-                "classmap": [
-                    "src/"
-                ]
+                "classmap": ["src/"]
             },
             "notification-url": "https://packagist.org/downloads/",
-            "license": [
-                "BSD-3-Clause"
-            ],
+            "license": ["BSD-3-Clause"],
             "authors": [
                 {
                     "name": "Sebastian Bergmann",
@@ -9737,11 +9019,7 @@
             ],
             "description": "Provides functionality to handle HHVM/PHP environments",
             "homepage": "https://github.com/sebastianbergmann/environment",
-            "keywords": [
-                "Xdebug",
-                "environment",
-                "hhvm"
-            ],
+            "keywords": ["Xdebug", "environment", "hhvm"],
             "support": {
                 "issues": "https://github.com/sebastianbergmann/environment/issues",
                 "security": "https://github.com/sebastianbergmann/environment/security/policy",
@@ -9784,14 +9062,10 @@
                 }
             },
             "autoload": {
-                "classmap": [
-                    "src/"
-                ]
+                "classmap": ["src/"]
             },
             "notification-url": "https://packagist.org/downloads/",
-            "license": [
-                "BSD-3-Clause"
-            ],
+            "license": ["BSD-3-Clause"],
             "authors": [
                 {
                     "name": "Sebastian Bergmann",
@@ -9816,10 +9090,7 @@
             ],
             "description": "Provides the functionality to export PHP variables for visualization",
             "homepage": "https://www.github.com/sebastianbergmann/exporter",
-            "keywords": [
-                "export",
-                "exporter"
-            ],
+            "keywords": ["export", "exporter"],
             "support": {
                 "issues": "https://github.com/sebastianbergmann/exporter/issues",
                 "source": "https://github.com/sebastianbergmann/exporter/tree/5.0.0"
@@ -9862,14 +9133,10 @@
                 }
             },
             "autoload": {
-                "classmap": [
-                    "src/"
-                ]
+                "classmap": ["src/"]
             },
             "notification-url": "https://packagist.org/downloads/",
-            "license": [
-                "BSD-3-Clause"
-            ],
+            "license": ["BSD-3-Clause"],
             "authors": [
                 {
                     "name": "Sebastian Bergmann",
@@ -9878,9 +9145,7 @@
             ],
             "description": "Snapshotting of global state",
             "homepage": "http://www.github.com/sebastianbergmann/global-state",
-            "keywords": [
-                "global state"
-            ],
+            "keywords": ["global state"],
             "support": {
                 "issues": "https://github.com/sebastianbergmann/global-state/issues",
                 "source": "https://github.com/sebastianbergmann/global-state/tree/6.0.0"
@@ -9921,14 +9186,10 @@
                 }
             },
             "autoload": {
-                "classmap": [
-                    "src/"
-                ]
+                "classmap": ["src/"]
             },
             "notification-url": "https://packagist.org/downloads/",
-            "license": [
-                "BSD-3-Clause"
-            ],
+            "license": ["BSD-3-Clause"],
             "authors": [
                 {
                     "name": "Sebastian Bergmann",
@@ -9979,14 +9240,10 @@
                 }
             },
             "autoload": {
-                "classmap": [
-                    "src/"
-                ]
+                "classmap": ["src/"]
             },
             "notification-url": "https://packagist.org/downloads/",
-            "license": [
-                "BSD-3-Clause"
-            ],
+            "license": ["BSD-3-Clause"],
             "authors": [
                 {
                     "name": "Sebastian Bergmann",
@@ -10034,14 +9291,10 @@
                 }
             },
             "autoload": {
-                "classmap": [
-                    "src/"
-                ]
+                "classmap": ["src/"]
             },
             "notification-url": "https://packagist.org/downloads/",
-            "license": [
-                "BSD-3-Clause"
-            ],
+            "license": ["BSD-3-Clause"],
             "authors": [
                 {
                     "name": "Sebastian Bergmann",
@@ -10089,14 +9342,10 @@
                 }
             },
             "autoload": {
-                "classmap": [
-                    "src/"
-                ]
+                "classmap": ["src/"]
             },
             "notification-url": "https://packagist.org/downloads/",
-            "license": [
-                "BSD-3-Clause"
-            ],
+            "license": ["BSD-3-Clause"],
             "authors": [
                 {
                     "name": "Sebastian Bergmann",
@@ -10152,14 +9401,10 @@
                 }
             },
             "autoload": {
-                "classmap": [
-                    "src/"
-                ]
+                "classmap": ["src/"]
             },
             "notification-url": "https://packagist.org/downloads/",
-            "license": [
-                "BSD-3-Clause"
-            ],
+            "license": ["BSD-3-Clause"],
             "authors": [
                 {
                     "name": "Sebastian Bergmann",
@@ -10205,14 +9450,10 @@
                 }
             },
             "autoload": {
-                "classmap": [
-                    "src/"
-                ]
+                "classmap": ["src/"]
             },
             "notification-url": "https://packagist.org/downloads/",
-            "license": [
-                "BSD-3-Clause"
-            ],
+            "license": ["BSD-3-Clause"],
             "authors": [
                 {
                     "name": "Sebastian Bergmann",
@@ -10264,9 +9505,7 @@
                 }
             },
             "notification-url": "https://packagist.org/downloads/",
-            "license": [
-                "MIT"
-            ],
+            "license": ["MIT"],
             "authors": [
                 {
                     "name": "Freek Van de Herten",
@@ -10277,10 +9516,7 @@
             ],
             "description": "A better backtrace",
             "homepage": "https://github.com/spatie/backtrace",
-            "keywords": [
-                "Backtrace",
-                "spatie"
-            ],
+            "keywords": ["Backtrace", "spatie"],
             "support": {
                 "source": "https://github.com/spatie/backtrace/tree/1.4.0"
             },
@@ -10334,25 +9570,16 @@
                 }
             },
             "autoload": {
-                "files": [
-                    "src/helpers.php"
-                ],
+                "files": ["src/helpers.php"],
                 "psr-4": {
                     "Spatie\\FlareClient\\": "src"
                 }
             },
             "notification-url": "https://packagist.org/downloads/",
-            "license": [
-                "MIT"
-            ],
+            "license": ["MIT"],
             "description": "Send PHP errors to Flare",
             "homepage": "https://github.com/spatie/flare-client-php",
-            "keywords": [
-                "exception",
-                "flare",
-                "reporting",
-                "spatie"
-            ],
+            "keywords": ["exception", "flare", "reporting", "spatie"],
             "support": {
                 "issues": "https://github.com/spatie/flare-client-php/issues",
                 "source": "https://github.com/spatie/flare-client-php/tree/1.3.6"
@@ -10416,9 +9643,7 @@
                 }
             },
             "notification-url": "https://packagist.org/downloads/",
-            "license": [
-                "MIT"
-            ],
+            "license": ["MIT"],
             "authors": [
                 {
                     "name": "Spatie",
@@ -10428,12 +9653,7 @@
             ],
             "description": "A beautiful error page for PHP applications.",
             "homepage": "https://flareapp.io/ignition",
-            "keywords": [
-                "error",
-                "flare",
-                "laravel",
-                "page"
-            ],
+            "keywords": ["error", "flare", "laravel", "page"],
             "support": {
                 "docs": "https://flareapp.io/docs/ignition-for-laravel/introduction",
                 "forum": "https://twitter.com/flareappio",
@@ -10500,17 +9720,13 @@
                 }
             },
             "autoload": {
-                "files": [
-                    "src/helpers.php"
-                ],
+                "files": ["src/helpers.php"],
                 "psr-4": {
                     "Spatie\\LaravelIgnition\\": "src"
                 }
             },
             "notification-url": "https://packagist.org/downloads/",
-            "license": [
-                "MIT"
-            ],
+            "license": ["MIT"],
             "authors": [
                 {
                     "name": "Spatie",
@@ -10520,12 +9736,7 @@
             ],
             "description": "A beautiful error page for Laravel applications.",
             "homepage": "https://flareapp.io/ignition",
-            "keywords": [
-                "error",
-                "flare",
-                "laravel",
-                "page"
-            ],
+            "keywords": ["error", "flare", "laravel", "page"],
             "support": {
                 "docs": "https://flareapp.io/docs/ignition-for-laravel/introduction",
                 "forum": "https://twitter.com/flareappio",
@@ -10567,22 +9778,16 @@
             "suggest": {
                 "symfony/console": "For validating YAML files using the lint command"
             },
-            "bin": [
-                "Resources/bin/yaml-lint"
-            ],
+            "bin": ["Resources/bin/yaml-lint"],
             "type": "library",
             "autoload": {
                 "psr-4": {
                     "Symfony\\Component\\Yaml\\": ""
                 },
-                "exclude-from-classmap": [
-                    "/Tests/"
-                ]
+                "exclude-from-classmap": ["/Tests/"]
             },
             "notification-url": "https://packagist.org/downloads/",
-            "license": [
-                "MIT"
-            ],
+            "license": ["MIT"],
             "authors": [
                 {
                     "name": "Fabien Potencier",
@@ -10646,9 +9851,7 @@
                 }
             },
             "notification-url": "https://packagist.org/downloads/",
-            "license": [
-                "MIT"
-            ],
+            "license": ["MIT"],
             "authors": [
                 {
                     "name": "Ni Shi",
@@ -10695,14 +9898,10 @@
             },
             "type": "library",
             "autoload": {
-                "classmap": [
-                    "src/"
-                ]
+                "classmap": ["src/"]
             },
             "notification-url": "https://packagist.org/downloads/",
-            "license": [
-                "BSD-3-Clause"
-            ],
+            "license": ["BSD-3-Clause"],
             "authors": [
                 {
                     "name": "Arne Blankerts",
diff --git a/crowdin.yml b/crowdin.yml
index 6bc109d8dff..766590747cc 100644
--- a/crowdin.yml
+++ b/crowdin.yml
@@ -1,4 +1,4 @@
 preserve_hierarchy: true
 files:
-  - source: /lang/en_US/**/*.php
-    translation: /lang/%locale_with_underscore%/**/%original_file_name%
+    - source: /lang/en_US/**/*.php
+      translation: /lang/%locale_with_underscore%/**/%original_file_name%
diff --git a/docker-compose.ci.yml b/docker-compose.ci.yml
index dcb43896d09..34d13dccef4 100644
--- a/docker-compose.ci.yml
+++ b/docker-compose.ci.yml
@@ -1,24 +1,24 @@
 services:
-  workspace:
-    image: performave/convoy-workspace:latest
-    tty: true
-    volumes:
-      - .:/var/www/
-  redis:
-    image: redis:7.0.4-alpine3.16
-    restart: unless-stopped
-    command: redis-server --save 20 1 --loglevel notice --requirepass ${REDIS_PASSWORD}
-    expose:
-      - 6379
-  database:
-    image: mysql:8.0.29
-    restart: unless-stopped
-    volumes:
-      - ./dockerfiles/mysql/data:/var/lib/mysql/
-    expose:
-      - 3306
-    environment:
-      MYSQL_ROOT_PASSWORD: ${DB_ROOT_PASSWORD}
-      MYSQL_DATABASE: ${DB_DATABASE}
-      MYSQL_USER: ${DB_USERNAME}
-      MYSQL_PASSWORD: ${DB_PASSWORD}
\ No newline at end of file
+    workspace:
+        image: performave/convoy-workspace:latest
+        tty: true
+        volumes:
+            - .:/var/www/
+    redis:
+        image: redis:7.0.4-alpine3.16
+        restart: unless-stopped
+        command: redis-server --save 20 1 --loglevel notice --requirepass ${REDIS_PASSWORD}
+        expose:
+            - 6379
+    database:
+        image: mysql:8.0.29
+        restart: unless-stopped
+        volumes:
+            - ./dockerfiles/mysql/data:/var/lib/mysql/
+        expose:
+            - 3306
+        environment:
+            MYSQL_ROOT_PASSWORD: ${DB_ROOT_PASSWORD}
+            MYSQL_DATABASE: ${DB_DATABASE}
+            MYSQL_USER: ${DB_USERNAME}
+            MYSQL_PASSWORD: ${DB_PASSWORD}
diff --git a/docker-compose.yml b/docker-compose.yml
index f92f7b80a82..6686c16069f 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -1,78 +1,78 @@
 services:
-  caddy:
-    build:
-      context: ./dockerfiles/caddy
-      args:
-        - APP_ENV=$APP_ENV
-        - APP_URL=$APP_URL
-    restart: unless-stopped
-    volumes:
-      - .:/var/www/
-      - ./dockerfiles/caddy/data/config:/config
-      - ./dockerfiles/caddy/data/data:/data
-    ports:
-      - 80:80
-      - 443:443
-    depends_on:
-      - php
-    env_file: .env
-  php:
-    build:
-      context: ./dockerfiles/php
-      args:
-        - APP_ENV=$APP_ENV
-        - PHP_XDEBUG=$PHP_XDEBUG
-        - PHP_XDEBUG_MODE=$PHP_XDEBUG_MODE
-    restart: unless-stopped
-    volumes:
-       - .:/var/www/
-    expose:
-      - 9000
-    depends_on:
-      - database
-      - redis
-    env_file: .env
-    extra_hosts:
-      host.docker.internal: host-gateway
-  workspace:
-    build:
-      context: ./dockerfiles/workspace
-      args:
-        - PHP_XDEBUG=$PHP_XDEBUG
-        - PHP_XDEBUG_MODE=$PHP_XDEBUG_MODE
-    tty: true
-    ports:
-      - 1234:1234
-    volumes:
-      - .:/var/www/
-    extra_hosts:
-      host.docker.internal: host-gateway
-  redis:
-    image: redis:7.0-alpine
-    restart: unless-stopped
-    command: redis-server --save 60 1 --loglevel notice --requirepass '${REDIS_PASSWORD}'
-    ports:
-      - 6379:6379
-  workers:
-    build:
-      context: ./dockerfiles/workers
-      args:
-        - APP_ENV=$APP_ENV
-    restart: unless-stopped
-    volumes:
-      - .:/var/www/
-    depends_on:
-      - database
-      - redis
-  database:
-    image: mysql:8.0
-    restart: unless-stopped
-    volumes:
-      - ./dockerfiles/mysql/data:/var/lib/mysql/
-    ports:
-      - 3306:3306
-    environment:
-      MYSQL_ROOT_PASSWORD: ${DB_ROOT_PASSWORD}
-      MYSQL_DATABASE: ${DB_DATABASE}
-      MYSQL_USER: ${DB_USERNAME}
-      MYSQL_PASSWORD: ${DB_PASSWORD}
\ No newline at end of file
+    caddy:
+        build:
+            context: ./dockerfiles/caddy
+            args:
+                - APP_ENV=$APP_ENV
+                - APP_URL=$APP_URL
+        restart: unless-stopped
+        volumes:
+            - .:/var/www/
+            - ./dockerfiles/caddy/data/config:/config
+            - ./dockerfiles/caddy/data/data:/data
+        ports:
+            - 80:80
+            - 443:443
+        depends_on:
+            - php
+        env_file: .env
+    php:
+        build:
+            context: ./dockerfiles/php
+            args:
+                - APP_ENV=$APP_ENV
+                - PHP_XDEBUG=$PHP_XDEBUG
+                - PHP_XDEBUG_MODE=$PHP_XDEBUG_MODE
+        restart: unless-stopped
+        volumes:
+            - .:/var/www/
+        expose:
+            - 9000
+        depends_on:
+            - database
+            - redis
+        env_file: .env
+        extra_hosts:
+            host.docker.internal: host-gateway
+    workspace:
+        build:
+            context: ./dockerfiles/workspace
+            args:
+                - PHP_XDEBUG=$PHP_XDEBUG
+                - PHP_XDEBUG_MODE=$PHP_XDEBUG_MODE
+        tty: true
+        ports:
+            - 1234:1234
+        volumes:
+            - .:/var/www/
+        extra_hosts:
+            host.docker.internal: host-gateway
+    redis:
+        image: redis:7.0-alpine
+        restart: unless-stopped
+        command: redis-server --save 60 1 --loglevel notice --requirepass '${REDIS_PASSWORD}'
+        ports:
+            - 6379:6379
+    workers:
+        build:
+            context: ./dockerfiles/workers
+            args:
+                - APP_ENV=$APP_ENV
+        restart: unless-stopped
+        volumes:
+            - .:/var/www/
+        depends_on:
+            - database
+            - redis
+    database:
+        image: mysql:8.0
+        restart: unless-stopped
+        volumes:
+            - ./dockerfiles/mysql/data:/var/lib/mysql/
+        ports:
+            - 3306:3306
+        environment:
+            MYSQL_ROOT_PASSWORD: ${DB_ROOT_PASSWORD}
+            MYSQL_DATABASE: ${DB_DATABASE}
+            MYSQL_USER: ${DB_USERNAME}
+            MYSQL_PASSWORD: ${DB_PASSWORD}
diff --git a/postcss.config.js b/postcss.config.js
index 67cdf1a55fc..fef1b2256d6 100644
--- a/postcss.config.js
+++ b/postcss.config.js
@@ -3,4 +3,4 @@ module.exports = {
         tailwindcss: {},
         autoprefixer: {},
     },
-};
+}
diff --git a/resources/scripts/api/admin/addressPools/addresses/createAddress.ts b/resources/scripts/api/admin/addressPools/addresses/createAddress.ts
index 7ed4030aada..be9250f7bd5 100644
--- a/resources/scripts/api/admin/addressPools/addresses/createAddress.ts
+++ b/resources/scripts/api/admin/addressPools/addresses/createAddress.ts
@@ -1,8 +1,9 @@
+import { ipAddress, macAddress } from '@/util/validation'
+import { z } from 'zod'
+
 import { AddressInclude } from '@/api/admin/nodes/addresses/getAddresses'
-import { Address, AddressType, rawDataToAddress } from '@/api/server/getServer'
 import http from '@/api/http'
-import { z } from 'zod'
-import { ipAddress, macAddress } from '@/util/validation'
+import { Address, AddressType, rawDataToAddress } from '@/api/server/getServer'
 
 const baseSchema = z.object({
     type: z.enum(['ipv4', 'ipv6']),
@@ -24,7 +25,10 @@ const multipleAddressesSchema = z.object({
 })
 
 export const schema = z
-    .discriminatedUnion('isBulkAction', [singleAddressSchema, multipleAddressesSchema])
+    .discriminatedUnion('isBulkAction', [
+        singleAddressSchema,
+        multipleAddressesSchema,
+    ])
     .and(baseSchema)
 
 type CreateAddressParameters = z.infer<typeof schema> & {
@@ -35,7 +39,15 @@ type CreateAddressParameters = z.infer<typeof schema> & {
 
 const createAddress = async (
     poolId: number,
-    { isBulkAction, startingAddress, endingAddress, macAddress, serverId, include, ...payload }: CreateAddressParameters
+    {
+        isBulkAction,
+        startingAddress,
+        endingAddress,
+        macAddress,
+        serverId,
+        include,
+        ...payload
+    }: CreateAddressParameters
 ): Promise<Address | null> => {
     const {
         data: { data },
diff --git a/resources/scripts/api/admin/addressPools/addresses/updateAddress.ts b/resources/scripts/api/admin/addressPools/addresses/updateAddress.ts
index 5812cc66e45..7588e7122cd 100644
--- a/resources/scripts/api/admin/addressPools/addresses/updateAddress.ts
+++ b/resources/scripts/api/admin/addressPools/addresses/updateAddress.ts
@@ -1,6 +1,6 @@
-import { AddressType, rawDataToAddress } from '@/api/server/getServer'
 import { AddressInclude } from '@/api/admin/nodes/addresses/getAddresses'
 import http from '@/api/http'
+import { AddressType, rawDataToAddress } from '@/api/server/getServer'
 
 interface UpdateAddressParameters {
     address: string
diff --git a/resources/scripts/api/admin/addressPools/createAddressPool.ts b/resources/scripts/api/admin/addressPools/createAddressPool.ts
index 9a741288e16..e8052ec6a1b 100644
--- a/resources/scripts/api/admin/addressPools/createAddressPool.ts
+++ b/resources/scripts/api/admin/addressPools/createAddressPool.ts
@@ -1,12 +1,15 @@
-import http from '@/api/http'
 import { rawDataToAddressPool } from '@/api/admin/addressPools/getAddressPools'
+import http from '@/api/http'
 
 interface CreateAddressParameters {
     name: string
     nodeIds?: number[] | string[]
 }
 
-const createAddressPool = async ({ name, nodeIds }: CreateAddressParameters) => {
+const createAddressPool = async ({
+    name,
+    nodeIds,
+}: CreateAddressParameters) => {
     const {
         data: { data },
     } = await http.post('/api/admin/address-pools', {
diff --git a/resources/scripts/api/admin/addressPools/deleteAddressPool.ts b/resources/scripts/api/admin/addressPools/deleteAddressPool.ts
index 8fd25cf908f..c6a7c2beb4e 100644
--- a/resources/scripts/api/admin/addressPools/deleteAddressPool.ts
+++ b/resources/scripts/api/admin/addressPools/deleteAddressPool.ts
@@ -1,5 +1,6 @@
 import http from '@/api/http'
 
-const deleteAddressPool = (id: number) => http.delete(`/api/admin/address-pools/${id}`)
+const deleteAddressPool = (id: number) =>
+    http.delete(`/api/admin/address-pools/${id}`)
 
 export default deleteAddressPool
diff --git a/resources/scripts/api/admin/addressPools/getAddressPool.ts b/resources/scripts/api/admin/addressPools/getAddressPool.ts
index 23d11d57d8d..e8885774b27 100644
--- a/resources/scripts/api/admin/addressPools/getAddressPool.ts
+++ b/resources/scripts/api/admin/addressPools/getAddressPool.ts
@@ -1,5 +1,5 @@
-import http from '@/api/http'
 import { rawDataToAddressPool } from '@/api/admin/addressPools/getAddressPools'
+import http from '@/api/http'
 
 const getAddressPool = async (id: number) => {
     const {
diff --git a/resources/scripts/api/admin/addressPools/getAddressPools.ts b/resources/scripts/api/admin/addressPools/getAddressPools.ts
index 16859499095..3ca1fc7d64c 100644
--- a/resources/scripts/api/admin/addressPools/getAddressPools.ts
+++ b/resources/scripts/api/admin/addressPools/getAddressPools.ts
@@ -1,4 +1,4 @@
-import http, { getPaginationSet, PaginatedResult } from '@/api/http'
+import http, { PaginatedResult, getPaginationSet } from '@/api/http'
 
 export interface AddressPool {
     id: number
@@ -15,7 +15,11 @@ export interface QueryParams {
 
 export type AddressPoolResponse = PaginatedResult<AddressPool>
 
-const getAddressPools = async ({ query, page, perPage = 50 }: QueryParams): Promise<AddressPoolResponse> => {
+const getAddressPools = async ({
+    query,
+    page,
+    perPage = 50,
+}: QueryParams): Promise<AddressPoolResponse> => {
     const { data } = await http.get('/api/admin/address-pools', {
         params: {
             'filter[*]': query,
diff --git a/resources/scripts/api/admin/addressPools/getAddresses.ts b/resources/scripts/api/admin/addressPools/getAddresses.ts
index c1809cdb873..3b77fb24111 100644
--- a/resources/scripts/api/admin/addressPools/getAddresses.ts
+++ b/resources/scripts/api/admin/addressPools/getAddresses.ts
@@ -1,4 +1,7 @@
-import { AddressInclude, AddressResponse } from '@/api/admin/nodes/addresses/getAddresses'
+import {
+    AddressInclude,
+    AddressResponse,
+} from '@/api/admin/nodes/addresses/getAddresses'
 import http, { getPaginationSet } from '@/api/http'
 import { rawDataToAddress } from '@/api/server/getServer'
 
@@ -13,14 +16,17 @@ const getAddresses = async (
     addressPoolId: number,
     { query, page, perPage = 50, include }: QueryParams
 ): Promise<AddressResponse> => {
-    const { data } = await http.get(`/api/admin/address-pools/${addressPoolId}/addresses`, {
-        params: {
-            'filter[*]': query,
-            page,
-            'per_page': perPage,
-            'include': include?.join(','),
-        },
-    })
+    const { data } = await http.get(
+        `/api/admin/address-pools/${addressPoolId}/addresses`,
+        {
+            params: {
+                'filter[*]': query,
+                page,
+                'per_page': perPage,
+                'include': include?.join(','),
+            },
+        }
+    )
 
     return {
         items: data.data.map(rawDataToAddress),
diff --git a/resources/scripts/api/admin/addressPools/updateAddressPool.ts b/resources/scripts/api/admin/addressPools/updateAddressPool.ts
index 8b8e44540d8..64457c5721e 100644
--- a/resources/scripts/api/admin/addressPools/updateAddressPool.ts
+++ b/resources/scripts/api/admin/addressPools/updateAddressPool.ts
@@ -1,11 +1,14 @@
-import http from '@/api/http'
 import { rawDataToAddressPool } from '@/api/admin/addressPools/getAddressPools'
+import http from '@/api/http'
 
 interface UpdateAddressPoolParameters {
     name: string
 }
 
-const updateAddressPool = async (id: number, payload: UpdateAddressPoolParameters) => {
+const updateAddressPool = async (
+    id: number,
+    payload: UpdateAddressPoolParameters
+) => {
     const {
         data: { data },
     } = await http.put(`/api/admin/address-pools/${id}`, payload)
diff --git a/resources/scripts/api/admin/addressPools/useAddressPoolSWR.ts b/resources/scripts/api/admin/addressPools/useAddressPoolSWR.ts
index 791462c600b..aecc0e881de 100644
--- a/resources/scripts/api/admin/addressPools/useAddressPoolSWR.ts
+++ b/resources/scripts/api/admin/addressPools/useAddressPoolSWR.ts
@@ -1,8 +1,9 @@
-import useSWR, { Key, SWRResponse } from 'swr'
-import { useMatch } from 'react-router-dom'
 import { Optimistic } from '@/lib/swr'
-import { AddressPool } from '@/api/admin/addressPools/getAddressPools'
+import { useMatch } from 'react-router-dom'
+import useSWR, { Key, SWRResponse } from 'swr'
+
 import getAddressPool from '@/api/admin/addressPools/getAddressPool'
+import { AddressPool } from '@/api/admin/addressPools/getAddressPools'
 
 export const getKey = (id: number): Key => ['admin.address-pools', id]
 
diff --git a/resources/scripts/api/admin/addressPools/useAddressPoolsSWR.ts b/resources/scripts/api/admin/addressPools/useAddressPoolsSWR.ts
index c6094d7bcce..40a3e4cb3e5 100644
--- a/resources/scripts/api/admin/addressPools/useAddressPoolsSWR.ts
+++ b/resources/scripts/api/admin/addressPools/useAddressPoolsSWR.ts
@@ -1,13 +1,19 @@
-import getAddressPools, { AddressPoolResponse, QueryParams } from '@/api/admin/addressPools/getAddressPools'
 import useSWR from 'swr'
 
+import getAddressPools, {
+    AddressPoolResponse,
+    QueryParams,
+} from '@/api/admin/addressPools/getAddressPools'
+
 const useAddressPoolsSWR = ({ page, query, ...params }: QueryParams) => {
-    return useSWR<AddressPoolResponse>(['admin.address-pools', page, query], () =>
-        getAddressPools({
-            page,
-            query,
-            ...params,
-        })
+    return useSWR<AddressPoolResponse>(
+        ['admin.address-pools', page, query],
+        () =>
+            getAddressPools({
+                page,
+                query,
+                ...params,
+            })
     )
 }
 
diff --git a/resources/scripts/api/admin/addressPools/useAddressesSWR.ts b/resources/scripts/api/admin/addressPools/useAddressesSWR.ts
index 3a176a5b2a8..cca898b9fb8 100644
--- a/resources/scripts/api/admin/addressPools/useAddressesSWR.ts
+++ b/resources/scripts/api/admin/addressPools/useAddressesSWR.ts
@@ -1,8 +1,11 @@
-import useSWR, { Key, SWRResponse } from 'swr'
-import getAddresses, { QueryParams } from '@/api/admin/addressPools/getAddresses'
+import { Optimistic } from '@/lib/swr'
 import { useMatch } from 'react-router-dom'
+import useSWR, { Key, SWRResponse } from 'swr'
+
+import getAddresses, {
+    QueryParams,
+} from '@/api/admin/addressPools/getAddresses'
 import { AddressResponse } from '@/api/admin/nodes/addresses/getAddresses'
-import { Optimistic } from '@/lib/swr'
 
 export const getKey = (id: number, page?: number, query?: string): Key => [
     'admin.address-pools.addresses',
@@ -15,12 +18,14 @@ const useAddressesSWR = ({ page, query, ...params }: QueryParams) => {
     const match = useMatch('/admin/ipam/:id/*')
     const id = parseInt(match!.params.id!)
 
-    return useSWR<AddressResponse>(getKey(id, page, query), () =>
-        getAddresses(id, {
-            page,
-            query,
-            ...params,
-        }),
+    return useSWR<AddressResponse>(
+        getKey(id, page, query),
+        () =>
+            getAddresses(id, {
+                page,
+                query,
+                ...params,
+            }),
         {
             revalidateOnMount: false,
         }
diff --git a/resources/scripts/api/admin/locations/createLocation.ts b/resources/scripts/api/admin/locations/createLocation.ts
index ba4e83c43d3..d2d35ccfeed 100644
--- a/resources/scripts/api/admin/locations/createLocation.ts
+++ b/resources/scripts/api/admin/locations/createLocation.ts
@@ -1,7 +1,10 @@
+import { Location, rawDataToLocation } from '@/api/admin/locations/getLocations'
 import http from '@/api/http'
-import { rawDataToLocation, Location } from '@/api/admin/locations/getLocations'
 
-export default async (shortCode: string, description: string | null): Promise<Location> => {
+export default async (
+    shortCode: string,
+    description: string | null
+): Promise<Location> => {
     const {
         data: { data },
     } = await http.post('/api/admin/locations', {
diff --git a/resources/scripts/api/admin/locations/getLocations.ts b/resources/scripts/api/admin/locations/getLocations.ts
index 045fd313fde..5b14d7bdb89 100644
--- a/resources/scripts/api/admin/locations/getLocations.ts
+++ b/resources/scripts/api/admin/locations/getLocations.ts
@@ -1,4 +1,8 @@
-import http, { FractalResponseData, getPaginationSet, PaginatedResult } from '@/api/http'
+import http, {
+    FractalResponseData,
+    PaginatedResult,
+    getPaginationSet,
+} from '@/api/http'
 
 export interface Location {
     id: number
@@ -25,26 +29,25 @@ export interface QueryParams {
 export type LocationResponse = PaginatedResult<Location>
 
 export default ({
-                    query,
-                    perPage = 50,
-                    ...params
-                }: QueryParams): Promise<PaginatedResult<Location>> => {
+    query,
+    perPage = 50,
+    ...params
+}: QueryParams): Promise<PaginatedResult<Location>> => {
     return new Promise((resolve, reject) => {
-        http
-            .get('/api/admin/locations', {
-                params: {
-                    'filter[*]': query,
-                    per_page: perPage,
-                    ...params,
-                },
-            })
+        http.get('/api/admin/locations', {
+            params: {
+                'filter[*]': query,
+                'per_page': perPage,
+                ...params,
+            },
+        })
             .then(({ data }) =>
                 resolve({
                     items: (data.data || []).map((datum: any) =>
-                        rawDataToLocation(datum),
+                        rawDataToLocation(datum)
                     ),
                     pagination: getPaginationSet(data.meta.pagination),
-                }),
+                })
             )
             .catch(reject)
     })
diff --git a/resources/scripts/api/admin/locations/updateLocation.ts b/resources/scripts/api/admin/locations/updateLocation.ts
index ca65c9e27de..2f9eabae7d0 100644
--- a/resources/scripts/api/admin/locations/updateLocation.ts
+++ b/resources/scripts/api/admin/locations/updateLocation.ts
@@ -1,7 +1,11 @@
-import http from '@/api/http'
 import { Location, rawDataToLocation } from '@/api/admin/locations/getLocations'
+import http from '@/api/http'
 
-const updateLocation = async (id: number, shortCode: string, description: string | null): Promise<Location> => {
+const updateLocation = async (
+    id: number,
+    shortCode: string,
+    description: string | null
+): Promise<Location> => {
     const {
         data: { data },
     } = await http.put(`/api/admin/locations/${id}`, {
diff --git a/resources/scripts/api/admin/locations/useLocationsSWR.ts b/resources/scripts/api/admin/locations/useLocationsSWR.ts
index f357ba111ba..d08d7126e88 100644
--- a/resources/scripts/api/admin/locations/useLocationsSWR.ts
+++ b/resources/scripts/api/admin/locations/useLocationsSWR.ts
@@ -1,8 +1,14 @@
-import getLocations, { LocationResponse, QueryParams } from '@/api/admin/locations/getLocations'
 import useSWR from 'swr'
 
-const useLocationsSWR = ({page, query, ...params}: QueryParams) => {
-    return useSWR<LocationResponse>(['admin:locations', page, query], () => getLocations({page, query, ...params}))
+import getLocations, {
+    LocationResponse,
+    QueryParams,
+} from '@/api/admin/locations/getLocations'
+
+const useLocationsSWR = ({ page, query, ...params }: QueryParams) => {
+    return useSWR<LocationResponse>(['admin:locations', page, query], () =>
+        getLocations({ page, query, ...params })
+    )
 }
 
-export default useLocationsSWR
\ No newline at end of file
+export default useLocationsSWR
diff --git a/resources/scripts/api/admin/nodes/addresses/createAddress.ts b/resources/scripts/api/admin/nodes/addresses/createAddress.ts
index fc1c4472ef2..734cf32ace7 100644
--- a/resources/scripts/api/admin/nodes/addresses/createAddress.ts
+++ b/resources/scripts/api/admin/nodes/addresses/createAddress.ts
@@ -11,7 +11,10 @@ export interface AddressParameters {
     type: AddressType
 }
 
-const createAddress = async (nodeId: number, payload: AddressParameters): Promise<Address> => {
+const createAddress = async (
+    nodeId: number,
+    payload: AddressParameters
+): Promise<Address> => {
     const {
         data: { data },
     } = await http.post(`/api/admin/nodes/${nodeId}/addresses`, {
diff --git a/resources/scripts/api/admin/nodes/addresses/deleteAddress.ts b/resources/scripts/api/admin/nodes/addresses/deleteAddress.ts
index c315c509af0..0567dfbf237 100644
--- a/resources/scripts/api/admin/nodes/addresses/deleteAddress.ts
+++ b/resources/scripts/api/admin/nodes/addresses/deleteAddress.ts
@@ -1,6 +1,10 @@
 import http from '@/api/http'
 
-const deleteAddress = (nodeId: number, addressId: number, syncNetworkConfig: boolean) =>
+const deleteAddress = (
+    nodeId: number,
+    addressId: number,
+    syncNetworkConfig: boolean
+) =>
     http.delete(`/api/admin/nodes/${nodeId}/addresses/${addressId}`, {
         params: {
             sync_network_config: syncNetworkConfig,
diff --git a/resources/scripts/api/admin/nodes/addresses/getAddresses.ts b/resources/scripts/api/admin/nodes/addresses/getAddresses.ts
index 009c4c4f604..fcb443adb37 100644
--- a/resources/scripts/api/admin/nodes/addresses/getAddresses.ts
+++ b/resources/scripts/api/admin/nodes/addresses/getAddresses.ts
@@ -1,4 +1,4 @@
-import http, { getPaginationSet, PaginatedResult } from '@/api/http'
+import http, { PaginatedResult, getPaginationSet } from '@/api/http'
 import { Address, AddressType, rawDataToAddress } from '@/api/server/getServer'
 
 export type AddressInclude = 'server'
@@ -17,7 +17,15 @@ export interface QueryParams {
 
 const getAddresses = async (
     nodeId: number,
-    { serverId, type, address, query, perPage = 50, include, ...params }: QueryParams
+    {
+        serverId,
+        type,
+        address,
+        query,
+        perPage = 50,
+        include,
+        ...params
+    }: QueryParams
 ): Promise<AddressResponse> => {
     const { data } = await http.get(`/api/admin/nodes/${nodeId}/addresses`, {
         params: {
diff --git a/resources/scripts/api/admin/nodes/addresses/updateAddress.ts b/resources/scripts/api/admin/nodes/addresses/updateAddress.ts
index 20de0c243d6..0caac1e2d3b 100644
--- a/resources/scripts/api/admin/nodes/addresses/updateAddress.ts
+++ b/resources/scripts/api/admin/nodes/addresses/updateAddress.ts
@@ -1,8 +1,12 @@
 import { AddressParameters } from '@/api/admin/nodes/addresses/createAddress'
-import { Address, rawDataToAddress } from '@/api/server/getServer'
 import http from '@/api/http'
+import { Address, rawDataToAddress } from '@/api/server/getServer'
 
-const updateAddress = async (nodeId: number, addressId: number, payload: AddressParameters): Promise<Address> => {
+const updateAddress = async (
+    nodeId: number,
+    addressId: number,
+    payload: AddressParameters
+): Promise<Address> => {
     const {
         data: { data },
     } = await http.put(`/api/admin/nodes/${nodeId}/addresses/${addressId}`, {
diff --git a/resources/scripts/api/admin/nodes/addresses/useAddressesSWR.ts b/resources/scripts/api/admin/nodes/addresses/useAddressesSWR.ts
index 7c0bedf9b8b..af00570b4b6 100644
--- a/resources/scripts/api/admin/nodes/addresses/useAddressesSWR.ts
+++ b/resources/scripts/api/admin/nodes/addresses/useAddressesSWR.ts
@@ -1,13 +1,18 @@
-import getAddresses, { AddressResponse, QueryParams } from '@/api/admin/nodes/addresses/getAddresses'
 import useSWR from 'swr'
 
+import getAddresses, {
+    AddressResponse,
+    QueryParams,
+} from '@/api/admin/nodes/addresses/getAddresses'
+
 interface Params extends QueryParams {
     id?: string | number
 }
 
 const useAddressesSWR = (nodeId: number, { page, id, ...params }: Params) => {
-    return useSWR<AddressResponse>(['admin:node:addresses', nodeId, page, id], () =>
-        getAddresses(nodeId, { page, ...params })
+    return useSWR<AddressResponse>(
+        ['admin:node:addresses', nodeId, page, id],
+        () => getAddresses(nodeId, { page, ...params })
     )
 }
 
diff --git a/resources/scripts/api/admin/nodes/deleteNode.ts b/resources/scripts/api/admin/nodes/deleteNode.ts
index 233b49d8aa5..df5103012dd 100644
--- a/resources/scripts/api/admin/nodes/deleteNode.ts
+++ b/resources/scripts/api/admin/nodes/deleteNode.ts
@@ -2,4 +2,4 @@ import http from '@/api/http'
 
 const deleteNode = (id: number) => http.delete(`/api/admin/nodes/${id}`)
 
-export default deleteNode
\ No newline at end of file
+export default deleteNode
diff --git a/resources/scripts/api/admin/nodes/getNodes.ts b/resources/scripts/api/admin/nodes/getNodes.ts
index a7e5000381b..f6a91ce0bb1 100644
--- a/resources/scripts/api/admin/nodes/getNodes.ts
+++ b/resources/scripts/api/admin/nodes/getNodes.ts
@@ -1,4 +1,4 @@
-import http, { getPaginationSet, PaginatedResult } from '@/api/http'
+import http, { PaginatedResult, getPaginationSet } from '@/api/http'
 
 export interface Node {
     id: number
@@ -57,11 +57,20 @@ export interface QueryParams {
     perPage?: number
 }
 
-const getNodes = async ({ query, id, perPage = 50, ...params }: QueryParams): Promise<NodeResponse> => {
+const getNodes = async ({
+    query,
+    id,
+    perPage = 50,
+    ...params
+}: QueryParams): Promise<NodeResponse> => {
     const { data } = await http.get('/api/admin/nodes', {
         params: {
             'filter[*]': query,
-            'filter[id]': id ? (Array.isArray(id) ? id.join(',') : id) : undefined,
+            'filter[id]': id
+                ? Array.isArray(id)
+                    ? id.join(',')
+                    : id
+                : undefined,
             ...params,
         },
     })
diff --git a/resources/scripts/api/admin/nodes/isos/createIso.ts b/resources/scripts/api/admin/nodes/isos/createIso.ts
index 70c2093cf69..3b378d75080 100644
--- a/resources/scripts/api/admin/nodes/isos/createIso.ts
+++ b/resources/scripts/api/admin/nodes/isos/createIso.ts
@@ -1,7 +1,13 @@
 import { ISO, rawDataToISO } from '@/api/admin/nodes/isos/getIsos'
 import http from '@/api/http'
 
-export type ChecksumAlgorithm = 'md5' | 'sha1' | 'sha224' | 'sha256' | 'sha384' | 'sha512'
+export type ChecksumAlgorithm =
+    | 'md5'
+    | 'sha1'
+    | 'sha224'
+    | 'sha256'
+    | 'sha384'
+    | 'sha512'
 
 interface CreateIsoParameters {
     shouldDownload: boolean
@@ -15,7 +21,13 @@ interface CreateIsoParameters {
 
 const createIso = async (
     nodeId: number,
-    { shouldDownload, fileName, checksumAlgorithm, checksum, ...data }: CreateIsoParameters
+    {
+        shouldDownload,
+        fileName,
+        checksumAlgorithm,
+        checksum,
+        ...data
+    }: CreateIsoParameters
 ): Promise<ISO> => {
     const {
         data: { data: responseData },
diff --git a/resources/scripts/api/admin/nodes/isos/deleteIso.ts b/resources/scripts/api/admin/nodes/isos/deleteIso.ts
index 0af497681b9..bc012677071 100644
--- a/resources/scripts/api/admin/nodes/isos/deleteIso.ts
+++ b/resources/scripts/api/admin/nodes/isos/deleteIso.ts
@@ -1,5 +1,6 @@
-import http from '@/api/http';
+import http from '@/api/http'
 
-const deleteIso = (nodeId: number, isoUuid: string) => http.delete(`/api/admin/nodes/${nodeId}/isos/${isoUuid}`)
+const deleteIso = (nodeId: number, isoUuid: string) =>
+    http.delete(`/api/admin/nodes/${nodeId}/isos/${isoUuid}`)
 
-export default deleteIso
\ No newline at end of file
+export default deleteIso
diff --git a/resources/scripts/api/admin/nodes/isos/getIsos.ts b/resources/scripts/api/admin/nodes/isos/getIsos.ts
index d73b02fb2f2..d7a39876e74 100644
--- a/resources/scripts/api/admin/nodes/isos/getIsos.ts
+++ b/resources/scripts/api/admin/nodes/isos/getIsos.ts
@@ -1,4 +1,4 @@
-import http, { getPaginationSet, PaginatedResult } from '@/api/http'
+import http, { PaginatedResult, getPaginationSet } from '@/api/http'
 
 export interface ISO {
     uuid: string
@@ -18,7 +18,9 @@ export const rawDataToISO = (rawData: any): ISO => ({
     fileName: rawData.file_name,
     size: rawData.size,
     hidden: Boolean(rawData.hidden),
-    completedAt: rawData.completed_at ? new Date(rawData.completed_at) : undefined,
+    completedAt: rawData.completed_at
+        ? new Date(rawData.completed_at)
+        : undefined,
     createdAt: new Date(rawData.created_at),
 })
 
@@ -31,13 +33,16 @@ export interface QueryParams {
 
 export type IsoResponse = PaginatedResult<ISO>
 
-const getIsos = async ({ nodeId, query, perPage = 50, ...params }: QueryParams): Promise<IsoResponse> => {
-    const {
-        data,
-    } = await http.get(`/api/admin/nodes/${nodeId}/isos`, {
+const getIsos = async ({
+    nodeId,
+    query,
+    perPage = 50,
+    ...params
+}: QueryParams): Promise<IsoResponse> => {
+    const { data } = await http.get(`/api/admin/nodes/${nodeId}/isos`, {
         params: {
             'filter[name]': query,
-            per_page: perPage,
+            'per_page': perPage,
             ...params,
         },
     })
diff --git a/resources/scripts/api/admin/nodes/isos/updateIso.ts b/resources/scripts/api/admin/nodes/isos/updateIso.ts
index 584e8c6a7e8..de3ca29cb07 100644
--- a/resources/scripts/api/admin/nodes/isos/updateIso.ts
+++ b/resources/scripts/api/admin/nodes/isos/updateIso.ts
@@ -1,8 +1,15 @@
 import { ISO, rawDataToISO } from '@/api/admin/nodes/isos/getIsos'
 import http from '@/api/http'
 
-const updateIso = async (nodeId: number, isoUuid: string, name: string, hidden: boolean): Promise<ISO> => {
-    const { data: { data} } = await http.put(`/api/admin/nodes/${nodeId}/isos/${isoUuid}`, {
+const updateIso = async (
+    nodeId: number,
+    isoUuid: string,
+    name: string,
+    hidden: boolean
+): Promise<ISO> => {
+    const {
+        data: { data },
+    } = await http.put(`/api/admin/nodes/${nodeId}/isos/${isoUuid}`, {
         name,
         hidden,
     })
@@ -10,4 +17,4 @@ const updateIso = async (nodeId: number, isoUuid: string, name: string, hidden:
     return rawDataToISO(data)
 }
 
-export default updateIso
\ No newline at end of file
+export default updateIso
diff --git a/resources/scripts/api/admin/nodes/isos/useIsosSWR.ts b/resources/scripts/api/admin/nodes/isos/useIsosSWR.ts
index b3e2c4b4ed2..a16b0fbcba6 100644
--- a/resources/scripts/api/admin/nodes/isos/useIsosSWR.ts
+++ b/resources/scripts/api/admin/nodes/isos/useIsosSWR.ts
@@ -1,8 +1,14 @@
-import getIsos, { IsoResponse, QueryParams } from '@/api/admin/nodes/isos/getIsos'
 import useSWR from 'swr'
 
-const useIsosSWR = ({page, nodeId, ...params}: QueryParams) => {
-    return useSWR<IsoResponse>(['admin:node:isos', nodeId, page], () => getIsos({page, nodeId, ...params}))
+import getIsos, {
+    IsoResponse,
+    QueryParams,
+} from '@/api/admin/nodes/isos/getIsos'
+
+const useIsosSWR = ({ page, nodeId, ...params }: QueryParams) => {
+    return useSWR<IsoResponse>(['admin:node:isos', nodeId, page], () =>
+        getIsos({ page, nodeId, ...params })
+    )
 }
 
-export default useIsosSWR
\ No newline at end of file
+export default useIsosSWR
diff --git a/resources/scripts/api/admin/nodes/settings/resetCotermToken.ts b/resources/scripts/api/admin/nodes/settings/resetCotermToken.ts
index 05131db974f..997df2dccf2 100644
--- a/resources/scripts/api/admin/nodes/settings/resetCotermToken.ts
+++ b/resources/scripts/api/admin/nodes/settings/resetCotermToken.ts
@@ -3,7 +3,9 @@ import http from '@/api/http'
 const resetCotermToken = async (nodeId: number): Promise<string> => {
     const {
         data: { data },
-    } = await http.post(`/api/admin/nodes/${nodeId}/settings/reset-coterm-token`)
+    } = await http.post(
+        `/api/admin/nodes/${nodeId}/settings/reset-coterm-token`
+    )
 
     return data.token
 }
diff --git a/resources/scripts/api/admin/nodes/settings/updateCoterm.ts b/resources/scripts/api/admin/nodes/settings/updateCoterm.ts
index 3929a71c239..4b9a3b63b3a 100644
--- a/resources/scripts/api/admin/nodes/settings/updateCoterm.ts
+++ b/resources/scripts/api/admin/nodes/settings/updateCoterm.ts
@@ -7,7 +7,10 @@ interface UpdateCotermParameters {
     isTlsEnabled: boolean
 }
 
-const updateCoterm = async (nodeId: number, { isEnabled, fqdn, port, isTlsEnabled }: UpdateCotermParameters) => {
+const updateCoterm = async (
+    nodeId: number,
+    { isEnabled, fqdn, port, isTlsEnabled }: UpdateCotermParameters
+) => {
     const {
         data: { data },
     } = await http.patch(`/api/admin/nodes/${nodeId}/settings/coterm`, {
diff --git a/resources/scripts/api/admin/nodes/templateGroups/createTemplateGroup.ts b/resources/scripts/api/admin/nodes/templateGroups/createTemplateGroup.ts
index 6222f14b90a..7eaa7a9da60 100644
--- a/resources/scripts/api/admin/nodes/templateGroups/createTemplateGroup.ts
+++ b/resources/scripts/api/admin/nodes/templateGroups/createTemplateGroup.ts
@@ -1,4 +1,7 @@
-import { rawDataToTemplateGroup, TemplateGroup } from '@/api/admin/nodes/templateGroups/getTemplateGroups'
+import {
+    TemplateGroup,
+    rawDataToTemplateGroup,
+} from '@/api/admin/nodes/templateGroups/getTemplateGroups'
 import http from '@/api/http'
 
 export interface TemplateGroupParameters {
@@ -12,7 +15,10 @@ const createTemplateGroup = async (
 ): Promise<TemplateGroup> => {
     const {
         data: { data },
-    } = await http.post(`/api/admin/nodes/${nodeId}/template-groups`, parameters)
+    } = await http.post(
+        `/api/admin/nodes/${nodeId}/template-groups`,
+        parameters
+    )
 
     return rawDataToTemplateGroup(data)
 }
diff --git a/resources/scripts/api/admin/nodes/templateGroups/deleteTemplateGroup.ts b/resources/scripts/api/admin/nodes/templateGroups/deleteTemplateGroup.ts
index ef77ec2d998..c75b9c36dd8 100644
--- a/resources/scripts/api/admin/nodes/templateGroups/deleteTemplateGroup.ts
+++ b/resources/scripts/api/admin/nodes/templateGroups/deleteTemplateGroup.ts
@@ -1,5 +1,6 @@
 import http from '@/api/http'
 
-const deleteTemplateGroup = (nodeId: number, groupUuid: string) => http.delete(`/api/admin/nodes/${nodeId}/template-groups/${groupUuid}`)
+const deleteTemplateGroup = (nodeId: number, groupUuid: string) =>
+    http.delete(`/api/admin/nodes/${nodeId}/template-groups/${groupUuid}`)
 
-export default deleteTemplateGroup
\ No newline at end of file
+export default deleteTemplateGroup
diff --git a/resources/scripts/api/admin/nodes/templateGroups/reorderTemplateGroups.ts b/resources/scripts/api/admin/nodes/templateGroups/reorderTemplateGroups.ts
index 77772f345de..68791095f9d 100644
--- a/resources/scripts/api/admin/nodes/templateGroups/reorderTemplateGroups.ts
+++ b/resources/scripts/api/admin/nodes/templateGroups/reorderTemplateGroups.ts
@@ -1,13 +1,20 @@
-import { rawDataToTemplateGroup, TemplateGroup } from '@/api/admin/nodes/templateGroups/getTemplateGroups'
+import {
+    TemplateGroup,
+    rawDataToTemplateGroup,
+} from '@/api/admin/nodes/templateGroups/getTemplateGroups'
 import http from '@/api/http'
 
-
-const reorderTemplateGroups = async (nodeId: number, groups: number[]): Promise<TemplateGroup[]> => {
-    const { data: { data } } = await http.post(`/api/admin/nodes/${nodeId}/template-groups/reorder`, {
+const reorderTemplateGroups = async (
+    nodeId: number,
+    groups: number[]
+): Promise<TemplateGroup[]> => {
+    const {
+        data: { data },
+    } = await http.post(`/api/admin/nodes/${nodeId}/template-groups/reorder`, {
         order: groups,
     })
 
     return data.map(rawDataToTemplateGroup)
 }
 
-export default reorderTemplateGroups
\ No newline at end of file
+export default reorderTemplateGroups
diff --git a/resources/scripts/api/admin/nodes/templateGroups/templates/createTemplate.ts b/resources/scripts/api/admin/nodes/templateGroups/templates/createTemplate.ts
index bb3f33ef781..a2f9cc1c632 100644
--- a/resources/scripts/api/admin/nodes/templateGroups/templates/createTemplate.ts
+++ b/resources/scripts/api/admin/nodes/templateGroups/templates/createTemplate.ts
@@ -1,4 +1,7 @@
-import { rawDataToTemplate, Template } from '@/api/admin/nodes/templateGroups/getTemplateGroups'
+import {
+    Template,
+    rawDataToTemplate,
+} from '@/api/admin/nodes/templateGroups/getTemplateGroups'
 import http from '@/api/http'
 
 export interface TemplateParameters {
@@ -7,10 +10,17 @@ export interface TemplateParameters {
     hidden: boolean
 }
 
-const createTemplate = async (nodeId: number, groupUuid: string, parameters: TemplateParameters): Promise<Template> => {
+const createTemplate = async (
+    nodeId: number,
+    groupUuid: string,
+    parameters: TemplateParameters
+): Promise<Template> => {
     const {
         data: { data },
-    } = await http.post(`/api/admin/nodes/${nodeId}/template-groups/${groupUuid}/templates`, parameters)
+    } = await http.post(
+        `/api/admin/nodes/${nodeId}/template-groups/${groupUuid}/templates`,
+        parameters
+    )
 
     return rawDataToTemplate(data)
 }
diff --git a/resources/scripts/api/admin/nodes/templateGroups/templates/deleteTemplate.ts b/resources/scripts/api/admin/nodes/templateGroups/templates/deleteTemplate.ts
index 3f2b4adf867..bf63e83a437 100644
--- a/resources/scripts/api/admin/nodes/templateGroups/templates/deleteTemplate.ts
+++ b/resources/scripts/api/admin/nodes/templateGroups/templates/deleteTemplate.ts
@@ -1,6 +1,12 @@
 import http from '@/api/http'
 
-const deleteTemplate = (nodeId: number, groupUuid: string, templateUuid: string) =>
-    http.delete(`/api/admin/nodes/${nodeId}/template-groups/${groupUuid}/templates/${templateUuid}`)
+const deleteTemplate = (
+    nodeId: number,
+    groupUuid: string,
+    templateUuid: string
+) =>
+    http.delete(
+        `/api/admin/nodes/${nodeId}/template-groups/${groupUuid}/templates/${templateUuid}`
+    )
 
-export default deleteTemplate
\ No newline at end of file
+export default deleteTemplate
diff --git a/resources/scripts/api/admin/nodes/templateGroups/templates/getTemplates.ts b/resources/scripts/api/admin/nodes/templateGroups/templates/getTemplates.ts
index 8b75f84fa77..6b97b83b0ec 100644
--- a/resources/scripts/api/admin/nodes/templateGroups/templates/getTemplates.ts
+++ b/resources/scripts/api/admin/nodes/templateGroups/templates/getTemplates.ts
@@ -1,10 +1,12 @@
-import http from '@/api/http'
 import { rawDataToTemplate } from '@/api/admin/nodes/templateGroups/getTemplateGroups'
+import http from '@/api/http'
 
 const getTemplates = async (nodeId: number, groupUuid: string) => {
     const {
         data: { data },
-    } = await http.get(`/api/admin/nodes/${nodeId}/template-groups/${groupUuid}`)
+    } = await http.get(
+        `/api/admin/nodes/${nodeId}/template-groups/${groupUuid}`
+    )
 
     return data.map(rawDataToTemplate)
 }
diff --git a/resources/scripts/api/admin/nodes/templateGroups/templates/reorderTemplates.ts b/resources/scripts/api/admin/nodes/templateGroups/templates/reorderTemplates.ts
index a30bda0fa8c..87f877beb36 100644
--- a/resources/scripts/api/admin/nodes/templateGroups/templates/reorderTemplates.ts
+++ b/resources/scripts/api/admin/nodes/templateGroups/templates/reorderTemplates.ts
@@ -1,12 +1,24 @@
-import { rawDataToTemplate, Template } from '@/api/admin/nodes/templateGroups/getTemplateGroups'
+import {
+    Template,
+    rawDataToTemplate,
+} from '@/api/admin/nodes/templateGroups/getTemplateGroups'
 import http from '@/api/http'
 
-const reorderTemplates = async (nodeId: number, groupUuid: string, templates: number[]): Promise<Template[]> => {
-    const { data: { data } } = await http.post(`/api/admin/nodes/${nodeId}/template-groups/${groupUuid}/templates/reorder`, {
-        order: templates,
-    })
+const reorderTemplates = async (
+    nodeId: number,
+    groupUuid: string,
+    templates: number[]
+): Promise<Template[]> => {
+    const {
+        data: { data },
+    } = await http.post(
+        `/api/admin/nodes/${nodeId}/template-groups/${groupUuid}/templates/reorder`,
+        {
+            order: templates,
+        }
+    )
 
     return data.map(rawDataToTemplate)
 }
 
-export default reorderTemplates
\ No newline at end of file
+export default reorderTemplates
diff --git a/resources/scripts/api/admin/nodes/templateGroups/templates/updateTemplate.ts b/resources/scripts/api/admin/nodes/templateGroups/templates/updateTemplate.ts
index 16cfb3c206f..54f87803f6e 100644
--- a/resources/scripts/api/admin/nodes/templateGroups/templates/updateTemplate.ts
+++ b/resources/scripts/api/admin/nodes/templateGroups/templates/updateTemplate.ts
@@ -1,13 +1,24 @@
-import { rawDataToTemplate, Template } from '@/api/admin/nodes/templateGroups/getTemplateGroups'
+import {
+    Template,
+    rawDataToTemplate,
+} from '@/api/admin/nodes/templateGroups/getTemplateGroups'
 import { TemplateParameters } from '@/api/admin/nodes/templateGroups/templates/createTemplate'
 import http from '@/api/http'
 
-const updateTemplate = async (nodeId: number, groupUuid: string, templateUuid: string, parameters: TemplateParameters): Promise<Template> => {
+const updateTemplate = async (
+    nodeId: number,
+    groupUuid: string,
+    templateUuid: string,
+    parameters: TemplateParameters
+): Promise<Template> => {
     const {
         data: { data },
-    } = await http.put(`/api/admin/nodes/${nodeId}/template-groups/${groupUuid}/templates/${templateUuid}`, parameters)
+    } = await http.put(
+        `/api/admin/nodes/${nodeId}/template-groups/${groupUuid}/templates/${templateUuid}`,
+        parameters
+    )
 
     return rawDataToTemplate(data)
 }
 
-export default updateTemplate
\ No newline at end of file
+export default updateTemplate
diff --git a/resources/scripts/api/admin/nodes/templateGroups/templates/useTemplatesSWR.ts b/resources/scripts/api/admin/nodes/templateGroups/templates/useTemplatesSWR.ts
index aec429397fd..9f02f59e610 100644
--- a/resources/scripts/api/admin/nodes/templateGroups/templates/useTemplatesSWR.ts
+++ b/resources/scripts/api/admin/nodes/templateGroups/templates/useTemplatesSWR.ts
@@ -1,10 +1,12 @@
-import { Template } from '@/api/admin/nodes/templateGroups/getTemplateGroups'
 import useSWR from 'swr'
+
+import { Template } from '@/api/admin/nodes/templateGroups/getTemplateGroups'
 import getTemplates from '@/api/admin/nodes/templateGroups/templates/getTemplates'
 
 const useTemplatesSWR = (nodeId: number, groupUuid: string) => {
-    return useSWR<Template[]>(['admin:node:template-group:templates', nodeId, groupUuid], () =>
-        getTemplates(nodeId, groupUuid)
+    return useSWR<Template[]>(
+        ['admin:node:template-group:templates', nodeId, groupUuid],
+        () => getTemplates(nodeId, groupUuid)
     )
 }
 
diff --git a/resources/scripts/api/admin/nodes/templateGroups/updateTemplateGroup.ts b/resources/scripts/api/admin/nodes/templateGroups/updateTemplateGroup.ts
index df3b89b8535..8a238d114dd 100644
--- a/resources/scripts/api/admin/nodes/templateGroups/updateTemplateGroup.ts
+++ b/resources/scripts/api/admin/nodes/templateGroups/updateTemplateGroup.ts
@@ -1,11 +1,21 @@
 import { TemplateGroupParameters } from '@/api/admin/nodes/templateGroups/createTemplateGroup'
-import { rawDataToTemplateGroup, TemplateGroup } from '@/api/admin/nodes/templateGroups/getTemplateGroups'
+import {
+    TemplateGroup,
+    rawDataToTemplateGroup,
+} from '@/api/admin/nodes/templateGroups/getTemplateGroups'
 import http from '@/api/http'
 
-const updateTemplateGroup = async (nodeId: number, groupUuid: string, parameters: TemplateGroupParameters): Promise<TemplateGroup> => {
+const updateTemplateGroup = async (
+    nodeId: number,
+    groupUuid: string,
+    parameters: TemplateGroupParameters
+): Promise<TemplateGroup> => {
     const {
         data: { data },
-    } = await http.put(`/api/admin/nodes/${nodeId}/template-groups/${groupUuid}`, parameters)
+    } = await http.put(
+        `/api/admin/nodes/${nodeId}/template-groups/${groupUuid}`,
+        parameters
+    )
 
     return rawDataToTemplateGroup(data)
 }
diff --git a/resources/scripts/api/admin/nodes/templateGroups/useTemplateGroupsSWR.ts b/resources/scripts/api/admin/nodes/templateGroups/useTemplateGroupsSWR.ts
index ba1a77294b1..424b7990d83 100644
--- a/resources/scripts/api/admin/nodes/templateGroups/useTemplateGroupsSWR.ts
+++ b/resources/scripts/api/admin/nodes/templateGroups/useTemplateGroupsSWR.ts
@@ -1,10 +1,20 @@
-import getTemplateGroups, { TemplateGroup } from '@/api/admin/nodes/templateGroups/getTemplateGroups'
 import useSWR from 'swr'
 
-const useTemplateGroupsSWR = (nodeId: number, fallbackData?: TemplateGroup[]) => {
-    return useSWR<TemplateGroup[]>(['admin:node:template-groups', nodeId], () => getTemplateGroups(nodeId), {
-        fallbackData,
-    })
+import getTemplateGroups, {
+    TemplateGroup,
+} from '@/api/admin/nodes/templateGroups/getTemplateGroups'
+
+const useTemplateGroupsSWR = (
+    nodeId: number,
+    fallbackData?: TemplateGroup[]
+) => {
+    return useSWR<TemplateGroup[]>(
+        ['admin:node:template-groups', nodeId],
+        () => getTemplateGroups(nodeId),
+        {
+            fallbackData,
+        }
+    )
 }
 
 export default useTemplateGroupsSWR
diff --git a/resources/scripts/api/admin/nodes/useNodeSWR.ts b/resources/scripts/api/admin/nodes/useNodeSWR.ts
index b4c187bcce5..a156f70dfbb 100644
--- a/resources/scripts/api/admin/nodes/useNodeSWR.ts
+++ b/resources/scripts/api/admin/nodes/useNodeSWR.ts
@@ -1,9 +1,10 @@
-import useSWR, { Key, SWRResponse } from 'swr'
-import { useMatch, useParams } from 'react-router-dom'
 import { Optimistic } from '@/lib/swr'
-import { AddressPool } from '@/api/admin/addressPools/getAddressPools'
-import getAddressPool from '@/api/admin/addressPools/getAddressPool'
 import { match } from '@headlessui/react/dist/utils/match'
+import { useMatch, useParams } from 'react-router-dom'
+import useSWR, { Key, SWRResponse } from 'swr'
+
+import getAddressPool from '@/api/admin/addressPools/getAddressPool'
+import { AddressPool } from '@/api/admin/addressPools/getAddressPools'
 import getNode from '@/api/admin/nodes/getNode'
 import { Node } from '@/api/admin/nodes/getNodes'
 
diff --git a/resources/scripts/api/admin/nodes/useNodesSWR.ts b/resources/scripts/api/admin/nodes/useNodesSWR.ts
index 0443bc46aff..8b217850c04 100644
--- a/resources/scripts/api/admin/nodes/useNodesSWR.ts
+++ b/resources/scripts/api/admin/nodes/useNodesSWR.ts
@@ -1,6 +1,7 @@
-import getNodes, { NodeResponse, QueryParams } from '@/api/admin/nodes/getNodes'
 import useSWR from 'swr'
 
+import getNodes, { NodeResponse, QueryParams } from '@/api/admin/nodes/getNodes'
+
 const useNodesSWR = ({ page, query, id, ...params }: QueryParams) => {
     return useSWR<NodeResponse>(['admin:nodes', page, query, Boolean(id)], () =>
         getNodes({ page, query, id, ...params })
diff --git a/resources/scripts/api/admin/servers/getServer.ts b/resources/scripts/api/admin/servers/getServer.ts
index 1858cdcd904..f4fc43e4a89 100644
--- a/resources/scripts/api/admin/servers/getServer.ts
+++ b/resources/scripts/api/admin/servers/getServer.ts
@@ -1,6 +1,9 @@
-import { rawDataToServerBuild, ServerBuild as BaseServerBuild } from '@/api/server/getServer'
-import http from '@/api/http'
 import { ServerInclude } from '@/api/admin/servers/getServers'
+import http from '@/api/http'
+import {
+    ServerBuild as BaseServerBuild,
+    rawDataToServerBuild,
+} from '@/api/server/getServer'
 
 export interface AdminServerBuild extends BaseServerBuild {
     userId: number
@@ -15,7 +18,10 @@ export const rawDataToAdminServer = (data: any): AdminServerBuild => ({
     vmid: data.vmid,
 })
 
-export const getServer = async (uuid: string, include?: ServerInclude[]): Promise<AdminServerBuild> => {
+export const getServer = async (
+    uuid: string,
+    include?: ServerInclude[]
+): Promise<AdminServerBuild> => {
     const {
         data: { data },
     } = await http.get(`/api/admin/servers/${uuid}`, {
diff --git a/resources/scripts/api/admin/servers/getServers.ts b/resources/scripts/api/admin/servers/getServers.ts
index 7ae3d77e8e2..8734ce869dc 100644
--- a/resources/scripts/api/admin/servers/getServers.ts
+++ b/resources/scripts/api/admin/servers/getServers.ts
@@ -1,5 +1,8 @@
-import http, { getPaginationSet, PaginatedResult } from '@/api/http'
-import { rawDataToAdminServer, AdminServerBuild } from '@/api/admin/servers/getServer'
+import {
+    AdminServerBuild,
+    rawDataToAdminServer,
+} from '@/api/admin/servers/getServer'
+import http, { PaginatedResult, getPaginationSet } from '@/api/http'
 
 export type ServerInclude = 'user' | 'node'
 
diff --git a/resources/scripts/api/admin/servers/suspendServer.ts b/resources/scripts/api/admin/servers/suspendServer.ts
index e4912409242..edad2b3e1b6 100644
--- a/resources/scripts/api/admin/servers/suspendServer.ts
+++ b/resources/scripts/api/admin/servers/suspendServer.ts
@@ -1,5 +1,6 @@
 import http from '@/api/http'
 
-const suspendServer = (uuid: string) => http.post(`/api/admin/servers/${uuid}/settings/suspend`)
+const suspendServer = (uuid: string) =>
+    http.post(`/api/admin/servers/${uuid}/settings/suspend`)
 
 export default suspendServer
diff --git a/resources/scripts/api/admin/servers/unsuspendServer.ts b/resources/scripts/api/admin/servers/unsuspendServer.ts
index 1a99ac5fcae..2501520229d 100644
--- a/resources/scripts/api/admin/servers/unsuspendServer.ts
+++ b/resources/scripts/api/admin/servers/unsuspendServer.ts
@@ -1,5 +1,6 @@
 import http from '@/api/http'
 
-const unsuspendServer = (uuid: string) => http.post(`/api/admin/servers/${uuid}/settings/unsuspend`)
+const unsuspendServer = (uuid: string) =>
+    http.post(`/api/admin/servers/${uuid}/settings/unsuspend`)
 
 export default unsuspendServer
diff --git a/resources/scripts/api/admin/servers/updateBuild.ts b/resources/scripts/api/admin/servers/updateBuild.ts
index cb1220f8d0d..a7351908328 100644
--- a/resources/scripts/api/admin/servers/updateBuild.ts
+++ b/resources/scripts/api/admin/servers/updateBuild.ts
@@ -1,5 +1,5 @@
-import http from '@/api/http'
 import { rawDataToAdminServer } from '@/api/admin/servers/getServer'
+import http from '@/api/http'
 
 interface UpdateServerBuildParameters {
     cpu: number
@@ -14,7 +14,14 @@ interface UpdateServerBuildParameters {
 
 const updateBuild = async (
     serverUuid: string,
-    { addressIds, snapshotLimit, backupLimit, bandwidthLimit, bandwidthUsage, ...params }: UpdateServerBuildParameters
+    {
+        addressIds,
+        snapshotLimit,
+        backupLimit,
+        bandwidthLimit,
+        bandwidthUsage,
+        ...params
+    }: UpdateServerBuildParameters
 ) => {
     const {
         data: { data },
diff --git a/resources/scripts/api/admin/servers/updateServer.ts b/resources/scripts/api/admin/servers/updateServer.ts
index 996bfde9f50..e115ba29355 100644
--- a/resources/scripts/api/admin/servers/updateServer.ts
+++ b/resources/scripts/api/admin/servers/updateServer.ts
@@ -1,6 +1,6 @@
-import { EloquentStatus } from '@/api/server/types'
-import http from '@/api/http'
 import { rawDataToAdminServer } from '@/api/admin/servers/getServer'
+import http from '@/api/http'
+import { EloquentStatus } from '@/api/server/types'
 
 interface UpdateServerParameters {
     name?: string
@@ -11,7 +11,10 @@ interface UpdateServerParameters {
     status?: EloquentStatus
 }
 
-const updateServer = async (serverUuid: string, { userId, nodeId, ...params }: UpdateServerParameters) => {
+const updateServer = async (
+    serverUuid: string,
+    { userId, nodeId, ...params }: UpdateServerParameters
+) => {
     const {
         data: { data },
     } = await http.patch(`/api/admin/servers/${serverUuid}`, {
diff --git a/resources/scripts/api/admin/servers/useServersSWR.ts b/resources/scripts/api/admin/servers/useServersSWR.ts
index e77e3fa9c65..d7b38d2db46 100644
--- a/resources/scripts/api/admin/servers/useServersSWR.ts
+++ b/resources/scripts/api/admin/servers/useServersSWR.ts
@@ -1,8 +1,21 @@
-import getServers, { QueryParams, ServerResponse } from '@/api/admin/servers/getServers';
-import useSWR from 'swr';
+import useSWR from 'swr'
 
-const useServersSWR = ({page, nodeId, userId, query, ...params}: QueryParams) => {
-    return useSWR<ServerResponse>(['admin:servers', page, query, nodeId, userId], () => getServers({page, query, nodeId, userId, ...params}))
+import getServers, {
+    QueryParams,
+    ServerResponse,
+} from '@/api/admin/servers/getServers'
+
+const useServersSWR = ({
+    page,
+    nodeId,
+    userId,
+    query,
+    ...params
+}: QueryParams) => {
+    return useSWR<ServerResponse>(
+        ['admin:servers', page, query, nodeId, userId],
+        () => getServers({ page, query, nodeId, userId, ...params })
+    )
 }
 
-export default useServersSWR
\ No newline at end of file
+export default useServersSWR
diff --git a/resources/scripts/api/admin/tokens/createToken.ts b/resources/scripts/api/admin/tokens/createToken.ts
index b655e01c8d0..4560e5a8e5e 100644
--- a/resources/scripts/api/admin/tokens/createToken.ts
+++ b/resources/scripts/api/admin/tokens/createToken.ts
@@ -1,5 +1,5 @@
-import http from '@/api/http'
 import { rawDataToToken } from '@/api/admin/tokens/getTokens'
+import http from '@/api/http'
 
 interface CreateTokenParameters {
     name: string
diff --git a/resources/scripts/api/admin/tokens/getTokens.ts b/resources/scripts/api/admin/tokens/getTokens.ts
index 9610c54d674..0a11eb6fd7e 100644
--- a/resources/scripts/api/admin/tokens/getTokens.ts
+++ b/resources/scripts/api/admin/tokens/getTokens.ts
@@ -1,5 +1,5 @@
-import http, { getPaginationSet, PaginatedResult } from '@/api/http'
-import { rawDataToUser, User } from '@/api/admin/users/getUsers'
+import { User, rawDataToUser } from '@/api/admin/users/getUsers'
+import http, { PaginatedResult, getPaginationSet } from '@/api/http'
 
 export type ApiTokenType = 'application' | 'account'
 
@@ -29,7 +29,11 @@ export interface QueryParams {
 
 export type TokenResponse = PaginatedResult<Token>
 
-const getTokens = async ({ query, perPage = 50, ...params }: QueryParams): Promise<TokenResponse> => {
+const getTokens = async ({
+    query,
+    perPage = 50,
+    ...params
+}: QueryParams): Promise<TokenResponse> => {
     const { data } = await http.get('/api/admin/tokens', {
         params: {
             'filter[*]': query,
diff --git a/resources/scripts/api/admin/tokens/useTokensSWR.ts b/resources/scripts/api/admin/tokens/useTokensSWR.ts
index 52382b9f77b..eaaf9f22b52 100644
--- a/resources/scripts/api/admin/tokens/useTokensSWR.ts
+++ b/resources/scripts/api/admin/tokens/useTokensSWR.ts
@@ -1,8 +1,14 @@
-import getTokens, { QueryParams, TokenResponse } from '@/api/admin/tokens/getTokens'
 import useSWR from 'swr'
 
+import getTokens, {
+    QueryParams,
+    TokenResponse,
+} from '@/api/admin/tokens/getTokens'
+
 const useTokensSWR = ({ page, ...params }: QueryParams) => {
-    return useSWR<TokenResponse>(['admin:tokens', page], () => getTokens({ page, ...params }))
+    return useSWR<TokenResponse>(['admin:tokens', page], () =>
+        getTokens({ page, ...params })
+    )
 }
 
 export default useTokensSWR
diff --git a/resources/scripts/api/admin/tools/queryRemoteFile.ts b/resources/scripts/api/admin/tools/queryRemoteFile.ts
index a2bab75cfdc..e9063c584ac 100644
--- a/resources/scripts/api/admin/tools/queryRemoteFile.ts
+++ b/resources/scripts/api/admin/tools/queryRemoteFile.ts
@@ -12,7 +12,10 @@ const rawDataToFileMetadata = (rawData: any): FileMetadata => ({
     mimeType: rawData.mime_type,
 })
 
-const queryRemoteFile = async (nodeId: number, link: string): Promise<FileMetadata> => {
+const queryRemoteFile = async (
+    nodeId: number,
+    link: string
+): Promise<FileMetadata> => {
     const {
         data: { data },
     } = await http.get(`/api/admin/nodes/${nodeId}/tools/query-remote-file`, {
diff --git a/resources/scripts/api/admin/users/createUser.ts b/resources/scripts/api/admin/users/createUser.ts
index f1fafd765c9..fb633fd4abc 100644
--- a/resources/scripts/api/admin/users/createUser.ts
+++ b/resources/scripts/api/admin/users/createUser.ts
@@ -1,5 +1,5 @@
-import http from '@/api/http'
 import { rawDataToUser } from '@/api/admin/users/getUsers'
+import http from '@/api/http'
 
 interface CreateUserParameters {
     name: string
diff --git a/resources/scripts/api/admin/users/getUser.ts b/resources/scripts/api/admin/users/getUser.ts
index f8f34ff81bc..ef91c61406d 100644
--- a/resources/scripts/api/admin/users/getUser.ts
+++ b/resources/scripts/api/admin/users/getUser.ts
@@ -1,5 +1,5 @@
-import http from '@/api/http'
 import { rawDataToUser } from '@/api/admin/users/getUsers'
+import http from '@/api/http'
 
 const getUser = async (id: number) => {
     const {
diff --git a/resources/scripts/api/admin/users/getUsers.ts b/resources/scripts/api/admin/users/getUsers.ts
index 038aaf3b9fb..557cf21507e 100644
--- a/resources/scripts/api/admin/users/getUsers.ts
+++ b/resources/scripts/api/admin/users/getUsers.ts
@@ -1,4 +1,4 @@
-import http, { getPaginationSet, PaginatedResult } from '@/api/http'
+import http, { PaginatedResult, getPaginationSet } from '@/api/http'
 
 export interface User {
     id: number
@@ -13,7 +13,9 @@ export const rawDataToUser = (data: any): User => ({
     id: data.id,
     name: data.name,
     email: data.email,
-    emailVerifiedAt: data.email_verified_at ? new Date(data.email_verified_at) : null,
+    emailVerifiedAt: data.email_verified_at
+        ? new Date(data.email_verified_at)
+        : null,
     rootAdmin: data.root_admin,
     serversCount: data.servers_count,
 })
@@ -26,7 +28,11 @@ export interface QueryParams {
 
 export type UserResponse = PaginatedResult<User>
 
-const getUsers = async ({ query, perPage = 50, ...params }: QueryParams): Promise<UserResponse> => {
+const getUsers = async ({
+    query,
+    perPage = 50,
+    ...params
+}: QueryParams): Promise<UserResponse> => {
     const { data } = await http.get('/api/admin/users', {
         params: {
             'filter[*]': query,
diff --git a/resources/scripts/api/admin/users/updateUser.ts b/resources/scripts/api/admin/users/updateUser.ts
index 730627a5e7e..794241a2dae 100644
--- a/resources/scripts/api/admin/users/updateUser.ts
+++ b/resources/scripts/api/admin/users/updateUser.ts
@@ -1,5 +1,5 @@
-import http from '@/api/http'
 import { rawDataToUser } from '@/api/admin/users/getUsers'
+import http from '@/api/http'
 
 interface UpdateUserParameters {
     name: string
@@ -8,7 +8,10 @@ interface UpdateUserParameters {
     rootAdmin: boolean
 }
 
-const updateUser = async (userId: number, { rootAdmin, ...payload }: UpdateUserParameters) => {
+const updateUser = async (
+    userId: number,
+    { rootAdmin, ...payload }: UpdateUserParameters
+) => {
     const {
         data: { data },
     } = await http.patch(`/api/admin/users/${userId}`, {
diff --git a/resources/scripts/api/admin/users/useUserSWR.ts b/resources/scripts/api/admin/users/useUserSWR.ts
index d63f306c7e2..e7169ff080b 100644
--- a/resources/scripts/api/admin/users/useUserSWR.ts
+++ b/resources/scripts/api/admin/users/useUserSWR.ts
@@ -1,16 +1,19 @@
-import getUser from '@/api/admin/users/getUser'
-import { User } from '@/api/admin/users/getUsers'
 import { Optimistic } from '@/lib/swr'
 import { useMatch } from 'react-router-dom'
 import useSWR, { Key, SWRResponse } from 'swr'
 
+import getUser from '@/api/admin/users/getUser'
+import { User } from '@/api/admin/users/getUsers'
+
 export const getKey = (id: number): Key => ['admin.users', id]
 
 const useUserSWR = () => {
     const match = useMatch('/admin/users/:id/*')
     const id = parseInt(match!.params.id!)
 
-    return useSWR<User>(getKey(id), () => getUser(id)) as Optimistic<SWRResponse<User, any>>
+    return useSWR<User>(getKey(id), () => getUser(id)) as Optimistic<
+        SWRResponse<User, any>
+    >
 }
 
 export default useUserSWR
diff --git a/resources/scripts/api/admin/users/useUsersSWR.ts b/resources/scripts/api/admin/users/useUsersSWR.ts
index b8c0410f397..a13014b25b1 100644
--- a/resources/scripts/api/admin/users/useUsersSWR.ts
+++ b/resources/scripts/api/admin/users/useUsersSWR.ts
@@ -1,8 +1,11 @@
 import useSWR from 'swr'
+
 import getUsers, { QueryParams, UserResponse } from '@/api/admin/users/getUsers'
 
 const useUsersSWR = ({ page, query, ...params }: QueryParams) => {
-    return useSWR<UserResponse>(['admin:users', page, query], () => getUsers({ page, query, ...params }))
+    return useSWR<UserResponse>(['admin:users', page, query], () =>
+        getUsers({ page, query, ...params })
+    )
 }
 
 export default useUsersSWR
diff --git a/resources/scripts/api/auth/login.ts b/resources/scripts/api/auth/login.ts
index 8742a1e143a..018b688cb8d 100644
--- a/resources/scripts/api/auth/login.ts
+++ b/resources/scripts/api/auth/login.ts
@@ -1,13 +1,13 @@
 import http from '@/api/http'
 
 export interface LoginData {
-  email: string
-  password: string
+    email: string
+    password: string
 }
 
 export default ({ email, password }: LoginData): Promise<any> => {
-  return http.post('/login', {
-    email,
-    password,
-  })
+    return http.post('/login', {
+        email,
+        password,
+    })
 }
diff --git a/resources/scripts/api/getServers.ts b/resources/scripts/api/getServers.ts
index d99aee2e7a4..0cd27532e60 100644
--- a/resources/scripts/api/getServers.ts
+++ b/resources/scripts/api/getServers.ts
@@ -1,5 +1,5 @@
-import http, { getPaginationSet, PaginatedResult } from '@/api/http'
-import { rawDataToServerBuild, ServerBuild } from '@/api/server/getServer'
+import http, { PaginatedResult, getPaginationSet } from '@/api/http'
+import { ServerBuild, rawDataToServerBuild } from '@/api/server/getServer'
 
 interface QueryParams {
     query?: string
@@ -8,7 +8,11 @@ interface QueryParams {
     perPage?: number
 }
 
-export default ({ query, perPage = 50, ...params }: QueryParams): Promise<PaginatedResult<ServerBuild>> => {
+export default ({
+    query,
+    perPage = 50,
+    ...params
+}: QueryParams): Promise<PaginatedResult<ServerBuild>> => {
     return new Promise((resolve, reject) => {
         http.get('/api/client/servers', {
             params: {
@@ -19,7 +23,9 @@ export default ({ query, perPage = 50, ...params }: QueryParams): Promise<Pagina
         })
             .then(({ data }) =>
                 resolve({
-                    items: (data.data || []).map((datum: any) => rawDataToServerBuild(datum)),
+                    items: (data.data || []).map((datum: any) =>
+                        rawDataToServerBuild(datum)
+                    ),
                     pagination: getPaginationSet(data.meta.pagination),
                 })
             )
diff --git a/resources/scripts/api/http.ts b/resources/scripts/api/http.ts
index 33e82764bb8..b445f81458e 100644
--- a/resources/scripts/api/http.ts
+++ b/resources/scripts/api/http.ts
@@ -22,9 +22,12 @@ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 SOFTWARE.
 */
-
+import {
+    completeNavigationProgress,
+    resetNavigationProgress,
+    startNavigationProgress,
+} from '@mantine/nprogress'
 import axios, { AxiosInstance } from 'axios'
-import { startNavigationProgress, completeNavigationProgress, resetNavigationProgress } from '@mantine/nprogress'
 
 const http: AxiosInstance = axios.create({
     withCredentials: true,
@@ -140,10 +143,15 @@ export function getPaginationSet(data: any): PaginationDataSet {
 
 type QueryBuilderFilterValue = string | number | boolean | null
 
-export interface QueryBuilderParams<FilterKeys extends string = string, SortKeys extends string = string> {
+export interface QueryBuilderParams<
+    FilterKeys extends string = string,
+    SortKeys extends string = string,
+> {
     page?: number
     filters?: {
-        [K in FilterKeys]?: QueryBuilderFilterValue | Readonly<QueryBuilderFilterValue[]>
+        [K in FilterKeys]?:
+            | QueryBuilderFilterValue
+            | Readonly<QueryBuilderFilterValue[]>
     }
     sorts?: {
         [K in SortKeys]?: -1 | 0 | 1 | 'asc' | 'desc' | null
@@ -155,14 +163,21 @@ export interface QueryBuilderParams<FilterKeys extends string = string, SortKeys
  * for the Laravel Query Builder package automatically. This will apply sorts and
  * filters deterministically based on the provided values.
  */
-export const withQueryBuilderParams = (data?: QueryBuilderParams): Record<string, unknown> => {
+export const withQueryBuilderParams = (
+    data?: QueryBuilderParams
+): Record<string, unknown> => {
     if (!data) return {}
 
-    const filters = Object.keys(data.filters || {}).reduce((obj, key) => {
-        const value = data.filters?.[key]
+    const filters = Object.keys(data.filters || {}).reduce(
+        (obj, key) => {
+            const value = data.filters?.[key]
 
-        return !value || value === '' ? obj : { ...obj, [`filter[${key}]`]: value }
-    }, {} as NonNullable<QueryBuilderParams['filters']>)
+            return !value || value === ''
+                ? obj
+                : { ...obj, [`filter[${key}]`]: value }
+        },
+        {} as NonNullable<QueryBuilderParams['filters']>
+    )
 
     const sorts = Object.keys(data.sorts || {}).reduce((arr, key) => {
         const value = data.sorts?.[key]
diff --git a/resources/scripts/api/server/backups/createBackup.ts b/resources/scripts/api/server/backups/createBackup.ts
index 326e712caf3..6ed45d3ede0 100644
--- a/resources/scripts/api/server/backups/createBackup.ts
+++ b/resources/scripts/api/server/backups/createBackup.ts
@@ -8,7 +8,10 @@ export interface RequestParameters {
     compressionType: 'none' | 'lzo' | 'gzip' | 'zstd'
 }
 
-export default async (uuid: string, params: RequestParameters): Promise<Backup> => {
+export default async (
+    uuid: string,
+    params: RequestParameters
+): Promise<Backup> => {
     const {
         data: { data },
     } = await http.post(`/api/client/servers/${uuid}/backups/`, {
diff --git a/resources/scripts/api/server/backups/deleteBackup.ts b/resources/scripts/api/server/backups/deleteBackup.ts
index 01f48d23f38..c9b2031ac8c 100644
--- a/resources/scripts/api/server/backups/deleteBackup.ts
+++ b/resources/scripts/api/server/backups/deleteBackup.ts
@@ -1,9 +1,9 @@
-import http from '@/api/http';
+import http from '@/api/http'
 
 export default (uuid: string, backup: string): Promise<void> => {
     return new Promise((resolve, reject) => {
         http.delete(`/api/client/servers/${uuid}/backups/${backup}`)
             .then(() => resolve())
-            .catch(reject);
-    });
-};
+            .catch(reject)
+    })
+}
diff --git a/resources/scripts/api/server/backups/getBackups.ts b/resources/scripts/api/server/backups/getBackups.ts
index 635c08f556a..cdb7233cfd1 100644
--- a/resources/scripts/api/server/backups/getBackups.ts
+++ b/resources/scripts/api/server/backups/getBackups.ts
@@ -1,4 +1,8 @@
-import http, { FractalResponseData, getPaginationSet, PaginatedResult } from '@/api/http'
+import http, {
+    FractalResponseData,
+    PaginatedResult,
+    getPaginationSet,
+} from '@/api/http'
 
 interface QueryParams {
     query?: string
@@ -28,26 +32,27 @@ export const rawDataToBackupObject = (data: FractalResponseData): Backup => ({
 
 export type BackupResponse = PaginatedResult<Backup> & { backupCount: number }
 
-export default (uuid: string, {
-    query,
-    perPage = 10,
-    ...params
-}: QueryParams): Promise<BackupResponse> => {
+export default (
+    uuid: string,
+    { query, perPage = 10, ...params }: QueryParams
+): Promise<BackupResponse> => {
     return new Promise((resolve, reject) => {
         http.get(`/api/client/servers/${uuid}/backups`, {
             params: {
-              'filter[name]': query,
-              per_page: perPage,
-              ...params,
+                'filter[name]': query,
+                'per_page': perPage,
+                ...params,
             },
         })
-        .then(({ data }) => resolve({
-            items: (data.data || []).map((datum: any) =>
-            rawDataToBackupObject(datum)
-          ),
-          pagination: getPaginationSet(data.meta.pagination),
-          backupCount: data.meta.backup_count
-        }))
-        .catch(reject)
+            .then(({ data }) =>
+                resolve({
+                    items: (data.data || []).map((datum: any) =>
+                        rawDataToBackupObject(datum)
+                    ),
+                    pagination: getPaginationSet(data.meta.pagination),
+                    backupCount: data.meta.backup_count,
+                })
+            )
+            .catch(reject)
     })
-}
\ No newline at end of file
+}
diff --git a/resources/scripts/api/server/backups/restoreBackup.ts b/resources/scripts/api/server/backups/restoreBackup.ts
index 318a86a2804..9c6c9c678a9 100644
--- a/resources/scripts/api/server/backups/restoreBackup.ts
+++ b/resources/scripts/api/server/backups/restoreBackup.ts
@@ -1,9 +1,9 @@
-import http from '@/api/http';
+import http from '@/api/http'
 
 export default (uuid: string, backup: string): Promise<void> => {
     return new Promise((resolve, reject) => {
         http.post(`/api/client/servers/${uuid}/backups/${backup}/restore`)
             .then(() => resolve())
-            .catch(reject);
-    });
-};
+            .catch(reject)
+    })
+}
diff --git a/resources/scripts/api/server/createConsoleSession.ts b/resources/scripts/api/server/createConsoleSession.ts
index 17c4d96ce8a..8ef29d84217 100644
--- a/resources/scripts/api/server/createConsoleSession.ts
+++ b/resources/scripts/api/server/createConsoleSession.ts
@@ -17,7 +17,9 @@ interface ConsoleCredentialsWithCoterm {
     token: string
 }
 
-export type ConsoleCredentials = ConsoleCredentialsWithoutCoterm | ConsoleCredentialsWithCoterm
+export type ConsoleCredentials =
+    | ConsoleCredentialsWithoutCoterm
+    | ConsoleCredentialsWithCoterm
 
 export const rawDataToConsoleCredentials = (data: any): ConsoleCredentials => {
     if (data.is_tls_enabled !== undefined) {
@@ -38,12 +40,17 @@ export const rawDataToConsoleCredentials = (data: any): ConsoleCredentials => {
     }
 }
 
-export default (uuid: string, consoleType: ConsoleType): Promise<ConsoleCredentials> => {
+export default (
+    uuid: string,
+    consoleType: ConsoleType
+): Promise<ConsoleCredentials> => {
     return new Promise((resolve, reject) => {
         http.post(`/api/client/servers/${uuid}/create-console-session`, {
             type: consoleType,
         })
-            .then(({ data: { data } }) => resolve(rawDataToConsoleCredentials(data)))
+            .then(({ data: { data } }) =>
+                resolve(rawDataToConsoleCredentials(data))
+            )
             .catch(reject)
     })
 }
diff --git a/resources/scripts/api/server/getServer.ts b/resources/scripts/api/server/getServer.ts
index 724e9c9504a..0a1e2de7c57 100644
--- a/resources/scripts/api/server/getServer.ts
+++ b/resources/scripts/api/server/getServer.ts
@@ -92,7 +92,11 @@ export const rawDataToServerBuild = (data: any): ServerBuild => ({
     name: data.name,
     status: data.status,
     nodeId: data.node_id,
-    description: data.description ? (data.description.length > 0 ? data.description : null) : null,
+    description: data.description
+        ? data.description.length > 0
+            ? data.description
+            : null
+        : null,
     usages: {
         bandwidth: data.usages.bandwidth,
     },
@@ -104,8 +108,12 @@ export const rawDataToServerBuild = (data: any): ServerBuild => ({
         backups: data.limits.backups,
         bandwidth: data.limits.bandwidth,
         addresses: {
-            ipv4: data.limits.addresses.ipv4.map((address: any) => rawDataToAddress(address)),
-            ipv6: data.limits.addresses.ipv6.map((address: any) => rawDataToAddress(address)),
+            ipv4: data.limits.addresses.ipv4.map((address: any) =>
+                rawDataToAddress(address)
+            ),
+            ipv6: data.limits.addresses.ipv6.map((address: any) =>
+                rawDataToAddress(address)
+            ),
         },
         macAddress: data.limits.mac_address,
     },
diff --git a/resources/scripts/api/server/getState.ts b/resources/scripts/api/server/getState.ts
index 78054e685da..a300df900a4 100644
--- a/resources/scripts/api/server/getState.ts
+++ b/resources/scripts/api/server/getState.ts
@@ -21,7 +21,9 @@ export const rawDataToServerStateData = (data: any) => ({
 const getState = (uuid: string): Promise<ServerStateData> => {
     return new Promise((resolve, reject) => {
         http.get(`/api/client/servers/${uuid}/state`)
-            .then(({ data: { data } }) => resolve(rawDataToServerStateData(data)))
+            .then(({ data: { data } }) =>
+                resolve(rawDataToServerStateData(data))
+            )
             .catch(reject)
     })
 }
diff --git a/resources/scripts/api/server/settings/getBootOrder.ts b/resources/scripts/api/server/settings/getBootOrder.ts
index 11eca18e87d..68f8e723b3d 100644
--- a/resources/scripts/api/server/settings/getBootOrder.ts
+++ b/resources/scripts/api/server/settings/getBootOrder.ts
@@ -14,7 +14,9 @@ const rawDataToBootOrderSettings = (data: any): BootOrderSettings => ({
 export default async (uuid: string): Promise<BootOrderSettings> => {
     const {
         data: { data },
-    } = await http.get(`/api/client/servers/${uuid}/settings/hardware/boot-order`)
+    } = await http.get(
+        `/api/client/servers/${uuid}/settings/hardware/boot-order`
+    )
 
     return rawDataToBootOrderSettings(data)
 }
diff --git a/resources/scripts/api/server/settings/getIsos.ts b/resources/scripts/api/server/settings/getIsos.ts
index 2d3be37cc7b..6256850ad98 100644
--- a/resources/scripts/api/server/settings/getIsos.ts
+++ b/resources/scripts/api/server/settings/getIsos.ts
@@ -14,7 +14,9 @@ export const rawDataToMedia = (data: any): Iso => data
 const getIsos = async (serverUuid: string): Promise<Iso[]> => {
     const {
         data: { data },
-    } = await http.get(`/api/client/servers/${serverUuid}/settings/hardware/isos`)
+    } = await http.get(
+        `/api/client/servers/${serverUuid}/settings/hardware/isos`
+    )
 
     return data.map(rawDataToMedia)
 }
diff --git a/resources/scripts/api/server/settings/getNetwork.ts b/resources/scripts/api/server/settings/getNetwork.ts
index 615629d793b..ae64d6945e1 100644
--- a/resources/scripts/api/server/settings/getNetwork.ts
+++ b/resources/scripts/api/server/settings/getNetwork.ts
@@ -5,7 +5,9 @@ export interface NetworkSettings {
 }
 
 export default async (uuid: string): Promise<NetworkSettings> => {
-    const { data: { data } } = await http.get(`/api/client/servers/${uuid}/settings/network`)
+    const {
+        data: { data },
+    } = await http.get(`/api/client/servers/${uuid}/settings/network`)
 
     return data
-}
\ No newline at end of file
+}
diff --git a/resources/scripts/api/server/settings/getSecurity.ts b/resources/scripts/api/server/settings/getSecurity.ts
index 2cb5c468b2a..06f59d53c97 100644
--- a/resources/scripts/api/server/settings/getSecurity.ts
+++ b/resources/scripts/api/server/settings/getSecurity.ts
@@ -5,11 +5,13 @@ export interface SecuritySettings {
 }
 
 const rawDataToSecurityObject = (data: any): SecuritySettings => ({
-    sshKeys: data.ssh_keys
+    sshKeys: data.ssh_keys,
 })
 
 export default async (uuid: string): Promise<SecuritySettings> => {
-    const { data: { data } } = await http.get(`/api/client/servers/${uuid}/settings/security`)
+    const {
+        data: { data },
+    } = await http.get(`/api/client/servers/${uuid}/settings/security`)
 
     return rawDataToSecurityObject(data)
-}
\ No newline at end of file
+}
diff --git a/resources/scripts/api/server/settings/getTemplateGroups.ts b/resources/scripts/api/server/settings/getTemplateGroups.ts
index 0b2749408af..1d46d3f9cb9 100644
--- a/resources/scripts/api/server/settings/getTemplateGroups.ts
+++ b/resources/scripts/api/server/settings/getTemplateGroups.ts
@@ -33,7 +33,9 @@ export const rawDataToTemplate = (data: any): Template => ({
 const getTemplateGroups = async (serverUuid: string) => {
     const {
         data: { data },
-    } = await http.get(`/api/client/servers/${serverUuid}/settings/template-groups`)
+    } = await http.get(
+        `/api/client/servers/${serverUuid}/settings/template-groups`
+    )
 
     return data.map(rawDataToTemplateGroup)
 }
diff --git a/resources/scripts/api/server/settings/mountMedia.ts b/resources/scripts/api/server/settings/mountMedia.ts
index 70ed9a0db88..0c40a30fdeb 100644
--- a/resources/scripts/api/server/settings/mountMedia.ts
+++ b/resources/scripts/api/server/settings/mountMedia.ts
@@ -1,7 +1,9 @@
 import http from '@/api/http'
 
 const mountMedia = (serverUuid: string, mediaUuid: string) => {
-    return http.post(`/api/client/servers/${serverUuid}/settings/hardware/isos/${mediaUuid}/mount`)
+    return http.post(
+        `/api/client/servers/${serverUuid}/settings/hardware/isos/${mediaUuid}/mount`
+    )
 }
 
 export default mountMedia
diff --git a/resources/scripts/api/server/settings/reinstallServer.ts b/resources/scripts/api/server/settings/reinstallServer.ts
index 99370d37cd9..7c4c3b37d96 100644
--- a/resources/scripts/api/server/settings/reinstallServer.ts
+++ b/resources/scripts/api/server/settings/reinstallServer.ts
@@ -8,7 +8,11 @@ interface ReinstallServerParameters {
 
 const reinstallServer = (
     serverUuid: string,
-    { templateUuid, accountPassword, startOnCompletion }: ReinstallServerParameters
+    {
+        templateUuid,
+        accountPassword,
+        startOnCompletion,
+    }: ReinstallServerParameters
 ) => {
     return http.post(`/api/client/servers/${serverUuid}/settings/reinstall`, {
         template_uuid: templateUuid,
diff --git a/resources/scripts/api/server/settings/renameServer.ts b/resources/scripts/api/server/settings/renameServer.ts
index f5b505a2093..d42cc4300d0 100644
--- a/resources/scripts/api/server/settings/renameServer.ts
+++ b/resources/scripts/api/server/settings/renameServer.ts
@@ -7,6 +7,6 @@ interface Payload {
 
 export default (uuid: string, payload: Payload) => {
     return http.post(`/api/client/servers/${uuid}/settings/rename`, {
-        ...payload
+        ...payload,
     })
-}
\ No newline at end of file
+}
diff --git a/resources/scripts/api/server/settings/unmountMedia.ts b/resources/scripts/api/server/settings/unmountMedia.ts
index 31ded727224..7b692c43e98 100644
--- a/resources/scripts/api/server/settings/unmountMedia.ts
+++ b/resources/scripts/api/server/settings/unmountMedia.ts
@@ -1,7 +1,9 @@
 import http from '@/api/http'
 
 const unmountMedia = (serverUuid: string, mediaUuid: string) => {
-    return http.post(`/api/client/servers/${serverUuid}/settings/hardware/isos/${mediaUuid}/unmount`)
+    return http.post(
+        `/api/client/servers/${serverUuid}/settings/hardware/isos/${mediaUuid}/unmount`
+    )
 }
 
 export default unmountMedia
diff --git a/resources/scripts/api/server/settings/updateBootOrder.ts b/resources/scripts/api/server/settings/updateBootOrder.ts
index 76de95d3c8b..c5ccba94135 100644
--- a/resources/scripts/api/server/settings/updateBootOrder.ts
+++ b/resources/scripts/api/server/settings/updateBootOrder.ts
@@ -1,7 +1,10 @@
 import http from '@/api/http'
 
 export default (uuid: string, order: string[]) => {
-    return http.put(`/api/client/servers/${uuid}/settings/hardware/boot-order`, {
-        order,
-    })
+    return http.put(
+        `/api/client/servers/${uuid}/settings/hardware/boot-order`,
+        {
+            order,
+        }
+    )
 }
diff --git a/resources/scripts/api/server/settings/updateNetwork.ts b/resources/scripts/api/server/settings/updateNetwork.ts
index deab3425cc3..d96f33ad22d 100644
--- a/resources/scripts/api/server/settings/updateNetwork.ts
+++ b/resources/scripts/api/server/settings/updateNetwork.ts
@@ -1,8 +1,7 @@
 import http from '@/api/http'
 
-
 export default (uuid: string, nameservers: string[]) => {
     return http.put(`/api/client/servers/${uuid}/settings/network`, {
-        nameservers
+        nameservers,
     })
-}
\ No newline at end of file
+}
diff --git a/resources/scripts/api/server/settings/useBootOrderSWR.ts b/resources/scripts/api/server/settings/useBootOrderSWR.ts
index 9d59dae34fe..0ec08a86a3e 100644
--- a/resources/scripts/api/server/settings/useBootOrderSWR.ts
+++ b/resources/scripts/api/server/settings/useBootOrderSWR.ts
@@ -1,5 +1,8 @@
 import useSWR, { SWRConfiguration } from 'swr'
-import getBootOrder, { BootOrderSettings } from '@/api/server/settings/getBootOrder'
+
+import getBootOrder, {
+    BootOrderSettings,
+} from '@/api/server/settings/getBootOrder'
 
 const useBootOrderSWR = (serverUuid: string, config?: SWRConfiguration) => {
     return useSWR<BootOrderSettings>(
diff --git a/resources/scripts/api/server/settings/useIsosSWR.ts b/resources/scripts/api/server/settings/useIsosSWR.ts
index d5da486a8f6..7745201e732 100644
--- a/resources/scripts/api/server/settings/useIsosSWR.ts
+++ b/resources/scripts/api/server/settings/useIsosSWR.ts
@@ -1,8 +1,11 @@
 import useSWR from 'swr'
+
 import getIsos, { Iso } from '@/api/server/settings/getIsos'
 
 const useIsosSWR = (serverUuid: string) => {
-    return useSWR<Iso[]>(['server:settings:hardware:media', serverUuid], () => getIsos(serverUuid))
+    return useSWR<Iso[]>(['server:settings:hardware:media', serverUuid], () =>
+        getIsos(serverUuid)
+    )
 }
 
 export default useIsosSWR
diff --git a/resources/scripts/api/server/settings/useTemplateGroupsSWR.ts b/resources/scripts/api/server/settings/useTemplateGroupsSWR.ts
index ed154f82441..222d743cdd3 100644
--- a/resources/scripts/api/server/settings/useTemplateGroupsSWR.ts
+++ b/resources/scripts/api/server/settings/useTemplateGroupsSWR.ts
@@ -1,9 +1,13 @@
 import useSWR from 'swr'
-import getTemplateGroups, { TemplateGroup } from '@/api/server/settings/getTemplateGroups'
+
+import getTemplateGroups, {
+    TemplateGroup,
+} from '@/api/server/settings/getTemplateGroups'
 
 const useTemplateGroupsSWR = (serverUuid: string) => {
-    return useSWR<TemplateGroup[]>(['server:settings:general:template-groups', serverUuid], () =>
-        getTemplateGroups(serverUuid)
+    return useSWR<TemplateGroup[]>(
+        ['server:settings:general:template-groups', serverUuid],
+        () => getTemplateGroups(serverUuid)
     )
 }
 
diff --git a/resources/scripts/api/server/useServerDetails.ts b/resources/scripts/api/server/useServerDetails.ts
index 6f6a3350a25..a9cc9248fca 100644
--- a/resources/scripts/api/server/useServerDetails.ts
+++ b/resources/scripts/api/server/useServerDetails.ts
@@ -1,7 +1,8 @@
 import { ServerContext } from '@/state/server'
-import { ServerState } from '@/api/server/getState'
 import useSWR from 'swr'
+
 import http from '@/api/http'
+import { ServerState } from '@/api/server/getState'
 
 export interface BaseDisk {
     interface: string
diff --git a/resources/scripts/assets/css/preflight.css b/resources/scripts/assets/css/preflight.css
index ffb049fb149..8d185ba1e10 100644
--- a/resources/scripts/assets/css/preflight.css
+++ b/resources/scripts/assets/css/preflight.css
@@ -6,15 +6,15 @@
 *,
 ::before,
 ::after {
-  box-sizing: border-box; /* 1 */
-  border-width: 0; /* 2 */
-  border-style: solid; /* 2 */
-  border-color: theme('borderColor.DEFAULT', 'currentColor'); /* 2 */
+    box-sizing: border-box; /* 1 */
+    border-width: 0; /* 2 */
+    border-style: solid; /* 2 */
+    border-color: theme('borderColor.DEFAULT', 'currentColor'); /* 2 */
 }
 
 ::before,
 ::after {
-  --tw-content: '';
+    --tw-content: '';
 }
 
 /*
@@ -25,11 +25,27 @@
 */
 
 html {
-  line-height: 1.5; /* 1 */
-  -webkit-text-size-adjust: 100%; /* 2 */
-  -moz-tab-size: 4; /* 3 */
-  tab-size: 4; /* 3 */
-  font-family: theme('fontFamily.sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"); /* 4 */
+    line-height: 1.5; /* 1 */
+    -webkit-text-size-adjust: 100%; /* 2 */
+    -moz-tab-size: 4; /* 3 */
+    tab-size: 4; /* 3 */
+    font-family: theme(
+        'fontFamily.sans',
+        ui-sans-serif,
+        system-ui,
+        -apple-system,
+        BlinkMacSystemFont,
+        'Segoe UI',
+        Roboto,
+        'Helvetica Neue',
+        Arial,
+        'Noto Sans',
+        sans-serif,
+        'Apple Color Emoji',
+        'Segoe UI Emoji',
+        'Segoe UI Symbol',
+        'Noto Color Emoji'
+    ); /* 4 */
 }
 
 /*
@@ -38,8 +54,8 @@ html {
 */
 
 body {
-  margin: 0; /* 1 */
-  line-height: inherit; /* 2 */
+    margin: 0; /* 1 */
+    line-height: inherit; /* 2 */
 }
 
 /*
@@ -49,9 +65,9 @@ body {
 */
 
 hr {
-  height: 0; /* 1 */
-  color: inherit; /* 2 */
-  border-top-width: 1px; /* 3 */
+    height: 0; /* 1 */
+    color: inherit; /* 2 */
+    border-top-width: 1px; /* 3 */
 }
 
 /*
@@ -59,7 +75,7 @@ Add the correct text decoration in Chrome, Edge, and Safari.
 */
 
 abbr:where([title]) {
-  text-decoration: underline dotted;
+    text-decoration: underline dotted;
 }
 
 /*
@@ -72,8 +88,8 @@ h3,
 h4,
 h5,
 h6 {
-  font-size: inherit;
-  font-weight: inherit;
+    font-size: inherit;
+    font-weight: inherit;
 }
 
 /*
@@ -81,8 +97,8 @@ Reset links to optimize for opt-in styling instead of opt-out.
 */
 
 a {
-  color: inherit;
-  text-decoration: inherit;
+    color: inherit;
+    text-decoration: inherit;
 }
 
 /*
@@ -91,7 +107,7 @@ Add the correct font weight in Edge and Safari.
 
 b,
 strong {
-  font-weight: bolder;
+    font-weight: bolder;
 }
 
 /*
@@ -103,8 +119,18 @@ code,
 kbd,
 samp,
 pre {
-  font-family: theme('fontFamily.mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace); /* 1 */
-  font-size: 1em; /* 2 */
+    font-family: theme(
+        'fontFamily.mono',
+        ui-monospace,
+        SFMono-Regular,
+        Menlo,
+        Monaco,
+        Consolas,
+        'Liberation Mono',
+        'Courier New',
+        monospace
+    ); /* 1 */
+    font-size: 1em; /* 2 */
 }
 
 /*
@@ -112,7 +138,7 @@ Add the correct font size in all browsers.
 */
 
 small {
-  font-size: 80%;
+    font-size: 80%;
 }
 
 /*
@@ -121,18 +147,18 @@ Prevent `sub` and `sup` elements from affecting the line height in all browsers.
 
 sub,
 sup {
-  font-size: 75%;
-  line-height: 0;
-  position: relative;
-  vertical-align: baseline;
+    font-size: 75%;
+    line-height: 0;
+    position: relative;
+    vertical-align: baseline;
 }
 
 sub {
-  bottom: -0.25em;
+    bottom: -0.25em;
 }
 
 sup {
-  top: -0.5em;
+    top: -0.5em;
 }
 
 /*
@@ -142,9 +168,9 @@ sup {
 */
 
 table {
-  text-indent: 0; /* 1 */
-  border-color: inherit; /* 2 */
-  border-collapse: collapse; /* 3 */
+    text-indent: 0; /* 1 */
+    border-color: inherit; /* 2 */
+    border-collapse: collapse; /* 3 */
 }
 
 /*
@@ -158,12 +184,12 @@ input,
 optgroup,
 select,
 textarea {
-  font-family: inherit; /* 1 */
-  font-size: 100%; /* 1 */
-  line-height: inherit; /* 1 */
-  color: inherit; /* 1 */
-  margin: 0; /* 2 */
-  padding: 0; /* 3 */
+    font-family: inherit; /* 1 */
+    font-size: 100%; /* 1 */
+    line-height: inherit; /* 1 */
+    color: inherit; /* 1 */
+    margin: 0; /* 2 */
+    padding: 0; /* 3 */
 }
 
 /*
@@ -172,7 +198,7 @@ Remove the inheritance of text transform in Edge and Firefox.
 
 button,
 select {
-  text-transform: none;
+    text-transform: none;
 }
 
 /*
@@ -184,8 +210,8 @@ button,
 [type='button'],
 [type='reset'],
 [type='submit'] {
-  -webkit-appearance: button; /* 1 */
-  background-image: none; /* 2 */
+    -webkit-appearance: button; /* 1 */
+    background-image: none; /* 2 */
 }
 
 /*
@@ -193,7 +219,7 @@ Use the modern Firefox focus style for all focusable elements.
 */
 
 :-moz-focusring {
-  outline: auto;
+    outline: auto;
 }
 
 /*
@@ -201,7 +227,7 @@ Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/
 */
 
 :-moz-ui-invalid {
-  box-shadow: none;
+    box-shadow: none;
 }
 
 /*
@@ -209,7 +235,7 @@ Add the correct vertical alignment in Chrome and Firefox.
 */
 
 progress {
-  vertical-align: baseline;
+    vertical-align: baseline;
 }
 
 /*
@@ -218,7 +244,7 @@ Correct the cursor style of increment and decrement buttons in Safari.
 
 ::-webkit-inner-spin-button,
 ::-webkit-outer-spin-button {
-  height: auto;
+    height: auto;
 }
 
 /*
@@ -227,8 +253,8 @@ Correct the cursor style of increment and decrement buttons in Safari.
 */
 
 [type='search'] {
-  -webkit-appearance: textfield; /* 1 */
-  outline-offset: -2px; /* 2 */
+    -webkit-appearance: textfield; /* 1 */
+    outline-offset: -2px; /* 2 */
 }
 
 /*
@@ -236,7 +262,7 @@ Remove the inner padding in Chrome and Safari on macOS.
 */
 
 ::-webkit-search-decoration {
-  -webkit-appearance: none;
+    -webkit-appearance: none;
 }
 
 /*
@@ -245,8 +271,8 @@ Remove the inner padding in Chrome and Safari on macOS.
 */
 
 ::-webkit-file-upload-button {
-  -webkit-appearance: button; /* 1 */
-  font: inherit; /* 2 */
+    -webkit-appearance: button; /* 1 */
+    font: inherit; /* 2 */
 }
 
 /*
@@ -254,7 +280,7 @@ Add the correct display in Chrome and Safari.
 */
 
 summary {
-  display: list-item;
+    display: list-item;
 }
 
 /*
@@ -274,24 +300,24 @@ hr,
 figure,
 p,
 pre {
-  margin: 0;
+    margin: 0;
 }
 
 fieldset {
-  margin: 0;
-  padding: 0;
+    margin: 0;
+    padding: 0;
 }
 
 legend {
-  padding: 0;
+    padding: 0;
 }
 
 ol,
 ul,
 menu {
-  list-style: none;
-  margin: 0;
-  padding: 0;
+    list-style: none;
+    margin: 0;
+    padding: 0;
 }
 
 /*
@@ -299,7 +325,7 @@ Prevent resizing textareas horizontally by default.
 */
 
 textarea {
-  resize: vertical;
+    resize: vertical;
 }
 
 /*
@@ -309,8 +335,8 @@ textarea {
 
 input::placeholder,
 textarea::placeholder {
-  opacity: 1; /* 1 */
-  color: theme('colors.gray.400', #9ca3af); /* 2 */
+    opacity: 1; /* 1 */
+    color: theme('colors.gray.400', #9ca3af); /* 2 */
 }
 
 /*
@@ -318,15 +344,15 @@ Set the default cursor for buttons.
 */
 
 button,
-[role="button"] {
-  cursor: pointer;
+[role='button'] {
+    cursor: pointer;
 }
 
 /*
 Make sure disabled buttons don't get the pointer cursor.
 */
 :disabled {
-  cursor: default;
+    cursor: default;
 }
 
 /*
@@ -343,8 +369,8 @@ audio,
 iframe,
 embed,
 object {
-  display: block; /* 1 */
-  vertical-align: middle; /* 2 */
+    display: block; /* 1 */
+    vertical-align: middle; /* 2 */
 }
 
 /*
@@ -353,8 +379,8 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
 
 img,
 video {
-  max-width: 100%;
-  height: auto;
+    max-width: 100%;
+    height: auto;
 }
 
 /*
@@ -362,5 +388,5 @@ Ensure the default browser behavior of the `hidden` attribute.
 */
 
 [hidden] {
-  display: none;
-}
\ No newline at end of file
+    display: none;
+}
diff --git a/resources/scripts/assets/css/tailwind.css b/resources/scripts/assets/css/tailwind.css
index 6b2da1e3dab..e730790e180 100644
--- a/resources/scripts/assets/css/tailwind.css
+++ b/resources/scripts/assets/css/tailwind.css
@@ -3,56 +3,57 @@
 @tailwind utilities;
 
 @layer base {
-  :root {
-    --color-success-lighter: #d3e5ff;
-    --color-success-light: #3291ff;
-    --color-success: #0070f3;
-    --color-success-dark: #0761d1;
-    --color-error-lighter: #f7d4d6;
-    --color-error-light: #ff1a1a;
-    --color-error: #e00;
-    --color-error-dark: #c50000;
-    --color-warning-lighter: #ffefcf;
-    --color-warning-light: #f7b955;
-    --color-warning: #f5a623;
-    --color-warning-dark: #ab570a;
-    --color-foreground: #000;
-    --color-background: #fff;
-    --color-accent-1: #fafafa;
-    --color-accent-2: #eaeaea;
-    --color-accent-3: #999999;
-    --color-accent-4: #888888;
-    --color-accent-5: #666666;
-    --color-accent-6: #444444;
-    --color-accent-7: #333333;
-    --color-accent-8: #111111;
-  }
-
-  .dark {
-    --color-success-lighter: #001d7a;
-    --color-error-lighter: rgb(85, 0, 0);
-    --color-error-light: #f33;
-    --color-error: red;
-    --color-error-dark: #e60000;
-    --color-foreground: #fff;
-    --color-background: #000;
-    --color-accent-1: #111111;
-    --color-accent-2: #333333;
-    --color-accent-3: #444444;
-    --color-accent-4: #666666;
-    --color-accent-5: #888888;
-    --color-accent-6: #999999;
-    --color-accent-7: #eaeaea;
-    --color-accent-8: #fafafa;
-  }
-}
-
-html, #root {
-  @apply min-h-screen
+    :root {
+        --color-success-lighter: #d3e5ff;
+        --color-success-light: #3291ff;
+        --color-success: #0070f3;
+        --color-success-dark: #0761d1;
+        --color-error-lighter: #f7d4d6;
+        --color-error-light: #ff1a1a;
+        --color-error: #e00;
+        --color-error-dark: #c50000;
+        --color-warning-lighter: #ffefcf;
+        --color-warning-light: #f7b955;
+        --color-warning: #f5a623;
+        --color-warning-dark: #ab570a;
+        --color-foreground: #000;
+        --color-background: #fff;
+        --color-accent-1: #fafafa;
+        --color-accent-2: #eaeaea;
+        --color-accent-3: #999999;
+        --color-accent-4: #888888;
+        --color-accent-5: #666666;
+        --color-accent-6: #444444;
+        --color-accent-7: #333333;
+        --color-accent-8: #111111;
+    }
+
+    .dark {
+        --color-success-lighter: #001d7a;
+        --color-error-lighter: rgb(85, 0, 0);
+        --color-error-light: #f33;
+        --color-error: red;
+        --color-error-dark: #e60000;
+        --color-foreground: #fff;
+        --color-background: #000;
+        --color-accent-1: #111111;
+        --color-accent-2: #333333;
+        --color-accent-3: #444444;
+        --color-accent-4: #666666;
+        --color-accent-5: #888888;
+        --color-accent-6: #999999;
+        --color-accent-7: #eaeaea;
+        --color-accent-8: #fafafa;
+    }
+}
+
+html,
+#root {
+    @apply min-h-screen;
 }
 
 body {
-  @apply bg-accent-100 text-accent-500 overflow-x-hidden h-full;
+    @apply bg-accent-100 text-accent-500 overflow-x-hidden h-full;
 }
 
 input,
@@ -60,114 +61,114 @@ textarea,
 button,
 select,
 a {
-  -webkit-tap-highlight-color: rgba(0,0,0,0);
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 }
 
 .description {
-  @apply text-accent-500;
+    @apply text-accent-500;
 }
 
 .description-small {
-  @apply text-accent-500 text-sm;
+    @apply text-accent-500 text-sm;
 }
 
 .dt {
-  @apply text-accent-500 text-xs font-medium uppercase tracking-wide;
+    @apply text-accent-500 text-xs font-medium uppercase tracking-wide;
 }
 
 .dd {
-  @apply text-black mt-1 font-medium;
+    @apply text-black mt-1 font-medium;
 }
 
 .h5 {
-  @apply text-base font-semibold text-foreground;
+    @apply text-base font-semibold text-foreground;
 }
 
 .h6 {
-  @apply text-base font-medium text-accent-700
+    @apply text-base font-medium text-accent-700;
 }
 
 @media screen and (min-width: 640px) {
-  .nav-link::before {
-    content: '';
-    display: block;
-    position: absolute;
-    width: 100%;
-    height: 70%;
-    @apply bg-transparent -z-[1] rounded transition-colors
-  }
+    .nav-link::before {
+        content: '';
+        display: block;
+        position: absolute;
+        width: 100%;
+        height: 70%;
+        @apply bg-transparent -z-[1] rounded transition-colors;
+    }
 
-  .nav-link:hover::before {
-    @apply bg-accent-200
-  }
+    .nav-link:hover::before {
+        @apply bg-accent-200;
+    }
 }
 
 .nav-link-active::after {
-  content: '';
-  display: block;
-  position: absolute;
-  left: 9px;
-  right: 9px;
-  bottom: 0;
-  height: 0;
-  border-bottom: 2px solid;
-  @apply border-foreground
+    content: '';
+    display: block;
+    position: absolute;
+    left: 9px;
+    right: 9px;
+    bottom: 0;
+    height: 0;
+    border-bottom: 2px solid;
+    @apply border-foreground;
 }
 
 .scrollbar-hide::-webkit-scrollbar {
-  display: none;
+    display: none;
 }
 
 /* For IE, Edge and Firefox */
 .scrollbar-hide {
-  -ms-overflow-style: none;  /* IE and Edge */
-  scrollbar-width: none;  /* Firefox */
+    -ms-overflow-style: none; /* IE and Edge */
+    scrollbar-width: none; /* Firefox */
 }
 
 .fade-enter,
 .fade-exit,
 .fade-appear {
-  will-change: opacity;
+    will-change: opacity;
 }
 
 .fade-enter,
 .fade-appear {
-  @apply opacity-0;
+    @apply opacity-0;
 }
 
 .fade-enter-active,
 .fade-appear-active {
-  @apply opacity-100 transition-opacity ease-in;
-  transition-duration: 150ms;
+    @apply opacity-100 transition-opacity ease-in;
+    transition-duration: 150ms;
 }
 
 .fade-exit {
-  @apply opacity-100;
+    @apply opacity-100;
 }
 
 .fade-exit-active {
-  @apply opacity-0 transition-opacity ease-in;
-  transition-duration: 150ms;
+    @apply opacity-0 transition-opacity ease-in;
+    transition-duration: 150ms;
 }
 
 .sr-only {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0,0,0,0);
-  white-space: nowrap;
-  border-width: 0;
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border-width: 0;
 }
 
 .transition-border {
-  transition-property: border-color;
-  transition-duration: 150ms;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    transition-property: border-color;
+    transition-duration: 150ms;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 .link {
-  @apply border-b border-dashed border-accent-300
-}
\ No newline at end of file
+    @apply border-b border-dashed border-accent-300;
+}
diff --git a/resources/scripts/components/App.tsx b/resources/scripts/components/App.tsx
index 6fa6b5540cb..e285a79c85f 100644
--- a/resources/scripts/components/App.tsx
+++ b/resources/scripts/components/App.tsx
@@ -1,11 +1,19 @@
+import router from '@/routers/router'
 import { store } from '@/state'
-import { StoreProvider } from 'easy-peasy'
-import { BrowserRouter, createBrowserRouter, Route, RouterProvider, Routes } from 'react-router-dom'
-import ThemeProvider from '@/components/ThemeProvider'
 import { NavigationProgress } from '@mantine/nprogress'
-import router from '@/routers/router'
+import { StoreProvider } from 'easy-peasy'
+import {
+    BrowserRouter,
+    Route,
+    RouterProvider,
+    Routes,
+    createBrowserRouter,
+} from 'react-router-dom'
+
 import Spinner from '@/components/elements/Spinner'
 
+import ThemeProvider from '@/components/ThemeProvider'
+
 interface ExtendedWindow extends Window {
     ConvoyUser?: {
         name: string
@@ -36,7 +44,8 @@ const App = () => {
         store.getActions().settings.setSettings({
             theme:
                 localStorage.theme === 'dark' ||
-                (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)
+                (!('theme' in localStorage) &&
+                    window.matchMedia('(prefers-color-scheme: dark)').matches)
                     ? 'dark'
                     : 'light',
             version: SiteConfiguration!.version,
diff --git a/resources/scripts/components/NavigationBarProvider.tsx b/resources/scripts/components/NavigationBarProvider.tsx
index 1c23c0d1440..d95d500d206 100644
--- a/resources/scripts/components/NavigationBarProvider.tsx
+++ b/resources/scripts/components/NavigationBarProvider.tsx
@@ -1,13 +1,17 @@
-import { NavigationBarContext, RouteDefinition } from '@/components/elements/navigation/NavigationBar'
 import { ReactNode, useState } from 'react'
 
+import {
+    NavigationBarContext,
+    RouteDefinition,
+} from '@/components/elements/navigation/NavigationBar'
+
 interface Props {
     children?: ReactNode
 }
 
 const NavigationBarProvider = ({ children }: Props) => {
     const [routes, setRoutes] = useState<RouteDefinition[]>([])
-    const [breadcrumb, setBreadcrumb] = useState<string|null|undefined>()
+    const [breadcrumb, setBreadcrumb] = useState<string | null | undefined>()
 
     const value = {
         routes,
@@ -17,9 +21,7 @@ const NavigationBarProvider = ({ children }: Props) => {
     }
 
     return (
-        <NavigationBarContext.Provider
-            value={value}
-        >
+        <NavigationBarContext.Provider value={value}>
             {children}
         </NavigationBarContext.Provider>
     )
diff --git a/resources/scripts/components/ThemeProvider.tsx b/resources/scripts/components/ThemeProvider.tsx
index e6e353f90b8..ca3ca602650 100644
--- a/resources/scripts/components/ThemeProvider.tsx
+++ b/resources/scripts/components/ThemeProvider.tsx
@@ -1,39 +1,39 @@
 import { useStoreState } from '@/state'
-import { createEmotionCache, MantineProvider } from '@mantine/core'
-import { ReactNode, useEffect } from 'react'
+import { MantineProvider, createEmotionCache } from '@mantine/core'
 import { NotificationsProvider } from '@mantine/notifications'
+import { ReactNode, useEffect } from 'react'
 
 const emotionCache = createEmotionCache({
-  key: 'mantine',
-  prepend: false,
+    key: 'mantine',
+    prepend: false,
 })
 
 interface Props {
-  children: ReactNode
+    children: ReactNode
 }
 
 const ThemeProvider = ({ children }: Props) => {
-  const theme = useStoreState((state) => state.settings.data?.theme)
+    const theme = useStoreState(state => state.settings.data?.theme)
 
-  useEffect(() => {
-    if (theme === 'dark') {
-      document.documentElement.classList.add('dark')
-    } else {
-      document.documentElement.classList.remove('dark')
-    }
-  }, [theme])
+    useEffect(() => {
+        if (theme === 'dark') {
+            document.documentElement.classList.add('dark')
+        } else {
+            document.documentElement.classList.remove('dark')
+        }
+    }, [theme])
 
-  return (
-    <MantineProvider
-      emotionCache={emotionCache}
-      theme={{
-        colorScheme: theme === 'dark' ? 'dark' : 'light',
-        fontFamily: `Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";`
-      }}
-    >
-      <NotificationsProvider>{children}</NotificationsProvider>
-    </MantineProvider>
-  )
+    return (
+        <MantineProvider
+            emotionCache={emotionCache}
+            theme={{
+                colorScheme: theme === 'dark' ? 'dark' : 'light',
+                fontFamily: `Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";`,
+            }}
+        >
+            <NotificationsProvider>{children}</NotificationsProvider>
+        </MantineProvider>
+    )
 }
 
 export default ThemeProvider
diff --git a/resources/scripts/components/admin/SearchBar.tsx b/resources/scripts/components/admin/SearchBar.tsx
index b75d2db846a..0b543334a2f 100644
--- a/resources/scripts/components/admin/SearchBar.tsx
+++ b/resources/scripts/components/admin/SearchBar.tsx
@@ -1,9 +1,10 @@
-import Button from '@/components/elements/Button'
-import TextInput from '@/components/elements/inputs/TextInput'
 import { MagnifyingGlassIcon, PlusIcon } from '@heroicons/react/20/solid'
 import { ChangeEventHandler, MouseEventHandler } from 'react'
 import { useTranslation } from 'react-i18next'
 
+import Button from '@/components/elements/Button'
+import TextInput from '@/components/elements/inputs/TextInput'
+
 interface Props {
     value?: string
     onChange?: ChangeEventHandler<HTMLInputElement>
@@ -16,16 +17,27 @@ const SearchBar = ({ value, onChange, buttonText, onClick }: Props) => {
     return (
         <div className='flex space-x-2 items-center mb-3'>
             <TextInput
-                icon={<MagnifyingGlassIcon className='text-accent-400 w-4 h-4' />}
+                icon={
+                    <MagnifyingGlassIcon className='text-accent-400 w-4 h-4' />
+                }
                 className='grow'
                 value={value}
                 onChange={onChange}
                 placeholder={`${tStrings('search')}...`}
             />
-            <Button className='grid sm:hidden place-items-center' onClick={onClick} shape='square' variant='filled'>
+            <Button
+                className='grid sm:hidden place-items-center'
+                onClick={onClick}
+                shape='square'
+                variant='filled'
+            >
                 <PlusIcon className='w-5 h-5 block sm:hidden' />
             </Button>
-            <Button className='hidden sm:block' onClick={onClick} variant='filled'>
+            <Button
+                className='hidden sm:block'
+                onClick={onClick}
+                variant='filled'
+            >
                 {buttonText}
             </Button>
         </div>
diff --git a/resources/scripts/components/admin/ipam/CreatePoolModal.tsx b/resources/scripts/components/admin/ipam/CreatePoolModal.tsx
index e5f7b582a3d..dd361ead22f 100644
--- a/resources/scripts/components/admin/ipam/CreatePoolModal.tsx
+++ b/resources/scripts/components/admin/ipam/CreatePoolModal.tsx
@@ -1,15 +1,18 @@
-import { KeyedMutator } from 'swr'
-import { useTranslation } from 'react-i18next'
 import { useFlashKey } from '@/util/useFlash'
-import { z } from 'zod'
-import { FormProvider, useForm } from 'react-hook-form'
 import { zodResolver } from '@hookform/resolvers/zod'
-import Modal from '@/components/elements/Modal'
+import { FormProvider, useForm } from 'react-hook-form'
+import { useTranslation } from 'react-i18next'
+import { KeyedMutator } from 'swr'
+import { z } from 'zod'
+
+import createAddressPool from '@/api/admin/addressPools/createAddressPool'
+import { AddressPoolResponse } from '@/api/admin/addressPools/getAddressPools'
+
 import FlashMessageRender from '@/components/elements/FlashMessageRenderer'
+import Modal from '@/components/elements/Modal'
 import TextInputForm from '@/components/elements/forms/TextInputForm'
-import { AddressPoolResponse } from '@/api/admin/addressPools/getAddressPools'
+
 import NodesMultiSelectForm from '@/components/admin/ipam/NodesMultiSelectForm'
-import createAddressPool from '@/api/admin/addressPools/createAddressPool'
 
 interface Props {
     open: boolean
@@ -20,7 +23,9 @@ interface Props {
 const CreatePoolModal = ({ open, onClose, mutate }: Props) => {
     const { t: tStrings } = useTranslation('strings')
     const { t } = useTranslation('admin.addressPools.index')
-    const { clearFlashes, clearAndAddHttpError } = useFlashKey(`admin.addressPools.create`)
+    const { clearFlashes, clearAndAddHttpError } = useFlashKey(
+        `admin.addressPools.create`
+    )
 
     const schema = z.object({
         name: z.string().nonempty().max(191),
@@ -72,7 +77,10 @@ const CreatePoolModal = ({ open, onClose, mutate }: Props) => {
             <FormProvider {...form}>
                 <form onSubmit={form.handleSubmit(submit)}>
                     <Modal.Body>
-                        <FlashMessageRender className='mb-5' byKey={`admin.addressPools.create`} />
+                        <FlashMessageRender
+                            className='mb-5'
+                            byKey={`admin.addressPools.create`}
+                        />
                         <TextInputForm name='name' label={tStrings('name')} />
                         <NodesMultiSelectForm />
                     </Modal.Body>
@@ -81,7 +89,10 @@ const CreatePoolModal = ({ open, onClose, mutate }: Props) => {
                         <Modal.Action type='button' onClick={handleClose}>
                             {tStrings('cancel')}
                         </Modal.Action>
-                        <Modal.Action type='submit' loading={form.formState.isSubmitting}>
+                        <Modal.Action
+                            type='submit'
+                            loading={form.formState.isSubmitting}
+                        >
                             {tStrings('create')}
                         </Modal.Action>
                     </Modal.Actions>
diff --git a/resources/scripts/components/admin/ipam/DeletePoolModal.tsx b/resources/scripts/components/admin/ipam/DeletePoolModal.tsx
index 701c795f63a..5d585c107ef 100644
--- a/resources/scripts/components/admin/ipam/DeletePoolModal.tsx
+++ b/resources/scripts/components/admin/ipam/DeletePoolModal.tsx
@@ -1,14 +1,19 @@
+import { useFlashKey } from '@/util/useFlash'
+import { id } from 'date-fns/locale'
+import { FormEvent } from 'react'
+import { useTranslation } from 'react-i18next'
 import { KeyedMutator } from 'swr'
-import { AddressPool, AddressPoolResponse } from '@/api/admin/addressPools/getAddressPools'
 import useSWRMutation from 'swr/mutation'
+
 import deleteAddressPool from '@/api/admin/addressPools/deleteAddressPool'
-import { id } from 'date-fns/locale'
-import Modal from '@/components/elements/Modal'
-import { useTranslation } from 'react-i18next'
+import {
+    AddressPool,
+    AddressPoolResponse,
+} from '@/api/admin/addressPools/getAddressPools'
+
 import FlashMessageRender from '@/components/elements/FlashMessageRenderer'
-import { useFlashKey } from '@/util/useFlash'
 import MessageBox from '@/components/elements/MessageBox'
-import { FormEvent } from 'react'
+import Modal from '@/components/elements/Modal'
 
 interface Props {
     pool: AddressPool | null
@@ -19,27 +24,32 @@ interface Props {
 const CreatePoolModal = ({ pool, onClose, mutate }: Props) => {
     const { t } = useTranslation('admin.addressPools.index')
     const { t: tStrings } = useTranslation('strings')
-    const { clearFlashes, clearAndAddHttpError } = useFlashKey(`admin.addressPools.${pool?.id}.delete`)
-    const { trigger, isMutating } = useSWRMutation(['admin.address-pools.delete', pool?.id], async () => {
-        clearFlashes()
-        try {
-            await deleteAddressPool(pool!.id)
+    const { clearFlashes, clearAndAddHttpError } = useFlashKey(
+        `admin.addressPools.${pool?.id}.delete`
+    )
+    const { trigger, isMutating } = useSWRMutation(
+        ['admin.address-pools.delete', pool?.id],
+        async () => {
+            clearFlashes()
+            try {
+                await deleteAddressPool(pool!.id)
 
-            mutate(data => {
-                if (!data) return data
+                mutate(data => {
+                    if (!data) return data
 
-                return {
-                    ...data,
-                    items: data.items.filter(item => item.id !== pool!.id),
-                }
-            }, false)
+                    return {
+                        ...data,
+                        items: data.items.filter(item => item.id !== pool!.id),
+                    }
+                }, false)
 
-            onClose()
-        } catch (e) {
-            clearAndAddHttpError(e as Error)
-            throw e
+                onClose()
+            } catch (e) {
+                clearAndAddHttpError(e as Error)
+                throw e
+            }
         }
-    })
+    )
 
     const submit = (e: FormEvent) => {
         e.preventDefault()
@@ -49,27 +59,42 @@ const CreatePoolModal = ({ pool, onClose, mutate }: Props) => {
     return (
         <Modal open={Boolean(pool)} onClose={onClose}>
             <Modal.Header>
-                <Modal.Title>{t('delete_modal.title', { name: pool?.name })}</Modal.Title>
+                <Modal.Title>
+                    {t('delete_modal.title', { name: pool?.name })}
+                </Modal.Title>
             </Modal.Header>
 
             <form onSubmit={submit}>
                 <Modal.Body>
                     {pool ? (
                         pool.nodesCount > 0 ? (
-                            <MessageBox className={'mb-5'} type={'error'} title={tStrings('error') ?? 'Error'}>
+                            <MessageBox
+                                className={'mb-5'}
+                                type={'error'}
+                                title={tStrings('error') ?? 'Error'}
+                            >
                                 {t('delete_modal.nodes_linked_error')}
                             </MessageBox>
                         ) : null
                     ) : null}
-                    <FlashMessageRender className='mb-5' byKey={`admin.addressPools.${pool?.id}.delete`} />
-                    <Modal.Description>{t('delete_modal.description')}</Modal.Description>
+                    <FlashMessageRender
+                        className='mb-5'
+                        byKey={`admin.addressPools.${pool?.id}.delete`}
+                    />
+                    <Modal.Description>
+                        {t('delete_modal.description')}
+                    </Modal.Description>
                 </Modal.Body>
 
                 <Modal.Actions>
                     <Modal.Action type='button' onClick={onClose}>
                         {tStrings('cancel')}
                     </Modal.Action>
-                    <Modal.Action type='submit' disabled={pool ? pool.nodesCount > 0 : false} loading={isMutating}>
+                    <Modal.Action
+                        type='submit'
+                        disabled={pool ? pool.nodesCount > 0 : false}
+                        loading={isMutating}
+                    >
                         {tStrings('delete')}
                     </Modal.Action>
                 </Modal.Actions>
diff --git a/resources/scripts/components/admin/ipam/EditPoolModal.tsx b/resources/scripts/components/admin/ipam/EditPoolModal.tsx
index 31cac965173..1c9066f7eb6 100644
--- a/resources/scripts/components/admin/ipam/EditPoolModal.tsx
+++ b/resources/scripts/components/admin/ipam/EditPoolModal.tsx
@@ -1,15 +1,20 @@
-import { AddressPool, AddressPoolResponse } from '@/api/admin/addressPools/getAddressPools'
-import { KeyedMutator } from 'swr'
-import { useTranslation } from 'react-i18next'
 import { useFlashKey } from '@/util/useFlash'
-import updateAddressPool from '@/api/admin/addressPools/updateAddressPool'
-import { z } from 'zod'
-import { FormProvider, useForm } from 'react-hook-form'
 import { zodResolver } from '@hookform/resolvers/zod'
-import Modal from '@/components/elements/Modal'
+import { useEffect, useMemo } from 'react'
+import { FormProvider, useForm } from 'react-hook-form'
+import { useTranslation } from 'react-i18next'
+import { KeyedMutator } from 'swr'
+import { z } from 'zod'
+
+import {
+    AddressPool,
+    AddressPoolResponse,
+} from '@/api/admin/addressPools/getAddressPools'
+import updateAddressPool from '@/api/admin/addressPools/updateAddressPool'
+
 import FlashMessageRender from '@/components/elements/FlashMessageRenderer'
+import Modal from '@/components/elements/Modal'
 import TextInputForm from '@/components/elements/forms/TextInputForm'
-import { useEffect, useMemo } from 'react'
 
 interface Props {
     pool: AddressPool | null
@@ -20,7 +25,9 @@ interface Props {
 const EditPoolModal = ({ pool, onClose, mutate }: Props) => {
     const { t } = useTranslation('admin.addressPools.index')
     const { t: tStrings } = useTranslation('strings')
-    const { clearFlashes, clearAndAddHttpError } = useFlashKey(`admin.addressPools.${pool?.id}.update`)
+    const { clearFlashes, clearAndAddHttpError } = useFlashKey(
+        `admin.addressPools.${pool?.id}.update`
+    )
 
     const schema = z.object({
         name: z.string().nonempty().max(191),
@@ -54,7 +61,9 @@ const EditPoolModal = ({ pool, onClose, mutate }: Props) => {
 
                 return {
                     ...data,
-                    items: data.items.map(item => (item.id === updatedPool.id ? updatedPool : item)),
+                    items: data.items.map(item =>
+                        item.id === updatedPool.id ? updatedPool : item
+                    ),
                 }
             }, false)
 
@@ -67,13 +76,18 @@ const EditPoolModal = ({ pool, onClose, mutate }: Props) => {
     return (
         <Modal open={Boolean(pool)} onClose={handleClose}>
             <Modal.Header>
-                <Modal.Title>{t('edit_modal.title', { name: pool?.name })}</Modal.Title>
+                <Modal.Title>
+                    {t('edit_modal.title', { name: pool?.name })}
+                </Modal.Title>
             </Modal.Header>
 
             <FormProvider {...form}>
                 <form onSubmit={form.handleSubmit(submit)}>
                     <Modal.Body>
-                        <FlashMessageRender className='mb-5' byKey={`admin.addressPools.${pool?.id}.update`} />
+                        <FlashMessageRender
+                            className='mb-5'
+                            byKey={`admin.addressPools.${pool?.id}.update`}
+                        />
                         <TextInputForm name='name' label={tStrings('name')} />
                     </Modal.Body>
 
@@ -81,7 +95,10 @@ const EditPoolModal = ({ pool, onClose, mutate }: Props) => {
                         <Modal.Action type='button' onClick={handleClose}>
                             {tStrings('cancel')}
                         </Modal.Action>
-                        <Modal.Action type='submit' loading={form.formState.isSubmitting}>
+                        <Modal.Action
+                            type='submit'
+                            loading={form.formState.isSubmitting}
+                        >
                             {tStrings('save')}
                         </Modal.Action>
                     </Modal.Actions>
diff --git a/resources/scripts/components/admin/ipam/IpamContainer.tsx b/resources/scripts/components/admin/ipam/IpamContainer.tsx
index 57b16ccaece..70722d5723e 100644
--- a/resources/scripts/components/admin/ipam/IpamContainer.tsx
+++ b/resources/scripts/components/admin/ipam/IpamContainer.tsx
@@ -1,18 +1,25 @@
-import { useTranslation } from 'react-i18next'
-import PageContentBlock from '@/components/elements/PageContentBlock'
-import Table, { Actions, ColumnArray, RowActionsProps } from '@/components/elements/displays/Table'
-import { AddressPool } from '@/api/admin/addressPools/getAddressPools'
 import usePagination from '@/util/usePagination'
-import { useState } from 'react'
 import { useDebouncedValue } from '@mantine/hooks'
+import { useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { Link } from 'react-router-dom'
+
+import { AddressPool } from '@/api/admin/addressPools/getAddressPools'
 import useAddressPoolsSWR from '@/api/admin/addressPools/useAddressPoolsSWR'
-import Spinner from '@/components/elements/Spinner'
+
+import Menu from '@/components/elements/Menu'
+import PageContentBlock from '@/components/elements/PageContentBlock'
 import Pagination from '@/components/elements/Pagination'
+import Spinner from '@/components/elements/Spinner'
+import Table, {
+    Actions,
+    ColumnArray,
+    RowActionsProps,
+} from '@/components/elements/displays/Table'
+
 import SearchBar from '@/components/admin/SearchBar'
-import { Link } from 'react-router-dom'
 import CreatePoolModal from '@/components/admin/ipam/CreatePoolModal'
 import DeletePoolModal from '@/components/admin/ipam/DeletePoolModal'
-import Menu from '@/components/elements/Menu'
 import EditPoolModal from '@/components/admin/ipam/EditPoolModal'
 
 const IpamContainer = () => {
@@ -32,7 +39,10 @@ const IpamContainer = () => {
             header: tStrings('name'),
             accessor: 'name',
             cell: ({ value, row }) => (
-                <Link to={`/admin/ipam/${row.id}`} className='link text-foreground'>
+                <Link
+                    to={`/admin/ipam/${row.id}`}
+                    className='link text-foreground'
+                >
                     {value}
                 </Link>
             ),
@@ -52,7 +62,9 @@ const IpamContainer = () => {
     const rowActions = ({ row: pool }: RowActionsProps<AddressPool>) => {
         return (
             <Actions>
-                <Menu.Item onClick={() => setPoolToEdit(pool)}>{tStrings('edit')}</Menu.Item>
+                <Menu.Item onClick={() => setPoolToEdit(pool)}>
+                    {tStrings('edit')}
+                </Menu.Item>
                 <Menu.Divider />
                 <Menu.Item color='red' onClick={() => setPoolToDelete(pool)}>
                     {tStrings('delete')}
@@ -64,9 +76,21 @@ const IpamContainer = () => {
     return (
         <div className='bg-background min-h-screen'>
             <PageContentBlock title={tStrings('ipam') ?? ''}>
-                <CreatePoolModal open={isCreating} onClose={() => setIsCreating(false)} mutate={mutate} />
-                <DeletePoolModal pool={poolToDelete} onClose={() => setPoolToDelete(null)} mutate={mutate} />
-                <EditPoolModal pool={poolToEdit} onClose={() => setPoolToEdit(null)} mutate={mutate} />
+                <CreatePoolModal
+                    open={isCreating}
+                    onClose={() => setIsCreating(false)}
+                    mutate={mutate}
+                />
+                <DeletePoolModal
+                    pool={poolToDelete}
+                    onClose={() => setPoolToDelete(null)}
+                    mutate={mutate}
+                />
+                <EditPoolModal
+                    pool={poolToEdit}
+                    onClose={() => setPoolToEdit(null)}
+                    mutate={mutate}
+                />
                 <SearchBar
                     value={query}
                     onChange={e => setQuery(e.target.value)}
@@ -77,7 +101,13 @@ const IpamContainer = () => {
                     <Spinner />
                 ) : (
                     <Pagination data={data} onPageSelect={setPage}>
-                        {({ items }) => <Table columns={columns} data={items} rowActions={rowActions} />}
+                        {({ items }) => (
+                            <Table
+                                columns={columns}
+                                data={items}
+                                rowActions={rowActions}
+                            />
+                        )}
                     </Pagination>
                 )}
             </PageContentBlock>
diff --git a/resources/scripts/components/admin/ipam/NodesMultiSelectForm.tsx b/resources/scripts/components/admin/ipam/NodesMultiSelectForm.tsx
index 1379741bea0..957c2c9ca2d 100644
--- a/resources/scripts/components/admin/ipam/NodesMultiSelectForm.tsx
+++ b/resources/scripts/components/admin/ipam/NodesMultiSelectForm.tsx
@@ -1,10 +1,12 @@
-import { useFormContext } from 'react-hook-form'
-import { useMemo, useState } from 'react'
 import { useDebouncedValue } from '@mantine/hooks'
-import useNodesSWR from '@/api/admin/nodes/useNodesSWR'
+import { useMemo, useState } from 'react'
+import { useFormContext } from 'react-hook-form'
 import { useTranslation } from 'react-i18next'
-import MultiSelectForm from '@/components/elements/forms/MultiSelectForm'
+
+import useNodesSWR from '@/api/admin/nodes/useNodesSWR'
+
 import DescriptiveItemComponent from '@/components/elements/DescriptiveItemComponent'
+import MultiSelectForm from '@/components/elements/forms/MultiSelectForm'
 
 interface Props {
     disabled?: boolean
@@ -31,7 +33,12 @@ const NodesMultiSelectForm = ({ disabled }: Props) => {
         const available =
             data && selectedNodes
                 ? data.items
-                      .filter(node => !selectedNodes.items.find(selectedNode => selectedNode.id === node.id))
+                      .filter(
+                          node =>
+                              !selectedNodes.items.find(
+                                  selectedNode => selectedNode.id === node.id
+                              )
+                      )
                       .map(node => ({
                           value: node.id.toString(),
                           label: node.name,
diff --git a/resources/scripts/components/admin/ipam/PoolContentBlock.tsx b/resources/scripts/components/admin/ipam/PoolContentBlock.tsx
index e1d7fbc5f1e..b22c97184fe 100644
--- a/resources/scripts/components/admin/ipam/PoolContentBlock.tsx
+++ b/resources/scripts/components/admin/ipam/PoolContentBlock.tsx
@@ -1,6 +1,9 @@
-import PageContentBlock, { PageContentBlockProps } from '@/components/elements/PageContentBlock'
 import useAddressPoolSWR from '@/api/admin/addressPools/useAddressPoolSWR'
+
 import Breadcrumbs from '@/components/elements/Breadcrumbs'
+import PageContentBlock, {
+    PageContentBlockProps,
+} from '@/components/elements/PageContentBlock'
 
 interface Props extends PageContentBlockProps {
     title: string
diff --git a/resources/scripts/components/admin/ipam/addresses/AddressesContainer.tsx b/resources/scripts/components/admin/ipam/addresses/AddressesContainer.tsx
index a5dfe9a12ae..8c21b35196d 100644
--- a/resources/scripts/components/admin/ipam/addresses/AddressesContainer.tsx
+++ b/resources/scripts/components/admin/ipam/addresses/AddressesContainer.tsx
@@ -1,21 +1,28 @@
-import PoolContentBlock from '@/components/admin/ipam/PoolContentBlock'
-import { useTranslation } from 'react-i18next'
-import SearchBar from '@/components/admin/SearchBar'
-import { useState } from 'react'
-import { useDebouncedValue } from '@mantine/hooks'
-import useAddressesSWR from '@/api/admin/addressPools/useAddressesSWR'
 import usePagination from '@/util/usePagination'
-import Table, { Actions, ColumnArray, RowActionsProps } from '@/components/elements/displays/Table'
+import { useDebouncedValue } from '@mantine/hooks'
+import { useState } from 'react'
+import { useTranslation } from 'react-i18next'
 import { Link } from 'react-router-dom'
+
+import { AddressPool } from '@/api/admin/addressPools/getAddressPools'
+import useAddressesSWR from '@/api/admin/addressPools/useAddressesSWR'
 import { Address } from '@/api/server/getServer'
-import Spinner from '@/components/elements/Spinner'
-import Pagination from '@/components/elements/Pagination'
+
 import Breadcrumbs from '@/components/elements/Breadcrumbs'
-import CreateAddressModal from '@/components/admin/ipam/addresses/CreateAddressModal'
-import { AddressPool } from '@/api/admin/addressPools/getAddressPools'
 import Menu from '@/components/elements/Menu'
-import EditAddressModal from '@/components/admin/ipam/addresses/EditAddressModal'
+import Pagination from '@/components/elements/Pagination'
+import Spinner from '@/components/elements/Spinner'
+import Table, {
+    Actions,
+    ColumnArray,
+    RowActionsProps,
+} from '@/components/elements/displays/Table'
+
+import SearchBar from '@/components/admin/SearchBar'
+import PoolContentBlock from '@/components/admin/ipam/PoolContentBlock'
+import CreateAddressModal from '@/components/admin/ipam/addresses/CreateAddressModal'
 import DeleteAddressModal from '@/components/admin/ipam/addresses/DeleteAddressModal'
+import EditAddressModal from '@/components/admin/ipam/addresses/EditAddressModal'
 
 const AddressesContainer = () => {
     const { t: tStrings } = useTranslation('strings')
@@ -27,7 +34,11 @@ const AddressesContainer = () => {
     const [query, setQuery] = useState('')
     const [page, setPage] = usePagination()
     const [debouncedQuery] = useDebouncedValue(query, 200)
-    const { data, mutate } = useAddressesSWR({ page, query: debouncedQuery, include: ['server'] })
+    const { data, mutate } = useAddressesSWR({
+        page,
+        query: debouncedQuery,
+        include: ['server'],
+    })
 
     const columns: ColumnArray<Address> = [
         {
@@ -55,7 +66,10 @@ const AddressesContainer = () => {
             accessor: 'server',
             cell: ({ value }) =>
                 value ? (
-                    <Link to={`/admin/servers/${value.uuidShort}`} className='link text-foreground'>
+                    <Link
+                        to={`/admin/servers/${value.uuidShort}`}
+                        className='link text-foreground'
+                    >
                         {value.hostname}
                     </Link>
                 ) : null,
@@ -65,9 +79,14 @@ const AddressesContainer = () => {
     const rowActions = ({ row: address }: RowActionsProps<Address>) => {
         return (
             <Actions>
-                <Menu.Item onClick={() => setAddressToEdit(address)}>{tStrings('edit')}</Menu.Item>
+                <Menu.Item onClick={() => setAddressToEdit(address)}>
+                    {tStrings('edit')}
+                </Menu.Item>
                 <Menu.Divider />
-                <Menu.Item color='red' onClick={() => setAddressToDelete(address)}>
+                <Menu.Item
+                    color='red'
+                    onClick={() => setAddressToDelete(address)}
+                >
                     {tStrings('delete')}
                 </Menu.Item>
             </Actions>
@@ -77,8 +96,16 @@ const AddressesContainer = () => {
     return (
         <div className={'bg-background min-h-screen'}>
             <PoolContentBlock title={tStrings('address_other') ?? 'Addresses'}>
-                <CreateAddressModal open={isCreating} onClose={() => setIsCreating(false)} mutate={mutate} />
-                <EditAddressModal address={addressToEdit} onClose={() => setAddressToEdit(null)} mutate={mutate} />
+                <CreateAddressModal
+                    open={isCreating}
+                    onClose={() => setIsCreating(false)}
+                    mutate={mutate}
+                />
+                <EditAddressModal
+                    address={addressToEdit}
+                    onClose={() => setAddressToEdit(null)}
+                    mutate={mutate}
+                />
                 <DeleteAddressModal
                     address={addressToDelete}
                     onClose={() => setAddressToDelete(null)}
@@ -94,7 +121,13 @@ const AddressesContainer = () => {
                     <Spinner />
                 ) : (
                     <Pagination data={data} onPageSelect={setPage}>
-                        {({ items }) => <Table columns={columns} data={items} rowActions={rowActions} />}
+                        {({ items }) => (
+                            <Table
+                                columns={columns}
+                                data={items}
+                                rowActions={rowActions}
+                            />
+                        )}
                     </Pagination>
                 )}
             </PoolContentBlock>
diff --git a/resources/scripts/components/admin/ipam/addresses/CreateAddressModal.tsx b/resources/scripts/components/admin/ipam/addresses/CreateAddressModal.tsx
index 49117882481..31c02d51b24 100644
--- a/resources/scripts/components/admin/ipam/addresses/CreateAddressModal.tsx
+++ b/resources/scripts/components/admin/ipam/addresses/CreateAddressModal.tsx
@@ -1,24 +1,29 @@
-import useAddressPoolSWR from '@/api/admin/addressPools/useAddressPoolSWR'
-import FlashMessageRender from '@/components/elements/FlashMessageRenderer'
-import Modal from '@/components/elements/Modal'
-import RadioGroupForm from '@/components/elements/forms/RadioGroupForm'
-import TextInputForm from '@/components/elements/forms/TextInputForm'
-import Radio from '@/components/elements/inputs/Radio'
+import { countIPsInRange } from '@/util/helpers'
 import { useFlashKey } from '@/util/useFlash'
 import { ipAddress, macAddress } from '@/util/validation'
 import { zodResolver } from '@hookform/resolvers/zod'
+import { useMemo } from 'react'
 import { FormProvider, useForm } from 'react-hook-form'
 import { Trans, useTranslation } from 'react-i18next'
-import { z } from 'zod'
-import ServersSelectForm from '@/components/admin/ipam/addresses/ServersSelectForm'
-import createAddress, { schema } from '@/api/admin/addressPools/addresses/createAddress'
 import { KeyedMutator, mutate } from 'swr'
+import { z } from 'zod'
+
+import createAddress, {
+    schema,
+} from '@/api/admin/addressPools/addresses/createAddress'
+import useAddressPoolSWR from '@/api/admin/addressPools/useAddressPoolSWR'
 import { AddressResponse } from '@/api/admin/nodes/addresses/getAddresses'
-import CheckboxForm from '@/components/elements/forms/CheckboxForm'
-import { useMemo } from 'react'
 import { Address, AddressType } from '@/api/server/getServer'
+
+import FlashMessageRender from '@/components/elements/FlashMessageRenderer'
+import Modal from '@/components/elements/Modal'
 import SegmentedControl from '@/components/elements/SegmentedControl'
-import { countIPsInRange } from '@/util/helpers'
+import CheckboxForm from '@/components/elements/forms/CheckboxForm'
+import RadioGroupForm from '@/components/elements/forms/RadioGroupForm'
+import TextInputForm from '@/components/elements/forms/TextInputForm'
+import Radio from '@/components/elements/inputs/Radio'
+
+import ServersSelectForm from '@/components/admin/ipam/addresses/ServersSelectForm'
 
 interface Props {
     open: boolean
@@ -30,7 +35,9 @@ const CreateAddressModal = ({ open, onClose, mutate }: Props) => {
     const { t: tStrings } = useTranslation('strings')
     const { t } = useTranslation('admin.addressPools.addresses')
     const { data: pool } = useAddressPoolSWR()
-    const { clearFlashes, clearAndAddHttpError } = useFlashKey(`admin.addressPools.${pool.id}.addresses.create`)
+    const { clearFlashes, clearAndAddHttpError } = useFlashKey(
+        `admin.addressPools.${pool.id}.addresses.create`
+    )
 
     const form = useForm({
         resolver: zodResolver(schema),
@@ -55,7 +62,11 @@ const CreateAddressModal = ({ open, onClose, mutate }: Props) => {
     const addressCount = useMemo(() => {
         if (!watchIsBulkAction) return 0
 
-        return countIPsInRange(watchType, watchStartingAddress, watchEndingAddress)
+        return countIPsInRange(
+            watchType,
+            watchStartingAddress,
+            watchEndingAddress
+        )
     }, [watchIsBulkAction, watchType, watchStartingAddress, watchEndingAddress])
 
     const handleClose = () => {
@@ -64,12 +75,15 @@ const CreateAddressModal = ({ open, onClose, mutate }: Props) => {
     }
 
     const submit = async (_data: any) => {
-        const { macAddress, serverId, ...data } = _data as z.infer<typeof schema>
+        const { macAddress, serverId, ...data } = _data as z.infer<
+            typeof schema
+        >
 
         clearFlashes()
         try {
             const address = await createAddress(pool.id, {
-                macAddress: macAddress && macAddress.length > 0 ? macAddress : null,
+                macAddress:
+                    macAddress && macAddress.length > 0 ? macAddress : null,
                 serverId: serverId !== '' ? serverId : null,
                 include: ['server'],
                 ...data,
@@ -104,37 +118,83 @@ const CreateAddressModal = ({ open, onClose, mutate }: Props) => {
             <FormProvider {...form}>
                 <form onSubmit={form.handleSubmit(submit)}>
                     <Modal.Body>
-                        <FlashMessageRender className='mb-5' byKey={`admin.addressPools.${pool.id}.addresses.create`} />
+                        <FlashMessageRender
+                            className='mb-5'
+                            byKey={`admin.addressPools.${pool.id}.addresses.create`}
+                        />
                         <SegmentedControl
                             className='!w-full'
                             disabled={form.formState.isSubmitting}
                             value={watchIsBulkAction ? 'multiple' : 'single'}
-                            onChange={val => form.setValue('isBulkAction', val === 'multiple')}
+                            onChange={val =>
+                                form.setValue(
+                                    'isBulkAction',
+                                    val === 'multiple'
+                                )
+                            }
                             data={[
                                 { value: 'single', label: tStrings('single') },
-                                { value: 'multiple', label: tStrings('multiple') },
+                                {
+                                    value: 'multiple',
+                                    label: tStrings('multiple'),
+                                },
                             ]}
                         />
-                        <RadioGroupForm name='type' orientation='vertical' spacing={6}>
-                            <Radio name='type' value='ipv4' label={tStrings('ipv4')} />
-                            <Radio name='type' value='ipv6' label={tStrings('ipv6')} />
+                        <RadioGroupForm
+                            name='type'
+                            orientation='vertical'
+                            spacing={6}
+                        >
+                            <Radio
+                                name='type'
+                                value='ipv4'
+                                label={tStrings('ipv4')}
+                            />
+                            <Radio
+                                name='type'
+                                value='ipv6'
+                                label={tStrings('ipv6')}
+                            />
                         </RadioGroupForm>
                         {watchIsBulkAction ? (
                             <>
-                                <TextInputForm name='startingAddress' label={t('create_modal.starting_address')} />
-                                <TextInputForm name='endingAddress' label={t('create_modal.ending_address')} />
+                                <TextInputForm
+                                    name='startingAddress'
+                                    label={t('create_modal.starting_address')}
+                                />
+                                <TextInputForm
+                                    name='endingAddress'
+                                    label={t('create_modal.ending_address')}
+                                />
                                 <p className={'description-small pt-2 pb-4'}>
-                                    <Trans t={tStrings} i18nKey={'addressWithCount'} count={addressCount}>
+                                    <Trans
+                                        t={tStrings}
+                                        i18nKey={'addressWithCount'}
+                                        count={addressCount}
+                                    >
                                         {{ addressCount }} address
                                     </Trans>
                                 </p>
                             </>
                         ) : (
-                            <TextInputForm name='address' label={tStrings('address_one')} />
+                            <TextInputForm
+                                name='address'
+                                label={tStrings('address_one')}
+                            />
                         )}
-                        <TextInputForm name='cidr' label={tStrings('cidr')} placeholder='24' />
-                        <TextInputForm name='gateway' label={tStrings('gateway')} />
-                        <TextInputForm name='macAddress' label={tStrings('mac_address')} />
+                        <TextInputForm
+                            name='cidr'
+                            label={tStrings('cidr')}
+                            placeholder='24'
+                        />
+                        <TextInputForm
+                            name='gateway'
+                            label={tStrings('gateway')}
+                        />
+                        <TextInputForm
+                            name='macAddress'
+                            label={tStrings('mac_address')}
+                        />
                         <ServersSelectForm />
                     </Modal.Body>
 
@@ -142,7 +202,10 @@ const CreateAddressModal = ({ open, onClose, mutate }: Props) => {
                         <Modal.Action type='button' onClick={handleClose}>
                             {tStrings('cancel')}
                         </Modal.Action>
-                        <Modal.Action type='submit' loading={form.formState.isSubmitting}>
+                        <Modal.Action
+                            type='submit'
+                            loading={form.formState.isSubmitting}
+                        >
                             {tStrings('create')}
                         </Modal.Action>
                     </Modal.Actions>
diff --git a/resources/scripts/components/admin/ipam/addresses/DeleteAddressModal.tsx b/resources/scripts/components/admin/ipam/addresses/DeleteAddressModal.tsx
index 720fdf70f5f..dc98314700a 100644
--- a/resources/scripts/components/admin/ipam/addresses/DeleteAddressModal.tsx
+++ b/resources/scripts/components/admin/ipam/addresses/DeleteAddressModal.tsx
@@ -1,16 +1,21 @@
-import { AddressPool, AddressPoolResponse } from '@/api/admin/addressPools/getAddressPools'
-import { KeyedMutator } from 'swr'
-import { useTranslation } from 'react-i18next'
 import { useFlashKey } from '@/util/useFlash'
+import { FormEvent } from 'react'
+import { useTranslation } from 'react-i18next'
+import { KeyedMutator } from 'swr'
 import useSWRMutation from 'swr/mutation'
+
+import deleteAddress from '@/api/admin/addressPools/addresses/deleteAddress'
 import deleteAddressPool from '@/api/admin/addressPools/deleteAddressPool'
-import { Address } from '@/api/server/getServer'
+import {
+    AddressPool,
+    AddressPoolResponse,
+} from '@/api/admin/addressPools/getAddressPools'
 import { AddressResponse } from '@/api/admin/nodes/addresses/getAddresses'
-import deleteAddress from '@/api/admin/addressPools/addresses/deleteAddress'
-import { FormEvent } from 'react'
-import Modal from '@/components/elements/Modal'
-import MessageBox from '@/components/elements/MessageBox'
+import { Address } from '@/api/server/getServer'
+
 import FlashMessageRender from '@/components/elements/FlashMessageRenderer'
+import MessageBox from '@/components/elements/MessageBox'
+import Modal from '@/components/elements/Modal'
 
 interface Props {
     address: Address | null
@@ -25,7 +30,11 @@ const DeleteAddressModal = ({ address, onClose, mutate }: Props) => {
         `admin.addressPools.${address?.addressPoolId}.addresses.${address?.id}.delete`
     )
     const { trigger, isMutating } = useSWRMutation(
-        ['admin.address-pools.addresses.delete', address?.addressPoolId, address?.id],
+        [
+            'admin.address-pools.addresses.delete',
+            address?.addressPoolId,
+            address?.id,
+        ],
         async () => {
             clearFlashes()
             try {
@@ -36,7 +45,9 @@ const DeleteAddressModal = ({ address, onClose, mutate }: Props) => {
 
                     return {
                         ...data,
-                        items: data.items.filter(item => item.id !== address!.id),
+                        items: data.items.filter(
+                            item => item.id !== address!.id
+                        ),
                     }
                 }, false)
 
@@ -66,7 +77,9 @@ const DeleteAddressModal = ({ address, onClose, mutate }: Props) => {
                         byKey={`admin.addressPools.${address?.addressPoolId}.addresses.${address?.id}.delete`}
                     />
                     <Modal.Description>
-                        {t('delete_modal.description', { address: address?.address })}
+                        {t('delete_modal.description', {
+                            address: address?.address,
+                        })}
                     </Modal.Description>
                 </Modal.Body>
 
diff --git a/resources/scripts/components/admin/ipam/addresses/EditAddressModal.tsx b/resources/scripts/components/admin/ipam/addresses/EditAddressModal.tsx
index 82b431e1494..06e4e3f1135 100644
--- a/resources/scripts/components/admin/ipam/addresses/EditAddressModal.tsx
+++ b/resources/scripts/components/admin/ipam/addresses/EditAddressModal.tsx
@@ -1,22 +1,25 @@
-import useAddressPoolSWR from '@/api/admin/addressPools/useAddressPoolSWR'
-import FlashMessageRender from '@/components/elements/FlashMessageRenderer'
-import Modal from '@/components/elements/Modal'
-import RadioGroupForm from '@/components/elements/forms/RadioGroupForm'
-import TextInputForm from '@/components/elements/forms/TextInputForm'
-import Radio from '@/components/elements/inputs/Radio'
 import { useFlashKey } from '@/util/useFlash'
 import { ipAddress, macAddress } from '@/util/validation'
 import { zodResolver } from '@hookform/resolvers/zod'
+import { useEffect } from 'react'
 import { FormProvider, useForm } from 'react-hook-form'
 import { useTranslation } from 'react-i18next'
+import { KeyedMutator, mutate } from 'swr'
 import { z } from 'zod'
-import ServersSelectForm from '@/components/admin/ipam/addresses/ServersSelectForm'
+
 import createAddress from '@/api/admin/addressPools/addresses/createAddress'
-import { KeyedMutator, mutate } from 'swr'
+import updateAddress from '@/api/admin/addressPools/addresses/updateAddress'
+import useAddressPoolSWR from '@/api/admin/addressPools/useAddressPoolSWR'
 import { AddressResponse } from '@/api/admin/nodes/addresses/getAddresses'
 import { Address } from '@/api/server/getServer'
-import { useEffect } from 'react'
-import updateAddress from '@/api/admin/addressPools/addresses/updateAddress'
+
+import FlashMessageRender from '@/components/elements/FlashMessageRenderer'
+import Modal from '@/components/elements/Modal'
+import RadioGroupForm from '@/components/elements/forms/RadioGroupForm'
+import TextInputForm from '@/components/elements/forms/TextInputForm'
+import Radio from '@/components/elements/inputs/Radio'
+
+import ServersSelectForm from '@/components/admin/ipam/addresses/ServersSelectForm'
 
 interface Props {
     address: Address | null
@@ -69,23 +72,32 @@ const CreateAddressModal = ({ address, onClose, mutate }: Props) => {
     }
 
     const submit = async (_data: any) => {
-        const { macAddress, serverId, ...data } = _data as z.infer<typeof schema>
+        const { macAddress, serverId, ...data } = _data as z.infer<
+            typeof schema
+        >
 
         clearFlashes()
         try {
-            const updatedAddress = await updateAddress(address!.addressPoolId, address!.id, {
-                macAddress: macAddress && macAddress.length > 0 ? macAddress : null,
-                serverId: serverId !== '' ? serverId : null,
-                include: ['server'],
-                ...data,
-            })
+            const updatedAddress = await updateAddress(
+                address!.addressPoolId,
+                address!.id,
+                {
+                    macAddress:
+                        macAddress && macAddress.length > 0 ? macAddress : null,
+                    serverId: serverId !== '' ? serverId : null,
+                    include: ['server'],
+                    ...data,
+                }
+            )
 
             mutate(data => {
                 if (!data) return data
 
                 return {
                     ...data,
-                    items: data.items.map(item => (item.id === updatedAddress!.id ? updatedAddress : item)),
+                    items: data.items.map(item =>
+                        item.id === updatedAddress!.id ? updatedAddress : item
+                    ),
                 }
             }, false)
 
@@ -108,14 +120,39 @@ const CreateAddressModal = ({ address, onClose, mutate }: Props) => {
                             className='mb-5'
                             byKey={`admin.addressPools.${address?.addressPoolId}.addresses.${address?.id}.edit`}
                         />
-                        <TextInputForm name='address' label={tStrings('address_one')} />
-                        <RadioGroupForm name='type' orientation='vertical' spacing={6}>
-                            <Radio name='type' value='ipv4' label={tStrings('ipv4')} />
-                            <Radio name='type' value='ipv6' label={tStrings('ipv6')} />
+                        <TextInputForm
+                            name='address'
+                            label={tStrings('address_one')}
+                        />
+                        <RadioGroupForm
+                            name='type'
+                            orientation='vertical'
+                            spacing={6}
+                        >
+                            <Radio
+                                name='type'
+                                value='ipv4'
+                                label={tStrings('ipv4')}
+                            />
+                            <Radio
+                                name='type'
+                                value='ipv6'
+                                label={tStrings('ipv6')}
+                            />
                         </RadioGroupForm>
-                        <TextInputForm name='cidr' label={tStrings('cidr')} placeholder='24' />
-                        <TextInputForm name='gateway' label={tStrings('gateway')} />
-                        <TextInputForm name='macAddress' label={tStrings('mac_address')} />
+                        <TextInputForm
+                            name='cidr'
+                            label={tStrings('cidr')}
+                            placeholder='24'
+                        />
+                        <TextInputForm
+                            name='gateway'
+                            label={tStrings('gateway')}
+                        />
+                        <TextInputForm
+                            name='macAddress'
+                            label={tStrings('mac_address')}
+                        />
                         <ServersSelectForm />
                     </Modal.Body>
 
@@ -123,7 +160,10 @@ const CreateAddressModal = ({ address, onClose, mutate }: Props) => {
                         <Modal.Action type='button' onClick={handleClose}>
                             {tStrings('cancel')}
                         </Modal.Action>
-                        <Modal.Action type='submit' loading={form.formState.isSubmitting}>
+                        <Modal.Action
+                            type='submit'
+                            loading={form.formState.isSubmitting}
+                        >
                             {tStrings('save')}
                         </Modal.Action>
                     </Modal.Actions>
diff --git a/resources/scripts/components/admin/ipam/addresses/ServersSelectForm.tsx b/resources/scripts/components/admin/ipam/addresses/ServersSelectForm.tsx
index 0e219cfc6c9..1566ea9bab0 100644
--- a/resources/scripts/components/admin/ipam/addresses/ServersSelectForm.tsx
+++ b/resources/scripts/components/admin/ipam/addresses/ServersSelectForm.tsx
@@ -1,9 +1,11 @@
-import { useFormContext } from 'react-hook-form'
-import { useState } from 'react'
 import { useDebouncedValue } from '@mantine/hooks'
+import { useState } from 'react'
+import { useFormContext } from 'react-hook-form'
+import { useTranslation } from 'react-i18next'
+
 import useServersSWR from '@/api/admin/servers/useServersSWR'
+
 import SelectForm from '@/components/elements/forms/SelectForm'
-import { useTranslation } from 'react-i18next'
 
 const ServersSelectForm = () => {
     const { t: tSIndex } = useTranslation('admin.servers.index')
@@ -12,7 +14,10 @@ const ServersSelectForm = () => {
     const serverId: string = watch('serverId')
     const [query, setQuery] = useState(serverId)
     const [debouncedQuery] = useDebouncedValue(query, 200)
-    const { data, isLoading, isValidating } = useServersSWR({ query: debouncedQuery, perPage: 10 })
+    const { data, isLoading, isValidating } = useServersSWR({
+        query: debouncedQuery,
+        perPage: 10,
+    })
     const servers =
         data?.items.map(server => ({
             value: server.internalId.toString(),
diff --git a/resources/scripts/components/admin/locations/CreateLocationModal.tsx b/resources/scripts/components/admin/locations/CreateLocationModal.tsx
index b2811e7b0ec..d30c35653f8 100644
--- a/resources/scripts/components/admin/locations/CreateLocationModal.tsx
+++ b/resources/scripts/components/admin/locations/CreateLocationModal.tsx
@@ -1,9 +1,3 @@
-import createLocation from '@/api/admin/locations/createLocation'
-import { LocationResponse } from '@/api/admin/locations/getLocations'
-import FlashMessageRender from '@/components/elements/FlashMessageRenderer'
-import Modal from '@/components/elements/Modal'
-import TextInputForm from '@/components/elements/forms/TextInputForm'
-import TextareaForm from '@/components/elements/forms/TextareaForm'
 import { useFlashKey } from '@/util/useFlash'
 import { zodResolver } from '@hookform/resolvers/zod'
 import { FormProvider, useForm } from 'react-hook-form'
@@ -11,6 +5,14 @@ import { useTranslation } from 'react-i18next'
 import { KeyedMutator } from 'swr'
 import { z } from 'zod'
 
+import createLocation from '@/api/admin/locations/createLocation'
+import { LocationResponse } from '@/api/admin/locations/getLocations'
+
+import FlashMessageRender from '@/components/elements/FlashMessageRenderer'
+import Modal from '@/components/elements/Modal'
+import TextInputForm from '@/components/elements/forms/TextInputForm'
+import TextareaForm from '@/components/elements/forms/TextareaForm'
+
 interface Props {
     mutate: KeyedMutator<LocationResponse>
     open: boolean
@@ -18,7 +20,9 @@ interface Props {
 }
 
 const CreateLocationModal = ({ mutate, open, onClose }: Props) => {
-    const { clearFlashes, clearAndAddHttpError } = useFlashKey('admin.locations.create')
+    const { clearFlashes, clearAndAddHttpError } = useFlashKey(
+        'admin.locations.create'
+    )
     const { t: tStrings } = useTranslation('strings')
     const { t } = useTranslation('admin.locations')
 
@@ -39,14 +43,17 @@ const CreateLocationModal = ({ mutate, open, onClose }: Props) => {
         clearFlashes()
 
         try {
-            const location = await createLocation(data.shortCode, data.description)
+            const location = await createLocation(
+                data.shortCode,
+                data.description
+            )
 
             mutate(data => {
                 if (!data || data.pagination.currentPage !== 1) return data
 
                 return {
                     ...data,
-                    items: [location, ...data.items]
+                    items: [location, ...data.items],
                 }
             }, false)
 
@@ -67,23 +74,33 @@ const CreateLocationModal = ({ mutate, open, onClose }: Props) => {
     return (
         <Modal open={open} onClose={handleClose}>
             <Modal.Header>
-                <Modal.Title>
-                    {t('create_location')}
-                </Modal.Title>
+                <Modal.Title>{t('create_location')}</Modal.Title>
             </Modal.Header>
 
             <FormProvider {...form}>
                 <form onSubmit={form.handleSubmit(submit)}>
                     <Modal.Body>
-                        <FlashMessageRender className='mb-5' byKey={'admin.locations.create'} />
-                        <TextInputForm name='shortCode' label={t('short_code')} />
-                        <TextareaForm name='description' label={tStrings('description')} />
+                        <FlashMessageRender
+                            className='mb-5'
+                            byKey={'admin.locations.create'}
+                        />
+                        <TextInputForm
+                            name='shortCode'
+                            label={t('short_code')}
+                        />
+                        <TextareaForm
+                            name='description'
+                            label={tStrings('description')}
+                        />
                     </Modal.Body>
                     <Modal.Actions>
                         <Modal.Action type='button' onClick={handleClose}>
                             {tStrings('cancel')}
                         </Modal.Action>
-                        <Modal.Action type='submit' loading={form.formState.isSubmitting}>
+                        <Modal.Action
+                            type='submit'
+                            loading={form.formState.isSubmitting}
+                        >
                             {tStrings('create')}
                         </Modal.Action>
                     </Modal.Actions>
@@ -93,4 +110,4 @@ const CreateLocationModal = ({ mutate, open, onClose }: Props) => {
     )
 }
 
-export default CreateLocationModal;
\ No newline at end of file
+export default CreateLocationModal
diff --git a/resources/scripts/components/admin/locations/EditLocationModal.tsx b/resources/scripts/components/admin/locations/EditLocationModal.tsx
index 3fd179df880..183e7971be4 100644
--- a/resources/scripts/components/admin/locations/EditLocationModal.tsx
+++ b/resources/scripts/components/admin/locations/EditLocationModal.tsx
@@ -1,17 +1,19 @@
+import { useFlashKey } from '@/util/useFlash'
+import { zodResolver } from '@hookform/resolvers/zod'
+import { FormProvider, useForm } from 'react-hook-form'
+import { useTranslation } from 'react-i18next'
+import { KeyedMutator } from 'swr'
+import { z } from 'zod'
+
 import { Location, LocationResponse } from '@/api/admin/locations/getLocations'
 import updateLocation from '@/api/admin/locations/updateLocation'
+
 import FlashMessageRender from '@/components/elements/FlashMessageRenderer'
 import Modal from '@/components/elements/Modal'
 import TextInputFormik from '@/components/elements/formik/TextInputFormik'
 import TextareaFormik from '@/components/elements/formik/TextareaFormik'
 import TextInputForm from '@/components/elements/forms/TextInputForm'
 import TextareaForm from '@/components/elements/forms/TextareaForm'
-import { useFlashKey } from '@/util/useFlash'
-import { zodResolver } from '@hookform/resolvers/zod'
-import { FormProvider, useForm } from 'react-hook-form'
-import { useTranslation } from 'react-i18next'
-import { KeyedMutator } from 'swr'
-import { z } from 'zod'
 
 interface Props {
     location: Location
@@ -21,7 +23,9 @@ interface Props {
 }
 
 const EditLocationModal = ({ location, open, onClose, mutate }: Props) => {
-    const { clearFlashes, clearAndAddHttpError } = useFlashKey(`admin.locations.${location.id}.edit`)
+    const { clearFlashes, clearAndAddHttpError } = useFlashKey(
+        `admin.locations.${location.id}.edit`
+    )
     const { t: tStrings } = useTranslation('strings')
     const { t } = useTranslation('admin.locations')
 
@@ -42,14 +46,20 @@ const EditLocationModal = ({ location, open, onClose, mutate }: Props) => {
         clearFlashes()
 
         try {
-            const updatedLocation = await updateLocation(location.id, data.shortCode, data.description)
+            const updatedLocation = await updateLocation(
+                location.id,
+                data.shortCode,
+                data.description
+            )
 
             mutate(data => {
                 if (!data) return data
 
                 return {
                     ...data,
-                    items: data.items.map(l => (l.id === location.id ? updatedLocation : l)),
+                    items: data.items.map(l =>
+                        l.id === location.id ? updatedLocation : l
+                    ),
                 }
             }, false)
 
@@ -81,15 +91,27 @@ const EditLocationModal = ({ location, open, onClose, mutate }: Props) => {
             <FormProvider {...form}>
                 <form onSubmit={form.handleSubmit(submit)}>
                     <Modal.Body>
-                        <FlashMessageRender className='mb-5' byKey={`admin.locations.${location.id}.edit`} />
-                        <TextInputForm name='shortCode' label={t('short_code')} />
-                        <TextareaForm name='description' label={tStrings('description')} />
+                        <FlashMessageRender
+                            className='mb-5'
+                            byKey={`admin.locations.${location.id}.edit`}
+                        />
+                        <TextInputForm
+                            name='shortCode'
+                            label={t('short_code')}
+                        />
+                        <TextareaForm
+                            name='description'
+                            label={tStrings('description')}
+                        />
                     </Modal.Body>
                     <Modal.Actions>
                         <Modal.Action type='button' onClick={handleClose}>
                             {tStrings('cancel')}
                         </Modal.Action>
-                        <Modal.Action type='submit' loading={form.formState.isSubmitting}>
+                        <Modal.Action
+                            type='submit'
+                            loading={form.formState.isSubmitting}
+                        >
                             {tStrings('save')}
                         </Modal.Action>
                     </Modal.Actions>
diff --git a/resources/scripts/components/admin/locations/LocationsContainer.tsx b/resources/scripts/components/admin/locations/LocationsContainer.tsx
index 3b50601eb22..eb222537175 100644
--- a/resources/scripts/components/admin/locations/LocationsContainer.tsx
+++ b/resources/scripts/components/admin/locations/LocationsContainer.tsx
@@ -1,26 +1,34 @@
+import { useFlashKey } from '@/util/useFlash'
+import usePagination from '@/util/usePagination'
+import { useDebouncedValue } from '@mantine/hooks'
+import { useState } from 'react'
+import { useTranslation } from 'react-i18next'
+
 import deleteLocation from '@/api/admin/locations/deleteLocation'
 import { Location, LocationResponse } from '@/api/admin/locations/getLocations'
 import useLocationsSWR from '@/api/admin/locations/useLocationsSWR'
-import SearchBar from '@/components/admin/SearchBar'
-import CreateLocationModal from '@/components/admin/locations/CreateLocationModal'
-import EditLocationModal from '@/components/admin/locations/EditLocationModal'
+
 import Menu from '@/components/elements/Menu'
 import PageContentBlock from '@/components/elements/PageContentBlock'
 import Pagination from '@/components/elements/Pagination'
 import Spinner from '@/components/elements/Spinner'
-import Table, { Actions, ColumnArray, RowActionsProps } from '@/components/elements/displays/Table'
-import { useFlashKey } from '@/util/useFlash'
-import usePagination from '@/util/usePagination'
-import { useDebouncedValue } from '@mantine/hooks'
-import { useState } from 'react'
-import { useTranslation } from 'react-i18next'
+import Table, {
+    Actions,
+    ColumnArray,
+    RowActionsProps,
+} from '@/components/elements/displays/Table'
+
+import SearchBar from '@/components/admin/SearchBar'
+import CreateLocationModal from '@/components/admin/locations/CreateLocationModal'
+import EditLocationModal from '@/components/admin/locations/EditLocationModal'
 
 const LocationsContainer = () => {
     const { t } = useTranslation('admin.locations')
     const { t: tStrings } = useTranslation('strings')
     const [page, setPage] = usePagination()
     const [isCreating, setIsCreating] = useState(false)
-    const { clearFlashes, clearAndAddHttpError } = useFlashKey('admin.locations')
+    const { clearFlashes, clearAndAddHttpError } =
+        useFlashKey('admin.locations')
 
     const [query, setQuery] = useState('')
     const [debouncedQuery] = useDebouncedValue(query, 200)
@@ -59,8 +67,10 @@ const LocationsContainer = () => {
                         mutateData =>
                             ({
                                 ...mutateData,
-                                items: mutateData!.items.filter(l => l.id !== loc.id),
-                            } as LocationResponse),
+                                items: mutateData!.items.filter(
+                                    l => l.id !== loc.id
+                                ),
+                            }) as LocationResponse,
                         false
                     )
                 })
@@ -78,9 +88,15 @@ const LocationsContainer = () => {
                     onClose={() => setIsEditing(false)}
                 />
                 <Actions>
-                    <Menu.Item onClick={() => setIsEditing(true)}>{tStrings('edit')}</Menu.Item>
+                    <Menu.Item onClick={() => setIsEditing(true)}>
+                        {tStrings('edit')}
+                    </Menu.Item>
                     <Menu.Divider />
-                    <Menu.Item color='red' disabled={loc.nodesCount > 0} onClick={handleDelete}>
+                    <Menu.Item
+                        color='red'
+                        disabled={loc.nodesCount > 0}
+                        onClick={handleDelete}
+                    >
                         {tStrings('delete')}
                     </Menu.Item>
                 </Actions>
@@ -101,11 +117,21 @@ const LocationsContainer = () => {
                     <Spinner />
                 ) : (
                     <Pagination data={data} onPageSelect={setPage}>
-                        {({ items }) => <Table columns={columns} data={items} rowActions={rowActions} />}
+                        {({ items }) => (
+                            <Table
+                                columns={columns}
+                                data={items}
+                                rowActions={rowActions}
+                            />
+                        )}
                     </Pagination>
                 )}
             </PageContentBlock>
-            <CreateLocationModal open={isCreating} onClose={() => setIsCreating(false)} mutate={mutate} />
+            <CreateLocationModal
+                open={isCreating}
+                onClose={() => setIsCreating(false)}
+                mutate={mutate}
+            />
         </div>
     )
 }
diff --git a/resources/scripts/components/admin/nodes/CreateNodeModal.tsx b/resources/scripts/components/admin/nodes/CreateNodeModal.tsx
index 2d284f5d9c7..550c7c9953b 100644
--- a/resources/scripts/components/admin/nodes/CreateNodeModal.tsx
+++ b/resources/scripts/components/admin/nodes/CreateNodeModal.tsx
@@ -1,16 +1,19 @@
-import useNodesSWR from '@/api/admin/nodes/useNodesSWR'
-import LocationsSelectForm from '@/components/admin/nodes/LocationsSelectForm'
-import FlashMessageRender from '@/components/elements/FlashMessageRenderer'
-import TextInputForm from '@/components/elements/forms/TextInputForm'
-import MessageBox from '@/components/elements/MessageBox'
-import Modal from '@/components/elements/Modal'
 import { useFlashKey } from '@/util/useFlash'
-import { z } from 'zod'
 import { hostname } from '@/util/validation'
-import { FormProvider, useForm } from 'react-hook-form'
 import { zodResolver } from '@hookform/resolvers/zod'
+import { FormProvider, useForm } from 'react-hook-form'
 import { useTranslation } from 'react-i18next'
+import { z } from 'zod'
+
 import createNode from '@/api/admin/nodes/createNode'
+import useNodesSWR from '@/api/admin/nodes/useNodesSWR'
+
+import FlashMessageRender from '@/components/elements/FlashMessageRenderer'
+import MessageBox from '@/components/elements/MessageBox'
+import Modal from '@/components/elements/Modal'
+import TextInputForm from '@/components/elements/forms/TextInputForm'
+
+import LocationsSelectForm from '@/components/admin/nodes/LocationsSelectForm'
 
 interface Props {
     open: boolean
@@ -18,7 +21,9 @@ interface Props {
 }
 
 const CreateNodeModal = ({ open, onClose }: Props) => {
-    const { clearFlashes, clearAndAddHttpError } = useFlashKey('admin.nodes.index.create')
+    const { clearFlashes, clearAndAddHttpError } = useFlashKey(
+        'admin.nodes.index.create'
+    )
     const { mutate } = useNodesSWR({ page: 1, query: '' })
     const { t: tStrings } = useTranslation('strings')
     const { t } = useTranslation('admin.nodes.index')
@@ -102,39 +107,83 @@ const CreateNodeModal = ({ open, onClose }: Props) => {
             <FormProvider {...form}>
                 <form onSubmit={form.handleSubmit(submit)}>
                     <Modal.Body>
-                        <FlashMessageRender className='mb-5' byKey={'admin.nodes.index.create'} />
-                        <TextInputForm name='name' label={tStrings('display_name')} />
+                        <FlashMessageRender
+                            className='mb-5'
+                            byKey={'admin.nodes.index.create'}
+                        />
+                        <TextInputForm
+                            name='name'
+                            label={tStrings('display_name')}
+                        />
                         <LocationsSelectForm />
                         <TextInputForm name='cluster' label={t('pve_name')} />
-                        <MessageBox className='mt-3' title='Warning' type='warning'>
+                        <MessageBox
+                            className='mt-3'
+                            title='Warning'
+                            type='warning'
+                        >
                             {t('creds_warning')}
                         </MessageBox>
                         <div className='grid gap-3 grid-cols-2'>
-                            <TextInputForm name='tokenId' label={t('token_id')} />
+                            <TextInputForm
+                                name='tokenId'
+                                label={t('token_id')}
+                            />
                             <TextInputForm name='secret' label={t('secret')} />
                         </div>
                         <TextInputForm name='fqdn' label={tStrings('fqdn')} />
                         <TextInputForm name='port' label={tStrings('port')} />
                         <div className='grid gap-3 grid-cols-2'>
-                            <TextInputForm name='memory' label={`${t('memory_allocation')} (MiB)`} />
-                            <TextInputForm name='memoryOverallocate' label={`${t('memory_overallocation')} (%)`} />
+                            <TextInputForm
+                                name='memory'
+                                label={`${t('memory_allocation')} (MiB)`}
+                            />
+                            <TextInputForm
+                                name='memoryOverallocate'
+                                label={`${t('memory_overallocation')} (%)`}
+                            />
                         </div>
                         <div className='grid gap-3 grid-cols-2'>
-                            <TextInputForm name='disk' label={`${t('disk_allocation')} (MiB)`} />
-                            <TextInputForm name='diskOverallocate' label={`${t('disk_allocation')} (MiB)`} />
+                            <TextInputForm
+                                name='disk'
+                                label={`${t('disk_allocation')} (MiB)`}
+                            />
+                            <TextInputForm
+                                name='diskOverallocate'
+                                label={`${t('disk_allocation')} (MiB)`}
+                            />
                         </div>
                         <div className='grid gap-3 grid-cols-3'>
-                            <TextInputForm name='vmStorage' label={t('vm_storage')} placeholder='local' />
-                            <TextInputForm name='backupStorage' label={t('backup_storage')} placeholder='local' />
-                            <TextInputForm name='isoStorage' label={t('iso_storage')} placeholder='local' />
+                            <TextInputForm
+                                name='vmStorage'
+                                label={t('vm_storage')}
+                                placeholder='local'
+                            />
+                            <TextInputForm
+                                name='backupStorage'
+                                label={t('backup_storage')}
+                                placeholder='local'
+                            />
+                            <TextInputForm
+                                name='isoStorage'
+                                label={t('iso_storage')}
+                                placeholder='local'
+                            />
                         </div>
-                        <TextInputForm name='network' label={tStrings('network')} placeholder='vmbr0' />
+                        <TextInputForm
+                            name='network'
+                            label={tStrings('network')}
+                            placeholder='vmbr0'
+                        />
                     </Modal.Body>
                     <Modal.Actions>
                         <Modal.Action type='button' onClick={handleClose}>
                             {tStrings('cancel')}
                         </Modal.Action>
-                        <Modal.Action type='submit' loading={form.formState.isSubmitting}>
+                        <Modal.Action
+                            type='submit'
+                            loading={form.formState.isSubmitting}
+                        >
                             {tStrings('create')}
                         </Modal.Action>
                     </Modal.Actions>
diff --git a/resources/scripts/components/admin/nodes/LocationsSelectForm.tsx b/resources/scripts/components/admin/nodes/LocationsSelectForm.tsx
index 90fa05fea25..eb2a01f027c 100644
--- a/resources/scripts/components/admin/nodes/LocationsSelectForm.tsx
+++ b/resources/scripts/components/admin/nodes/LocationsSelectForm.tsx
@@ -1,7 +1,9 @@
-import useLocationsSWR from '@/api/admin/locations/useLocationsSWR'
 import { useDebouncedValue } from '@mantine/hooks'
 import { useState } from 'react'
 import { useFormContext } from 'react-hook-form'
+
+import useLocationsSWR from '@/api/admin/locations/useLocationsSWR'
+
 import SelectForm from '@/components/elements/forms/SelectForm'
 
 const LocationsSelectForm = () => {
@@ -9,7 +11,9 @@ const LocationsSelectForm = () => {
     const locationId: string = watch('locationId')
     const [query, setQuery] = useState(locationId)
     const [debouncedQuery] = useDebouncedValue(query, 200)
-    const { data, mutate, isValidating, isLoading } = useLocationsSWR({ query: debouncedQuery })
+    const { data, mutate, isValidating, isLoading } = useLocationsSWR({
+        query: debouncedQuery,
+    })
     const locations =
         data?.items.map(location => ({
             value: location.id.toString(),
diff --git a/resources/scripts/components/admin/nodes/NodeContentBlock.tsx b/resources/scripts/components/admin/nodes/NodeContentBlock.tsx
index bcf8ce8e045..df01e0d9b4c 100644
--- a/resources/scripts/components/admin/nodes/NodeContentBlock.tsx
+++ b/resources/scripts/components/admin/nodes/NodeContentBlock.tsx
@@ -1,6 +1,9 @@
-import PageContentBlock, { PageContentBlockProps } from '@/components/elements/PageContentBlock'
 import { NodeContext } from '@/state/admin/node'
 
+import PageContentBlock, {
+    PageContentBlockProps,
+} from '@/components/elements/PageContentBlock'
+
 interface Props extends PageContentBlockProps {
     title: string
 }
diff --git a/resources/scripts/components/admin/nodes/NodesContainer.tsx b/resources/scripts/components/admin/nodes/NodesContainer.tsx
index deb14cc80f9..4203f5e0f89 100644
--- a/resources/scripts/components/admin/nodes/NodesContainer.tsx
+++ b/resources/scripts/components/admin/nodes/NodesContainer.tsx
@@ -1,27 +1,35 @@
+import { bytesToString } from '@/util/helpers'
+import { useFlashKey } from '@/util/useFlash'
+import usePagination from '@/util/usePagination'
+import { useDebouncedValue } from '@mantine/hooks'
+import { useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { Link } from 'react-router-dom'
+
 import deleteNode from '@/api/admin/nodes/deleteNode'
 import { Node, NodeResponse } from '@/api/admin/nodes/getNodes'
 import useNodesSWR from '@/api/admin/nodes/useNodesSWR'
-import CreateNodeModal from '@/components/admin/nodes/CreateNodeModal'
-import SearchBar from '@/components/admin/SearchBar'
-import Table, { Actions, ColumnArray, RowActionsProps } from '@/components/elements/displays/Table'
+
 import Menu from '@/components/elements/Menu'
 import PageContentBlock from '@/components/elements/PageContentBlock'
 import Pagination from '@/components/elements/Pagination'
 import Spinner from '@/components/elements/Spinner'
-import { bytesToString } from '@/util/helpers'
-import { useFlashKey } from '@/util/useFlash'
-import usePagination from '@/util/usePagination'
-import { useDebouncedValue } from '@mantine/hooks'
-import { useState } from 'react'
-import { Link } from 'react-router-dom'
-import { useTranslation } from 'react-i18next'
+import Table, {
+    Actions,
+    ColumnArray,
+    RowActionsProps,
+} from '@/components/elements/displays/Table'
+
+import SearchBar from '@/components/admin/SearchBar'
+import CreateNodeModal from '@/components/admin/nodes/CreateNodeModal'
 
 const NodesContainer = () => {
     const { t: tStrings } = useTranslation('strings')
     const { t } = useTranslation('admin.nodes.index')
     const [page, setPage] = usePagination()
     const [open, setOpen] = useState(false)
-    const { clearFlashes, clearAndAddHttpError } = useFlashKey('admin.nodes.index')
+    const { clearFlashes, clearAndAddHttpError } =
+        useFlashKey('admin.nodes.index')
 
     const [query, setQuery] = useState('')
     const [debouncedQuery] = useDebouncedValue(query, 200)
@@ -32,7 +40,10 @@ const NodesContainer = () => {
             accessor: 'name',
             header: tStrings('node'),
             cell: ({ value, row }) => (
-                <Link to={`/admin/nodes/${row.id}`} className='link text-foreground'>
+                <Link
+                    to={`/admin/nodes/${row.id}`}
+                    className='link text-foreground'
+                >
                     {value}
                 </Link>
             ),
@@ -69,8 +80,10 @@ const NodesContainer = () => {
                     mutateData =>
                         ({
                             ...mutateData,
-                            items: mutateData!.items.filter(n => n.id !== node.id),
-                        } as NodeResponse),
+                            items: mutateData!.items.filter(
+                                n => n.id !== node.id
+                            ),
+                        }) as NodeResponse,
                     false
                 )
             } catch (error) {
@@ -80,7 +93,11 @@ const NodesContainer = () => {
 
         return (
             <Actions>
-                <Menu.Item color='red' disabled={node.serversCount > 0} onClick={handleDelete}>
+                <Menu.Item
+                    color='red'
+                    disabled={node.serversCount > 0}
+                    onClick={handleDelete}
+                >
                     {tStrings('delete')}
                 </Menu.Item>
             </Actions>
@@ -89,7 +106,10 @@ const NodesContainer = () => {
 
     return (
         <div className='bg-background min-h-screen'>
-            <PageContentBlock title={tStrings('node_other') ?? 'Nodes'} showFlashKey='admin.nodes.index'>
+            <PageContentBlock
+                title={tStrings('node_other') ?? 'Nodes'}
+                showFlashKey='admin.nodes.index'
+            >
                 <CreateNodeModal open={open} onClose={() => setOpen(false)} />
                 <SearchBar
                     value={query}
@@ -101,7 +121,13 @@ const NodesContainer = () => {
                     <Spinner />
                 ) : (
                     <Pagination data={data} onPageSelect={setPage}>
-                        {({ items }) => <Table rowActions={rowActions} columns={columns} data={items} />}
+                        {({ items }) => (
+                            <Table
+                                rowActions={rowActions}
+                                columns={columns}
+                                data={items}
+                            />
+                        )}
                     </Pagination>
                 )}
             </PageContentBlock>
diff --git a/resources/scripts/components/admin/nodes/addresses/CreateAddressModal.tsx b/resources/scripts/components/admin/nodes/addresses/CreateAddressModal.tsx
index 41cd446b423..c898c04c072 100644
--- a/resources/scripts/components/admin/nodes/addresses/CreateAddressModal.tsx
+++ b/resources/scripts/components/admin/nodes/addresses/CreateAddressModal.tsx
@@ -1,22 +1,27 @@
-import FlashMessageRender from '@/components/elements/FlashMessageRenderer'
-import Modal from '@/components/elements/Modal'
-import RadioGroupForm from '@/components/elements/forms/RadioGroupForm'
-import TextInputForm from '@/components/elements/forms/TextInputForm'
-import Radio from '@/components/elements/inputs/Radio'
+import { countIPsInRange } from '@/util/helpers'
 import { useFlashKey } from '@/util/useFlash'
 import { zodResolver } from '@hookform/resolvers/zod'
+import { useMemo } from 'react'
 import { FormProvider, useForm } from 'react-hook-form'
 import { Trans, useTranslation } from 'react-i18next'
-import { z } from 'zod'
-import ServersSelectForm from '@/components/admin/ipam/addresses/ServersSelectForm'
-import createAddress, { schema } from '@/api/admin/addressPools/addresses/createAddress'
 import { KeyedMutator } from 'swr'
+import { z } from 'zod'
+
+import createAddress, {
+    schema,
+} from '@/api/admin/addressPools/addresses/createAddress'
 import { AddressResponse } from '@/api/admin/nodes/addresses/getAddresses'
-import { useMemo } from 'react'
+import useNodeSWR from '@/api/admin/nodes/useNodeSWR'
 import { AddressType } from '@/api/server/getServer'
+
+import FlashMessageRender from '@/components/elements/FlashMessageRenderer'
+import Modal from '@/components/elements/Modal'
 import SegmentedControl from '@/components/elements/SegmentedControl'
-import { countIPsInRange } from '@/util/helpers'
-import useNodeSWR from '@/api/admin/nodes/useNodeSWR'
+import RadioGroupForm from '@/components/elements/forms/RadioGroupForm'
+import TextInputForm from '@/components/elements/forms/TextInputForm'
+import Radio from '@/components/elements/inputs/Radio'
+
+import ServersSelectForm from '@/components/admin/ipam/addresses/ServersSelectForm'
 
 interface Props {
     open: boolean
@@ -28,7 +33,9 @@ const CreateAddressModal = ({ open, onClose, mutate }: Props) => {
     const { t: tStrings } = useTranslation('strings')
     const { t } = useTranslation('admin.addressPools.addresses')
     const { data: node } = useNodeSWR()
-    const { clearFlashes, clearAndAddHttpError } = useFlashKey(`admin.nodes.${node.id}`)
+    const { clearFlashes, clearAndAddHttpError } = useFlashKey(
+        `admin.nodes.${node.id}`
+    )
 
     const form = useForm({
         resolver: zodResolver(schema),
@@ -53,7 +60,11 @@ const CreateAddressModal = ({ open, onClose, mutate }: Props) => {
     const addressCount = useMemo(() => {
         if (!watchIsBulkAction) return 0
 
-        return countIPsInRange(watchType, watchStartingAddress, watchEndingAddress)
+        return countIPsInRange(
+            watchType,
+            watchStartingAddress,
+            watchEndingAddress
+        )
     }, [watchIsBulkAction, watchType, watchStartingAddress, watchEndingAddress])
 
     const handleClose = () => {
@@ -62,12 +73,15 @@ const CreateAddressModal = ({ open, onClose, mutate }: Props) => {
     }
 
     const submit = async (_data: any) => {
-        const { macAddress, serverId, ...data } = _data as z.infer<typeof schema>
+        const { macAddress, serverId, ...data } = _data as z.infer<
+            typeof schema
+        >
 
         clearFlashes()
         try {
             const address = await createAddress(pool.id, {
-                macAddress: macAddress && macAddress.length > 0 ? macAddress : null,
+                macAddress:
+                    macAddress && macAddress.length > 0 ? macAddress : null,
                 serverId: serverId !== '' ? serverId : null,
                 include: ['server'],
                 ...data,
@@ -102,37 +116,83 @@ const CreateAddressModal = ({ open, onClose, mutate }: Props) => {
             <FormProvider {...form}>
                 <form onSubmit={form.handleSubmit(submit)}>
                     <Modal.Body>
-                        <FlashMessageRender className='mb-5' byKey={`admin.addressPools.${pool.id}.addresses.create`} />
+                        <FlashMessageRender
+                            className='mb-5'
+                            byKey={`admin.addressPools.${pool.id}.addresses.create`}
+                        />
                         <SegmentedControl
                             className='!w-full'
                             disabled={form.formState.isSubmitting}
                             value={watchIsBulkAction ? 'multiple' : 'single'}
-                            onChange={val => form.setValue('isBulkAction', val === 'multiple')}
+                            onChange={val =>
+                                form.setValue(
+                                    'isBulkAction',
+                                    val === 'multiple'
+                                )
+                            }
                             data={[
                                 { value: 'single', label: tStrings('single') },
-                                { value: 'multiple', label: tStrings('multiple') },
+                                {
+                                    value: 'multiple',
+                                    label: tStrings('multiple'),
+                                },
                             ]}
                         />
-                        <RadioGroupForm name='type' orientation='vertical' spacing={6}>
-                            <Radio name='type' value='ipv4' label={tStrings('ipv4')} />
-                            <Radio name='type' value='ipv6' label={tStrings('ipv6')} />
+                        <RadioGroupForm
+                            name='type'
+                            orientation='vertical'
+                            spacing={6}
+                        >
+                            <Radio
+                                name='type'
+                                value='ipv4'
+                                label={tStrings('ipv4')}
+                            />
+                            <Radio
+                                name='type'
+                                value='ipv6'
+                                label={tStrings('ipv6')}
+                            />
                         </RadioGroupForm>
                         {watchIsBulkAction ? (
                             <>
-                                <TextInputForm name='startingAddress' label={t('create_modal.starting_address')} />
-                                <TextInputForm name='endingAddress' label={t('create_modal.ending_address')} />
+                                <TextInputForm
+                                    name='startingAddress'
+                                    label={t('create_modal.starting_address')}
+                                />
+                                <TextInputForm
+                                    name='endingAddress'
+                                    label={t('create_modal.ending_address')}
+                                />
                                 <p className={'description-small pt-2 pb-4'}>
-                                    <Trans t={tStrings} i18nKey={'addressWithCount'} count={addressCount}>
+                                    <Trans
+                                        t={tStrings}
+                                        i18nKey={'addressWithCount'}
+                                        count={addressCount}
+                                    >
                                         {{ addressCount }} address
                                     </Trans>
                                 </p>
                             </>
                         ) : (
-                            <TextInputForm name='address' label={tStrings('address_one')} />
+                            <TextInputForm
+                                name='address'
+                                label={tStrings('address_one')}
+                            />
                         )}
-                        <TextInputForm name='cidr' label={tStrings('cidr')} placeholder='24' />
-                        <TextInputForm name='gateway' label={tStrings('gateway')} />
-                        <TextInputForm name='macAddress' label={tStrings('mac_address')} />
+                        <TextInputForm
+                            name='cidr'
+                            label={tStrings('cidr')}
+                            placeholder='24'
+                        />
+                        <TextInputForm
+                            name='gateway'
+                            label={tStrings('gateway')}
+                        />
+                        <TextInputForm
+                            name='macAddress'
+                            label={tStrings('mac_address')}
+                        />
                         <ServersSelectForm />
                     </Modal.Body>
 
@@ -140,7 +200,10 @@ const CreateAddressModal = ({ open, onClose, mutate }: Props) => {
                         <Modal.Action type='button' onClick={handleClose}>
                             {tStrings('cancel')}
                         </Modal.Action>
-                        <Modal.Action type='submit' loading={form.formState.isSubmitting}>
+                        <Modal.Action
+                            type='submit'
+                            loading={form.formState.isSubmitting}
+                        >
                             {tStrings('create')}
                         </Modal.Action>
                     </Modal.Actions>
diff --git a/resources/scripts/components/admin/nodes/addresses/DeleteAddressModal.tsx b/resources/scripts/components/admin/nodes/addresses/DeleteAddressModal.tsx
index 6abd8268bc0..53505be497e 100644
--- a/resources/scripts/components/admin/nodes/addresses/DeleteAddressModal.tsx
+++ b/resources/scripts/components/admin/nodes/addresses/DeleteAddressModal.tsx
@@ -1,12 +1,14 @@
+import { NodeContext } from '@/state/admin/node'
+import useFlash from '@/util/useFlash'
+import usePagination from '@/util/usePagination'
+import { FormikProvider, useFormik } from 'formik'
+
+import deleteAddress from '@/api/admin/nodes/addresses/deleteAddress'
 import useAddressesSWR from '@/api/admin/nodes/addresses/useAddressesSWR'
 import { Address } from '@/api/server/getServer'
+
 import FlashMessageRender from '@/components/elements/FlashMessageRenderer'
 import Modal from '@/components/elements/Modal'
-import { NodeContext } from '@/state/admin/node'
-import useFlash from '@/util/useFlash'
-import deleteAddress from '@/api/admin/nodes/addresses/deleteAddress'
-import { FormikProvider, useFormik } from 'formik'
-import usePagination from '@/util/usePagination'
 
 interface Props {
     open: boolean
@@ -40,7 +42,10 @@ const DeleteAddressModal = ({ open, onClose, address }: Props) => {
                 }, false)
                 onClose()
             } catch (error) {
-                clearAndAddHttpError({ key: 'admin:node:addresses.delete', error })
+                clearAndAddHttpError({
+                    key: 'admin:node:addresses.delete',
+                    error,
+                })
             }
             setSubmitting(false)
         },
@@ -54,10 +59,14 @@ const DeleteAddressModal = ({ open, onClose, address }: Props) => {
             <FormikProvider value={form}>
                 <form onSubmit={form.handleSubmit}>
                     <Modal.Body>
-                        <FlashMessageRender className='mb-5' byKey={'admin:node:addresses.delete'} />
+                        <FlashMessageRender
+                            className='mb-5'
+                            byKey={'admin:node:addresses.delete'}
+                        />
 
                         <Modal.Description>
-                            Are you sure you want to delete this address? This action cannot be undone.
+                            Are you sure you want to delete this address? This
+                            action cannot be undone.
                         </Modal.Description>
                     </Modal.Body>
                     <Modal.Actions>
diff --git a/resources/scripts/components/admin/nodes/addresses/EditAddressModal.tsx b/resources/scripts/components/admin/nodes/addresses/EditAddressModal.tsx
index 19e959ce31f..50013c7c5a3 100644
--- a/resources/scripts/components/admin/nodes/addresses/EditAddressModal.tsx
+++ b/resources/scripts/components/admin/nodes/addresses/EditAddressModal.tsx
@@ -1,18 +1,21 @@
-import useAddressesSWR from '@/api/admin/nodes/addresses/useAddressesSWR'
-import { Address } from '@/api/server/getServer'
-import FlashMessageRender from '@/components/elements/FlashMessageRenderer'
-import TextInputFormik from '@/components/elements/formik/TextInputFormik'
-import Modal from '@/components/elements/Modal'
 import useFlash from '@/util/useFlash'
+import usePagination from '@/util/usePagination'
 import { FormikProvider, useFormik } from 'formik'
-import Radio from '@/components/elements/inputs/Radio'
-import RadioGroupFormik from '@/components/elements/formik/RadioGroupFormik'
-import ServersSelectFormik from '@/components/admin/nodes/addresses/ServersSelectFormik'
 import * as yup from 'yup'
+
 import createAddress from '@/api/admin/nodes/addresses/createAddress'
 import updateAddress from '@/api/admin/nodes/addresses/updateAddress'
-import usePagination from '@/util/usePagination'
+import useAddressesSWR from '@/api/admin/nodes/addresses/useAddressesSWR'
 import useNodeSWR from '@/api/admin/nodes/useNodeSWR'
+import { Address } from '@/api/server/getServer'
+
+import FlashMessageRender from '@/components/elements/FlashMessageRenderer'
+import Modal from '@/components/elements/Modal'
+import RadioGroupFormik from '@/components/elements/formik/RadioGroupFormik'
+import TextInputFormik from '@/components/elements/formik/TextInputFormik'
+import Radio from '@/components/elements/inputs/Radio'
+
+import ServersSelectFormik from '@/components/admin/nodes/addresses/ServersSelectFormik'
 
 interface Props {
     open: boolean
@@ -48,11 +51,15 @@ const EditAddressModal = ({ open, onClose, address }: Props) => {
             setSubmitting(true)
             try {
                 if (address) {
-                    const updatedAddress = await updateAddress(node.id, address.id, {
-                        ...values,
-                        serverId: parseInt(serverId as string),
-                        cidr: parseInt(cidr as string),
-                    })
+                    const updatedAddress = await updateAddress(
+                        node.id,
+                        address.id,
+                        {
+                            ...values,
+                            serverId: parseInt(serverId as string),
+                            cidr: parseInt(cidr as string),
+                        }
+                    )
 
                     mutate(data => {
                         if (!data) return data
@@ -87,7 +94,10 @@ const EditAddressModal = ({ open, onClose, address }: Props) => {
 
                 handleClose()
             } catch (error) {
-                clearAndAddHttpError({ key: 'admin:node:addresses.edit', error })
+                clearAndAddHttpError({
+                    key: 'admin:node:addresses.edit',
+                    error,
+                })
             }
 
             setSubmitting(false)
@@ -108,15 +118,33 @@ const EditAddressModal = ({ open, onClose, address }: Props) => {
             <FormikProvider value={form}>
                 <form onSubmit={form.handleSubmit}>
                     <Modal.Body>
-                        <FlashMessageRender className='mb-5' byKey={'admin:node:addresses.edit'} />
-                        <TextInputFormik name='address' label='Address' placeholder='127.0.0.1' />
-                        <RadioGroupFormik name='type' orientation='vertical' spacing={6}>
+                        <FlashMessageRender
+                            className='mb-5'
+                            byKey={'admin:node:addresses.edit'}
+                        />
+                        <TextInputFormik
+                            name='address'
+                            label='Address'
+                            placeholder='127.0.0.1'
+                        />
+                        <RadioGroupFormik
+                            name='type'
+                            orientation='vertical'
+                            spacing={6}
+                        >
                             <Radio value='ipv4' label='IPv4' />
                             <Radio value='ipv6' label='IPv6' />
                         </RadioGroupFormik>
-                        <TextInputFormik name='cidr' label='Cidr/Subnet mask' placeholder='24' />
+                        <TextInputFormik
+                            name='cidr'
+                            label='Cidr/Subnet mask'
+                            placeholder='24'
+                        />
                         <TextInputFormik name='gateway' label='Gateway' />
-                        <TextInputFormik name='macAddress' label='Mac Address (optional)' />
+                        <TextInputFormik
+                            name='macAddress'
+                            label='Mac Address (optional)'
+                        />
                         <ServersSelectFormik />
                     </Modal.Body>
                     <Modal.Actions>
diff --git a/resources/scripts/components/admin/nodes/addresses/NodeAddressesContainer.tsx b/resources/scripts/components/admin/nodes/addresses/NodeAddressesContainer.tsx
index 3cea8f20909..fbd755982c2 100644
--- a/resources/scripts/components/admin/nodes/addresses/NodeAddressesContainer.tsx
+++ b/resources/scripts/components/admin/nodes/addresses/NodeAddressesContainer.tsx
@@ -1,17 +1,24 @@
+import usePagination from '@/util/usePagination'
+import { useState } from 'react'
+import { Link } from 'react-router-dom'
+
 import useAddressesSWR from '@/api/admin/nodes/addresses/useAddressesSWR'
+import useNodeSWR from '@/api/admin/nodes/useNodeSWR'
 import { Address } from '@/api/server/getServer'
-import DeleteAddressModal from '@/components/admin/nodes/addresses/DeleteAddressModal'
-import EditAddressModal from '@/components/admin/nodes/addresses/EditAddressModal'
-import NodeContentBlock from '@/components/admin/nodes/NodeContentBlock'
+
 import Button from '@/components/elements/Button'
-import Table, { Actions, ColumnArray, RowActionsProps } from '@/components/elements/displays/Table'
 import Menu from '@/components/elements/Menu'
 import Pagination from '@/components/elements/Pagination'
 import Spinner from '@/components/elements/Spinner'
-import usePagination from '@/util/usePagination'
-import { useState } from 'react'
-import { Link } from 'react-router-dom'
-import useNodeSWR from '@/api/admin/nodes/useNodeSWR'
+import Table, {
+    Actions,
+    ColumnArray,
+    RowActionsProps,
+} from '@/components/elements/displays/Table'
+
+import NodeContentBlock from '@/components/admin/nodes/NodeContentBlock'
+import DeleteAddressModal from '@/components/admin/nodes/addresses/DeleteAddressModal'
+import EditAddressModal from '@/components/admin/nodes/addresses/EditAddressModal'
 
 const columns: ColumnArray<Address> = [
     {
@@ -39,7 +46,10 @@ const columns: ColumnArray<Address> = [
         header: 'Server',
         cell: ({ value }) =>
             value ? (
-                <Link to={`/admin/servers/${value.id}`} className='link text-foreground'>
+                <Link
+                    to={`/admin/servers/${value.id}`}
+                    className='link text-foreground'
+                >
                     {value.hostname}
                 </Link>
             ) : null,
@@ -49,7 +59,10 @@ const columns: ColumnArray<Address> = [
 const NodeAddressesContainer = () => {
     const { data: node } = useNodeSWR()
     const [page, setPage] = usePagination()
-    const { mutate, data } = useAddressesSWR(node.id, { page, include: ['server'] })
+    const { mutate, data } = useAddressesSWR(node.id, {
+        page,
+        include: ['server'],
+    })
     const [open, setOpen] = useState(false)
 
     const rowActions = ({ row }: RowActionsProps<Address>) => {
@@ -58,12 +71,25 @@ const NodeAddressesContainer = () => {
 
         return (
             <>
-                <EditAddressModal address={row} open={showEditModal} onClose={() => setShowEditModal(false)} />
-                <DeleteAddressModal address={row} open={showDeleteModal} onClose={() => setShowDeleteModal(false)} />
+                <EditAddressModal
+                    address={row}
+                    open={showEditModal}
+                    onClose={() => setShowEditModal(false)}
+                />
+                <DeleteAddressModal
+                    address={row}
+                    open={showDeleteModal}
+                    onClose={() => setShowDeleteModal(false)}
+                />
                 <Actions>
-                    <Menu.Item onClick={() => setShowEditModal(true)}>Edit</Menu.Item>
+                    <Menu.Item onClick={() => setShowEditModal(true)}>
+                        Edit
+                    </Menu.Item>
                     <Menu.Divider />
-                    <Menu.Item color='red' onClick={() => setShowDeleteModal(true)}>
+                    <Menu.Item
+                        color='red'
+                        onClick={() => setShowDeleteModal(true)}
+                    >
                         Delete
                     </Menu.Item>
                 </Actions>
@@ -73,7 +99,10 @@ const NodeAddressesContainer = () => {
 
     return (
         <div className='bg-background min-h-screen'>
-            <NodeContentBlock title='Addresses' showFlashKey='admin:node:addresses'>
+            <NodeContentBlock
+                title='Addresses'
+                showFlashKey='admin:node:addresses'
+            >
                 <EditAddressModal open={open} onClose={() => setOpen(false)} />
                 <div className='flex justify-end items-center mb-3'>
                     <Button onClick={() => setOpen(true)} variant='filled'>
@@ -84,7 +113,13 @@ const NodeAddressesContainer = () => {
                     <Spinner />
                 ) : (
                     <Pagination data={data} onPageSelect={setPage}>
-                        {({ items }) => <Table rowActions={rowActions} columns={columns} data={items} />}
+                        {({ items }) => (
+                            <Table
+                                rowActions={rowActions}
+                                columns={columns}
+                                data={items}
+                            />
+                        )}
                     </Pagination>
                 )}
             </NodeContentBlock>
diff --git a/resources/scripts/components/admin/nodes/addresses/ServersSelectFormik.tsx b/resources/scripts/components/admin/nodes/addresses/ServersSelectFormik.tsx
index d40cf5c0d12..13e1c069d31 100644
--- a/resources/scripts/components/admin/nodes/addresses/ServersSelectFormik.tsx
+++ b/resources/scripts/components/admin/nodes/addresses/ServersSelectFormik.tsx
@@ -1,10 +1,12 @@
-import useServersSWR from '@/api/admin/servers/useServersSWR'
-import DescriptiveItemComponent from '@/components/elements/DescriptiveItemComponent'
-import SelectFormik from '@/components/elements/formik/SelectFormik'
 import { useDebouncedValue } from '@mantine/hooks'
 import { useField } from 'formik'
 import { useEffect, useMemo, useState } from 'react'
+
 import useNodeSWR from '@/api/admin/nodes/useNodeSWR'
+import useServersSWR from '@/api/admin/servers/useServersSWR'
+
+import DescriptiveItemComponent from '@/components/elements/DescriptiveItemComponent'
+import SelectFormik from '@/components/elements/formik/SelectFormik'
 
 const ServersSelectFormik = () => {
     const [{ value }] = useField('serverId')
@@ -13,7 +15,10 @@ const ServersSelectFormik = () => {
     const { data: node } = useNodeSWR()
     const [debouncedQuery] = useDebouncedValue(query, 200)
 
-    const { data, isLoading, isValidating } = useServersSWR({ nodeId: node.id, query: debouncedQuery })
+    const { data, isLoading, isValidating } = useServersSWR({
+        nodeId: node.id,
+        query: debouncedQuery,
+    })
     const servers = useMemo(
         () =>
             data?.items.map(server => ({
diff --git a/resources/scripts/components/admin/nodes/isos/EditIsoModal.tsx b/resources/scripts/components/admin/nodes/isos/EditIsoModal.tsx
index 94c177b5d09..2aeca28e2e3 100644
--- a/resources/scripts/components/admin/nodes/isos/EditIsoModal.tsx
+++ b/resources/scripts/components/admin/nodes/isos/EditIsoModal.tsx
@@ -1,15 +1,17 @@
+import { NodeContext } from '@/state/admin/node'
+import useFlash from '@/util/useFlash'
+import { FormikProvider, useFormik } from 'formik'
+import * as yup from 'yup'
+
 import { ISO, IsoResponse } from '@/api/admin/nodes/isos/getIsos'
 import updateIso from '@/api/admin/nodes/isos/updateIso'
 import useIsosSWR from '@/api/admin/nodes/isos/useIsosSWR'
+import useNodeSWR from '@/api/admin/nodes/useNodeSWR'
+
 import FlashMessageRender from '@/components/elements/FlashMessageRenderer'
+import Modal from '@/components/elements/Modal'
 import CheckboxFormik from '@/components/elements/formik/CheckboxFormik'
 import TextInputFormik from '@/components/elements/formik/TextInputFormik'
-import Modal from '@/components/elements/Modal'
-import { NodeContext } from '@/state/admin/node'
-import useFlash from '@/util/useFlash'
-import { FormikProvider, useFormik } from 'formik'
-import * as yup from 'yup'
-import useNodeSWR from '@/api/admin/nodes/useNodeSWR'
 
 interface Props {
     open: boolean
@@ -41,7 +43,9 @@ const EditIsoModal = ({ open, onClose, iso }: Props) => {
                         mutateData =>
                             ({
                                 ...mutateData,
-                                items: mutateData!.items.map(item => (item.uuid === newIso.uuid ? newIso : item)),
+                                items: mutateData!.items.map(item =>
+                                    item.uuid === newIso.uuid ? newIso : item
+                                ),
                             }) as IsoResponse,
                         false
                     )
@@ -49,7 +53,10 @@ const EditIsoModal = ({ open, onClose, iso }: Props) => {
                     onClose()
                 })
                 .catch(error => {
-                    clearAndAddHttpError({ key: 'admin:node:iso.update', error })
+                    clearAndAddHttpError({
+                        key: 'admin:node:iso.update',
+                        error,
+                    })
                     setSubmitting(false)
                 })
         },
@@ -69,9 +76,16 @@ const EditIsoModal = ({ open, onClose, iso }: Props) => {
             <FormikProvider value={form}>
                 <form onSubmit={form.handleSubmit}>
                     <Modal.Body>
-                        <FlashMessageRender className='mb-5' byKey={'admin:node:iso.update'} />
+                        <FlashMessageRender
+                            className='mb-5'
+                            byKey={'admin:node:iso.update'}
+                        />
                         <TextInputFormik name='name' label='Display Name' />
-                        <CheckboxFormik className='mt-3' name='hidden' label='Hidden' />
+                        <CheckboxFormik
+                            className='mt-3'
+                            name='hidden'
+                            label='Hidden'
+                        />
                     </Modal.Body>
 
                     <Modal.Actions>
diff --git a/resources/scripts/components/admin/nodes/isos/IsosContainer.tsx b/resources/scripts/components/admin/nodes/isos/IsosContainer.tsx
index d0355d71806..5706cd251d0 100644
--- a/resources/scripts/components/admin/nodes/isos/IsosContainer.tsx
+++ b/resources/scripts/components/admin/nodes/isos/IsosContainer.tsx
@@ -1,22 +1,33 @@
-import useIsosSWR from '@/api/admin/nodes/isos/useIsosSWR'
-import NodeContentBlock from '@/components/admin/nodes/NodeContentBlock'
-import Table, { Actions, ColumnArray, RowActionsProps } from '@/components/elements/displays/Table'
-import Pagination from '@/components/elements/Pagination'
-import Spinner from '@/components/elements/Spinner'
 import { NodeContext } from '@/state/admin/node'
+import { bytesToString } from '@/util/helpers'
 import usePagination from '@/util/usePagination'
+import {
+    ExclamationCircleIcon,
+    EyeIcon,
+    EyeSlashIcon,
+} from '@heroicons/react/20/solid'
+import { Loader } from '@mantine/core'
+import { useState } from 'react'
+import { useTranslation } from 'react-i18next'
+
+import deleteIso from '@/api/admin/nodes/isos/deleteIso'
 import { ISO, IsoResponse } from '@/api/admin/nodes/isos/getIsos'
-import { bytesToString } from '@/util/helpers'
+import useIsosSWR from '@/api/admin/nodes/isos/useIsosSWR'
+import useNodeSWR from '@/api/admin/nodes/useNodeSWR'
+
 import Button from '@/components/elements/Button'
-import { useState } from 'react'
-import CreateIsoModal from '@/components/admin/nodes/isos/CreateIsoModal'
-import { Loader } from '@mantine/core'
-import { ExclamationCircleIcon, EyeIcon, EyeSlashIcon } from '@heroicons/react/20/solid'
 import Menu from '@/components/elements/Menu'
-import deleteIso from '@/api/admin/nodes/isos/deleteIso'
+import Pagination from '@/components/elements/Pagination'
+import Spinner from '@/components/elements/Spinner'
+import Table, {
+    Actions,
+    ColumnArray,
+    RowActionsProps,
+} from '@/components/elements/displays/Table'
+
+import NodeContentBlock from '@/components/admin/nodes/NodeContentBlock'
+import CreateIsoModal from '@/components/admin/nodes/isos/CreateIsoModal'
 import EditIsoModal from '@/components/admin/nodes/isos/EditIsoModal'
-import { useTranslation } from 'react-i18next'
-import useNodeSWR from '@/api/admin/nodes/useNodeSWR'
 
 const columns: ColumnArray<ISO> = [
     {
@@ -47,9 +58,15 @@ const columns: ColumnArray<ISO> = [
         cell: ({ value }) => (
             <div className='grid place-items-center'>
                 {value ? (
-                    <EyeSlashIcon title='hidden' className='h-5 w-5 text-foreground' />
+                    <EyeSlashIcon
+                        title='hidden'
+                        className='h-5 w-5 text-foreground'
+                    />
                 ) : (
-                    <EyeIcon title='visible' className='h-5 w-5 text-foreground' />
+                    <EyeIcon
+                        title='visible'
+                        className='h-5 w-5 text-foreground'
+                    />
                 )}
             </div>
         ),
@@ -78,7 +95,9 @@ const IsosContainer = () => {
                     mutateData =>
                         ({
                             ...mutateData,
-                            items: mutateData!.items.filter(datum => datum.uuid !== iso.uuid),
+                            items: mutateData!.items.filter(
+                                datum => datum.uuid !== iso.uuid
+                            ),
                         }) as IsoResponse,
                     false
                 )
@@ -86,7 +105,11 @@ const IsosContainer = () => {
         }
         return (
             <>
-                <EditIsoModal open={open} onClose={() => setOpen(false)} iso={iso} />
+                <EditIsoModal
+                    open={open}
+                    onClose={() => setOpen(false)}
+                    iso={iso}
+                />
                 <Actions>
                     <Menu.Item onClick={() => setOpen(true)}>Edit</Menu.Item>
                     <Menu.Divider />
@@ -101,9 +124,16 @@ const IsosContainer = () => {
     return (
         <div className='bg-background min-h-screen'>
             <NodeContentBlock title='ISO Library'>
-                <CreateIsoModal open={showCreateModal} onClose={() => setShowCreateModal(false)} mutate={mutate} />
+                <CreateIsoModal
+                    open={showCreateModal}
+                    onClose={() => setShowCreateModal(false)}
+                    mutate={mutate}
+                />
                 <div className='flex justify-end items-center mb-3'>
-                    <Button onClick={() => setShowCreateModal(true)} variant='filled'>
+                    <Button
+                        onClick={() => setShowCreateModal(true)}
+                        variant='filled'
+                    >
                         {t('create_iso')}
                     </Button>
                 </div>
@@ -111,7 +141,13 @@ const IsosContainer = () => {
                     <Spinner />
                 ) : (
                     <Pagination data={data} onPageSelect={setPage}>
-                        {({ items }) => <Table rowActions={rowActions} columns={columns} data={items} />}
+                        {({ items }) => (
+                            <Table
+                                rowActions={rowActions}
+                                columns={columns}
+                                data={items}
+                            />
+                        )}
                     </Pagination>
                 )}
             </NodeContentBlock>
diff --git a/resources/scripts/components/admin/nodes/isos/QueryFileButton.tsx b/resources/scripts/components/admin/nodes/isos/QueryFileButton.tsx
index a37d2001b77..ed15c556509 100644
--- a/resources/scripts/components/admin/nodes/isos/QueryFileButton.tsx
+++ b/resources/scripts/components/admin/nodes/isos/QueryFileButton.tsx
@@ -1,10 +1,12 @@
-import queryRemoteFile from '@/api/admin/tools/queryRemoteFile'
-import Button from '@/components/elements/Button'
 import { NodeContext } from '@/state/admin/node'
 import { useState } from 'react'
 import { useFormContext } from 'react-hook-form'
 import { useTranslation } from 'react-i18next'
+
 import useNodeSWR from '@/api/admin/nodes/useNodeSWR'
+import queryRemoteFile from '@/api/admin/tools/queryRemoteFile'
+
+import Button from '@/components/elements/Button'
 
 const QueryFileButton = () => {
     const { getValues, setError, setValue } = useFormContext()
@@ -22,7 +24,9 @@ const QueryFileButton = () => {
             setValue('fileName', metadata.fileName)
         } catch {
             setError('link', {
-                message: t('create_modal.fail_to_query_remote_file_error') ?? 'Failed to query remote file.',
+                message:
+                    t('create_modal.fail_to_query_remote_file_error') ??
+                    'Failed to query remote file.',
             })
         }
 
@@ -30,7 +34,12 @@ const QueryFileButton = () => {
     }
 
     return (
-        <Button variant='filled' loading={loading} onClick={query} className='mt-[1.625rem]'>
+        <Button
+            variant='filled'
+            loading={loading}
+            onClick={query}
+            className='mt-[1.625rem]'
+        >
             {tStrings('query')}
         </Button>
     )
diff --git a/resources/scripts/components/admin/nodes/overview/NodeDetailsBlock.tsx b/resources/scripts/components/admin/nodes/overview/NodeDetailsBlock.tsx
index ea7952f8fb3..da00693cc1d 100644
--- a/resources/scripts/components/admin/nodes/overview/NodeDetailsBlock.tsx
+++ b/resources/scripts/components/admin/nodes/overview/NodeDetailsBlock.tsx
@@ -1,10 +1,12 @@
-import RingCard from '@/components/elements/displays/RingCard'
 import { NodeContext } from '@/state/admin/node'
 import { formatBytes } from '@/util/helpers'
 import { useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
+
 import useNodeSWR from '@/api/admin/nodes/useNodeSWR'
 
+import RingCard from '@/components/elements/displays/RingCard'
+
 const NodeDetailsBlock = () => {
     const { data: node } = useNodeSWR()
     const { t } = useTranslation('admin.nodes.index')
diff --git a/resources/scripts/components/admin/nodes/overview/NodeOverviewContainer.tsx b/resources/scripts/components/admin/nodes/overview/NodeOverviewContainer.tsx
index d46d9396d85..848e4499cff 100644
--- a/resources/scripts/components/admin/nodes/overview/NodeOverviewContainer.tsx
+++ b/resources/scripts/components/admin/nodes/overview/NodeOverviewContainer.tsx
@@ -1,13 +1,14 @@
+import PageContentBlock from '@/components/elements/PageContentBlock'
+
 import NodeContentBlock from '@/components/admin/nodes/NodeContentBlock'
 import NodeDetailsBlock from '@/components/admin/nodes/overview/NodeDetailsBlock'
-import PageContentBlock from '@/components/elements/PageContentBlock'
 
 const NodeOverviewContainer = () => {
     return (
         <NodeContentBlock title='Overview'>
             <div className='grid grid-cols-10 gap-6'>
-            <NodeDetailsBlock />
-                </div>
+                <NodeDetailsBlock />
+            </div>
         </NodeContentBlock>
     )
 }
diff --git a/resources/scripts/components/admin/nodes/servers/NodeServersContainer.tsx b/resources/scripts/components/admin/nodes/servers/NodeServersContainer.tsx
index d3754f7ed7e..3741fd7f331 100644
--- a/resources/scripts/components/admin/nodes/servers/NodeServersContainer.tsx
+++ b/resources/scripts/components/admin/nodes/servers/NodeServersContainer.tsx
@@ -1,12 +1,14 @@
-import NodeContentBlock from '@/components/admin/nodes/NodeContentBlock'
-import ServersTable from '@/components/admin/servers/ServersTable'
 import { NodeContext } from '@/state/admin/node'
-import { useState } from 'react'
-import CreateServerModal from '@/components/admin/servers/CreateServerModal'
-import SearchBar from '@/components/admin/SearchBar'
 import { useDebouncedValue } from '@mantine/hooks'
+import { useState } from 'react'
+
 import useNodeSWR from '@/api/admin/nodes/useNodeSWR'
 
+import SearchBar from '@/components/admin/SearchBar'
+import NodeContentBlock from '@/components/admin/nodes/NodeContentBlock'
+import CreateServerModal from '@/components/admin/servers/CreateServerModal'
+import ServersTable from '@/components/admin/servers/ServersTable'
+
 const NodeServersContainer = () => {
     const [query, setQuery] = useState('')
     const [debouncedQuery] = useDebouncedValue(query, 200)
@@ -15,7 +17,11 @@ const NodeServersContainer = () => {
 
     return (
         <div className='bg-background min-h-screen'>
-            <CreateServerModal open={open} onClose={() => setOpen(false)} nodeId={node.id} />
+            <CreateServerModal
+                open={open}
+                onClose={() => setOpen(false)}
+                nodeId={node.id}
+            />
             <NodeContentBlock title='Servers' showFlashKey='admin:node:servers'>
                 <SearchBar
                     value={query}
diff --git a/resources/scripts/components/admin/nodes/settings/GeneralContainer.tsx b/resources/scripts/components/admin/nodes/settings/GeneralContainer.tsx
index 4132d0d3512..1a4bfe3500c 100644
--- a/resources/scripts/components/admin/nodes/settings/GeneralContainer.tsx
+++ b/resources/scripts/components/admin/nodes/settings/GeneralContainer.tsx
@@ -1,6 +1,6 @@
+import CotermCard from '@/components/admin/nodes/settings/partials/general/CotermCard'
 import DeleteNodeCard from '@/components/admin/nodes/settings/partials/general/DeleteNodeCard'
 import NodeInformationCard from '@/components/admin/nodes/settings/partials/general/NodeInformationCard'
-import CotermCard from '@/components/admin/nodes/settings/partials/general/CotermCard'
 
 const GeneralContainer = () => {
     return (
diff --git a/resources/scripts/components/admin/nodes/settings/NodeSettingsContainer.tsx b/resources/scripts/components/admin/nodes/settings/NodeSettingsContainer.tsx
index 0ba8dcc0aa7..55c9ebf7415 100644
--- a/resources/scripts/components/admin/nodes/settings/NodeSettingsContainer.tsx
+++ b/resources/scripts/components/admin/nodes/settings/NodeSettingsContainer.tsx
@@ -1,7 +1,9 @@
-import NodeContentBlock from '@/components/admin/nodes/NodeContentBlock'
-import SettingsLayout from '@/components/elements/layouts/SettingsLayout'
 import { useTranslation } from 'react-i18next'
 
+import SettingsLayout from '@/components/elements/layouts/SettingsLayout'
+
+import NodeContentBlock from '@/components/admin/nodes/NodeContentBlock'
+
 const NodeSettingsContainer = () => {
     const { t: tStrings } = useTranslation('strings')
 
@@ -9,7 +11,12 @@ const NodeSettingsContainer = () => {
         <SettingsLayout
             indexPattern='/admin/nodes/:nodeId/settings'
             defaultUrl='/admin/nodes/:nodeId/settings/general'
-            contentBlock={props => <NodeContentBlock title={tStrings('setting_other')} {...props} />}
+            contentBlock={props => (
+                <NodeContentBlock
+                    title={tStrings('setting_other')}
+                    {...props}
+                />
+            )}
             routes={[
                 {
                     path: '/admin/nodes/:nodeId/settings/general',
diff --git a/resources/scripts/components/admin/nodes/settings/partials/general/CotermCard.tsx b/resources/scripts/components/admin/nodes/settings/partials/general/CotermCard.tsx
index b6298ac8efe..988dff590eb 100644
--- a/resources/scripts/components/admin/nodes/settings/partials/general/CotermCard.tsx
+++ b/resources/scripts/components/admin/nodes/settings/partials/general/CotermCard.tsx
@@ -1,26 +1,31 @@
 import { NodeContext } from '@/state/admin/node'
 import { useFlashKey } from '@/util/useFlash'
-import { useTranslation } from 'react-i18next'
-import FormCard from '@/components/elements/FormCard'
+import { hostname, port } from '@/util/validation'
+import { zodResolver } from '@hookform/resolvers/zod'
+import { useState } from 'react'
 import { FormProvider, useForm } from 'react-hook-form'
-import Button from '@/components/elements/Button'
-import Switch from '@/components/elements/inputs/Switch'
+import { useTranslation } from 'react-i18next'
 import { z } from 'zod'
-import { zodResolver } from '@hookform/resolvers/zod'
+
+import updateCoterm from '@/api/admin/nodes/settings/updateCoterm'
+import useNodeSWR from '@/api/admin/nodes/useNodeSWR'
+
+import Button from '@/components/elements/Button'
+import FlashMessageRender from '@/components/elements/FlashMessageRenderer'
+import FormCard from '@/components/elements/FormCard'
+import CheckboxForm from '@/components/elements/forms/CheckboxForm'
 import SwitchForm from '@/components/elements/forms/SwitchForm'
 import TextInputForm from '@/components/elements/forms/TextInputForm'
-import { hostname, port } from '@/util/validation'
-import CheckboxForm from '@/components/elements/forms/CheckboxForm'
-import updateCoterm from '@/api/admin/nodes/settings/updateCoterm'
-import { useState } from 'react'
-import CotermTokenModal from '@/components/admin/nodes/settings/partials/general/CotermTokenModal'
+import Switch from '@/components/elements/inputs/Switch'
+
 import CotermResetModal from '@/components/admin/nodes/settings/partials/general/CotermResetModal'
-import FlashMessageRender from '@/components/elements/FlashMessageRenderer'
-import useNodeSWR from '@/api/admin/nodes/useNodeSWR'
+import CotermTokenModal from '@/components/admin/nodes/settings/partials/general/CotermTokenModal'
 
 const CotermCard = () => {
     const { data: node, mutate } = useNodeSWR()
-    const { clearFlashes, clearAndAddHttpError } = useFlashKey(`admin.nodes.${node.id}.settings.general.coterm`)
+    const { clearFlashes, clearAndAddHttpError } = useFlashKey(
+        `admin.nodes.${node.id}.settings.general.coterm`
+    )
     const { t: tStrings } = useTranslation('strings')
     const { t } = useTranslation('admin.nodes.settings')
     const [token, setToken] = useState<string | null>(null)
@@ -40,7 +45,10 @@ const CotermCard = () => {
         isTlsEnabled: z.boolean(),
     })
 
-    const schema = z.discriminatedUnion('isEnabled', [schemaIfEnabled, schemaIfDisabled])
+    const schema = z.discriminatedUnion('isEnabled', [
+        schemaIfEnabled,
+        schemaIfDisabled,
+    ])
 
     const form = useForm({
         resolver: zodResolver(schema),
@@ -109,12 +117,23 @@ const CotermCard = () => {
                     <form onSubmit={form.handleSubmit(submit)}>
                         <FormCard.Body>
                             <FormCard.Title>{t('coterm.title')}</FormCard.Title>
-                            <p className={'description-small my-3'}>{t('coterm.description')}</p>
+                            <p className={'description-small my-3'}>
+                                {t('coterm.description')}
+                            </p>
 
                             <div className={'flex flex-col gap-3'}>
-                                <FlashMessageRender byKey={`admin.nodes.${node.id}.settings.general.coterm`} />
-                                <SwitchForm name={'isEnabled'} label={t('coterm.enable')} />
-                                <div className={'flex flex-col lg:grid grid-cols-5 gap-3'}>
+                                <FlashMessageRender
+                                    byKey={`admin.nodes.${node.id}.settings.general.coterm`}
+                                />
+                                <SwitchForm
+                                    name={'isEnabled'}
+                                    label={t('coterm.enable')}
+                                />
+                                <div
+                                    className={
+                                        'flex flex-col lg:grid grid-cols-5 gap-3'
+                                    }
+                                >
                                     <TextInputForm
                                         name={'fqdn'}
                                         className={'col-span-4'}
@@ -128,7 +147,11 @@ const CotermCard = () => {
                                         disabled={!isEnabled}
                                     />
                                 </div>
-                                <div className={'flex flex-col lg:grid grid-cols-5 lg:items-center gap-3'}>
+                                <div
+                                    className={
+                                        'flex flex-col lg:grid grid-cols-5 lg:items-center gap-3'
+                                    }
+                                >
                                     <CheckboxForm
                                         className={'col-span-4'}
                                         name={'isTlsEnabled'}
diff --git a/resources/scripts/components/admin/nodes/settings/partials/general/CotermResetModal.tsx b/resources/scripts/components/admin/nodes/settings/partials/general/CotermResetModal.tsx
index 21b473bc46f..084cd96546a 100644
--- a/resources/scripts/components/admin/nodes/settings/partials/general/CotermResetModal.tsx
+++ b/resources/scripts/components/admin/nodes/settings/partials/general/CotermResetModal.tsx
@@ -1,11 +1,13 @@
-import resetCotermToken from '@/api/admin/nodes/settings/resetCotermToken'
-import FlashMessageRender from '@/components/elements/FlashMessageRenderer'
-import Modal from '@/components/elements/Modal'
 import { useFlashKey } from '@/util/useFlash'
 import { Code } from '@mantine/core'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 
+import resetCotermToken from '@/api/admin/nodes/settings/resetCotermToken'
+
+import FlashMessageRender from '@/components/elements/FlashMessageRenderer'
+import Modal from '@/components/elements/Modal'
+
 interface Props {
     nodeId: number
     open: boolean
@@ -16,7 +18,9 @@ interface Props {
 const CotermResetModal = ({ nodeId, open, onReset, onClose }: Props) => {
     const { t } = useTranslation('admin.nodes.settings')
     const [loading, setLoading] = useState(false)
-    const { clearFlashes, clearAndAddHttpError } = useFlashKey(`admin.nodes.${nodeId}.settings.general.reset-coterm`)
+    const { clearFlashes, clearAndAddHttpError } = useFlashKey(
+        `admin.nodes.${nodeId}.settings.general.reset-coterm`
+    )
 
     const reset = async () => {
         clearFlashes()
@@ -40,11 +44,18 @@ const CotermResetModal = ({ nodeId, open, onReset, onClose }: Props) => {
             </Modal.Header>
 
             <Modal.Body>
-                <FlashMessageRender className='mb-3' byKey={`admin.nodes.${nodeId}.settings.general.reset-coterm`} />
-                <Modal.Description>{t('coterm.reset.description')}</Modal.Description>
+                <FlashMessageRender
+                    className='mb-3'
+                    byKey={`admin.nodes.${nodeId}.settings.general.reset-coterm`}
+                />
+                <Modal.Description>
+                    {t('coterm.reset.description')}
+                </Modal.Description>
             </Modal.Body>
             <Modal.Actions>
-                <Modal.Action loading={loading} onClick={reset}>{t('coterm.reset.action')}</Modal.Action>
+                <Modal.Action loading={loading} onClick={reset}>
+                    {t('coterm.reset.action')}
+                </Modal.Action>
             </Modal.Actions>
         </Modal>
     )
diff --git a/resources/scripts/components/admin/nodes/settings/partials/general/CotermTokenModal.tsx b/resources/scripts/components/admin/nodes/settings/partials/general/CotermTokenModal.tsx
index e2af6e7f51d..9d7574a1b3e 100644
--- a/resources/scripts/components/admin/nodes/settings/partials/general/CotermTokenModal.tsx
+++ b/resources/scripts/components/admin/nodes/settings/partials/general/CotermTokenModal.tsx
@@ -1,33 +1,38 @@
-import Modal from '@/components/elements/Modal';
-import { Code } from '@mantine/core';
-import { useTranslation } from 'react-i18next';
+import { Code } from '@mantine/core'
+import { useTranslation } from 'react-i18next'
+
+import Modal from '@/components/elements/Modal'
 
 interface Props {
     value: string | null
     onClose: () => void
 }
 
-const CotermTokenModal = ({value, onClose}: Props) => {
-    const {t} = useTranslation('admin.nodes.settings')
+const CotermTokenModal = ({ value, onClose }: Props) => {
+    const { t } = useTranslation('admin.nodes.settings')
 
-    return <Modal open={Boolean(value)} onClose={onClose}>
-        <Modal.Header>
-            <Modal.Title>{t('coterm.token_created.title')}</Modal.Title>
-        </Modal.Header>
+    return (
+        <Modal open={Boolean(value)} onClose={onClose}>
+            <Modal.Header>
+                <Modal.Title>{t('coterm.token_created.title')}</Modal.Title>
+            </Modal.Header>
 
-        <Modal.Body>
-            <Modal.Description>
-                {t('coterm.token_created.description')}
-            </Modal.Description>
+            <Modal.Body>
+                <Modal.Description>
+                    {t('coterm.token_created.description')}
+                </Modal.Description>
 
-            <Code className={'!mt-3'} block color={'blue'}>
-                {value}
-            </Code>
-        </Modal.Body>
-        <Modal.Actions>
-            <Modal.Action onClick={onClose}>{t('coterm.token_created.action')}</Modal.Action>
-        </Modal.Actions>
-    </Modal>
+                <Code className={'!mt-3'} block color={'blue'}>
+                    {value}
+                </Code>
+            </Modal.Body>
+            <Modal.Actions>
+                <Modal.Action onClick={onClose}>
+                    {t('coterm.token_created.action')}
+                </Modal.Action>
+            </Modal.Actions>
+        </Modal>
+    )
 }
 
-export default CotermTokenModal;
\ No newline at end of file
+export default CotermTokenModal
diff --git a/resources/scripts/components/admin/nodes/settings/partials/general/DeleteNodeCard.tsx b/resources/scripts/components/admin/nodes/settings/partials/general/DeleteNodeCard.tsx
index be09e45def3..1556ce416dd 100644
--- a/resources/scripts/components/admin/nodes/settings/partials/general/DeleteNodeCard.tsx
+++ b/resources/scripts/components/admin/nodes/settings/partials/general/DeleteNodeCard.tsx
@@ -1,18 +1,22 @@
-import Button from '@/components/elements/Button'
-import FlashMessageRender from '@/components/elements/FlashMessageRenderer'
-import FormCard from '@/components/elements/FormCard'
-import FormSection from '@/components/elements/FormSection'
-import MessageBox from '@/components/elements/MessageBox'
 import { NodeContext } from '@/state/admin/node'
 import { useFlashKey } from '@/util/useFlash'
+import { useState } from 'react'
 import { useNavigate } from 'react-router-dom'
+
 import deleteNode from '@/api/admin/nodes/deleteNode'
-import { useState } from 'react'
 import useNodeSWR from '@/api/admin/nodes/useNodeSWR'
 
+import Button from '@/components/elements/Button'
+import FlashMessageRender from '@/components/elements/FlashMessageRenderer'
+import FormCard from '@/components/elements/FormCard'
+import FormSection from '@/components/elements/FormSection'
+import MessageBox from '@/components/elements/MessageBox'
+
 const DeleteNodeCard = () => {
     const { data: node } = useNodeSWR()
-    const { clearFlashes, clearAndAddHttpError } = useFlashKey(`admin.nodes.${node.id}.settings.general.delete`)
+    const { clearFlashes, clearAndAddHttpError } = useFlashKey(
+        `admin.nodes.${node.id}.settings.general.delete`
+    )
     const navigate = useNavigate()
     const [loading, setLoading] = useState(false)
 
@@ -34,16 +38,19 @@ const DeleteNodeCard = () => {
             <FormCard.Body>
                 <FormCard.Title>Delete Node</FormCard.Title>
                 <div className='space-y-3 mt-3'>
-                    <FlashMessageRender byKey={`admin.nodes.${node.id}.settings.general.delete`} />
+                    <FlashMessageRender
+                        byKey={`admin.nodes.${node.id}.settings.general.delete`}
+                    />
 
                     <p className='description-small my-3'>
-                        The node will be permanently deleted from Convoy. This action is irreversible and can not be
-                        undone.
+                        The node will be permanently deleted from Convoy. This
+                        action is irreversible and can not be undone.
                     </p>
 
                     {node.serversCount > 0 && (
                         <MessageBox title='Error' type='error'>
-                            You cannot delete a node that has servers assigned to it.
+                            You cannot delete a node that has servers assigned
+                            to it.
                         </MessageBox>
                     )}
                 </div>
diff --git a/resources/scripts/components/admin/nodes/settings/partials/general/NodeInformationCard.tsx b/resources/scripts/components/admin/nodes/settings/partials/general/NodeInformationCard.tsx
index 92667bd062c..fd65e6e2f4d 100644
--- a/resources/scripts/components/admin/nodes/settings/partials/general/NodeInformationCard.tsx
+++ b/resources/scripts/components/admin/nodes/settings/partials/general/NodeInformationCard.tsx
@@ -1,21 +1,26 @@
-import { useFlashKey } from '@/util/useFlash'
 import { NodeContext } from '@/state/admin/node'
-import updateNode from '@/api/admin/nodes/updateNode'
-import FormCard from '@/components/elements/FormCard'
-import FlashMessageRender from '@/components/elements/FlashMessageRenderer'
-import LocationsSelectForm from '@/components/admin/nodes/LocationsSelectForm'
-import Button from '@/components/elements/Button'
-import { z } from 'zod'
+import { useFlashKey } from '@/util/useFlash'
 import { hostname } from '@/util/validation'
-import { FormProvider, useForm } from 'react-hook-form'
 import { zodResolver } from '@hookform/resolvers/zod'
+import { FormProvider, useForm } from 'react-hook-form'
 import { useTranslation } from 'react-i18next'
-import TextInputForm from '@/components/elements/forms/TextInputForm'
+import { z } from 'zod'
+
+import updateNode from '@/api/admin/nodes/updateNode'
 import useNodeSWR from '@/api/admin/nodes/useNodeSWR'
 
+import Button from '@/components/elements/Button'
+import FlashMessageRender from '@/components/elements/FlashMessageRenderer'
+import FormCard from '@/components/elements/FormCard'
+import TextInputForm from '@/components/elements/forms/TextInputForm'
+
+import LocationsSelectForm from '@/components/admin/nodes/LocationsSelectForm'
+
 const NodeInformationCard = () => {
     const { data: node, mutate } = useNodeSWR()
-    const { clearFlashes, clearAndAddHttpError } = useFlashKey(`admin.nodes.${node.id}.settings.general.info`)
+    const { clearFlashes, clearAndAddHttpError } = useFlashKey(
+        `admin.nodes.${node.id}.settings.general.info`
+    )
     const { t: tStrings } = useTranslation('strings')
     const { t } = useTranslation('admin.nodes.settings')
     const { t: tIndex } = useTranslation('admin.nodes.index')
@@ -100,45 +105,90 @@ const NodeInformationCard = () => {
                     <FormCard.Body>
                         <FormCard.Title>{t('node_info.title')}</FormCard.Title>
                         <div className='space-y-3 mt-3'>
-                            <FlashMessageRender byKey={`admin.nodes.${node.id}.settings.general.info`} />
-                            <TextInputForm name='name' label={tStrings('display_name')} />
+                            <FlashMessageRender
+                                byKey={`admin.nodes.${node.id}.settings.general.info`}
+                            />
+                            <TextInputForm
+                                name='name'
+                                label={tStrings('display_name')}
+                            />
                             <LocationsSelectForm />
-                            <TextInputForm name='cluster' label={tIndex('pve_name')} />
-                            <TextInputForm name='fqdn' label={tStrings('fqdn')} />
-                            <TextInputForm name='port' label={tStrings('port')} />
+                            <TextInputForm
+                                name='cluster'
+                                label={tIndex('pve_name')}
+                            />
+                            <TextInputForm
+                                name='fqdn'
+                                label={tStrings('fqdn')}
+                            />
+                            <TextInputForm
+                                name='port'
+                                label={tStrings('port')}
+                            />
                             <div className='grid gap-3 grid-cols-2'>
                                 <TextInputForm
                                     name='tokenId'
                                     label={tIndex('token_id')}
-                                    placeholder={tIndex('override_creds') ?? 'Override credentials'}
+                                    placeholder={
+                                        tIndex('override_creds') ??
+                                        'Override credentials'
+                                    }
                                 />
                                 <TextInputForm
                                     name='secret'
                                     label={tIndex('secret')}
-                                    placeholder={tIndex('override_creds') ?? 'Override credentials'}
+                                    placeholder={
+                                        tIndex('override_creds') ??
+                                        'Override credentials'
+                                    }
                                 />
                             </div>
                             <div className='grid gap-3 grid-cols-2'>
-                                <TextInputForm name='memory' label={`${tStrings('memory')} (MiB)`} />
+                                <TextInputForm
+                                    name='memory'
+                                    label={`${tStrings('memory')} (MiB)`}
+                                />
                                 <TextInputForm
                                     name='memoryOverallocate'
-                                    label={`${tIndex('memory_overallocation')} (%)`}
+                                    label={`${tIndex(
+                                        'memory_overallocation'
+                                    )} (%)`}
                                 />
                             </div>
                             <div className='grid gap-3 grid-cols-2'>
-                                <TextInputForm name='disk' label={`${tStrings('disk')} (MiB)`} />
-                                <TextInputForm name='diskOverallocate' label={`${tIndex('disk_overallocation')} (%)`} />
+                                <TextInputForm
+                                    name='disk'
+                                    label={`${tStrings('disk')} (MiB)`}
+                                />
+                                <TextInputForm
+                                    name='diskOverallocate'
+                                    label={`${tIndex(
+                                        'disk_overallocation'
+                                    )} (%)`}
+                                />
                             </div>
                             <div className='grid gap-3 grid-cols-3'>
-                                <TextInputForm name='vmStorage' label={tIndex('vm_storage')} placeholder='local' />
+                                <TextInputForm
+                                    name='vmStorage'
+                                    label={tIndex('vm_storage')}
+                                    placeholder='local'
+                                />
                                 <TextInputForm
                                     name='backupStorage'
                                     label={tIndex('backup_storage')}
                                     placeholder='local'
                                 />
-                                <TextInputForm name='isoStorage' label={tIndex('iso_storage')} placeholder='local' />
+                                <TextInputForm
+                                    name='isoStorage'
+                                    label={tIndex('iso_storage')}
+                                    placeholder='local'
+                                />
                             </div>
-                            <TextInputForm name='network' label={tStrings('network')} placeholder='vmbr0' />
+                            <TextInputForm
+                                name='network'
+                                label={tStrings('network')}
+                                placeholder='vmbr0'
+                            />
                         </div>
                     </FormCard.Body>
                     <FormCard.Footer>
diff --git a/resources/scripts/components/admin/nodes/templates/EditTemplateGroupModal.tsx b/resources/scripts/components/admin/nodes/templates/EditTemplateGroupModal.tsx
index c389f19497c..d47cad6be5e 100644
--- a/resources/scripts/components/admin/nodes/templates/EditTemplateGroupModal.tsx
+++ b/resources/scripts/components/admin/nodes/templates/EditTemplateGroupModal.tsx
@@ -1,16 +1,18 @@
+import { NodeContext } from '@/state/admin/node'
+import useFlash from '@/util/useFlash'
+import { FormikProvider, useFormik } from 'formik'
+import * as yup from 'yup'
+
 import createTemplateGroup from '@/api/admin/nodes/templateGroups/createTemplateGroup'
 import { TemplateGroup } from '@/api/admin/nodes/templateGroups/getTemplateGroups'
 import updateTemplateGroup from '@/api/admin/nodes/templateGroups/updateTemplateGroup'
 import useTemplateGroupsSWR from '@/api/admin/nodes/templateGroups/useTemplateGroupsSWR'
+import useNodeSWR from '@/api/admin/nodes/useNodeSWR'
+
 import FlashMessageRender from '@/components/elements/FlashMessageRenderer'
+import Modal from '@/components/elements/Modal'
 import CheckboxFormik from '@/components/elements/formik/CheckboxFormik'
 import TextInputFormik from '@/components/elements/formik/TextInputFormik'
-import Modal from '@/components/elements/Modal'
-import { NodeContext } from '@/state/admin/node'
-import useFlash from '@/util/useFlash'
-import { FormikProvider, useFormik } from 'formik'
-import * as yup from 'yup'
-import useNodeSWR from '@/api/admin/nodes/useNodeSWR'
 
 interface Props {
     open: boolean
@@ -30,7 +32,10 @@ const EditTemplateGroupModal = ({ open, onClose, group }: Props) => {
             hidden: group?.hidden ?? false,
         },
         validationSchema: yup.object({
-            name: yup.string().required('Specify a name').max(40, 'Please limit up to 40 characters'),
+            name: yup
+                .string()
+                .required('Specify a name')
+                .max(40, 'Please limit up to 40 characters'),
             hidden: yup.boolean(),
         }),
         onSubmit: (values, { setSubmitting }) => {
@@ -43,10 +48,21 @@ const EditTemplateGroupModal = ({ open, onClose, group }: Props) => {
                         handleClose()
 
                         // @ts-expect-error - groups should be defined. Though, it might not when there's a network error
-                        mutate(groups => groups.map(g => (g.uuid === group.uuid ? { ...g, name, hidden } : g)), false)
+                        mutate(
+                            groups =>
+                                groups.map(g =>
+                                    g.uuid === group.uuid
+                                        ? { ...g, name, hidden }
+                                        : g
+                                ),
+                            false
+                        )
                     })
                     .catch(error => {
-                        clearAndAddHttpError({ key: 'admin:node:template-groups.edit', error })
+                        clearAndAddHttpError({
+                            key: 'admin:node:template-groups.edit',
+                            error,
+                        })
                         setSubmitting(false)
                     })
             } else {
@@ -67,7 +83,10 @@ const EditTemplateGroupModal = ({ open, onClose, group }: Props) => {
                         }, false)
                     })
                     .catch(error => {
-                        clearAndAddHttpError({ key: 'admin:node:template-groups.edit', error })
+                        clearAndAddHttpError({
+                            key: 'admin:node:template-groups.edit',
+                            error,
+                        })
                         setSubmitting(false)
                     })
             }
@@ -82,15 +101,24 @@ const EditTemplateGroupModal = ({ open, onClose, group }: Props) => {
     return (
         <Modal open={open} onClose={handleClose}>
             <Modal.Header>
-                <Modal.Title>{group ? 'Edit' : 'New'} Template Group</Modal.Title>
+                <Modal.Title>
+                    {group ? 'Edit' : 'New'} Template Group
+                </Modal.Title>
             </Modal.Header>
 
             <FormikProvider value={form}>
                 <form onSubmit={form.handleSubmit}>
                     <Modal.Body>
-                        <FlashMessageRender className='mb-5' byKey={'admin:node:template-groups.edit'} />
+                        <FlashMessageRender
+                            className='mb-5'
+                            byKey={'admin:node:template-groups.edit'}
+                        />
                         <TextInputFormik name='name' label='Display Name' />
-                        <CheckboxFormik className='mt-3' name='hidden' label='Hidden' />
+                        <CheckboxFormik
+                            className='mt-3'
+                            name='hidden'
+                            label='Hidden'
+                        />
                     </Modal.Body>
                     <Modal.Actions>
                         <Modal.Action type='button' onClick={handleClose}>
diff --git a/resources/scripts/components/admin/nodes/templates/EditTemplateModal.tsx b/resources/scripts/components/admin/nodes/templates/EditTemplateModal.tsx
index c8bbd9aa546..c1c82ac4636 100644
--- a/resources/scripts/components/admin/nodes/templates/EditTemplateModal.tsx
+++ b/resources/scripts/components/admin/nodes/templates/EditTemplateModal.tsx
@@ -1,16 +1,21 @@
-import { Template, TemplateGroup } from '@/api/admin/nodes/templateGroups/getTemplateGroups'
+import { NodeContext } from '@/state/admin/node'
+import useFlash from '@/util/useFlash'
+import { FormikProvider, useFormik } from 'formik'
+import * as yup from 'yup'
+
+import {
+    Template,
+    TemplateGroup,
+} from '@/api/admin/nodes/templateGroups/getTemplateGroups'
 import createTemplate from '@/api/admin/nodes/templateGroups/templates/createTemplate'
 import updateTemplate from '@/api/admin/nodes/templateGroups/templates/updateTemplate'
 import useTemplateGroupsSWR from '@/api/admin/nodes/templateGroups/useTemplateGroupsSWR'
+import useNodeSWR from '@/api/admin/nodes/useNodeSWR'
+
 import FlashMessageRender from '@/components/elements/FlashMessageRenderer'
+import Modal from '@/components/elements/Modal'
 import CheckboxFormik from '@/components/elements/formik/CheckboxFormik'
 import TextInputFormik from '@/components/elements/formik/TextInputFormik'
-import Modal from '@/components/elements/Modal'
-import { NodeContext } from '@/state/admin/node'
-import useFlash from '@/util/useFlash'
-import { FormikProvider, useFormik } from 'formik'
-import * as yup from 'yup'
-import useNodeSWR from '@/api/admin/nodes/useNodeSWR'
 
 interface Props {
     open: boolean
@@ -32,7 +37,10 @@ const EditTemplateModal = ({ open, onClose, template, group }: Props) => {
             hidden: template?.hidden ?? false,
         },
         validationSchema: yup.object({
-            name: yup.string().required('Specify a name').max(40, 'Please limit up to 40 characters'),
+            name: yup
+                .string()
+                .required('Specify a name')
+                .max(40, 'Please limit up to 40 characters'),
             vmid: yup
                 .number()
                 .required('Specify a VMID')
@@ -60,17 +68,19 @@ const EditTemplateModal = ({ open, onClose, template, group }: Props) => {
                                 if (oldGroup.uuid === group.uuid) {
                                     return {
                                         ...oldGroup,
-                                        templates: oldGroup.templates!.map(t => {
-                                            if (t.uuid === template.uuid) {
-                                                return {
-                                                    ...t,
-                                                    ...values,
-                                                    vmid: vmid as number,
+                                        templates: oldGroup.templates!.map(
+                                            t => {
+                                                if (t.uuid === template.uuid) {
+                                                    return {
+                                                        ...t,
+                                                        ...values,
+                                                        vmid: vmid as number,
+                                                    }
                                                 }
-                                            }
 
-                                            return t
-                                        }),
+                                                return t
+                                            }
+                                        ),
                                     }
                                 }
 
@@ -92,7 +102,10 @@ const EditTemplateModal = ({ open, onClose, template, group }: Props) => {
                                 if (oldGroup.uuid === group.uuid) {
                                     return {
                                         ...oldGroup,
-                                        templates: [...(oldGroup.templates ?? []), template],
+                                        templates: [
+                                            ...(oldGroup.templates ?? []),
+                                            template,
+                                        ],
                                     }
                                 }
 
@@ -102,7 +115,10 @@ const EditTemplateModal = ({ open, onClose, template, group }: Props) => {
                     )
                 }
             } catch (error) {
-                clearAndAddHttpError({ key: 'admin:node:template-group:templates.edit', error })
+                clearAndAddHttpError({
+                    key: 'admin:node:template-group:templates.edit',
+                    error,
+                })
             }
 
             setSubmitting(false)
@@ -123,10 +139,17 @@ const EditTemplateModal = ({ open, onClose, template, group }: Props) => {
             <FormikProvider value={form}>
                 <form onSubmit={form.handleSubmit}>
                     <Modal.Body>
-                        <FlashMessageRender className='mb-5' byKey={'admin:node:template-group:templates.edit'} />
+                        <FlashMessageRender
+                            className='mb-5'
+                            byKey={'admin:node:template-group:templates.edit'}
+                        />
                         <TextInputFormik name='name' label='Display Name' />
                         <TextInputFormik name='vmid' label='VMID' />
-                        <CheckboxFormik className='mt-3' name='hidden' label='Hidden' />
+                        <CheckboxFormik
+                            className='mt-3'
+                            name='hidden'
+                            label='Hidden'
+                        />
                     </Modal.Body>
                     <Modal.Actions>
                         <Modal.Action type='button' onClick={handleClose}>
diff --git a/resources/scripts/components/admin/nodes/templates/NodeTemplatesContainer.tsx b/resources/scripts/components/admin/nodes/templates/NodeTemplatesContainer.tsx
index abfc6064d89..d44ddab34a2 100644
--- a/resources/scripts/components/admin/nodes/templates/NodeTemplatesContainer.tsx
+++ b/resources/scripts/components/admin/nodes/templates/NodeTemplatesContainer.tsx
@@ -1,11 +1,6 @@
-import { TemplateGroup } from '@/api/admin/nodes/templateGroups/getTemplateGroups'
-import useTemplatesGroupSWR from '@/api/admin/nodes/templateGroups/useTemplateGroupsSWR'
-import NodeContentBlock from '@/components/admin/nodes/NodeContentBlock'
-import Button from '@/components/elements/Button'
-import Card from '@/components/elements/Card'
-import Spinner from '@/components/elements/Spinner'
 import { NodeContext } from '@/state/admin/node'
-import { useEffect, useState } from 'react'
+import useFlash from '@/util/useFlash'
+import useNotify from '@/util/useNotify'
 import {
     DndContext,
     DragEndEvent,
@@ -17,17 +12,27 @@ import {
     useSensor,
     useSensors,
 } from '@dnd-kit/core'
-import { arrayMove, SortableContext } from '@dnd-kit/sortable'
-import SortableItem, { ChildrenPropsWithHandle } from '@/components/elements/dnd/SortableItem'
 import { restrictToWindowEdges } from '@dnd-kit/modifiers'
-import reorderTemplateGroups from '@/api/admin/nodes/templateGroups/reorderTemplateGroups'
-import useNotify from '@/util/useNotify'
+import { SortableContext, arrayMove } from '@dnd-kit/sortable'
 import { updateNotification } from '@mantine/notifications'
-import TemplateGroupCard from '@/components/admin/nodes/templates/TemplateGroupCard'
-import EditTemplateGroupModal from '@/components/admin/nodes/templates/EditTemplateGroupModal'
-import useFlash from '@/util/useFlash'
-import { httpErrorToHuman } from '@/api/http'
+import { useEffect, useState } from 'react'
+
+import { TemplateGroup } from '@/api/admin/nodes/templateGroups/getTemplateGroups'
+import reorderTemplateGroups from '@/api/admin/nodes/templateGroups/reorderTemplateGroups'
+import useTemplatesGroupSWR from '@/api/admin/nodes/templateGroups/useTemplateGroupsSWR'
 import useNodeSWR from '@/api/admin/nodes/useNodeSWR'
+import { httpErrorToHuman } from '@/api/http'
+
+import Button from '@/components/elements/Button'
+import Card from '@/components/elements/Card'
+import Spinner from '@/components/elements/Spinner'
+import SortableItem, {
+    ChildrenPropsWithHandle,
+} from '@/components/elements/dnd/SortableItem'
+
+import NodeContentBlock from '@/components/admin/nodes/NodeContentBlock'
+import EditTemplateGroupModal from '@/components/admin/nodes/templates/EditTemplateGroupModal'
+import TemplateGroupCard from '@/components/admin/nodes/templates/TemplateGroupCard'
 
 const NodeTemplatesContainer = () => {
     const { data: node } = useNodeSWR()
@@ -71,7 +76,10 @@ const NodeTemplatesContainer = () => {
                     message: httpErrorToHuman(error),
                     autoClose: 5000,
                 })
-                clearAndAddHttpError({ key: 'admin:node:template-groups', error })
+                clearAndAddHttpError({
+                    key: 'admin:node:template-groups',
+                    error,
+                })
             })
     }
 
@@ -85,7 +93,9 @@ const NodeTemplatesContainer = () => {
                     groups!.findIndex(group => group.id === active.id),
                     groups!.findIndex(group => group.id === over.id)
                 )
-                newGroups.forEach((group, index) => (group.orderColumn = index + 1))
+                newGroups.forEach(
+                    (group, index) => (group.orderColumn = index + 1)
+                )
 
                 updateGroupOrder(newGroups.map(group => group.id))
 
@@ -95,10 +105,20 @@ const NodeTemplatesContainer = () => {
     }
 
     return (
-        <NodeContentBlock title='Templates' showFlashKey='admin:node:template-groups'>
-            <EditTemplateGroupModal open={showCreateModal} onClose={() => setShowCreateModal(false)} />
+        <NodeContentBlock
+            title='Templates'
+            showFlashKey='admin:node:template-groups'
+        >
+            <EditTemplateGroupModal
+                open={showCreateModal}
+                onClose={() => setShowCreateModal(false)}
+            />
             <div className='flex justify-end items-center mb-3'>
-                <Button onClick={() => setShowCreateModal(true)} disabled={data!.length >= 50} variant='filled'>
+                <Button
+                    onClick={() => setShowCreateModal(true)}
+                    disabled={data!.length >= 50}
+                    variant='filled'
+                >
                     New Template Group
                 </Button>
             </div>
@@ -114,10 +134,20 @@ const NodeTemplatesContainer = () => {
                     >
                         <SortableContext items={data}>
                             {data!.map(group => (
-                                <TemplateGroupCard group={group} key={group.id} />
+                                <TemplateGroupCard
+                                    group={group}
+                                    key={group.id}
+                                />
                             ))}
                         </SortableContext>
-                        <DragOverlay>{activeId && <TemplateGroupCard group={activeId} className='z-20' />}</DragOverlay>
+                        <DragOverlay>
+                            {activeId && (
+                                <TemplateGroupCard
+                                    group={activeId}
+                                    className='z-20'
+                                />
+                            )}
+                        </DragOverlay>
                     </DndContext>
                     {data.length < 50 && (
                         <button
diff --git a/resources/scripts/components/admin/nodes/templates/TemplateCard.tsx b/resources/scripts/components/admin/nodes/templates/TemplateCard.tsx
index 14efbcf42e9..018636ef504 100644
--- a/resources/scripts/components/admin/nodes/templates/TemplateCard.tsx
+++ b/resources/scripts/components/admin/nodes/templates/TemplateCard.tsx
@@ -1,17 +1,25 @@
-import { Template, TemplateGroup } from '@/api/admin/nodes/templateGroups/getTemplateGroups'
-import deleteTemplate from '@/api/admin/nodes/templateGroups/templates/deleteTemplate'
-import useTemplateGroupsSWR from '@/api/admin/nodes/templateGroups/useTemplateGroupsSWR'
-import EditTemplateModal from '@/components/admin/nodes/templates/EditTemplateModal'
-import SortableItem, { ChildrenPropsWithHandle } from '@/components/elements/dnd/SortableItem'
-import Menu from '@/components/elements/Menu'
 import { NodeContext } from '@/state/admin/node'
 import { classNames } from '@/util/helpers'
 import useFlash from '@/util/useFlash'
 import { EyeSlashIcon } from '@heroicons/react/20/solid'
 import { useState } from 'react'
-import DottedButton from '@/components/elements/DottedButton'
+
+import {
+    Template,
+    TemplateGroup,
+} from '@/api/admin/nodes/templateGroups/getTemplateGroups'
+import deleteTemplate from '@/api/admin/nodes/templateGroups/templates/deleteTemplate'
+import useTemplateGroupsSWR from '@/api/admin/nodes/templateGroups/useTemplateGroupsSWR'
 import useNodeSWR from '@/api/admin/nodes/useNodeSWR'
 
+import DottedButton from '@/components/elements/DottedButton'
+import Menu from '@/components/elements/Menu'
+import SortableItem, {
+    ChildrenPropsWithHandle,
+} from '@/components/elements/dnd/SortableItem'
+
+import EditTemplateModal from '@/components/admin/nodes/templates/EditTemplateModal'
+
 interface Props {
     template: Template
     group?: TemplateGroup
@@ -37,7 +45,9 @@ const TemplateCard = ({ template, group, className }: Props) => {
                             // return it
                             return {
                                 ...g,
-                                templates: g.templates!.filter(t => t.id !== template.id),
+                                templates: g.templates!.filter(
+                                    t => t.id !== template.id
+                                ),
                             }
                         }
 
@@ -52,7 +62,11 @@ const TemplateCard = ({ template, group, className }: Props) => {
 
     return (
         <SortableItem overrideZIndex handle id={template.id}>
-            {({ attributes, listeners, isDragging }: ChildrenPropsWithHandle) => (
+            {({
+                attributes,
+                listeners,
+                isDragging,
+            }: ChildrenPropsWithHandle) => (
                 <div
                     className={classNames(
                         'flex justify-between items-center px-3 py-2 rounded select-none',
@@ -66,19 +80,37 @@ const TemplateCard = ({ template, group, className }: Props) => {
                         open={showEditModal}
                         onClose={() => setShowEditModal(false)}
                     />
-                    <div className={classNames('grow', isDragging ? 'invisible' : null)} {...attributes} {...listeners}>
+                    <div
+                        className={classNames(
+                            'grow',
+                            isDragging ? 'invisible' : null
+                        )}
+                        {...attributes}
+                        {...listeners}
+                    >
                         <div className='flex space-x-3 items-center overflow-hidden'>
-                            <p className='font-medium text-sm text-foreground truncate'>{template.name}</p>
-                            {template.hidden && <EyeSlashIcon title='hidden' className='h-4 w-4 text-foreground' />}
+                            <p className='font-medium text-sm text-foreground truncate'>
+                                {template.name}
+                            </p>
+                            {template.hidden && (
+                                <EyeSlashIcon
+                                    title='hidden'
+                                    className='h-4 w-4 text-foreground'
+                                />
+                            )}
                         </div>
-                        <p className='description-small !text-xs'>vmid: {template.vmid}</p>
+                        <p className='description-small !text-xs'>
+                            vmid: {template.vmid}
+                        </p>
                     </div>
                     <Menu width={200}>
                         <Menu.Target>
                             <DottedButton />
                         </Menu.Target>
                         <Menu.Dropdown>
-                            <Menu.Item onClick={() => setShowEditModal(true)}>Edit</Menu.Item>
+                            <Menu.Item onClick={() => setShowEditModal(true)}>
+                                Edit
+                            </Menu.Item>
                             <Menu.Divider />
                             <Menu.Item color='red' onClick={handleDelete}>
                                 Delete
diff --git a/resources/scripts/components/admin/nodes/templates/TemplateGroupCard.tsx b/resources/scripts/components/admin/nodes/templates/TemplateGroupCard.tsx
index e7b01d0d2cd..07a3a89612c 100644
--- a/resources/scripts/components/admin/nodes/templates/TemplateGroupCard.tsx
+++ b/resources/scripts/components/admin/nodes/templates/TemplateGroupCard.tsx
@@ -1,17 +1,9 @@
-import { Template, TemplateGroup } from '@/api/admin/nodes/templateGroups/getTemplateGroups'
-import Card from '@/components/elements/Card'
-import SortableItem, { ChildrenPropsWithHandle } from '@/components/elements/dnd/SortableItem'
-import { classNames } from '@/util/helpers'
-import { EyeSlashIcon } from '@heroicons/react/20/solid'
 //@ts-ignore
 import Dots from '@/assets/images/icons/dots-vertical.svg'
-import Menu from '@/components/elements/Menu'
-import EditTemplateGroupModal from '@/components/admin/nodes/templates/EditTemplateGroupModal'
-import { useState } from 'react'
-import deleteTemplateGroup from '@/api/admin/nodes/templateGroups/deleteTemplateGroup'
 import { NodeContext } from '@/state/admin/node'
+import { classNames } from '@/util/helpers'
 import useFlash from '@/util/useFlash'
-import useTemplateGroupsSWR from '@/api/admin/nodes/templateGroups/useTemplateGroupsSWR'
+import useNotify from '@/util/useNotify'
 import {
     DndContext,
     DragEndEvent,
@@ -23,15 +15,34 @@ import {
     useSensor,
     useSensors,
 } from '@dnd-kit/core'
-import { arrayMove, SortableContext } from '@dnd-kit/sortable'
-import TemplateCard from '@/components/admin/nodes/templates/TemplateCard'
-import { restrictToVerticalAxis, restrictToWindowEdges } from '@dnd-kit/modifiers'
-import EditTemplateModal from '@/components/admin/nodes/templates/EditTemplateModal'
-import useNotify from '@/util/useNotify'
-import reorderTemplates from '@/api/admin/nodes/templateGroups/templates/reorderTemplates'
+import {
+    restrictToVerticalAxis,
+    restrictToWindowEdges,
+} from '@dnd-kit/modifiers'
+import { SortableContext, arrayMove } from '@dnd-kit/sortable'
+import { EyeSlashIcon } from '@heroicons/react/20/solid'
 import { updateNotification } from '@mantine/notifications'
-import { httpErrorToHuman } from '@/api/http'
+import { useState } from 'react'
+
+import deleteTemplateGroup from '@/api/admin/nodes/templateGroups/deleteTemplateGroup'
+import {
+    Template,
+    TemplateGroup,
+} from '@/api/admin/nodes/templateGroups/getTemplateGroups'
+import reorderTemplates from '@/api/admin/nodes/templateGroups/templates/reorderTemplates'
+import useTemplateGroupsSWR from '@/api/admin/nodes/templateGroups/useTemplateGroupsSWR'
 import useNodeSWR from '@/api/admin/nodes/useNodeSWR'
+import { httpErrorToHuman } from '@/api/http'
+
+import Card from '@/components/elements/Card'
+import Menu from '@/components/elements/Menu'
+import SortableItem, {
+    ChildrenPropsWithHandle,
+} from '@/components/elements/dnd/SortableItem'
+
+import EditTemplateGroupModal from '@/components/admin/nodes/templates/EditTemplateGroupModal'
+import EditTemplateModal from '@/components/admin/nodes/templates/EditTemplateModal'
+import TemplateCard from '@/components/admin/nodes/templates/TemplateCard'
 
 interface Props {
     group: TemplateGroup
@@ -92,12 +103,17 @@ const TemplateGroupCard = ({ group, className }: Props) => {
                     message: httpErrorToHuman(error),
                     autoClose: 5000,
                 })
-                clearAndAddHttpError({ key: 'admin:node:template-groups', error })
+                clearAndAddHttpError({
+                    key: 'admin:node:template-groups',
+                    error,
+                })
             })
     }
 
     const handleDragStart = (event: DragStartEvent) => {
-        setActiveTemplate(group.templates!.find(template => template.id === event.active.id)!)
+        setActiveTemplate(
+            group.templates!.find(template => template.id === event.active.id)!
+        )
     }
 
     const handleDragEnd = ({ active, over }: DragEndEvent) => {
@@ -110,11 +126,17 @@ const TemplateGroupCard = ({ group, className }: Props) => {
                         // use arrayMove
                         const newTemplates = arrayMove(
                             g.templates!,
-                            g.templates!.findIndex(template => template.id === active.id),
-                            g.templates!.findIndex(template => template.id === over.id)
+                            g.templates!.findIndex(
+                                template => template.id === active.id
+                            ),
+                            g.templates!.findIndex(
+                                template => template.id === over.id
+                            )
                         )
 
-                        newTemplates.forEach((group, index) => (group.orderColumn = index + 1))
+                        newTemplates.forEach(
+                            (group, index) => (group.orderColumn = index + 1)
+                        )
 
                         updateTemplateOrder(newTemplates.map(t => t.id))
 
@@ -134,13 +156,25 @@ const TemplateGroupCard = ({ group, className }: Props) => {
 
     return (
         <SortableItem overrideZIndex handle id={group.id}>
-            {({ attributes, listeners, isDragging, active }: ChildrenPropsWithHandle) => (
+            {({
+                attributes,
+                listeners,
+                isDragging,
+                active,
+            }: ChildrenPropsWithHandle) => (
                 <Card
                     overridePadding
-                    className={classNames('min-h-[9rem] relative select-none', className)}
+                    className={classNames(
+                        'min-h-[9rem] relative select-none',
+                        className
+                    )}
                     key={group.id}
                 >
-                    <EditTemplateModal group={group} open={showCreateModal} onClose={() => setShowCreateModal(false)} />
+                    <EditTemplateModal
+                        group={group}
+                        open={showCreateModal}
+                        onClose={() => setShowCreateModal(false)}
+                    />
                     <EditTemplateGroupModal
                         group={group}
                         open={showEditModal}
@@ -155,9 +189,20 @@ const TemplateGroupCard = ({ group, className }: Props) => {
                         />
                     ) : null}
                     <div className='flex justify-between items-center pt-3 px-4'>
-                        <div className='flex items-center space-x-3 grow' {...attributes} {...listeners}>
-                            <p className='font-medium text-foreground'>{group.name}</p>
-                            {group.hidden && <EyeSlashIcon title='hidden' className='h-4 w-4 text-foreground' />}
+                        <div
+                            className='flex items-center space-x-3 grow'
+                            {...attributes}
+                            {...listeners}
+                        >
+                            <p className='font-medium text-foreground'>
+                                {group.name}
+                            </p>
+                            {group.hidden && (
+                                <EyeSlashIcon
+                                    title='hidden'
+                                    className='h-4 w-4 text-foreground'
+                                />
+                            )}
                         </div>
                         <Menu width={200}>
                             <Menu.Target>
@@ -168,7 +213,11 @@ const TemplateGroupCard = ({ group, className }: Props) => {
                                 />
                             </Menu.Target>
                             <Menu.Dropdown>
-                                <Menu.Item onClick={() => setShowEditModal(true)}>Edit</Menu.Item>
+                                <Menu.Item
+                                    onClick={() => setShowEditModal(true)}
+                                >
+                                    Edit
+                                </Menu.Item>
                                 <Menu.Divider />
                                 <Menu.Item color='red' onClick={handleDelete}>
                                     Delete
@@ -181,19 +230,29 @@ const TemplateGroupCard = ({ group, className }: Props) => {
                             {group.templates!.length > 0 ? (
                                 <DndContext
                                     sensors={sensors}
-                                    modifiers={[restrictToVerticalAxis, restrictToWindowEdges]}
+                                    modifiers={[
+                                        restrictToVerticalAxis,
+                                        restrictToWindowEdges,
+                                    ]}
                                     onDragEnd={handleDragEnd}
                                     onDragStart={handleDragStart}
                                 >
                                     <SortableContext items={group.templates!}>
                                         {group.templates!.map(template => (
-                                            <TemplateCard group={group} key={template.uuid} template={template} />
+                                            <TemplateCard
+                                                group={group}
+                                                key={template.uuid}
+                                                template={template}
+                                            />
                                         ))}
                                     </SortableContext>
 
                                     <DragOverlay>
                                         {activeTemplate ? (
-                                            <TemplateCard template={activeTemplate} className='z-20' />
+                                            <TemplateCard
+                                                template={activeTemplate}
+                                                className='z-20'
+                                            />
                                         ) : null}
                                     </DragOverlay>
                                 </DndContext>
diff --git a/resources/scripts/components/admin/overview/OverviewContainer.tsx b/resources/scripts/components/admin/overview/OverviewContainer.tsx
index 83bf94d100a..08070b81fa4 100644
--- a/resources/scripts/components/admin/overview/OverviewContainer.tsx
+++ b/resources/scripts/components/admin/overview/OverviewContainer.tsx
@@ -1,6 +1,7 @@
-import PageContentBlock from '@/components/elements/PageContentBlock'
 import { useStoreState } from '@/state'
 
+import PageContentBlock from '@/components/elements/PageContentBlock'
+
 const OverviewContainer = () => {
     const version = useStoreState(state => state.settings.data!.version)
     return (
diff --git a/resources/scripts/components/admin/servers/AddressesMultiSelectForm.tsx b/resources/scripts/components/admin/servers/AddressesMultiSelectForm.tsx
index 22977da2779..408920e5d8a 100644
--- a/resources/scripts/components/admin/servers/AddressesMultiSelectForm.tsx
+++ b/resources/scripts/components/admin/servers/AddressesMultiSelectForm.tsx
@@ -1,7 +1,9 @@
-import { useMemo, useState } from 'react'
-import useAddressesSWR from '@/api/admin/nodes/addresses/useAddressesSWR'
 import { useDebouncedValue } from '@mantine/hooks'
+import { useMemo, useState } from 'react'
 import { useFormContext } from 'react-hook-form'
+
+import useAddressesSWR from '@/api/admin/nodes/addresses/useAddressesSWR'
+
 import MultiSelectForm from '@/components/elements/forms/MultiSelectForm'
 
 interface Props {
@@ -31,7 +33,10 @@ const AddressesMultiSelectForm = ({ disabled, nodeId: propNodeId }: Props) => {
             data && selectedAddresses
                 ? data.items
                       .filter(address => {
-                          return !selectedAddresses.items.find(selectedAddress => selectedAddress.id === address.id)
+                          return !selectedAddresses.items.find(
+                              selectedAddress =>
+                                  selectedAddress.id === address.id
+                          )
                       })
                       .map(address => ({
                           value: address.id.toString(),
diff --git a/resources/scripts/components/admin/servers/CreateServerModal.tsx b/resources/scripts/components/admin/servers/CreateServerModal.tsx
index 27b87e93914..5fed7b992cd 100644
--- a/resources/scripts/components/admin/servers/CreateServerModal.tsx
+++ b/resources/scripts/components/admin/servers/CreateServerModal.tsx
@@ -1,21 +1,28 @@
-import FlashMessageRender from '@/components/elements/FlashMessageRenderer'
-import Modal from '@/components/elements/Modal'
 import { useFlashKey } from '@/util/useFlash'
-import NodesSelectForm from '@/components/admin/servers/NodesSelectForm'
-import AddressesMultiSelectForm from '@/components/admin/servers/AddressesMultiSelectForm'
-import UsersSelectForm from '@/components/admin/servers/UsersSelectForm'
-import TemplatesSelectForm from '@/components/admin/servers/TemplatesSelectForm'
-import createServer from '@/api/admin/servers/createServer'
-import useServersSWR from '@/api/admin/servers/useServersSWR'
 import usePagination from '@/util/usePagination'
-import { ServerResponse } from '@/api/admin/servers/getServers'
-import { z } from 'zod'
-import { englishKeyboardCharacters, hostname, password } from '@/util/validation'
-import { FormProvider, useForm } from 'react-hook-form'
+import {
+    englishKeyboardCharacters,
+    hostname,
+    password,
+} from '@/util/validation'
 import { zodResolver } from '@hookform/resolvers/zod'
-import TextInputForm from '@/components/elements/forms/TextInputForm'
-import CheckboxForm from '@/components/elements/forms/CheckboxForm'
+import { FormProvider, useForm } from 'react-hook-form'
 import { useTranslation } from 'react-i18next'
+import { z } from 'zod'
+
+import createServer from '@/api/admin/servers/createServer'
+import { ServerResponse } from '@/api/admin/servers/getServers'
+import useServersSWR from '@/api/admin/servers/useServersSWR'
+
+import FlashMessageRender from '@/components/elements/FlashMessageRenderer'
+import Modal from '@/components/elements/Modal'
+import CheckboxForm from '@/components/elements/forms/CheckboxForm'
+import TextInputForm from '@/components/elements/forms/TextInputForm'
+
+import AddressesMultiSelectForm from '@/components/admin/servers/AddressesMultiSelectForm'
+import NodesSelectForm from '@/components/admin/servers/NodesSelectForm'
+import TemplatesSelectForm from '@/components/admin/servers/TemplatesSelectForm'
+import UsersSelectForm from '@/components/admin/servers/UsersSelectForm'
 
 interface Props {
     nodeId?: number
@@ -26,8 +33,16 @@ interface Props {
 
 const CreateServerModal = ({ nodeId, userId, open, onClose }: Props) => {
     const [page] = usePagination()
-    const { mutate } = useServersSWR({ nodeId, userId, page, query: '', include: ['node', 'user'] })
-    const { clearFlashes, clearAndAddHttpError } = useFlashKey('admin.servers.create')
+    const { mutate } = useServersSWR({
+        nodeId,
+        userId,
+        page,
+        query: '',
+        include: ['node', 'user'],
+    })
+    const { clearFlashes, clearAndAddHttpError } = useFlashKey(
+        'admin.servers.create'
+    )
     const { t } = useTranslation('admin.servers.index')
     const { t: tStrings } = useTranslation('strings')
 
@@ -35,15 +50,27 @@ const CreateServerModal = ({ nodeId, userId, open, onClose }: Props) => {
         name: z.string().max(40).nonempty(),
         nodeId: z.preprocess(Number, z.number()),
         userId: z.preprocess(Number, z.number()),
-        vmid: z.union([z.preprocess(Number, z.number().int().min(100).max(999999999)), z.literal('')]),
+        vmid: z.union([
+            z.preprocess(Number, z.number().int().min(100).max(999999999)),
+            z.literal(''),
+        ]),
         hostname: hostname().max(191).nonempty(),
         addressIds: z.array(z.preprocess(Number, z.number())),
         cpu: z.preprocess(Number, z.number().min(1)),
         memory: z.preprocess(Number, z.number().min(16)),
         disk: z.preprocess(Number, z.number().min(1)),
-        snapshotLimit: z.union([z.literal(''), z.preprocess(Number, z.number().min(0))]),
-        backupLimit: z.union([z.literal(''), z.preprocess(Number, z.number().min(0))]),
-        bandwidthLimit: z.union([z.literal(''), z.preprocess(Number, z.number().min(0))]),
+        snapshotLimit: z.union([
+            z.literal(''),
+            z.preprocess(Number, z.number().min(0)),
+        ]),
+        backupLimit: z.union([
+            z.literal(''),
+            z.preprocess(Number, z.number().min(0)),
+        ]),
+        bandwidthLimit: z.union([
+            z.literal(''),
+            z.preprocess(Number, z.number().min(0)),
+        ]),
         accountPassword: password(englishKeyboardCharacters()).nonempty(),
         shouldCreateServer: z.literal(true),
         startOnCompletion: z.boolean(),
@@ -54,22 +81,37 @@ const CreateServerModal = ({ nodeId, userId, open, onClose }: Props) => {
         name: z.string().max(40).nonempty(),
         nodeId: z.preprocess(Number, z.number()),
         userId: z.preprocess(Number, z.number()),
-        vmid: z.union([z.preprocess(Number, z.number().min(100).max(999999999)), z.literal('')]),
+        vmid: z.union([
+            z.preprocess(Number, z.number().min(100).max(999999999)),
+            z.literal(''),
+        ]),
         hostname: hostname().max(191).nonempty(),
         addressIds: z.array(z.preprocess(Number, z.number())),
         cpu: z.preprocess(Number, z.number().min(1)),
         memory: z.preprocess(Number, z.number().min(16)),
         disk: z.preprocess(Number, z.number().min(1)),
-        snapshotLimit: z.union([z.literal(''), z.preprocess(Number, z.number().min(0))]),
-        backupLimit: z.union([z.literal(''), z.preprocess(Number, z.number().min(0))]),
-        bandwidthLimit: z.union([z.literal(''), z.preprocess(Number, z.number().min(0))]),
+        snapshotLimit: z.union([
+            z.literal(''),
+            z.preprocess(Number, z.number().min(0)),
+        ]),
+        backupLimit: z.union([
+            z.literal(''),
+            z.preprocess(Number, z.number().min(0)),
+        ]),
+        bandwidthLimit: z.union([
+            z.literal(''),
+            z.preprocess(Number, z.number().min(0)),
+        ]),
         accountPassword: password(englishKeyboardCharacters()).optional(),
         shouldCreateServer: z.literal(false),
         startOnCompletion: z.boolean(),
         templateUuid: z.string(),
     })
 
-    const schema = z.discriminatedUnion('shouldCreateServer', [schemaWithCreateVm, schemaWithoutCreatingVm])
+    const schema = z.discriminatedUnion('shouldCreateServer', [
+        schemaWithCreateVm,
+        schemaWithoutCreatingVm,
+    ])
 
     const form = useForm({
         resolver: zodResolver(schema),
@@ -156,32 +198,61 @@ const CreateServerModal = ({ nodeId, userId, open, onClose }: Props) => {
             <FormProvider {...form}>
                 <form onSubmit={form.handleSubmit(submit)}>
                     <Modal.Body>
-                        <FlashMessageRender className='mb-5' byKey={'admin.servers.create'} />
-                        <TextInputForm name={'name'} label={tStrings('display_name')} />
+                        <FlashMessageRender
+                            className='mb-5'
+                            byKey={'admin.servers.create'}
+                        />
+                        <TextInputForm
+                            name={'name'}
+                            label={tStrings('display_name')}
+                        />
                         {nodeId ? null : <NodesSelectForm />}
                         {userId ? null : <UsersSelectForm />}
                         <TextInputForm
                             name={'vmid'}
                             label={'VMID'}
-                            placeholder={t('vmid_placeholder') ?? 'Leave blank for random VMID'}
+                            placeholder={
+                                t('vmid_placeholder') ??
+                                'Leave blank for random VMID'
+                            }
+                        />
+                        <TextInputForm
+                            name={'hostname'}
+                            label={tStrings('hostname')}
+                        />
+                        <AddressesMultiSelectForm
+                            disabled={watchNodeId === ''}
                         />
-                        <TextInputForm name={'hostname'} label={tStrings('hostname')} />
-                        <AddressesMultiSelectForm disabled={watchNodeId === ''} />
                         <div className={'grid grid-cols-2 gap-3'}>
-                            <TextInputForm name={'cpu'} label={tStrings('cpu')} />
-                            <TextInputForm name={'memory'} label={`${tStrings('memory')} (MiB)`} />
+                            <TextInputForm
+                                name={'cpu'}
+                                label={tStrings('cpu')}
+                            />
+                            <TextInputForm
+                                name={'memory'}
+                                label={`${tStrings('memory')} (MiB)`}
+                            />
                         </div>
-                        <TextInputForm name={'disk'} label={`${tStrings('disk')} (MiB)`} />
+                        <TextInputForm
+                            name={'disk'}
+                            label={`${tStrings('disk')} (MiB)`}
+                        />
                         <div className={'grid grid-cols-2 gap-3'}>
                             <TextInputForm
                                 name={'backupLimit'}
                                 label={t('backup_limit')}
-                                placeholder={t('limit_placeholder') ?? 'Leave blank for no limit'}
+                                placeholder={
+                                    t('limit_placeholder') ??
+                                    'Leave blank for no limit'
+                                }
                             />
                             <TextInputForm
                                 name={'bandwidthLimit'}
                                 label={`${t('bandwidth_limit')} (MiB)`}
-                                placeholder={t('limit_placeholder') ?? 'Leave blank for no limit'}
+                                placeholder={
+                                    t('limit_placeholder') ??
+                                    'Leave blank for no limit'
+                                }
                             />
                         </div>
                         <TextInputForm
@@ -194,7 +265,11 @@ const CreateServerModal = ({ nodeId, userId, open, onClose }: Props) => {
                             label={t('should_create_vm')}
                             className={'mt-3 relative'}
                         />
-                        <TemplatesSelectForm disabled={!watchShouldCreateServer || watchNodeId === ''} />
+                        <TemplatesSelectForm
+                            disabled={
+                                !watchShouldCreateServer || watchNodeId === ''
+                            }
+                        />
                         <CheckboxForm
                             name={'startOnCompletion'}
                             label={t('start_server_after_installing')}
@@ -205,7 +280,10 @@ const CreateServerModal = ({ nodeId, userId, open, onClose }: Props) => {
                         <Modal.Action type='button' onClick={handleClose}>
                             {tStrings('cancel')}
                         </Modal.Action>
-                        <Modal.Action type='submit' loading={form.formState.isSubmitting}>
+                        <Modal.Action
+                            type='submit'
+                            loading={form.formState.isSubmitting}
+                        >
                             {tStrings('create')}
                         </Modal.Action>
                     </Modal.Actions>
diff --git a/resources/scripts/components/admin/servers/FixServerStatusButton.tsx b/resources/scripts/components/admin/servers/FixServerStatusButton.tsx
index b88aad85dad..a16f5e6df1d 100644
--- a/resources/scripts/components/admin/servers/FixServerStatusButton.tsx
+++ b/resources/scripts/components/admin/servers/FixServerStatusButton.tsx
@@ -1,12 +1,16 @@
-import Button from '@/components/elements/Button'
+import { AdminServerContext } from '@/state/admin/server'
 import { useState } from 'react'
+
 import updateServer from '@/api/admin/servers/updateServer'
-import { AdminServerContext } from '@/state/admin/server'
+
+import Button from '@/components/elements/Button'
 
 const FixServerStatusButton = () => {
     const [loading, setLoading] = useState(false)
     const server = AdminServerContext.useStoreState(state => state.server.data!)
-    const setServer = AdminServerContext.useStoreActions(actions => actions.server.setServer)
+    const setServer = AdminServerContext.useStoreActions(
+        actions => actions.server.setServer
+    )
 
     const handle = async () => {
         setLoading(true)
@@ -20,7 +24,12 @@ const FixServerStatusButton = () => {
     }
 
     return (
-        <Button onClick={handle} loading={loading} variant={'filled'} className={'mt-6'}>
+        <Button
+            onClick={handle}
+            loading={loading}
+            variant={'filled'}
+            className={'mt-6'}
+        >
             Fix Status
         </Button>
     )
diff --git a/resources/scripts/components/admin/servers/NodesSelectForm.tsx b/resources/scripts/components/admin/servers/NodesSelectForm.tsx
index 46d9956c7bc..9d48faa480e 100644
--- a/resources/scripts/components/admin/servers/NodesSelectForm.tsx
+++ b/resources/scripts/components/admin/servers/NodesSelectForm.tsx
@@ -1,7 +1,9 @@
-import { useState } from 'react'
-import useNodesSWR from '@/api/admin/nodes/useNodesSWR'
 import { useDebouncedValue } from '@mantine/hooks'
+import { useState } from 'react'
 import { useFormContext } from 'react-hook-form'
+
+import useNodesSWR from '@/api/admin/nodes/useNodesSWR'
+
 import SelectForm from '@/components/elements/forms/SelectForm'
 
 interface Props {
@@ -14,7 +16,9 @@ const NodesSelectForm = ({ disabled }: Props) => {
     const [query, setQuery] = useState(nodeId)
 
     const [debouncedQuery] = useDebouncedValue(query, 200)
-    const { data, isValidating, isLoading } = useNodesSWR({ query: debouncedQuery })
+    const { data, isValidating, isLoading } = useNodesSWR({
+        query: debouncedQuery,
+    })
     const nodes =
         data?.items.map(node => ({
             value: node.id.toString(),
diff --git a/resources/scripts/components/admin/servers/ServerContentBlock.tsx b/resources/scripts/components/admin/servers/ServerContentBlock.tsx
index 4a480d30983..ed081c8d9f3 100644
--- a/resources/scripts/components/admin/servers/ServerContentBlock.tsx
+++ b/resources/scripts/components/admin/servers/ServerContentBlock.tsx
@@ -1,13 +1,18 @@
-import PageContentBlock, { PageContentBlockProps } from '@/components/elements/PageContentBlock'
-import { ServerContext } from '@/state/server'
 import { AdminServerContext } from '@/state/admin/server'
+import { ServerContext } from '@/state/server'
+
+import PageContentBlock, {
+    PageContentBlockProps,
+} from '@/components/elements/PageContentBlock'
 
 interface Props extends PageContentBlockProps {
     title: string
 }
 
 const ServerContentBlock: React.FC<Props> = ({ title, children, ...props }) => {
-    const name = AdminServerContext.useStoreState(state => state.server.data!.name)
+    const name = AdminServerContext.useStoreState(
+        state => state.server.data!.name
+    )
 
     return (
         <PageContentBlock title={`${title} | ${name}`} {...props}>
diff --git a/resources/scripts/components/admin/servers/ServersContainer.tsx b/resources/scripts/components/admin/servers/ServersContainer.tsx
index c91099184a1..91ad9453f75 100644
--- a/resources/scripts/components/admin/servers/ServersContainer.tsx
+++ b/resources/scripts/components/admin/servers/ServersContainer.tsx
@@ -1,11 +1,13 @@
-import ServersTable from '@/components/admin/servers/ServersTable'
-import PageContentBlock from '@/components/elements/PageContentBlock'
-import { useState } from 'react'
-import CreateServerModal from '@/components/admin/servers/CreateServerModal'
 import { useDebouncedValue } from '@mantine/hooks'
-import SearchBar from '@/components/admin/SearchBar'
+import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 
+import PageContentBlock from '@/components/elements/PageContentBlock'
+
+import SearchBar from '@/components/admin/SearchBar'
+import CreateServerModal from '@/components/admin/servers/CreateServerModal'
+import ServersTable from '@/components/admin/servers/ServersTable'
+
 const ServersContainer = () => {
     const [query, setQuery] = useState('')
     const [debouncedQuery] = useDebouncedValue(query, 200)
diff --git a/resources/scripts/components/admin/servers/ServersTable.tsx b/resources/scripts/components/admin/servers/ServersTable.tsx
index 3c14b8db9f4..be0eab51677 100644
--- a/resources/scripts/components/admin/servers/ServersTable.tsx
+++ b/resources/scripts/components/admin/servers/ServersTable.tsx
@@ -1,13 +1,15 @@
+import usePagination from '@/util/usePagination'
+import { useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { Link } from 'react-router-dom'
+
 import useServersSWR from '@/api/admin/servers/useServersSWR'
 import { ServerBuild } from '@/api/server/getServer'
-import Table, { ColumnArray } from '@/components/elements/displays/Table'
+
+import Button from '@/components/elements/Button'
 import Pagination from '@/components/elements/Pagination'
 import Spinner from '@/components/elements/Spinner'
-import usePagination from '@/util/usePagination'
-import { Link } from 'react-router-dom'
-import { useState } from 'react'
-import Button from '@/components/elements/Button'
-import { useTranslation } from 'react-i18next'
+import Table, { ColumnArray } from '@/components/elements/displays/Table'
 
 interface Props {
     query?: string
@@ -19,14 +21,23 @@ interface Props {
 const ServersTable = ({ query, className, nodeId, userId }: Props) => {
     const { t: tStrings } = useTranslation('strings')
     const [page, setPage] = usePagination()
-    const { data } = useServersSWR({ page, query, nodeId, userId, include: ['node', 'user'] })
+    const { data } = useServersSWR({
+        page,
+        query,
+        nodeId,
+        userId,
+        include: ['node', 'user'],
+    })
 
     const columns: ColumnArray<ServerBuild> = [
         {
             accessor: 'name',
             header: tStrings('name'),
             cell: ({ value, row }) => (
-                <Link to={`/admin/servers/${row.id}`} className='link text-foreground'>
+                <Link
+                    to={`/admin/servers/${row.id}`}
+                    className='link text-foreground'
+                >
                     {value}
                 </Link>
             ),
@@ -39,7 +50,10 @@ const ServersTable = ({ query, className, nodeId, userId }: Props) => {
             accessor: 'user',
             header: tStrings('owner'),
             cell: ({ value }) => (
-                <Link to={`/admin/users/${value!.id}/settings`} className='link text-foreground'>
+                <Link
+                    to={`/admin/users/${value!.id}/settings`}
+                    className='link text-foreground'
+                >
                     {value!.email}
                 </Link>
             ),
diff --git a/resources/scripts/components/admin/servers/TemplatesSelectForm.tsx b/resources/scripts/components/admin/servers/TemplatesSelectForm.tsx
index a3fd9be1027..2d7860088bf 100644
--- a/resources/scripts/components/admin/servers/TemplatesSelectForm.tsx
+++ b/resources/scripts/components/admin/servers/TemplatesSelectForm.tsx
@@ -1,10 +1,12 @@
 import { useField } from 'formik'
-import useTemplateGroupsSWR from '@/api/admin/nodes/templateGroups/useTemplateGroupsSWR'
 import { useMemo, useState } from 'react'
-import Select from '@/components/elements/inputs/Select'
-import SelectFormik from '@/components/elements/formik/SelectFormik'
 import { useFormContext } from 'react-hook-form'
+
+import useTemplateGroupsSWR from '@/api/admin/nodes/templateGroups/useTemplateGroupsSWR'
+
+import SelectFormik from '@/components/elements/formik/SelectFormik'
 import SelectForm from '@/components/elements/forms/SelectForm'
+import Select from '@/components/elements/inputs/Select'
 
 interface Props {
     disabled?: boolean
@@ -13,7 +15,9 @@ interface Props {
 const TemplatesSelectForm = ({ disabled }: Props) => {
     const { setValue, watch } = useFormContext()
     const nodeId: number | null = watch('nodeId', null)
-    const { data, mutate, isValidating, isLoading } = useTemplateGroupsSWR(nodeId ?? -1)
+    const { data, mutate, isValidating, isLoading } = useTemplateGroupsSWR(
+        nodeId ?? -1
+    )
     const templateGroups =
         data?.map(group => {
             return {
@@ -28,7 +32,9 @@ const TemplatesSelectForm = ({ disabled }: Props) => {
 
     const [groupUuid, setGroupUuid] = useState('')
     const templates = useMemo(
-        () => templateGroups.find(group => group.value === groupUuid)?.templates ?? [],
+        () =>
+            templateGroups.find(group => group.value === groupUuid)
+                ?.templates ?? [],
         [templateGroups, groupUuid]
     )
 
diff --git a/resources/scripts/components/admin/servers/UsersSelectForm.tsx b/resources/scripts/components/admin/servers/UsersSelectForm.tsx
index 039023f1752..43b90cc1978 100644
--- a/resources/scripts/components/admin/servers/UsersSelectForm.tsx
+++ b/resources/scripts/components/admin/servers/UsersSelectForm.tsx
@@ -1,10 +1,12 @@
+import { useDebouncedValue } from '@mantine/hooks'
 import { useField } from 'formik'
 import { useCallback, useEffect, useMemo, useState } from 'react'
+import { useFormContext } from 'react-hook-form'
+
 import useUsersSWR from '@/api/admin/users/useUsersSWR'
-import SelectFormik from '@/components/elements/formik/SelectFormik'
+
 import DescriptiveItemComponent from '@/components/elements/DescriptiveItemComponent'
-import { useDebouncedValue } from '@mantine/hooks'
-import { useFormContext } from 'react-hook-form'
+import SelectFormik from '@/components/elements/formik/SelectFormik'
 import SelectForm from '@/components/elements/forms/SelectForm'
 
 const UsersSelectForm = () => {
@@ -12,7 +14,9 @@ const UsersSelectForm = () => {
     const userId: string = watch('userId')
     const [query, setQuery] = useState(userId)
     const [debouncedQuery] = useDebouncedValue(query, 200)
-    const { data, isValidating, isLoading } = useUsersSWR({ query: debouncedQuery })
+    const { data, isValidating, isLoading } = useUsersSWR({
+        query: debouncedQuery,
+    })
     const users = useMemo(
         () =>
             data?.items.map(user => ({
diff --git a/resources/scripts/components/admin/servers/overview/ServerOverviewContainer.tsx b/resources/scripts/components/admin/servers/overview/ServerOverviewContainer.tsx
index 0564bd0a59d..08f223a58fc 100644
--- a/resources/scripts/components/admin/servers/overview/ServerOverviewContainer.tsx
+++ b/resources/scripts/components/admin/servers/overview/ServerOverviewContainer.tsx
@@ -1,8 +1,10 @@
-import ServerContentBlock from '@/components/admin/servers/ServerContentBlock'
-import Button from '@/components/elements/Button'
 import { AdminServerContext } from '@/state/admin/server'
-import { Link } from 'react-router-dom'
 import { useTranslation } from 'react-i18next'
+import { Link } from 'react-router-dom'
+
+import Button from '@/components/elements/Button'
+
+import ServerContentBlock from '@/components/admin/servers/ServerContentBlock'
 
 const ServerOverviewContainer = () => {
     const server = AdminServerContext.useStoreState(state => state.server.data!)
diff --git a/resources/scripts/components/admin/servers/settings/GeneralContainer.tsx b/resources/scripts/components/admin/servers/settings/GeneralContainer.tsx
index 86a024f7554..0db88c8e900 100644
--- a/resources/scripts/components/admin/servers/settings/GeneralContainer.tsx
+++ b/resources/scripts/components/admin/servers/settings/GeneralContainer.tsx
@@ -1,6 +1,6 @@
+import DeleteServerCard from '@/components/admin/servers/settings/partials/general/DeleteServerCard'
 import ServerInformationCard from '@/components/admin/servers/settings/partials/general/ServerInformationCard'
 import ServerSuspensionCard from '@/components/admin/servers/settings/partials/general/ServerSuspensionCard'
-import DeleteServerCard from '@/components/admin/servers/settings/partials/general/DeleteServerCard'
 
 const GeneralContainer = () => {
     return (
diff --git a/resources/scripts/components/admin/servers/settings/ServerSettingsContainer.tsx b/resources/scripts/components/admin/servers/settings/ServerSettingsContainer.tsx
index faa5aa24843..ecbf83ab6aa 100644
--- a/resources/scripts/components/admin/servers/settings/ServerSettingsContainer.tsx
+++ b/resources/scripts/components/admin/servers/settings/ServerSettingsContainer.tsx
@@ -1,7 +1,9 @@
-import ServerContentBlock from '@/components/admin/servers/ServerContentBlock'
-import SettingsLayout from '@/components/elements/layouts/SettingsLayout'
 import { useTranslation } from 'react-i18next'
 
+import SettingsLayout from '@/components/elements/layouts/SettingsLayout'
+
+import ServerContentBlock from '@/components/admin/servers/ServerContentBlock'
+
 const ServerSettingsContainer = () => {
     const { t: tStrings } = useTranslation('strings')
 
@@ -9,7 +11,12 @@ const ServerSettingsContainer = () => {
         <SettingsLayout
             indexPattern='/admin/servers/:id/settings'
             defaultUrl='/admin/servers/:id/settings/general'
-            contentBlock={props => <ServerContentBlock title={tStrings('setting_other')} {...props} />}
+            contentBlock={props => (
+                <ServerContentBlock
+                    title={tStrings('setting_other')}
+                    {...props}
+                />
+            )}
             routes={[
                 {
                     path: '/admin/servers/:id/settings/general',
diff --git a/resources/scripts/components/admin/servers/settings/partials/general/DeleteServerCard.tsx b/resources/scripts/components/admin/servers/settings/partials/general/DeleteServerCard.tsx
index 0b5a592bac0..419ba1da139 100644
--- a/resources/scripts/components/admin/servers/settings/partials/general/DeleteServerCard.tsx
+++ b/resources/scripts/components/admin/servers/settings/partials/general/DeleteServerCard.tsx
@@ -1,24 +1,30 @@
+import { AdminServerContext } from '@/state/admin/server'
+import { useFlashKey } from '@/util/useFlash'
+import { zodResolver } from '@hookform/resolvers/zod'
+import { FormikProvider, useFormik } from 'formik'
+import { FormEvent, useState } from 'react'
+import { FormProvider, useForm } from 'react-hook-form'
+import { useTranslation } from 'react-i18next'
+import { z } from 'zod'
+
 import deleteServer from '@/api/admin/servers/deleteServer'
+
 import Button from '@/components/elements/Button'
 import FlashMessageRender from '@/components/elements/FlashMessageRenderer'
 import FormCard from '@/components/elements/FormCard'
 import MessageBox from '@/components/elements/MessageBox'
-import { AdminServerContext } from '@/state/admin/server'
-import { useFlashKey } from '@/util/useFlash'
-import { FormikProvider, useFormik } from 'formik'
+import Modal from '@/components/elements/Modal'
 import CheckboxFormik from '@/components/elements/formik/CheckboxFormik'
-import { z } from 'zod'
-import { FormProvider, useForm } from 'react-hook-form'
-import { zodResolver } from '@hookform/resolvers/zod'
 import CheckboxForm from '@/components/elements/forms/CheckboxForm'
-import { useTranslation } from 'react-i18next'
-import { FormEvent, useState } from 'react'
-import Modal from '@/components/elements/Modal'
 
 const DeleteServerCard = () => {
     const server = AdminServerContext.useStoreState(state => state.server.data!)
-    const setServer = AdminServerContext.useStoreActions(actions => actions.server.setServer)
-    const { clearFlashes, clearAndAddHttpError } = useFlashKey(`admin.servers.${server.uuid}.settings.general.delete`)
+    const setServer = AdminServerContext.useStoreActions(
+        actions => actions.server.setServer
+    )
+    const { clearFlashes, clearAndAddHttpError } = useFlashKey(
+        `admin.servers.${server.uuid}.settings.general.delete`
+    )
     const { t: tStrings } = useTranslation('strings')
     const { t } = useTranslation('admin.servers.settings')
     const [showConfirmation, setShowConfirmation] = useState(false)
@@ -59,11 +65,17 @@ const DeleteServerCard = () => {
                 <FormProvider {...form}>
                     <form onSubmit={triggerConfirmation}>
                         <FormCard.Body>
-                            <FormCard.Title>{t('deletion.title')}</FormCard.Title>
+                            <FormCard.Title>
+                                {t('deletion.title')}
+                            </FormCard.Title>
                             <div className='space-y-3 mt-3'>
-                                <FlashMessageRender byKey={`admin.servers.${server.uuid}.settings.general.delete`} />
+                                <FlashMessageRender
+                                    byKey={`admin.servers.${server.uuid}.settings.general.delete`}
+                                />
 
-                                <p className='description-small !text-foreground'>{t('deletion.description')}</p>
+                                <p className='description-small !text-foreground'>
+                                    {t('deletion.description')}
+                                </p>
                                 {server.status === 'deleting' && (
                                     <MessageBox title='Warning' type='warning'>
                                         {t('deletion.deleting_status')}
@@ -72,7 +84,10 @@ const DeleteServerCard = () => {
 
                                 <CheckboxForm
                                     name={'noPurge'}
-                                    label={t('deletion.no_purge') ?? 'Do not purge VM and related files'}
+                                    label={
+                                        t('deletion.no_purge') ??
+                                        'Do not purge VM and related files'
+                                    }
                                 />
                             </div>
                         </FormCard.Body>
@@ -92,7 +107,10 @@ const DeleteServerCard = () => {
                 </FormProvider>
             </FormCard>
 
-            <Modal open={showConfirmation} onClose={() => setShowConfirmation(false)}>
+            <Modal
+                open={showConfirmation}
+                onClose={() => setShowConfirmation(false)}
+            >
                 <Modal.Header>
                     <Modal.Title>
                         {t('deletion.confirmation.title', {
@@ -108,7 +126,10 @@ const DeleteServerCard = () => {
                     </Modal.Description>
                 </Modal.Body>
                 <Modal.Actions>
-                    <Modal.Action type='button' onClick={() => setShowConfirmation(false)}>
+                    <Modal.Action
+                        type='button'
+                        onClick={() => setShowConfirmation(false)}
+                    >
                         {tStrings('cancel')}
                     </Modal.Action>
                     <Modal.Action
diff --git a/resources/scripts/components/admin/servers/settings/partials/general/ServerInformationCard.tsx b/resources/scripts/components/admin/servers/settings/partials/general/ServerInformationCard.tsx
index 6fb7af0a362..3485385848e 100644
--- a/resources/scripts/components/admin/servers/settings/partials/general/ServerInformationCard.tsx
+++ b/resources/scripts/components/admin/servers/settings/partials/general/ServerInformationCard.tsx
@@ -1,25 +1,32 @@
-import FormCard from '@/components/elements/FormCard'
-import FlashMessageRender from '@/components/elements/FlashMessageRenderer'
-import UsersSelectForm from '@/components/admin/servers/UsersSelectForm'
-import NodesSelectForm from '@/components/admin/servers/NodesSelectForm'
-import Button from '@/components/elements/Button'
 import { AdminServerContext } from '@/state/admin/server'
 import { useFlashKey } from '@/util/useFlash'
-import updateServer from '@/api/admin/servers/updateServer'
-import { EloquentStatus } from '@/api/server/types'
-import { z } from 'zod'
 import { hostname } from '@/util/validation'
-import { FormProvider, useForm } from 'react-hook-form'
 import { zodResolver } from '@hookform/resolvers/zod'
 import React from 'react'
+import { FormProvider, useForm } from 'react-hook-form'
 import { useTranslation } from 'react-i18next'
-import TextInputForm from '@/components/elements/forms/TextInputForm'
+import { z } from 'zod'
+
+import updateServer from '@/api/admin/servers/updateServer'
+import { EloquentStatus } from '@/api/server/types'
+
+import Button from '@/components/elements/Button'
+import FlashMessageRender from '@/components/elements/FlashMessageRenderer'
+import FormCard from '@/components/elements/FormCard'
 import SelectForm from '@/components/elements/forms/SelectForm'
+import TextInputForm from '@/components/elements/forms/TextInputForm'
+
+import NodesSelectForm from '@/components/admin/servers/NodesSelectForm'
+import UsersSelectForm from '@/components/admin/servers/UsersSelectForm'
 
 const ServerInformationCard = () => {
     const server = AdminServerContext.useStoreState(state => state.server.data!)
-    const setServer = AdminServerContext.useStoreActions(actions => actions.server.setServer)
-    const { clearFlashes, clearAndAddHttpError } = useFlashKey(`admin.servers.${server.uuid}.settings.general.info`)
+    const setServer = AdminServerContext.useStoreActions(
+        actions => actions.server.setServer
+    )
+    const { clearFlashes, clearAndAddHttpError } = useFlashKey(
+        `admin.servers.${server.uuid}.settings.general.info`
+    )
     const { t: tStrings } = useTranslation('strings')
     const { t } = useTranslation('admin.servers.settings')
 
@@ -76,10 +83,19 @@ const ServerInformationCard = () => {
     const statusTypes = [
         { value: 'ready', label: t('server_info.statuses.ready') },
         { value: 'installing', label: t('server_info.statuses.installing') },
-        { value: 'install_failed', label: t('server_info.statuses.install_failed') },
+        {
+            value: 'install_failed',
+            label: t('server_info.statuses.install_failed'),
+        },
         { value: 'suspended', label: t('server_info.statuses.suspended') },
-        { value: 'restoring_backup', label: t('server_info.statuses.restoring_backup') },
-        { value: 'restoring_snapshot', label: t('server_info.statuses.restoring_snapshot') },
+        {
+            value: 'restoring_backup',
+            label: t('server_info.statuses.restoring_backup'),
+        },
+        {
+            value: 'restoring_snapshot',
+            label: t('server_info.statuses.restoring_snapshot'),
+        },
     ]
 
     return (
@@ -87,15 +103,29 @@ const ServerInformationCard = () => {
             <FormProvider {...form}>
                 <form onSubmit={form.handleSubmit(submit)}>
                     <FormCard.Body>
-                        <FormCard.Title>{t('server_info.title')}</FormCard.Title>
+                        <FormCard.Title>
+                            {t('server_info.title')}
+                        </FormCard.Title>
                         <div className='space-y-3 mt-3'>
-                            <FlashMessageRender byKey={`admin.servers.${server.uuid}.settings.general.info`} />
-                            <TextInputForm name='name' label={tStrings('display_name')} />
-                            <TextInputForm name='hostname' label={tStrings('hostname')} />
+                            <FlashMessageRender
+                                byKey={`admin.servers.${server.uuid}.settings.general.info`}
+                            />
+                            <TextInputForm
+                                name='name'
+                                label={tStrings('display_name')}
+                            />
+                            <TextInputForm
+                                name='hostname'
+                                label={tStrings('hostname')}
+                            />
                             <TextInputForm name='vmid' label='VMID' />
                             <UsersSelectForm />
                             <NodesSelectForm />
-                            <SelectForm name={'status'} data={statusTypes} label={tStrings('status')} />
+                            <SelectForm
+                                name={'status'}
+                                data={statusTypes}
+                                label={tStrings('status')}
+                            />
                         </div>
                     </FormCard.Body>
                     <FormCard.Footer>
diff --git a/resources/scripts/components/admin/servers/settings/partials/general/ServerSuspensionCard.tsx b/resources/scripts/components/admin/servers/settings/partials/general/ServerSuspensionCard.tsx
index 8879acbda31..94e9433c579 100644
--- a/resources/scripts/components/admin/servers/settings/partials/general/ServerSuspensionCard.tsx
+++ b/resources/scripts/components/admin/servers/settings/partials/general/ServerSuspensionCard.tsx
@@ -1,17 +1,21 @@
-import FormCard from '@/components/elements/FormCard'
-import FlashMessageRender from '@/components/elements/FlashMessageRenderer'
-import Button from '@/components/elements/Button'
-import MessageBox from '@/components/elements/MessageBox'
 import { AdminServerContext } from '@/state/admin/server'
 import { useFlashKey } from '@/util/useFlash'
-import unsuspendServer from '@/api/admin/servers/unsuspendServer'
-import suspendServer from '@/api/admin/servers/suspendServer'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 
+import suspendServer from '@/api/admin/servers/suspendServer'
+import unsuspendServer from '@/api/admin/servers/unsuspendServer'
+
+import Button from '@/components/elements/Button'
+import FlashMessageRender from '@/components/elements/FlashMessageRenderer'
+import FormCard from '@/components/elements/FormCard'
+import MessageBox from '@/components/elements/MessageBox'
+
 const ServerSuspensionCard = () => {
     const server = AdminServerContext.useStoreState(state => state.server.data!)
-    const setServer = AdminServerContext.useStoreActions(actions => actions.server.setServer)
+    const setServer = AdminServerContext.useStoreActions(
+        actions => actions.server.setServer
+    )
     const { clearFlashes, clearAndAddHttpError } = useFlashKey(
         `admin.servers.${server.uuid}.settings.general.suspension`
     )
@@ -47,12 +51,18 @@ const ServerSuspensionCard = () => {
             <FormCard.Body>
                 <FormCard.Title>{t('suspension.title')}</FormCard.Title>
                 <div className='space-y-3 mt-3'>
-                    <FlashMessageRender byKey={`admin.servers.${server.uuid}.settings.general.suspension`} />
-                    <p className='description-small !text-foreground'>{t('suspension.description')}</p>
+                    <FlashMessageRender
+                        byKey={`admin.servers.${server.uuid}.settings.general.suspension`}
+                    />
+                    <p className='description-small !text-foreground'>
+                        {t('suspension.description')}
+                    </p>
 
                     <MessageBox
                         title={tStrings('status') ?? 'Status'}
-                        type={server.status === 'suspended' ? 'error' : 'success'}
+                        type={
+                            server.status === 'suspended' ? 'error' : 'success'
+                        }
                     >
                         {server.status === 'suspended'
                             ? t('suspension.statuses.suspended')
@@ -61,8 +71,16 @@ const ServerSuspensionCard = () => {
                 </div>
             </FormCard.Body>
             <FormCard.Footer>
-                <Button loading={loading} onClick={handle} variant='filled' color='success' size='sm'>
-                    {server.status === 'suspended' ? t('suspension.unsuspend') : t('suspension.suspend')}
+                <Button
+                    loading={loading}
+                    onClick={handle}
+                    variant='filled'
+                    color='success'
+                    size='sm'
+                >
+                    {server.status === 'suspended'
+                        ? t('suspension.unsuspend')
+                        : t('suspension.suspend')}
                 </Button>
             </FormCard.Footer>
         </FormCard>
diff --git a/resources/scripts/components/admin/servers/settings/partials/hardware/ServerBuildSettingsCard.tsx b/resources/scripts/components/admin/servers/settings/partials/hardware/ServerBuildSettingsCard.tsx
index 008abba528e..8efea532757 100644
--- a/resources/scripts/components/admin/servers/settings/partials/hardware/ServerBuildSettingsCard.tsx
+++ b/resources/scripts/components/admin/servers/settings/partials/hardware/ServerBuildSettingsCard.tsx
@@ -1,31 +1,42 @@
-import FormCard from '@/components/elements/FormCard'
-import { FormikProvider, useFormik } from 'formik'
-import FlashMessageRender from '@/components/elements/FlashMessageRenderer'
-import TextInputFormik from '@/components/elements/formik/TextInputFormik'
-import UsersSelectForm from '@/components/admin/servers/UsersSelectForm'
-import NodesSelectForm from '@/components/admin/servers/NodesSelectForm'
-import SelectFormik from '@/components/elements/formik/SelectFormik'
-import Button from '@/components/elements/Button'
-import FormSection from '@/components/elements/FormSection'
 import { AdminServerContext } from '@/state/admin/server'
 import { useFlashKey } from '@/util/useFlash'
-import updateServer from '@/api/admin/servers/updateServer'
-import { EloquentStatus } from '@/api/server/types'
-import updateBuild from '@/api/admin/servers/updateBuild'
-import * as yup from 'yup'
+import {
+    englishKeyboardCharacters,
+    hostname,
+    password,
+} from '@/util/validation'
+import { zodResolver } from '@hookform/resolvers/zod'
+import { FormikProvider, useFormik } from 'formik'
 import { useMemo } from 'react'
-import AddressesMultiSelectForm from '@/components/admin/servers/AddressesMultiSelectForm'
-import { z } from 'zod'
-import { englishKeyboardCharacters, hostname, password } from '@/util/validation'
 import { FormProvider, useForm } from 'react-hook-form'
-import { zodResolver } from '@hookform/resolvers/zod'
 import { useTranslation } from 'react-i18next'
+import * as yup from 'yup'
+import { z } from 'zod'
+
+import updateBuild from '@/api/admin/servers/updateBuild'
+import updateServer from '@/api/admin/servers/updateServer'
+import { EloquentStatus } from '@/api/server/types'
+
+import Button from '@/components/elements/Button'
+import FlashMessageRender from '@/components/elements/FlashMessageRenderer'
+import FormCard from '@/components/elements/FormCard'
+import FormSection from '@/components/elements/FormSection'
+import SelectFormik from '@/components/elements/formik/SelectFormik'
+import TextInputFormik from '@/components/elements/formik/TextInputFormik'
 import TextInputForm from '@/components/elements/forms/TextInputForm'
 
+import AddressesMultiSelectForm from '@/components/admin/servers/AddressesMultiSelectForm'
+import NodesSelectForm from '@/components/admin/servers/NodesSelectForm'
+import UsersSelectForm from '@/components/admin/servers/UsersSelectForm'
+
 const ServerBuildSettingsCard = () => {
     const server = AdminServerContext.useStoreState(state => state.server.data!)
-    const setServer = AdminServerContext.useStoreActions(actions => actions.server.setServer)
-    const { clearFlashes, clearAndAddHttpError } = useFlashKey(`admin.servers.${server.uuid}.settings.hardware.build`)
+    const setServer = AdminServerContext.useStoreActions(
+        actions => actions.server.setServer
+    )
+    const { clearFlashes, clearAndAddHttpError } = useFlashKey(
+        `admin.servers.${server.uuid}.settings.hardware.build`
+    )
     const { t: tStrings } = useTranslation('strings')
     const { t } = useTranslation('admin.servers.settings')
     const { t: tIndex } = useTranslation('admin.servers.index')
@@ -40,9 +51,18 @@ const ServerBuildSettingsCard = () => {
         memory: z.preprocess(Number, z.number().min(16)),
         disk: z.preprocess(Number, z.number().min(1)),
         addressIds: z.array(z.preprocess(Number, z.number())),
-        snapshotLimit: z.union([z.literal(''), z.preprocess(Number, z.number().min(0))]),
-        backupLimit: z.union([z.literal(''), z.preprocess(Number, z.number().min(0))]),
-        bandwidthLimit: z.union([z.literal(''), z.preprocess(Number, z.number().min(0))]),
+        snapshotLimit: z.union([
+            z.literal(''),
+            z.preprocess(Number, z.number().min(0)),
+        ]),
+        backupLimit: z.union([
+            z.literal(''),
+            z.preprocess(Number, z.number().min(0)),
+        ]),
+        bandwidthLimit: z.union([
+            z.literal(''),
+            z.preprocess(Number, z.number().min(0)),
+        ]),
         bandwidthUsage: z.preprocess(Number, z.number().min(0)),
     })
 
@@ -55,15 +75,23 @@ const ServerBuildSettingsCard = () => {
             addressIds: pluckedAddressIds,
             snapshotLimit: server.limits.snapshots?.toString() ?? '',
             backupLimit: server.limits.backups?.toString() ?? '',
-            bandwidthLimit: server.limits.bandwidth ? (server.limits.bandwidth / 1048576).toString() : '',
+            bandwidthLimit: server.limits.bandwidth
+                ? (server.limits.bandwidth / 1048576).toString()
+                : '',
             bandwidthUsage: (server.usages.bandwidth / 1048576).toString(),
         },
     })
 
     const submit = async (_data: any) => {
-        const { memory, disk, snapshotLimit, backupLimit, bandwidthLimit, bandwidthUsage, ...data } = _data as z.infer<
-            typeof schema
-        >
+        const {
+            memory,
+            disk,
+            snapshotLimit,
+            backupLimit,
+            bandwidthLimit,
+            bandwidthUsage,
+            ...data
+        } = _data as z.infer<typeof schema>
         clearFlashes()
 
         try {
@@ -72,7 +100,8 @@ const ServerBuildSettingsCard = () => {
                 disk: disk * 1048576,
                 snapshotLimit: snapshotLimit !== '' ? snapshotLimit : null,
                 backupLimit: backupLimit !== '' ? backupLimit : null,
-                bandwidthLimit: bandwidthLimit !== '' ? bandwidthLimit * 1048576 : null,
+                bandwidthLimit:
+                    bandwidthLimit !== '' ? bandwidthLimit * 1048576 : null,
                 bandwidthUsage: bandwidthUsage * 1048576,
                 ...data,
             })
@@ -86,7 +115,8 @@ const ServerBuildSettingsCard = () => {
                 addressIds: data.addressIds.map(id => id.toString()),
                 snapshotLimit: snapshotLimit.toString() ?? '',
                 backupLimit: backupLimit.toString() ?? '',
-                bandwidthLimit: bandwidthLimit !== '' ? bandwidthLimit.toString() : '',
+                bandwidthLimit:
+                    bandwidthLimit !== '' ? bandwidthLimit.toString() : '',
                 bandwidthUsage: bandwidthUsage.toString(),
             })
         } catch (error) {
@@ -101,10 +131,18 @@ const ServerBuildSettingsCard = () => {
                     <FormCard.Body>
                         <FormCard.Title>{t('build.title')}</FormCard.Title>
                         <div className='space-y-3 mt-3'>
-                            <FlashMessageRender byKey={`admin.servers.${server.uuid}.settings.hardware.build`} />
+                            <FlashMessageRender
+                                byKey={`admin.servers.${server.uuid}.settings.hardware.build`}
+                            />
                             <TextInputForm name='cpu' label={tStrings('cpu')} />
-                            <TextInputForm name='memory' label={`${tStrings('memory')} (MiB)`} />
-                            <TextInputForm name='disk' label={`${tStrings('disk')} (MiB)`} />
+                            <TextInputForm
+                                name='memory'
+                                label={`${tStrings('memory')} (MiB)`}
+                            />
+                            <TextInputForm
+                                name='disk'
+                                label={`${tStrings('disk')} (MiB)`}
+                            />
                             <AddressesMultiSelectForm nodeId={server.nodeId} />
                             <TextInputForm
                                 name='snapshotLimit'
@@ -119,9 +157,15 @@ const ServerBuildSettingsCard = () => {
                             <TextInputForm
                                 name='bandwidthLimit'
                                 label={`${tIndex('bandwidth_limit')} (MiB)`}
-                                placeholder={tIndex('limit_placeholder') ?? 'Leave blank for no limit'}
+                                placeholder={
+                                    tIndex('limit_placeholder') ??
+                                    'Leave blank for no limit'
+                                }
+                            />
+                            <TextInputForm
+                                name='bandwidthUsage'
+                                label={`${tIndex('bandwidth_usage')} (MiB)`}
                             />
-                            <TextInputForm name='bandwidthUsage' label={`${tIndex('bandwidth_usage')} (MiB)`} />
                         </div>
                     </FormCard.Body>
                     <FormCard.Footer>
diff --git a/resources/scripts/components/admin/tokens/CreateTokenButton.tsx b/resources/scripts/components/admin/tokens/CreateTokenButton.tsx
index 35cfc9ea008..f7d7bbc68ca 100644
--- a/resources/scripts/components/admin/tokens/CreateTokenButton.tsx
+++ b/resources/scripts/components/admin/tokens/CreateTokenButton.tsx
@@ -1,26 +1,31 @@
-import { useState } from 'react'
-import usePagination from '@/util/usePagination'
 import { useFlashKey } from '@/util/useFlash'
-import useUsersSWR from '@/api/admin/users/useUsersSWR'
+import usePagination from '@/util/usePagination'
 import { FormikProvider, useFormik } from 'formik'
+import { useState } from 'react'
 import * as yup from 'yup'
-import createUser from '@/api/admin/users/createUser'
-import { UserResponse } from '@/api/admin/users/getUsers'
-import useTokensSWR from '@/api/admin/tokens/useTokensSWR'
+
 import createToken from '@/api/admin/tokens/createToken'
 import { Token, TokenResponse } from '@/api/admin/tokens/getTokens'
+import useTokensSWR from '@/api/admin/tokens/useTokensSWR'
+import createUser from '@/api/admin/users/createUser'
+import { UserResponse } from '@/api/admin/users/getUsers'
+import useUsersSWR from '@/api/admin/users/useUsersSWR'
+
 import Button from '@/components/elements/Button'
-import Modal from '@/components/elements/Modal'
 import FlashMessageRender from '@/components/elements/FlashMessageRenderer'
-import TextInputFormik from '@/components/elements/formik/TextInputFormik'
-import CheckboxFormik from '@/components/elements/formik/CheckboxFormik'
 import MessageBox from '@/components/elements/MessageBox'
+import Modal from '@/components/elements/Modal'
+import CheckboxFormik from '@/components/elements/formik/CheckboxFormik'
+import TextInputFormik from '@/components/elements/formik/TextInputFormik'
+
 import PlainTextTokenModal from '@/components/admin/tokens/PlainTextTokenModal'
 
 const CreateTokenButton = () => {
     const [open, setOpen] = useState(false)
     const [page] = usePagination()
-    const { clearFlashes, clearAndAddHttpError } = useFlashKey('admin:tokens.create')
+    const { clearFlashes, clearAndAddHttpError } = useFlashKey(
+        'admin:tokens.create'
+    )
     const { mutate } = useTokensSWR({ page })
     const [token, setToken] = useState<Token | null>(null)
 
@@ -29,7 +34,10 @@ const CreateTokenButton = () => {
             name: '',
         },
         validationSchema: yup.object({
-            name: yup.string().max(191, 'Do not exceed 191 characters').required('A name is required.'),
+            name: yup
+                .string()
+                .max(191, 'Do not exceed 191 characters')
+                .required('A name is required.'),
         }),
         onSubmit: async values => {
             clearFlashes()
@@ -74,14 +82,20 @@ const CreateTokenButton = () => {
                 <FormikProvider value={form}>
                     <form onSubmit={form.handleSubmit}>
                         <Modal.Body>
-                            <FlashMessageRender className='mb-5' byKey={'admin:tokens.create'} />
+                            <FlashMessageRender
+                                className='mb-5'
+                                byKey={'admin:tokens.create'}
+                            />
                             <TextInputFormik name={'name'} label={'Name'} />
                         </Modal.Body>
                         <Modal.Actions>
                             <Modal.Action type='button' onClick={handleClose}>
                                 Cancel
                             </Modal.Action>
-                            <Modal.Action type='submit' loading={form.isSubmitting}>
+                            <Modal.Action
+                                type='submit'
+                                loading={form.isSubmitting}
+                            >
                                 Create
                             </Modal.Action>
                         </Modal.Actions>
diff --git a/resources/scripts/components/admin/tokens/PlainTextTokenModal.tsx b/resources/scripts/components/admin/tokens/PlainTextTokenModal.tsx
index 4e6d4ae1929..2bdc1e2f39d 100644
--- a/resources/scripts/components/admin/tokens/PlainTextTokenModal.tsx
+++ b/resources/scripts/components/admin/tokens/PlainTextTokenModal.tsx
@@ -1,9 +1,11 @@
-import Modal from '@/components/elements/Modal'
+import { Code } from '@mantine/core'
 import { FormikProvider } from 'formik'
+
+import { Token } from '@/api/admin/tokens/getTokens'
+
 import FlashMessageRender from '@/components/elements/FlashMessageRenderer'
+import Modal from '@/components/elements/Modal'
 import TextInputFormik from '@/components/elements/formik/TextInputFormik'
-import { Code } from '@mantine/core'
-import { Token } from '@/api/admin/tokens/getTokens'
 
 interface Props {
     value: Token | null
@@ -19,8 +21,9 @@ const PlainTextTokenModal = ({ value, onClose }: Props) => {
 
             <Modal.Body>
                 <Modal.Description>
-                    Here is your newly created API token. Please take note of the token's value as this is the only and
-                    last time you will see it.
+                    Here is your newly created API token. Please take note of
+                    the token's value as this is the only and last time you will
+                    see it.
                 </Modal.Description>
 
                 <Code className={'!mt-3'} block color={'blue'}>
diff --git a/resources/scripts/components/admin/tokens/TokensContainer.tsx b/resources/scripts/components/admin/tokens/TokensContainer.tsx
index 43b6bc5b3a8..2a4655bcbbf 100644
--- a/resources/scripts/components/admin/tokens/TokensContainer.tsx
+++ b/resources/scripts/components/admin/tokens/TokensContainer.tsx
@@ -1,21 +1,28 @@
-import PageContentBlock from '@/components/elements/PageContentBlock'
-import Table, { Actions, ColumnArray, RowActionsProps } from '@/components/elements/displays/Table'
-import { Token } from '@/api/admin/tokens/getTokens'
-import { formatDistanceToNow } from 'date-fns'
+import useFlash, { useFlashKey } from '@/util/useFlash'
 import usePagination from '@/util/usePagination'
-import useTokensSWR from '@/api/admin/tokens/useTokensSWR'
-import Spinner from '@/components/elements/Spinner'
-import Pagination from '@/components/elements/Pagination'
+import { Code } from '@mantine/core'
+import { formatDistanceToNow } from 'date-fns'
+import { useState } from 'react'
 import { Link } from 'react-router-dom'
-import CreateTokenButton from '@/components/admin/tokens/CreateTokenButton'
-import { Node, NodeResponse } from '@/api/admin/nodes/getNodes'
+
 import deleteNode from '@/api/admin/nodes/deleteNode'
-import Menu from '@/components/elements/Menu'
-import useFlash, { useFlashKey } from '@/util/useFlash'
-import { useState } from 'react'
+import { Node, NodeResponse } from '@/api/admin/nodes/getNodes'
 import deleteToken from '@/api/admin/tokens/deleteToken'
+import { Token } from '@/api/admin/tokens/getTokens'
+import useTokensSWR from '@/api/admin/tokens/useTokensSWR'
+
+import Menu from '@/components/elements/Menu'
 import Modal from '@/components/elements/Modal'
-import { Code } from '@mantine/core'
+import PageContentBlock from '@/components/elements/PageContentBlock'
+import Pagination from '@/components/elements/Pagination'
+import Spinner from '@/components/elements/Spinner'
+import Table, {
+    Actions,
+    ColumnArray,
+    RowActionsProps,
+} from '@/components/elements/displays/Table'
+
+import CreateTokenButton from '@/components/admin/tokens/CreateTokenButton'
 
 const columns: ColumnArray<Token> = [
     {
@@ -26,7 +33,10 @@ const columns: ColumnArray<Token> = [
         accessor: 'user',
         header: 'Owner',
         cell: ({ value }) => (
-            <Link to={`/admin/users/${value.id}/settings`} className='link text-foreground'>
+            <Link
+                to={`/admin/users/${value.id}/settings`}
+                className='link text-foreground'
+            >
                 {value.email}
             </Link>
         ),
@@ -62,7 +72,9 @@ const TokensContainer = () => {
 
                         return {
                             ...data,
-                            items: data.items.filter(tokenum => tokenum.id !== token.id),
+                            items: data.items.filter(
+                                tokenum => tokenum.id !== token.id
+                            ),
                         }
                     })
                 })
@@ -80,13 +92,18 @@ const TokensContainer = () => {
 
                     <Modal.Body>
                         <Modal.Description>
-                            Are you sure you want to delete this token? Subsequent requests to the API relying on this
-                            token will immediately fail.
+                            Are you sure you want to delete this token?
+                            Subsequent requests to the API relying on this token
+                            will immediately fail.
                         </Modal.Description>
                     </Modal.Body>
                     <Modal.Actions>
-                        <Modal.Action onClick={() => setOpen(false)}>Cancel</Modal.Action>
-                        <Modal.Action onClick={handleDelete}>Delete</Modal.Action>
+                        <Modal.Action onClick={() => setOpen(false)}>
+                            Cancel
+                        </Modal.Action>
+                        <Modal.Action onClick={handleDelete}>
+                            Delete
+                        </Modal.Action>
                     </Modal.Actions>
                 </Modal>
                 <Actions>
@@ -106,7 +123,13 @@ const TokensContainer = () => {
                     <Spinner />
                 ) : (
                     <Pagination data={data} onPageSelect={setPage}>
-                        {({ items }) => <Table rowActions={rowActions} columns={columns} data={items} />}
+                        {({ items }) => (
+                            <Table
+                                rowActions={rowActions}
+                                columns={columns}
+                                data={items}
+                            />
+                        )}
                     </Pagination>
                 )}
             </PageContentBlock>
diff --git a/resources/scripts/components/admin/users/CreateUserModal.tsx b/resources/scripts/components/admin/users/CreateUserModal.tsx
index a3aeb506a99..133b2a30878 100644
--- a/resources/scripts/components/admin/users/CreateUserModal.tsx
+++ b/resources/scripts/components/admin/users/CreateUserModal.tsx
@@ -1,19 +1,21 @@
-import Button from '@/components/elements/Button'
-import FlashMessageRender from '@/components/elements/FlashMessageRenderer'
-import CheckboxFormik from '@/components/elements/formik/CheckboxFormik'
-import TextInputFormik from '@/components/elements/formik/TextInputFormik'
-import Modal from '@/components/elements/Modal'
 import { useFlashKey } from '@/util/useFlash'
 import usePagination from '@/util/usePagination'
+import { PlusIcon } from '@heroicons/react/20/solid'
 import { FormikProvider, useFormik } from 'formik'
 import { useState } from 'react'
 import * as yup from 'yup'
-import MessageBox from '@/components/elements/MessageBox'
-import createUser from '@/api/admin/users/createUser'
+
 import { ServerResponse } from '@/api/admin/servers/getServers'
-import useUsersSWR from '@/api/admin/users/useUsersSWR'
+import createUser from '@/api/admin/users/createUser'
 import { UserResponse } from '@/api/admin/users/getUsers'
-import { PlusIcon } from '@heroicons/react/20/solid'
+import useUsersSWR from '@/api/admin/users/useUsersSWR'
+
+import Button from '@/components/elements/Button'
+import FlashMessageRender from '@/components/elements/FlashMessageRenderer'
+import MessageBox from '@/components/elements/MessageBox'
+import Modal from '@/components/elements/Modal'
+import CheckboxFormik from '@/components/elements/formik/CheckboxFormik'
+import TextInputFormik from '@/components/elements/formik/TextInputFormik'
 
 interface Props {
     open: boolean
@@ -22,7 +24,8 @@ interface Props {
 
 const CreateUserButton = ({ open, onClose }: Props) => {
     const [page] = usePagination()
-    const { clearFlashes, clearAndAddHttpError } = useFlashKey('admin:users.create')
+    const { clearFlashes, clearAndAddHttpError } =
+        useFlashKey('admin:users.create')
     const { mutate } = useUsersSWR({ page })
 
     const form = useFormik({
@@ -33,8 +36,14 @@ const CreateUserButton = ({ open, onClose }: Props) => {
             rootAdmin: false,
         },
         validationSchema: yup.object({
-            name: yup.string().max(191, 'Do not exceed 191 characters').required('A name is required.'),
-            email: yup.string().email('Enter a valid email address').required('An email address is required.'),
+            name: yup
+                .string()
+                .max(191, 'Do not exceed 191 characters')
+                .required('A name is required.'),
+            email: yup
+                .string()
+                .email('Enter a valid email address')
+                .required('An email address is required.'),
             password: yup
                 .string()
                 .matches(
@@ -81,14 +90,26 @@ const CreateUserButton = ({ open, onClose }: Props) => {
                 <FormikProvider value={form}>
                     <form onSubmit={form.handleSubmit}>
                         <Modal.Body>
-                            <FlashMessageRender className='mb-5' byKey={'admin:users.create'} />
+                            <FlashMessageRender
+                                className='mb-5'
+                                byKey={'admin:users.create'}
+                            />
                             <TextInputFormik name={'name'} label={'Name'} />
                             <TextInputFormik name={'email'} label={'Email'} />
-                            <TextInputFormik name={'password'} label={'Password'} type={'password'} />
-                            <CheckboxFormik name={'rootAdmin'} label={'Administrator'} className={'mt-3 relative'} />
+                            <TextInputFormik
+                                name={'password'}
+                                label={'Password'}
+                                type={'password'}
+                            />
+                            <CheckboxFormik
+                                name={'rootAdmin'}
+                                label={'Administrator'}
+                                className={'mt-3 relative'}
+                            />
                             {form.values.rootAdmin && (
                                 <MessageBox type={'warning'} title={'Warning'}>
-                                    You are giving this user administrator privileges
+                                    You are giving this user administrator
+                                    privileges
                                 </MessageBox>
                             )}
                         </Modal.Body>
@@ -96,7 +117,10 @@ const CreateUserButton = ({ open, onClose }: Props) => {
                             <Modal.Action type='button' onClick={handleClose}>
                                 Cancel
                             </Modal.Action>
-                            <Modal.Action type='submit' loading={form.isSubmitting}>
+                            <Modal.Action
+                                type='submit'
+                                loading={form.isSubmitting}
+                            >
                                 Create
                             </Modal.Action>
                         </Modal.Actions>
diff --git a/resources/scripts/components/admin/users/UserContentBlock.tsx b/resources/scripts/components/admin/users/UserContentBlock.tsx
index af86cd6239d..81091cc290d 100644
--- a/resources/scripts/components/admin/users/UserContentBlock.tsx
+++ b/resources/scripts/components/admin/users/UserContentBlock.tsx
@@ -1,5 +1,9 @@
 import useUserSWR from '@/api/admin/users/useUserSWR'
-import PageContentBlock, { PageContentBlockProps } from '@/components/elements/PageContentBlock'
+
+import PageContentBlock, {
+    PageContentBlockProps,
+} from '@/components/elements/PageContentBlock'
+
 interface Props extends PageContentBlockProps {
     title: string
 }
diff --git a/resources/scripts/components/admin/users/UsersContainer.tsx b/resources/scripts/components/admin/users/UsersContainer.tsx
index 662b59dea35..fa4bd1c6b0c 100644
--- a/resources/scripts/components/admin/users/UsersContainer.tsx
+++ b/resources/scripts/components/admin/users/UsersContainer.tsx
@@ -1,24 +1,30 @@
-import { User } from '@/api/admin/users/getUsers'
-import useUsersSWR from '@/api/admin/users/useUsersSWR'
-import SearchBar from '@/components/admin/SearchBar'
-import CreateUserModal from '@/components/admin/users/CreateUserModal'
-import Table, { ColumnArray } from '@/components/elements/displays/Table'
-import TextInput from '@/components/elements/inputs/TextInput'
-import PageContentBlock from '@/components/elements/PageContentBlock'
-import Pagination from '@/components/elements/Pagination'
-import Spinner from '@/components/elements/Spinner'
 import usePagination from '@/util/usePagination'
 import { CheckIcon, MagnifyingGlassIcon } from '@heroicons/react/20/solid'
 import { useDebouncedValue } from '@mantine/hooks'
 import { useState } from 'react'
 import { Link } from 'react-router-dom'
 
+import { User } from '@/api/admin/users/getUsers'
+import useUsersSWR from '@/api/admin/users/useUsersSWR'
+
+import PageContentBlock from '@/components/elements/PageContentBlock'
+import Pagination from '@/components/elements/Pagination'
+import Spinner from '@/components/elements/Spinner'
+import Table, { ColumnArray } from '@/components/elements/displays/Table'
+import TextInput from '@/components/elements/inputs/TextInput'
+
+import SearchBar from '@/components/admin/SearchBar'
+import CreateUserModal from '@/components/admin/users/CreateUserModal'
+
 const columns: ColumnArray<User> = [
     {
         accessor: 'name',
         header: 'Name',
         cell: ({ value, row }) => (
-            <Link to={`/admin/users/${row.id}/settings`} className='link text-foreground'>
+            <Link
+                to={`/admin/users/${row.id}/settings`}
+                className='link text-foreground'
+            >
                 {value}
             </Link>
         ),
@@ -33,7 +39,12 @@ const columns: ColumnArray<User> = [
         align: 'center',
         cell: ({ value }) => (
             <div className='grid place-items-center'>
-                {value ? <CheckIcon title='hidden' className='h-5 w-5 text-foreground' /> : null}
+                {value ? (
+                    <CheckIcon
+                        title='hidden'
+                        className='h-5 w-5 text-foreground'
+                    />
+                ) : null}
             </div>
         ),
     },
@@ -42,7 +53,10 @@ const columns: ColumnArray<User> = [
         header: 'Servers',
         align: 'center',
         cell: ({ value, row }) => (
-            <Link to={`/admin/users/${row.id}/servers`} className='link text-foreground'>
+            <Link
+                to={`/admin/users/${row.id}/servers`}
+                className='link text-foreground'
+            >
                 {value}
             </Link>
         ),
@@ -60,12 +74,19 @@ const UsersContainer = () => {
         <div className='bg-background min-h-screen'>
             <CreateUserModal open={open} onClose={() => setOpen(false)} />
             <PageContentBlock title='Users' showFlashKey='admin:users'>
-                <SearchBar value={query} onChange={e => setQuery(e.target.value)} buttonText='New User' onClick={() => setOpen(true)} />
+                <SearchBar
+                    value={query}
+                    onChange={e => setQuery(e.target.value)}
+                    buttonText='New User'
+                    onClick={() => setOpen(true)}
+                />
                 {!data ? (
                     <Spinner />
                 ) : (
                     <Pagination data={data} onPageSelect={setPage}>
-                        {({ items }) => <Table columns={columns} data={items} />}
+                        {({ items }) => (
+                            <Table columns={columns} data={items} />
+                        )}
                     </Pagination>
                 )}
             </PageContentBlock>
diff --git a/resources/scripts/components/admin/users/servers/UserServersContainer.tsx b/resources/scripts/components/admin/users/servers/UserServersContainer.tsx
index 6dfb174088c..c188135c775 100644
--- a/resources/scripts/components/admin/users/servers/UserServersContainer.tsx
+++ b/resources/scripts/components/admin/users/servers/UserServersContainer.tsx
@@ -1,17 +1,24 @@
-import UserContentBlock from '@/components/admin/users/UserContentBlock'
-import ServersTable from '@/components/admin/servers/ServersTable'
-import Button from '@/components/elements/Button'
 import { useState } from 'react'
-import CreateServerModal from '@/components/admin/servers/CreateServerModal'
+
 import useUserSWR from '@/api/admin/users/useUserSWR'
 
+import Button from '@/components/elements/Button'
+
+import CreateServerModal from '@/components/admin/servers/CreateServerModal'
+import ServersTable from '@/components/admin/servers/ServersTable'
+import UserContentBlock from '@/components/admin/users/UserContentBlock'
+
 const UserServersContainer = () => {
     const { data: user } = useUserSWR()
     const [open, setOpen] = useState(false)
 
     return (
         <div className='bg-background min-h-screen'>
-            <CreateServerModal userId={user.id} open={open} onClose={() => setOpen(false)} />
+            <CreateServerModal
+                userId={user.id}
+                open={open}
+                onClose={() => setOpen(false)}
+            />
             <UserContentBlock title={'Servers'}>
                 <div className='flex justify-end items-center mb-3'>
                     <Button onClick={() => setOpen(true)} variant='filled'>
diff --git a/resources/scripts/components/admin/users/settings/DeleteUserContainer.tsx b/resources/scripts/components/admin/users/settings/DeleteUserContainer.tsx
index cde5d22ae16..eb1922f4372 100644
--- a/resources/scripts/components/admin/users/settings/DeleteUserContainer.tsx
+++ b/resources/scripts/components/admin/users/settings/DeleteUserContainer.tsx
@@ -1,17 +1,21 @@
-import FormCard from '@/components/elements/FormCard'
-import FlashMessageRender from '@/components/elements/FlashMessageRenderer'
-import MessageBox from '@/components/elements/MessageBox'
-import Button from '@/components/elements/Button'
-import { useState } from 'react'
 import { useFlashKey } from '@/util/useFlash'
-import deleteUser from '@/api/admin/users/deleteUser'
+import { useState } from 'react'
 import { useNavigate } from 'react-router-dom'
+
+import deleteUser from '@/api/admin/users/deleteUser'
 import useUserSWR from '@/api/admin/users/useUserSWR'
 
+import Button from '@/components/elements/Button'
+import FlashMessageRender from '@/components/elements/FlashMessageRenderer'
+import FormCard from '@/components/elements/FormCard'
+import MessageBox from '@/components/elements/MessageBox'
+
 const DeleteUserContainer = () => {
     const { data: user } = useUserSWR()
     const [loading, setLoading] = useState(false)
-    const { clearFlashes, clearAndAddHttpError } = useFlashKey('admin:user:settings:delete')
+    const { clearFlashes, clearAndAddHttpError } = useFlashKey(
+        'admin:user:settings:delete'
+    )
     const navigate = useNavigate()
 
     const handleDelete = async () => {
@@ -39,7 +43,8 @@ const DeleteUserContainer = () => {
                     </p>
                     {user.serversCount > 0 ? (
                         <MessageBox title='Error' type='error'>
-                            This user cannot be deleted with servers still associated with it.
+                            This user cannot be deleted with servers still
+                            associated with it.
                         </MessageBox>
                     ) : null}
                 </div>
diff --git a/resources/scripts/components/admin/users/settings/UserInformationContainer.tsx b/resources/scripts/components/admin/users/settings/UserInformationContainer.tsx
index 8400f145d3f..a0a64f2aeb7 100644
--- a/resources/scripts/components/admin/users/settings/UserInformationContainer.tsx
+++ b/resources/scripts/components/admin/users/settings/UserInformationContainer.tsx
@@ -1,17 +1,21 @@
 import { useFlashKey } from '@/util/useFlash'
 import { FormikProvider, useFormik } from 'formik'
 import * as yup from 'yup'
+
 import updateUser from '@/api/admin/users/updateUser'
-import FormCard from '@/components/elements/FormCard'
-import FlashMessageRender from '@/components/elements/FlashMessageRenderer'
-import TextInputFormik from '@/components/elements/formik/TextInputFormik'
+import useUserSWR from '@/api/admin/users/useUserSWR'
+
 import Button from '@/components/elements/Button'
+import FlashMessageRender from '@/components/elements/FlashMessageRenderer'
+import FormCard from '@/components/elements/FormCard'
 import CheckboxFormik from '@/components/elements/formik/CheckboxFormik'
-import useUserSWR from '@/api/admin/users/useUserSWR'
+import TextInputFormik from '@/components/elements/formik/TextInputFormik'
 
 const UserInformationContainer = () => {
     const { data: user, mutate } = useUserSWR()
-    const { clearFlashes, clearAndAddHttpError } = useFlashKey('admin:user:settings:general')
+    const { clearFlashes, clearAndAddHttpError } = useFlashKey(
+        'admin:user:settings:general'
+    )
 
     const form = useFormik({
         enableReinitialize: true,
@@ -22,8 +26,14 @@ const UserInformationContainer = () => {
             rootAdmin: user.rootAdmin,
         },
         validationSchema: yup.object({
-            name: yup.string().max(191, 'Do not exceed 191 characters').required('A name is required.'),
-            email: yup.string().email('Enter a valid email address').required('An email address is required.'),
+            name: yup
+                .string()
+                .max(191, 'Do not exceed 191 characters')
+                .required('A name is required.'),
+            email: yup
+                .string()
+                .email('Enter a valid email address')
+                .required('An email address is required.'),
             password: yup
                 .string()
                 .matches(
@@ -58,8 +68,16 @@ const UserInformationContainer = () => {
                             <FlashMessageRender byKey='admin:user:settings:general' />
                             <TextInputFormik name='name' label='Name' />
                             <TextInputFormik name='email' label='Email' />
-                            <TextInputFormik name='password' label='Password' placeholder={'Override password'} />
-                            <CheckboxFormik name={'rootAdmin'} label={'Administrator'} className={'mt-3'} />
+                            <TextInputFormik
+                                name='password'
+                                label='Password'
+                                placeholder={'Override password'}
+                            />
+                            <CheckboxFormik
+                                name={'rootAdmin'}
+                                label={'Administrator'}
+                                className={'mt-3'}
+                            />
                         </div>
                     </FormCard.Body>
                     <FormCard.Footer>
diff --git a/resources/scripts/components/admin/users/settings/UserSettingsContainer.tsx b/resources/scripts/components/admin/users/settings/UserSettingsContainer.tsx
index 2a564c88195..3f340cc0b45 100644
--- a/resources/scripts/components/admin/users/settings/UserSettingsContainer.tsx
+++ b/resources/scripts/components/admin/users/settings/UserSettingsContainer.tsx
@@ -1,19 +1,28 @@
-import ServerContentBlock from '@/components/admin/servers/ServerContentBlock';
-import UserContentBlock from '@/components/admin/users/UserContentBlock';
-import SettingsLayout from '@/components/elements/layouts/SettingsLayout';
+import SettingsLayout from '@/components/elements/layouts/SettingsLayout'
+
+import ServerContentBlock from '@/components/admin/servers/ServerContentBlock'
+import UserContentBlock from '@/components/admin/users/UserContentBlock'
 
 const UserSettingsContainer = () => {
-    return <SettingsLayout
-    indexPattern='/admin/users/:id/settings'
-    defaultUrl='/admin/users/:id/settings/general'
-    contentBlock={(props) => <UserContentBlock title='Server Settings' showFlashKey='admin:user:settings' {...props}/>}
-    routes={[
-        {
-            path: '/admin/users/:id/settings/general',
-            name: 'General'
-        },
-    ]}
-/>
+    return (
+        <SettingsLayout
+            indexPattern='/admin/users/:id/settings'
+            defaultUrl='/admin/users/:id/settings/general'
+            contentBlock={props => (
+                <UserContentBlock
+                    title='Server Settings'
+                    showFlashKey='admin:user:settings'
+                    {...props}
+                />
+            )}
+            routes={[
+                {
+                    path: '/admin/users/:id/settings/general',
+                    name: 'General',
+                },
+            ]}
+        />
+    )
 }
 
-export default UserSettingsContainer;
\ No newline at end of file
+export default UserSettingsContainer
diff --git a/resources/scripts/components/auth/LoginContainer.tsx b/resources/scripts/components/auth/LoginContainer.tsx
index 00c77843368..999b32a7465 100644
--- a/resources/scripts/components/auth/LoginContainer.tsx
+++ b/resources/scripts/components/auth/LoginContainer.tsx
@@ -1,16 +1,19 @@
-import login from '@/api/auth/login'
-import LoginFormContainer from '@/components/auth/LoginFormContainer'
 import { useFlashKey } from '@/util/useFlash'
+import { zodResolver } from '@hookform/resolvers/zod'
 import { useEffect } from 'react'
-import Button from '@/components/elements/Button'
-import { useLocation } from 'react-router-dom'
-import { useTranslation } from 'react-i18next'
 import { FormProvider, useForm } from 'react-hook-form'
+import { useTranslation } from 'react-i18next'
+import { useLocation } from 'react-router-dom'
 import { z } from 'zod'
-import { zodResolver } from '@hookform/resolvers/zod'
-import TextInputForm from '@/components/elements/forms/TextInputForm'
 import { zodI18nMap } from 'zod-i18n-map'
 
+import login from '@/api/auth/login'
+
+import Button from '@/components/elements/Button'
+import TextInputForm from '@/components/elements/forms/TextInputForm'
+
+import LoginFormContainer from '@/components/auth/LoginFormContainer'
+
 const LoginContainer = () => {
     const { t: tAuth } = useTranslation('auth')
     const { t: tStrings } = useTranslation('strings')
diff --git a/resources/scripts/components/auth/LoginFormContainer.tsx b/resources/scripts/components/auth/LoginFormContainer.tsx
index 95aa3baa64d..bfbebbe30e7 100644
--- a/resources/scripts/components/auth/LoginFormContainer.tsx
+++ b/resources/scripts/components/auth/LoginFormContainer.tsx
@@ -1,7 +1,8 @@
 import { useStoreActions, useStoreState } from '@/state'
-import { LoadingOverlay, Switch } from '@mantine/core'
 import { MoonIcon, SunIcon } from '@heroicons/react/20/solid'
+import { LoadingOverlay, Switch } from '@mantine/core'
 import { ReactNode } from 'react'
+
 import FlashMessageRender from '@/components/elements/FlashMessageRenderer'
 
 interface Props {
@@ -11,17 +12,27 @@ interface Props {
     submitting?: boolean
 }
 
-const LoginFormContainer = ({ title, description, children, submitting }: Props) => {
+const LoginFormContainer = ({
+    title,
+    description,
+    children,
+    submitting,
+}: Props) => {
     const theme = useStoreState(state => state.settings.data!.theme)
     const setTheme = useStoreActions(actions => actions.settings.setTheme)
 
     return (
         <div className='min-h-screen flex flex-col sm:justify-center items-center pt-6 sm:pt-0 bg-accent-100'>
             <div className='w-full sm:max-w-md'>
-                <FlashMessageRender key={'auth:sign_in'} className='px-6 sm:px-0 mb-3' />
+                <FlashMessageRender
+                    key={'auth:sign_in'}
+                    className='px-6 sm:px-0 mb-3'
+                />
                 <div className='p-6 sm:bg-background sm:shadow-md overflow-hidden sm:rounded-md relative'>
                     <LoadingOverlay visible={submitting || false} />
-                    <h1 className='text-3xl font-bold text-foreground'>{title}</h1>
+                    <h1 className='text-3xl font-bold text-foreground'>
+                        {title}
+                    </h1>
                     <p className='description'>{description}</p>
                     <div className='mt-3'>{children}</div>
                 </div>
@@ -35,7 +46,9 @@ const LoginFormContainer = ({ title, description, children, submitting }: Props)
                     <Switch
                         size='md'
                         checked={theme === 'dark'}
-                        onChange={() => setTheme(theme === 'light' ? 'dark' : 'light')}
+                        onChange={() =>
+                            setTheme(theme === 'light' ? 'dark' : 'light')
+                        }
                         onLabel={<MoonIcon className='w-4 h-4' />}
                         offLabel={<SunIcon className='w-4 h-4 text-black' />}
                     />
diff --git a/resources/scripts/components/dashboard/DashboardContainer.tsx b/resources/scripts/components/dashboard/DashboardContainer.tsx
index 07e90a9554e..be32b3c1852 100644
--- a/resources/scripts/components/dashboard/DashboardContainer.tsx
+++ b/resources/scripts/components/dashboard/DashboardContainer.tsx
@@ -1,14 +1,16 @@
-import ServersContainer from '@/components/dashboard/ServersContainer'
+import styled from '@emotion/styled'
+import { Loader } from '@mantine/core'
+import tw from 'twin.macro'
+
 import Button from '@/components/elements/Button'
-import Entity from '@/components/elements/displays/Entity'
-import EntityField from '@/components/elements/displays/EntityField'
-import EntityGroup from '@/components/elements/displays/EntityGroup'
 import Logo from '@/components/elements/Logo'
 import LogoOutline from '@/components/elements/LogoOutline'
 import PageContentBlock from '@/components/elements/PageContentBlock'
-import styled from '@emotion/styled'
-import { Loader } from '@mantine/core'
-import tw from 'twin.macro'
+import Entity from '@/components/elements/displays/Entity'
+import EntityField from '@/components/elements/displays/EntityField'
+import EntityGroup from '@/components/elements/displays/EntityGroup'
+
+import ServersContainer from '@/components/dashboard/ServersContainer'
 
 const DashboardContainer = () => {
     return (
diff --git a/resources/scripts/components/dashboard/ServerCard.tsx b/resources/scripts/components/dashboard/ServerCard.tsx
index e9e8529bc7d..005071a1289 100644
--- a/resources/scripts/components/dashboard/ServerCard.tsx
+++ b/resources/scripts/components/dashboard/ServerCard.tsx
@@ -1,11 +1,12 @@
-import { ServerBuild } from '@/api/server/getServer'
 import { formatBytes, getInitials } from '@/util/helpers'
 import styled from '@emotion/styled'
 import { Avatar, Badge } from '@mantine/core'
 import { useMemo } from 'react'
+import { useTranslation } from 'react-i18next'
 import { Link } from 'react-router-dom'
 import tw from 'twin.macro'
-import { useTranslation } from 'react-i18next'
+
+import { ServerBuild } from '@/api/server/getServer'
 
 interface Props {
     server: ServerBuild
@@ -36,7 +37,9 @@ const ServerCard = ({ server }: Props) => {
                 </Avatar>
                 <div className='overflow-hidden'>
                     <div className='flex items-center space-x-3'>
-                        <p className='font-medium text-foreground truncate'>{server.name}</p>{' '}
+                        <p className='font-medium text-foreground truncate'>
+                            {server.name}
+                        </p>{' '}
                         {server.status === 'suspended' && (
                             <Badge color='orange' radius='sm'>
                                 {tStrings('suspended')}
diff --git a/resources/scripts/components/dashboard/ServersContainer.tsx b/resources/scripts/components/dashboard/ServersContainer.tsx
index b7f63450867..74669555455 100644
--- a/resources/scripts/components/dashboard/ServersContainer.tsx
+++ b/resources/scripts/components/dashboard/ServersContainer.tsx
@@ -1,36 +1,51 @@
-import getServers from '@/api/getServers'
-import ServerCard from '@/components/dashboard/ServerCard'
-import Pagination from '@/components/elements/Pagination'
 import { useStoreState } from '@/state'
 import { usePersistedState } from '@/util/usePersistedState'
 import { MagnifyingGlassIcon } from '@heroicons/react/20/solid'
 import { Skeleton, Switch } from '@mantine/core'
+import { useDebouncedValue } from '@mantine/hooks'
 import { useEffect, useState } from 'react'
+import { useTranslation } from 'react-i18next'
 import { useLocation } from 'react-router-dom'
 import useSWR from 'swr'
+
+import getServers from '@/api/getServers'
+
+import Pagination from '@/components/elements/Pagination'
 import TextInput from '@/components/elements/inputs/TextInput'
-import { useDebouncedValue } from '@mantine/hooks'
-import { useTranslation } from 'react-i18next'
+
+import ServerCard from '@/components/dashboard/ServerCard'
 
 const ServerContainer = () => {
     const { t } = useTranslation('dashboard.index')
     const { t: tStrings } = useTranslation('strings')
     const { search: location } = useLocation()
     const defaultPage = Number(new URLSearchParams(location).get('page') || '1')
-    const [page, setPage] = useState(!isNaN(defaultPage) && defaultPage > 0 ? defaultPage : 1)
+    const [page, setPage] = useState(
+        !isNaN(defaultPage) && defaultPage > 0 ? defaultPage : 1
+    )
     const [query, setQuery] = useState('')
     const [debouncedQuery] = useDebouncedValue(query, 200)
 
     const uuid = useStoreState(state => state.user.data!.email)
     const rootAdmin = useStoreState(state => state.user.data!.rootAdmin)
-    const [showOnlyAdmin, setShowOnlyAdmin] = usePersistedState(`${uuid}:show_all_servers`, false)
-    const { data } = useSWR(['/api/client/servers', showOnlyAdmin && rootAdmin, page, debouncedQuery], () =>
-        getServers({
-            query: debouncedQuery,
+    const [showOnlyAdmin, setShowOnlyAdmin] = usePersistedState(
+        `${uuid}:show_all_servers`,
+        false
+    )
+    const { data } = useSWR(
+        [
+            '/api/client/servers',
+            showOnlyAdmin && rootAdmin,
             page,
-            type: showOnlyAdmin && rootAdmin ? 'all' : undefined,
-            perPage: 51,
-        })
+            debouncedQuery,
+        ],
+        () =>
+            getServers({
+                query: debouncedQuery,
+                page,
+                type: showOnlyAdmin && rootAdmin ? 'all' : undefined,
+                perPage: 51,
+            })
     )
 
     useEffect(() => {
@@ -42,11 +57,16 @@ const ServerContainer = () => {
             {rootAdmin && (
                 <div className='flex space-x-3 justify-end mb-3'>
                     <p className='description-small'>{t('show_all_servers')}</p>
-                    <Switch checked={showOnlyAdmin} onChange={() => setShowOnlyAdmin(!showOnlyAdmin)} />
+                    <Switch
+                        checked={showOnlyAdmin}
+                        onChange={() => setShowOnlyAdmin(!showOnlyAdmin)}
+                    />
                 </div>
             )}
             <TextInput
-                icon={<MagnifyingGlassIcon className='text-accent-400 w-4 h-4' />}
+                icon={
+                    <MagnifyingGlassIcon className='text-accent-400 w-4 h-4' />
+                }
                 value={query}
                 onChange={e => setQuery(e.currentTarget.value)}
                 placeholder={`${tStrings('search')}...`}
@@ -60,14 +80,19 @@ const ServerContainer = () => {
                     </div>
                 ) : data.pagination.total === 0 ? (
                     <p className='text-sm text-center'>
-                        {showOnlyAdmin ? t('no_servers_admin_empty_state') : t('no_servers_empty_state')}
+                        {showOnlyAdmin
+                            ? t('no_servers_admin_empty_state')
+                            : t('no_servers_empty_state')}
                     </p>
                 ) : (
                     <Pagination data={data} onPageSelect={setPage}>
                         {({ items }) => (
                             <div className='grid sm:grid-cols-2 lg:grid-cols-3 gap-6'>
                                 {items.map(server => (
-                                    <ServerCard key={server.uuid} server={server} />
+                                    <ServerCard
+                                        key={server.uuid}
+                                        server={server}
+                                    />
                                 ))}
                             </div>
                         )}
diff --git a/resources/scripts/components/elements/Breadcrumbs.tsx b/resources/scripts/components/elements/Breadcrumbs.tsx
index 46ac0b3ef5c..72947bd462c 100644
--- a/resources/scripts/components/elements/Breadcrumbs.tsx
+++ b/resources/scripts/components/elements/Breadcrumbs.tsx
@@ -1,15 +1,15 @@
+import { Handle } from '@/routers/router'
+import styled from '@emotion/styled'
+import { ChevronRightIcon } from '@heroicons/react/20/solid'
 import {
-    Breadcrumbs as MantineBreadcrumbs,
-    BreadcrumbsProps as MantineBreadcrumbsProps,
     Anchor as MantineAnchor,
     AnchorProps as MantineAnchorProps,
+    Breadcrumbs as MantineBreadcrumbs,
+    BreadcrumbsProps as MantineBreadcrumbsProps,
 } from '@mantine/core'
 import { ComponentProps, FC } from 'react'
-import styled from '@emotion/styled'
-import tw from 'twin.macro'
 import { Link, LinkProps, useMatches } from 'react-router-dom'
-import { ChevronRightIcon } from '@heroicons/react/20/solid'
-import { Handle } from '@/routers/router'
+import tw from 'twin.macro'
 
 export type BreadcrumbsProps = MantineBreadcrumbsProps
 
@@ -31,7 +31,10 @@ const StyledBreadcrumbs = styled(MantineBreadcrumbs)`
 `
 
 const Breadcrumbs: Breadcrumbs = props => (
-    <StyledBreadcrumbs separator={<ChevronRightIcon className={'w-4 h-4 text-accent-500'} />} {...props} />
+    <StyledBreadcrumbs
+        separator={<ChevronRightIcon className={'w-4 h-4 text-accent-500'} />}
+        {...props}
+    />
 )
 
 const Crumb = styled(Link)<CrumbProps>`
diff --git a/resources/scripts/components/elements/Button.tsx b/resources/scripts/components/elements/Button.tsx
index d0dda70afab..b6e78ab64f2 100644
--- a/resources/scripts/components/elements/Button.tsx
+++ b/resources/scripts/components/elements/Button.tsx
@@ -1,9 +1,10 @@
-import LoadingDots from '@/components/elements/LoadingDots'
 import { css } from '@emotion/react'
 import styled from '@emotion/styled'
 import { ComponentProps, ElementType } from 'react'
 import tw from 'twin.macro'
 
+import LoadingDots from '@/components/elements/LoadingDots'
+
 export type ButtonSize = 'sm'
 export type ButtonShape = 'square'
 export type ButtonVariant = 'outline' | 'filled'
@@ -85,9 +86,11 @@ const StyledButton = styled.button<ButtonProps>`
 
     ${props => getSizes(props)}
 
-  ${({ variant = 'outline', color = 'accent' }) => getBorderStyles(variant, color)}
+  ${({ variant = 'outline', color = 'accent' }) =>
+        getBorderStyles(variant, color)}
 
-  ${({ variant = 'outline', color = 'accent' }) => getBackgroundStyles(variant, color)}
+  ${({ variant = 'outline', color = 'accent' }) =>
+        getBackgroundStyles(variant, color)}
 `
 
 const Button = ({ loading, disabled, ...props }: ButtonProps) => {
@@ -98,7 +101,9 @@ const Button = ({ loading, disabled, ...props }: ButtonProps) => {
                     <LoadingDots size={5} />
                 </div>
             ) : null}
-            <span className={loading ? 'invisible' : undefined}>{props.children}</span>
+            <span className={loading ? 'invisible' : undefined}>
+                {props.children}
+            </span>
         </StyledButton>
     )
 }
diff --git a/resources/scripts/components/elements/Card.tsx b/resources/scripts/components/elements/Card.tsx
index 02af52d4043..3e11a896aef 100644
--- a/resources/scripts/components/elements/Card.tsx
+++ b/resources/scripts/components/elements/Card.tsx
@@ -1,4 +1,3 @@
-
 import styled from '@emotion/styled'
 import tw from 'twin.macro'
 
@@ -7,9 +6,9 @@ interface Props {
 }
 
 const Card = styled.div<Props>`
-${tw`border border-[#eaeaea] dark:border-[#333333] bg-white dark:bg-black rounded shadow-light dark:shadow-none`}
+    ${tw`border border-[#eaeaea] dark:border-[#333333] bg-white dark:bg-black rounded shadow-light dark:shadow-none`}
 
-${props => !props.overridePadding && tw`p-6`}
+    ${props => !props.overridePadding && tw`p-6`}
 `
 
-export default Card
\ No newline at end of file
+export default Card
diff --git a/resources/scripts/components/elements/ContentContainer.tsx b/resources/scripts/components/elements/ContentContainer.tsx
index 37143879fff..fb6ffb6bde1 100644
--- a/resources/scripts/components/elements/ContentContainer.tsx
+++ b/resources/scripts/components/elements/ContentContainer.tsx
@@ -2,13 +2,13 @@ import styled from '@emotion/styled'
 import tw from 'twin.macro'
 
 interface Props {
-  padding?: boolean
+    padding?: boolean
 }
 
 const ContentContainer = styled.div<Props>`
-  ${tw`max-w-7xl mx-auto px-4 sm:px-6 lg:px-8`}
+    ${tw`max-w-7xl mx-auto px-4 sm:px-6 lg:px-8`}
 
-  ${({ padding }) => (padding ? tw`py-6` : '')}
+    ${({ padding }) => (padding ? tw`py-6` : '')}
 `
 
-export default ContentContainer
\ No newline at end of file
+export default ContentContainer
diff --git a/resources/scripts/components/elements/DescriptiveItemComponent.tsx b/resources/scripts/components/elements/DescriptiveItemComponent.tsx
index 4a188070676..e5e888ed88d 100644
--- a/resources/scripts/components/elements/DescriptiveItemComponent.tsx
+++ b/resources/scripts/components/elements/DescriptiveItemComponent.tsx
@@ -1,9 +1,10 @@
-import { ComponentPropsWithoutRef, forwardRef } from 'react'
 import styled from '@emotion/styled'
-import tw from 'twin.macro'
 import { CheckIcon } from '@heroicons/react/20/solid'
+import { ComponentPropsWithoutRef, forwardRef } from 'react'
+import tw from 'twin.macro'
 
-interface DescriptiveItemComponentProps extends ComponentPropsWithoutRef<'div'> {
+interface DescriptiveItemComponentProps
+    extends ComponentPropsWithoutRef<'div'> {
     label: string
     description: string
 }
@@ -32,16 +33,20 @@ const StyledDescriptiveItemComponentProps = styled.div`
     }
 `
 
-const DescriptiveItemComponent = forwardRef<HTMLDivElement, DescriptiveItemComponentProps>(
-    ({ label, description, className, ...props }, ref) => (
-        <StyledDescriptiveItemComponentProps ref={ref} {...props}>
-            <div>
-                <p className='select-item-label'>{label}</p>
-                <p className='select-item-description'>{description}</p>
-            </div>
-            <CheckIcon className='h-4 w-4 text-foreground select-item-icon' title='checked' />
-        </StyledDescriptiveItemComponentProps>
-    )
-)
-
-export default DescriptiveItemComponent
\ No newline at end of file
+const DescriptiveItemComponent = forwardRef<
+    HTMLDivElement,
+    DescriptiveItemComponentProps
+>(({ label, description, className, ...props }, ref) => (
+    <StyledDescriptiveItemComponentProps ref={ref} {...props}>
+        <div>
+            <p className='select-item-label'>{label}</p>
+            <p className='select-item-description'>{description}</p>
+        </div>
+        <CheckIcon
+            className='h-4 w-4 text-foreground select-item-icon'
+            title='checked'
+        />
+    </StyledDescriptiveItemComponentProps>
+))
+
+export default DescriptiveItemComponent
diff --git a/resources/scripts/components/elements/DottedButton.tsx b/resources/scripts/components/elements/DottedButton.tsx
index 8c69d143a39..5ac1bf8ed49 100644
--- a/resources/scripts/components/elements/DottedButton.tsx
+++ b/resources/scripts/components/elements/DottedButton.tsx
@@ -1,14 +1,19 @@
-import { ComponentProps, forwardRef } from 'react'
 import { EllipsisVerticalIcon } from '@heroicons/react/24/outline'
+import { ComponentProps, forwardRef } from 'react'
 
-const DottedButton = forwardRef<HTMLButtonElement, Omit<ComponentProps<'button'>, 'children'>>(
-    ({ className, ...props }, ref) => {
-        return (
-            <button ref={ref} className={`px-2 bg-transparent ${className}`} {...props}>
-                <EllipsisVerticalIcon className='w-5 h-5 min-w-[1rem] text-foreground' />
-            </button>
-        )
-    }
-)
+const DottedButton = forwardRef<
+    HTMLButtonElement,
+    Omit<ComponentProps<'button'>, 'children'>
+>(({ className, ...props }, ref) => {
+    return (
+        <button
+            ref={ref}
+            className={`px-2 bg-transparent ${className}`}
+            {...props}
+        >
+            <EllipsisVerticalIcon className='w-5 h-5 min-w-[1rem] text-foreground' />
+        </button>
+    )
+})
 
 export default DottedButton
diff --git a/resources/scripts/components/elements/Drawer.tsx b/resources/scripts/components/elements/Drawer.tsx
index b0df70539c5..9cafee5b6c8 100644
--- a/resources/scripts/components/elements/Drawer.tsx
+++ b/resources/scripts/components/elements/Drawer.tsx
@@ -1,6 +1,6 @@
 // @ts-nocheck
-import { forwardRef, Fragment, ReactNode, useRef } from 'react'
 import { Dialog, Transition } from '@headlessui/react'
+import { Fragment, ReactNode, forwardRef, useRef } from 'react'
 
 interface Props {
     open: boolean
@@ -8,47 +8,58 @@ interface Props {
     children: ReactNode
 }
 
-const Drawer = forwardRef<HTMLDivElement, Props>(({ open, onClose, children }, ref) => {
-    const focusTrapRef = useRef(null)
+const Drawer = forwardRef<HTMLDivElement, Props>(
+    ({ open, onClose, children }, ref) => {
+        const focusTrapRef = useRef(null)
 
-    return (
-        <Transition.Root appear={false} show={open} as={Fragment}>
-            <Dialog as='div' initialFocus={focusTrapRef} className='relative z-[3000]' onClose={onClose}>
-                <Transition.Child
-                    as={Fragment}
-                    enter='ease-in-out duration-500'
-                    enterFrom='opacity-0'
-                    enterTo='opacity-100'
-                    leave='ease-in-out duration-500'
-                    leaveFrom='opacity-100'
-                    leaveTo='opacity-0'
+        return (
+            <Transition.Root appear={false} show={open} as={Fragment}>
+                <Dialog
+                    as='div'
+                    initialFocus={focusTrapRef}
+                    className='relative z-[3000]'
+                    onClose={onClose}
                 >
-                    <div className='fixed inset-0 bg-black bg-opacity-75 transition-opacity' />
-                </Transition.Child>
-                <div className='fixed inset-0 z-10 overflow-hidden'>
-                    <div className='flex min-h-full items-end justify-center sm:items-center p-0'>
-                        <Transition.Child
-                            as={Fragment}
-                            enter='ease-out duration-300'
-                            enterFrom='opacity-0 translate-y-[100vh] sm:-translate-y-[10vh]'
-                            enterTo='opacity-100 translate-y-0'
-                            leave='ease-in duration-200'
-                            leaveFrom='opacity-100 translate-y-0'
-                            leaveTo='opacity-0 translate-y-[100vh] sm:-translate-y-[10vh]'
-                        >
-                            <Dialog.Panel
-                                ref={ref}
-                                className='absolute w-full sm:max-w-lg bg-background rounded-t-lg sm:rounded-lg border-t border-x sm:border-b border-accent-200'
+                    <Transition.Child
+                        as={Fragment}
+                        enter='ease-in-out duration-500'
+                        enterFrom='opacity-0'
+                        enterTo='opacity-100'
+                        leave='ease-in-out duration-500'
+                        leaveFrom='opacity-100'
+                        leaveTo='opacity-0'
+                    >
+                        <div className='fixed inset-0 bg-black bg-opacity-75 transition-opacity' />
+                    </Transition.Child>
+                    <div className='fixed inset-0 z-10 overflow-hidden'>
+                        <div className='flex min-h-full items-end justify-center sm:items-center p-0'>
+                            <Transition.Child
+                                as={Fragment}
+                                enter='ease-out duration-300'
+                                enterFrom='opacity-0 translate-y-[100vh] sm:-translate-y-[10vh]'
+                                enterTo='opacity-100 translate-y-0'
+                                leave='ease-in duration-200'
+                                leaveFrom='opacity-100 translate-y-0'
+                                leaveTo='opacity-0 translate-y-[100vh] sm:-translate-y-[10vh]'
                             >
-                                <input type='hidden' ref={focusTrapRef} autoFocus />
-                                {children}
-                            </Dialog.Panel>
-                        </Transition.Child>
+                                <Dialog.Panel
+                                    ref={ref}
+                                    className='absolute w-full sm:max-w-lg bg-background rounded-t-lg sm:rounded-lg border-t border-x sm:border-b border-accent-200'
+                                >
+                                    <input
+                                        type='hidden'
+                                        ref={focusTrapRef}
+                                        autoFocus
+                                    />
+                                    {children}
+                                </Dialog.Panel>
+                            </Transition.Child>
+                        </div>
                     </div>
-                </div>
-            </Dialog>
-        </Transition.Root>
-    )
-})
+                </Dialog>
+            </Transition.Root>
+        )
+    }
+)
 
 export default Drawer
diff --git a/resources/scripts/components/elements/ErrorMessage.tsx b/resources/scripts/components/elements/ErrorMessage.tsx
index ac7416c05a4..2b67bfa592d 100644
--- a/resources/scripts/components/elements/ErrorMessage.tsx
+++ b/resources/scripts/components/elements/ErrorMessage.tsx
@@ -7,8 +7,9 @@ interface Props {
 
 const ErrorMessage = ({ children }: Props) => (
     <div className='flex space-x-1 mt-2'>
-        <ExclamationCircleIcon className='h-5 w-5 text-error' /> <p className='text-sm text-error'>{children}</p>
+        <ExclamationCircleIcon className='h-5 w-5 text-error' />{' '}
+        <p className='text-sm text-error'>{children}</p>
     </div>
 )
 
-export default ErrorMessage
\ No newline at end of file
+export default ErrorMessage
diff --git a/resources/scripts/components/elements/Fade.tsx b/resources/scripts/components/elements/Fade.tsx
index 4ae5cd9757a..0845aea81c0 100644
--- a/resources/scripts/components/elements/Fade.tsx
+++ b/resources/scripts/components/elements/Fade.tsx
@@ -1,57 +1,57 @@
-import React, { useRef } from 'react'
-import tw from 'twin.macro'
 import styled from '@emotion/styled'
+import React, { useRef } from 'react'
 import CSSTransition, {
-  CSSTransitionProps,
+    CSSTransitionProps,
 } from 'react-transition-group/CSSTransition'
+import tw from 'twin.macro'
 
 interface Props extends Omit<CSSTransitionProps, 'timeout' | 'classNames'> {
-  timeout: number
+    timeout: number
 }
 
 const Container = styled.div<{ timeout: number }>`
-  .fade-enter,
-  .fade-exit,
-  .fade-appear {
-    will-change: opacity;
-  }
-
-  .fade-enter,
-  .fade-appear {
-    ${tw`opacity-0`};
-
-    &.fade-enter-active,
-    &.fade-appear-active {
-      ${tw`opacity-100 transition-opacity ease-in`};
-      transition-duration: ${(props) => props.timeout}ms;
+    .fade-enter,
+    .fade-exit,
+    .fade-appear {
+        will-change: opacity;
+    }
+
+    .fade-enter,
+    .fade-appear {
+        ${tw`opacity-0`};
+
+        &.fade-enter-active,
+        &.fade-appear-active {
+            ${tw`opacity-100 transition-opacity ease-in`};
+            transition-duration: ${props => props.timeout}ms;
+        }
     }
-  }
 
-  .fade-exit {
-    ${tw`opacity-100`};
+    .fade-exit {
+        ${tw`opacity-100`};
 
-    &.fade-exit-active {
-      ${tw`opacity-0 transition-opacity ease-in`};
-      transition-duration: ${(props) => props.timeout}ms;
+        &.fade-exit-active {
+            ${tw`opacity-0 transition-opacity ease-in`};
+            transition-duration: ${props => props.timeout}ms;
+        }
     }
-  }
 `
 
 const Fade: React.FC<Props> = ({ timeout, children, ...props }) => {
-  const ref = useRef(null)
-
-  return (
-    <Container timeout={timeout}>
-      <CSSTransition
-        nodeRef={ref}
-        timeout={timeout}
-        classNames='fade'
-        {...props}
-      >
-        <div ref={ref}>{children}</div>
-      </CSSTransition>
-    </Container>
-  )
+    const ref = useRef(null)
+
+    return (
+        <Container timeout={timeout}>
+            <CSSTransition
+                nodeRef={ref}
+                timeout={timeout}
+                classNames='fade'
+                {...props}
+            >
+                <div ref={ref}>{children}</div>
+            </CSSTransition>
+        </Container>
+    )
 }
 Fade.displayName = 'Fade'
 
diff --git a/resources/scripts/components/elements/FlashMessageRenderer.tsx b/resources/scripts/components/elements/FlashMessageRenderer.tsx
index 1350a46fd5b..e753a55ad35 100644
--- a/resources/scripts/components/elements/FlashMessageRenderer.tsx
+++ b/resources/scripts/components/elements/FlashMessageRenderer.tsx
@@ -1,6 +1,7 @@
+import { useStoreState } from '@/state'
 import React from 'react'
+
 import MessageBox from '@/components/elements/MessageBox'
-import { useStoreState } from '@/state'
 
 type Props = Readonly<{
     byKey?: string
@@ -8,7 +9,11 @@ type Props = Readonly<{
 }>
 
 const FlashMessageRender = ({ byKey, className }: Props) => {
-    const flashes = useStoreState(state => state.flashes.items.filter(flash => (byKey ? flash.key === byKey : true)))
+    const flashes = useStoreState(state =>
+        state.flashes.items.filter(flash =>
+            byKey ? flash.key === byKey : true
+        )
+    )
 
     return flashes.length ? (
         <div className={className}>
diff --git a/resources/scripts/components/elements/FormCard.tsx b/resources/scripts/components/elements/FormCard.tsx
index b0186f3f363..3136a0acd42 100644
--- a/resources/scripts/components/elements/FormCard.tsx
+++ b/resources/scripts/components/elements/FormCard.tsx
@@ -1,31 +1,33 @@
-import { ReactNode } from 'react'
 import styled from '@emotion/styled'
+import { ReactNode } from 'react'
 import tw from 'twin.macro'
 
 interface FormCard
-  extends React.FC<{ children: ReactNode; className?: string }> {
-  Title: React.FC<{ children: ReactNode }>
-  Body: React.FC<{ children: ReactNode }>
-  Footer: React.FC<{ children: ReactNode; className?: string }>
+    extends React.FC<{ children: ReactNode; className?: string }> {
+    Title: React.FC<{ children: ReactNode }>
+    Body: React.FC<{ children: ReactNode }>
+    Footer: React.FC<{ children: ReactNode; className?: string }>
 }
 
 const FormCard: FormCard = ({ children, className }) => {
-  return (
-    <div className={`rounded border border-accent-200 bg-background dark:shadow-none ${className}`}>
-      {children}
-    </div>
-  )
+    return (
+        <div
+            className={`rounded border border-accent-200 bg-background dark:shadow-none ${className}`}
+        >
+            {children}
+        </div>
+    )
 }
 
 FormCard.Title = styled.h4`
-  ${tw`text-foreground text-xl font-semibold`}
+    ${tw`text-foreground text-xl font-semibold`}
 `
 
 FormCard.Body = styled.div`
-  ${tw`p-6 rounded-t bg-background`}
+    ${tw`p-6 rounded-t bg-background`}
 `
 FormCard.Footer = styled.div`
-  ${tw`px-6 py-3 rounded-b border-t border-accent-200 bg-accent-100 flex justify-center md:justify-end`}
+    ${tw`px-6 py-3 rounded-b border-t border-accent-200 bg-accent-100 flex justify-center md:justify-end`}
 `
 
 export default FormCard
diff --git a/resources/scripts/components/elements/FormSection.tsx b/resources/scripts/components/elements/FormSection.tsx
index 9248bac3d85..7829785430f 100644
--- a/resources/scripts/components/elements/FormSection.tsx
+++ b/resources/scripts/components/elements/FormSection.tsx
@@ -15,10 +15,16 @@ const FormSection: FormSection = ({ title, description, children }: Props) => {
         <div>
             <div className='md:grid md:grid-cols-3 md:gap-6'>
                 <div className='md:col-span-1'>
-                    <h3 className='text-lg font-medium leading-6 text-foreground'>{title}</h3>
-                    {description && <p className='mt-1 description-small'>{description}</p>}
+                    <h3 className='text-lg font-medium leading-6 text-foreground'>
+                        {title}
+                    </h3>
+                    {description && (
+                        <p className='mt-1 description-small'>{description}</p>
+                    )}
+                </div>
+                <div className='flex flex-col space-y-8 mt-5 md:col-span-2 md:mt-0'>
+                    {children}
                 </div>
-                <div className='flex flex-col space-y-8 mt-5 md:col-span-2 md:mt-0'>{children}</div>
             </div>
         </div>
     )
diff --git a/resources/scripts/components/elements/LoadingDots.tsx b/resources/scripts/components/elements/LoadingDots.tsx
index 6d491d2ec58..e870cf1ca30 100644
--- a/resources/scripts/components/elements/LoadingDots.tsx
+++ b/resources/scripts/components/elements/LoadingDots.tsx
@@ -1,7 +1,7 @@
-import styled from '@emotion/styled'
 import { keyframes } from '@emotion/react'
-import tw from 'twin.macro'
 import { css } from '@emotion/react'
+import styled from '@emotion/styled'
+import tw from 'twin.macro'
 
 const loadingDotsAnimation = keyframes`
 0% {
@@ -26,7 +26,6 @@ const StyledLoadingDots = styled.span<Props>`
         animation-duration: 1.4s;
         animation-fill-mode: both;
 
-
         ${({ size = 2 }) => `
             width: ${size}px;
             height: ${size}px;
@@ -43,11 +42,13 @@ interface Props {
 }
 
 const LoadingDots = (props: Props) => {
-    return <StyledLoadingDots {...props}>
-        <span />
-        <span style={{animationDelay: '0.2s'}} />
-        <span style={{animationDelay: '0.4s'}} />
-    </StyledLoadingDots>
+    return (
+        <StyledLoadingDots {...props}>
+            <span />
+            <span style={{ animationDelay: '0.2s' }} />
+            <span style={{ animationDelay: '0.4s' }} />
+        </StyledLoadingDots>
+    )
 }
 
-export default LoadingDots
\ No newline at end of file
+export default LoadingDots
diff --git a/resources/scripts/components/elements/Logo.tsx b/resources/scripts/components/elements/Logo.tsx
index 55c44532b40..fa96a4a8abe 100644
--- a/resources/scripts/components/elements/Logo.tsx
+++ b/resources/scripts/components/elements/Logo.tsx
@@ -3,7 +3,12 @@ import { ComponentProps } from 'react'
 // the path is ~2872 long
 const Logo = (props: ComponentProps<'svg'>) => {
     return (
-        <svg xmlns='http://www.w3.org/2000/svg' fill='currentColor' viewBox='0 0 512 512' {...props}>
+        <svg
+            xmlns='http://www.w3.org/2000/svg'
+            fill='currentColor'
+            viewBox='0 0 512 512'
+            {...props}
+        >
             <path d='M381.87,21.81c-17.65,17.24-24.99,40.87-22.01,63.43l-105.77-22.38h0c-13.01-2.59-27.05,1.05-37.2,10.96-16.19,15.82-16.33,41.6-.31,57.58,5.75,5.74,12.81,9.4,20.23,11.05v.03s.98,.21,.98,.21c0,0,.01,0,.02,0l64.88,13.73L104.35,350.22c-24.11-41.1-28.27-90.44-12.56-134.37h-.02c7.92-21.43-3-45.05-24.39-52.76-21.39-7.71-45.16,3.4-53.08,24.82-30.75,85.04-11.93,183.71,56.69,252.18,68.9,68.76,169.15,88.25,255.84,58.27v-.03c21.81-7.47,33.46-30.75,26-51.99-7.46-21.25-31.19-32.42-53.02-24.95h0c-45.04,15.68-95.62,11.23-137.46-13.28l198.17-193.61,13.33,64.75,.23-.05c1.55,7.46,5.22,14.59,11.05,20.41,16.02,15.99,42.13,16.12,58.32,.31,11.29-11.03,14.75-26.9,10.39-40.91l-22.28-108.24c20.74,1.08,41.85-6.15,57.78-21.71,29.99-29.3,30.25-77.06,.57-106.68-29.68-29.61-78.05-29.87-108.04-.57Zm80.98,80.82c-15.21,14.86-39.74,14.73-54.79-.29-15.05-15.02-14.92-39.24,.29-54.11,15.21-14.86,39.74-14.73,54.79,.29,15.05,15.02,14.92,39.24-.29,54.11Z' />
         </svg>
     )
diff --git a/resources/scripts/components/elements/LogoOutline.tsx b/resources/scripts/components/elements/LogoOutline.tsx
index c32ae691dd1..4c14409fec4 100644
--- a/resources/scripts/components/elements/LogoOutline.tsx
+++ b/resources/scripts/components/elements/LogoOutline.tsx
@@ -3,8 +3,17 @@ import { ComponentProps } from 'react'
 // path length is 2751.1416015625
 const LogoOutline = (props: ComponentProps<'svg'>) => {
     return (
-        <svg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' viewBox='0 0 512 512' {...props}>
-            <path strokeLinecap="round"  d='M512,46.86c0-25.88-20.96-46.86-46.82-46.86-23.54,0-43.01,17.39-46.32,40.03l-6.94-1.49-.67-.68-.44,.44L280.03,10.25h0c-14.34-2.89-29.81,1.18-40.99,12.25-17.84,17.67-17.99,46.47-.34,64.33,6.34,6.41,14.11,10.5,22.3,12.34v.04s1.08,.23,1.08,.23c0,0,.01,0,.02,0l71.51,15.34L115,331.27c-26.57-45.91-31.16-101.03-13.84-150.11h-.03c8.73-23.94-3.31-50.33-26.88-58.94-23.58-8.62-49.77,3.8-58.5,27.73C-18.13,244.95,2.61,355.17,78.23,431.67c75.93,76.81,186.42,98.59,281.96,65.1v-.03c24.04-8.34,36.87-34.35,28.66-58.08s-34.38-36.22-58.43-27.88h0c-49.63,17.51-105.38,12.55-151.49-14.84l218.4-216.29,14.69,72.33,.26-.05c1.71,8.34,5.75,16.3,12.18,22.8,17.65,17.86,46.43,18.01,64.27,.34,12.44-12.32,16.25-30.05,11.45-45.71l-25.62-126.19,.64-.64-.97-.98-1.71-8.4c22.38-3.52,39.49-22.9,39.49-46.29Z' />
+        <svg
+            xmlns='http://www.w3.org/2000/svg'
+            fill='none'
+            stroke='currentColor'
+            viewBox='0 0 512 512'
+            {...props}
+        >
+            <path
+                strokeLinecap='round'
+                d='M512,46.86c0-25.88-20.96-46.86-46.82-46.86-23.54,0-43.01,17.39-46.32,40.03l-6.94-1.49-.67-.68-.44,.44L280.03,10.25h0c-14.34-2.89-29.81,1.18-40.99,12.25-17.84,17.67-17.99,46.47-.34,64.33,6.34,6.41,14.11,10.5,22.3,12.34v.04s1.08,.23,1.08,.23c0,0,.01,0,.02,0l71.51,15.34L115,331.27c-26.57-45.91-31.16-101.03-13.84-150.11h-.03c8.73-23.94-3.31-50.33-26.88-58.94-23.58-8.62-49.77,3.8-58.5,27.73C-18.13,244.95,2.61,355.17,78.23,431.67c75.93,76.81,186.42,98.59,281.96,65.1v-.03c24.04-8.34,36.87-34.35,28.66-58.08s-34.38-36.22-58.43-27.88h0c-49.63,17.51-105.38,12.55-151.49-14.84l218.4-216.29,14.69,72.33,.26-.05c1.71,8.34,5.75,16.3,12.18,22.8,17.65,17.86,46.43,18.01,64.27,.34,12.44-12.32,16.25-30.05,11.45-45.71l-25.62-126.19,.64-.64-.97-.98-1.71-8.4c22.38-3.52,39.49-22.9,39.49-46.29Z'
+            />
         </svg>
     )
 }
diff --git a/resources/scripts/components/elements/Menu.tsx b/resources/scripts/components/elements/Menu.tsx
index 3fbd5863a22..f5804fdc95d 100644
--- a/resources/scripts/components/elements/Menu.tsx
+++ b/resources/scripts/components/elements/Menu.tsx
@@ -1,5 +1,10 @@
 import styled from '@emotion/styled'
-import { Menu as MantineMenu, MenuProps, MenuDropdownProps, MenuItemProps } from '@mantine/core'
+import {
+    Menu as MantineMenu,
+    MenuDropdownProps,
+    MenuItemProps,
+    MenuProps,
+} from '@mantine/core'
 import { FC, MouseEventHandler } from 'react'
 import tw from 'twin.macro'
 
diff --git a/resources/scripts/components/elements/MessageBox.tsx b/resources/scripts/components/elements/MessageBox.tsx
index be5e3c20a53..e0730628473 100644
--- a/resources/scripts/components/elements/MessageBox.tsx
+++ b/resources/scripts/components/elements/MessageBox.tsx
@@ -1,6 +1,6 @@
-import tw, { TwStyle } from 'twin.macro'
-import styled from '@emotion/styled'
 import { classNames } from '@/util/helpers'
+import styled from '@emotion/styled'
+import tw, { TwStyle } from 'twin.macro'
 
 export type FlashMessageType = 'success' | 'info' | 'warning' | 'error'
 
@@ -47,7 +47,11 @@ const Container = styled.div<{ $type?: FlashMessageType }>`
 `
 
 const MessageBox = ({ title, children, type, className }: Props) => (
-    <Container className={classNames('lg:inline-flex', className)} $type={type} role={'alert'}>
+    <Container
+        className={classNames('lg:inline-flex', className)}
+        $type={type}
+        role={'alert'}
+    >
         {title && (
             <span
                 className={`title flex rounded uppercase px-2 py-1 text-xs font-bold mr-3 leading-none ${getBackground(
diff --git a/resources/scripts/components/elements/Modal.tsx b/resources/scripts/components/elements/Modal.tsx
index 158f355475d..30fab37e67b 100644
--- a/resources/scripts/components/elements/Modal.tsx
+++ b/resources/scripts/components/elements/Modal.tsx
@@ -1,85 +1,104 @@
+import styled from '@emotion/styled'
 import { Dialog, Transition } from '@headlessui/react'
 import React, { ComponentProps, useRef } from 'react'
 import { Fragment, ReactNode } from 'react'
-import styled from '@emotion/styled'
 import tw from 'twin.macro'
-import LoadingDots from '@/components/elements/LoadingDots'
+
 import Drawer from '@/components/elements/Drawer'
+import LoadingDots from '@/components/elements/LoadingDots'
 
 interface Modal extends React.FC<ModalProps> {
-  Header: React.FC<{
-    children: ReactNode
-  }>
-  Title: React.FC<{
-    children: ReactNode
-  }>
-  Body: React.FC<{
-    children: ReactNode
-  }>
-  Description: React.FC<{
-    children: ReactNode
-    bottomMargin?: boolean
-  }>
-  Actions: React.FC<{
-    children: ReactNode
-  }>
-  Action: React.FC<ComponentProps<'button'> & {
-    loading?: boolean
-  }>
+    Header: React.FC<{
+        children: ReactNode
+    }>
+    Title: React.FC<{
+        children: ReactNode
+    }>
+    Body: React.FC<{
+        children: ReactNode
+    }>
+    Description: React.FC<{
+        children: ReactNode
+        bottomMargin?: boolean
+    }>
+    Actions: React.FC<{
+        children: ReactNode
+    }>
+    Action: React.FC<
+        ComponentProps<'button'> & {
+            loading?: boolean
+        }
+    >
 }
 
 interface ModalProps {
-  open: boolean
-  onClose: () => void
-  children: ReactNode
+    open: boolean
+    onClose: () => void
+    children: ReactNode
 }
 
 const Modal: Modal = ({ open, onClose, children }) => {
-  return <Drawer open={open} onClose={onClose}>{children}</Drawer>
-};
+    return (
+        <Drawer open={open} onClose={onClose}>
+            {children}
+        </Drawer>
+    )
+}
 
 Modal.Header = styled.div`
-  ${tw`p-8 sm:p-6 border-b border-accent-200`}
+    ${tw`p-8 sm:p-6 border-b border-accent-200`}
 `
 
 Modal.Title = styled.h3`
-  ${tw`text-xl font-medium text-foreground text-center`}
+    ${tw`text-xl font-medium text-foreground text-center`}
 `
 
 Modal.Body = styled.div`
-${tw`max-h-[60vh] overflow-y-auto p-6 bg-accent-100`}
+    ${tw`max-h-[60vh] overflow-y-auto p-6 bg-accent-100`}
 `
 
 Modal.Description = ({ children, bottomMargin }) => {
-  return (
-    <Dialog.Description className={`text-accent-600 text-sm ${bottomMargin && 'mb-5'}`}>
-      {children}
-    </Dialog.Description>
-  )
+    return (
+        <Dialog.Description
+            className={`text-accent-600 text-sm ${bottomMargin && 'mb-5'}`}
+        >
+            {children}
+        </Dialog.Description>
+    )
 }
 
 Modal.Actions = styled.div`
-  ${tw`flex border-t border-accent-200`}
+    ${tw`flex border-t border-accent-200`}
 
-  & > button:is(:first-of-type) {
-    ${tw`rounded-bl`}
-  }
+    & > button:is(:first-of-type) {
+        ${tw`rounded-bl`}
+    }
 
-  & > button:not(:last-child) {
-    ${tw`border-r border-accent-200`}
-  }
+    & > button:not(:last-child) {
+        ${tw`border-r border-accent-200`}
+    }
 
-  & > button:is(:last-child) {
-    ${tw`!text-foreground rounded-br`}
-  }
+    & > button:is(:last-child) {
+        ${tw`!text-foreground rounded-br`}
+    }
 `
 
 const StyledAction = styled.button`
-${tw`grow py-6 uppercase text-xs text-accent-500 sm:hover:text-foreground active:text-foreground bg-background sm:hover:bg-accent-100 active:bg-accent-100 disabled:bg-accent-100 disabled:cursor-not-allowed transition-colors`}
+    ${tw`grow py-6 uppercase text-xs text-accent-500 sm:hover:text-foreground active:text-foreground bg-background sm:hover:bg-accent-100 active:bg-accent-100 disabled:bg-accent-100 disabled:cursor-not-allowed transition-colors`}
 `
 
 Modal.Action = ({ loading, disabled, children, ...props }) => {
-  return <StyledAction {...props} disabled={disabled || loading}>{ loading ? <div className='grid place-items-center w-full h-full'><LoadingDots size={4} /></div> : children }</StyledAction>
+    return (
+        <StyledAction {...props} disabled={disabled || loading}>
+            {loading ? (
+                <div className='grid place-items-center w-full h-full'>
+                    <LoadingDots size={4} />
+                </div>
+            ) : (
+                children
+            )}
+        </StyledAction>
+    )
 }
 
 export default Modal
diff --git a/resources/scripts/components/elements/PageContentBlock.tsx b/resources/scripts/components/elements/PageContentBlock.tsx
index d5f10d27fee..51482659c67 100644
--- a/resources/scripts/components/elements/PageContentBlock.tsx
+++ b/resources/scripts/components/elements/PageContentBlock.tsx
@@ -1,64 +1,79 @@
-import ContentContainer from '@/components/elements/ContentContainer'
-import FlashMessageRender from '@/components/elements/FlashMessageRenderer'
 import { useStoreActions, useStoreState } from '@/state'
 import { MoonIcon, SunIcon } from '@heroicons/react/20/solid'
 import { Switch } from '@mantine/core'
 import { ReactNode, useEffect, useRef } from 'react'
 import { CSSTransition } from 'react-transition-group'
 
+import ContentContainer from '@/components/elements/ContentContainer'
+import FlashMessageRender from '@/components/elements/FlashMessageRenderer'
+
 export interface PageContentBlockProps {
-  title?: string
-  className?: string
-  showFlashKey?: string
-  children?: ReactNode
+    title?: string
+    className?: string
+    showFlashKey?: string
+    children?: ReactNode
 }
 
 const PageContentBlock = ({
-  title,
-  showFlashKey,
-  className,
-  children,
+    title,
+    showFlashKey,
+    className,
+    children,
 }: PageContentBlockProps) => {
-  const theme = useStoreState((state) => state.settings.data!.theme)
-  const setTheme = useStoreActions((actions) => actions.settings.setTheme)
-  const ref = useRef(null)
+    const theme = useStoreState(state => state.settings.data!.theme)
+    const setTheme = useStoreActions(actions => actions.settings.setTheme)
+    const ref = useRef(null)
 
-  useEffect(() => {
-    if (title) {
-      document.title = title
-    }
-  }, [title])
+    useEffect(() => {
+        if (title) {
+            document.title = title
+        }
+    }, [title])
 
-  return (
-    <CSSTransition nodeRef={ref} timeout={150} classNames='fade' appear in>
-      <div ref={ref}>
-        <ContentContainer className={`${className} min-h-[75vh]`} padding>
-          {showFlashKey && (
-            <FlashMessageRender byKey={showFlashKey} className='mb-4' />
-          )}
-          {children}
-        </ContentContainer>
-        <ContentContainer>
-          <div className='flex justify-between pb-8'>
-            <p className='text-xs text-stone-500'>
-              &copy; 2020 - {new Date().getFullYear()}{' '}
-              <a className='dark:hover:text-stone-400 hover:text-black' href='https://performave.com' target='_blank'>
-                Performave
-              </a>
-            </p>
+    return (
+        <CSSTransition nodeRef={ref} timeout={150} classNames='fade' appear in>
+            <div ref={ref}>
+                <ContentContainer
+                    className={`${className} min-h-[75vh]`}
+                    padding
+                >
+                    {showFlashKey && (
+                        <FlashMessageRender
+                            byKey={showFlashKey}
+                            className='mb-4'
+                        />
+                    )}
+                    {children}
+                </ContentContainer>
+                <ContentContainer>
+                    <div className='flex justify-between pb-8'>
+                        <p className='text-xs text-stone-500'>
+                            &copy; 2020 - {new Date().getFullYear()}{' '}
+                            <a
+                                className='dark:hover:text-stone-400 hover:text-black'
+                                href='https://performave.com'
+                                target='_blank'
+                            >
+                                Performave
+                            </a>
+                        </p>
 
-            <Switch
-              size='md'
-              checked={theme === 'dark'}
-              onChange={() => setTheme(theme === 'light' ? 'dark' : 'light')}
-              onLabel={<MoonIcon className='w-4 h-4' />}
-              offLabel={<SunIcon className='w-4 h-4 text-black' />}
-            />
-          </div>
-        </ContentContainer>
-      </div>
-    </CSSTransition>
-  )
+                        <Switch
+                            size='md'
+                            checked={theme === 'dark'}
+                            onChange={() =>
+                                setTheme(theme === 'light' ? 'dark' : 'light')
+                            }
+                            onLabel={<MoonIcon className='w-4 h-4' />}
+                            offLabel={
+                                <SunIcon className='w-4 h-4 text-black' />
+                            }
+                        />
+                    </div>
+                </ContentContainer>
+            </div>
+        </CSSTransition>
+    )
 }
 
 export default PageContentBlock
diff --git a/resources/scripts/components/elements/Pagination.tsx b/resources/scripts/components/elements/Pagination.tsx
index fac9268f220..abb3fba2175 100644
--- a/resources/scripts/components/elements/Pagination.tsx
+++ b/resources/scripts/components/elements/Pagination.tsx
@@ -1,69 +1,78 @@
-import { PaginatedResult } from '@/api/http';
-import { ReactNode, useEffect } from 'react';
 import { Pagination as MantinePagination } from '@mantine/core'
+import { ReactNode, useEffect } from 'react'
+
+import { PaginatedResult } from '@/api/http'
 
 interface RenderFuncProps<T> {
-    items: T[];
-    isLastPage: boolean;
-    isFirstPage: boolean;
+    items: T[]
+    isLastPage: boolean
+    isFirstPage: boolean
 }
 
 interface Props<T> {
-    data: PaginatedResult<T>;
-    showGoToLast?: boolean;
-    showGoToFirst?: boolean;
-    onPageSelect: (page: number) => void;
-    children: (props: RenderFuncProps<T>) => ReactNode;
+    data: PaginatedResult<T>
+    showGoToLast?: boolean
+    showGoToFirst?: boolean
+    onPageSelect: (page: number) => void
+    children: (props: RenderFuncProps<T>) => ReactNode
 }
 
-const Pagination = <T,>({ data: { items, pagination }, onPageSelect, children }: Props<T>) => {
-    const isFirstPage = pagination.currentPage === 1;
-    const isLastPage = pagination.currentPage >= pagination.totalPages;
+const Pagination = <T,>({
+    data: { items, pagination },
+    onPageSelect,
+    children,
+}: Props<T>) => {
+    const isFirstPage = pagination.currentPage === 1
+    const isLastPage = pagination.currentPage >= pagination.totalPages
 
-    const pages = [];
+    const pages = []
 
     // Start two spaces before the current page. If that puts us before the starting page default
     // to the first page as the starting point.
-    const start = Math.max(pagination.currentPage - 2, 1);
-    const end = Math.min(pagination.totalPages, pagination.currentPage + 5);
+    const start = Math.max(pagination.currentPage - 2, 1)
+    const end = Math.min(pagination.totalPages, pagination.currentPage + 5)
 
     for (let i = start; i <= end; i++) {
-        pages.push(i);
+        pages.push(i)
     }
 
     useEffect(() => {
         if (pagination.currentPage > pagination.totalPages) {
-            onPageSelect(pagination.totalPages);
+            onPageSelect(pagination.totalPages)
         }
     }, [])
 
     useEffect(() => {
-        const url = new URL(window.location.href);
+        const url = new URL(window.location.href)
 
         // don't add page param if it's the first page
         if (pagination.currentPage === 1) {
             const page = url.searchParams.get('page')
             if (page && parseInt(page) !== 1) {
-                url.searchParams.delete('page');
-                window.history.pushState({}, '', url.toString());
+                url.searchParams.delete('page')
+                window.history.pushState({}, '', url.toString())
             }
-            return;
+            return
         }
 
-        url.searchParams.set('page', pagination.currentPage.toString());
-        window.history.pushState({}, '', url.toString());
-      }, [pagination])
+        url.searchParams.set('page', pagination.currentPage.toString())
+        window.history.pushState({}, '', url.toString())
+    }, [pagination])
 
     return (
         <>
             {children({ items, isFirstPage, isLastPage })}
             {pages.length > 1 && (
                 <div className='flex justify-end mt-3'>
-                    <MantinePagination onChange={onPageSelect} page={pagination.currentPage} total={pagination.totalPages}/>
+                    <MantinePagination
+                        onChange={onPageSelect}
+                        page={pagination.currentPage}
+                        total={pagination.totalPages}
+                    />
                 </div>
             )}
         </>
-    );
+    )
 }
 
-export default Pagination
\ No newline at end of file
+export default Pagination
diff --git a/resources/scripts/components/elements/ScreenBlock.tsx b/resources/scripts/components/elements/ScreenBlock.tsx
index a3b644e3173..728e4d7a409 100644
--- a/resources/scripts/components/elements/ScreenBlock.tsx
+++ b/resources/scripts/components/elements/ScreenBlock.tsx
@@ -1,7 +1,8 @@
-import PageContentBlock from '@/components/elements/PageContentBlock'
+import { ExclamationCircleIcon, LinkIcon } from '@heroicons/react/24/outline'
 import { Button } from '@mantine/core'
 import { ComponentType, ReactNode } from 'react'
-import { ExclamationCircleIcon, LinkIcon } from '@heroicons/react/24/outline'
+
+import PageContentBlock from '@/components/elements/PageContentBlock'
 
 export interface IconProps {
     className?: string
@@ -30,9 +31,23 @@ interface PropsWithBack extends BaseProps {
 
 export type ScreenBlockProps = PropsWithBack | PropsWithRetry
 
-const ScreenBlock = ({ title, icon: Icon, message, center, onBack, onRetry, full, children }: ScreenBlockProps) => {
+const ScreenBlock = ({
+    title,
+    icon: Icon,
+    message,
+    center,
+    onBack,
+    onRetry,
+    full,
+    children,
+}: ScreenBlockProps) => {
     return (
-        <PageContentBlock className={`${full && 'grid place-items-center min-h-screen -mt-10'}`} title={title}>
+        <PageContentBlock
+            className={`${
+                full && 'grid place-items-center min-h-screen -mt-10'
+            }`}
+            title={title}
+        >
             <div
                 className={`w-full sm:max-w-md p-12 md:p-20 bg-white dark:bg-black rounded-md shadow-md text-center ${
                     center && 'mx-auto'
@@ -42,12 +57,18 @@ const ScreenBlock = ({ title, icon: Icon, message, center, onBack, onRetry, full
                     <Icon className='w-16 h-16 border dark:border-stone-600 rounded-md p-3 text-black dark:text-stone-400 mx-auto' />
                 )}
 
-                <h2 className='text-stone-900 dark:text-white font-bold text-4xl mt-6'>{title}</h2>
+                <h2 className='text-stone-900 dark:text-white font-bold text-4xl mt-6'>
+                    {title}
+                </h2>
                 <p className='description-small mt-3'>{message}</p>
                 {children}
                 {(onBack || onRetry) && (
                     <div className='flex justify-center mt-3'>
-                        <Button onClick={() => (onRetry ? onRetry() : onBack ? onBack() : null)}>
+                        <Button
+                            onClick={() =>
+                                onRetry ? onRetry() : onBack ? onBack() : null
+                            }
+                        >
                             {onBack ? 'Go Back' : 'Retry'}
                         </Button>
                     </div>
@@ -57,12 +78,20 @@ const ScreenBlock = ({ title, icon: Icon, message, center, onBack, onRetry, full
     )
 }
 
-type ErrorMessageProps = (Omit<PropsWithBack, 'icon' | 'title'> | Omit<PropsWithRetry, 'icon' | 'title'>) & {
+type ErrorMessageProps = (
+    | Omit<PropsWithBack, 'icon' | 'title'>
+    | Omit<PropsWithRetry, 'icon' | 'title'>
+) & {
     title?: string
 }
 
 export const ErrorMessage = ({ title, ...props }: ErrorMessageProps) => (
-    <ScreenBlock title={title || 'Something went wrong'} center icon={ExclamationCircleIcon} {...props} />
+    <ScreenBlock
+        title={title || 'Something went wrong'}
+        center
+        icon={ExclamationCircleIcon}
+        {...props}
+    />
 )
 
 export const NotFound = ({
@@ -73,7 +102,10 @@ export const NotFound = ({
 }: Partial<Pick<BaseProps, 'title' | 'message' | 'onBack' | 'full'>>) => (
     <ScreenBlock
         title={title || '404'}
-        message={message || "The link is either broken or doesn't exist on the server."}
+        message={
+            message ||
+            "The link is either broken or doesn't exist on the server."
+        }
         icon={LinkIcon}
         full={full}
         onBack={onBack}
diff --git a/resources/scripts/components/elements/SegmentedControl.tsx b/resources/scripts/components/elements/SegmentedControl.tsx
index 3cfcc344415..746d3050dd7 100644
--- a/resources/scripts/components/elements/SegmentedControl.tsx
+++ b/resources/scripts/components/elements/SegmentedControl.tsx
@@ -1,23 +1,23 @@
-import styled from '@emotion/styled';
-import { SegmentedControl as MantineSegmentedControl } from '@mantine/core';
-import tw from 'twin.macro';
+import styled from '@emotion/styled'
+import { SegmentedControl as MantineSegmentedControl } from '@mantine/core'
+import tw from 'twin.macro'
 
 const SegmentedControl = styled(MantineSegmentedControl)`
-&.mantine-SegmentedControl-root {
-    ${tw`bg-background border border-accent-200 rounded`}
-}
+    &.mantine-SegmentedControl-root {
+        ${tw`bg-background border border-accent-200 rounded`}
+    }
 
-& .mantine-SegmentedControl-active {
-    ${tw`bg-accent-200 shadow-none`}
-}
+    & .mantine-SegmentedControl-active {
+        ${tw`bg-accent-200 shadow-none`}
+    }
 
-& .mantine-SegmentedControl-label {
-    ${tw`text-accent-500 hover:text-foreground`}
-}
+    & .mantine-SegmentedControl-label {
+        ${tw`text-accent-500 hover:text-foreground`}
+    }
 
-& .mantine-SegmentedControl-labelActive {
-    ${tw`text-foreground`}
-}
+    & .mantine-SegmentedControl-labelActive {
+        ${tw`text-foreground`}
+    }
 `
 
-export default SegmentedControl
\ No newline at end of file
+export default SegmentedControl
diff --git a/resources/scripts/components/elements/Spinner.tsx b/resources/scripts/components/elements/Spinner.tsx
index 675653b25b9..86f5313c73a 100644
--- a/resources/scripts/components/elements/Spinner.tsx
+++ b/resources/scripts/components/elements/Spinner.tsx
@@ -1,9 +1,10 @@
-import LogoOutline from '@/components/elements/LogoOutline'
 import styled from '@emotion/styled'
 import { Loader } from '@mantine/core'
 import { ReactNode, Suspense } from 'react'
 import tw from 'twin.macro'
 
+import LogoOutline from '@/components/elements/LogoOutline'
+
 interface Props {
     screen?: boolean
     flat?: boolean
@@ -41,16 +42,26 @@ const SpinnerContainer = styled.div`
 
 const Spinner: Spinner = ({ screen, flat }: Props) => {
     return (
-        <div className={`grid place-items-center w-full ${screen ? 'h-screen' : 'h-40'} ${flat && 'dark:bg-black'}`}>
+        <div
+            className={`grid place-items-center w-full ${
+                screen ? 'h-screen' : 'h-40'
+            } ${flat && 'dark:bg-black'}`}
+        >
             <SpinnerContainer>
-                <LogoOutline className='text-foreground' strokeWidth={'25px'} viewBox={'-13 -13 538 538'} />
+                <LogoOutline
+                    className='text-foreground'
+                    strokeWidth={'25px'}
+                    viewBox={'-13 -13 538 538'}
+                />
             </SpinnerContainer>
         </div>
     )
 }
 
 Spinner.Suspense = ({ children, screen }) => {
-    return <Suspense fallback={<Spinner screen={screen} />}>{children}</Suspense>
+    return (
+        <Suspense fallback={<Spinner screen={screen} />}>{children}</Suspense>
+    )
 }
 
 export default Spinner
diff --git a/resources/scripts/components/elements/displays/DisplayRow.tsx b/resources/scripts/components/elements/displays/DisplayRow.tsx
index f46bb5a5727..31366fd59b5 100644
--- a/resources/scripts/components/elements/displays/DisplayRow.tsx
+++ b/resources/scripts/components/elements/displays/DisplayRow.tsx
@@ -2,15 +2,15 @@ import styled from '@emotion/styled'
 import tw from 'twin.macro'
 
 const Row = styled.div`
-  ${tw`flex flex-col md:flex-row p-4 gap-4 bg-background border border-accent-200 rounded`}
+    ${tw`flex flex-col md:flex-row p-4 gap-4 bg-background border border-accent-200 rounded`}
 
-  & > div {
-    ${tw`border-t pt-4 md:pt-0 md:border-t-0 border-accent-200`}
-  }
+    & > div {
+        ${tw`border-t pt-4 md:pt-0 md:border-t-0 border-accent-200`}
+    }
 
-  & > div:is(:first-of-type) {
-    ${tw`border-t-0 pt-0`}
-  }
+    & > div:is(:first-of-type) {
+        ${tw`border-t-0 pt-0`}
+    }
 `
 
 const Group = styled.div`
@@ -35,7 +35,7 @@ const Group = styled.div`
 
 const Display = {
     Row,
-    Group
+    Group,
 }
 
 export default Display
diff --git a/resources/scripts/components/elements/displays/Entity.tsx b/resources/scripts/components/elements/displays/Entity.tsx
index 32dc5040db7..fd7f43e58e9 100644
--- a/resources/scripts/components/elements/displays/Entity.tsx
+++ b/resources/scripts/components/elements/displays/Entity.tsx
@@ -1,5 +1,12 @@
 import styled from '@emotion/styled'
-import { Children, cloneElement, createContext, ReactElement, ReactNode, useMemo } from 'react'
+import {
+    Children,
+    ReactElement,
+    ReactNode,
+    cloneElement,
+    createContext,
+    useMemo,
+} from 'react'
 import tw from 'twin.macro'
 
 interface EntityContextInterface {
@@ -29,7 +36,11 @@ const Entity = ({ loading, children: _children, actions }: Props) => {
               const isFirst = idx === 0
               const isLast = idx === childrenCount - 1
 
-              return cloneElement(child, { isFirst, isLast, actions: isFirst || isLast ? actions : undefined })
+              return cloneElement(child, {
+                  isFirst,
+                  isLast,
+                  actions: isFirst || isLast ? actions : undefined,
+              })
           })
         : null
 
diff --git a/resources/scripts/components/elements/displays/EntityField.tsx b/resources/scripts/components/elements/displays/EntityField.tsx
index 330c84c3591..ba02b4b68d8 100644
--- a/resources/scripts/components/elements/displays/EntityField.tsx
+++ b/resources/scripts/components/elements/displays/EntityField.tsx
@@ -11,16 +11,37 @@ interface Props {
     isLast?: boolean
 }
 
-const EntityField = ({ title, description, width, actions, isFirst, isLast }: Props) => {
+const EntityField = ({
+    title,
+    description,
+    width,
+    actions,
+    isFirst,
+    isLast,
+}: Props) => {
     const style = {
         flex: width ? `0 0 ${width}` : undefined,
     }
 
     return (
-        <div className={classNames('flex max-sm:pt-4 max-sm:border-t border-accent-200', !width ? 'flex-1' : null)} style={style}>
+        <div
+            className={classNames(
+                'flex max-sm:pt-4 max-sm:border-t border-accent-200',
+                !width ? 'flex-1' : null
+            )}
+            style={style}
+        >
             <div className='flex-grow'>
-                {title && <p className='text-sm text-foreground font-semibold truncate'>{title}</p>}
-                {description && <p className='text-sm text-foreground truncate'>{description}</p>}
+                {title && (
+                    <p className='text-sm text-foreground font-semibold truncate'>
+                        {title}
+                    </p>
+                )}
+                {description && (
+                    <p className='text-sm text-foreground truncate'>
+                        {description}
+                    </p>
+                )}
             </div>
             {isFirst || isLast ? (
                 <div
diff --git a/resources/scripts/components/elements/displays/RingCard.tsx b/resources/scripts/components/elements/displays/RingCard.tsx
index ac701cabdd5..45ee57bdd81 100644
--- a/resources/scripts/components/elements/displays/RingCard.tsx
+++ b/resources/scripts/components/elements/displays/RingCard.tsx
@@ -1,6 +1,7 @@
-import Card from '@/components/elements/Card'
 import { Badge, RingProgress } from '@mantine/core'
 
+import Card from '@/components/elements/Card'
+
 interface Props {
     title: string
     value: number
@@ -16,7 +17,9 @@ const RingCard = ({ title, value, valueLabel, total, totalLabel }: Props) => {
         <Card className='flex flex-col justify-between items-center col-span-10 lg:col-span-2'>
             <h5 className='h5'>{title}</h5>
             <div className='grid place-items-center mt-5'>
-                <h4 className='absolute text-3xl font-semibold text-foreground'>{Math.floor(percentage)}</h4>
+                <h4 className='absolute text-3xl font-semibold text-foreground'>
+                    {Math.floor(percentage)}
+                </h4>
                 <RingProgress
                     size={128}
                     thickness={12}
@@ -29,8 +32,20 @@ const RingCard = ({ title, value, valueLabel, total, totalLabel }: Props) => {
                     ]}
                 />
             </div>
-            <Badge className='!normal-case' size='lg' color='gray' variant='outline'>
-                {value} {typeof valueLabel === 'function' ? valueLabel(value) : valueLabel} / {total} {typeof totalLabel === 'function' ? totalLabel(total) : totalLabel}
+            <Badge
+                className='!normal-case'
+                size='lg'
+                color='gray'
+                variant='outline'
+            >
+                {value}{' '}
+                {typeof valueLabel === 'function'
+                    ? valueLabel(value)
+                    : valueLabel}{' '}
+                / {total}{' '}
+                {typeof totalLabel === 'function'
+                    ? totalLabel(total)
+                    : totalLabel}
             </Badge>
         </Card>
     )
diff --git a/resources/scripts/components/elements/displays/Table.tsx b/resources/scripts/components/elements/displays/Table.tsx
index 75f74ef080d..df59ac339a2 100644
--- a/resources/scripts/components/elements/displays/Table.tsx
+++ b/resources/scripts/components/elements/displays/Table.tsx
@@ -1,10 +1,17 @@
-import { useReactTable, getCoreRowModel, flexRender, createColumnHelper, AccessorFn } from '@tanstack/react-table'
-import { ReactNode, useMemo, useState } from 'react'
 import styled from '@emotion/styled'
+import {
+    AccessorFn,
+    createColumnHelper,
+    flexRender,
+    getCoreRowModel,
+    useReactTable,
+} from '@tanstack/react-table'
+import { ReactNode, useMemo, useState } from 'react'
 import tw from 'twin.macro'
-import Checkbox from '@/components/elements/inputs/Checkbox'
-import Menu from '@/components/elements/Menu'
+
 import DottedButton from '@/components/elements/DottedButton'
+import Menu from '@/components/elements/Menu'
+import Checkbox from '@/components/elements/inputs/Checkbox'
 
 export type Alignment = 'left' | 'center' | 'right'
 
@@ -46,7 +53,11 @@ const StyledTr = styled.tr`
 
 type ThType = 'actions' | 'select'
 
-const getThClasses = (type: ThType, align?: Alignment, hasHeaderActions?: boolean) => {
+const getThClasses = (
+    type: ThType,
+    align?: Alignment,
+    hasHeaderActions?: boolean
+) => {
     let classes =
         'font-normal whitespace-nowrap m-0 text-xs uppercase px-3 h-10 bg-accent-100 border-y border-accent-200'
 
@@ -88,22 +99,40 @@ export const Actions = ({ children }: ActionProps) => (
     </Menu>
 )
 
-const Table = <T,>({ columns: unparsedColumns, data, selectable, headerActions, rowActions, minWidth }: Props<T>) => {
+const Table = <T,>({
+    columns: unparsedColumns,
+    data,
+    selectable,
+    headerActions,
+    rowActions,
+    minWidth,
+}: Props<T>) => {
     const columnHelper = createColumnHelper<T>()
 
-    const [rowSelection, setRowSelection] = useState<Record<number, boolean>>({})
+    const [rowSelection, setRowSelection] = useState<Record<number, boolean>>(
+        {}
+    )
 
     const columns = useMemo(() => {
         let parsedColumns = unparsedColumns.map(column => {
             const { accessor, header, cell, ...rest } = column
 
-            return columnHelper.accessor(accessor as unknown as AccessorFn<T, any>, {
-                // @ts-expect-error
-                id: accessor,
-                header,
-                cell: info => (cell ? cell({ value: info.getValue(), row: info.row.original }) : info.getValue()),
-                meta: rest,
-            })
+            return columnHelper.accessor(
+                accessor as unknown as AccessorFn<T, any>,
+                {
+                    // @ts-expect-error
+                    id: accessor,
+                    header,
+                    cell: info =>
+                        cell
+                            ? cell({
+                                  value: info.getValue(),
+                                  row: info.row.original,
+                              })
+                            : info.getValue(),
+                    meta: rest,
+                }
+            )
         })
 
         if (selectable) {
@@ -145,10 +174,13 @@ const Table = <T,>({ columns: unparsedColumns, data, selectable, headerActions,
                                 <Menu.Target>
                                     <DottedButton className='relative' />
                                 </Menu.Target>
-                                <Menu.Dropdown>{headerActions({ rows: rowSelection })}</Menu.Dropdown>
+                                <Menu.Dropdown>
+                                    {headerActions({ rows: rowSelection })}
+                                </Menu.Dropdown>
                             </Menu>
                         ) : null,
-                    cell: ({ row }) => (rowActions ? rowActions({ row: row.original }) : null),
+                    cell: ({ row }) =>
+                        rowActions ? rowActions({ row: row.original }) : null,
 
                     meta: {
                         overflow: true,
@@ -193,7 +225,10 @@ const Table = <T,>({ columns: unparsedColumns, data, selectable, headerActions,
                                 >
                                     {header.isPlaceholder
                                         ? null
-                                        : flexRender(header.column.columnDef.header, header.getContext())}
+                                        : flexRender(
+                                              header.column.columnDef.header,
+                                              header.getContext()
+                                          )}
                                 </th>
                             ))}
                         </StyledTr>
@@ -209,17 +244,25 @@ const Table = <T,>({ columns: unparsedColumns, data, selectable, headerActions,
                                             ? ''
                                             : 'overflow-hidden text-ellipsis whitespace-nowrap'
                                     } ${
-                                        cell.column.columnDef.meta?.align === 'center'
+                                        cell.column.columnDef.meta?.align ===
+                                        'center'
                                             ? 'text-center'
-                                            : cell.column.columnDef.meta?.align == 'right'
+                                            : cell.column.columnDef.meta
+                                                  ?.align == 'right'
                                             ? 'text-right'
                                             : ''
                                     } ${
-                                        cell.column.id === 'actions' && rowActions ? 'bg-background sticky right-0' : ''
+                                        cell.column.id === 'actions' &&
+                                        rowActions
+                                            ? 'bg-background sticky right-0'
+                                            : ''
                                     } text-sm text-accent-600 px-3 h-[50px] border-b border-accent-200`}
                                     key={cell.id}
                                 >
-                                    {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                                    {flexRender(
+                                        cell.column.columnDef.cell,
+                                        cell.getContext()
+                                    )}
                                 </td>
                             ))}
                         </tr>
diff --git a/resources/scripts/components/elements/dnd/SortableItem.tsx b/resources/scripts/components/elements/dnd/SortableItem.tsx
index 6ddf01b5001..bc0c3e5e5c7 100644
--- a/resources/scripts/components/elements/dnd/SortableItem.tsx
+++ b/resources/scripts/components/elements/dnd/SortableItem.tsx
@@ -30,8 +30,22 @@ export type ChildrenPropsWithHandle = {
     listeners?: SyntheticListenerMap
 } & ChildrenPropsWithoutHandle
 
-const SortableItem = ({ id, handle, className, children, overrideZIndex }: PropsWithoutHandle | PropsWithHandle) => {
-    const { attributes, listeners, setNodeRef, transform, transition, isDragging, active } = useSortable({ id })
+const SortableItem = ({
+    id,
+    handle,
+    className,
+    children,
+    overrideZIndex,
+}: PropsWithoutHandle | PropsWithHandle) => {
+    const {
+        attributes,
+        listeners,
+        setNodeRef,
+        transform,
+        transition,
+        isDragging,
+        active,
+    } = useSortable({ id })
 
     const style = {
         transform: CSS.Transform.toString(transform),
@@ -43,7 +57,9 @@ const SortableItem = ({ id, handle, className, children, overrideZIndex }: Props
     return (
         <div
             ref={setNodeRef}
-            className={`${className} ${!handle && 'touch-none'} ${isDragging && !overrideZIndex ? 'z-[2000]' : ''}`}
+            className={`${className} ${!handle && 'touch-none'} ${
+                isDragging && !overrideZIndex ? 'z-[2000]' : ''
+            }`}
             style={style}
             {...rootAttributes}
         >
diff --git a/resources/scripts/components/elements/formik/CheckboxFormik.tsx b/resources/scripts/components/elements/formik/CheckboxFormik.tsx
index 136583b91a7..ec340498632 100644
--- a/resources/scripts/components/elements/formik/CheckboxFormik.tsx
+++ b/resources/scripts/components/elements/formik/CheckboxFormik.tsx
@@ -1,12 +1,24 @@
-import Checkbox, { CheckboxProps } from '@/components/elements/inputs/Checkbox'
 import { FieldProps, Field as FormikField } from 'formik'
 import { forwardRef } from 'react'
 
-const CheckboxFormik = forwardRef<HTMLInputElement, Omit<CheckboxProps, 'error'>>(({ name, ...props }, ref) => {
+import Checkbox, { CheckboxProps } from '@/components/elements/inputs/Checkbox'
+
+const CheckboxFormik = forwardRef<
+    HTMLInputElement,
+    Omit<CheckboxProps, 'error'>
+>(({ name, ...props }, ref) => {
     return (
         <FormikField innerRef={ref} name={name}>
-            {({ field: { value, ...field }, meta: { error, touched } }: FieldProps) => (
-                <Checkbox checked={value} {...field} {...props} error={touched ? error : undefined} />
+            {({
+                field: { value, ...field },
+                meta: { error, touched },
+            }: FieldProps) => (
+                <Checkbox
+                    checked={value}
+                    {...field}
+                    {...props}
+                    error={touched ? error : undefined}
+                />
             )}
         </FormikField>
     )
diff --git a/resources/scripts/components/elements/formik/MultiSelectFormik.tsx b/resources/scripts/components/elements/formik/MultiSelectFormik.tsx
index 1dc25dcddfa..fbe8d4749d6 100644
--- a/resources/scripts/components/elements/formik/MultiSelectFormik.tsx
+++ b/resources/scripts/components/elements/formik/MultiSelectFormik.tsx
@@ -1,15 +1,26 @@
-import { SelectProps } from '@/components/elements/inputs/Select'
-import MultiSelect, { MultiSelectProps } from '@/components/elements/inputs/MultiSelect'
 import { useField } from 'formik'
 
+import MultiSelect, {
+    MultiSelectProps,
+} from '@/components/elements/inputs/MultiSelect'
+import { SelectProps } from '@/components/elements/inputs/Select'
+
 interface Props extends Omit<MultiSelectProps, 'error' | 'onChange'> {
     name: string
 }
 
 const MultiSelectFormik = ({ name, ...props }: Props) => {
-    const [{ onChange, ...field }, { touched, error }, { setValue }] = useField(name)
+    const [{ onChange, ...field }, { touched, error }, { setValue }] =
+        useField(name)
 
-    return <MultiSelect onChange={setValue} {...field} {...props} error={touched ? error : undefined} />
+    return (
+        <MultiSelect
+            onChange={setValue}
+            {...field}
+            {...props}
+            error={touched ? error : undefined}
+        />
+    )
 }
 
 export default MultiSelectFormik
diff --git a/resources/scripts/components/elements/formik/RadioGroupFormik.tsx b/resources/scripts/components/elements/formik/RadioGroupFormik.tsx
index b0475bb96a3..aafaff171ab 100644
--- a/resources/scripts/components/elements/formik/RadioGroupFormik.tsx
+++ b/resources/scripts/components/elements/formik/RadioGroupFormik.tsx
@@ -1,16 +1,25 @@
-import Radio from '@/components/elements/inputs/Radio'
 import { RadioGroupProps } from '@mantine/core'
-import { Field as FormikField, FieldProps, useField } from 'formik'
+import { FieldProps, Field as FormikField, useField } from 'formik'
 import { forwardRef } from 'react'
 
+import Radio from '@/components/elements/inputs/Radio'
+
 interface Props extends Omit<RadioGroupProps, 'error' | 'onChange'> {
     name: string
 }
 
 const RadioGroupFormik = ({ name, ...props }: Props) => {
-    const [{ onChange, ...field }, { touched, error }, { setValue }] = useField(name)
+    const [{ onChange, ...field }, { touched, error }, { setValue }] =
+        useField(name)
 
-    return <Radio.Group onChange={setValue} {...field} {...props} error={touched ? error : undefined} />
+    return (
+        <Radio.Group
+            onChange={setValue}
+            {...field}
+            {...props}
+            error={touched ? error : undefined}
+        />
+    )
 }
 
 export default RadioGroupFormik
diff --git a/resources/scripts/components/elements/formik/SelectFormik.tsx b/resources/scripts/components/elements/formik/SelectFormik.tsx
index 36fbc088731..6ca37b98c4f 100644
--- a/resources/scripts/components/elements/formik/SelectFormik.tsx
+++ b/resources/scripts/components/elements/formik/SelectFormik.tsx
@@ -1,4 +1,5 @@
 import { useField } from 'formik'
+
 import Select, { SelectProps } from '@/components/elements/inputs/Select'
 
 interface Props extends Omit<SelectProps, 'error' | 'onChange'> {
@@ -6,9 +7,17 @@ interface Props extends Omit<SelectProps, 'error' | 'onChange'> {
 }
 
 const SelectFormik = ({ name, ...props }: Props) => {
-    const [{onChange, ...field}, {touched, error}, {setValue}] = useField(name)
+    const [{ onChange, ...field }, { touched, error }, { setValue }] =
+        useField(name)
 
-    return <Select onChange={setValue} {...field} {...props} error={touched ? error : undefined} />
+    return (
+        <Select
+            onChange={setValue}
+            {...field}
+            {...props}
+            error={touched ? error : undefined}
+        />
+    )
 }
 
 export default SelectFormik
diff --git a/resources/scripts/components/elements/formik/TextInputFormik.tsx b/resources/scripts/components/elements/formik/TextInputFormik.tsx
index d743bfd88f7..9f344be49ea 100644
--- a/resources/scripts/components/elements/formik/TextInputFormik.tsx
+++ b/resources/scripts/components/elements/formik/TextInputFormik.tsx
@@ -1,12 +1,20 @@
-import TextInput from '@/components/elements/inputs/TextInput'
 import { TextInputProps } from '@mantine/core'
-import { Field as FormikField, FieldProps } from 'formik'
+import { FieldProps, Field as FormikField } from 'formik'
 import { forwardRef } from 'react'
 
-const TextInputFormik = forwardRef<HTMLInputElement, Omit<TextInputProps, 'error'>>(({ name, ...props }, ref) => (
+import TextInput from '@/components/elements/inputs/TextInput'
+
+const TextInputFormik = forwardRef<
+    HTMLInputElement,
+    Omit<TextInputProps, 'error'>
+>(({ name, ...props }, ref) => (
     <FormikField innerRef={ref} name={name}>
-        {({ field, meta: {error, touched} }: FieldProps) => (
-            <TextInput {...field} {...props} error={touched ? error : undefined} />
+        {({ field, meta: { error, touched } }: FieldProps) => (
+            <TextInput
+                {...field}
+                {...props}
+                error={touched ? error : undefined}
+            />
         )}
     </FormikField>
 ))
diff --git a/resources/scripts/components/elements/formik/TextareaFormik.tsx b/resources/scripts/components/elements/formik/TextareaFormik.tsx
index 31b700a91d9..fd9d32aa635 100644
--- a/resources/scripts/components/elements/formik/TextareaFormik.tsx
+++ b/resources/scripts/components/elements/formik/TextareaFormik.tsx
@@ -1,12 +1,19 @@
+import { FieldProps, Field as FormikField } from 'formik'
+import { forwardRef } from 'react'
 
 import Textarea, { TextareaProps } from '@/components/elements/inputs/Textarea'
-import { Field as FormikField, FieldProps } from 'formik'
-import { forwardRef } from 'react'
 
-const TextareaFormik = forwardRef<HTMLInputElement, Omit<TextareaProps, 'error'>>(({ name, ...props }, ref) => (
+const TextareaFormik = forwardRef<
+    HTMLInputElement,
+    Omit<TextareaProps, 'error'>
+>(({ name, ...props }, ref) => (
     <FormikField innerRef={ref} name={name}>
         {({ field, meta: { error, touched } }: FieldProps) => (
-            <Textarea {...field} {...props} error={touched ? error : undefined} />
+            <Textarea
+                {...field}
+                {...props}
+                error={touched ? error : undefined}
+            />
         )}
     </FormikField>
 ))
diff --git a/resources/scripts/components/elements/forms/CheckboxForm.tsx b/resources/scripts/components/elements/forms/CheckboxForm.tsx
index e1850ab4296..8a9fa87938a 100644
--- a/resources/scripts/components/elements/forms/CheckboxForm.tsx
+++ b/resources/scripts/components/elements/forms/CheckboxForm.tsx
@@ -1,22 +1,31 @@
-import Checkbox from '@/components/elements/inputs/Checkbox'
 import { CheckboxProps } from '@mantine/core'
 import { Control, ControllerRenderProps, useController } from 'react-hook-form'
 
-interface Props extends Omit<CheckboxProps, 'error' | keyof ControllerRenderProps> {
+import Checkbox from '@/components/elements/inputs/Checkbox'
+
+interface Props
+    extends Omit<CheckboxProps, 'error' | keyof ControllerRenderProps> {
     control?: Control<any, any>
     name: string
 }
 
 const CheckboxForm = ({ control, ...props }: Props) => {
     const {
-        field: {value, ...field},
+        field: { value, ...field },
         fieldState: { error },
     } = useController({
         name: props.name,
         control: control,
     })
 
-    return <Checkbox checked={value} {...field} {...props} error={error?.message} />
+    return (
+        <Checkbox
+            checked={value}
+            {...field}
+            {...props}
+            error={error?.message}
+        />
+    )
 }
 
 export default CheckboxForm
diff --git a/resources/scripts/components/elements/forms/MultiSelectForm.tsx b/resources/scripts/components/elements/forms/MultiSelectForm.tsx
index 79d9dde160f..f8c98075e9f 100644
--- a/resources/scripts/components/elements/forms/MultiSelectForm.tsx
+++ b/resources/scripts/components/elements/forms/MultiSelectForm.tsx
@@ -1,8 +1,12 @@
-import { SelectProps } from '@/components/elements/inputs/Select'
 import { Control, ControllerRenderProps, useController } from 'react-hook-form'
-import MultiSelect, { MultiSelectProps } from '@/components/elements/inputs/MultiSelect'
 
-interface Props extends Omit<MultiSelectProps, 'error' | keyof ControllerRenderProps> {
+import MultiSelect, {
+    MultiSelectProps,
+} from '@/components/elements/inputs/MultiSelect'
+import { SelectProps } from '@/components/elements/inputs/Select'
+
+interface Props
+    extends Omit<MultiSelectProps, 'error' | keyof ControllerRenderProps> {
     control?: Control<any, any>
     name: string
 }
diff --git a/resources/scripts/components/elements/forms/RadioGroupForm.tsx b/resources/scripts/components/elements/forms/RadioGroupForm.tsx
index d0106833ed9..c4afe2daa8e 100644
--- a/resources/scripts/components/elements/forms/RadioGroupForm.tsx
+++ b/resources/scripts/components/elements/forms/RadioGroupForm.tsx
@@ -1,12 +1,14 @@
-import Radio, { RadioGroupProps } from '@/components/elements/inputs/Radio'
 import { Control, ControllerRenderProps, useController } from 'react-hook-form'
 
-interface Props extends Omit<RadioGroupProps, 'error' | keyof ControllerRenderProps> {
+import Radio, { RadioGroupProps } from '@/components/elements/inputs/Radio'
+
+interface Props
+    extends Omit<RadioGroupProps, 'error' | keyof ControllerRenderProps> {
     control?: Control<any, any>
     name: string
 }
 
-const RadioGroupForm = ({control, ...props}: Props) => {
+const RadioGroupForm = ({ control, ...props }: Props) => {
     const {
         field,
         fieldState: { error },
@@ -18,4 +20,4 @@ const RadioGroupForm = ({control, ...props}: Props) => {
     return <Radio.Group {...field} {...props} error={error?.message} />
 }
 
-export default RadioGroupForm;
\ No newline at end of file
+export default RadioGroupForm
diff --git a/resources/scripts/components/elements/forms/SelectForm.tsx b/resources/scripts/components/elements/forms/SelectForm.tsx
index 216062eb7ed..697c478d4ac 100644
--- a/resources/scripts/components/elements/forms/SelectForm.tsx
+++ b/resources/scripts/components/elements/forms/SelectForm.tsx
@@ -1,13 +1,15 @@
 import { TextInputProps } from '@mantine/core'
 import { Control, ControllerRenderProps, useController } from 'react-hook-form'
+
 import Select, { SelectProps } from '@/components/elements/inputs/Select'
 
-interface Props extends Omit<SelectProps, 'error' | keyof ControllerRenderProps> {
+interface Props
+    extends Omit<SelectProps, 'error' | keyof ControllerRenderProps> {
     control?: Control<any, any>
     name: string
 }
 
-const SelectForm = ({control, ...props}: Props) => {
+const SelectForm = ({ control, ...props }: Props) => {
     const {
         field,
         fieldState: { error },
diff --git a/resources/scripts/components/elements/forms/SwitchForm.tsx b/resources/scripts/components/elements/forms/SwitchForm.tsx
index 4a41d198839..2417e60d05c 100644
--- a/resources/scripts/components/elements/forms/SwitchForm.tsx
+++ b/resources/scripts/components/elements/forms/SwitchForm.tsx
@@ -1,7 +1,9 @@
 import { Control, ControllerRenderProps, useController } from 'react-hook-form'
+
 import Switch, { SwitchProps } from '@/components/elements/inputs/Switch'
 
-interface Props extends Omit<SwitchProps, 'error' | keyof ControllerRenderProps> {
+interface Props
+    extends Omit<SwitchProps, 'error' | keyof ControllerRenderProps> {
     control?: Control<any, any>
     name: string
 }
@@ -15,7 +17,9 @@ const SwitchForm = ({ control, ...props }: Props) => {
         control: control,
     })
 
-    return <Switch checked={value} {...field} {...props} error={error?.message} />
+    return (
+        <Switch checked={value} {...field} {...props} error={error?.message} />
+    )
 }
 
 export default SwitchForm
diff --git a/resources/scripts/components/elements/forms/TextInputForm.tsx b/resources/scripts/components/elements/forms/TextInputForm.tsx
index 2e463de4b47..4e26780949d 100644
--- a/resources/scripts/components/elements/forms/TextInputForm.tsx
+++ b/resources/scripts/components/elements/forms/TextInputForm.tsx
@@ -1,8 +1,10 @@
-import TextInput from '@/components/elements/inputs/TextInput'
 import { TextInputProps } from '@mantine/core'
 import { Control, ControllerRenderProps, useController } from 'react-hook-form'
 
-interface Props extends Omit<TextInputProps, 'error' | keyof ControllerRenderProps> {
+import TextInput from '@/components/elements/inputs/TextInput'
+
+interface Props
+    extends Omit<TextInputProps, 'error' | keyof ControllerRenderProps> {
     control?: Control<any, any>
     name: string
 }
diff --git a/resources/scripts/components/elements/forms/TextareaForm.tsx b/resources/scripts/components/elements/forms/TextareaForm.tsx
index a58180de820..8135fe8b811 100644
--- a/resources/scripts/components/elements/forms/TextareaForm.tsx
+++ b/resources/scripts/components/elements/forms/TextareaForm.tsx
@@ -1,7 +1,9 @@
 import { Control, ControllerRenderProps, useController } from 'react-hook-form'
+
 import Textarea, { TextareaProps } from '@/components/elements/inputs/Textarea'
 
-interface Props extends Omit<TextareaProps, 'error' | keyof ControllerRenderProps> {
+interface Props
+    extends Omit<TextareaProps, 'error' | keyof ControllerRenderProps> {
     control?: Control<any, any>
     name: string
 }
diff --git a/resources/scripts/components/elements/inputs/Checkbox.tsx b/resources/scripts/components/elements/inputs/Checkbox.tsx
index 05dc0c0b73d..0eb2aff4cb0 100644
--- a/resources/scripts/components/elements/inputs/Checkbox.tsx
+++ b/resources/scripts/components/elements/inputs/Checkbox.tsx
@@ -1,9 +1,12 @@
+import { classNames } from '@/util/helpers'
 import styled from '@emotion/styled'
-import { Checkbox as MantineCheckbox, CheckboxProps as MantineCheckboxProps } from '@mantine/core'
 import { CheckIcon, MinusIcon } from '@heroicons/react/20/solid'
-import { classNames } from '@/util/helpers'
-import tw from 'twin.macro'
+import {
+    Checkbox as MantineCheckbox,
+    CheckboxProps as MantineCheckboxProps,
+} from '@mantine/core'
 import { forwardRef } from 'react'
+import tw from 'twin.macro'
 
 const StyledCheckbox = styled(MantineCheckbox)`
     .mantine-Checkbox-body {
@@ -32,14 +35,27 @@ const StyledCheckbox = styled(MantineCheckbox)`
     }
 `
 
-const Icon = ({ indeterminate, className }: { indeterminate: boolean; className: string }) => {
+const Icon = ({
+    indeterminate,
+    className,
+}: {
+    indeterminate: boolean
+    className: string
+}) => {
     return !indeterminate ? (
-        <CheckIcon className={classNames('stroke-2 stroke-background text-background', className)} />
+        <CheckIcon
+            className={classNames(
+                'stroke-2 stroke-background text-background',
+                className
+            )}
+        />
     ) : (
         <MinusIcon
             className={classNames(
                 'stroke-2',
-                false ? 'stroke-accent-300 text-accent-300' : 'stroke-foreground text-foreground', // supposed to switch based on "disabled" state
+                false
+                    ? 'stroke-accent-300 text-accent-300'
+                    : 'stroke-foreground text-foreground', // supposed to switch based on "disabled" state
                 className
             )}
         />
diff --git a/resources/scripts/components/elements/inputs/MultiSelect.tsx b/resources/scripts/components/elements/inputs/MultiSelect.tsx
index 6cab649146e..1bf1e34ce17 100644
--- a/resources/scripts/components/elements/inputs/MultiSelect.tsx
+++ b/resources/scripts/components/elements/inputs/MultiSelect.tsx
@@ -1,10 +1,11 @@
+import { css } from '@emotion/react'
 import styled from '@emotion/styled'
 import { MultiSelect as MantineMultiSelect } from '@mantine/core'
-import tw from 'twin.macro'
 import { ComponentProps, forwardRef } from 'react'
+import tw from 'twin.macro'
+
 import ErrorMessage from '@/components/elements/ErrorMessage'
 import LoadingDots from '@/components/elements/LoadingDots'
-import { css } from '@emotion/react'
 
 const StyledMultiSelect = styled(MantineMultiSelect)`
     & .mantine-MultiSelect-label {
@@ -37,7 +38,8 @@ const StyledMultiSelect = styled(MantineMultiSelect)`
             : null}
 `
 
-export interface MultiSelectProps extends ComponentProps<typeof StyledMultiSelect> {
+export interface MultiSelectProps
+    extends ComponentProps<typeof StyledMultiSelect> {
     loading?: boolean
 }
 
diff --git a/resources/scripts/components/elements/inputs/Radio.tsx b/resources/scripts/components/elements/inputs/Radio.tsx
index 3237969a5c7..a9bb0bec487 100644
--- a/resources/scripts/components/elements/inputs/Radio.tsx
+++ b/resources/scripts/components/elements/inputs/Radio.tsx
@@ -4,8 +4,8 @@ import {
     RadioGroupProps as MantineRadioGroupProps,
     RadioProps as MantineRadioProps,
 } from '@mantine/core'
-import tw from 'twin.macro'
 import { forwardRef } from 'react'
+import tw from 'twin.macro'
 
 export type RadioProps = MantineRadioProps
 export type RadioGroupProps = MantineRadioGroupProps
@@ -42,8 +42,8 @@ const StyledRadio = styled(MantineRadio)`
 
 const Radio: Radio = ({ ...props }) => <StyledRadio {...props} />
 
-Radio.Group = forwardRef<HTMLInputElement, RadioGroupProps>(({ ...props }, ref) => (
-    <MantineRadio.Group ref={ref} {...props} />
-))
+Radio.Group = forwardRef<HTMLInputElement, RadioGroupProps>(
+    ({ ...props }, ref) => <MantineRadio.Group ref={ref} {...props} />
+)
 
 export default Radio
diff --git a/resources/scripts/components/elements/inputs/Select.tsx b/resources/scripts/components/elements/inputs/Select.tsx
index 331e8bdc9ad..c9842bcd2a5 100644
--- a/resources/scripts/components/elements/inputs/Select.tsx
+++ b/resources/scripts/components/elements/inputs/Select.tsx
@@ -1,11 +1,15 @@
-import styled from '@emotion/styled'
-import { Select as MantineSelect, SelectProps as MantineSelectProps } from '@mantine/core'
-import tw from 'twin.macro'
 import { css } from '@emotion/react'
-import LoadingDots from '@/components/elements/LoadingDots'
+import styled from '@emotion/styled'
+import { CheckIcon } from '@heroicons/react/20/solid'
+import {
+    Select as MantineSelect,
+    SelectProps as MantineSelectProps,
+} from '@mantine/core'
 import { ComponentProps, ComponentPropsWithoutRef, forwardRef } from 'react'
+import tw from 'twin.macro'
+
 import ErrorMessage from '@/components/elements/ErrorMessage'
-import { CheckIcon } from '@heroicons/react/20/solid'
+import LoadingDots from '@/components/elements/LoadingDots'
 
 const StyledSelect = styled(MantineSelect)`
     & .mantine-Select-label {
@@ -66,22 +70,29 @@ const StyledSelectItem = styled.div`
     }
 `
 
-const SelectItem = forwardRef<HTMLDivElement, SelectItemProps>(({ label, className, ...props }, ref) => (
-    <StyledSelectItem ref={ref} {...props}>
-        <span>{label}</span>
-        <CheckIcon className='h-4 w-4 text-foreground select-item-icon' title='checked' />
-    </StyledSelectItem>
-))
-
-const Select = forwardRef<HTMLInputElement, SelectProps>(({ loading, nothingFound, error, ...props }, ref) => (
-    <StyledSelect
-        error={error ? <ErrorMessage>{error}</ErrorMessage> : undefined}
-        nothingFound={loading ? 'Loading...' : nothingFound}
-        rightSection={loading && <LoadingDots size={4} />}
-        itemComponent={SelectItem}
-        ref={ref}
-        {...props}
-    />
-))
+const SelectItem = forwardRef<HTMLDivElement, SelectItemProps>(
+    ({ label, className, ...props }, ref) => (
+        <StyledSelectItem ref={ref} {...props}>
+            <span>{label}</span>
+            <CheckIcon
+                className='h-4 w-4 text-foreground select-item-icon'
+                title='checked'
+            />
+        </StyledSelectItem>
+    )
+)
+
+const Select = forwardRef<HTMLInputElement, SelectProps>(
+    ({ loading, nothingFound, error, ...props }, ref) => (
+        <StyledSelect
+            error={error ? <ErrorMessage>{error}</ErrorMessage> : undefined}
+            nothingFound={loading ? 'Loading...' : nothingFound}
+            rightSection={loading && <LoadingDots size={4} />}
+            itemComponent={SelectItem}
+            ref={ref}
+            {...props}
+        />
+    )
+)
 
 export default Select
diff --git a/resources/scripts/components/elements/inputs/Switch.tsx b/resources/scripts/components/elements/inputs/Switch.tsx
index 9cbea11a1da..a49975b159e 100644
--- a/resources/scripts/components/elements/inputs/Switch.tsx
+++ b/resources/scripts/components/elements/inputs/Switch.tsx
@@ -1,5 +1,8 @@
 import styled from '@emotion/styled'
-import { Switch as MantineSwitch, SwitchProps as MantineSwitchProps } from '@mantine/core'
+import {
+    Switch as MantineSwitch,
+    SwitchProps as MantineSwitchProps,
+} from '@mantine/core'
 import tw from 'twin.macro'
 
 export interface SwitchProps extends MantineSwitchProps {}
diff --git a/resources/scripts/components/elements/inputs/TextInput.tsx b/resources/scripts/components/elements/inputs/TextInput.tsx
index 897ddb25685..8e5dea1243e 100644
--- a/resources/scripts/components/elements/inputs/TextInput.tsx
+++ b/resources/scripts/components/elements/inputs/TextInput.tsx
@@ -1,10 +1,10 @@
-import { TextInputProps } from '@mantine/core'
-
 import styled from '@emotion/styled'
+import { TextInputProps } from '@mantine/core'
 import { TextInput as MantineTextInput } from '@mantine/core'
+import { forwardRef } from 'react'
 import tw from 'twin.macro'
+
 import ErrorMessage from '@/components/elements/ErrorMessage'
-import { forwardRef } from 'react'
 
 const StyledTextInput = styled(MantineTextInput)`
     .mantine-TextInput-label {
@@ -20,8 +20,16 @@ const StyledTextInput = styled(MantineTextInput)`
     }
 `
 
-const TextInput = forwardRef<HTMLInputElement, TextInputProps>(({ error, ...props }, ref) => {
-    return <StyledTextInput ref={ref} error={error ? <ErrorMessage>{error}</ErrorMessage> : undefined} {...props} />
-})
+const TextInput = forwardRef<HTMLInputElement, TextInputProps>(
+    ({ error, ...props }, ref) => {
+        return (
+            <StyledTextInput
+                ref={ref}
+                error={error ? <ErrorMessage>{error}</ErrorMessage> : undefined}
+                {...props}
+            />
+        )
+    }
+)
 
 export default TextInput
diff --git a/resources/scripts/components/elements/inputs/Textarea.tsx b/resources/scripts/components/elements/inputs/Textarea.tsx
index 75ced27cc47..01ecd2e67fa 100644
--- a/resources/scripts/components/elements/inputs/Textarea.tsx
+++ b/resources/scripts/components/elements/inputs/Textarea.tsx
@@ -1,9 +1,19 @@
-import ErrorMessage from '@/components/elements/ErrorMessage'
 import styled from '@emotion/styled'
 import { ExclamationCircleIcon } from '@heroicons/react/24/outline'
-import { ComponentProps, FocusEvent, forwardRef, useEffect, useState } from 'react'
+import {
+    Textarea as MantineTextarea,
+    TextareaProps as MantineTextareaProps,
+} from '@mantine/core'
+import {
+    ComponentProps,
+    FocusEvent,
+    forwardRef,
+    useEffect,
+    useState,
+} from 'react'
 import tw from 'twin.macro'
-import { TextareaProps as MantineTextareaProps, Textarea as MantineTextarea } from '@mantine/core'
+
+import ErrorMessage from '@/components/elements/ErrorMessage'
 
 export interface TextareaProps extends MantineTextareaProps {}
 
@@ -21,8 +31,16 @@ const StyledTextarea = styled(MantineTextarea)`
     }
 `
 
-const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(({ error, ...props }, ref) => {
-    return <StyledTextarea ref={ref} error={error ? <ErrorMessage>{error}</ErrorMessage> : undefined} {...props} />
-})
+const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
+    ({ error, ...props }, ref) => {
+        return (
+            <StyledTextarea
+                ref={ref}
+                error={error ? <ErrorMessage>{error}</ErrorMessage> : undefined}
+                {...props}
+            />
+        )
+    }
+)
 
 export default Textarea
diff --git a/resources/scripts/components/elements/layouts/SettingsLayout.tsx b/resources/scripts/components/elements/layouts/SettingsLayout.tsx
index 62a07d10caf..0d063363e1d 100644
--- a/resources/scripts/components/elements/layouts/SettingsLayout.tsx
+++ b/resources/scripts/components/elements/layouts/SettingsLayout.tsx
@@ -1,13 +1,21 @@
-import { RouteDefinition } from '@/components/elements/navigation/NavigationBar'
-import VerticalNavTab from '@/components/elements/navigation/VerticalNavTab'
-import ServerContentBlock from '@/components/servers/ServerContentBlock'
-import { Link, Outlet, useMatch, useMatches, useNavigate } from 'react-router-dom'
+import { bindUrlParams } from '@/util/helpers'
+import styled from '@emotion/styled'
+import { ChevronLeftIcon } from '@heroicons/react/20/solid'
 import { useViewportSize } from '@mantine/hooks'
 import { ComponentType, Fragment, ReactNode, useEffect } from 'react'
-import styled from '@emotion/styled'
+import {
+    Link,
+    Outlet,
+    useMatch,
+    useMatches,
+    useNavigate,
+} from 'react-router-dom'
 import tw from 'twin.macro'
-import { ChevronLeftIcon } from '@heroicons/react/20/solid'
-import { bindUrlParams } from '@/util/helpers'
+
+import { RouteDefinition } from '@/components/elements/navigation/NavigationBar'
+import VerticalNavTab from '@/components/elements/navigation/VerticalNavTab'
+
+import ServerContentBlock from '@/components/servers/ServerContentBlock'
 
 interface Props {
     indexPattern: string
@@ -43,7 +51,12 @@ const ReturnLink = styled(Link)`
     ${tw`flex items-center space-x-3 pb-6 text-foreground text-foreground font-semibold text-sm`}
 `
 
-const SettingsLayout = ({ indexPattern, defaultUrl, contentBlock: ContentBlock, routes }: Props) => {
+const SettingsLayout = ({
+    indexPattern,
+    defaultUrl,
+    contentBlock: ContentBlock,
+    routes,
+}: Props) => {
     const matches = useMatches()
     const { width } = useViewportSize()
     const isIndex = useMatch(indexPattern)
@@ -51,9 +64,12 @@ const SettingsLayout = ({ indexPattern, defaultUrl, contentBlock: ContentBlock,
 
     useEffect(() => {
         if (width > 960 && isIndex) {
-            navigate(bindUrlParams(defaultUrl, matches[matches.length - 1].params), {
-                replace: true,
-            })
+            navigate(
+                bindUrlParams(defaultUrl, matches[matches.length - 1].params),
+                {
+                    replace: true,
+                }
+            )
         }
     }, [isIndex, width])
 
@@ -68,7 +84,10 @@ const SettingsLayout = ({ indexPattern, defaultUrl, contentBlock: ContentBlock,
                             {routes.map(route => (
                                 <VerticalNavTab
                                     key={route.name}
-                                    to={bindUrlParams(route.path, matches[matches.length - 1].params)}
+                                    to={bindUrlParams(
+                                        route.path,
+                                        matches[matches.length - 1].params
+                                    )}
                                     end={route.end}
                                 >
                                     {route.name}
@@ -78,7 +97,12 @@ const SettingsLayout = ({ indexPattern, defaultUrl, contentBlock: ContentBlock,
                     ) : null}
                     <div className=' col-span-3'>
                         {width <= 960 && !Boolean(isIndex) ? (
-                            <ReturnLink to={bindUrlParams(indexPattern, matches[matches.length - 1].params)}>
+                            <ReturnLink
+                                to={bindUrlParams(
+                                    indexPattern,
+                                    matches[matches.length - 1].params
+                                )}
+                            >
                                 <ChevronLeftIcon className='w-5 h-5' />
                                 <span>Settings</span>
                             </ReturnLink>
diff --git a/resources/scripts/components/elements/navigation/NavLink.tsx b/resources/scripts/components/elements/navigation/NavLink.tsx
index d50d87f85c1..fc38f0faf86 100644
--- a/resources/scripts/components/elements/navigation/NavLink.tsx
+++ b/resources/scripts/components/elements/navigation/NavLink.tsx
@@ -1,28 +1,23 @@
-import {
-  NavLink as RouterLink,
-  NavLinkProps,
-} from 'react-router-dom'
+import { NavLinkProps, NavLink as RouterLink } from 'react-router-dom'
 
-interface Props extends Omit<NavLinkProps, 'className'> {
-
-}
+interface Props extends Omit<NavLinkProps, 'className'> {}
 
 const NavLink = ({ children, ...props }: Props) => {
-  const defaultClasses =
-    'text-sm transition-colors leading-4 py-4 px-3 sm:hover:text-foreground relative grid place-items-center nav-link whitespace-nowrap'
+    const defaultClasses =
+        'text-sm transition-colors leading-4 py-4 px-3 sm:hover:text-foreground relative grid place-items-center nav-link whitespace-nowrap'
 
-  return (
-    <RouterLink
-      {...props}
-      className={({ isActive }) =>
-        isActive
-          ? `${defaultClasses} nav-link-active text-foreground`
-          : `${defaultClasses} text-accent-500`
-      }
-    >
-      {children}
-    </RouterLink>
-  )
+    return (
+        <RouterLink
+            {...props}
+            className={({ isActive }) =>
+                isActive
+                    ? `${defaultClasses} nav-link-active text-foreground`
+                    : `${defaultClasses} text-accent-500`
+            }
+        >
+            {children}
+        </RouterLink>
+    )
 }
 
 export default NavLink
diff --git a/resources/scripts/components/elements/navigation/NavigationBar.tsx b/resources/scripts/components/elements/navigation/NavigationBar.tsx
index 7c8a784935f..cdfe734a9e6 100644
--- a/resources/scripts/components/elements/navigation/NavigationBar.tsx
+++ b/resources/scripts/components/elements/navigation/NavigationBar.tsx
@@ -1,14 +1,23 @@
-import ContentContainer from '@/components/elements/ContentContainer'
+import { AdminBanner } from '@/routers/AdminDashboardRouter'
+import { bindUrlParams } from '@/util/helpers'
 import { Burger, LoadingOverlay } from '@mantine/core'
-import UserDropdown from '@/components/elements/navigation/UserDropdown'
-import { createContext, useContext, useEffect, useMemo, useRef, useState } from 'react'
-import NavigationDropdown from '@/components/elements/navigation/NavigationDropdown'
+import {
+    createContext,
+    useContext,
+    useEffect,
+    useMemo,
+    useRef,
+    useState,
+} from 'react'
 import { Link, useMatch, useMatches } from 'react-router-dom'
+
 import http from '@/api/http'
-import NavLink from '@/components/elements/navigation/NavLink'
-import { AdminBanner } from '@/routers/AdminDashboardRouter'
-import { bindUrlParams } from '@/util/helpers'
+
+import ContentContainer from '@/components/elements/ContentContainer'
 import Logo from '@/components/elements/Logo'
+import NavLink from '@/components/elements/navigation/NavLink'
+import NavigationDropdown from '@/components/elements/navigation/NavigationDropdown'
+import UserDropdown from '@/components/elements/navigation/UserDropdown'
 
 export interface RouteDefinition {
     name: string
@@ -23,12 +32,13 @@ interface NavigationBarContextInterface {
     setBreadcrumb: (breadcrumb: string | null | undefined) => void
 }
 
-export const NavigationBarContext = createContext<NavigationBarContextInterface>({
-    routes: [],
-    setRoutes: () => {},
-    breadcrumb: null,
-    setBreadcrumb: () => {},
-})
+export const NavigationBarContext =
+    createContext<NavigationBarContextInterface>({
+        routes: [],
+        setRoutes: () => {},
+        breadcrumb: null,
+        setBreadcrumb: () => {},
+    })
 
 const NavigationBar = () => {
     const { routes, breadcrumb } = useContext(NavigationBarContext)
@@ -43,13 +53,19 @@ const NavigationBar = () => {
     const matches = useMatches()
 
     const visibilityObserver = useMemo(
-        () => new IntersectionObserver(([entry]) => setIsVisible(entry.isIntersecting)),
+        () =>
+            new IntersectionObserver(([entry]) =>
+                setIsVisible(entry.isIntersecting)
+            ),
         []
     )
 
     useEffect(() => {
         const resizeListener = () => {
-            let width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth
+            let width =
+                window.innerWidth ||
+                document.documentElement.clientWidth ||
+                document.body.clientWidth
 
             if (width < 640) {
                 setMenuVisible(false)
@@ -74,7 +90,11 @@ const NavigationBar = () => {
                 logo.current.classList.add('!w-8')
                 placeholder.current.classList.remove('hidden')
             } else {
-                bottomBar.current.classList.remove('fixed', 'top-0', '!shadow-lg')
+                bottomBar.current.classList.remove(
+                    'fixed',
+                    'top-0',
+                    '!shadow-lg'
+                )
                 logo.current.classList.remove('!w-8')
                 placeholder.current.classList.add('hidden')
             }
@@ -96,9 +116,14 @@ const NavigationBar = () => {
             <ContentContainer ref={topBar} className='pt-3 pb-1.5 relative'>
                 <div className='flex justify-between'>
                     <div className='flex shrink overflow-hidden space-x-5 items-center'>
-                        <Link to={isAdminArea ? '/admin' : '/'} className='flex items-center space-x-3'>
+                        <Link
+                            to={isAdminArea ? '/admin' : '/'}
+                            className='flex items-center space-x-3'
+                        >
                             <Logo className='w-6 h-6 text-foreground' />
-                            <h1 className='font-semibold text-lg text-foreground'>Convoy</h1>
+                            <h1 className='font-semibold text-lg text-foreground'>
+                                Convoy
+                            </h1>
                         </Link>
                         {breadcrumb && (
                             <>
@@ -140,7 +165,10 @@ const NavigationBar = () => {
                             <NavLink
                                 end={route.end}
                                 key={route.path}
-                                to={bindUrlParams(route.path, matches[matches.length - 1].params)}
+                                to={bindUrlParams(
+                                    route.path,
+                                    matches[matches.length - 1].params
+                                )}
                             >
                                 {route.name}
                             </NavLink>
@@ -148,7 +176,10 @@ const NavigationBar = () => {
                     </div>
                 </ContentContainer>
             </div>
-            <div ref={placeholder} className='hidden h-[49px] w-full bg-white dark:bg-black' />
+            <div
+                ref={placeholder}
+                className='hidden h-[49px] w-full bg-white dark:bg-black'
+            />
         </div>
     )
 }
diff --git a/resources/scripts/components/elements/navigation/NavigationDropdown.tsx b/resources/scripts/components/elements/navigation/NavigationDropdown.tsx
index 0c023903401..66b2b262b77 100644
--- a/resources/scripts/components/elements/navigation/NavigationDropdown.tsx
+++ b/resources/scripts/components/elements/navigation/NavigationDropdown.tsx
@@ -1,50 +1,63 @@
-import ContentContainer from '@/components/elements/ContentContainer'
 import { ReactNode, useEffect } from 'react'
 import { Link, useMatch, useNavigate } from 'react-router-dom'
 
+import ContentContainer from '@/components/elements/ContentContainer'
+
 interface LinkProps {
-  children: ReactNode
-  to: string
+    children: ReactNode
+    to: string
 }
-const NavLink = ({children, to}: LinkProps) => {
-  return <Link className='flex items-center h-12 border-b border-accent-200 bg-transparent active:bg-accent-100 transition-colors' to={to}><span>{children}</span></Link>
+const NavLink = ({ children, to }: LinkProps) => {
+    return (
+        <Link
+            className='flex items-center h-12 border-b border-accent-200 bg-transparent active:bg-accent-100 transition-colors'
+            to={to}
+        >
+            <span>{children}</span>
+        </Link>
+    )
 }
 
 interface Props {
-  logout: () => void
-  visible?: boolean
+    logout: () => void
+    visible?: boolean
 }
 
 const NavigationDropdown = ({ logout, visible }: Props) => {
-  const navigate = useNavigate()
-  const isAdminArea = useMatch('/admin/*')
+    const navigate = useNavigate()
+    const isAdminArea = useMatch('/admin/*')
 
-  useEffect(() => {
-    if (visible) {
-      document.body.classList.add('fixed', 'w-full')
-    } else {
-      document.body.classList.remove('fixed', 'w-full')
-    }
-  }, [visible])
+    useEffect(() => {
+        if (visible) {
+            document.body.classList.add('fixed', 'w-full')
+        } else {
+            document.body.classList.remove('fixed', 'w-full')
+        }
+    }, [visible])
 
-  return (
-    <>
-      {visible && (
-        <div className={`inset-x-0 ${isAdminArea ? 'top-[80px]' : 'top-[56px]'} pt-1.5 bottom-0 block fixed bg-background z-[3000] overflow-y-scroll`}>
-          <ContentContainer>
-            <div className='flex flex-col w-full'>
-              <NavLink to='/admin'>
-                Admin Center
-              </NavLink>
-              <button className='flex items-center h-12 border-b border-accent-200 bg-transparent active:bg-accent-100 transition-colors' onClick={logout}>
-                <span>Sign Out</span>
-              </button>
-            </div>
-          </ContentContainer>
-        </div>
-      )}
-    </>
-  )
+    return (
+        <>
+            {visible && (
+                <div
+                    className={`inset-x-0 ${
+                        isAdminArea ? 'top-[80px]' : 'top-[56px]'
+                    } pt-1.5 bottom-0 block fixed bg-background z-[3000] overflow-y-scroll`}
+                >
+                    <ContentContainer>
+                        <div className='flex flex-col w-full'>
+                            <NavLink to='/admin'>Admin Center</NavLink>
+                            <button
+                                className='flex items-center h-12 border-b border-accent-200 bg-transparent active:bg-accent-100 transition-colors'
+                                onClick={logout}
+                            >
+                                <span>Sign Out</span>
+                            </button>
+                        </div>
+                    </ContentContainer>
+                </div>
+            )}
+        </>
+    )
 }
 
 export default NavigationDropdown
diff --git a/resources/scripts/components/elements/navigation/UserDropdown.tsx b/resources/scripts/components/elements/navigation/UserDropdown.tsx
index b15753c0b86..9e44a19d0b8 100644
--- a/resources/scripts/components/elements/navigation/UserDropdown.tsx
+++ b/resources/scripts/components/elements/navigation/UserDropdown.tsx
@@ -1,9 +1,11 @@
-import { Avatar } from '@mantine/core'
 import { useStoreState } from '@/state'
 import { getInitials } from '@/util/helpers'
-import Menu from '@/components/elements/Menu'
-import { useNavigate } from 'react-router-dom'
+import { Avatar } from '@mantine/core'
 import { useTranslation } from 'react-i18next'
+import { useNavigate } from 'react-router-dom'
+
+import Menu from '@/components/elements/Menu'
+
 interface Props {
     logout: () => void
 }
@@ -19,7 +21,9 @@ const UserDropdown = ({ logout }: Props) => {
             <Menu width={200} position='bottom-end'>
                 <Menu.Target>
                     <button className='flex items-center space-x-3 bg-transparent ring-transparent rounded-sm ring-4 hover:ring-stone-100 dark:hover:ring-stone-900 hover:bg-stone-100 dark:hover:bg-stone-900 transition'>
-                        <p className='text-foreground font-medium text-sm'>{user.name}</p>
+                        <p className='text-foreground font-medium text-sm'>
+                            {user.name}
+                        </p>
                         <Avatar color='blue' size='md' radius='xl'>
                             {getInitials(user.name, ' ', 2)}
                         </Avatar>
@@ -28,7 +32,9 @@ const UserDropdown = ({ logout }: Props) => {
                 <Menu.Dropdown>
                     {user.rootAdmin && (
                         <>
-                            <Menu.Item onClick={() => navigate('/admin')}>{tStrings('admin_cp')}</Menu.Item>
+                            <Menu.Item onClick={() => navigate('/admin')}>
+                                {tStrings('admin_cp')}
+                            </Menu.Item>
                             <Menu.Divider />
                         </>
                     )}
diff --git a/resources/scripts/components/elements/navigation/VerticalNavTab.tsx b/resources/scripts/components/elements/navigation/VerticalNavTab.tsx
index b8977245ea3..6bacc594695 100644
--- a/resources/scripts/components/elements/navigation/VerticalNavTab.tsx
+++ b/resources/scripts/components/elements/navigation/VerticalNavTab.tsx
@@ -4,18 +4,18 @@ import { NavLink, NavLinkProps } from 'react-router-dom'
 import tw from 'twin.macro'
 
 const VerticalNavTab = styled(NavLink)`
-${tw`transition text-sm block text-accent-600`}
+    ${tw`transition text-sm block text-accent-600`}
 
-@media (min-width: 960px) {
-    ${tw`px-3 py-2 hover:bg-accent-200 hover:text-foreground rounded`}
+    @media (min-width: 960px) {
+        ${tw`px-3 py-2 hover:bg-accent-200 hover:text-foreground rounded`}
 
-    &.active {
-        ${tw`text-foreground font-medium`}
+        &.active {
+            ${tw`text-foreground font-medium`}
+        }
+    }
+    @media (max-width: 960px) {
+        ${tw`py-6 text-foreground`}
     }
-}
-@media (max-width: 960px) {
-    ${tw`py-6 text-foreground`}
-}
 `
 
 export default VerticalNavTab
diff --git a/resources/scripts/components/servers/ServerContentBlock.tsx b/resources/scripts/components/servers/ServerContentBlock.tsx
index d0bd81191ac..38750f7f74b 100644
--- a/resources/scripts/components/servers/ServerContentBlock.tsx
+++ b/resources/scripts/components/servers/ServerContentBlock.tsx
@@ -1,18 +1,21 @@
-import PageContentBlock, { PageContentBlockProps } from '@/components/elements/PageContentBlock';
-import { ServerContext } from '@/state/server';
+import { ServerContext } from '@/state/server'
+
+import PageContentBlock, {
+    PageContentBlockProps,
+} from '@/components/elements/PageContentBlock'
 
 interface Props extends PageContentBlockProps {
-    title: string;
+    title: string
 }
 
 const ServerContentBlock: React.FC<Props> = ({ title, children, ...props }) => {
-    const name = ServerContext.useStoreState((state) => state.server.data!.name);
+    const name = ServerContext.useStoreState(state => state.server.data!.name)
 
     return (
         <PageContentBlock title={`${title} | ${name}`} {...props}>
             {children}
         </PageContentBlock>
-    );
-};
+    )
+}
 
-export default ServerContentBlock;
\ No newline at end of file
+export default ServerContentBlock
diff --git a/resources/scripts/components/servers/backups/BackupRow.tsx b/resources/scripts/components/servers/backups/BackupRow.tsx
index 2b857822da7..6a3bb8e68f5 100644
--- a/resources/scripts/components/servers/backups/BackupRow.tsx
+++ b/resources/scripts/components/servers/backups/BackupRow.tsx
@@ -1,23 +1,25 @@
-import { Backup, BackupResponse } from '@/api/server/backups/getBackups'
-import Display from '@/components/elements/displays/DisplayRow'
-import { bytesToString } from '@/util/helpers'
-import { Loader } from '@mantine/core'
-import { formatDistanceToNow } from 'date-fns'
 //@ts-ignore
 import Dots from '@/assets/images/icons/dots-vertical.svg'
-import { useState } from 'react'
-import Menu from '@/components/elements/Menu'
-import { ExclamationCircleIcon } from '@heroicons/react/20/solid'
-import useFlash from '@/util/useFlash'
-import restoreBackup from '@/api/server/backups/restoreBackup'
 import { ServerContext } from '@/state/server'
+import { bytesToString } from '@/util/helpers'
+import useFlash from '@/util/useFlash'
 import useNotify from '@/util/useNotify'
-import deleteBackup from '@/api/server/backups/deleteBackup'
-import { KeyedMutator } from 'swr'
-import Modal from '@/components/elements/Modal'
+import { ExclamationCircleIcon } from '@heroicons/react/20/solid'
+import { Loader } from '@mantine/core'
+import { formatDistanceToNow } from 'date-fns'
+import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import FlashMessageRender from '@/components/elements/FlashMessageRenderer'
+import { KeyedMutator } from 'swr'
+
+import deleteBackup from '@/api/server/backups/deleteBackup'
+import { Backup, BackupResponse } from '@/api/server/backups/getBackups'
+import restoreBackup from '@/api/server/backups/restoreBackup'
+
 import DottedButton from '@/components/elements/DottedButton'
+import FlashMessageRender from '@/components/elements/FlashMessageRenderer'
+import Menu from '@/components/elements/Menu'
+import Modal from '@/components/elements/Modal'
+import Display from '@/components/elements/displays/DisplayRow'
 
 interface Props {
     backup: Backup
@@ -39,7 +41,9 @@ const Dropdown = ({ className, backup, swr: { mutate } }: DropdownProps) => {
     const { t: tStrings } = useTranslation('strings')
     const { clearFlashes, clearAndAddHttpError } = useFlash()
     const server = ServerContext.useStoreState(state => state.server.data!)
-    const setServer = ServerContext.useStoreActions(actions => actions.server.setServer)
+    const setServer = ServerContext.useStoreActions(
+        actions => actions.server.setServer
+    )
     const notify = useNotify()
     const [deleteModalOpen, setDeleteModalOpen] = useState(false)
     const [restoreModalOpen, setRestoreModalOpen] = useState(false)
@@ -78,7 +82,7 @@ const Dropdown = ({ className, backup, swr: { mutate } }: DropdownProps) => {
                         ...data,
                         items: data!.items.filter(b => b.uuid !== backup.uuid),
                         backupCount: data!.backupCount - 1,
-                    } as BackupResponse),
+                    }) as BackupResponse,
                 false
             )
 
@@ -98,7 +102,10 @@ const Dropdown = ({ className, backup, swr: { mutate } }: DropdownProps) => {
 
     return (
         <>
-            <Modal open={deleteModalOpen} onClose={() => setDeleteModalOpen(e => !e)}>
+            <Modal
+                open={deleteModalOpen}
+                onClose={() => setDeleteModalOpen(e => !e)}
+            >
                 <Modal.Header>
                     <Modal.Title>
                         {t('delete_modal.title', {
@@ -107,16 +114,28 @@ const Dropdown = ({ className, backup, swr: { mutate } }: DropdownProps) => {
                     </Modal.Title>
                 </Modal.Header>
                 <Modal.Body>
-                    <Modal.Description>{t('delete_modal.description')}</Modal.Description>
+                    <Modal.Description>
+                        {t('delete_modal.description')}
+                    </Modal.Description>
 
-                    <FlashMessageRender byKey={`servers.backups.${backup.uuid}.delete`} className='py-5' />
+                    <FlashMessageRender
+                        byKey={`servers.backups.${backup.uuid}.delete`}
+                        className='py-5'
+                    />
                 </Modal.Body>
                 <Modal.Actions>
-                    <Modal.Action onClick={() => setDeleteModalOpen(e => !e)}>{tStrings('cancel')}</Modal.Action>
-                    <Modal.Action onClick={handleDelete}>{tStrings('delete')}</Modal.Action>
+                    <Modal.Action onClick={() => setDeleteModalOpen(e => !e)}>
+                        {tStrings('cancel')}
+                    </Modal.Action>
+                    <Modal.Action onClick={handleDelete}>
+                        {tStrings('delete')}
+                    </Modal.Action>
                 </Modal.Actions>
             </Modal>
-            <Modal open={restoreModalOpen} onClose={() => setRestoreModalOpen(e => !e)}>
+            <Modal
+                open={restoreModalOpen}
+                onClose={() => setRestoreModalOpen(e => !e)}
+            >
                 <Modal.Header>
                     <Modal.Title>
                         {t('restore_modal.title', {
@@ -125,13 +144,22 @@ const Dropdown = ({ className, backup, swr: { mutate } }: DropdownProps) => {
                     </Modal.Title>
                 </Modal.Header>
                 <Modal.Body>
-                    <Modal.Description>{t('restore_modal.description')}</Modal.Description>
+                    <Modal.Description>
+                        {t('restore_modal.description')}
+                    </Modal.Description>
 
-                    <FlashMessageRender byKey={`servers.backups.${backup.uuid}.restore`} className='py-5' />
+                    <FlashMessageRender
+                        byKey={`servers.backups.${backup.uuid}.restore`}
+                        className='py-5'
+                    />
                 </Modal.Body>
                 <Modal.Actions>
-                    <Modal.Action onClick={() => setRestoreModalOpen(e => !e)}>{tStrings('cancel')}</Modal.Action>
-                    <Modal.Action onClick={handleRestore}>{tStrings('restore')}</Modal.Action>
+                    <Modal.Action onClick={() => setRestoreModalOpen(e => !e)}>
+                        {tStrings('cancel')}
+                    </Modal.Action>
+                    <Modal.Action onClick={handleRestore}>
+                        {tStrings('restore')}
+                    </Modal.Action>
                 </Modal.Actions>
             </Modal>
             <Menu width={200}>
@@ -140,9 +168,14 @@ const Dropdown = ({ className, backup, swr: { mutate } }: DropdownProps) => {
                 </Menu.Target>
                 <Menu.Dropdown>
                     {backup.isSuccessful ? (
-                        <Menu.Item onClick={() => setRestoreModalOpen(true)}>{tStrings('restore')}</Menu.Item>
+                        <Menu.Item onClick={() => setRestoreModalOpen(true)}>
+                            {tStrings('restore')}
+                        </Menu.Item>
                     ) : null}
-                    <Menu.Item color='red' onClick={() => setDeleteModalOpen(true)}>
+                    <Menu.Item
+                        color='red'
+                        onClick={() => setDeleteModalOpen(true)}
+                    >
                         {tStrings('delete')}
                     </Menu.Item>
                 </Menu.Dropdown>
@@ -153,18 +186,31 @@ const Dropdown = ({ className, backup, swr: { mutate } }: DropdownProps) => {
 
 const BackupRow = ({ backup, swr: { mutate } }: Props) => {
     return (
-        <Display.Row key={backup.uuid} className='grid-cols-1 md:grid-cols-8 text-sm'>
+        <Display.Row
+            key={backup.uuid}
+            className='grid-cols-1 md:grid-cols-8 text-sm'
+        >
             <div className='flex justify-between items-center grow'>
                 <div className='flex items-center space-x-3'>
-                    <p className='overflow-hidden text-ellipsis font-semibold text-foreground'>{backup.name}</p>
+                    <p className='overflow-hidden text-ellipsis font-semibold text-foreground'>
+                        {backup.name}
+                    </p>
                     {!backup.completedAt ? (
                         <Loader size='xs' />
                     ) : (
-                        !backup.isSuccessful && <ExclamationCircleIcon className='h-5 w-5 text-error' />
+                        !backup.isSuccessful && (
+                            <ExclamationCircleIcon className='h-5 w-5 text-error' />
+                        )
                     )}
                 </div>
 
-                {backup.completedAt && <Dropdown swr={{ mutate }} backup={backup} className='md:hidden' />}
+                {backup.completedAt && (
+                    <Dropdown
+                        swr={{ mutate }}
+                        backup={backup}
+                        className='md:hidden'
+                    />
+                )}
             </div>
             <div>{bytesToString(backup.size)}</div>
             <div className='flex justify-between items-center md:col-span-2'>
@@ -175,7 +221,13 @@ const BackupRow = ({ backup, swr: { mutate } }: Props) => {
                     })}
                 </p>
 
-                {backup.completedAt && <Dropdown swr={{ mutate }} backup={backup} className='hidden md:block' />}
+                {backup.completedAt && (
+                    <Dropdown
+                        swr={{ mutate }}
+                        backup={backup}
+                        className='hidden md:block'
+                    />
+                )}
             </div>
         </Display.Row>
     )
diff --git a/resources/scripts/components/servers/backups/BackupsContainer.tsx b/resources/scripts/components/servers/backups/BackupsContainer.tsx
index 8e304245f49..8753b0eb09f 100644
--- a/resources/scripts/components/servers/backups/BackupsContainer.tsx
+++ b/resources/scripts/components/servers/backups/BackupsContainer.tsx
@@ -1,45 +1,55 @@
-import getBackups, { BackupResponse } from '@/api/server/backups/getBackups'
-import Display from '@/components/elements/displays/DisplayRow'
-import Spinner from '@/components/elements/Spinner'
-import ServerContentBlock from '@/components/servers/ServerContentBlock'
 import { ServerContext } from '@/state/server'
+import usePagination from '@/util/usePagination'
 import useSWR from 'swr'
+
+import getBackups, { BackupResponse } from '@/api/server/backups/getBackups'
+
 import Pagination from '@/components/elements/Pagination'
-import usePagination from '@/util/usePagination'
+import Spinner from '@/components/elements/Spinner'
+import Display from '@/components/elements/displays/DisplayRow'
+
+import ServerContentBlock from '@/components/servers/ServerContentBlock'
 import BackupRow from '@/components/servers/backups/BackupRow'
 import CreateBackupButton from '@/components/servers/backups/CreateBackupButton'
 
 const BackupsContainer = () => {
-  const uuid = ServerContext.useStoreState((state) => state.server.data!.uuid)
-
-  const [page, setPage] = usePagination()
-
-  const { data, mutate } = useSWR(['server:backups', uuid, page], () =>
-    getBackups(uuid, {
-      page,
-    })
-  )
-
-  return (
-    <ServerContentBlock showFlashKey='backups' title='Backups'>
-      <CreateBackupButton backupCount={data?.backupCount} swr={{ mutate }} />
-      {!data ? (
-        <Spinner />
-      ) : data.backupCount === 0 ? (
-        <p className='text-sm text-center'>There are no backups</p>
-      ) : (
-        <Pagination data={data} onPageSelect={setPage}>
-          {({ items }) => (
-            <Display.Group>
-              {items.map((backup) => (
-                <BackupRow swr={{mutate}} key={backup.uuid} backup={backup} />
-              ))}
-            </Display.Group>
-          )}
-        </Pagination>
-      )}
-    </ServerContentBlock>
-  )
+    const uuid = ServerContext.useStoreState(state => state.server.data!.uuid)
+
+    const [page, setPage] = usePagination()
+
+    const { data, mutate } = useSWR(['server:backups', uuid, page], () =>
+        getBackups(uuid, {
+            page,
+        })
+    )
+
+    return (
+        <ServerContentBlock showFlashKey='backups' title='Backups'>
+            <CreateBackupButton
+                backupCount={data?.backupCount}
+                swr={{ mutate }}
+            />
+            {!data ? (
+                <Spinner />
+            ) : data.backupCount === 0 ? (
+                <p className='text-sm text-center'>There are no backups</p>
+            ) : (
+                <Pagination data={data} onPageSelect={setPage}>
+                    {({ items }) => (
+                        <Display.Group>
+                            {items.map(backup => (
+                                <BackupRow
+                                    swr={{ mutate }}
+                                    key={backup.uuid}
+                                    backup={backup}
+                                />
+                            ))}
+                        </Display.Group>
+                    )}
+                </Pagination>
+            )}
+        </ServerContentBlock>
+    )
 }
 
 export default BackupsContainer
diff --git a/resources/scripts/components/servers/backups/CreateBackupButton.tsx b/resources/scripts/components/servers/backups/CreateBackupButton.tsx
index 970e1f56568..8db25181b56 100644
--- a/resources/scripts/components/servers/backups/CreateBackupButton.tsx
+++ b/resources/scripts/components/servers/backups/CreateBackupButton.tsx
@@ -1,20 +1,22 @@
+import { useStoreState } from '@/state'
+import { ServerContext } from '@/state/server'
 import { useFlashKey } from '@/util/useFlash'
-import createBackup from '@/api/server/backups/createBackup'
+import { zodResolver } from '@hookform/resolvers/zod'
+import { Badge, Tooltip } from '@mantine/core'
 import { useState } from 'react'
-import { ServerContext } from '@/state/server'
+import { FormProvider, useForm } from 'react-hook-form'
+import { useTranslation } from 'react-i18next'
 import { KeyedMutator } from 'swr'
+import { z } from 'zod'
+
+import createBackup from '@/api/server/backups/createBackup'
 import { BackupResponse } from '@/api/server/backups/getBackups'
-import Modal from '@/components/elements/Modal'
-import FlashMessageRender from '@/components/elements/FlashMessageRenderer'
+
 import Button from '@/components/elements/Button'
-import { Badge, Tooltip } from '@mantine/core'
-import { useStoreState } from '@/state'
-import { useTranslation } from 'react-i18next'
-import { z } from 'zod'
-import { FormProvider, useForm } from 'react-hook-form'
-import { zodResolver } from '@hookform/resolvers/zod'
-import TextInputForm from '@/components/elements/forms/TextInputForm'
+import FlashMessageRender from '@/components/elements/FlashMessageRenderer'
+import Modal from '@/components/elements/Modal'
 import SelectForm from '@/components/elements/forms/SelectForm'
+import TextInputForm from '@/components/elements/forms/TextInputForm'
 
 interface Props {
     swr: {
@@ -28,8 +30,12 @@ const CreateBackupButton = ({ swr: { mutate }, backupCount }: Props) => {
     const { t: tStrings } = useTranslation('strings')
     const uuid = ServerContext.useStoreState(state => state.server.data!.uuid)
     const [open, setOpen] = useState(false)
-    const { clearFlashes, clearAndAddHttpError } = useFlashKey(`servers.${uuid}.backups.create`)
-    const backupLimit = ServerContext.useStoreState(state => state.server.data!.limits.backups)
+    const { clearFlashes, clearAndAddHttpError } = useFlashKey(
+        `servers.${uuid}.backups.create`
+    )
+    const backupLimit = ServerContext.useStoreState(
+        state => state.server.data!.limits.backups
+    )
     const theme = useStoreState(state => state.settings.data?.theme)
 
     const schema = z.object({
@@ -42,7 +48,9 @@ const CreateBackupButton = ({ swr: { mutate }, backupCount }: Props) => {
         resolver: zodResolver(schema),
         defaultValues: {
             name: '',
-            compressionType: 'zstd' as z.infer<typeof schema>['compressionType'],
+            compressionType: 'zstd' as z.infer<
+                typeof schema
+            >['compressionType'],
             mode: 'snapshot' as z.infer<typeof schema>['mode'],
         },
     })
@@ -62,7 +70,7 @@ const CreateBackupButton = ({ swr: { mutate }, backupCount }: Props) => {
                         ...data,
                         items: [backup].concat(data!.items),
                         backupCount: data!.backupCount + 1,
-                    } as BackupResponse),
+                    }) as BackupResponse,
                 false
             )
 
@@ -100,11 +108,20 @@ const CreateBackupButton = ({ swr: { mutate }, backupCount }: Props) => {
                 <FormProvider {...methods}>
                     <form onSubmit={methods.handleSubmit(submit)}>
                         <Modal.Body>
-                            <Modal.Description bottomMargin>{t('create_modal.description')}</Modal.Description>
+                            <Modal.Description bottomMargin>
+                                {t('create_modal.description')}
+                            </Modal.Description>
 
-                            <FlashMessageRender byKey={`servers.${uuid}.backups.create`} className='mb-5' />
+                            <FlashMessageRender
+                                byKey={`servers.${uuid}.backups.create`}
+                                className='mb-5'
+                            />
 
-                            <TextInputForm name='name' placeholder='Name' label={tStrings('name')} />
+                            <TextInputForm
+                                name='name'
+                                placeholder='Name'
+                                label={tStrings('name')}
+                            />
 
                             <div className='grid sm:grid-cols-2 mt-3 gap-3'>
                                 <SelectForm
@@ -112,14 +129,21 @@ const CreateBackupButton = ({ swr: { mutate }, backupCount }: Props) => {
                                     name='compressionType'
                                     data={compressionTypes}
                                 />
-                                <SelectForm label={t('create_modal.mode')} name='mode' data={modes} />
+                                <SelectForm
+                                    label={t('create_modal.mode')}
+                                    name='mode'
+                                    data={modes}
+                                />
                             </div>
                         </Modal.Body>
                         <Modal.Actions>
                             <Modal.Action type='button' onClick={handleClose}>
                                 {tStrings('cancel')}
                             </Modal.Action>
-                            <Modal.Action type='submit' loading={methods.formState.isSubmitting}>
+                            <Modal.Action
+                                type='submit'
+                                loading={methods.formState.isSubmitting}
+                            >
                                 {tStrings('create')}
                             </Modal.Action>
                         </Modal.Actions>
@@ -135,13 +159,21 @@ const CreateBackupButton = ({ swr: { mutate }, backupCount }: Props) => {
                     position='bottom'
                     withArrow
                 >
-                    <Badge color={theme === 'dark' ? 'gray' : 'dark'} variant='outline'>
-                        {backupCount ?? 0}/{backupLimit ?? tStrings('unlimited')}
+                    <Badge
+                        color={theme === 'dark' ? 'gray' : 'dark'}
+                        variant='outline'
+                    >
+                        {backupCount ?? 0}/
+                        {backupLimit ?? tStrings('unlimited')}
                     </Badge>
                 </Tooltip>
                 <Button
                     disabled={
-                        backupCount !== undefined ? (backupLimit !== null ? backupCount >= backupLimit : false) : true
+                        backupCount !== undefined
+                            ? backupLimit !== null
+                                ? backupCount >= backupLimit
+                                : false
+                            : true
                     }
                     onClick={() => setOpen(true)}
                     variant='filled'
diff --git a/resources/scripts/components/servers/overview/ServerAdminBlock.tsx b/resources/scripts/components/servers/overview/ServerAdminBlock.tsx
index b068ddf06da..96290315553 100644
--- a/resources/scripts/components/servers/overview/ServerAdminBlock.tsx
+++ b/resources/scripts/components/servers/overview/ServerAdminBlock.tsx
@@ -1,8 +1,9 @@
-import Button from '@/components/elements/Button'
-import Card from '@/components/elements/Card'
 import { ServerContext } from '@/state/server'
-import { Link } from 'react-router-dom'
 import { useTranslation } from 'react-i18next'
+import { Link } from 'react-router-dom'
+
+import Button from '@/components/elements/Button'
+import Card from '@/components/elements/Card'
 
 const ServerAdminBlock = () => {
     const serverId = ServerContext.useStoreState(state => state.server.data!.id)
@@ -12,7 +13,9 @@ const ServerAdminBlock = () => {
         <Card className='flex flex-col justify-between col-span-10 md:col-span-5 relative'>
             <div>
                 <h5 className='h5'>{t('server_config.title')}</h5>
-                <p className='description-small mt-1'>{t('server_config.description')}</p>
+                <p className='description-small mt-1'>
+                    {t('server_config.description')}
+                </p>
             </div>
             <div className='flex mt-6 justify-end'>
                 <Link to={`/admin/servers/${serverId}`}>
diff --git a/resources/scripts/components/servers/overview/ServerDetailsBlock.tsx b/resources/scripts/components/servers/overview/ServerDetailsBlock.tsx
index cd1956f0417..0774b660886 100644
--- a/resources/scripts/components/servers/overview/ServerDetailsBlock.tsx
+++ b/resources/scripts/components/servers/overview/ServerDetailsBlock.tsx
@@ -1,14 +1,20 @@
 import { ServerContext } from '@/state/server'
-import { capitalize, convertTimeToSmallest, formatBytes, Sizes } from '@/util/helpers'
+import { useChartTickLabel } from '@/util/chart'
+import {
+    Sizes,
+    capitalize,
+    convertTimeToSmallest,
+    formatBytes,
+} from '@/util/helpers'
 import useNotify from '@/util/useNotify'
 import styled from '@emotion/styled'
 import { Badge, RingProgress, Skeleton } from '@mantine/core'
 import { useEffect, useMemo, useRef } from 'react'
-import tw from 'twin.macro'
-import Card from '@/components/elements/Card'
 import { Line } from 'react-chartjs-2'
-import { useChartTickLabel } from '@/util/chart'
 import { useTranslation } from 'react-i18next'
+import tw from 'twin.macro'
+
+import Card from '@/components/elements/Card'
 
 export const StatRow = styled.div`
     ${tw`grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 border border-[#eaeaea] dark:border-[#333333] shadow-light dark:shadow-none rounded bg-white dark:bg-black`}
@@ -47,7 +53,9 @@ const ServerDetailsBlock = () => {
     const uuid = ServerContext.useStoreState(state => state.server.data!.uuid)
     const server = ServerContext.useStoreState(state => state.server.data!)
     const status = ServerContext.useStoreState(state => state.status.data)
-    const getStatus = ServerContext.useStoreActions(actions => actions.status.getStatus)
+    const getStatus = ServerContext.useStoreActions(
+        actions => actions.status.getStatus
+    )
     const isUpdating = useRef(true)
     const notify = useNotify()
 
@@ -89,22 +97,38 @@ const ServerDetailsBlock = () => {
     const uptime = convertTimeToSmallest(status?.uptime || 0)
 
     const bandwidth = useMemo(() => {
-        const total = server.limits.bandwidth ? formatBytes(server.limits.bandwidth) : undefined
+        const total = server.limits.bandwidth
+            ? formatBytes(server.limits.bandwidth)
+            : undefined
         const percentage = server.limits.bandwidth
-            ? Math.floor((server.usages.bandwidth / server.limits.bandwidth) * 10000) / 100
+            ? Math.floor(
+                  (server.usages.bandwidth / server.limits.bandwidth) * 10000
+              ) / 100
             : 0
-        const used = formatBytes(server.usages.bandwidth, undefined, total?.unit ? total.unit : undefined)
+        const used = formatBytes(
+            server.usages.bandwidth,
+            undefined,
+            total?.unit ? total.unit : undefined
+        )
 
         return { used, total, percentage }
     }, [server])
 
     const cpuGraph = useChartTickLabel('CPU', 100, '%', 2)
-    const memoryGraph = useChartTickLabel('Memory', memory.total.size, memory.total.unit, 2)
+    const memoryGraph = useChartTickLabel(
+        'Memory',
+        memory.total.size,
+        memory.total.unit,
+        2
+    )
 
     useEffect(() => {
         if (status) {
             cpuGraph.push(Math.floor(status.cpuUsed * 10000) / 100)
-            memoryGraph.push(formatBytes(status.memoryUsed, 2, memory.total.unit as Sizes).size)
+            memoryGraph.push(
+                formatBytes(status.memoryUsed, 2, memory.total.unit as Sizes)
+                    .size
+            )
         }
     }, [status])
 
@@ -120,11 +144,15 @@ const ServerDetailsBlock = () => {
                             <div className='grid place-items-center h-full'>
                                 <div
                                     className={`w-3 h-3 rounded-full transition-colors ${
-                                        status.state === 'running' ? 'bg-green-500' : 'bg-red-500'
+                                        status.state === 'running'
+                                            ? 'bg-green-500'
+                                            : 'bg-red-500'
                                     }`}
                                 ></div>
                             </div>
-                            <p className='text-2xl font-semibold text-foreground'>{t(`states.${status.state}`)}</p>
+                            <p className='text-2xl font-semibold text-foreground'>
+                                {t(`states.${status.state}`)}
+                            </p>
                         </div>
                     </div>
                     <div>
@@ -145,8 +173,12 @@ const ServerDetailsBlock = () => {
                     <div>
                         <p>{t('uptime')}</p>
                         <div className='flex space-x-2 items-end mt-1'>
-                            <p className='text-2xl font-semibold text-foreground'>{Math.floor(uptime.time)}</p>
-                            <p className='text-sm font-semibold description mb-[0.3rem]'>{uptime.unit}</p>
+                            <p className='text-2xl font-semibold text-foreground'>
+                                {Math.floor(uptime.time)}
+                            </p>
+                            <p className='text-sm font-semibold description mb-[0.3rem]'>
+                                {uptime.unit}
+                            </p>
                         </div>
                     </div>
                 </StatRow>
@@ -165,14 +197,25 @@ const ServerDetailsBlock = () => {
                         sections={[
                             {
                                 value: bandwidth.percentage,
-                                color: bandwidth.percentage < 100 ? 'green' : 'yellow',
+                                color:
+                                    bandwidth.percentage < 100
+                                        ? 'green'
+                                        : 'yellow',
                             },
                         ]}
                     />
                 </div>
-                <Badge className='!normal-case' size='lg' color='gray' variant='outline'>
-                    {bandwidth.used.size} {bandwidth.total ? '' : bandwidth.used.unit} /{' '}
-                    {bandwidth.total ? `${bandwidth.total.size} ${bandwidth.total.unit}` : tStrings('unlimited')}
+                <Badge
+                    className='!normal-case'
+                    size='lg'
+                    color='gray'
+                    variant='outline'
+                >
+                    {bandwidth.used.size}{' '}
+                    {bandwidth.total ? '' : bandwidth.used.unit} /{' '}
+                    {bandwidth.total
+                        ? `${bandwidth.total.size} ${bandwidth.total.unit}`
+                        : tStrings('unlimited')}
                 </Badge>
             </Card>
 
diff --git a/resources/scripts/components/servers/overview/ServerNetworkBlock.tsx b/resources/scripts/components/servers/overview/ServerNetworkBlock.tsx
index ee91415006d..5962d68d582 100644
--- a/resources/scripts/components/servers/overview/ServerNetworkBlock.tsx
+++ b/resources/scripts/components/servers/overview/ServerNetworkBlock.tsx
@@ -1,17 +1,22 @@
-import { Dd, Dt } from '@/components/dashboard/ServerCard'
-import Card from '@/components/elements/Card'
-import Display from '@/components/elements/displays/DisplayRow'
 import { ServerContext } from '@/state/server'
 import { useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
 
+import Card from '@/components/elements/Card'
+import Display from '@/components/elements/displays/DisplayRow'
+
+import { Dd, Dt } from '@/components/dashboard/ServerCard'
+
 const ServerNetworkBlock = () => {
     const server = ServerContext.useStoreState(state => state.server.data!)
     const { t } = useTranslation('server.settings')
     const { t: tStrings } = useTranslation('strings')
 
     const addresses = useMemo(
-        () => [...server.limits.addresses.ipv4, ...server.limits.addresses.ipv6],
+        () => [
+            ...server.limits.addresses.ipv4,
+            ...server.limits.addresses.ipv6,
+        ],
         [server.limits.addresses]
     )
 
@@ -26,19 +31,30 @@ const ServerNetworkBlock = () => {
                     ) : (
                         <Display.Group className='mt-3'>
                             {addresses.map(ip => (
-                                <Display.Row key={ip.id} className='grid-cols-1 md:grid-cols-3 text-sm'>
+                                <Display.Row
+                                    key={ip.id}
+                                    className='grid-cols-1 md:grid-cols-3 text-sm'
+                                >
                                     <div className='overflow-hidden'>
-                                        <p className='description-small !text-xs'>{tStrings('address_one')}</p>
+                                        <p className='description-small !text-xs'>
+                                            {tStrings('address_one')}
+                                        </p>
                                         <p className='font-semibold truncate text-foreground overflow-hidden overflow-ellipsis'>
                                             {ip.address}/{ip.cidr}
                                         </p>
                                     </div>
                                     <div>
-                                        <p className='description-small !text-xs'>{tStrings('gateway')}</p>
-                                        <p className='text-foreground font-semibold'>{ip.gateway}</p>
+                                        <p className='description-small !text-xs'>
+                                            {tStrings('gateway')}
+                                        </p>
+                                        <p className='text-foreground font-semibold'>
+                                            {ip.gateway}
+                                        </p>
                                     </div>
                                     <div>
-                                        <p className='description-small !text-xs'>{tStrings('mac_address')}</p>
+                                        <p className='description-small !text-xs'>
+                                            {tStrings('mac_address')}
+                                        </p>
                                         <p className='text-foreground font-semibold'>
                                             {ip.macAddress ?? tStrings('none')}
                                         </p>
diff --git a/resources/scripts/components/servers/overview/ServerOverviewContainer.tsx b/resources/scripts/components/servers/overview/ServerOverviewContainer.tsx
index 3b1bbdd0f73..e87c3e65b2d 100644
--- a/resources/scripts/components/servers/overview/ServerOverviewContainer.tsx
+++ b/resources/scripts/components/servers/overview/ServerOverviewContainer.tsx
@@ -1,24 +1,25 @@
+import { useStoreState } from '@/state'
+
+import ServerContentBlock from '@/components/servers/ServerContentBlock'
 import ServerAdminBlock from '@/components/servers/overview/ServerAdminBlock'
 import ServerDetailsBlock from '@/components/servers/overview/ServerDetailsBlock'
 import ServerNetworkBlock from '@/components/servers/overview/ServerNetworkBlock'
 import ServerPowerBlock from '@/components/servers/overview/ServerPowerBlock'
 import ServerTerminalBlock from '@/components/servers/overview/ServerTerminalBlock'
-import ServerContentBlock from '@/components/servers/ServerContentBlock'
-import { useStoreState } from '@/state'
 
 const ServerOverviewContainer = () => {
-  const rootAdmin = useStoreState(state => state.user.data!.rootAdmin)
-  return (
-    <ServerContentBlock title='Overview'>
-      <ServerPowerBlock />
-      <div className='grid grid-cols-10 gap-6'>
-        <ServerDetailsBlock />
-        <ServerNetworkBlock />
-        <ServerTerminalBlock />
-        {rootAdmin && <ServerAdminBlock />}
-      </div>
-    </ServerContentBlock>
-  )
+    const rootAdmin = useStoreState(state => state.user.data!.rootAdmin)
+    return (
+        <ServerContentBlock title='Overview'>
+            <ServerPowerBlock />
+            <div className='grid grid-cols-10 gap-6'>
+                <ServerDetailsBlock />
+                <ServerNetworkBlock />
+                <ServerTerminalBlock />
+                {rootAdmin && <ServerAdminBlock />}
+            </div>
+        </ServerContentBlock>
+    )
 }
 
 export default ServerOverviewContainer
diff --git a/resources/scripts/components/servers/overview/ServerPowerBlock.tsx b/resources/scripts/components/servers/overview/ServerPowerBlock.tsx
index f0c83059a95..2c39fc5f88d 100644
--- a/resources/scripts/components/servers/overview/ServerPowerBlock.tsx
+++ b/resources/scripts/components/servers/overview/ServerPowerBlock.tsx
@@ -1,9 +1,11 @@
-import updateStatus, { PowerAction } from '@/api/server/updateState'
-import Button from '@/components/elements/Button'
 import { ServerContext } from '@/state/server'
 import useNotify from '@/util/useNotify'
 import { useTranslation } from 'react-i18next'
 
+import updateStatus, { PowerAction } from '@/api/server/updateState'
+
+import Button from '@/components/elements/Button'
+
 const ServerPowerBlock = () => {
     const { t } = useTranslation('server.overview')
     const { t: tStrings } = useTranslation('strings')
@@ -14,10 +16,16 @@ const ServerPowerBlock = () => {
     const update = (state: PowerAction) => {
         updateStatus(uuid!, state)
             .then(() =>
-                notify({ message: t('notices.power_action_sent_success'), color: 'green' })
+                notify({
+                    message: t('notices.power_action_sent_success'),
+                    color: 'green',
+                })
             )
             .catch(() =>
-                notify({ message: t('notices.power_action_sent_fail'), color: 'red' })
+                notify({
+                    message: t('notices.power_action_sent_fail'),
+                    color: 'red',
+                })
             )
     }
 
@@ -30,7 +38,11 @@ const ServerPowerBlock = () => {
             >
                 {t('power_actions.start')}
             </Button>
-            <Button className='transition-colors' disabled={state !== 'running'} onClick={() => update('restart')}>
+            <Button
+                className='transition-colors'
+                disabled={state !== 'running'}
+                onClick={() => update('restart')}
+            >
                 {t('power_actions.restart')}
             </Button>
             <Button
diff --git a/resources/scripts/components/servers/overview/ServerTerminalBlock.tsx b/resources/scripts/components/servers/overview/ServerTerminalBlock.tsx
index b1674607d75..89fc2359257 100644
--- a/resources/scripts/components/servers/overview/ServerTerminalBlock.tsx
+++ b/resources/scripts/components/servers/overview/ServerTerminalBlock.tsx
@@ -1,9 +1,10 @@
-import Card from '@/components/elements/Card'
 import { ServerContext } from '@/state/server'
 import { ArrowTopRightOnSquareIcon } from '@heroicons/react/20/solid'
 import { Button } from '@mantine/core'
-import { useNavigate } from 'react-router-dom'
 import { useTranslation } from 'react-i18next'
+import { useNavigate } from 'react-router-dom'
+
+import Card from '@/components/elements/Card'
 
 const ServerTerminalBlock = () => {
     const uuid = ServerContext.useStoreState(state => state.server.data!.uuid)
@@ -13,30 +14,48 @@ const ServerTerminalBlock = () => {
     const launch = (useXterm: boolean = false, popup: boolean = false) => {
         if (popup) {
             window.open(
-                `/servers/${uuid}/terminal?type=${useXterm ? 'xtermjs' : 'novnc'}`,
+                `/servers/${uuid}/terminal?type=${
+                    useXterm ? 'xtermjs' : 'novnc'
+                }`,
                 'Terminal',
                 'width=800,height=600'
             )
         } else {
-            window.open(`/servers/${uuid}/terminal?type=${useXterm ? 'xtermjs' : 'novnc'}`, '_blank')
+            window.open(
+                `/servers/${uuid}/terminal?type=${
+                    useXterm ? 'xtermjs' : 'novnc'
+                }`,
+                '_blank'
+            )
         }
     }
 
     return (
         <Card className='flex flex-col col-span-10 md:col-span-5'>
             <h5 className='h5'>{t('terminal.title')}</h5>
-            <p className='description-small mt-1'>{t('terminal.description')}</p>
+            <p className='description-small mt-1'>
+                {t('terminal.description')}
+            </p>
             <div className='grid lg:grid-cols-2 mt-6'>
                 <div className='flex flex-col justify-between border-b lg:border-b-0 lg:border-r border-accent-200 lg:pr-5 pb-5 lg:py-5'>
                     <div>
                         <h6 className='h6'>noVNC</h6>
-                        <p className='description-small mt-1'>{t('terminal.novnc_description')}</p>
+                        <p className='description-small mt-1'>
+                            {t('terminal.novnc_description')}
+                        </p>
                     </div>
                     <Button.Group className='mt-6'>
-                        <Button className='grow' variant='outline' onClick={() => launch()}>
+                        <Button
+                            className='grow'
+                            variant='outline'
+                            onClick={() => launch()}
+                        >
                             {tStrings('launch')}
                         </Button>
-                        <Button variant='outline' onClick={() => launch(false, true)}>
+                        <Button
+                            variant='outline'
+                            onClick={() => launch(false, true)}
+                        >
                             <ArrowTopRightOnSquareIcon className='w-4 h-4' />
                         </Button>
                     </Button.Group>
@@ -44,13 +63,22 @@ const ServerTerminalBlock = () => {
                 <div className='flex flex-col justify-between lg:pl-5 pt-5 lg:py-5'>
                     <div>
                         <h6 className='h6'>xTerm.js</h6>
-                        <p className='description-small mt-1'>{t('terminal.xtermjs_description')}</p>
+                        <p className='description-small mt-1'>
+                            {t('terminal.xtermjs_description')}
+                        </p>
                     </div>
                     <Button.Group className='mt-6'>
-                        <Button variant='outline' className='grow' onClick={() => launch(true)}>
+                        <Button
+                            variant='outline'
+                            className='grow'
+                            onClick={() => launch(true)}
+                        >
                             {tStrings('launch')}
                         </Button>
-                        <Button variant='outline' onClick={() => launch(true, true)}>
+                        <Button
+                            variant='outline'
+                            onClick={() => launch(true, true)}
+                        >
                             <ArrowTopRightOnSquareIcon className='w-4 h-4' />
                         </Button>
                     </Button.Group>
diff --git a/resources/scripts/components/servers/settings/GeneralContainer.tsx b/resources/scripts/components/servers/settings/GeneralContainer.tsx
index ff97a56f3e9..369452cb944 100644
--- a/resources/scripts/components/servers/settings/GeneralContainer.tsx
+++ b/resources/scripts/components/servers/settings/GeneralContainer.tsx
@@ -2,7 +2,6 @@ import ReinstallServerCard from '@/components/servers/settings/partials/general/
 import ServerInfoCard from '@/components/servers/settings/partials/general/ServerInfoCard'
 
 const GeneralContainer = () => {
-
     return (
         <>
             <ServerInfoCard />
diff --git a/resources/scripts/components/servers/settings/HardwareContainer.tsx b/resources/scripts/components/servers/settings/HardwareContainer.tsx
index 0c4a3c64998..fb25b8afeb0 100644
--- a/resources/scripts/components/servers/settings/HardwareContainer.tsx
+++ b/resources/scripts/components/servers/settings/HardwareContainer.tsx
@@ -1,6 +1,6 @@
-import IsoCard from '@/components/servers/settings/partials/hardware/IsoCard'
 import BootOrderCard from '@/components/servers/settings/partials/hardware/BootOrderCard'
 import HardwareDetailsCard from '@/components/servers/settings/partials/hardware/HardwareDetailsCard'
+import IsoCard from '@/components/servers/settings/partials/hardware/IsoCard'
 
 const HardwareContainer = () => (
     <>
diff --git a/resources/scripts/components/servers/settings/ServerSettingsContainer.tsx b/resources/scripts/components/servers/settings/ServerSettingsContainer.tsx
index ad2f86b38e8..546474890b9 100644
--- a/resources/scripts/components/servers/settings/ServerSettingsContainer.tsx
+++ b/resources/scripts/components/servers/settings/ServerSettingsContainer.tsx
@@ -1,28 +1,35 @@
-import ServerContentBlock from '@/components/servers/ServerContentBlock'
 import SettingsLayout from '@/components/elements/layouts/SettingsLayout'
 
+import ServerContentBlock from '@/components/servers/ServerContentBlock'
+
 const ServerSettingsContainer = () => {
     return (
         <SettingsLayout
             indexPattern='/servers/:id/settings'
             defaultUrl='/servers/:id/settings/general'
-            contentBlock={(props) => <ServerContentBlock title='Server Settings' showFlashKey='server:settings' {...props}/>}
+            contentBlock={props => (
+                <ServerContentBlock
+                    title='Server Settings'
+                    showFlashKey='server:settings'
+                    {...props}
+                />
+            )}
             routes={[
                 {
                     path: '/servers/:id/settings/general',
-                    name: 'General'
+                    name: 'General',
                 },
                 {
                     path: '/servers/:id/settings/hardware',
-                    name: 'Hardware'
+                    name: 'Hardware',
                 },
                 {
                     path: '/servers/:id/settings/network',
-                    name: 'Network'
+                    name: 'Network',
                 },
                 {
                     path: '/servers/:id/settings/security',
-                    name: 'Security'
+                    name: 'Security',
                 },
             ]}
         />
diff --git a/resources/scripts/components/servers/settings/TemplatesSelectForm.tsx b/resources/scripts/components/servers/settings/TemplatesSelectForm.tsx
index 5250b9594dc..29518ce0ac7 100644
--- a/resources/scripts/components/servers/settings/TemplatesSelectForm.tsx
+++ b/resources/scripts/components/servers/settings/TemplatesSelectForm.tsx
@@ -1,9 +1,11 @@
 import { ServerContext } from '@/state/server'
-import useTemplateGroupsSWR from '@/api/server/settings/useTemplateGroupsSWR'
 import { useMemo, useState } from 'react'
-import Select from '@/components/elements/inputs/Select'
 import { useFormContext } from 'react-hook-form'
+
+import useTemplateGroupsSWR from '@/api/server/settings/useTemplateGroupsSWR'
+
 import SelectForm from '@/components/elements/forms/SelectForm'
+import Select from '@/components/elements/inputs/Select'
 
 interface Props {
     disabled?: boolean
@@ -26,7 +28,9 @@ const TemplatesSelectForm = ({ disabled }: Props) => {
         }) ?? []
     const [groupUuid, setGroupUuid] = useState('')
     const templates = useMemo(
-        () => templateGroups.find(group => group.value === groupUuid)?.templates ?? [],
+        () =>
+            templateGroups.find(group => group.value === groupUuid)
+                ?.templates ?? [],
         [templateGroups, groupUuid]
     )
     const handleGroupsOnChange = (uuid: string | null) => {
diff --git a/resources/scripts/components/servers/settings/partials/general/ReinstallServerCard.tsx b/resources/scripts/components/servers/settings/partials/general/ReinstallServerCard.tsx
index 8d8b546ab17..eb3771a8c40 100644
--- a/resources/scripts/components/servers/settings/partials/general/ReinstallServerCard.tsx
+++ b/resources/scripts/components/servers/settings/partials/general/ReinstallServerCard.tsx
@@ -1,11 +1,3 @@
-import reinstallServer from '@/api/server/settings/reinstallServer'
-import Button from '@/components/elements/Button'
-import FlashMessageRender from '@/components/elements/FlashMessageRenderer'
-import FormCard from '@/components/elements/FormCard'
-import Modal from '@/components/elements/Modal'
-import CheckboxForm from '@/components/elements/forms/CheckboxForm'
-import TextInputForm from '@/components/elements/forms/TextInputForm'
-import TemplatesSelectForm from '@/components/servers/settings/TemplatesSelectForm'
 import { ServerContext } from '@/state/server'
 import { useFlashKey } from '@/util/useFlash'
 import { englishKeyboardCharacters, password } from '@/util/validation'
@@ -15,13 +7,28 @@ import { FormProvider, useForm } from 'react-hook-form'
 import { useTranslation } from 'react-i18next'
 import { z } from 'zod'
 
+import reinstallServer from '@/api/server/settings/reinstallServer'
+
+import Button from '@/components/elements/Button'
+import FlashMessageRender from '@/components/elements/FlashMessageRenderer'
+import FormCard from '@/components/elements/FormCard'
+import Modal from '@/components/elements/Modal'
+import CheckboxForm from '@/components/elements/forms/CheckboxForm'
+import TextInputForm from '@/components/elements/forms/TextInputForm'
+
+import TemplatesSelectForm from '@/components/servers/settings/TemplatesSelectForm'
+
 const ReinstallServerCard = () => {
     const { t } = useTranslation('server.settings')
     const { t: tStrings } = useTranslation('strings')
     const [isModalOpen, setIsModalOpen] = useState(false)
     const server = ServerContext.useStoreState(state => state.server.data!)
-    const { clearFlashes, clearAndAddHttpError } = useFlashKey(`servers.${server.uuid}.settings.general.reinstall`)
-    const setServer = ServerContext.useStoreActions(state => state.server.setServer)
+    const { clearFlashes, clearAndAddHttpError } = useFlashKey(
+        `servers.${server.uuid}.settings.general.reinstall`
+    )
+    const setServer = ServerContext.useStoreActions(
+        state => state.server.setServer
+    )
 
     const schema = z.object({
         templateUuid: z.string().nonempty(),
@@ -60,11 +67,18 @@ const ReinstallServerCard = () => {
                     <Modal.Title>{t('reinstall.modal.title')}</Modal.Title>
                 </Modal.Header>
                 <Modal.Body>
-                    <Modal.Description bottomMargin>{t('reinstall.modal.description')}</Modal.Description>
+                    <Modal.Description bottomMargin>
+                        {t('reinstall.modal.description')}
+                    </Modal.Description>
                 </Modal.Body>
                 <Modal.Actions>
-                    <Modal.Action onClick={() => setIsModalOpen(false)}>{tStrings('cancel')}</Modal.Action>
-                    <Modal.Action loading={form.formState.isSubmitting} onClick={form.handleSubmit(submit)}>
+                    <Modal.Action onClick={() => setIsModalOpen(false)}>
+                        {tStrings('cancel')}
+                    </Modal.Action>
+                    <Modal.Action
+                        loading={form.formState.isSubmitting}
+                        onClick={form.handleSubmit(submit)}
+                    >
                         {tStrings('confirm')}
                     </Modal.Action>
                 </Modal.Actions>
@@ -77,7 +91,9 @@ const ReinstallServerCard = () => {
                             className='mt-3'
                             byKey={`servers.${server.uuid}.settings.general.reinstall`}
                         />
-                        <p className='description-small mt-3'>{t('reinstall.description')}</p>
+                        <p className='description-small mt-3'>
+                            {t('reinstall.description')}
+                        </p>
                         <div className='flex flex-col space-y-3 mt-3'>
                             <TemplatesSelectForm />
                             <TextInputForm
@@ -87,7 +103,9 @@ const ReinstallServerCard = () => {
                             />
                             <CheckboxForm
                                 name={'startOnCompletion'}
-                                label={t('reinstall.start_server_after_installing')}
+                                label={t(
+                                    'reinstall.start_server_after_installing'
+                                )}
                             />
                         </div>
                     </FormCard.Body>
diff --git a/resources/scripts/components/servers/settings/partials/general/ServerInfoCard.tsx b/resources/scripts/components/servers/settings/partials/general/ServerInfoCard.tsx
index 3ee5e5a3327..d7d1181a377 100644
--- a/resources/scripts/components/servers/settings/partials/general/ServerInfoCard.tsx
+++ b/resources/scripts/components/servers/settings/partials/general/ServerInfoCard.tsx
@@ -1,8 +1,3 @@
-import renameServer from '@/api/server/settings/renameServer'
-import Button from '@/components/elements/Button'
-import FlashMessageRender from '@/components/elements/FlashMessageRenderer'
-import FormCard from '@/components/elements/FormCard'
-import TextInputForm from '@/components/elements/forms/TextInputForm'
 import { ServerContext } from '@/state/server'
 import { useFlashKey } from '@/util/useFlash'
 import { hostname } from '@/util/validation'
@@ -11,12 +6,23 @@ import { FormProvider, useForm } from 'react-hook-form'
 import { useTranslation } from 'react-i18next'
 import { z } from 'zod'
 
+import renameServer from '@/api/server/settings/renameServer'
+
+import Button from '@/components/elements/Button'
+import FlashMessageRender from '@/components/elements/FlashMessageRenderer'
+import FormCard from '@/components/elements/FormCard'
+import TextInputForm from '@/components/elements/forms/TextInputForm'
+
 const ServerInfoCard = () => {
-    const { t} = useTranslation('server.settings')
+    const { t } = useTranslation('server.settings')
     const { t: tStrings } = useTranslation('strings')
     const server = ServerContext.useStoreState(state => state.server.data!)
-    const setServer = ServerContext.useStoreActions(actions => actions.server.setServer)
-    const { clearFlashes, clearAndAddHttpError } = useFlashKey(`servers.${server.uuid}.settings.general.info`)
+    const setServer = ServerContext.useStoreActions(
+        actions => actions.server.setServer
+    )
+    const { clearFlashes, clearAndAddHttpError } = useFlashKey(
+        `servers.${server.uuid}.settings.general.info`
+    )
 
     const schema = z.object({
         name: z.string().nonempty().max(40),
@@ -28,7 +34,7 @@ const ServerInfoCard = () => {
         defaultValues: {
             name: server.name,
             hostname: server.hostname,
-        }
+        },
     })
 
     const submit = async (data: z.infer<typeof schema>) => {
@@ -49,36 +55,39 @@ const ServerInfoCard = () => {
     return (
         <FormCard className='w-full'>
             <FormProvider {...methods}>
-
-            <form onSubmit={methods.handleSubmit(submit)}>
-                <FormCard.Body>
-                    <FormCard.Title>{t('display_info.title')}</FormCard.Title>
-                    <div className='mt-3'>
-                        <FlashMessageRender byKey={`servers.${server.uuid}.settings.general.info`} />
-                        <TextInputForm
-                            name='name'
-                            label={tStrings('display_name')}
-                        />
-                        <TextInputForm
-                            name='hostname'
-                            className='mt-3'
-                            label={tStrings('hostname')}
-                        />
-                    </div>
-                </FormCard.Body>
-                <FormCard.Footer>
-                    <Button
-                        disabled={!methods.formState.isDirty}
-                        loading={methods.formState.isSubmitting}
-                        type='submit'
-                        variant='filled'
-                        color='success'
-                        size='sm'
-                    >
-                        {tStrings('save')}
-                    </Button>
-                </FormCard.Footer>
-            </form>
+                <form onSubmit={methods.handleSubmit(submit)}>
+                    <FormCard.Body>
+                        <FormCard.Title>
+                            {t('display_info.title')}
+                        </FormCard.Title>
+                        <div className='mt-3'>
+                            <FlashMessageRender
+                                byKey={`servers.${server.uuid}.settings.general.info`}
+                            />
+                            <TextInputForm
+                                name='name'
+                                label={tStrings('display_name')}
+                            />
+                            <TextInputForm
+                                name='hostname'
+                                className='mt-3'
+                                label={tStrings('hostname')}
+                            />
+                        </div>
+                    </FormCard.Body>
+                    <FormCard.Footer>
+                        <Button
+                            disabled={!methods.formState.isDirty}
+                            loading={methods.formState.isSubmitting}
+                            type='submit'
+                            variant='filled'
+                            color='success'
+                            size='sm'
+                        >
+                            {tStrings('save')}
+                        </Button>
+                    </FormCard.Footer>
+                </form>
             </FormProvider>
         </FormCard>
     )
diff --git a/resources/scripts/components/servers/settings/partials/hardware/BootOrderCard.tsx b/resources/scripts/components/servers/settings/partials/hardware/BootOrderCard.tsx
index 5a858d0bc89..b5bf0ed55af 100644
--- a/resources/scripts/components/servers/settings/partials/hardware/BootOrderCard.tsx
+++ b/resources/scripts/components/servers/settings/partials/hardware/BootOrderCard.tsx
@@ -1,29 +1,42 @@
-import { ServerContext } from '@/state/server'
-import useSWR from 'swr'
-import getBootOrder, { BootOrderSettings } from '@/api/server/settings/getBootOrder'
-import { ReactNode, useEffect, useMemo, useState } from 'react'
-import { Disk } from '@/api/server/useServerDetails'
-import useNotify from '@/util/useNotify'
-import useFlash, { useFlashKey } from '@/util/useFlash'
-import { DndContext, DragEndEvent } from '@dnd-kit/core'
-import { arrayMove, SortableContext, verticalListSortingStrategy } from '@dnd-kit/sortable'
-import updateBootOrder from '@/api/server/settings/updateBootOrder'
-import FormCard from '@/components/elements/FormCard'
-import FlashMessageRender from '@/components/elements/FlashMessageRenderer'
-import MessageBox from '@/components/elements/MessageBox'
-import { restrictToVerticalAxis, restrictToWindowEdges } from '@dnd-kit/modifiers'
-import SortableItem, { ChildrenPropsWithHandle } from '@/components/elements/dnd/SortableItem'
 // @ts-expect-error
 import DragVerticalIcon from '@/assets/images/icons/drag-vertical.svg'
-import { Badge } from '@mantine/core'
+import { ServerContext } from '@/state/server'
 import { bytesToString } from '@/util/helpers'
+import useFlash, { useFlashKey } from '@/util/useFlash'
+import useNotify from '@/util/useNotify'
+import { DndContext, DragEndEvent } from '@dnd-kit/core'
+import {
+    restrictToVerticalAxis,
+    restrictToWindowEdges,
+} from '@dnd-kit/modifiers'
+import {
+    SortableContext,
+    arrayMove,
+    verticalListSortingStrategy,
+} from '@dnd-kit/sortable'
 import { PlusIcon, XMarkIcon } from '@heroicons/react/20/solid'
-import Button from '@/components/elements/Button'
-import useBootOrderSWR from '@/api/server/settings/useBootOrderSWR'
+import { Badge } from '@mantine/core'
 import { updateNotification } from '@mantine/notifications'
-import { httpErrorToHuman } from '@/api/http'
+import { ReactNode, useEffect, useMemo, useState } from 'react'
 import { Trans, useTranslation } from 'react-i18next'
+import useSWR from 'swr'
+
+import { httpErrorToHuman } from '@/api/http'
+import getBootOrder, {
+    BootOrderSettings,
+} from '@/api/server/settings/getBootOrder'
+import updateBootOrder from '@/api/server/settings/updateBootOrder'
+import useBootOrderSWR from '@/api/server/settings/useBootOrderSWR'
+import { Disk } from '@/api/server/useServerDetails'
+
+import Button from '@/components/elements/Button'
+import FlashMessageRender from '@/components/elements/FlashMessageRenderer'
+import FormCard from '@/components/elements/FormCard'
+import MessageBox from '@/components/elements/MessageBox'
 import Translate from '@/components/elements/Translate'
+import SortableItem, {
+    ChildrenPropsWithHandle,
+} from '@/components/elements/dnd/SortableItem'
 
 const BootOrderCard = () => {
     const uuid = ServerContext.useStoreState(state => state.server.data!.uuid)
@@ -32,7 +45,9 @@ const BootOrderCard = () => {
     const { t: tStrings } = useTranslation('strings')
 
     const notify = useNotify()
-    const { clearFlashes, clearAndAddHttpError } = useFlashKey(`servers.${uuid}.settings.hardware.boot-order`)
+    const { clearFlashes, clearAndAddHttpError } = useFlashKey(
+        `servers.${uuid}.settings.hardware.boot-order`
+    )
 
     const updateOrder = (disks: string[]) => {
         clearFlashes()
@@ -67,8 +82,12 @@ const BootOrderCard = () => {
     const handleDragEnd = ({ active, over }: DragEndEvent) => {
         if (over && active.id !== over.id) {
             mutate(data => {
-                const oldIndex = data!.bootOrder.findIndex(disk => disk.interface === (active.id as string))
-                const newIndex = data!.bootOrder.findIndex(disk => disk.interface === (over.id as string))
+                const oldIndex = data!.bootOrder.findIndex(
+                    disk => disk.interface === (active.id as string)
+                )
+                const newIndex = data!.bootOrder.findIndex(
+                    disk => disk.interface === (over.id as string)
+                )
 
                 const bootOrder = arrayMove(data!.bootOrder, oldIndex, newIndex)
 
@@ -84,7 +103,9 @@ const BootOrderCard = () => {
 
     const removeDisk = (device: Disk) => {
         mutate(data => {
-            const bootOrder = data!.bootOrder.filter(disk => disk.interface !== device.interface)
+            const bootOrder = data!.bootOrder.filter(
+                disk => disk.interface !== device.interface
+            )
             const unusedDevices = [...data!.unusedDevices, device]
 
             updateOrder(bootOrder.map(disk => disk.interface))
@@ -100,7 +121,9 @@ const BootOrderCard = () => {
     const addDisk = (device: Disk) => {
         mutate(data => {
             const bootOrder = [...data!.bootOrder, device]
-            const unusedDevices = data!.unusedDevices.filter(disk => disk.interface !== device.interface)
+            const unusedDevices = data!.unusedDevices.filter(
+                disk => disk.interface !== device.interface
+            )
 
             updateOrder(bootOrder.map(disk => disk.interface))
 
@@ -116,9 +139,14 @@ const BootOrderCard = () => {
         <FormCard className='w-full'>
             <FormCard.Body>
                 <FormCard.Title>{t('device_config.title')}</FormCard.Title>
-                <FlashMessageRender className='mt-3' byKey={`servers.${uuid}.settings.hardware.boot-order`} />
+                <FlashMessageRender
+                    className='mt-3'
+                    byKey={`servers.${uuid}.settings.hardware.boot-order`}
+                />
                 <div className='mt-3'>
-                    <h5 className='text-accent-600 text-sm'>{t('device_config.current')}</h5>
+                    <h5 className='text-accent-600 text-sm'>
+                        {t('device_config.current')}
+                    </h5>
                     <div className='flex flex-col space-y-3 mt-3 mb-5'>
                         {data?.bootOrder.length === 0 && (
                             <MessageBox title='Warning' type='warning'>
@@ -127,10 +155,17 @@ const BootOrderCard = () => {
                         )}
                         <DndContext
                             onDragEnd={handleDragEnd}
-                            modifiers={[restrictToVerticalAxis, restrictToWindowEdges]}
+                            modifiers={[
+                                restrictToVerticalAxis,
+                                restrictToWindowEdges,
+                            ]}
                         >
                             <SortableContext
-                                items={data?.bootOrder.map(disk => disk.interface) ?? []}
+                                items={
+                                    data?.bootOrder.map(
+                                        disk => disk.interface
+                                    ) ?? []
+                                }
                                 strategy={verticalListSortingStrategy}
                             >
                                 {data?.bootOrder.map(disk => (
@@ -138,7 +173,10 @@ const BootOrderCard = () => {
                                         key={disk.interface}
                                         disk={disk}
                                         action={
-                                            <button onClick={() => removeDisk(disk)} className='bg-transparent p-1'>
+                                            <button
+                                                onClick={() => removeDisk(disk)}
+                                                className='bg-transparent p-1'
+                                            >
                                                 <XMarkIcon className='h-6 w-6 text-accent-500' />
                                             </button>
                                         }
@@ -147,17 +185,24 @@ const BootOrderCard = () => {
                             </SortableContext>
                         </DndContext>
                     </div>
-                    <h5 className='text-accent-600 text-sm'>{t('device_config.unused')}</h5>
+                    <h5 className='text-accent-600 text-sm'>
+                        {t('device_config.unused')}
+                    </h5>
                     <div className='flex flex-col space-y-3 mt-3'>
                         {data?.unusedDevices.length === 0 && (
-                            <p className='text-sm text-center'>{t('device_config.unused_empty')}</p>
+                            <p className='text-sm text-center'>
+                                {t('device_config.unused_empty')}
+                            </p>
                         )}
                         {data?.unusedDevices.map(device => (
                             <StaticDiskRow
                                 key={device.interface}
                                 disk={device}
                                 action={
-                                    <button onClick={() => addDisk(device)} className='bg-transparent p-1'>
+                                    <button
+                                        onClick={() => addDisk(device)}
+                                        className='bg-transparent p-1'
+                                    >
                                         <PlusIcon className='h-6 w-6 text-accent-500' />
                                     </button>
                                 }
@@ -184,7 +229,9 @@ const StaticDiskRow = ({ disk, action }: DiskRowProps) => (
                     {getBadge(disk)}
                 </div>
 
-                <span className='description-small'>{getDescription(disk)}</span>
+                <span className='description-small'>
+                    {getDescription(disk)}
+                </span>
             </div>
             {action}
         </div>
@@ -199,17 +246,29 @@ const DraggableDiskRow = ({ disk, action }: DiskRowProps) => (
     >
         {({ attributes, listeners }: ChildrenPropsWithHandle) => (
             <>
-                <button className='bg-transparent touch-none p-1' {...attributes} {...listeners}>
-                    <img src={DragVerticalIcon} className='h-6 w-6 dark:invert' alt='Drag button icon' />
+                <button
+                    className='bg-transparent touch-none p-1'
+                    {...attributes}
+                    {...listeners}
+                >
+                    <img
+                        src={DragVerticalIcon}
+                        className='h-6 w-6 dark:invert'
+                        alt='Drag button icon'
+                    />
                 </button>
                 <div className='flex justify-between w-full items-center'>
                     <div className={'flex flex-col'}>
                         <div className={'flex space-x-3'}>
-                            <span className='text-foreground'>{getName(disk)}</span>
+                            <span className='text-foreground'>
+                                {getName(disk)}
+                            </span>
                             {getBadge(disk)}
                         </div>
 
-                        <span className='description-small'>{getDescription(disk)}</span>
+                        <span className='description-small'>
+                            {getDescription(disk)}
+                        </span>
                     </div>
 
                     {action}
diff --git a/resources/scripts/components/servers/settings/partials/hardware/HardwareDetailsCard.tsx b/resources/scripts/components/servers/settings/partials/hardware/HardwareDetailsCard.tsx
index 55bc10729c8..89fe107e7d8 100644
--- a/resources/scripts/components/servers/settings/partials/hardware/HardwareDetailsCard.tsx
+++ b/resources/scripts/components/servers/settings/partials/hardware/HardwareDetailsCard.tsx
@@ -1,16 +1,21 @@
-import { Dd, Dt } from '@/components/dashboard/ServerCard'
-import Display from '@/components/elements/displays/DisplayRow'
-import FormCard from '@/components/elements/FormCard'
 import { ServerContext } from '@/state/server'
 import { bytesToString } from '@/util/helpers'
 import { useTranslation } from 'react-i18next'
 
+import FormCard from '@/components/elements/FormCard'
+import Display from '@/components/elements/displays/DisplayRow'
+
+import { Dd, Dt } from '@/components/dashboard/ServerCard'
+
 const HardwareDetailsCard = () => {
     const { t } = useTranslation('server.settings')
     const { t: tStrings } = useTranslation('strings')
     const server = ServerContext.useStoreState(state => state.server.data!)
 
-    const addresses = [...server.limits.addresses.ipv4, ...server.limits.addresses.ipv6]
+    const addresses = [
+        ...server.limits.addresses.ipv4,
+        ...server.limits.addresses.ipv6,
+    ]
 
     return (
         <>
@@ -35,7 +40,9 @@ const HardwareDetailsCard = () => {
                         <div className='flex space-x-10 sm:space-x-12'>
                             <dl>
                                 <Dt>{t('hardware.bandwidth_used')}</Dt>
-                                <Dd>{bytesToString(server.usages.bandwidth)}</Dd>
+                                <Dd>
+                                    {bytesToString(server.usages.bandwidth)}
+                                </Dd>
                             </dl>
                             <dl>
                                 <Dt>{t('hardware.bandwidth_alloted')}</Dt>
@@ -54,21 +61,33 @@ const HardwareDetailsCard = () => {
                             ) : (
                                 <Display.Group className='mt-3'>
                                     {addresses.map(ip => (
-                                        <Display.Row key={ip.id} className='grid-cols-1 md:grid-cols-3 text-sm'>
+                                        <Display.Row
+                                            key={ip.id}
+                                            className='grid-cols-1 md:grid-cols-3 text-sm'
+                                        >
                                             <div>
-                                                <p className='description-small !text-xs'>{tStrings('address_one')}</p>
+                                                <p className='description-small !text-xs'>
+                                                    {tStrings('address_one')}
+                                                </p>
                                                 <p className='font-semibold text-foreground'>
                                                     {ip.address}/{ip.cidr}
                                                 </p>
                                             </div>
                                             <div>
-                                                <p className='description-small !text-xs'>{tStrings('gateway')}</p>
-                                                <p className='text-foreground font-semibold'>{ip.gateway}</p>
+                                                <p className='description-small !text-xs'>
+                                                    {tStrings('gateway')}
+                                                </p>
+                                                <p className='text-foreground font-semibold'>
+                                                    {ip.gateway}
+                                                </p>
                                             </div>
                                             <div>
-                                                <p className='description-small !text-xs'>{tStrings('mac_address')}</p>
+                                                <p className='description-small !text-xs'>
+                                                    {tStrings('mac_address')}
+                                                </p>
                                                 <p className='text-foreground font-semibold'>
-                                                    {ip.macAddress ?? tStrings('none')}
+                                                    {ip.macAddress ??
+                                                        tStrings('none')}
                                                 </p>
                                             </div>
                                         </Display.Row>
diff --git a/resources/scripts/components/servers/settings/partials/hardware/IsoCard.tsx b/resources/scripts/components/servers/settings/partials/hardware/IsoCard.tsx
index 2feaeb7ce28..5bc27a4c271 100644
--- a/resources/scripts/components/servers/settings/partials/hardware/IsoCard.tsx
+++ b/resources/scripts/components/servers/settings/partials/hardware/IsoCard.tsx
@@ -1,9 +1,12 @@
-import FormCard from '@/components/elements/FormCard'
 import { ServerContext } from '@/state/server'
+import { useTranslation } from 'react-i18next'
+
 import useIsosSWR from '@/api/server/settings/useIsosSWR'
+
 import FlashMessageRender from '@/components/elements/FlashMessageRenderer'
+import FormCard from '@/components/elements/FormCard'
+
 import IsoRow from '@/components/servers/settings/partials/hardware/IsoRow'
-import { useTranslation } from 'react-i18next'
 
 const IsoCard = () => {
     const { t } = useTranslation('server.settings')
@@ -15,12 +18,16 @@ const IsoCard = () => {
             <FormCard.Body>
                 <FormCard.Title>{t('isos.title')}</FormCard.Title>
 
-                <FlashMessageRender byKey={`servers.${uuid}.settings.hardware.isos`} />
+                <FlashMessageRender
+                    byKey={`servers.${uuid}.settings.hardware.isos`}
+                />
 
                 <div className={'flex flex-col space-y-3 mt-3'}>
                     {data ? (
                         data.length === 0 ? (
-                            <p className='text-sm text-center'>{t('isos.empty')}</p>
+                            <p className='text-sm text-center'>
+                                {t('isos.empty')}
+                            </p>
                         ) : (
                             data.map(iso => <IsoRow iso={iso} key={iso.uuid} />)
                         )
diff --git a/resources/scripts/components/servers/settings/partials/hardware/IsoRow.tsx b/resources/scripts/components/servers/settings/partials/hardware/IsoRow.tsx
index fd71d87d1e5..2f69836020f 100644
--- a/resources/scripts/components/servers/settings/partials/hardware/IsoRow.tsx
+++ b/resources/scripts/components/servers/settings/partials/hardware/IsoRow.tsx
@@ -1,15 +1,17 @@
-import { EyeSlashIcon } from '@heroicons/react/20/solid'
-import { bytesToString } from '@/util/helpers'
-import Button from '@/components/elements/Button'
-import { Iso } from '@/api/server/settings/getIsos'
-import useIsosSWR from '@/api/server/settings/useIsosSWR'
 import { ServerContext } from '@/state/server'
+import { bytesToString } from '@/util/helpers'
 import useFlash, { useFlashKey } from '@/util/useFlash'
+import { EyeSlashIcon } from '@heroicons/react/20/solid'
+import { useState } from 'react'
+import { useTranslation } from 'react-i18next'
+
+import { Iso } from '@/api/server/settings/getIsos'
 import mountMedia from '@/api/server/settings/mountMedia'
 import unmountMedia from '@/api/server/settings/unmountMedia'
-import { useState } from 'react'
 import useBootOrderSWR from '@/api/server/settings/useBootOrderSWR'
-import { useTranslation } from 'react-i18next'
+import useIsosSWR from '@/api/server/settings/useIsosSWR'
+
+import Button from '@/components/elements/Button'
 
 interface Props {
     iso: Iso
@@ -18,7 +20,9 @@ interface Props {
 const IsoRow = ({ iso }: Props) => {
     const { t: tStrings } = useTranslation('strings')
     const uuid = ServerContext.useStoreState(state => state.server.data!.uuid)
-    const { clearFlashes, clearAndAddHttpError } = useFlashKey(`servers.${uuid}.settings.hardware.isos`)
+    const { clearFlashes, clearAndAddHttpError } = useFlashKey(
+        `servers.${uuid}.settings.hardware.isos`
+    )
     const { mutate: mutateMedia } = useIsosSWR(uuid)
     const { mutate: mutateBootOrder } = useBootOrderSWR(uuid)
     const [loading, setLoading] = useState(false)
@@ -68,21 +72,42 @@ const IsoRow = ({ iso }: Props) => {
     }
 
     return (
-        <div className={'flex items-center justify-between py-2 px-4 border border-accent-200 rounded'}>
+        <div
+            className={
+                'flex items-center justify-between py-2 px-4 border border-accent-200 rounded'
+            }
+        >
             <div>
                 <div className={'flex items-center space-x-3'}>
                     <p className='text-foreground'>{iso.name}</p>
-                    {iso.hidden && <EyeSlashIcon title='hidden' className='h-4 w-4 text-foreground' />}
+                    {iso.hidden && (
+                        <EyeSlashIcon
+                            title='hidden'
+                            className='h-4 w-4 text-foreground'
+                        />
+                    )}
                 </div>
                 <p className={'description-small'}>{bytesToString(iso.size)}</p>
             </div>
 
             {iso.mounted ? (
-                <Button loading={loading} onClick={handleUnmount} variant={'outline'} color={'danger'} size={'sm'}>
+                <Button
+                    loading={loading}
+                    onClick={handleUnmount}
+                    variant={'outline'}
+                    color={'danger'}
+                    size={'sm'}
+                >
                     {tStrings('unmount')}
                 </Button>
             ) : (
-                <Button loading={loading} onClick={handleMount} variant={'filled'} color={'success'} size={'sm'}>
+                <Button
+                    loading={loading}
+                    onClick={handleMount}
+                    variant={'filled'}
+                    color={'success'}
+                    size={'sm'}
+                >
                     {tStrings('mount')}
                 </Button>
             )}
diff --git a/resources/scripts/components/servers/settings/partials/network/NameserversCard.tsx b/resources/scripts/components/servers/settings/partials/network/NameserversCard.tsx
index 5cf97fbb300..08dd2d0ac5b 100644
--- a/resources/scripts/components/servers/settings/partials/network/NameserversCard.tsx
+++ b/resources/scripts/components/servers/settings/partials/network/NameserversCard.tsx
@@ -1,31 +1,38 @@
-import getNetwork from '@/api/server/settings/getNetwork'
-import updateNetwork from '@/api/server/settings/updateNetwork'
-import Button from '@/components/elements/Button'
-import FlashMessageRender from '@/components/elements/FlashMessageRenderer'
-import FormCard from '@/components/elements/FormCard'
-import TextInputFormik from '@/components/elements/formik/TextInputFormik'
 import { ServerContext } from '@/state/server'
 import useFlash, { useFlashKey } from '@/util/useFlash'
 import useNotify from '@/util/useNotify'
+import { ipAddress } from '@/util/validation'
 import { TrashIcon } from '@heroicons/react/20/solid'
+import { zodResolver } from '@hookform/resolvers/zod'
 import { FieldArray, FormikProvider, useFormik } from 'formik'
+import { useEffect } from 'react'
+import { FormProvider, useFieldArray, useForm } from 'react-hook-form'
+import { useTranslation } from 'react-i18next'
 import useSWR from 'swr'
 import * as yup from 'yup'
-import { FormProvider, useFieldArray, useForm } from 'react-hook-form'
 import { z } from 'zod'
-import { ipAddress } from '@/util/validation'
-import { zodResolver } from '@hookform/resolvers/zod'
-import { useTranslation } from 'react-i18next'
-import { useEffect } from 'react'
+
+import getNetwork from '@/api/server/settings/getNetwork'
+import updateNetwork from '@/api/server/settings/updateNetwork'
+
+import Button from '@/components/elements/Button'
+import FlashMessageRender from '@/components/elements/FlashMessageRenderer'
+import FormCard from '@/components/elements/FormCard'
+import TextInputFormik from '@/components/elements/formik/TextInputFormik'
 import TextInputForm from '@/components/elements/forms/TextInputForm'
 
 const NameserversCard = () => {
     const { t: tStrings } = useTranslation('strings')
     const server = ServerContext.useStoreState(state => state.server.data!)
 
-    const { clearFlashes, clearAndAddHttpError } = useFlashKey(`servers.${server.uuid}.settings.network.nameservers`)
+    const { clearFlashes, clearAndAddHttpError } = useFlashKey(
+        `servers.${server.uuid}.settings.network.nameservers`
+    )
 
-    const { data, mutate } = useSWR(['server:settings:hardware', server.uuid], () => getNetwork(server.uuid))
+    const { data, mutate } = useSWR(
+        ['server:settings:hardware', server.uuid],
+        () => getNetwork(server.uuid)
+    )
 
     const schema = z.object({
         nameservers: z
@@ -80,20 +87,30 @@ const NameserversCard = () => {
                 <FormProvider {...form}>
                     <form onSubmit={form.handleSubmit(submit)}>
                         <FormCard.Body>
-                            <FormCard.Title>{tStrings('nameserver', { count: 2 })}</FormCard.Title>
+                            <FormCard.Title>
+                                {tStrings('nameserver', { count: 2 })}
+                            </FormCard.Title>
                             <div className='space-y-3 mt-3'>
-                                <FlashMessageRender byKey={`servers.${server.uuid}.settings.network.nameservers`} />
+                                <FlashMessageRender
+                                    byKey={`servers.${server.uuid}.settings.network.nameservers`}
+                                />
                                 <div className='flex flex-col space-y-3'>
                                     {fields.map((field, index) => (
                                         <TextInputForm
                                             key={field.id}
-                                            disabled={form.formState.isSubmitting}
+                                            disabled={
+                                                form.formState.isSubmitting
+                                            }
                                             name={`nameservers.${index}.value`}
-                                            label={`${tStrings('nameserver', { count: 1 })} ${index + 1}`}
+                                            label={`${tStrings('nameserver', {
+                                                count: 1,
+                                            })} ${index + 1}`}
                                             rightSection={
                                                 <button
                                                     type='button'
-                                                    onClick={() => remove(index)}
+                                                    onClick={() =>
+                                                        remove(index)
+                                                    }
                                                     className='bg-transparent'
                                                 >
                                                     <TrashIcon className='text-accent-400 w-4 h-4' />
@@ -102,7 +119,8 @@ const NameserversCard = () => {
                                         />
                                     ))}
 
-                                    {form.getValues().nameservers.length < 2 && (
+                                    {form.getValues().nameservers.length <
+                                        2 && (
                                         <Button
                                             type='button'
                                             onClick={() =>
diff --git a/resources/scripts/components/servers/settings/partials/security/AuthenticationCard.tsx b/resources/scripts/components/servers/settings/partials/security/AuthenticationCard.tsx
index b9a5e2bffaf..07d1fadec56 100644
--- a/resources/scripts/components/servers/settings/partials/security/AuthenticationCard.tsx
+++ b/resources/scripts/components/servers/settings/partials/security/AuthenticationCard.tsx
@@ -1,28 +1,34 @@
-import FormCard from '@/components/elements/FormCard'
-import FlashMessageRender from '@/components/elements/FlashMessageRenderer'
-import SegmentedControl from '@/components/elements/SegmentedControl'
-import Button from '@/components/elements/Button'
 import { ServerContext } from '@/state/server'
 import { useFlashKey } from '@/util/useFlash'
+import { englishKeyboardCharacters, password } from '@/util/validation'
+import { zodResolver } from '@hookform/resolvers/zod'
 import { useEffect, useState } from 'react'
+import { FormProvider, useForm } from 'react-hook-form'
+import { useTranslation } from 'react-i18next'
 import useSWR from 'swr'
+import { z } from 'zod'
+
 import getSecurity from '@/api/server/settings/getSecurity'
 import updateSecurity from '@/api/server/settings/updateSecurity'
-import { useTranslation } from 'react-i18next'
-import { z } from 'zod'
-import { englishKeyboardCharacters, password } from '@/util/validation'
-import { FormProvider, useForm } from 'react-hook-form'
-import { zodResolver } from '@hookform/resolvers/zod'
+
+import Button from '@/components/elements/Button'
+import FlashMessageRender from '@/components/elements/FlashMessageRenderer'
+import FormCard from '@/components/elements/FormCard'
+import SegmentedControl from '@/components/elements/SegmentedControl'
 import TextInputForm from '@/components/elements/forms/TextInputForm'
 import TextareaForm from '@/components/elements/forms/TextareaForm'
 
 const AuthenticationCard = () => {
     const { t: tStrings } = useTranslation('strings')
     const uuid = ServerContext.useStoreState(state => state.server.data!.uuid)
-    const { clearFlashes, clearAndAddHttpError } = useFlashKey(`servers.${uuid}.settings.security.auth`)
+    const { clearFlashes, clearAndAddHttpError } = useFlashKey(
+        `servers.${uuid}.settings.security.auth`
+    )
     const [type, setType] = useState<'password' | 'ssh_keys'>('password')
 
-    const { data, mutate } = useSWR(['server:settings:security', uuid], () => getSecurity(uuid))
+    const { data, mutate } = useSWR(['server:settings:security', uuid], () =>
+        getSecurity(uuid)
+    )
 
     const sshKeysSchema = z.object({
         sshKeys: z.string().optional(),
@@ -75,23 +81,41 @@ const AuthenticationCard = () => {
                 {/* @ts-ignore */}
                 <form onSubmit={form.handleSubmit(submit)}>
                     <FormCard.Body>
-                        <FormCard.Title>{tStrings('authentication')}</FormCard.Title>
+                        <FormCard.Title>
+                            {tStrings('authentication')}
+                        </FormCard.Title>
                         <div className='space-y-3 mt-3'>
-                            <FlashMessageRender byKey={`servers.${uuid}.settings.security.auth`} />
+                            <FlashMessageRender
+                                byKey={`servers.${uuid}.settings.security.auth`}
+                            />
                             <SegmentedControl
                                 className='!w-full md:!w-auto'
                                 disabled={form.formState.isSubmitting}
                                 value={type}
                                 onChange={val => setType(val as typeof type)}
                                 data={[
-                                    { value: 'password', label: tStrings('password') },
-                                    { value: 'ssh_keys', label: tStrings('ssh_key', { count: 2 }) },
+                                    {
+                                        value: 'password',
+                                        label: tStrings('password'),
+                                    },
+                                    {
+                                        value: 'ssh_keys',
+                                        label: tStrings('ssh_key', {
+                                            count: 2,
+                                        }),
+                                    },
                                 ]}
                             />
                             {type === 'password' && (
-                                <TextInputForm type='password' name='password' label='Password' />
+                                <TextInputForm
+                                    type='password'
+                                    name='password'
+                                    label='Password'
+                                />
+                            )}
+                            {type === 'ssh_keys' && (
+                                <TextareaForm name='sshKeys' label='SSH Keys' />
                             )}
-                            {type === 'ssh_keys' && <TextareaForm name='sshKeys' label='SSH Keys' />}
                         </div>
                     </FormCard.Body>
                     <FormCard.Footer>
diff --git a/resources/scripts/components/servers/terminal/ServerTerminalContainer.tsx b/resources/scripts/components/servers/terminal/ServerTerminalContainer.tsx
index 5e6c8e1eb9a..8de1325bb23 100644
--- a/resources/scripts/components/servers/terminal/ServerTerminalContainer.tsx
+++ b/resources/scripts/components/servers/terminal/ServerTerminalContainer.tsx
@@ -1,17 +1,27 @@
-import createConsoleSession, { ConsoleType } from '@/api/server/createConsoleSession'
-import ServerContentBlock from '@/components/servers/ServerContentBlock'
 import { ServerContext } from '@/state/server'
 import useFlash, { useFlashKey } from '@/util/useFlash'
 import { Loader } from '@mantine/core'
 import { useEffect, useState } from 'react'
 import { useSearchParams } from 'react-router-dom'
 
+import createConsoleSession, {
+    ConsoleType,
+} from '@/api/server/createConsoleSession'
+
+import ServerContentBlock from '@/components/servers/ServerContentBlock'
+
 const ServerTerminalContainer = () => {
     const [params] = useSearchParams()
     const uuid = ServerContext.useStoreState(state => state.server.data!.uuid)
-    const { clearFlashes, clearAndAddHttpError } = useFlashKey(`servers.${uuid}.console`)
+    const { clearFlashes, clearAndAddHttpError } = useFlashKey(
+        `servers.${uuid}.console`
+    )
     const [message, setMessage] = useState('Initializing')
-    const messages = ['Checking remote health', 'Generating token', 'Connecting']
+    const messages = [
+        'Checking remote health',
+        'Generating token',
+        'Connecting',
+    ]
 
     useEffect(() => {
         // select a message but pause at random intervals
@@ -23,18 +33,25 @@ const ServerTerminalContainer = () => {
 
         const main = async () => {
             try {
-                const creds = await createConsoleSession(uuid, params.get('type')! as ConsoleType)
+                const creds = await createConsoleSession(
+                    uuid,
+                    params.get('type')! as ConsoleType
+                )
 
                 if ('ticket' in creds) {
                     window.location.href = `https://${creds.fqdn}:${
                         creds.port
-                    }/novnc/novnc.html?console=qemu&virtualization=qemu&node=${encodeURIComponent(creds.node)}&vmid=${
-                        creds.vmid
-                    }&token=${encodeURIComponent(creds.ticket)}${params.get('type') === 'xtermjs' ? '&xtermjs=1' : ''}`
+                    }/novnc/novnc.html?console=qemu&virtualization=qemu&node=${encodeURIComponent(
+                        creds.node
+                    )}&vmid=${creds.vmid}&token=${encodeURIComponent(
+                        creds.ticket
+                    )}${params.get('type') === 'xtermjs' ? '&xtermjs=1' : ''}`
                 } else {
-                    window.location.href = `${creds.isTlsEnabled ? 'https' : 'http'}://${creds.fqdn}:${
-                        creds.port
-                    }/?type=${encodeURIComponent(params.get('type')!)}&token=${encodeURIComponent(creds.token)}`
+                    window.location.href = `${
+                        creds.isTlsEnabled ? 'https' : 'http'
+                    }://${creds.fqdn}:${creds.port}/?type=${encodeURIComponent(
+                        params.get('type')!
+                    )}&token=${encodeURIComponent(creds.token)}`
                 }
             } catch (e) {
                 clearAndAddHttpError(e as Error)
@@ -45,7 +62,10 @@ const ServerTerminalContainer = () => {
     }, [])
 
     return (
-        <ServerContentBlock title='Terminal' showFlashKey={`servers.${uuid}.console`}>
+        <ServerContentBlock
+            title='Terminal'
+            showFlashKey={`servers.${uuid}.console`}
+        >
             <div className='grid place-items-center w-full mt-20'>
                 <div className='flex flex-col items-center'>
                     <h6 className='h6'>Starting Terminal</h6>
diff --git a/resources/scripts/globals.d.ts b/resources/scripts/globals.d.ts
index 20e5a92a5a2..d68ede095c8 100644
--- a/resources/scripts/globals.d.ts
+++ b/resources/scripts/globals.d.ts
@@ -1,9 +1,10 @@
-import { Alignment } from '@/components/elements/displays/Table'
 import '@tanstack/react-table'
 
+import { Alignment } from '@/components/elements/displays/Table'
+
 declare module '@tanstack/table-core' {
-  interface ColumnMeta<TData extends RowData, TValue> {
-    overflow?: boolean
-    align?: Alignment
-  }
-}
\ No newline at end of file
+    interface ColumnMeta<TData extends RowData, TValue> {
+        overflow?: boolean
+        align?: Alignment
+    }
+}
diff --git a/resources/scripts/lib/i18n.ts b/resources/scripts/lib/i18n.ts
index 2b1b0723758..e3bca9d5473 100644
--- a/resources/scripts/lib/i18n.ts
+++ b/resources/scripts/lib/i18n.ts
@@ -1,7 +1,7 @@
 import i18n from 'i18next'
-import { initReactI18next } from 'react-i18next'
 import I18NextHttpBackend, { HttpBackendOptions } from 'i18next-http-backend'
 import I18NextMultiloadBackendAdapter from 'i18next-multiload-backend-adapter'
+import { initReactI18next } from 'react-i18next'
 import { z } from 'zod'
 import { makeZodI18nMap, zodI18nMap } from 'zod-i18n-map'
 
@@ -20,7 +20,8 @@ i18n.use(I18NextMultiloadBackendAdapter)
         backend: {
             backend: I18NextHttpBackend,
             backendOption: {
-                loadPath: '/locales/locale.json?locale={{lng}}&namespace={{ns}}',
+                loadPath:
+                    '/locales/locale.json?locale={{lng}}&namespace={{ns}}',
                 queryStringParams: { hash },
                 allowMultiLoading: true,
             } as HttpBackendOptions,
diff --git a/resources/scripts/lib/swr.ts b/resources/scripts/lib/swr.ts
index c99a4762f82..70f5d0c4cd1 100644
--- a/resources/scripts/lib/swr.ts
+++ b/resources/scripts/lib/swr.ts
@@ -1,4 +1,6 @@
-import { SWRResponse } from 'swr';
+import { SWRResponse } from 'swr'
 
 // Makes the data property of the SWRResponse not undefined
-export type Optimistic<T extends SWRResponse> = Omit<T, 'data'> & { data: NonNullable<T["data"]> };
\ No newline at end of file
+export type Optimistic<T extends SWRResponse> = Omit<T, 'data'> & {
+    data: NonNullable<T['data']>
+}
diff --git a/resources/scripts/main.tsx b/resources/scripts/main.tsx
index d6ec0823f5f..05b0de0a27a 100644
--- a/resources/scripts/main.tsx
+++ b/resources/scripts/main.tsx
@@ -1,14 +1,13 @@
+import '@/assets/css/preflight.css'
+import '@/assets/css/tailwind.css'
+import '@/lib/i18n'
 import React from 'react'
 import ReactDOM from 'react-dom/client'
 
-import '@/assets/css/tailwind.css'
-import '@/assets/css/preflight.css'
+import App from '@/components/App'
 
 // do not remove the parentheses because they are what lazy-loads these imports
 import('@/util/registerCustomYupValidationRules')
-import '@/lib/i18n'
-
-import App from '@/components/App'
 
 ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
     <React.StrictMode>
diff --git a/resources/scripts/routers/AdminDashboardRouter.tsx b/resources/scripts/routers/AdminDashboardRouter.tsx
index 72b3a72defd..a14530b9650 100644
--- a/resources/scripts/routers/AdminDashboardRouter.tsx
+++ b/resources/scripts/routers/AdminDashboardRouter.tsx
@@ -1,16 +1,17 @@
-import ContentContainer from '@/components/elements/ContentContainer'
-import { NavigationBarContext } from '@/components/elements/navigation/NavigationBar'
-import { lazy, useContext, useEffect } from 'react'
-import { Link, Outlet, RouteObject, useMatch } from 'react-router-dom'
-import { Translation, useTranslation } from 'react-i18next'
+import { routes as adminIpamRoutes } from '@/routers/AdminIpamRouter'
 import { routes as adminNodeRoutes } from '@/routers/AdminNodeRouter'
 import { routes as adminServerRoutes } from '@/routers/AdminServerRouter'
-import { routes as adminIpamRoutes } from '@/routers/AdminIpamRouter'
 import { routes as adminUserRoutes } from '@/routers/AdminUserRouter'
-import AuthenticatedRoutes from '@/routers/middleware/AuthenticatedRoutes'
 import { lazyLoad } from '@/routers/helpers'
-import { HomeIcon } from '@heroicons/react/20/solid'
+import AuthenticatedRoutes from '@/routers/middleware/AuthenticatedRoutes'
 import { Route } from '@/routers/router'
+import { HomeIcon } from '@heroicons/react/20/solid'
+import { lazy, useContext, useEffect } from 'react'
+import { Translation, useTranslation } from 'react-i18next'
+import { Link, Outlet, RouteObject, useMatch } from 'react-router-dom'
+
+import ContentContainer from '@/components/elements/ContentContainer'
+import { NavigationBarContext } from '@/components/elements/navigation/NavigationBar'
 
 export const routes: Route[] = [
     {
@@ -23,17 +24,37 @@ export const routes: Route[] = [
         handle: {
             crumb: () => ({
                 to: '/admin',
-                element: <HomeIcon className={'w-4 h-4 text-accent-500 hover:text-accent-800 transition'} />,
+                element: (
+                    <HomeIcon
+                        className={
+                            'w-4 h-4 text-accent-500 hover:text-accent-800 transition'
+                        }
+                    />
+                ),
             }),
         },
         children: [
             {
                 index: true,
-                element: lazyLoad(lazy(() => import('@/components/admin/overview/OverviewContainer'))),
+                element: lazyLoad(
+                    lazy(
+                        () =>
+                            import(
+                                '@/components/admin/overview/OverviewContainer'
+                            )
+                    )
+                ),
             },
             {
                 path: 'locations',
-                element: lazyLoad(lazy(() => import('@/components/admin/locations/LocationsContainer'))),
+                element: lazyLoad(
+                    lazy(
+                        () =>
+                            import(
+                                '@/components/admin/locations/LocationsContainer'
+                            )
+                    )
+                ),
             },
             ...adminNodeRoutes,
             ...adminServerRoutes,
@@ -41,7 +62,12 @@ export const routes: Route[] = [
             ...adminUserRoutes,
             {
                 path: 'tokens',
-                element: lazyLoad(lazy(() => import('@/components/admin/tokens/TokensContainer'))),
+                element: lazyLoad(
+                    lazy(
+                        () =>
+                            import('@/components/admin/tokens/TokensContainer')
+                    )
+                ),
             },
         ],
     },
@@ -51,7 +77,9 @@ export const AdminBanner = () => (
     <div className='bg-foreground py-1'>
         <ContentContainer>
             <Link to='/'>
-                <p className='text-background text-xs font-medium uppercase tracking-wide'>Exit Administration</p>
+                <p className='text-background text-xs font-medium uppercase tracking-wide'>
+                    Exit Administration
+                </p>
             </Link>
         </ContentContainer>
     </div>
diff --git a/resources/scripts/routers/AdminIpamRouter.tsx b/resources/scripts/routers/AdminIpamRouter.tsx
index 7d3d3fcb4bf..722230ab56a 100644
--- a/resources/scripts/routers/AdminIpamRouter.tsx
+++ b/resources/scripts/routers/AdminIpamRouter.tsx
@@ -1,14 +1,16 @@
-import { Navigate, Outlet, RouteObject } from 'react-router-dom'
 import { lazyLoad, query } from '@/routers/helpers'
+import { Route } from '@/routers/router'
+import { HomeIcon } from '@heroicons/react/20/solid'
 import { lazy, useContext, useEffect } from 'react'
-import { NavigationBarContext } from '@/components/elements/navigation/NavigationBar'
-import { getKey as getPoolKey } from '@/api/admin/addressPools/useAddressPoolSWR'
+import { Translation, useTranslation } from 'react-i18next'
+import { Navigate, Outlet, RouteObject } from 'react-router-dom'
+
 import getAddressPool from '@/api/admin/addressPools/getAddressPool'
-import { getKey as getAddressesKey } from '@/api/admin/addressPools/useAddressesSWR'
 import getAddresses from '@/api/admin/addressPools/getAddresses'
-import { Translation, useTranslation } from 'react-i18next'
-import { Route } from '@/routers/router'
-import { HomeIcon } from '@heroicons/react/20/solid'
+import { getKey as getPoolKey } from '@/api/admin/addressPools/useAddressPoolSWR'
+import { getKey as getAddressesKey } from '@/api/admin/addressPools/useAddressesSWR'
+
+import { NavigationBarContext } from '@/components/elements/navigation/NavigationBar'
 
 export const routes: Route[] = [
     {
@@ -16,18 +18,24 @@ export const routes: Route[] = [
         handle: {
             crumb: () => ({
                 to: '/admin/ipam',
-                element: <Translation ns={'strings'}>{t => t('ipam')}</Translation>,
+                element: (
+                    <Translation ns={'strings'}>{t => t('ipam')}</Translation>
+                ),
             }),
         },
         children: [
             {
                 index: true,
-                element: lazyLoad(lazy(() => import('@/components/admin/ipam/IpamContainer'))),
+                element: lazyLoad(
+                    lazy(() => import('@/components/admin/ipam/IpamContainer'))
+                ),
             },
             {
                 path: ':id',
                 loader: ({ params }) =>
-                    query(getPoolKey(parseInt(params.id!)), () => getAddressPool(parseInt(params.id!))),
+                    query(getPoolKey(parseInt(params.id!)), () =>
+                        getAddressPool(parseInt(params.id!))
+                    ),
                 element: lazyLoad(lazy(() => import('./AdminIpamRouter'))),
                 handle: {
                     crumb: data => ({
@@ -47,10 +55,21 @@ export const routes: Route[] = [
                             const page = params.page ? parseInt(params.page) : 1
 
                             return query(getAddressesKey(id, page, ''), () =>
-                                getAddresses(id, { page, query: '', include: ['server'] })
+                                getAddresses(id, {
+                                    page,
+                                    query: '',
+                                    include: ['server'],
+                                })
                             )
                         },
-                        element: lazyLoad(lazy(() => import('@/components/admin/ipam/addresses/AddressesContainer'))),
+                        element: lazyLoad(
+                            lazy(
+                                () =>
+                                    import(
+                                        '@/components/admin/ipam/addresses/AddressesContainer'
+                                    )
+                            )
+                        ),
                     },
                 ],
             },
diff --git a/resources/scripts/routers/AdminNodeRouter.tsx b/resources/scripts/routers/AdminNodeRouter.tsx
index a70f0728233..23cb1395f90 100644
--- a/resources/scripts/routers/AdminNodeRouter.tsx
+++ b/resources/scripts/routers/AdminNodeRouter.tsx
@@ -1,16 +1,20 @@
-import { httpErrorToHuman } from '@/api/http'
-import NavigationBar, { NavigationBarContext } from '@/components/elements/navigation/NavigationBar'
-import { ErrorMessage, NotFound } from '@/components/elements/ScreenBlock'
-import Spinner from '@/components/elements/Spinner'
 import { AdminBanner } from '@/routers/AdminDashboardRouter'
+import { lazyLoad, query } from '@/routers/helpers'
+import { Route } from '@/routers/router'
 import { NodeContext } from '@/state/admin/node'
 import { lazy, useContext, useEffect, useMemo, useState } from 'react'
-import { Outlet, RouteObject, Routes, useMatch } from 'react-router-dom'
 import { useTranslation } from 'react-i18next'
-import { lazyLoad, query } from '@/routers/helpers'
-import { Route } from '@/routers/router'
-import { getKey as getPoolKey } from '@/api/admin/addressPools/useAddressPoolSWR'
+import { Outlet, RouteObject, Routes, useMatch } from 'react-router-dom'
+
 import getAddressPool from '@/api/admin/addressPools/getAddressPool'
+import { getKey as getPoolKey } from '@/api/admin/addressPools/useAddressPoolSWR'
+import { httpErrorToHuman } from '@/api/http'
+
+import { ErrorMessage, NotFound } from '@/components/elements/ScreenBlock'
+import Spinner from '@/components/elements/Spinner'
+import NavigationBar, {
+    NavigationBarContext,
+} from '@/components/elements/navigation/NavigationBar'
 
 export const routes: Route[] = [
     {
@@ -18,54 +22,101 @@ export const routes: Route[] = [
         children: [
             {
                 index: true,
-                element: lazyLoad(lazy(() => import('@/components/admin/nodes/NodesContainer'))),
+                element: lazyLoad(
+                    lazy(
+                        () => import('@/components/admin/nodes/NodesContainer')
+                    )
+                ),
             },
             {
                 path: ':nodeId',
                 loader: ({ params }) =>
-                    query(getPoolKey(parseInt(params.id!)), () => getAddressPool(parseInt(params.id!))),
+                    query(getPoolKey(parseInt(params.id!)), () =>
+                        getAddressPool(parseInt(params.id!))
+                    ),
                 element: (
                     <NodeContext.Provider>
-                        {lazyLoad(lazy(() => import('@/routers/AdminNodeRouter')))}
+                        {lazyLoad(
+                            lazy(() => import('@/routers/AdminNodeRouter'))
+                        )}
                     </NodeContext.Provider>
                 ),
                 children: [
                     {
                         index: true,
                         element: lazyLoad(
-                            lazy(() => import('@/components/admin/nodes/overview/NodeOverviewContainer'))
+                            lazy(
+                                () =>
+                                    import(
+                                        '@/components/admin/nodes/overview/NodeOverviewContainer'
+                                    )
+                            )
                         ),
                     },
                     {
                         path: 'servers',
-                        element: lazyLoad(lazy(() => import('@/components/admin/nodes/servers/NodeServersContainer'))),
+                        element: lazyLoad(
+                            lazy(
+                                () =>
+                                    import(
+                                        '@/components/admin/nodes/servers/NodeServersContainer'
+                                    )
+                            )
+                        ),
                     },
                     {
                         path: 'isos',
-                        element: lazyLoad(lazy(() => import('@/components/admin/nodes/isos/IsosContainer'))),
+                        element: lazyLoad(
+                            lazy(
+                                () =>
+                                    import(
+                                        '@/components/admin/nodes/isos/IsosContainer'
+                                    )
+                            )
+                        ),
                     },
                     {
                         path: 'templates',
                         element: lazyLoad(
-                            lazy(() => import('@/components/admin/nodes/templates/NodeTemplatesContainer'))
+                            lazy(
+                                () =>
+                                    import(
+                                        '@/components/admin/nodes/templates/NodeTemplatesContainer'
+                                    )
+                            )
                         ),
                     },
                     {
                         path: 'addresses',
                         element: lazyLoad(
-                            lazy(() => import('@/components/admin/nodes/addresses/NodeAddressesContainer'))
+                            lazy(
+                                () =>
+                                    import(
+                                        '@/components/admin/nodes/addresses/NodeAddressesContainer'
+                                    )
+                            )
                         ),
                     },
                     {
                         path: 'settings',
                         element: lazyLoad(
-                            lazy(() => import('@/components/admin/nodes/settings/NodeSettingsContainer'))
+                            lazy(
+                                () =>
+                                    import(
+                                        '@/components/admin/nodes/settings/NodeSettingsContainer'
+                                    )
+                            )
                         ),
                         children: [
                             {
                                 path: 'general',
                                 element: lazyLoad(
-                                    lazy(() => import('@/components/admin/nodes/settings/GeneralContainer'))
+                                    lazy(
+                                        () =>
+                                            import(
+                                                '@/components/admin/nodes/settings/GeneralContainer'
+                                            )
+                                    )
                                 ),
                             },
                         ],
@@ -83,7 +134,9 @@ const AdminNodeRouter = () => {
     const id = match!.params.id
     const node = NodeContext.useStoreState(state => state.node.data)
     const getNode = NodeContext.useStoreActions(actions => actions.node.getNode)
-    const clearNodeState = NodeContext.useStoreActions(actions => actions.clearNodeState)
+    const clearNodeState = NodeContext.useStoreActions(
+        actions => actions.clearNodeState
+    )
 
     const visibleRoutes = useMemo(
         () => [
@@ -140,7 +193,19 @@ const AdminNodeRouter = () => {
         setBreadcrumb(node?.name)
     }, [node])
 
-    return <>{!node ? error ? <ErrorMessage message={error} /> : <Spinner /> : <Outlet />}</>
+    return (
+        <>
+            {!node ? (
+                error ? (
+                    <ErrorMessage message={error} />
+                ) : (
+                    <Spinner />
+                )
+            ) : (
+                <Outlet />
+            )}
+        </>
+    )
 }
 
 export default AdminNodeRouter
diff --git a/resources/scripts/routers/AdminServerRouter.tsx b/resources/scripts/routers/AdminServerRouter.tsx
index 45beeaea25c..40825b17146 100644
--- a/resources/scripts/routers/AdminServerRouter.tsx
+++ b/resources/scripts/routers/AdminServerRouter.tsx
@@ -1,16 +1,19 @@
+import { lazyLoad } from '@/routers/helpers'
+import { Route } from '@/routers/router'
+import { AdminServerContext } from '@/state/admin/server'
+import { ServerContext } from '@/state/server'
+import { ExclamationCircleIcon } from '@heroicons/react/24/outline'
+import { lazy, useContext, useEffect, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { Outlet, RouteObject, useMatch } from 'react-router-dom'
+
 import { httpErrorToHuman } from '@/api/http'
-import { NavigationBarContext } from '@/components/elements/navigation/NavigationBar'
+
 import ScreenBlock, { ErrorMessage } from '@/components/elements/ScreenBlock'
 import Spinner from '@/components/elements/Spinner'
-import { lazy, useContext, useEffect, useState } from 'react'
-import { Outlet, RouteObject, useMatch } from 'react-router-dom'
-import { ExclamationCircleIcon } from '@heroicons/react/24/outline'
-import { AdminServerContext } from '@/state/admin/server'
+import { NavigationBarContext } from '@/components/elements/navigation/NavigationBar'
+
 import FixServerStatusButton from '@/components/admin/servers/FixServerStatusButton'
-import { useTranslation } from 'react-i18next'
-import { ServerContext } from '@/state/server'
-import { lazyLoad } from '@/routers/helpers'
-import { Route } from '@/routers/router'
 
 export const routes: Route[] = [
     {
@@ -18,38 +21,67 @@ export const routes: Route[] = [
         children: [
             {
                 index: true,
-                element: lazyLoad(lazy(() => import('@/components/admin/servers/ServersContainer'))),
+                element: lazyLoad(
+                    lazy(
+                        () =>
+                            import(
+                                '@/components/admin/servers/ServersContainer'
+                            )
+                    )
+                ),
             },
             {
                 path: ':id',
                 element: (
                     <AdminServerContext.Provider>
-                        {lazyLoad(lazy(() => import('@/routers/AdminServerRouter')))}
+                        {lazyLoad(
+                            lazy(() => import('@/routers/AdminServerRouter'))
+                        )}
                     </AdminServerContext.Provider>
                 ),
                 children: [
                     {
                         index: true,
                         element: lazyLoad(
-                            lazy(() => import('@/components/admin/servers/overview/ServerOverviewContainer'))
+                            lazy(
+                                () =>
+                                    import(
+                                        '@/components/admin/servers/overview/ServerOverviewContainer'
+                                    )
+                            )
                         ),
                     },
                     {
                         path: 'settings',
                         element: lazyLoad(
-                            lazy(() => import('@/components/admin/servers/settings/ServerSettingsContainer'))
+                            lazy(
+                                () =>
+                                    import(
+                                        '@/components/admin/servers/settings/ServerSettingsContainer'
+                                    )
+                            )
                         ),
                         children: [
                             {
                                 path: 'general',
                                 element: lazyLoad(
-                                    lazy(() => import('@/components/admin/servers/settings/GeneralContainer'))
+                                    lazy(
+                                        () =>
+                                            import(
+                                                '@/components/admin/servers/settings/GeneralContainer'
+                                            )
+                                    )
                                 ),
                             },
                             {
                                 path: 'hardware',
                                 element: lazyLoad(
-                                    lazy(() => import('@/components/admin/servers/settings/ServerHardwareContainer'))
+                                    lazy(
+                                        () =>
+                                            import(
+                                                '@/components/admin/servers/settings/ServerHardwareContainer'
+                                            )
+                                    )
                                 ),
                             },
                         ],
@@ -64,8 +96,12 @@ const AdminServerRouter = () => {
     const match = useMatch('/admin/servers/:id/*')
     const [error, setError] = useState<string>()
     const server = AdminServerContext.useStoreState(state => state.server.data)
-    const getServer = AdminServerContext.useStoreActions(actions => actions.server.getServer)
-    const clearServerState = AdminServerContext.useStoreActions(actions => actions.clearServerState)
+    const getServer = AdminServerContext.useStoreActions(
+        actions => actions.server.getServer
+    )
+    const clearServerState = AdminServerContext.useStoreActions(
+        actions => actions.clearServerState
+    )
     const { t: tStrings } = useTranslation('strings')
 
     const visibleRoutes = [
@@ -114,7 +150,8 @@ const AdminServerRouter = () => {
                 )
             ) : (
                 <>
-                    {server.status === 'deleting' || server.status === 'deletion_failed' ? (
+                    {server.status === 'deleting' ||
+                    server.status === 'deletion_failed' ? (
                         <ScreenBlock
                             center
                             icon={ExclamationCircleIcon}
@@ -123,7 +160,11 @@ const AdminServerRouter = () => {
                                     ? "This server is being deleted. If you think this is an error, click below to make the server accessible. Clicking the button will not stop the server from being deleted if it's in progress"
                                     : 'This server failed to delete. if you think this is an error, click below to make the server accessible. The server MAY not be in a usable state.'
                             }
-                            title={server.status === 'deleting' ? 'Deleting' : 'Failed to Delete'}
+                            title={
+                                server.status === 'deleting'
+                                    ? 'Deleting'
+                                    : 'Failed to Delete'
+                            }
                         >
                             <FixServerStatusButton />
                         </ScreenBlock>
diff --git a/resources/scripts/routers/AdminUserRouter.tsx b/resources/scripts/routers/AdminUserRouter.tsx
index a8e80d750f1..5491f17eee3 100644
--- a/resources/scripts/routers/AdminUserRouter.tsx
+++ b/resources/scripts/routers/AdminUserRouter.tsx
@@ -1,10 +1,12 @@
-import getUser from '@/api/admin/users/getUser'
-import useUserSWR, { getKey } from '@/api/admin/users/useUserSWR'
-import { NavigationBarContext } from '@/components/elements/navigation/NavigationBar'
 import { lazyLoad, query } from '@/routers/helpers'
+import { Route } from '@/routers/router'
 import { lazy, useContext, useEffect } from 'react'
 import { Outlet, RouteObject } from 'react-router-dom'
-import { Route } from '@/routers/router'
+
+import getUser from '@/api/admin/users/getUser'
+import useUserSWR, { getKey } from '@/api/admin/users/useUserSWR'
+
+import { NavigationBarContext } from '@/components/elements/navigation/NavigationBar'
 
 export const routes: Route[] = [
     {
@@ -12,30 +14,54 @@ export const routes: Route[] = [
         children: [
             {
                 index: true,
-                element: lazyLoad(lazy(() => import('@/components/admin/users/UsersContainer'))),
+                element: lazyLoad(
+                    lazy(
+                        () => import('@/components/admin/users/UsersContainer')
+                    )
+                ),
             },
             {
                 path: ':id',
                 element: lazyLoad(lazy(() => import('./AdminUserRouter'))),
-                loader: ({ params }) => query(getKey(parseInt(params.id!)), () => getUser(parseInt(params.id!))),
+                loader: ({ params }) =>
+                    query(getKey(parseInt(params.id!)), () =>
+                        getUser(parseInt(params.id!))
+                    ),
                 children: [
                     {
                         path: 'settings',
                         element: lazyLoad(
-                            lazy(() => import('@/components/admin/users/settings/UserSettingsContainer'))
+                            lazy(
+                                () =>
+                                    import(
+                                        '@/components/admin/users/settings/UserSettingsContainer'
+                                    )
+                            )
                         ),
                         children: [
                             {
                                 path: 'general',
                                 element: lazyLoad(
-                                    lazy(() => import('@/components/admin/users/settings/GeneralContainer'))
+                                    lazy(
+                                        () =>
+                                            import(
+                                                '@/components/admin/users/settings/GeneralContainer'
+                                            )
+                                    )
                                 ),
                             },
                         ],
                     },
                     {
                         path: 'servers',
-                        element: lazyLoad(lazy(() => import('@/components/admin/users/servers/UserServersContainer'))),
+                        element: lazyLoad(
+                            lazy(
+                                () =>
+                                    import(
+                                        '@/components/admin/users/servers/UserServersContainer'
+                                    )
+                            )
+                        ),
                     },
                 ],
             },
diff --git a/resources/scripts/routers/DashboardRouter.tsx b/resources/scripts/routers/DashboardRouter.tsx
index f7dc0b16a77..a76b2b559ee 100644
--- a/resources/scripts/routers/DashboardRouter.tsx
+++ b/resources/scripts/routers/DashboardRouter.tsx
@@ -1,15 +1,20 @@
-import DashboardContainer from '@/components/dashboard/DashboardContainer'
-import { NavigationBarContext } from '@/components/elements/navigation/NavigationBar'
-import TransitionRouter from '@/routers/TransitionRouter'
-import { lazy, useContext, useEffect } from 'react'
-import { RouteObject } from 'react-router-dom'
-import { useTranslation } from 'react-i18next'
 import { routes as serverRoutes } from '@/routers/ServerRouter'
+import TransitionRouter from '@/routers/TransitionRouter'
 import { lazyLoad } from '@/routers/helpers'
 import { Route } from '@/routers/router'
+import { lazy, useContext, useEffect } from 'react'
+import { useTranslation } from 'react-i18next'
+import { RouteObject } from 'react-router-dom'
+
+import { NavigationBarContext } from '@/components/elements/navigation/NavigationBar'
+
+import DashboardContainer from '@/components/dashboard/DashboardContainer'
 
 export const routes: Route[] = [
-    { index: true, element: lazyLoad(lazy(() => import('@/routers/DashboardRouter'))) },
+    {
+        index: true,
+        element: lazyLoad(lazy(() => import('@/routers/DashboardRouter'))),
+    },
     ...serverRoutes,
 ]
 
diff --git a/resources/scripts/routers/ServerRouter.tsx b/resources/scripts/routers/ServerRouter.tsx
index 3ab23d45041..103273a5cd5 100644
--- a/resources/scripts/routers/ServerRouter.tsx
+++ b/resources/scripts/routers/ServerRouter.tsx
@@ -1,56 +1,122 @@
-import { httpErrorToHuman } from '@/api/http'
-import { NavigationBarContext } from '@/components/elements/navigation/NavigationBar'
-import ScreenBlock, { ErrorMessage } from '@/components/elements/ScreenBlock'
-import Spinner from '@/components/elements/Spinner'
+import { lazyLoad } from '@/routers/helpers'
+import { Route } from '@/routers/router'
 import { ServerContext } from '@/state/server'
+import {
+    ArrowPathIcon,
+    ExclamationCircleIcon,
+    NoSymbolIcon,
+} from '@heroicons/react/24/outline'
 import { lazy, useContext, useEffect, useMemo, useState } from 'react'
+import { useTranslation } from 'react-i18next'
 import { Outlet, RouteObject, useMatches } from 'react-router-dom'
-import { ArrowPathIcon, ExclamationCircleIcon, NoSymbolIcon } from '@heroicons/react/24/outline'
+
+import { httpErrorToHuman } from '@/api/http'
 import { EloquentStatus } from '@/api/server/types'
-import { useTranslation } from 'react-i18next'
-import { lazyLoad } from '@/routers/helpers'
-import { Route } from '@/routers/router'
+
+import ScreenBlock, { ErrorMessage } from '@/components/elements/ScreenBlock'
+import Spinner from '@/components/elements/Spinner'
+import { NavigationBarContext } from '@/components/elements/navigation/NavigationBar'
 
 export const routes: Route[] = [
     {
-        element: <ServerContext.Provider>{lazyLoad(lazy(() => import('./ServerRouter')))}</ServerContext.Provider>,
+        element: (
+            <ServerContext.Provider>
+                {lazyLoad(lazy(() => import('./ServerRouter')))}
+            </ServerContext.Provider>
+        ),
         path: '/servers/:id',
         children: [
             {
                 index: true,
-                element: lazyLoad(lazy(() => import('@/components/servers/overview/ServerOverviewContainer'))),
+                element: lazyLoad(
+                    lazy(
+                        () =>
+                            import(
+                                '@/components/servers/overview/ServerOverviewContainer'
+                            )
+                    )
+                ),
             },
             {
                 path: 'backups',
-                element: lazyLoad(lazy(() => import('@/components/servers/backups/BackupsContainer'))),
+                element: lazyLoad(
+                    lazy(
+                        () =>
+                            import(
+                                '@/components/servers/backups/BackupsContainer'
+                            )
+                    )
+                ),
             },
             {
                 path: 'settings',
-                element: lazyLoad(lazy(() => import('@/components/servers/settings/ServerSettingsContainer'))),
+                element: lazyLoad(
+                    lazy(
+                        () =>
+                            import(
+                                '@/components/servers/settings/ServerSettingsContainer'
+                            )
+                    )
+                ),
                 children: [
                     {
                         path: 'general',
-                        element: lazyLoad(lazy(() => import('@/components/servers/settings/GeneralContainer'))),
+                        element: lazyLoad(
+                            lazy(
+                                () =>
+                                    import(
+                                        '@/components/servers/settings/GeneralContainer'
+                                    )
+                            )
+                        ),
                     },
 
                     {
                         path: 'hardware',
-                        element: lazyLoad(lazy(() => import('@/components/servers/settings/HardwareContainer'))),
+                        element: lazyLoad(
+                            lazy(
+                                () =>
+                                    import(
+                                        '@/components/servers/settings/HardwareContainer'
+                                    )
+                            )
+                        ),
                     },
 
                     {
                         path: 'network',
-                        element: lazyLoad(lazy(() => import('@/components/servers/settings/NetworkContainer'))),
+                        element: lazyLoad(
+                            lazy(
+                                () =>
+                                    import(
+                                        '@/components/servers/settings/NetworkContainer'
+                                    )
+                            )
+                        ),
                     },
                     {
                         path: 'security',
-                        element: lazyLoad(lazy(() => import('@/components/servers/settings/SecurityContainer'))),
+                        element: lazyLoad(
+                            lazy(
+                                () =>
+                                    import(
+                                        '@/components/servers/settings/SecurityContainer'
+                                    )
+                            )
+                        ),
                     },
                 ],
             },
             {
                 path: 'terminal',
-                element: lazyLoad(lazy(() => import('@/components/servers/terminal/ServerTerminalContainer'))),
+                element: lazyLoad(
+                    lazy(
+                        () =>
+                            import(
+                                '@/components/servers/terminal/ServerTerminalContainer'
+                            )
+                    )
+                ),
             },
         ],
     },
@@ -62,8 +128,12 @@ const ServerRouter = () => {
     const id = matches[0].params.id
     const [error, setError] = useState<string>()
     const server = ServerContext.useStoreState(state => state.server.data)
-    const getServer = ServerContext.useStoreActions(actions => actions.server.getServer)
-    const clearServerState = ServerContext.useStoreActions(actions => actions.clearServerState)
+    const getServer = ServerContext.useStoreActions(
+        actions => actions.server.getServer
+    )
+    const clearServerState = ServerContext.useStoreActions(
+        actions => actions.clearServerState
+    )
 
     const visibleRoutes = useMemo(
         () => [
diff --git a/resources/scripts/routers/TransitionRouter.tsx b/resources/scripts/routers/TransitionRouter.tsx
index 7080457e036..ba05622ee24 100644
--- a/resources/scripts/routers/TransitionRouter.tsx
+++ b/resources/scripts/routers/TransitionRouter.tsx
@@ -1,16 +1,17 @@
-import Fade from '@/components/elements/Fade'
 import styled from '@emotion/styled'
 import { ReactNode } from 'react'
 import { useLocation } from 'react-router-dom'
 import { SwitchTransition } from 'react-transition-group'
 import tw from 'twin.macro'
 
+import Fade from '@/components/elements/Fade'
+
 const StyledSwitchTransition = styled(SwitchTransition)`
-  ${tw`relative`};
+    ${tw`relative`};
 
-  & section {
-    ${tw`absolute w-full top-0 left-0`};
-  }
+    & section {
+        ${tw`absolute w-full top-0 left-0`};
+    }
 `
 
 interface Props {
@@ -18,21 +19,21 @@ interface Props {
 }
 
 const TransitionRouter = ({ children }: Props) => {
-  const location = useLocation()
+    const location = useLocation()
 
-  return (
-    <StyledSwitchTransition>
-      <Fade
-        timeout={150}
-        key={location.pathname + location.search}
-        in
-        appear
-        unmountOnExit
-      >
-        {children}
-      </Fade>
-    </StyledSwitchTransition>
-  )
+    return (
+        <StyledSwitchTransition>
+            <Fade
+                timeout={150}
+                key={location.pathname + location.search}
+                in
+                appear
+                unmountOnExit
+            >
+                {children}
+            </Fade>
+        </StyledSwitchTransition>
+    )
 }
 
 export default TransitionRouter
diff --git a/resources/scripts/routers/helpers.tsx b/resources/scripts/routers/helpers.tsx
index b98dd7178e6..e9cb40be925 100644
--- a/resources/scripts/routers/helpers.tsx
+++ b/resources/scripts/routers/helpers.tsx
@@ -1,11 +1,14 @@
-import Spinner from '@/components/elements/Spinner'
 import { LazyExoticComponent } from 'react'
 import { MutatorOptions } from 'swr'
 import { mutate } from 'swr'
 import { BareFetcher } from 'swr'
 import { Key } from 'swr'
 
-export const lazyLoad = (LazyElement: LazyExoticComponent<() => JSX.Element>) => {
+import Spinner from '@/components/elements/Spinner'
+
+export const lazyLoad = (
+    LazyElement: LazyExoticComponent<() => JSX.Element>
+) => {
     return (
         <Spinner.Suspense>
             <LazyElement />
diff --git a/resources/scripts/routers/middleware/AuthenticatedRoutes.tsx b/resources/scripts/routers/middleware/AuthenticatedRoutes.tsx
index de250e84727..7fc379450e7 100644
--- a/resources/scripts/routers/middleware/AuthenticatedRoutes.tsx
+++ b/resources/scripts/routers/middleware/AuthenticatedRoutes.tsx
@@ -1,25 +1,27 @@
-import { Navigate, useLocation } from 'react-router-dom'
 import { useStoreState } from '@/state'
+import { Navigate, useLocation } from 'react-router-dom'
 
 interface Props {
-  children: JSX.Element
-  requireRootAdmin?: boolean
+    children: JSX.Element
+    requireRootAdmin?: boolean
 }
 
-const AuthenticatedRoutes: React.FC<Props> = ({ children, requireRootAdmin }) => {
-  const user = useStoreState((state) => state.user.data)
-  const location = useLocation()
-
-  if (!user) {
-    return <Navigate to='/auth/login' state={{ from: location }} replace />
-  }
+const AuthenticatedRoutes: React.FC<Props> = ({
+    children,
+    requireRootAdmin,
+}) => {
+    const user = useStoreState(state => state.user.data)
+    const location = useLocation()
 
-  if (requireRootAdmin && !user?.rootAdmin) {
-    return <Navigate to='/' replace />
-  }
+    if (!user) {
+        return <Navigate to='/auth/login' state={{ from: location }} replace />
+    }
 
+    if (requireRootAdmin && !user?.rootAdmin) {
+        return <Navigate to='/' replace />
+    }
 
-  return children
+    return children
 }
 
 export default AuthenticatedRoutes
diff --git a/resources/scripts/routers/middleware/GuestRoutes.tsx b/resources/scripts/routers/middleware/GuestRoutes.tsx
index 593765a59f5..7f39ffc24e1 100644
--- a/resources/scripts/routers/middleware/GuestRoutes.tsx
+++ b/resources/scripts/routers/middleware/GuestRoutes.tsx
@@ -1,19 +1,19 @@
-import { Navigate, useLocation } from 'react-router-dom'
 import { useStoreState } from '@/state'
+import { Navigate, useLocation } from 'react-router-dom'
 
 interface Props {
-  children: JSX.Element
+    children: JSX.Element
 }
 
 const GuestRoutes: React.FC<Props> = ({ children }) => {
-  const isAuthenticated = useStoreState((state) => state.user.data?.email)
-  const location = useLocation()
+    const isAuthenticated = useStoreState(state => state.user.data?.email)
+    const location = useLocation()
 
-  if (isAuthenticated) {
-    return <Navigate to='/' state={{ from: location }} replace />
-  }
+    if (isAuthenticated) {
+        return <Navigate to='/' state={{ from: location }} replace />
+    }
 
-  return children
+    return children
 }
 
 export default GuestRoutes
diff --git a/resources/scripts/routers/router.tsx b/resources/scripts/routers/router.tsx
index b2c2487c59c..3eac2c0e339 100644
--- a/resources/scripts/routers/router.tsx
+++ b/resources/scripts/routers/router.tsx
@@ -1,14 +1,16 @@
-import { FunctionComponent, lazy, LazyExoticComponent, ReactNode } from 'react'
-import Spinner from '@/components/elements/Spinner'
-import { createBrowserRouter, Outlet, RouteObject } from 'react-router-dom'
+import { routes as adminRoutes } from '@/routers/AdminDashboardRouter'
+import { routes as clientRoutes } from '@/routers/DashboardRouter'
+import { lazyLoad } from '@/routers/helpers'
 import AuthenticatedRoutes from '@/routers/middleware/AuthenticatedRoutes'
-import { NotFound } from '@/components/elements/ScreenBlock'
 import GuestRoutes from '@/routers/middleware/GuestRoutes'
+import { FunctionComponent, LazyExoticComponent, ReactNode, lazy } from 'react'
+import { Outlet, RouteObject, createBrowserRouter } from 'react-router-dom'
+
+import { NotFound } from '@/components/elements/ScreenBlock'
+import Spinner from '@/components/elements/Spinner'
 import NavigationBar from '@/components/elements/navigation/NavigationBar'
+
 import NavigationBarProvider from '@/components/NavigationBarProvider'
-import { routes as adminRoutes } from '@/routers/AdminDashboardRouter'
-import { routes as clientRoutes } from '@/routers/DashboardRouter'
-import { lazyLoad } from '@/routers/helpers'
 
 export type Route = {
     handle?: Handle
@@ -33,7 +35,9 @@ const router = createBrowserRouter([
         children: [
             {
                 path: 'login',
-                element: lazyLoad(lazy(() => import('@/components/auth/LoginContainer'))),
+                element: lazyLoad(
+                    lazy(() => import('@/components/auth/LoginContainer'))
+                ),
             },
         ],
     },
diff --git a/resources/scripts/state/admin/node.ts b/resources/scripts/state/admin/node.ts
index 2cebd3c50d0..75b0804b2e0 100644
--- a/resources/scripts/state/admin/node.ts
+++ b/resources/scripts/state/admin/node.ts
@@ -1,7 +1,8 @@
+import { Action, Thunk, action, createContextStore, thunk } from 'easy-peasy'
+import isEqual from 'react-fast-compare'
+
 import getNode from '@/api/admin/nodes/getNode'
 import { Node } from '@/api/admin/nodes/getNodes'
-import { action, Action, createContextStore, thunk, Thunk } from 'easy-peasy'
-import isEqual from 'react-fast-compare'
 
 export interface NodeDataStore {
     data?: Node
diff --git a/resources/scripts/state/admin/server.ts b/resources/scripts/state/admin/server.ts
index 63e8a15412a..bbf9c16d2e9 100644
--- a/resources/scripts/state/admin/server.ts
+++ b/resources/scripts/state/admin/server.ts
@@ -1,8 +1,9 @@
-import { AdminServerBuild } from '@/api/admin/servers/getServer'
-import getStatus, { ServerStateData } from '@/api/server/getState'
-import { action, Action, createContextStore, thunk, Thunk } from 'easy-peasy'
+import { Action, Thunk, action, createContextStore, thunk } from 'easy-peasy'
 import isEqual from 'react-fast-compare'
+
+import { AdminServerBuild } from '@/api/admin/servers/getServer'
 import { getServer } from '@/api/admin/servers/getServer'
+import getStatus, { ServerStateData } from '@/api/server/getState'
 
 export interface ServerDataStore {
     data?: AdminServerBuild
diff --git a/resources/scripts/state/flashes.ts b/resources/scripts/state/flashes.ts
index b1f3a015447..2539db6f549 100644
--- a/resources/scripts/state/flashes.ts
+++ b/resources/scripts/state/flashes.ts
@@ -1,59 +1,61 @@
 import { Action, action } from 'easy-peasy'
-import { FlashMessageType } from '@/components/elements/MessageBox'
+
 import { httpErrorToHuman } from '@/api/http'
 
+import { FlashMessageType } from '@/components/elements/MessageBox'
+
 export interface FlashStore {
-  items: FlashMessage[]
-  addFlash: Action<FlashStore, FlashMessage>
-  addError: Action<FlashStore, { message: string; key?: string }>
-  clearAndAddHttpError: Action<
-    FlashStore,
-    { error?: Error | any | null; key?: string }
-  >
-  clearFlashes: Action<FlashStore, string | void>
+    items: FlashMessage[]
+    addFlash: Action<FlashStore, FlashMessage>
+    addError: Action<FlashStore, { message: string; key?: string }>
+    clearAndAddHttpError: Action<
+        FlashStore,
+        { error?: Error | any | null; key?: string }
+    >
+    clearFlashes: Action<FlashStore, string | void>
 }
 
 export interface FlashMessage {
-  id?: string
-  key?: string
-  type: FlashMessageType
-  title?: string
-  message: string
+    id?: string
+    key?: string
+    type: FlashMessageType
+    title?: string
+    message: string
 }
 
 const flashes: FlashStore = {
-  items: [],
-
-  addFlash: action((state, payload) => {
-    state.items.push(payload)
-  }),
-
-  addError: action((state, payload) => {
-    state.items.push({ type: 'error', title: 'Error', ...payload })
-  }),
-
-  clearAndAddHttpError: action((state, payload) => {
-    if (!payload.error) {
-      state.items = []
-    } else {
-      console.error(payload.error)
-
-      state.items = [
-        {
-          type: 'error',
-          title: 'Error',
-          key: payload.key,
-          message: httpErrorToHuman(payload.error),
-        },
-      ]
-    }
-  }),
-
-  clearFlashes: action((state, payload) => {
-    state.items = payload
-      ? state.items.filter((flashes) => flashes.key !== payload)
-      : []
-  }),
+    items: [],
+
+    addFlash: action((state, payload) => {
+        state.items.push(payload)
+    }),
+
+    addError: action((state, payload) => {
+        state.items.push({ type: 'error', title: 'Error', ...payload })
+    }),
+
+    clearAndAddHttpError: action((state, payload) => {
+        if (!payload.error) {
+            state.items = []
+        } else {
+            console.error(payload.error)
+
+            state.items = [
+                {
+                    type: 'error',
+                    title: 'Error',
+                    key: payload.key,
+                    message: httpErrorToHuman(payload.error),
+                },
+            ]
+        }
+    }),
+
+    clearFlashes: action((state, payload) => {
+        state.items = payload
+            ? state.items.filter(flashes => flashes.key !== payload)
+            : []
+    }),
 }
 
 export default flashes
diff --git a/resources/scripts/state/index.ts b/resources/scripts/state/index.ts
index dbcd1a6fbcd..b408acb012f 100644
--- a/resources/scripts/state/index.ts
+++ b/resources/scripts/state/index.ts
@@ -4,15 +4,15 @@ import user, { UserStore } from '@/state/user'
 import { createStore, createTypedHooks } from 'easy-peasy'
 
 export interface ApplicationStore {
-  user: UserStore
-  settings: SettingsStore
-  flashes: FlashStore;
+    user: UserStore
+    settings: SettingsStore
+    flashes: FlashStore
 }
 
 const state: ApplicationStore = {
-  user,
-  settings,
-  flashes
+    user,
+    settings,
+    flashes,
 }
 
 const typedHooks = createTypedHooks<ApplicationStore>()
diff --git a/resources/scripts/state/server/index.ts b/resources/scripts/state/server/index.ts
index 4eccc226d32..345311f1847 100644
--- a/resources/scripts/state/server/index.ts
+++ b/resources/scripts/state/server/index.ts
@@ -1,7 +1,8 @@
+import { Action, Thunk, action, createContextStore, thunk } from 'easy-peasy'
+import isEqual from 'react-fast-compare'
+
 import getServer, { ServerBuild } from '@/api/server/getServer'
 import getStatus, { ServerStateData } from '@/api/server/getState'
-import { action, Action, createContextStore, thunk, Thunk } from 'easy-peasy'
-import isEqual from 'react-fast-compare'
 
 export interface ServerDataStore {
     data?: ServerBuild
diff --git a/resources/scripts/state/settings.ts b/resources/scripts/state/settings.ts
index 45af63273ac..a95e8287947 100644
--- a/resources/scripts/state/settings.ts
+++ b/resources/scripts/state/settings.ts
@@ -1,4 +1,4 @@
-import { action, Action } from 'easy-peasy'
+import { Action, action } from 'easy-peasy'
 
 export interface SiteSettings {
     theme: 'dark' | 'light'
diff --git a/resources/scripts/state/user.ts b/resources/scripts/state/user.ts
index aab5dff7bd5..3a7e3e0d801 100644
--- a/resources/scripts/state/user.ts
+++ b/resources/scripts/state/user.ts
@@ -1,23 +1,23 @@
-import { action, Action } from 'easy-peasy'
+import { Action, action } from 'easy-peasy'
 
 export interface UserData {
-  name: string
-  email: string
-  rootAdmin: boolean
-  createdAt: string
-  updatedAt: string
+    name: string
+    email: string
+    rootAdmin: boolean
+    createdAt: string
+    updatedAt: string
 }
 
 export interface UserStore {
-  data?: UserData
-  setUserData: Action<UserStore, UserData>
+    data?: UserData
+    setUserData: Action<UserStore, UserData>
 }
 
 const user: UserStore = {
-  data: undefined,
-  setUserData: action((state, payload) => {
-    state.data = payload
-  }),
+    data: undefined,
+    setUserData: action((state, payload) => {
+        state.data = payload
+    }),
 }
 
 export default user
diff --git a/resources/scripts/util/chart.ts b/resources/scripts/util/chart.ts
index 64ae336175e..b80f915e4aa 100644
--- a/resources/scripts/util/chart.ts
+++ b/resources/scripts/util/chart.ts
@@ -1,225 +1,230 @@
+import { useStoreState } from '@/state'
+import { hexToRgba } from '@/util/helpers'
 import {
-  Chart as ChartJS,
-  ChartData,
-  ChartDataset,
-  ChartOptions,
-  Filler,
-  LinearScale,
-  LineElement,
-  PointElement,
+    ChartData,
+    ChartDataset,
+    Chart as ChartJS,
+    ChartOptions,
+    Filler,
+    LineElement,
+    LinearScale,
+    PointElement,
 } from 'chart.js'
-import { DeepPartial } from 'ts-essentials'
-import { useEffect, useState } from 'react'
 import { deepmerge, deepmergeCustom } from 'deepmerge-ts'
+import { useEffect, useState } from 'react'
+import { DeepPartial } from 'ts-essentials'
 import { theme } from 'twin.macro'
-import { hexToRgba } from '@/util/helpers'
-import { useStoreState } from '@/state'
 
 ChartJS.register(LineElement, PointElement, Filler, LinearScale)
 
 const options: ChartOptions<'line'> = {
-  responsive: true,
-  animation: false,
-  plugins: {
-    legend: { display: false },
-    title: { display: false },
-    tooltip: { enabled: false },
-  },
-  layout: {
-    padding: 0,
-  },
-  scales: {
-    x: {
-      min: 0,
-      max: 19,
-      type: 'linear',
-      grid: {
-        display: false,
-        drawBorder: false,
-      },
-      ticks: {
-        display: false,
-      },
+    responsive: true,
+    animation: false,
+    plugins: {
+        legend: { display: false },
+        title: { display: false },
+        tooltip: { enabled: false },
     },
-    y: {
-      min: 0,
-      type: 'linear',
-      grid: {
-        display: true,
-        color: theme('colors.stone.300'),
-        drawBorder: false,
-      },
-      ticks: {
-        display: true,
-        count: 3,
-        color: theme('colors.stone.900'),
-        font: {
-          family: theme('fontFamily.sans'),
-          size: 11,
-          weight: '400',
-        },
-      },
+    layout: {
+        padding: 0,
     },
-  },
-  elements: {
-    point: {
-      radius: 0,
+    scales: {
+        x: {
+            min: 0,
+            max: 19,
+            type: 'linear',
+            grid: {
+                display: false,
+                drawBorder: false,
+            },
+            ticks: {
+                display: false,
+            },
+        },
+        y: {
+            min: 0,
+            type: 'linear',
+            grid: {
+                display: true,
+                color: theme('colors.stone.300'),
+                drawBorder: false,
+            },
+            ticks: {
+                display: true,
+                count: 3,
+                color: theme('colors.stone.900'),
+                font: {
+                    family: theme('fontFamily.sans'),
+                    size: 11,
+                    weight: '400',
+                },
+            },
+        },
     },
-    line: {
-      tension: 0.15,
+    elements: {
+        point: {
+            radius: 0,
+        },
+        line: {
+            tension: 0.15,
+        },
     },
-  },
 }
 
 function getOptions(
-  opts?: DeepPartial<ChartOptions<'line'>>
+    opts?: DeepPartial<ChartOptions<'line'>>
 ): ChartOptions<'line'> {
-  // @ts-expect-error
-  return deepmerge(options, opts || {})
+    // @ts-expect-error
+    return deepmerge(options, opts || {})
 }
 
 type ChartDatasetCallback = (
-  value: ChartDataset<'line'>,
-  index: number
+    value: ChartDataset<'line'>,
+    index: number
 ) => ChartDataset<'line'>
 
 function getEmptyData(
-  label: string,
-  sets = 1,
-  callback?: ChartDatasetCallback | undefined
+    label: string,
+    sets = 1,
+    callback?: ChartDatasetCallback | undefined
 ): ChartData<'line'> {
-  const next = callback || ((value) => value)
-
-  return {
-    labels: Array(20)
-      .fill(0)
-      .map((_, index) => index),
-    datasets: Array(sets)
-      .fill(0)
-      .map((_, index) =>
-        next(
-          {
-            fill: true,
-            label,
-            data: Array(20).fill(-5),
-            borderColor: theme('colors.blue.500'),
-            backgroundColor: hexToRgba(theme('colors.blue.600'), 0.5),
-          },
-          index
-        )
-      ),
-  }
+    const next = callback || (value => value)
+
+    return {
+        labels: Array(20)
+            .fill(0)
+            .map((_, index) => index),
+        datasets: Array(sets)
+            .fill(0)
+            .map((_, index) =>
+                next(
+                    {
+                        fill: true,
+                        label,
+                        data: Array(20).fill(-5),
+                        borderColor: theme('colors.blue.500'),
+                        backgroundColor: hexToRgba(
+                            theme('colors.blue.600'),
+                            0.5
+                        ),
+                    },
+                    index
+                )
+            ),
+    }
 }
 
 const merge = deepmergeCustom({ mergeArrays: false })
 
 interface UseChartOptions {
-  sets: number
-  options?: DeepPartial<ChartOptions<'line'>> | number | undefined
-  callback?: ChartDatasetCallback | undefined
+    sets: number
+    options?: DeepPartial<ChartOptions<'line'>> | number | undefined
+    callback?: ChartDatasetCallback | undefined
 }
 
 function useChart(label: string, opts?: UseChartOptions) {
-  const themeMode = useStoreState((state) => state.settings.data?.theme)
+    const themeMode = useStoreState(state => state.settings.data?.theme)
 
-  const [options, setOptions] = useState(
-    getOptions(
-      typeof opts?.options === 'number'
-        ? { scales: { y: { min: 0, suggestedMax: opts.options } } }
-        : opts?.options
-    )
-  )
-
-  useEffect(() => {
-    if (themeMode === 'dark') {
-      setOptions(
-        merge(options, {
-          scales: {
-            y: {
-              grid: {
-                color: theme('colors.stone.700'),
-              },
-              ticks: {
-                color: theme('colors.stone.300'),
-              },
-            },
-          },
-        })
-      )
-    } else {
-      setOptions(
-        merge(options, {
-          scales: {
-            y: {
-              grid: {
-                color: theme('colors.stone.300'),
-              },
-              ticks: {
-                color: theme('colors.stone.900'),
-              },
-            },
-          },
-        })
-      )
-    }
-  }, [themeMode])
-
-  const [data, setData] = useState(
-    getEmptyData(label, opts?.sets || 1, opts?.callback)
-  )
-
-  const push = (items: number | null | (number | null)[]) =>
-    setData((state) =>
-      merge(state, {
-        datasets: (Array.isArray(items) ? items : [items]).map(
-          (item, index) => ({
-            ...state.datasets[index],
-            data: state.datasets[index].data
-              .slice(1)
-              .concat(
-                typeof item === 'number' ? Number(item.toFixed(2)) : item
-              ),
-          })
-        ),
-      })
+    const [options, setOptions] = useState(
+        getOptions(
+            typeof opts?.options === 'number'
+                ? { scales: { y: { min: 0, suggestedMax: opts.options } } }
+                : opts?.options
+        )
     )
 
-  const clear = () =>
-    setData((state) =>
-      merge(state, {
-        datasets: state.datasets.map((value) => ({
-          ...value,
-          data: Array(20).fill(-5),
-        })),
-      })
+    useEffect(() => {
+        if (themeMode === 'dark') {
+            setOptions(
+                merge(options, {
+                    scales: {
+                        y: {
+                            grid: {
+                                color: theme('colors.stone.700'),
+                            },
+                            ticks: {
+                                color: theme('colors.stone.300'),
+                            },
+                        },
+                    },
+                })
+            )
+        } else {
+            setOptions(
+                merge(options, {
+                    scales: {
+                        y: {
+                            grid: {
+                                color: theme('colors.stone.300'),
+                            },
+                            ticks: {
+                                color: theme('colors.stone.900'),
+                            },
+                        },
+                    },
+                })
+            )
+        }
+    }, [themeMode])
+
+    const [data, setData] = useState(
+        getEmptyData(label, opts?.sets || 1, opts?.callback)
     )
 
-  return { props: { data, options }, push, clear, setOptions }
+    const push = (items: number | null | (number | null)[]) =>
+        setData(state =>
+            merge(state, {
+                datasets: (Array.isArray(items) ? items : [items]).map(
+                    (item, index) => ({
+                        ...state.datasets[index],
+                        data: state.datasets[index].data
+                            .slice(1)
+                            .concat(
+                                typeof item === 'number'
+                                    ? Number(item.toFixed(2))
+                                    : item
+                            ),
+                    })
+                ),
+            })
+        )
+
+    const clear = () =>
+        setData(state =>
+            merge(state, {
+                datasets: state.datasets.map(value => ({
+                    ...value,
+                    data: Array(20).fill(-5),
+                })),
+            })
+        )
+
+    return { props: { data, options }, push, clear, setOptions }
 }
 
 function useChartTickLabel(
-  label: string,
-  max: number,
-  tickLabel: string,
-  roundTo?: number
+    label: string,
+    max: number,
+    tickLabel: string,
+    roundTo?: number
 ) {
-  return useChart(label, {
-    sets: 1,
-    options: {
-      scales: {
-        y: {
-          suggestedMax: max,
-          ticks: {
-            callback(value) {
-              return `${
-                roundTo ? Number(value).toFixed(roundTo) : value
-              }${tickLabel}`
+    return useChart(label, {
+        sets: 1,
+        options: {
+            scales: {
+                y: {
+                    suggestedMax: max,
+                    ticks: {
+                        callback(value) {
+                            return `${
+                                roundTo ? Number(value).toFixed(roundTo) : value
+                            }${tickLabel}`
+                        },
+                    },
+                },
             },
-          },
         },
-      },
-    },
-  })
+    })
 }
 
 export { useChart, useChartTickLabel, getOptions, getEmptyData }
diff --git a/resources/scripts/util/helpers.ts b/resources/scripts/util/helpers.ts
index fdc6df8cf5f..c1f777d21d0 100644
--- a/resources/scripts/util/helpers.ts
+++ b/resources/scripts/util/helpers.ts
@@ -1,11 +1,17 @@
 import { Params } from 'react-router-dom'
+
 import { AddressType } from '@/api/server/getServer'
 
 export type WithRequired<T, K extends keyof T> = T & { [P in K]-?: T[P] }
 
-export const randomInt = (low: number, high: number) => Math.floor(Math.random() * (high - low) + low)
+export const randomInt = (low: number, high: number) =>
+    Math.floor(Math.random() * (high - low) + low)
 
-export const getInitials = (str: string, splitBy: string = ' ', maxLength: number = 3) => {
+export const getInitials = (
+    str: string,
+    splitBy: string = ' ',
+    maxLength: number = 3
+) => {
     const words = str.toUpperCase().split(splitBy).slice(0, maxLength)
     const initials = words.map(word => word[0]).join('')
     return initials
@@ -29,16 +35,31 @@ export interface FormattedBytes {
     unit: Sizes
 }
 
-export type Sizes = 'B' | 'KiB' | 'MiB' | 'GiB' | 'TiB' | 'PiB' | 'EiB' | 'ZiB' | 'YiB'
-
-export function formatBytes(bytes: number, decimals = 2, customSize?: Sizes): FormattedBytes {
+export type Sizes =
+    | 'B'
+    | 'KiB'
+    | 'MiB'
+    | 'GiB'
+    | 'TiB'
+    | 'PiB'
+    | 'EiB'
+    | 'ZiB'
+    | 'YiB'
+
+export function formatBytes(
+    bytes: number,
+    decimals = 2,
+    customSize?: Sizes
+): FormattedBytes {
     if (bytes === 0) return { size: 0, unit: 'B' }
 
     const k = 1024
     const sizes = ['B', 'KiB', 'MiB', 'GiB', 'TiB', 'PiB', 'EiB', 'ZiB', 'YiB']
     const dm = decimals < 0 ? 0 : decimals
 
-    const i = customSize ? sizes.indexOf(customSize) : Math.floor(Math.log(bytes) / Math.log(k))
+    const i = customSize
+        ? sizes.indexOf(customSize)
+        : Math.floor(Math.log(bytes) / Math.log(k))
     const size = parseFloat((bytes / Math.pow(k, i)).toFixed(dm))
 
     return {
@@ -107,19 +128,25 @@ export const bindUrlParams = (url: string, params: Params<string>) => {
     return url
 }
 
-export const countIPsInRange = (ipType: 'ipv4' | 'ipv6', startIP: string, endIP: string): number => {
+export const countIPsInRange = (
+    ipType: 'ipv4' | 'ipv6',
+    startIP: string,
+    endIP: string
+): number => {
     if (startIP === '' || endIP === '') return 0
 
     try {
         const ipToNumber = (ip: string): bigint => {
-            const parts = ipType === 'ipv4' ? ip.split('.').map(Number) : ip.split(':')
+            const parts =
+                ipType === 'ipv4' ? ip.split('.').map(Number) : ip.split(':')
             let number = BigInt(0)
             for (let i = 0; i < parts.length; i++) {
                 if (ipType === 'ipv4') {
                     number = (number << BigInt(8)) + BigInt(parts[i])
                 } else {
                     // @ts-expect-error
-                    number = (number << BigInt(16)) + BigInt(parseInt(parts[i], 16))
+                    number =
+                        (number << BigInt(16)) + BigInt(parseInt(parts[i], 16))
                 }
             }
             return number
diff --git a/resources/scripts/util/registerCustomYupValidationRules.ts b/resources/scripts/util/registerCustomYupValidationRules.ts
index a0ce6c51bb1..5e700f709ef 100644
--- a/resources/scripts/util/registerCustomYupValidationRules.ts
+++ b/resources/scripts/util/registerCustomYupValidationRules.ts
@@ -8,10 +8,14 @@ yup.addMethod(yup.string, 'englishKeyboardCharacters', function () {
 })
 
 yup.addMethod(yup.string, 'passwordRequirements', function () {
-    return this.matches(/^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#\$%\^&\*])(?=.{8,})/, {
-        message: 'Must contain 8 characters, 1 uppercase, 1 lowercase, 1 number and 1 special character',
-        excludeEmptyString: true,
-    })
+    return this.matches(
+        /^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#\$%\^&\*])(?=.{8,})/,
+        {
+            message:
+                'Must contain 8 characters, 1 uppercase, 1 lowercase, 1 number and 1 special character',
+            excludeEmptyString: true,
+        }
+    )
 })
 
 yup.addMethod(yup.string, 'ipAddress', function () {
@@ -22,7 +26,10 @@ yup.addMethod(yup.string, 'ipAddress', function () {
             const ipv4Regex = /^(\d{1,3}\.){3}\d{1,3}$/
             const ipv6Regex = /^([0-9A-Fa-f]{1,4}:){7}[0-9A-Fa-f]{1,4}$/
 
-            return ipv4Regex.test(value as string) || ipv6Regex.test(value as string)
+            return (
+                ipv4Regex.test(value as string) ||
+                ipv6Regex.test(value as string)
+            )
         },
     })
 })
@@ -32,9 +39,10 @@ yup.addMethod(yup.string, 'hostname', function () {
         name: 'hostname',
         message: 'Invalid hostname',
         test: value => {
-            const hostnameRegex = /^(([a-zA-Z0-9]|[a-zA-Z0-9][a-zA-Z0-9\-]*[a-zA-Z0-9])\.)*([A-Za-z0-9]|[A-Za-z0-9][A-Za-z0-9\-]*[A-Za-z0-9])$/
+            const hostnameRegex =
+                /^(([a-zA-Z0-9]|[a-zA-Z0-9][a-zA-Z0-9\-]*[a-zA-Z0-9])\.)*([A-Za-z0-9]|[A-Za-z0-9][A-Za-z0-9\-]*[A-Za-z0-9])$/
 
             return hostnameRegex.test(value as string)
         },
     })
-})
\ No newline at end of file
+})
diff --git a/resources/scripts/util/useFlash.ts b/resources/scripts/util/useFlash.ts
index 947975528e4..d1f6a66894e 100644
--- a/resources/scripts/util/useFlash.ts
+++ b/resources/scripts/util/useFlash.ts
@@ -1,26 +1,29 @@
-import { Actions, useStoreActions } from 'easy-peasy';
-import { FlashStore } from '@/state/flashes';
-import { ApplicationStore } from '@/state';
+import { ApplicationStore } from '@/state'
+import { FlashStore } from '@/state/flashes'
+import { Actions, useStoreActions } from 'easy-peasy'
 
 interface KeyedFlashStore {
-    addError: (message: string, title?: string) => void;
-    clearFlashes: () => void;
-    clearAndAddHttpError: (error?: Error | string | null) => void;
+    addError: (message: string, title?: string) => void
+    clearFlashes: () => void
+    clearAndAddHttpError: (error?: Error | string | null) => void
 }
 
 const useFlash = (): Actions<FlashStore> => {
-    return useStoreActions((actions: Actions<ApplicationStore>) => actions.flashes);
-};
+    return useStoreActions(
+        (actions: Actions<ApplicationStore>) => actions.flashes
+    )
+}
 
 const useFlashKey = (key: string): KeyedFlashStore => {
-    const { addFlash, clearFlashes, clearAndAddHttpError } = useFlash();
+    const { addFlash, clearFlashes, clearAndAddHttpError } = useFlash()
 
     return {
-        addError: (message, title) => addFlash({ key, message, title, type: 'error' }),
+        addError: (message, title) =>
+            addFlash({ key, message, title, type: 'error' }),
         clearFlashes: () => clearFlashes(key),
-        clearAndAddHttpError: (error) => clearAndAddHttpError({ key, error }),
-    };
-};
+        clearAndAddHttpError: error => clearAndAddHttpError({ key, error }),
+    }
+}
 
-export { useFlashKey };
-export default useFlash;
+export { useFlashKey }
+export default useFlash
diff --git a/resources/scripts/util/useNotify.ts b/resources/scripts/util/useNotify.ts
index 8d2c0c3886b..afb75085495 100644
--- a/resources/scripts/util/useNotify.ts
+++ b/resources/scripts/util/useNotify.ts
@@ -1,12 +1,13 @@
 import { NotificationProps, showNotification } from '@mantine/notifications'
 
 const useNotify = () => {
-  return (props: Omit<NotificationProps, 'style'>) => showNotification({
-    ...props,
-    style: {
-      transitionTimingFunction: 'cubic-bezier(0.4, 0, 0.2, 1)',
-    },
-  })
+    return (props: Omit<NotificationProps, 'style'>) =>
+        showNotification({
+            ...props,
+            style: {
+                transitionTimingFunction: 'cubic-bezier(0.4, 0, 0.2, 1)',
+            },
+        })
 }
 
 export default useNotify
diff --git a/resources/scripts/util/usePagination.ts b/resources/scripts/util/usePagination.ts
index ad72f9dee04..2917c035836 100644
--- a/resources/scripts/util/usePagination.ts
+++ b/resources/scripts/util/usePagination.ts
@@ -5,21 +5,20 @@ const usePagination = () => {
     const { search: location } = useLocation()
     const defaultPage = Number(new URLSearchParams(location).get('page') || '1')
     const [page, setPage] = useState(
-      !isNaN(defaultPage) && defaultPage > 0 ? defaultPage : 1
+        !isNaN(defaultPage) && defaultPage > 0 ? defaultPage : 1
     )
 
     // watch for changes in the url and run setPage
     // if the page number is different in useEffect
     // then it will trigger a re-render
     useEffect(() => {
-      const urlPage = Number(new URLSearchParams(location).get('page') || '1')
-      if (!isNaN(urlPage) && urlPage > 0 && urlPage !== page) {
-        setPage(urlPage)
-      }
+        const urlPage = Number(new URLSearchParams(location).get('page') || '1')
+        if (!isNaN(urlPage) && urlPage > 0 && urlPage !== page) {
+            setPage(urlPage)
+        }
     }, [location])
 
-
     return [page, setPage] as [number, Dispatch<SetStateAction<number>>]
 }
 
-export default usePagination
\ No newline at end of file
+export default usePagination
diff --git a/resources/scripts/util/usePersistedState.ts b/resources/scripts/util/usePersistedState.ts
index f5d247677c3..fe4680cb40e 100644
--- a/resources/scripts/util/usePersistedState.ts
+++ b/resources/scripts/util/usePersistedState.ts
@@ -1,4 +1,4 @@
-import { Dispatch, SetStateAction, useEffect, useState } from 'react';
+import { Dispatch, SetStateAction, useEffect, useState } from 'react'
 
 export function usePersistedState<S = undefined>(
     key: string,
@@ -6,19 +6,19 @@ export function usePersistedState<S = undefined>(
 ): [S | undefined, Dispatch<SetStateAction<S | undefined>>] {
     const [state, setState] = useState(() => {
         try {
-            const item = localStorage.getItem(key);
+            const item = localStorage.getItem(key)
 
-            return JSON.parse(item || String(defaultValue));
+            return JSON.parse(item || String(defaultValue))
         } catch (e) {
-            console.warn('Failed to retrieve persisted value from store.', e);
+            console.warn('Failed to retrieve persisted value from store.', e)
 
-            return defaultValue;
+            return defaultValue
         }
-    });
+    })
 
     useEffect(() => {
-        localStorage.setItem(key, JSON.stringify(state));
-    }, [key, state]);
+        localStorage.setItem(key, JSON.stringify(state))
+    }, [key, state])
 
-    return [state, setState];
+    return [state, setState]
 }
diff --git a/resources/scripts/util/validation.ts b/resources/scripts/util/validation.ts
index 4f4afb57a54..7a902ac33ba 100644
--- a/resources/scripts/util/validation.ts
+++ b/resources/scripts/util/validation.ts
@@ -1,5 +1,5 @@
 import { t } from 'i18next'
-import { ZodString, z, ZodNumber } from 'zod'
+import { ZodNumber, ZodString, z } from 'zod'
 
 export const hostname = (string?: ZodString) =>
     (string ?? z.string()).regex(
@@ -13,40 +13,47 @@ export const hostname = (string?: ZodString) =>
     )
 
 export const englishKeyboardCharacters = (string?: ZodString) =>
-    (string ?? z.string()).regex(/^[A-Za-z0-9!@#$%^&*()_+\-=[\]{}|;':",.\/<>?\\ ]*$/, {
-        message: t('errors.invalid_string.english_keyboard_characters', {
-            ns: 'zod',
-            validation: t('english_keyboard_characters', { ns: 'strings' }).toLowerCase(),
-        })!,
-    })
+    (string ?? z.string()).regex(
+        /^[A-Za-z0-9!@#$%^&*()_+\-=[\]{}|;':",.\/<>?\\ ]*$/,
+        {
+            message: t('errors.invalid_string.english_keyboard_characters', {
+                ns: 'zod',
+                validation: t('english_keyboard_characters', {
+                    ns: 'strings',
+                }).toLowerCase(),
+            })!,
+        }
+    )
 
 export const password = (string?: ZodString) =>
-    (string ?? z.string()).regex(/^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#\$%\^&\*])(?=.{8,})/, {
-        message: t('errors.invalid_string.password', {
-            ns: 'zod',
-        })!,
-    })
-
-export const ipAddress = (string?: ZodString) =>
     (string ?? z.string()).regex(
-        /((^\s*((([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])\.){3}([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5]))\s*$)|(^\s*((([0-9A-Fa-f]{1,4}:){7}([0-9A-Fa-f]{1,4}|:))|(([0-9A-Fa-f]{1,4}:){6}(:[0-9A-Fa-f]{1,4}|((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3})|:))|(([0-9A-Fa-f]{1,4}:){5}(((:[0-9A-Fa-f]{1,4}){1,2})|:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3})|:))|(([0-9A-Fa-f]{1,4}:){4}(((:[0-9A-Fa-f]{1,4}){1,3})|((:[0-9A-Fa-f]{1,4})?:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){3}(((:[0-9A-Fa-f]{1,4}){1,4})|((:[0-9A-Fa-f]{1,4}){0,2}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){2}(((:[0-9A-Fa-f]{1,4}){1,5})|((:[0-9A-Fa-f]{1,4}){0,3}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){1}(((:[0-9A-Fa-f]{1,4}){1,6})|((:[0-9A-Fa-f]{1,4}){0,4}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(:(((:[0-9A-Fa-f]{1,4}){1,7})|((:[0-9A-Fa-f]{1,4}){0,5}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:)))(%.+)?\s*$))/,
+        /^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#\$%\^&\*])(?=.{8,})/,
         {
-            message: t('errors.invalid_string.ip_address', {
+            message: t('errors.invalid_string.password', {
                 ns: 'zod',
             })!,
         }
     )
 
-export const macAddress = (string?: ZodString) =>
+export const ipAddress = (string?: ZodString) =>
     (string ?? z.string()).regex(
-        /^([0-9A-Fa-f]{2}[:-]){5}([0-9A-Fa-f]{2})$/,
+        /((^\s*((([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])\.){3}([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5]))\s*$)|(^\s*((([0-9A-Fa-f]{1,4}:){7}([0-9A-Fa-f]{1,4}|:))|(([0-9A-Fa-f]{1,4}:){6}(:[0-9A-Fa-f]{1,4}|((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3})|:))|(([0-9A-Fa-f]{1,4}:){5}(((:[0-9A-Fa-f]{1,4}){1,2})|:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3})|:))|(([0-9A-Fa-f]{1,4}:){4}(((:[0-9A-Fa-f]{1,4}){1,3})|((:[0-9A-Fa-f]{1,4})?:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){3}(((:[0-9A-Fa-f]{1,4}){1,4})|((:[0-9A-Fa-f]{1,4}){0,2}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){2}(((:[0-9A-Fa-f]{1,4}){1,5})|((:[0-9A-Fa-f]{1,4}){0,3}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){1}(((:[0-9A-Fa-f]{1,4}){1,6})|((:[0-9A-Fa-f]{1,4}){0,4}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(:(((:[0-9A-Fa-f]{1,4}){1,7})|((:[0-9A-Fa-f]{1,4}){0,5}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:)))(%.+)?\s*$))/,
         {
-            message: t('errors.invalid_string.mac_address', {
+            message: t('errors.invalid_string.ip_address', {
                 ns: 'zod',
             })!,
         }
     )
 
-export const port = (number?: ZodNumber) => (number ?? z.number()).int().min(1).max(65535)
+export const macAddress = (string?: ZodString) =>
+    (string ?? z.string()).regex(/^([0-9A-Fa-f]{2}[:-]){5}([0-9A-Fa-f]{2})$/, {
+        message: t('errors.invalid_string.mac_address', {
+            ns: 'zod',
+        })!,
+    })
+
+export const port = (number?: ZodNumber) =>
+    (number ?? z.number()).int().min(1).max(65535)
 
-export const vmid = (number?: ZodNumber) => (number ?? z.number()).int().min(100).max(999999999)
+export const vmid = (number?: ZodNumber) =>
+    (number ?? z.number()).int().min(100).max(999999999)
diff --git a/tailwind.config.js b/tailwind.config.js
index 5f5736013b5..54d2030587b 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -50,17 +50,17 @@ module.exports = {
                 sans: ['Inter', ...defaultTheme.fontFamily.sans],
             },
             boxShadow: {
-                'light': '0 4px 4px 0 rgba(0,0,0,.02)'
+                light: '0 4px 4px 0 rgba(0,0,0,.02)',
             },
             screens: {
-                'xs': '512px'
+                xs: '512px',
             },
             borderRadius: {
                 DEFAULT: '5px',
-            }
+            },
         },
     },
     corePlugins: {
-        preflight: false
-    }
+        preflight: false,
+    },
 }
diff --git a/tests/Fixtures/Repositories/Node/CreateRoleData.json b/tests/Fixtures/Repositories/Node/CreateRoleData.json
index 7fff54218c5..04ba24bd39a 100644
--- a/tests/Fixtures/Repositories/Node/CreateRoleData.json
+++ b/tests/Fixtures/Repositories/Node/CreateRoleData.json
@@ -1,3 +1,3 @@
 {
-  "data": null
-}
\ No newline at end of file
+    "data": null
+}
diff --git a/tests/Fixtures/Repositories/Node/CreateUserData.json b/tests/Fixtures/Repositories/Node/CreateUserData.json
index 7fff54218c5..04ba24bd39a 100644
--- a/tests/Fixtures/Repositories/Node/CreateUserData.json
+++ b/tests/Fixtures/Repositories/Node/CreateUserData.json
@@ -1,3 +1,3 @@
 {
-  "data": null
-}
\ No newline at end of file
+    "data": null
+}
diff --git a/tests/Fixtures/Repositories/Node/CreateUserTicketData.json b/tests/Fixtures/Repositories/Node/CreateUserTicketData.json
index 0d1e7173bac..d3bb7d41bfc 100644
--- a/tests/Fixtures/Repositories/Node/CreateUserTicketData.json
+++ b/tests/Fixtures/Repositories/Node/CreateUserTicketData.json
@@ -1,61 +1,61 @@
 {
-  "data": {
-    "cap": {
-      "vms": {
-        "VM.Config.Disk": 1,
-        "VM.Snapshot.Rollback": 1,
-        "VM.PowerMgmt": 1,
-        "VM.Config.Options": 1,
-        "VM.Config.Cloudinit": 1,
-        "VM.Config.CDROM": 1,
-        "VM.Allocate": 1,
-        "VM.Config.CPU": 1,
-        "VM.Audit": 1,
-        "VM.Migrate": 1,
-        "VM.Config.HWType": 1,
-        "VM.Config.Network": 1,
-        "VM.Snapshot": 1,
-        "VM.Config.Memory": 1,
-        "Permissions.Modify": 1,
-        "VM.Monitor": 1,
-        "VM.Backup": 1,
-        "VM.Console": 1,
-        "VM.Clone": 1
-      },
-      "dc": {
-        "Sys.Audit": 1,
-        "SDN.Allocate": 1,
-        "SDN.Audit": 1
-      },
-      "sdn": {
-        "Permissions.Modify": 1,
-        "SDN.Audit": 1,
-        "SDN.Allocate": 1
-      },
-      "access": {
-        "Group.Allocate": 1,
-        "User.Modify": 1,
-        "Permissions.Modify": 1
-      },
-      "nodes": {
-        "Sys.PowerMgmt": 1,
-        "Sys.Console": 1,
-        "Sys.Incoming": 1,
-        "Sys.Modify": 1,
-        "Permissions.Modify": 1,
-        "Sys.Syslog": 1,
-        "Sys.Audit": 1
-      },
-      "storage": {
-        "Permissions.Modify": 1,
-        "Datastore.AllocateSpace": 1,
-        "Datastore.AllocateTemplate": 1,
-        "Datastore.Audit": 1,
-        "Datastore.Allocate": 1
-      }
-    },
-    "username": "advinservers@pve",
-    "ticket": "PVE:advinservers@pve:640E59CA::WEiyIzDYbuwxePvPBmFgbA5n5R6mZeTbJRmau2WoQ83ribi/wVvXEZkeD9uk31h++RuSgn22eMuAw4U7RF00XCfqX/ePgbmIxZk9USjwv5mc273esY2mck3+NibuQnq1Y4r4SBmd3z1prgg4/5d6vSdBddAcpEpQK3ajLwR9dGyoWRznyDpnJlqwd2Sg4z32/bMDI1sm1pwf8rgbRP8qHDQb64i83eQRYlBBe7QtFq3dvIiZAgAX5KakYU/eUBM4fwS9mW0WMwle62YJwcG2aUHD7SQE/TeDkw/9j8DSCiPVfs0r4mRwCH1m8KoWcooM9Zsb7vsxG7h5aqpRh8DzIw==",
-    "CSRFPreventionToken": "240E59CA:mnCMtp+D/lUWmv1EuBX/cQjBHjd7V3WrXH41NdWiIdg"
-  }
-}
\ No newline at end of file
+    "data": {
+        "cap": {
+            "vms": {
+                "VM.Config.Disk": 1,
+                "VM.Snapshot.Rollback": 1,
+                "VM.PowerMgmt": 1,
+                "VM.Config.Options": 1,
+                "VM.Config.Cloudinit": 1,
+                "VM.Config.CDROM": 1,
+                "VM.Allocate": 1,
+                "VM.Config.CPU": 1,
+                "VM.Audit": 1,
+                "VM.Migrate": 1,
+                "VM.Config.HWType": 1,
+                "VM.Config.Network": 1,
+                "VM.Snapshot": 1,
+                "VM.Config.Memory": 1,
+                "Permissions.Modify": 1,
+                "VM.Monitor": 1,
+                "VM.Backup": 1,
+                "VM.Console": 1,
+                "VM.Clone": 1
+            },
+            "dc": {
+                "Sys.Audit": 1,
+                "SDN.Allocate": 1,
+                "SDN.Audit": 1
+            },
+            "sdn": {
+                "Permissions.Modify": 1,
+                "SDN.Audit": 1,
+                "SDN.Allocate": 1
+            },
+            "access": {
+                "Group.Allocate": 1,
+                "User.Modify": 1,
+                "Permissions.Modify": 1
+            },
+            "nodes": {
+                "Sys.PowerMgmt": 1,
+                "Sys.Console": 1,
+                "Sys.Incoming": 1,
+                "Sys.Modify": 1,
+                "Permissions.Modify": 1,
+                "Sys.Syslog": 1,
+                "Sys.Audit": 1
+            },
+            "storage": {
+                "Permissions.Modify": 1,
+                "Datastore.AllocateSpace": 1,
+                "Datastore.AllocateTemplate": 1,
+                "Datastore.Audit": 1,
+                "Datastore.Allocate": 1
+            }
+        },
+        "username": "advinservers@pve",
+        "ticket": "PVE:advinservers@pve:640E59CA::WEiyIzDYbuwxePvPBmFgbA5n5R6mZeTbJRmau2WoQ83ribi/wVvXEZkeD9uk31h++RuSgn22eMuAw4U7RF00XCfqX/ePgbmIxZk9USjwv5mc273esY2mck3+NibuQnq1Y4r4SBmd3z1prgg4/5d6vSdBddAcpEpQK3ajLwR9dGyoWRznyDpnJlqwd2Sg4z32/bMDI1sm1pwf8rgbRP8qHDQb64i83eQRYlBBe7QtFq3dvIiZAgAX5KakYU/eUBM4fwS9mW0WMwle62YJwcG2aUHD7SQE/TeDkw/9j8DSCiPVfs0r4mRwCH1m8KoWcooM9Zsb7vsxG7h5aqpRh8DzIw==",
+        "CSRFPreventionToken": "240E59CA:mnCMtp+D/lUWmv1EuBX/cQjBHjd7V3WrXH41NdWiIdg"
+    }
+}
diff --git a/tests/Fixtures/Repositories/Server/AddUserToServerData.json b/tests/Fixtures/Repositories/Server/AddUserToServerData.json
index 7fff54218c5..04ba24bd39a 100644
--- a/tests/Fixtures/Repositories/Server/AddUserToServerData.json
+++ b/tests/Fixtures/Repositories/Server/AddUserToServerData.json
@@ -1,3 +1,3 @@
 {
-  "data": null
-}
\ No newline at end of file
+    "data": null
+}
diff --git a/tests/Fixtures/Repositories/Server/GetRunningServerStatusData.json b/tests/Fixtures/Repositories/Server/GetRunningServerStatusData.json
index b2be76d4be7..29ebc8f97ec 100644
--- a/tests/Fixtures/Repositories/Server/GetRunningServerStatusData.json
+++ b/tests/Fixtures/Repositories/Server/GetRunningServerStatusData.json
@@ -82,4 +82,4 @@
         "balloon": 4294967296,
         "vmid": 196149490
     }
-}
\ No newline at end of file
+}
diff --git a/tests/Fixtures/Repositories/Server/GetServerConfigData.json b/tests/Fixtures/Repositories/Server/GetServerConfigData.json
index f534a05231a..5cb9a71d69d 100644
--- a/tests/Fixtures/Repositories/Server/GetServerConfigData.json
+++ b/tests/Fixtures/Repositories/Server/GetServerConfigData.json
@@ -1,24 +1,24 @@
 {
-  "data": {
-    "smbios1": "uuid=11fe2c20-4b5e-48b5-bc59-83a7ce139fbd",
-    "cores": 2,
-    "sata0": "local-lvm:vm-608782004-disk-0,discard=on,size=4712M,ssd=1",
-    "nameserver": "1.1.1.1 1.2.3.4",
-    "meta": "creation-qemu=6.2.0,ctime=1661671707",
-    "vga": "serial0",
-    "agent": "1,fstrim_cloned_disks=1",
-    "net0": "virtio=66:87:C3:0D:86:13,bridge=vmbr1",
-    "ipconfig0": "ip=1.1.1.2/24,gw=127.0.0.1",
-    "bios": "ovmf",
-    "searchdomain": "windows.com",
-    "cipassword": "**********",
-    "vmgenid": "bed22ac9-19ae-410d-bd8f-0002213d887b",
-    "name": "windows.com",
-    "boot": "order=sata0",
-    "ide0": "local-lvm:vm-608782004-cloudinit,media=cdrom,size=4M",
-    "description": "# Owner\n\n**John Smith** (CONVOY ID: 239) \n<br>\njohn.smith@example.com\n<br>\n\n# Quick Actions\n\n<a href=\"https://google.com\">Manage Owner</a>\n<br>\n<a href=\"https://google.com\">Manage Server</a>\n\n<a href=\"https://convoypanel.com\"><img src=\"https://imgur.com/I7624db.png\" alt=\"Managed by Convoy watermark\" /></a>",
-    "digest": "47fb9b586691ee1d97020370b9e7bfc8382a2db6",
-    "serial0": "socket",
-    "memory": 2000
-  }
-}
\ No newline at end of file
+    "data": {
+        "smbios1": "uuid=11fe2c20-4b5e-48b5-bc59-83a7ce139fbd",
+        "cores": 2,
+        "sata0": "local-lvm:vm-608782004-disk-0,discard=on,size=4712M,ssd=1",
+        "nameserver": "1.1.1.1 1.2.3.4",
+        "meta": "creation-qemu=6.2.0,ctime=1661671707",
+        "vga": "serial0",
+        "agent": "1,fstrim_cloned_disks=1",
+        "net0": "virtio=66:87:C3:0D:86:13,bridge=vmbr1",
+        "ipconfig0": "ip=1.1.1.2/24,gw=127.0.0.1",
+        "bios": "ovmf",
+        "searchdomain": "windows.com",
+        "cipassword": "**********",
+        "vmgenid": "bed22ac9-19ae-410d-bd8f-0002213d887b",
+        "name": "windows.com",
+        "boot": "order=sata0",
+        "ide0": "local-lvm:vm-608782004-cloudinit,media=cdrom,size=4M",
+        "description": "# Owner\n\n**John Smith** (CONVOY ID: 239) \n<br>\njohn.smith@example.com\n<br>\n\n# Quick Actions\n\n<a href=\"https://google.com\">Manage Owner</a>\n<br>\n<a href=\"https://google.com\">Manage Server</a>\n\n<a href=\"https://convoypanel.com\"><img src=\"https://imgur.com/I7624db.png\" alt=\"Managed by Convoy watermark\" /></a>",
+        "digest": "47fb9b586691ee1d97020370b9e7bfc8382a2db6",
+        "serial0": "socket",
+        "memory": 2000
+    }
+}
diff --git a/tests/Fixtures/Repositories/Server/GetServerMetricsData.hourly.average.json b/tests/Fixtures/Repositories/Server/GetServerMetricsData.hourly.average.json
index 7ceaabe413d..c3aa9dbff3e 100644
--- a/tests/Fixtures/Repositories/Server/GetServerMetricsData.hourly.average.json
+++ b/tests/Fixtures/Repositories/Server/GetServerMetricsData.hourly.average.json
@@ -1,632 +1,632 @@
 {
-  "data": [
-    {
-      "time": 253376897537,
-      "diskread": 0,
-      "diskwrite": 5428.90666666667,
-      "maxdisk": 21474836480,
-      "netout": 0,
-      "mem": 1332021521.06667,
-      "netin": 4096,
-      "maxcpu": 2,
-      "maxmem": 4294967296,
-      "cpu": 0.0113644759559357,
-      "disk": 0
-    },
-    {
-      "cpu": 0.0113214807607675,
-      "maxmem": 4294967296,
-      "disk": 0,
-      "netin": 4096,
-      "maxcpu": 2,
-      "netout": 0,
-      "mem": 1331250926.93333,
-      "diskwrite": 3927.04,
-      "maxdisk": 21474836480,
-      "diskread": 0,
-      "time": 1678658700
-    },
-    {
-      "maxdisk": 21474836480,
-      "diskwrite": 10489.1733333333,
-      "diskread": 3276.8,
-      "time": 253376897537,
-      "cpu": 0.0170032103966255,
-      "maxmem": 4294967296,
-      "disk": 0,
-      "maxcpu": 2,
-      "netin": 4096,
-      "mem": 1343382596.26667,
-      "netout": 4.05
-    },
-    {
-      "diskwrite": 10069.3333333333,
-      "maxdisk": 21474836480,
-      "diskread": 0,
-      "time": 253376897537,
-      "disk": 0,
-      "cpu": 0.0118970293412227,
-      "maxmem": 4294967296,
-      "netin": 4096,
-      "maxcpu": 2,
-      "netout": 0,
-      "mem": 1347614446.93333
-    },
-    {
-      "maxcpu": 2,
-      "netin": 4096,
-      "mem": 1344899345.06667,
-      "netout": 0,
-      "cpu": 0.0123977489456325,
-      "maxmem": 4294967296,
-      "disk": 0,
-      "diskread": 436.906666666667,
-      "time": 253376897537,
-      "maxdisk": 21474836480,
-      "diskwrite": 11378.3466666667
-    },
-    {
-      "mem": 1342481339.73333,
-      "netout": 0,
-      "maxcpu": 2,
-      "netin": 4096,
-      "disk": 0,
-      "maxmem": 4294967296,
-      "cpu": 0.0126453623525865,
-      "time": 253376897537,
-      "diskread": 109.226666666667,
-      "maxdisk": 21474836480,
-      "diskwrite": 8449.70666666667
-    },
-    {
-      "diskwrite": 13240.32,
-      "maxdisk": 21474836480,
-      "time": 253376897537,
-      "diskread": 0,
-      "cpu": 0.012968074303151,
-      "disk": 0,
-      "maxmem": 4294967296,
-      "netout": 0,
-      "mem": 1339253691.73333,
-      "netin": 4096,
-      "maxcpu": 2
-    },
-    {
-      "diskwrite": 9668.26666666666,
-      "maxdisk": 21474836480,
-      "time": 253376897537,
-      "diskread": 0,
-      "disk": 0,
-      "cpu": 0.0123603672657787,
-      "maxmem": 4294967296,
-      "netout": 0,
-      "mem": 1333822122.66667,
-      "netin": 4096,
-      "maxcpu": 2
-    },
-    {
-      "maxmem": 4294967296,
-      "cpu": 0.0152514883366853,
-      "disk": 0,
-      "netout": 0,
-      "mem": 1335813188.26667,
-      "netin": 8192,
-      "maxcpu": 2,
-      "diskwrite": 14981.12,
-      "maxdisk": 21474836480,
-      "time": 253376897537,
-      "diskread": 0
-    },
-    {
-      "maxmem": 4294967296,
-      "disk": 0,
-      "cpu": 0.0118550777202529,
-      "netin": 8192,
-      "maxcpu": 2,
-      "netout": 0,
-      "mem": 1332472900.26667,
-      "diskwrite": 4283.73333333333,
-      "maxdisk": 21474836480,
-      "diskread": 0,
-      "time": 1678659180
-    },
-    {
-      "mem": 1332115046.4,
-      "netout": 0,
-      "maxcpu": 2,
-      "netin": 8192,
-      "cpu": 0.0128462066128611,
-      "maxmem": 4294967296,
-      "disk": 0,
-      "time": 253376897537,
-      "diskread": 0,
-      "maxdisk": 21474836480,
-      "diskwrite": 4027.73333333333
-    },
-    {
-      "diskread": 0,
-      "time": 253376897537,
-      "diskwrite": 4055.04,
-      "maxdisk": 21474836480,
-      "netin": 8192,
-      "maxcpu": 2,
-      "netout": 0,
-      "mem": 1331549525.33333,
-      "disk": 0,
-      "cpu": 0.0113410322035942,
-      "maxmem": 4294967296
-    },
-    {
-      "diskwrite": 4411.73333333333,
-      "maxdisk": 21474836480,
-      "diskread": 0,
-      "time": 253376897537,
-      "cpu": 0.0114681392138177,
-      "maxmem": 4294967296,
-      "disk": 0,
-      "netin": 8192,
-      "maxcpu": 2,
-      "netout": 0,
-      "mem": 1330957789.86667
-    },
-    {
-      "maxdisk": 21474836480,
-      "diskwrite": 5510.82666666667,
-      "diskread": 0,
-      "time": 253376897537,
-      "cpu": 0.0114570343704526,
-      "disk": 0,
-      "maxmem": 4294967296,
-      "maxcpu": 2,
-      "netin": 8192,
-      "mem": 1330737698.13333,
-      "netout": 0
-    },
-    {
-      "diskread": 0,
-      "time": 253376897537,
-      "diskwrite": 4840.10666666667,
-      "maxdisk": 21474836480,
-      "netin": 8192,
-      "maxcpu": 2,
-      "netout": 6.95,
-      "mem": 1330552285.86667,
-      "cpu": 0.0114157942167253,
-      "maxmem": 4294967296,
-      "disk": 0
-    },
-    {
-      "diskwrite": 5002.24,
-      "maxdisk": 21474836480,
-      "time": 253376897537,
-      "diskread": 0,
-      "maxmem": 4294967296,
-      "disk": 0,
-      "cpu": 0.0109340438069896,
-      "netout": 0,
-      "mem": 1329868526.93333,
-      "netin": 8192,
-      "maxcpu": 2
-    },
-    {
-      "diskread": 0,
-      "time": 253376897537,
-      "diskwrite": 5116.58666666667,
-      "maxdisk": 21474836480,
-      "netin": 8192,
-      "maxcpu": 2,
-      "netout": 0,
-      "mem": 1330663014.4,
-      "maxmem": 4294967296,
-      "disk": 0,
-      "cpu": 0.0121194500075251
-    },
-    {
-      "time": 253376897537,
-      "diskread": 0,
-      "diskwrite": 4060.16,
-      "maxdisk": 21474836480,
-      "netout": 0,
-      "mem": 1329899656.53333,
-      "netin": 8192,
-      "maxcpu": 2,
-      "maxmem": 4294967296,
-      "disk": 0,
-      "cpu": 0.011726130606808
-    },
-    {
-      "maxdisk": 21474836480,
-      "diskwrite": 12523.52,
-      "time": 253376897537,
-      "diskread": 3276.8,
-      "cpu": 0.0194379667709997,
-      "maxmem": 4294967296,
-      "disk": 0,
-      "mem": 1340866560,
-      "netout": 0,
-      "maxcpu": 2,
-      "netin": 40.6
-    },
-    {
-      "diskread": 0,
-      "time": 253376897537,
-      "diskwrite": 9178.45333333333,
-      "maxdisk": 21474836480,
-      "netin": 8192,
-      "maxcpu": 2,
-      "netout": 0,
-      "mem": 1350400955.73333,
-      "maxmem": 4294967296,
-      "disk": 0,
-      "cpu": 0.0115200305212655
-    },
-    {
-      "disk": 0,
-      "cpu": 0.0120037110608531,
-      "maxmem": 4294967296,
-      "netin": 1024,
-      "maxcpu": 2,
-      "netout": 0,
-      "mem": 1346232866.13333,
-      "diskwrite": 7197.01333333334,
-      "maxdisk": 21474836480,
-      "diskread": 0,
-      "time": 1678659840
-    },
-    {
-      "diskread": 0,
-      "time": 253376897537,
-      "maxdisk": 21474836480,
-      "diskwrite": 5671.25333333333,
-      "maxcpu": 2,
-      "netin": 1024,
-      "mem": 1343691707.73333,
-      "netout": 48.95,
-      "maxmem": 4294967296,
-      "cpu": 0.0117623531788267,
-      "disk": 0
-    },
-    {
-      "netin": 1024,
-      "maxcpu": 2,
-      "netout": 0,
-      "mem": 1342970880,
-      "maxmem": 4294967296,
-      "cpu": 0.0116909311635697,
-      "disk": 0,
-      "diskread": 0,
-      "time": 253376897537,
-      "diskwrite": 4787.2,
-      "maxdisk": 21474836480
-    },
-    {
-      "maxmem": 4294967296,
-      "disk": 0,
-      "maxdisk": 21474836480,
-      "maxcpu": 2,
-      "time": 1678660020
-    },
-    {
-      "time": 253376897537,
-      "maxcpu": 2,
-      "maxdisk": 21474836480,
-      "maxmem": 4294967296,
-      "disk": 0
-    },
-    {
-      "maxmem": 4294967296,
-      "disk": 0,
-      "maxdisk": 21474836480,
-      "maxcpu": 2,
-      "time": 1678660140
-    },
-    {
-      "maxcpu": 2,
-      "time": 253376897537,
-      "maxmem": 4294967296,
-      "disk": 0,
-      "maxdisk": 21474836480
-    },
-    {
-      "maxcpu": 2,
-      "time": 253376897537,
-      "disk": 0,
-      "maxmem": 4294967296,
-      "maxdisk": 21474836480
-    },
-    {
-      "maxmem": 4294967296,
-      "disk": 0,
-      "maxdisk": 21474836480,
-      "maxcpu": 2,
-      "time": 1678660320
-    },
-    {
-      "maxdisk": 21474836480,
-      "maxmem": 4294967296,
-      "disk": 0,
-      "time": 253376897537,
-      "maxcpu": 2
-    },
-    {
-      "disk": 0,
-      "maxmem": 4294967296,
-      "maxdisk": 21474836480,
-      "maxcpu": 2,
-      "time": 1678660440
-    },
-    {
-      "time": 253376897537,
-      "maxcpu": 2,
-      "maxdisk": 21474836480,
-      "maxmem": 4294967296,
-      "disk": 0
-    },
-    {
-      "maxdisk": 21474836480,
-      "maxmem": 4294967296,
-      "disk": 0,
-      "time": 253376897537,
-      "maxcpu": 2
-    },
-    {
-      "time": 253376897537,
-      "maxcpu": 2,
-      "maxdisk": 21474836480,
-      "disk": 0,
-      "maxmem": 4294967296
-    },
-    {
-      "time": 253376897537,
-      "maxcpu": 2,
-      "maxdisk": 21474836480,
-      "maxmem": 4294967296,
-      "disk": 0
-    },
-    {
-      "maxdisk": 21474836480,
-      "maxmem": 4294967296,
-      "disk": 0,
-      "time": 253376897537,
-      "maxcpu": 2
-    },
-    {
-      "maxcpu": 2,
-      "time": 253376897537,
-      "maxmem": 4294967296,
-      "disk": 0,
-      "maxdisk": 21474836480
-    },
-    {
-      "maxcpu": 2,
-      "time": 253376897537,
-      "maxmem": 4294967296,
-      "disk": 0,
-      "maxdisk": 21474836480
-    },
-    {
-      "disk": 0,
-      "maxmem": 4294967296,
-      "maxdisk": 21474836480,
-      "maxcpu": 2,
-      "time": 1678660920
-    },
-    {
-      "maxmem": 4294967296,
-      "disk": 0,
-      "maxdisk": 21474836480,
-      "maxcpu": 2,
-      "time": 1678660980
-    },
-    {
-      "time": 253376897537,
-      "maxcpu": 2,
-      "maxdisk": 21474836480,
-      "maxmem": 4294967296,
-      "disk": 0
-    },
-    {
-      "time": 253376897537,
-      "maxcpu": 2,
-      "maxdisk": 21474836480,
-      "disk": 0,
-      "maxmem": 4294967296
-    },
-    {
-      "maxdisk": 21474836480,
-      "maxmem": 4294967296,
-      "disk": 0,
-      "time": 253376897537,
-      "maxcpu": 2
-    },
-    {
-      "maxcpu": 2,
-      "time": 253376897537,
-      "disk": 0,
-      "maxmem": 4294967296,
-      "maxdisk": 21474836480
-    },
-    {
-      "time": 253376897537,
-      "maxcpu": 2,
-      "maxdisk": 21474836480,
-      "disk": 0,
-      "maxmem": 4294967296
-    },
-    {
-      "maxcpu": 2,
-      "time": 253376897537,
-      "maxmem": 4294967296,
-      "disk": 0,
-      "maxdisk": 21474836480
-    },
-    {
-      "disk": 0,
-      "maxmem": 4294967296,
-      "maxdisk": 21474836480,
-      "maxcpu": 2,
-      "time": 1678661400
-    },
-    {
-      "maxmem": 4294967296,
-      "disk": 0,
-      "maxdisk": 21474836480,
-      "maxcpu": 2,
-      "time": 1678661460
-    },
-    {
-      "disk": 0,
-      "maxmem": 4294967296,
-      "maxdisk": 21474836480,
-      "maxcpu": 2,
-      "time": 1678661520
-    },
-    {
-      "maxcpu": 2,
-      "time": 253376897537,
-      "disk": 0,
-      "maxmem": 4294967296,
-      "maxdisk": 21474836480
-    },
-    {
-      "disk": 0,
-      "maxmem": 4294967296,
-      "maxdisk": 21474836480,
-      "maxcpu": 2,
-      "time": 1678661640
-    },
-    {
-      "maxcpu": 2,
-      "time": 253376897537,
-      "disk": 0,
-      "maxmem": 4294967296,
-      "maxdisk": 21474836480
-    },
-    {
-      "maxmem": 4294967296,
-      "disk": 0,
-      "maxdisk": 21474836480,
-      "maxcpu": 2,
-      "time": 1678661760
-    },
-    {
-      "maxdisk": 21474836480,
-      "maxmem": 4294967296,
-      "disk": 0,
-      "time": 253376897537,
-      "maxcpu": 2
-    },
-    {
-      "time": 253376897537,
-      "maxcpu": 2,
-      "maxdisk": 21474836480,
-      "disk": 0,
-      "maxmem": 4294967296
-    },
-    {
-      "time": 253376897537,
-      "maxcpu": 2,
-      "maxdisk": 21474836480,
-      "disk": 0,
-      "maxmem": 4294967296
-    },
-    {
-      "maxcpu": 2,
-      "time": 253376897537,
-      "maxmem": 4294967296,
-      "disk": 0,
-      "maxdisk": 21474836480
-    },
-    {
-      "disk": 0,
-      "maxmem": 4294967296,
-      "maxdisk": 21474836480,
-      "maxcpu": 2,
-      "time": 1678662060
-    },
-    {
-      "disk": 0,
-      "maxmem": 4294967296,
-      "maxdisk": 21474836480,
-      "maxcpu": 2,
-      "time": 1678662120
-    },
-    {
-      "maxdisk": 21474836480,
-      "disk": 0,
-      "maxmem": 4294967296,
-      "time": 253376897537,
-      "maxcpu": 2
-    },
-    {
-      "disk": 0,
-      "maxmem": 4294967296,
-      "maxdisk": 21474836480,
-      "maxcpu": 2,
-      "time": 1678662240
-    },
-    {
-      "maxcpu": 2,
-      "time": 253376897537,
-      "maxmem": 4294967296,
-      "disk": 0,
-      "maxdisk": 21474836480
-    },
-    {
-      "maxdisk": 21474836480,
-      "maxmem": 4294967296,
-      "disk": 0,
-      "time": 253376897537,
-      "maxcpu": 2
-    },
-    {
-      "maxcpu": 2,
-      "time": 253376897537,
-      "disk": 0,
-      "maxmem": 4294967296,
-      "maxdisk": 21474836480
-    },
-    {
-      "time": 253376897537,
-      "maxcpu": 2,
-      "maxdisk": 21474836480,
-      "maxmem": 4294967296,
-      "disk": 0
-    },
-    {
-      "maxcpu": 2,
-      "time": 253376897537,
-      "disk": 0,
-      "maxmem": 4294967296,
-      "maxdisk": 21474836480
-    },
-    {
-      "time": 253376897537,
-      "maxcpu": 2,
-      "maxdisk": 21474836480,
-      "disk": 0,
-      "maxmem": 4294967296
-    },
-    {
-      "time": 253376897537,
-      "maxcpu": 2,
-      "maxdisk": 21474836480,
-      "disk": 0,
-      "maxmem": 4294967296
-    },
-    {
-      "time": 253376897537,
-      "maxcpu": 2,
-      "maxdisk": 21474836480,
-      "maxmem": 4294967296,
-      "disk": 0
-    },
-    {
-      "time": 253376897537,
-      "maxcpu": 2,
-      "maxdisk": 21474836480,
-      "maxmem": 4294967296,
-      "disk": 0
-    }
-  ]
-}
\ No newline at end of file
+    "data": [
+        {
+            "time": 253376897537,
+            "diskread": 0,
+            "diskwrite": 5428.90666666667,
+            "maxdisk": 21474836480,
+            "netout": 0,
+            "mem": 1332021521.06667,
+            "netin": 4096,
+            "maxcpu": 2,
+            "maxmem": 4294967296,
+            "cpu": 0.0113644759559357,
+            "disk": 0
+        },
+        {
+            "cpu": 0.0113214807607675,
+            "maxmem": 4294967296,
+            "disk": 0,
+            "netin": 4096,
+            "maxcpu": 2,
+            "netout": 0,
+            "mem": 1331250926.93333,
+            "diskwrite": 3927.04,
+            "maxdisk": 21474836480,
+            "diskread": 0,
+            "time": 1678658700
+        },
+        {
+            "maxdisk": 21474836480,
+            "diskwrite": 10489.1733333333,
+            "diskread": 3276.8,
+            "time": 253376897537,
+            "cpu": 0.0170032103966255,
+            "maxmem": 4294967296,
+            "disk": 0,
+            "maxcpu": 2,
+            "netin": 4096,
+            "mem": 1343382596.26667,
+            "netout": 4.05
+        },
+        {
+            "diskwrite": 10069.3333333333,
+            "maxdisk": 21474836480,
+            "diskread": 0,
+            "time": 253376897537,
+            "disk": 0,
+            "cpu": 0.0118970293412227,
+            "maxmem": 4294967296,
+            "netin": 4096,
+            "maxcpu": 2,
+            "netout": 0,
+            "mem": 1347614446.93333
+        },
+        {
+            "maxcpu": 2,
+            "netin": 4096,
+            "mem": 1344899345.06667,
+            "netout": 0,
+            "cpu": 0.0123977489456325,
+            "maxmem": 4294967296,
+            "disk": 0,
+            "diskread": 436.906666666667,
+            "time": 253376897537,
+            "maxdisk": 21474836480,
+            "diskwrite": 11378.3466666667
+        },
+        {
+            "mem": 1342481339.73333,
+            "netout": 0,
+            "maxcpu": 2,
+            "netin": 4096,
+            "disk": 0,
+            "maxmem": 4294967296,
+            "cpu": 0.0126453623525865,
+            "time": 253376897537,
+            "diskread": 109.226666666667,
+            "maxdisk": 21474836480,
+            "diskwrite": 8449.70666666667
+        },
+        {
+            "diskwrite": 13240.32,
+            "maxdisk": 21474836480,
+            "time": 253376897537,
+            "diskread": 0,
+            "cpu": 0.012968074303151,
+            "disk": 0,
+            "maxmem": 4294967296,
+            "netout": 0,
+            "mem": 1339253691.73333,
+            "netin": 4096,
+            "maxcpu": 2
+        },
+        {
+            "diskwrite": 9668.26666666666,
+            "maxdisk": 21474836480,
+            "time": 253376897537,
+            "diskread": 0,
+            "disk": 0,
+            "cpu": 0.0123603672657787,
+            "maxmem": 4294967296,
+            "netout": 0,
+            "mem": 1333822122.66667,
+            "netin": 4096,
+            "maxcpu": 2
+        },
+        {
+            "maxmem": 4294967296,
+            "cpu": 0.0152514883366853,
+            "disk": 0,
+            "netout": 0,
+            "mem": 1335813188.26667,
+            "netin": 8192,
+            "maxcpu": 2,
+            "diskwrite": 14981.12,
+            "maxdisk": 21474836480,
+            "time": 253376897537,
+            "diskread": 0
+        },
+        {
+            "maxmem": 4294967296,
+            "disk": 0,
+            "cpu": 0.0118550777202529,
+            "netin": 8192,
+            "maxcpu": 2,
+            "netout": 0,
+            "mem": 1332472900.26667,
+            "diskwrite": 4283.73333333333,
+            "maxdisk": 21474836480,
+            "diskread": 0,
+            "time": 1678659180
+        },
+        {
+            "mem": 1332115046.4,
+            "netout": 0,
+            "maxcpu": 2,
+            "netin": 8192,
+            "cpu": 0.0128462066128611,
+            "maxmem": 4294967296,
+            "disk": 0,
+            "time": 253376897537,
+            "diskread": 0,
+            "maxdisk": 21474836480,
+            "diskwrite": 4027.73333333333
+        },
+        {
+            "diskread": 0,
+            "time": 253376897537,
+            "diskwrite": 4055.04,
+            "maxdisk": 21474836480,
+            "netin": 8192,
+            "maxcpu": 2,
+            "netout": 0,
+            "mem": 1331549525.33333,
+            "disk": 0,
+            "cpu": 0.0113410322035942,
+            "maxmem": 4294967296
+        },
+        {
+            "diskwrite": 4411.73333333333,
+            "maxdisk": 21474836480,
+            "diskread": 0,
+            "time": 253376897537,
+            "cpu": 0.0114681392138177,
+            "maxmem": 4294967296,
+            "disk": 0,
+            "netin": 8192,
+            "maxcpu": 2,
+            "netout": 0,
+            "mem": 1330957789.86667
+        },
+        {
+            "maxdisk": 21474836480,
+            "diskwrite": 5510.82666666667,
+            "diskread": 0,
+            "time": 253376897537,
+            "cpu": 0.0114570343704526,
+            "disk": 0,
+            "maxmem": 4294967296,
+            "maxcpu": 2,
+            "netin": 8192,
+            "mem": 1330737698.13333,
+            "netout": 0
+        },
+        {
+            "diskread": 0,
+            "time": 253376897537,
+            "diskwrite": 4840.10666666667,
+            "maxdisk": 21474836480,
+            "netin": 8192,
+            "maxcpu": 2,
+            "netout": 6.95,
+            "mem": 1330552285.86667,
+            "cpu": 0.0114157942167253,
+            "maxmem": 4294967296,
+            "disk": 0
+        },
+        {
+            "diskwrite": 5002.24,
+            "maxdisk": 21474836480,
+            "time": 253376897537,
+            "diskread": 0,
+            "maxmem": 4294967296,
+            "disk": 0,
+            "cpu": 0.0109340438069896,
+            "netout": 0,
+            "mem": 1329868526.93333,
+            "netin": 8192,
+            "maxcpu": 2
+        },
+        {
+            "diskread": 0,
+            "time": 253376897537,
+            "diskwrite": 5116.58666666667,
+            "maxdisk": 21474836480,
+            "netin": 8192,
+            "maxcpu": 2,
+            "netout": 0,
+            "mem": 1330663014.4,
+            "maxmem": 4294967296,
+            "disk": 0,
+            "cpu": 0.0121194500075251
+        },
+        {
+            "time": 253376897537,
+            "diskread": 0,
+            "diskwrite": 4060.16,
+            "maxdisk": 21474836480,
+            "netout": 0,
+            "mem": 1329899656.53333,
+            "netin": 8192,
+            "maxcpu": 2,
+            "maxmem": 4294967296,
+            "disk": 0,
+            "cpu": 0.011726130606808
+        },
+        {
+            "maxdisk": 21474836480,
+            "diskwrite": 12523.52,
+            "time": 253376897537,
+            "diskread": 3276.8,
+            "cpu": 0.0194379667709997,
+            "maxmem": 4294967296,
+            "disk": 0,
+            "mem": 1340866560,
+            "netout": 0,
+            "maxcpu": 2,
+            "netin": 40.6
+        },
+        {
+            "diskread": 0,
+            "time": 253376897537,
+            "diskwrite": 9178.45333333333,
+            "maxdisk": 21474836480,
+            "netin": 8192,
+            "maxcpu": 2,
+            "netout": 0,
+            "mem": 1350400955.73333,
+            "maxmem": 4294967296,
+            "disk": 0,
+            "cpu": 0.0115200305212655
+        },
+        {
+            "disk": 0,
+            "cpu": 0.0120037110608531,
+            "maxmem": 4294967296,
+            "netin": 1024,
+            "maxcpu": 2,
+            "netout": 0,
+            "mem": 1346232866.13333,
+            "diskwrite": 7197.01333333334,
+            "maxdisk": 21474836480,
+            "diskread": 0,
+            "time": 1678659840
+        },
+        {
+            "diskread": 0,
+            "time": 253376897537,
+            "maxdisk": 21474836480,
+            "diskwrite": 5671.25333333333,
+            "maxcpu": 2,
+            "netin": 1024,
+            "mem": 1343691707.73333,
+            "netout": 48.95,
+            "maxmem": 4294967296,
+            "cpu": 0.0117623531788267,
+            "disk": 0
+        },
+        {
+            "netin": 1024,
+            "maxcpu": 2,
+            "netout": 0,
+            "mem": 1342970880,
+            "maxmem": 4294967296,
+            "cpu": 0.0116909311635697,
+            "disk": 0,
+            "diskread": 0,
+            "time": 253376897537,
+            "diskwrite": 4787.2,
+            "maxdisk": 21474836480
+        },
+        {
+            "maxmem": 4294967296,
+            "disk": 0,
+            "maxdisk": 21474836480,
+            "maxcpu": 2,
+            "time": 1678660020
+        },
+        {
+            "time": 253376897537,
+            "maxcpu": 2,
+            "maxdisk": 21474836480,
+            "maxmem": 4294967296,
+            "disk": 0
+        },
+        {
+            "maxmem": 4294967296,
+            "disk": 0,
+            "maxdisk": 21474836480,
+            "maxcpu": 2,
+            "time": 1678660140
+        },
+        {
+            "maxcpu": 2,
+            "time": 253376897537,
+            "maxmem": 4294967296,
+            "disk": 0,
+            "maxdisk": 21474836480
+        },
+        {
+            "maxcpu": 2,
+            "time": 253376897537,
+            "disk": 0,
+            "maxmem": 4294967296,
+            "maxdisk": 21474836480
+        },
+        {
+            "maxmem": 4294967296,
+            "disk": 0,
+            "maxdisk": 21474836480,
+            "maxcpu": 2,
+            "time": 1678660320
+        },
+        {
+            "maxdisk": 21474836480,
+            "maxmem": 4294967296,
+            "disk": 0,
+            "time": 253376897537,
+            "maxcpu": 2
+        },
+        {
+            "disk": 0,
+            "maxmem": 4294967296,
+            "maxdisk": 21474836480,
+            "maxcpu": 2,
+            "time": 1678660440
+        },
+        {
+            "time": 253376897537,
+            "maxcpu": 2,
+            "maxdisk": 21474836480,
+            "maxmem": 4294967296,
+            "disk": 0
+        },
+        {
+            "maxdisk": 21474836480,
+            "maxmem": 4294967296,
+            "disk": 0,
+            "time": 253376897537,
+            "maxcpu": 2
+        },
+        {
+            "time": 253376897537,
+            "maxcpu": 2,
+            "maxdisk": 21474836480,
+            "disk": 0,
+            "maxmem": 4294967296
+        },
+        {
+            "time": 253376897537,
+            "maxcpu": 2,
+            "maxdisk": 21474836480,
+            "maxmem": 4294967296,
+            "disk": 0
+        },
+        {
+            "maxdisk": 21474836480,
+            "maxmem": 4294967296,
+            "disk": 0,
+            "time": 253376897537,
+            "maxcpu": 2
+        },
+        {
+            "maxcpu": 2,
+            "time": 253376897537,
+            "maxmem": 4294967296,
+            "disk": 0,
+            "maxdisk": 21474836480
+        },
+        {
+            "maxcpu": 2,
+            "time": 253376897537,
+            "maxmem": 4294967296,
+            "disk": 0,
+            "maxdisk": 21474836480
+        },
+        {
+            "disk": 0,
+            "maxmem": 4294967296,
+            "maxdisk": 21474836480,
+            "maxcpu": 2,
+            "time": 1678660920
+        },
+        {
+            "maxmem": 4294967296,
+            "disk": 0,
+            "maxdisk": 21474836480,
+            "maxcpu": 2,
+            "time": 1678660980
+        },
+        {
+            "time": 253376897537,
+            "maxcpu": 2,
+            "maxdisk": 21474836480,
+            "maxmem": 4294967296,
+            "disk": 0
+        },
+        {
+            "time": 253376897537,
+            "maxcpu": 2,
+            "maxdisk": 21474836480,
+            "disk": 0,
+            "maxmem": 4294967296
+        },
+        {
+            "maxdisk": 21474836480,
+            "maxmem": 4294967296,
+            "disk": 0,
+            "time": 253376897537,
+            "maxcpu": 2
+        },
+        {
+            "maxcpu": 2,
+            "time": 253376897537,
+            "disk": 0,
+            "maxmem": 4294967296,
+            "maxdisk": 21474836480
+        },
+        {
+            "time": 253376897537,
+            "maxcpu": 2,
+            "maxdisk": 21474836480,
+            "disk": 0,
+            "maxmem": 4294967296
+        },
+        {
+            "maxcpu": 2,
+            "time": 253376897537,
+            "maxmem": 4294967296,
+            "disk": 0,
+            "maxdisk": 21474836480
+        },
+        {
+            "disk": 0,
+            "maxmem": 4294967296,
+            "maxdisk": 21474836480,
+            "maxcpu": 2,
+            "time": 1678661400
+        },
+        {
+            "maxmem": 4294967296,
+            "disk": 0,
+            "maxdisk": 21474836480,
+            "maxcpu": 2,
+            "time": 1678661460
+        },
+        {
+            "disk": 0,
+            "maxmem": 4294967296,
+            "maxdisk": 21474836480,
+            "maxcpu": 2,
+            "time": 1678661520
+        },
+        {
+            "maxcpu": 2,
+            "time": 253376897537,
+            "disk": 0,
+            "maxmem": 4294967296,
+            "maxdisk": 21474836480
+        },
+        {
+            "disk": 0,
+            "maxmem": 4294967296,
+            "maxdisk": 21474836480,
+            "maxcpu": 2,
+            "time": 1678661640
+        },
+        {
+            "maxcpu": 2,
+            "time": 253376897537,
+            "disk": 0,
+            "maxmem": 4294967296,
+            "maxdisk": 21474836480
+        },
+        {
+            "maxmem": 4294967296,
+            "disk": 0,
+            "maxdisk": 21474836480,
+            "maxcpu": 2,
+            "time": 1678661760
+        },
+        {
+            "maxdisk": 21474836480,
+            "maxmem": 4294967296,
+            "disk": 0,
+            "time": 253376897537,
+            "maxcpu": 2
+        },
+        {
+            "time": 253376897537,
+            "maxcpu": 2,
+            "maxdisk": 21474836480,
+            "disk": 0,
+            "maxmem": 4294967296
+        },
+        {
+            "time": 253376897537,
+            "maxcpu": 2,
+            "maxdisk": 21474836480,
+            "disk": 0,
+            "maxmem": 4294967296
+        },
+        {
+            "maxcpu": 2,
+            "time": 253376897537,
+            "maxmem": 4294967296,
+            "disk": 0,
+            "maxdisk": 21474836480
+        },
+        {
+            "disk": 0,
+            "maxmem": 4294967296,
+            "maxdisk": 21474836480,
+            "maxcpu": 2,
+            "time": 1678662060
+        },
+        {
+            "disk": 0,
+            "maxmem": 4294967296,
+            "maxdisk": 21474836480,
+            "maxcpu": 2,
+            "time": 1678662120
+        },
+        {
+            "maxdisk": 21474836480,
+            "disk": 0,
+            "maxmem": 4294967296,
+            "time": 253376897537,
+            "maxcpu": 2
+        },
+        {
+            "disk": 0,
+            "maxmem": 4294967296,
+            "maxdisk": 21474836480,
+            "maxcpu": 2,
+            "time": 1678662240
+        },
+        {
+            "maxcpu": 2,
+            "time": 253376897537,
+            "maxmem": 4294967296,
+            "disk": 0,
+            "maxdisk": 21474836480
+        },
+        {
+            "maxdisk": 21474836480,
+            "maxmem": 4294967296,
+            "disk": 0,
+            "time": 253376897537,
+            "maxcpu": 2
+        },
+        {
+            "maxcpu": 2,
+            "time": 253376897537,
+            "disk": 0,
+            "maxmem": 4294967296,
+            "maxdisk": 21474836480
+        },
+        {
+            "time": 253376897537,
+            "maxcpu": 2,
+            "maxdisk": 21474836480,
+            "maxmem": 4294967296,
+            "disk": 0
+        },
+        {
+            "maxcpu": 2,
+            "time": 253376897537,
+            "disk": 0,
+            "maxmem": 4294967296,
+            "maxdisk": 21474836480
+        },
+        {
+            "time": 253376897537,
+            "maxcpu": 2,
+            "maxdisk": 21474836480,
+            "disk": 0,
+            "maxmem": 4294967296
+        },
+        {
+            "time": 253376897537,
+            "maxcpu": 2,
+            "maxdisk": 21474836480,
+            "disk": 0,
+            "maxmem": 4294967296
+        },
+        {
+            "time": 253376897537,
+            "maxcpu": 2,
+            "maxdisk": 21474836480,
+            "maxmem": 4294967296,
+            "disk": 0
+        },
+        {
+            "time": 253376897537,
+            "maxcpu": 2,
+            "maxdisk": 21474836480,
+            "maxmem": 4294967296,
+            "disk": 0
+        }
+    ]
+}
diff --git a/tests/Fixtures/Repositories/Server/GetServerPendingConfigData.json b/tests/Fixtures/Repositories/Server/GetServerPendingConfigData.json
index ea99d9472f1..f1e8530f0a0 100644
--- a/tests/Fixtures/Repositories/Server/GetServerPendingConfigData.json
+++ b/tests/Fixtures/Repositories/Server/GetServerPendingConfigData.json
@@ -1,12 +1,18 @@
 {
     "data": [
         { "key": "serial0", "value": "socket" },
-        { "key": "ide0", "value": "local-lvm:vm-608782004-cloudinit,media=cdrom,size=4M" },
+        {
+            "key": "ide0",
+            "value": "local-lvm:vm-608782004-cloudinit,media=cdrom,size=4M"
+        },
         {
             "value": "# Owner\n\n**John Smith** (CONVOY ID: 239) \n<br>\njohn.smith@example.com\n<br>\n\n# Quick Actions\n\n<a href=\"https://google.com\">Manage Owner</a>\n<br>\n<a href=\"https://google.com\">Manage Server</a>\n\n<a href=\"https://convoypanel.com\"><img src=\"https://imgur.com/I7624db.png\" alt=\"Managed by Convoy watermark\" /></a>",
             "key": "description"
         },
-        { "value": "e01736a78043499b935d511fa9de3da4a4073e50", "key": "digest" },
+        {
+            "value": "e01736a78043499b935d511fa9de3da4a4073e50",
+            "key": "digest"
+        },
         { "value": 2001, "key": "memory" },
         { "key": "searchdomain", "value": "windows.com" },
         { "key": "bios", "value": "ovmf" },
@@ -21,7 +27,13 @@
         { "key": "net0", "value": "virtio=66:87:C3:0D:86:13,bridge=vmbr1" },
         { "value": "1.1.1.1 1.2.3.4", "key": "nameserver" },
         { "value": "creation-qemu=6.2.0,ctime=1661671707", "key": "meta" },
-        { "value": "local-lvm:vm-608782004-disk-0,discard=on,size=4200M,ssd=1", "key": "sata0" },
-        { "value": "uuid=11fe2c20-4b5e-48b5-bc59-83a7ce139fbd", "key": "smbios1" }
+        {
+            "value": "local-lvm:vm-608782004-disk-0,discard=on,size=4200M,ssd=1",
+            "key": "sata0"
+        },
+        {
+            "value": "uuid=11fe2c20-4b5e-48b5-bc59-83a7ce139fbd",
+            "key": "smbios1"
+        }
     ]
 }
diff --git a/tsconfig.json b/tsconfig.json
index 845358b4d55..9398ab9de59 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -23,4 +23,4 @@
     },
     "include": ["resources/scripts"],
     "references": [{ "path": "./tsconfig.node.json" }]
-}
\ No newline at end of file
+}
diff --git a/tsconfig.node.json b/tsconfig.node.json
index 9d31e2aed93..13b35d0ba87 100644
--- a/tsconfig.node.json
+++ b/tsconfig.node.json
@@ -1,9 +1,9 @@
 {
-  "compilerOptions": {
-    "composite": true,
-    "module": "ESNext",
-    "moduleResolution": "Node",
-    "allowSyntheticDefaultImports": true
-  },
-  "include": ["vite.config.ts"]
+    "compilerOptions": {
+        "composite": true,
+        "module": "ESNext",
+        "moduleResolution": "Node",
+        "allowSyntheticDefaultImports": true
+    },
+    "include": ["vite.config.ts"]
 }
diff --git a/vite.config.ts b/vite.config.ts
index 74eca22747e..18300d5a44c 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,13 +1,18 @@
-import { defineConfig } from 'vite'
-import laravel from 'laravel-vite-plugin'
 import react from '@vitejs/plugin-react-swc'
-import macrosPlugin from 'vite-plugin-babel-macros'
+import laravel from 'laravel-vite-plugin'
 import { visualizer } from 'rollup-plugin-visualizer'
+import { defineConfig } from 'vite'
+import macrosPlugin from 'vite-plugin-babel-macros'
 
 export default defineConfig({
-    plugins: [react(), laravel(['resources/scripts/main.tsx']), macrosPlugin(), visualizer({
-        filename: './public/stats.html',
-    })],
+    plugins: [
+        react(),
+        laravel(['resources/scripts/main.tsx']),
+        macrosPlugin(),
+        visualizer({
+            filename: './public/stats.html',
+        }),
+    ],
     build: {
         target: ['es2020'],
     },